@salvaft/astro-head
v0.1.6
Published
Pre made head components for Astro
Downloads
2
Readme
✦ Getting Started ✦ Commands ✦ Personal
<link rel="icon" type="image/webp" href="/favicon.webp" />
<link rel="icon" type="image/webp" sizes="196x196" href="/favicon-192.webp" />
<link rel="icon" type="image/webp" sizes="160x160" href="/favicon-160.webp" />
<link rel="icon" type="image/webp" sizes="96x96" href="/favicon-96.webp" />
<link rel="icon" type="image/webp" sizes="64x64" href="/favicon-64.webp" />
<link rel="icon" type="image/webp" sizes="32x32" href="/favicon-32.webp" />
<link rel="icon" type="image/webp" sizes="16x16" href="/favicon-16.webp" />
<link rel="apple-touch-icon" href="/favicon-57.webp" />
<link rel="apple-touch-icon" sizes="114x114" href="/favicon-114.webp" />
<link rel="apple-touch-icon" sizes="72x72" href="/favicon-72.webp" />
<link rel="apple-touch-icon" sizes="144x144" href="/favicon-144.webp" />
<link rel="apple-touch-icon" sizes="60x60" href="/favicon-60.webp" />
<link rel="apple-touch-icon" sizes="120x120" href="/favicon-120.webp" />
<link rel="apple-touch-icon" sizes="76x76" href="/favicon-76.webp" />
<link rel="apple-touch-icon" sizes="152x152" href="/favicon-152.webp" />
<link rel="apple-touch-icon" sizes="180x180" href="/favicon-180.webp" />
<meta
property="og:description"
content="Ingeniero industrial y desarrollador web"
/>
<meta property="og:url" content="https://salvaft.dev" />
<meta property="og:image" content="/headshot-og.webp" />
<meta property="og:image:alt" content="Perfil de Salva Ferradás" />
<meta property="og:locale:alternate" content="en_US" />
<meta property="og:locale:alternate" content="fr_FR" />
<meta property="og:locale" content="es_ES" />
<meta property="og:type" content="website" />
<meta property="og:title" content="salvaft - Desarrollador full-stack" />
<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@salvaft_dev" />
<meta name="twitter:title" content="salvaft - Desarrollador full-stack" />
<meta
name="twitter:description"
content="Ingeniero industrial y desarrollador web"
/>
<meta name="twitter:image" content="https://salvaft.dev/headshot-og.webp" />
🛠️ Stack
- Astro - The web framework for content-driven websites.
- Typescript - JavaScript with syntax for types.
- Vite - Next Generation Frontend Tooling.
🚀 Getting Started
1. Install the package
- I use pnpm to install and manage the dependencies.
# Enable pnpm for MacOS, WSL & Linux:
corepack enable
corepack prepare pnpm@latest --activate
pnpm add @salvaft/astro-head
2. Import the components
import { Favicon, OpenGraph } from "@salvaft/astro-head";
# Pass an image stored in the public folder
# The image will be automatically converted and cropped
<Favicon input="headshot.webp" />
# Pass the opengraph data. Follow the props interface for requirements
<OpenGraph {locales} {og} {twitter} />
See the mock data for reference.
✅ To do...
- [ ] Add site manifest