@salvaft/astro-head v0.1.6

 ✦  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