@mannisto/astro-metadata 1.0.0-alpha.4 → 1.0.0-beta.1

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@mannisto/astro-metadata",
-  "version": "1.0.0-alpha.4",
-  "type": "module",
+  "version": "1.0.0-beta.1",
   "description": "Astro components for managing your page head — metadata, social sharing, favicons, and SEO.",
   "license": "MIT",
+  "type": "module",
   "homepage": "https://github.com/eremannisto/astro-metadata#readme",
   "repository": {
     "type": "git",
@@ -12,14 +12,37 @@
   "bugs": {
     "url": "https://github.com/eremannisto/astro-metadata/issues"
   },
-  "files": ["src", "index.ts"],
+  "keywords": [
+    "astro-component",
+    "astro",
+    "seo",
+    "metadata"
+  ],
   "exports": "./index.ts",
+  "files": [
+    "src",
+    "index.ts"
+  ],
+  "scripts": {
+    "init": "bash scripts/init.sh",
+    "lint": "biome lint ./src ./index.ts",
+    "format": "prettier --write .",
+    "check": "biome lint ./src ./index.ts && prettier --check .",
+    "test:unit": "vitest run",
+    "test:e2e": "playwright test",
+    "test:all": "pnpm run test:unit && pnpm run test:e2e"
+  },
   "peerDependencies": {
     "astro": "^4.3.0 || ^5.0.0"
   },
   "devDependencies": {
+    "@biomejs/biome": "^2.4.3",
+    "@playwright/test": "^1.58.2",
+    "@types/node": "^25.3.0",
     "astro": "^5.17.2",
-    "typescript": "^5.9.3"
-  },
-  "keywords": ["astro-component", "astro", "head", "seo", "meta"]
-}
+    "prettier": "^3.8.1",
+    "prettier-plugin-astro": "^0.14.1",
+    "typescript": "^5.9.3",
+    "vitest": "^4.0.18"
+  }
+}

package/src/components/Canonical.astro

@@ -1,15 +1,11 @@
 ---
-
 export type Props = {
   value?: string
 }
 
-const { 
-  value 
-} = Astro.props
+const { value } = Astro.props
 
 const canonical = value ?? Astro.url.href
-
 ---
 
-<link rel="canonical" href={canonical} />
+<link rel="canonical" href={canonical} />

package/src/components/Description.astro

@@ -1,13 +1,9 @@
 ---
-
 export type Props = {
   value?: string
 }
 
-const { 
-  value 
-} = Astro.props
-
+const { value } = Astro.props
 ---
 
-{value && <meta name="description" content={value} />}
+{value && <meta name="description" content={value} />}

package/src/components/Favicon.astro

@@ -1,21 +1,18 @@
 ---
-
 export type FaviconFile = {
-  path   : string
-  size?  : number
-  theme? : "light" | "dark"
-  apple? : boolean
+  path: string
+  size?: number
+  theme?: "light" | "dark"
+  apple?: boolean
 }
 
 export type Props = {
-  icons     : FaviconFile[]
-  manifest? : string
+  icons: FaviconFile[]
+  manifest?: string
+  sort?: boolean
 }
 
-const { 
-  icons, 
-  manifest 
-} = Astro.props
+const { icons, manifest, sort = true } = Astro.props
 
 /**
  * Detects the MIME type of a favicon file from its extension.
@@ -24,12 +21,11 @@ const {
  * @returns The MIME type of the file.
  */
 function getMimeType(path: string): string {
-  if (path.endsWith(".svg"))  return "image/svg+xml"
-  if (path.endsWith(".png"))  return "image/png"
+  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"
+  if (path.endsWith(".jpg") || path.endsWith(".jpeg")) return "image/jpeg"
+  if (path.endsWith(".ico")) return "image/x-icon"
   return "image/x-icon"
 }
 
@@ -41,40 +37,52 @@ function getMimeType(path: string): string {
  */
 function getMedia(theme?: "light" | "dark"): string | undefined {
   if (theme === "light") return "(prefers-color-scheme: light)"
-  if (theme === "dark")  return "(prefers-color-scheme: dark)"
+  if (theme === "dark") return "(prefers-color-scheme: dark)"
   return undefined
 }
 
-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,
-}))
+/**
+ * Returns a sort priority for a given favicon file.
+ * Lower number = rendered first.
+ *
+ * Order: ico → png → svg → apple → themed variants
+ */
+function getSortOrder(file: FaviconFile): number {
+  if (file.apple) return 4
+  if (file.theme) return 5
+  if (file.path.endsWith(".ico")) return 0
+  if (
+    file.path.endsWith(".png") ||
+    file.path.endsWith(".webp") ||
+    file.path.endsWith(".jpg") ||
+    file.path.endsWith(".jpeg")
+  )
+    return 1
+  if (file.path.endsWith(".svg")) return 2
+  return 3
+}
 
+const sorted = sort ? [...icons].sort((a, b) => getSortOrder(a) - getSortOrder(b)) : icons
+
+const prepared = sorted.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.map((icon) => {
-  if (icon.apple) {
+{
+  prepared.map((icon) => {
+    if (icon.apple) {
+      return <link rel="apple-touch-icon" href={icon.path} sizes={icon.size} />
+    }
+
     return (
-      <link
-        rel="apple-touch-icon"
-        href={icon.path}
-        sizes={icon.size}
-      />
+      <link rel="icon" type={icon.type} href={icon.path} sizes={icon.size} media={icon.media} />
     )
-  }
-
-  return (
-    <link
-      rel="icon"
-      type={icon.type}
-      href={icon.path}
-      sizes={icon.size}
-      media={icon.media}
-    />
-  )
-})}
+  })
+}

package/src/components/Head.astro

@@ -1,30 +1,30 @@
 ---
 import type { ComponentProps } from "astro/types"
-import Title              from "./Title.astro"
-import Description        from "./Description.astro"
-import Canonical          from "./Canonical.astro"
-import Keywords           from "./Keywords.astro"
-import Robots             from "./Robots.astro"
-import OpenGraph          from "./OpenGraph.astro"
-import Twitter            from "./Twitter.astro"
-import Favicon            from "./Favicon.astro"
-import Schema             from "./Schema.astro"
+import Title from "./Title.astro"
+import Description from "./Description.astro"
+import Canonical from "./Canonical.astro"
+import Keywords from "./Keywords.astro"
+import Robots from "./Robots.astro"
+import OpenGraph from "./OpenGraph.astro"
+import Twitter from "./Twitter.astro"
+import Favicon from "./Favicon.astro"
+import Schema from "./Schema.astro"
 import LanguageAlternates from "./LanguageAlternates.astro"
 
 export type Props = {
-  title               : string
-  titleTemplate?      : `${string}%s${string}`
-  description?        : string
-  canonical?          : string
-  keywords?           : string[]
-  charset?            : string
-  viewport?           : string
-  robots?             : ComponentProps<typeof Robots>
-  openGraph?          : ComponentProps<typeof OpenGraph>
-  twitter?            : ComponentProps<typeof Twitter>
-  favicon?            : ComponentProps<typeof Favicon>
-  schema?             : ComponentProps<typeof Schema>
-  languageAlternates? : ComponentProps<typeof LanguageAlternates>["alternates"]
+  title: string
+  titleTemplate?: `${string}%s${string}`
+  description?: string
+  canonical?: string
+  keywords?: string[]
+  charset?: string
+  viewport?: string
+  robots?: ComponentProps<typeof Robots>
+  openGraph?: ComponentProps<typeof OpenGraph>
+  twitter?: ComponentProps<typeof Twitter>
+  favicon?: ComponentProps<typeof Favicon>
+  schema?: ComponentProps<typeof Schema>
+  languageAlternates?: ComponentProps<typeof LanguageAlternates>["alternates"]
 }
 
 const {
@@ -33,7 +33,7 @@ const {
   description,
   canonical,
   keywords,
-  charset  = "UTF-8",
+  charset = "UTF-8",
   viewport = "width=device-width, initial-scale=1.0",
   robots,
   openGraph,
@@ -57,46 +57,47 @@ const {
   <Robots
     index={robots?.index}
     follow={robots?.follow}
-    noArchive={robots?.noArchive}
-    noSnippet={robots?.noSnippet}
+    archive={robots?.archive}
+    snippet={robots?.snippet}
     extra={robots?.extra}
   />
 
-  {languageAlternates && (
-    <LanguageAlternates alternates={languageAlternates} />
-  )}
+  {languageAlternates && <LanguageAlternates alternates={languageAlternates} />}
 
-  {openGraph && (
-    <OpenGraph
-      title={openGraph.title ?? title}
-      description={openGraph.description ?? description}
-      image={openGraph.image}
-      url={openGraph.url ?? canonical}
-      type={openGraph.type}
-      siteName={openGraph.siteName}
-      locale={openGraph.locale}
-    />
-  )}
+  {
+    openGraph && (
+      <OpenGraph
+        title={openGraph.title ?? title}
+        description={openGraph.description ?? description}
+        url={openGraph.url ?? canonical}
+        type={openGraph.type}
+        siteName={openGraph.siteName}
+        locale={openGraph.locale}
+        localeAlternate={openGraph.localeAlternate}
+        image={openGraph.image}
+        video={openGraph.video}
+        audio={openGraph.audio}
+      />
+    )
+  }
 
-  {twitter && (
-    <Twitter
-      title={twitter.title ?? title}
-      description={twitter.description ?? description}
-      image={twitter.image}
-      card={twitter.card}
-      site={twitter.site}
-      creator={twitter.creator}
-    />
-  )}
+  {
+    twitter && (
+      <Twitter
+        title={twitter.title ?? title}
+        description={twitter.description ?? description}
+        image={twitter.image}
+        card={twitter.card}
+        site={twitter.site}
+        creator={twitter.creator}
+        url={twitter.url ?? canonical}
+      />
+    )
+  }
 
-  {favicon && (
-    <Favicon
-      icons={favicon.icons}
-      manifest={favicon.manifest}
-    />
-  )}
+  {favicon && <Favicon icons={favicon.icons} manifest={favicon.manifest} sort={favicon.sort} />}
 
   {schema && <Schema schema={schema.schema} />}
 
   <slot />
-</head>
+</head>

package/src/components/Keywords.astro

@@ -1,13 +1,9 @@
 ---
-
 export type Props = {
   value?: string[]
 }
 
-const { 
-  value = []
-} = Astro.props
-
+const { value = [] } = Astro.props
 ---
 
-{value.length > 0 && <meta name="keywords" content={value.join(", ")} />}
+{value.length > 0 && <meta name="keywords" content={value.join(", ")} />}

package/src/components/LanguageAlternates.astro

@@ -1,7 +1,7 @@
 ---
 export type LanguageAlternate = {
-  href     : string
-  hreflang : string
+  href: string
+  hreflang: string
 }
 
 export type Props = {
@@ -11,10 +11,8 @@ export type Props = {
 const { alternates } = Astro.props
 ---
 
-{alternates.map((alternate) => (
-  <link
-    rel="alternate"
-    href={alternate.href}
-    hreflang={alternate.hreflang}
-  />
-))}
+{
+  alternates.map((alternate) => (
+    <link rel="alternate" href={alternate.href} hreflang={alternate.hreflang} />
+  ))
+}

package/src/components/OpenGraph.astro

@@ -1,39 +1,75 @@
 ---
+export type OpenGraphImage = {
+  url: string
+  secureUrl?: string
+  type?: string
+  alt?: string
+  width?: number
+  height?: number
+}
+
+export type OpenGraphVideo = {
+  url: string
+  secureUrl?: string
+  type?: string
+  width?: number
+  height?: number
+}
+
+export type OpenGraphAudio = {
+  url: string
+  secureUrl?: string
+  type?: string
+}
 
 export type Props = {
-  title?       : string
-  description? : string
-  url?         : string
-  type?        : string
-  siteName?    : string
-  locale?      : string
-  image?       : {
-    url     : string
-    alt?    : string
-    width?  : number
-    height? : number
-  }
+  title?: string
+  description?: string
+  url?: string
+  type?: string
+  siteName?: string
+  locale?: string
+  localeAlternate?: string[]
+  image?: OpenGraphImage
+  video?: OpenGraphVideo
+  audio?: OpenGraphAudio
 }
 
 const {
   title,
   description,
-  image,
   url,
   type = "website",
   siteName,
   locale,
+  localeAlternate,
+  image,
+  video,
+  audio,
 } = Astro.props
-
 ---
 
-{title         && <meta property="og:title"        content={title}                />}
-{description   && <meta property="og:description"  content={description}          />}
-{image?.url    && <meta property="og:image"        content={image.url}            />}
-{image?.alt    && <meta property="og:image:alt"    content={image.alt}            />}
-{image?.width  && <meta property="og:image:width"  content={String(image.width)}  />}
+{title && <meta property="og:title" content={title} />}
+{description && <meta property="og:description" content={description} />}
+{url && <meta property="og:url" content={url} />}
+{type && <meta property="og:type" content={type} />}
+{siteName && <meta property="og:site_name" content={siteName} />}
+{locale && <meta property="og:locale" content={locale} />}
+{localeAlternate?.map((loc: string) => <meta property="og:locale:alternate" content={loc} />)}
+
+{image?.url && <meta property="og:image" content={image.url} />}
+{image?.secureUrl && <meta property="og:image:secure_url" content={image.secureUrl} />}
+{image?.type && <meta property="og:image:type" content={image.type} />}
+{image?.alt && <meta property="og:image:alt" content={image.alt} />}
+{image?.width && <meta property="og:image:width" content={String(image.width)} />}
 {image?.height && <meta property="og:image:height" content={String(image.height)} />}
-{url           && <meta property="og:url"          content={url}                  />}
-{type          && <meta property="og:type"         content={type}                 />}
-{siteName      && <meta property="og:site_name"    content={siteName}             />}
-{locale        && <meta property="og:locale"       content={locale}               />}
+
+{video?.url && <meta property="og:video" content={video.url} />}
+{video?.secureUrl && <meta property="og:video:secure_url" content={video.secureUrl} />}
+{video?.type && <meta property="og:video:type" content={video.type} />}
+{video?.width && <meta property="og:video:width" content={String(video.width)} />}
+{video?.height && <meta property="og:video:height" content={String(video.height)} />}
+
+{audio?.url && <meta property="og:audio" content={audio.url} />}
+{audio?.secureUrl && <meta property="og:audio:secure_url" content={audio.secureUrl} />}
+{audio?.type && <meta property="og:audio:type" content={audio.type} />}

package/src/components/Robots.astro

@@ -1,29 +1,25 @@
 ---
 export type Props = {
-  index?      : boolean
-  follow?     : boolean
-  noArchive?  : boolean
-  noSnippet?  : boolean
-  extra?      : string
+  index?: boolean
+  follow?: boolean
+  archive?: boolean
+  snippet?: boolean
+  extra?: string
 }
 
-const {
-  index = true,
-  follow = true,
-  noArchive,
-  noSnippet,
-  extra,
-} = Astro.props
+const { index = true, follow = true, archive = true, snippet = true, extra } = Astro.props
 
 // Combine the directives into a comma separated string,
 // for example: "index, follow, noarchive, nosnippet"
 const directives = [
   index ? "index" : "noindex",
   follow ? "follow" : "nofollow",
-  noArchive && "noarchive",
-  noSnippet && "nosnippet",
+  !archive ? "noarchive" : null,
+  !snippet ? "nosnippet" : null,
   extra,
-].filter(Boolean).join(", ")
+]
+  .filter(Boolean)
+  .join(", ")
 ---
 
-<meta name="robots" content={directives} />
+<meta name="robots" content={directives} />

package/src/components/Schema.astro

@@ -1,13 +1,9 @@
 ---
-
 export type Props = {
   schema: Record<string, unknown>
 }
 
-const { 
-  schema 
-} = Astro.props
-
+const { schema } = Astro.props
 ---
 
-<script is:inline type="application/ld+json" set:html={JSON.stringify(schema)} />
+<script is:inline type="application/ld+json" set:html={JSON.stringify(schema)} />

package/src/components/Title.astro

@@ -1,15 +1,10 @@
 ---
-
 export type Props = {
-  value     : string
-  template? : `${string}%s${string}`
+  value: string
+  template?: `${string}%s${string}`
 }
 
-const { 
-  value, 
-  template = "%s" 
-} = Astro.props
-
+const { value, template = "%s" } = Astro.props
 ---
 
-<title>{template.replace("%s", value)}</title>
+<title>{template.replace("%s", value)}</title>

package/src/components/Twitter.astro

@@ -1,32 +1,25 @@
 ---
-
 export type Props = {
-  title?       : string
-  description? : string
-  card?        : "summary" | "summary_large_image"
-  site?        : string
-  creator?     : string
-  image? : {
-    url  : string
-    alt? : string
+  title?: string
+  description?: string
+  url?: string
+  card?: "summary" | "summary_large_image" | "player" | "app"
+  site?: string
+  creator?: string
+  image?: {
+    url: string
+    alt?: string
   }
 }
 
-const {
-  title,
-  description,
-  image,
-  card = "summary_large_image",
-  site,
-  creator,
-} = Astro.props
-
+const { title, description, url, card = "summary_large_image", site, creator, image } = Astro.props
 ---
 
-{card        && <meta name="twitter:card"        content={card}        />}
-{title       && <meta name="twitter:title"       content={title}       />}
+{card && <meta name="twitter:card" content={card} />}
+{title && <meta name="twitter:title" content={title} />}
 {description && <meta name="twitter:description" content={description} />}
-{image?.url  && <meta name="twitter:image"       content={image.url}   />}
-{image?.alt  && <meta name="twitter:image:alt"   content={image.alt}   />}
-{site        && <meta name="twitter:site"        content={site}        />}
-{creator     && <meta name="twitter:creator"     content={creator}     />}
+{url && <meta name="twitter:url" content={url} />}
+{image?.url && <meta name="twitter:image" content={image.url} />}
+{image?.alt && <meta name="twitter:image:alt" content={image.alt} />}
+{site && <meta name="twitter:site" content={site} />}
+{creator && <meta name="twitter:creator" content={creator} />}