npm - @mannisto/astro-metadata - Versions diffs - 1.0.0-alpha.3 → 1.0.0-alpha.5 - Mend

@mannisto/astro-metadata 1.0.0-alpha.3 → 1.0.0-alpha.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (5) hide show

package/README.md +22 -80
package/index.ts +1 -2
package/package.json +1 -1
package/src/components/Favicon.astro +54 -151
package/src/components/Head.astro +0 -1

package/README.md CHANGED Viewed

@@ -1,6 +1,6 @@
 # Astro Metadata
-![banner](./assets/default/banner.jpg)
+![banner](./assets/banner.png)
 ![npm version](https://img.shields.io/npm/v/@mannisto/astro-metadata)
 ![license](https://img.shields.io/badge/license-MIT-green)
@@ -8,7 +8,6 @@
 Astro components for managing your page head — metadata, social sharing, favicons, and SEO.
 ## Table of contents
 - [Installation](#installation)
@@ -30,7 +29,6 @@ Astro components for managing your page head — metadata, social sharing, favic
   - [Twitter](#twitter)
 - [License](#license)
 ## Installation
 ```bash
 # pnpm
@@ -52,7 +50,6 @@ There are three ways to use this package. Pick what suits your project, or combi
 The simplest approach. Use `Head` in your layout and pass props down from your pages. Charset and viewport are included automatically.
 ```astro
 ---
 // layouts/Layout.astro
 import { Head } from "@mannisto/astro-metadata"
 import type { HeadProps } from "@mannisto/astro-metadata"
@@ -60,7 +57,6 @@ import type { HeadProps } from "@mannisto/astro-metadata"
 interface Props extends HeadProps {}
 const { title, description, ...rest } = Astro.props
 ---
 <html>
@@ -75,13 +71,10 @@ const { title, description, ...rest } = Astro.props
   </body>
 </html>
 ```
 ```astro
 ---
 // pages/index.astro
 import Layout from "../layouts/Layout.astro"
 ---
 <Layout title="Home" description="Welcome to my site">
@@ -91,16 +84,12 @@ import Layout from "../layouts/Layout.astro"
 Best for simple sites where pages pass metadata as props to their layout.
 ### 2. Individual components
 Use components directly inside your own `<head>`. Useful when you only need specific pieces, or want full control over the structure.
 ```astro
 ---
 import { Title, Description, OpenGraph, Favicon } from "@mannisto/astro-metadata"
 ---
 <html>
@@ -120,12 +109,10 @@ import { Title, Description, OpenGraph, Favicon } from "@mannisto/astro-metadata
       }}
     />
     <Favicon
-      icons={{
-        default: {
-          ico: { path: "/favicon.ico" },
-          svg: { path: "/favicon.svg" },
-        },
-      }}
+      icons={[
+        { path: "/favicon.ico" },
+        { path: "/favicon.svg" },
+      ]}
     />
   </head>
   <body>
@@ -136,14 +123,11 @@ import { Title, Description, OpenGraph, Favicon } from "@mannisto/astro-metadata
 Best for when you want to compose only what you need, or when `Head` is too opinionated for your setup.
 ### 3. Metadata utility
 Set metadata in your page, resolve it in your layout. Eliminates prop drilling through nested layout layers.
 ```astro
 ---
 // pages/about.astro
 import { Metadata } from "@mannisto/astro-metadata"
 import Layout from "../layouts/Layout.astro"
@@ -158,17 +142,14 @@ Metadata.set({
     },
   },
 })
 ---
 <Layout>
   <h1>About</h1>
 </Layout>
 ```
 ```astro
 ---
 // layouts/Layout.astro
 import { Head, Metadata } from "@mannisto/astro-metadata"
@@ -177,7 +158,6 @@ const meta = Metadata.resolve({
   description: "Default description",
   titleTemplate: "%s | My Site",
 })
 ---
 <html>
@@ -192,14 +172,12 @@ const meta = Metadata.resolve({
 Best for sites with deeply nested layouts, or when you want to keep metadata co-located with page content.
 ## Components
 <details>
 <summary><strong>Canonical</strong></summary>
 Renders a canonical link tag. Falls back to `Astro.url.href` when no value is provided, so every page gets a canonical tag with zero configuration.
 ```astro
 <Canonical value="https://example.com/page" />
 ```
@@ -210,10 +188,8 @@ Renders a canonical link tag. Falls back to `Astro.url.href` when no value is pr
 </details>
 <details>
 <summary><strong>Description</strong></summary>
 ```astro
 <Description value="Welcome to my site" />
 ```
@@ -224,65 +200,44 @@ Renders a canonical link tag. Falls back to `Astro.url.href` when no value is pr
 </details>
 <details>
 <summary><strong>Favicon</strong></summary>
-Favicon support with dark and light mode variants, multiple formats, and optional cache busting.
+Favicon support with light and dark mode variants and automatic MIME type detection.
 ```astro
 <Favicon
-  icons={{
-    default: {
-      ico:   { path: "/favicon.ico" },
-      svg:   { path: "/favicon.svg" },
-      png:   [{ path: "/favicon-96x96.png", size: 96 }],
-      apple: { path: "/apple-touch-icon.png", size: 180 },
-    },
-    lightMode: {
-      svg: { path: "/favicon-light.svg" },
-    },
-    darkMode: {
-      svg: { path: "/favicon-dark.svg" },
-    },
-  }}
+  icons={[
+    { path: "/favicon.ico" },
+    { path: "/favicon.svg" },
+    { path: "/favicon-96x96.png",    size: 96 },
+    { path: "/apple-touch-icon.png", size: 180, apple: true },
+    { path: "/favicon-dark.svg",     theme: "dark" },
+    { path: "/favicon-light.svg",    theme: "light" },
+  ]}
   manifest="/site.webmanifest"
-  cacheBust
 />
 ```
 | Prop | Type | Description |
 |------|------|-------------|
-| `icons.default` | `FaviconIcons` | Default favicon set |
-| `icons.lightMode` | `FaviconIcons` | Favicons shown in light color scheme |
-| `icons.darkMode` | `FaviconIcons` | Favicons shown in dark color scheme |
+| `icons` | `FaviconFile[]` | List of favicon files |
 | `manifest` | `string` | Path to web app manifest |
-| `cacheBust` | `boolean` | Append `?v={timestamp}` to favicon URLs |
-#### FaviconIcons
-| Prop | Type | Description |
-|------|------|-------------|
-| `ico` | `FaviconFile` | `.ico` favicon |
-| `svg` | `FaviconFile` | `.svg` favicon |
-| `png` | `FaviconFile \| FaviconFile[]` | One or more `.png` favicons |
-| `apple` | `FaviconFile` | Apple touch icon |
 #### FaviconFile
 | Prop | Type | Description |
 |------|------|-------------|
-| `path` | `string` | Path to the file |
+| `path` | `string` | Path to the file. MIME type is detected automatically. |
 | `size` | `number` | Size in pixels. Rendered as `NxN` in the `sizes` attribute. |
+| `theme` | `"light" \| "dark"` | Adds a `prefers-color-scheme` media query |
+| `apple` | `boolean` | Renders as `<link rel="apple-touch-icon">` |
 </details>
 <details>
 <summary><strong>Head</strong></summary>
 Wraps the entire page head and composes all sub-components internally. Charset and viewport are always included and can be overridden if needed.
 ```astro
 <Head
   title="Home"
@@ -297,11 +252,10 @@ Wraps the entire page head and composes all sub-components internally. Charset a
     },
   }}
   favicon={{
-    icons: {
-      default: {
-        ico: { path: "/favicon.ico" },
-      },
-    },
+    icons: [
+      { path: "/favicon.ico" },
+      { path: "/favicon.svg" },
+    ],
   }}
 />
 ```
@@ -323,7 +277,6 @@ Wraps the entire page head and composes all sub-components internally. Charset a
 | `languageAlternates` | `LanguageAlternate[]` | — | Hreflang alternate links |
 #### Slots
 ```astro
 <Head title="My Site">
   <!-- Renders before charset and viewport -->
@@ -336,10 +289,8 @@ Wraps the entire page head and composes all sub-components internally. Charset a
 </details>
 <details>
 <summary><strong>Keywords</strong></summary>
 ```astro
 <Keywords value={["astro", "seo", "metadata"]} />
 ```
@@ -350,12 +301,10 @@ Wraps the entire page head and composes all sub-components internally. Charset a
 </details>
 <details>
 <summary><strong>LanguageAlternates</strong></summary>
 Renders `<link rel="alternate" hreflang>` tags for multilingual sites. Tells search engines which language version to serve for a given region.
 ```astro
 <LanguageAlternates
   alternates={[
@@ -374,7 +323,6 @@ Renders `<link rel="alternate" hreflang>` tags for multilingual sites. Tells sea
 </details>
 <details>
 <summary><strong>OpenGraph</strong></summary>
@@ -410,7 +358,6 @@ Renders Open Graph meta tags for rich previews when your pages are shared on soc
 </details>
 <details>
 <summary><strong>Robots</strong></summary>
@@ -432,7 +379,6 @@ Controls how search engines crawl and index your page. Defaults to `index, follo
 </details>
 <details>
 <summary><strong>Schema</strong></summary>
@@ -454,12 +400,10 @@ Outputs a `<script type="application/ld+json">` tag for structured data. Use it
 </details>
 <details>
 <summary><strong>Title</strong></summary>
 Renders the `<title>` tag. The template must contain `%s`, which is replaced with the page title — TypeScript enforces this at the type level.
 ```astro
 <Title value="My Page" template="%s | My Site" />
 ```
@@ -471,12 +415,10 @@ Renders the `<title>` tag. The template must contain `%s`, which is replaced wit
 </details>
 <details>
 <summary><strong>Twitter</strong></summary>
 Renders Twitter card meta tags for rich previews on X. When used inside `Head`, `title` and `description` fall back to the page values automatically.
 ```astro
 <Twitter
   card="summary_large_image"

package/index.ts CHANGED Viewed

@@ -20,8 +20,7 @@ export type { Props as RobotsProps             } from "./src/components/Robots.a
 export type { Props as OpenGraphProps          } from "./src/components/OpenGraph.astro"
 export type { Props as TwitterProps            } from "./src/components/Twitter.astro"
 export type { Props as FaviconProps,
-              FaviconFile,
-              FaviconIcons                     } from "./src/components/Favicon.astro"
+              FaviconFile                      } from "./src/components/Favicon.astro"
 export type { Props as SchemaProps             } from "./src/components/Schema.astro"
 export type { Props as LanguageAlternatesProps,
               LanguageAlternate                } from "./src/components/LanguageAlternates.astro"

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@mannisto/astro-metadata",
-  "version": "1.0.0-alpha.3",
+  "version": "1.0.0-alpha.5",
   "type": "module",
   "description": "Astro components for managing your page head — metadata, social sharing, favicons, and SEO.",
   "license": "MIT",

package/src/components/Favicon.astro CHANGED Viewed

@@ -1,177 +1,80 @@
 ---
 export type FaviconFile = {
-  path  : string
-  size? : number
-}
-export type FaviconIcons = {
-  ico?   : FaviconFile
-  png?   : FaviconFile | FaviconFile[]
-  svg?   : FaviconFile
-  apple? : FaviconFile
-}
-type PreparedFile = {
-  path  : string
-  size? : string
-}
-type PreparedIcons = {
-  ico?   : PreparedFile
-  png?   : PreparedFile[]
-  svg?   : PreparedFile
-  apple? : PreparedFile
+  path   : string
+  size?  : number
+  theme? : "light" | "dark"
+  apple? : boolean
 }
 export type Props = {
-  icons: {
-    default?   : FaviconIcons
-    lightMode? : FaviconIcons
-    darkMode?  : FaviconIcons
-  }
-  manifest?  : string
-  cacheBust? : boolean
+  icons     : FaviconFile[]
+  manifest? : string
 }
-const {
-  icons,
-  manifest,
-  cacheBust = false
+const {
+  icons,
+  manifest
 } = Astro.props
-const cacheBustString = cacheBust
-  ? `?v=${Date.now()}`
-  : ""
 /**
- * Prepares a single favicon file by appending the cache bust string
- * and converting the numeric size to the "NxN" format browsers expect.
+ * Detects the MIME type of a favicon file from its extension.
  *
- * @param file - The favicon file to prepare.
- * @returns The prepared favicon file, or undefined if no file was provided.
+ * @param path - The path to the favicon file.
+ * @returns The MIME type of the file.
  */
-function prepareFile(file?: FaviconFile): PreparedFile | undefined {
-  if (!file) return undefined
-  return {
-    path: `${file.path}${cacheBustString}`,
-    size: file.size ? `${file.size}x${file.size}` : undefined,
-  }
+function getMimeType(path: string): string {
+  if (path.endsWith(".svg"))  return "image/svg+xml"
+  if (path.endsWith(".png"))  return "image/png"
+  if (path.endsWith(".webp")) return "image/webp"
+  if (path.endsWith(".jpg") ||
+      path.endsWith(".jpeg")) return "image/jpeg"
+  if (path.endsWith(".ico"))  return "image/x-icon"
+  return "image/x-icon"
 }
 /**
- * Prepares a full set of favicon icons by running each format through prepareFile.
- * Normalizes the png field to always be an array for consistent rendering.
+ * Builds the media query string for a given theme.
  *
- * @param set - The favicon icon set to prepare.
- * @returns The prepared favicon icon set, or undefined if no set was provided.
+ * @param theme - The theme to build the media query for.
+ * @returns The media query string, or undefined if no theme was provided.
  */
-function prepareIcons(set?: FaviconIcons): PreparedIcons | undefined {
-  if (!set) return undefined
-  return {
-    ico:   prepareFile(set.ico),
-    svg:   prepareFile(set.svg),
-    apple: prepareFile(set.apple),
-    png:   set.png
-      ? (Array.isArray(set.png) ? set.png : [set.png]).map((file) => prepareFile(file)!)
-      : undefined,
-  }
+function getMedia(theme?: "light" | "dark"): string | undefined {
+  if (theme === "light") return "(prefers-color-scheme: light)"
+  if (theme === "dark")  return "(prefers-color-scheme: dark)"
+  return undefined
 }
-const prepared = {
-  default:   prepareIcons(icons.default),
-  lightMode: prepareIcons(icons.lightMode),
-  darkMode:  prepareIcons(icons.darkMode),
-}
+const prepared = icons.map((file) => ({
+  path  : file.path,
+  size  : file.size ? `${file.size}x${file.size}` : undefined,
+  type  : getMimeType(file.path),
+  media : getMedia(file.theme),
+  apple : file.apple ?? false,
+}))
 ---
 {manifest && <link rel="manifest" href={manifest} />}
-{prepared.default?.ico && (
-  <link
-    rel="icon"
-    type="image/x-icon"
-    href={prepared.default.ico.path}
-    sizes={prepared.default.ico.size}
-  />
-)}
-{prepared.default?.svg && (
-  <link
-    rel="icon"
-    type="image/svg+xml"
-    href={prepared.default.svg.path}
-    sizes={prepared.default.svg.size}
-  />
-)}
-{prepared.default?.apple && (
-  <link
-    rel="apple-touch-icon"
-    href={prepared.default.apple.path}
-    sizes={prepared.default.apple.size}
-  />
-)}
-{prepared.default?.png?.map((png) => (
-  <link
-    rel="icon"
-    type="image/png"
-    href={png.path}
-    sizes={png.size}
-  />
-))}
-{prepared.lightMode?.ico && (
-  <link
-    rel="icon"
-    type="image/x-icon"
-    href={prepared.lightMode.ico.path}
-    sizes={prepared.lightMode.ico.size}
-    media="(prefers-color-scheme: light)"
-  />
-)}
-{prepared.lightMode?.svg && (
-  <link
-    rel="icon"
-    type="image/svg+xml"
-    href={prepared.lightMode.svg.path}
-    sizes={prepared.lightMode.svg.size}
-    media="(prefers-color-scheme: light)"
-  />
-)}
-{prepared.lightMode?.png?.map((png) => (
-  <link
-    rel="icon"
-    type="image/png"
-    href={png.path}
-    sizes={png.size}
-    media="(prefers-color-scheme: light)"
-  />
-))}
+{prepared.map((icon) => {
+  if (icon.apple) {
+    return (
+      <link
+        rel="apple-touch-icon"
+        href={icon.path}
+        sizes={icon.size}
+      />
+    )
+  }
-{prepared.darkMode?.ico && (
-  <link
-    rel="icon"
-    type="image/x-icon"
-    href={prepared.darkMode.ico.path}
-    sizes={prepared.darkMode.ico.size}
-    media="(prefers-color-scheme: dark)"
-  />
-)}
-{prepared.darkMode?.svg && (
-  <link
-    rel="icon"
-    type="image/svg+xml"
-    href={prepared.darkMode.svg.path}
-    sizes={prepared.darkMode.svg.size}
-    media="(prefers-color-scheme: dark)"
-  />
-)}
-{prepared.darkMode?.png?.map((png) => (
-  <link
-    rel="icon"
-    type="image/png"
-    href={png.path}
-    sizes={png.size}
-    media="(prefers-color-scheme: dark)"
-  />
-))}
+  return (
+    <link
+      rel="icon"
+      type={icon.type}
+      href={icon.path}
+      sizes={icon.size}
+      media={icon.media}
+    />
+  )
+})}

package/src/components/Head.astro CHANGED Viewed

@@ -93,7 +93,6 @@ const {
     <Favicon
       icons={favicon.icons}
       manifest={favicon.manifest}
-      cacheBust={favicon.cacheBust}
     />
   )}