@mannisto/astro-metadata 2.0.0-alpha.4 → 2.0.0

package/src/components/Metadata.astro

@@ -1,206 +1,34 @@
 ---
-import { localize } from "../lib/config.ts"
-import type { MetadataImage } from "../lib/config.ts"
-import { Favicon } from "../lib/favicon.ts"
-import { i18n } from "../lib/i18n.ts"
-import { Manifest } from "../lib/manifest.ts"
-import { Schema } from "../lib/schema.ts"
-import type { SchemaAuthor, SchemaBreadcrumb, SchemaData } from "../lib/schema.ts"
-import { Site } from "../lib/site.ts"
-import { withBase } from "../lib/url.ts"
-
-export type HreflangLink = {
-  /** The locale of the version, e.g. "en", "fi" or "en-US", or "x-default". */
-  hreflang: string
-  /** The path or URL of the page in that locale. */
-  href: string
-}
-
-export type Props = {
-  /** The page title. The title template of the config adds the site name. */
-  title?: string
-  /** Defaults to the description of the config. */
-  description?: string
-  /** The social image. Defaults to the image of the config. */
-  image?: MetadataImage
-  /**
-   * The Open Graph type. Defaults to "website". "article" also adds the `Article`
-   * structured data, with the title, the description, the image and the dates.
-   */
-  type?: string
-  /**
-   * The author of an article: a name, or `{ name, url, twitter }`. The Twitter (X) handle
-   * gives `twitter:creator`.
-   */
-  author?: SchemaAuthor | SchemaAuthor[]
-  /** The publication date of an article. */
-  published?: Date | string
-  /** The date of the last change of an article. */
-  modified?: Date | string
-  /**
-   * The canonical path or URL. Defaults to the current page. With `@mannisto/astro-i18n`,
-   * the default is the public URL of the page.
-   */
-  canonical?: string
-  /** Set to false to keep the page out of search results. Defaults to true. */
-  index?: boolean
-  /** Set to false to tell search engines not to follow the links. Defaults to true. */
-  follow?: boolean
-  /**
-   * The hreflang links: the page in each locale, and `x-default`. With `@mannisto/astro-i18n`
-   * or the `i18n` option of Astro, the links are made for you. `[]` turns them off.
-   */
-  hreflang?: HreflangLink[]
-  /** The path from the home page to this page. It adds the `BreadcrumbList` structured data. */
-  breadcrumbs?: SchemaBreadcrumb[]
-  /**
-   * Structured data items of your own, e.g. a `Product`. They go into the structured data
-   * of the page, with the site from the config.
-   */
-  schema?: SchemaData | SchemaData[]
-  /**
-   * The locale of the page. Defaults to `Astro.currentLocale`, or the locale of
-   * `@mannisto/astro-i18n`.
-   */
-  locale?: string
-}
+import type { MetadataProps } from "../lib/page.ts"
+import Canonical from "./Canonical.astro"
+import Description from "./Description.astro"
+import Favicon from "./Favicon.astro"
+import Feeds from "./Feeds.astro"
+import LanguageAlternates from "./LanguageAlternates.astro"
+import Manifest from "./Manifest.astro"
+import OpenGraph from "./OpenGraph.astro"
+import Robots from "./Robots.astro"
+import Schema from "./Schema.astro"
+import ThemeColor from "./ThemeColor.astro"
+import Title from "./Title.astro"
+import Twitter from "./Twitter.astro"
+
+export type Props = MetadataProps
 
 const props = Astro.props
-const config = Site.config
-const locale = props.locale ?? Astro.currentLocale ?? i18n?.locale(Astro)
-
-const siteName = Site.name(locale)
-const title = Site.title(props.title, locale)
-const description = props.description ?? localize(config.description, locale)
-const image =
-  props.image ??
-  (config.image ? { ...config.image, alt: localize(config.image.alt, locale) } : undefined)
-
-// Social cards show the page title without the template: og:site_name has the site name
-const socialTitle = props.title ?? siteName
-
-const canonical = Site.pageUrl(props.canonical ?? i18n?.path(Astro) ?? Astro.url.pathname)
-
-// The page in each locale: from the props, or from the i18n setup of the project
-const hreflang = props.hreflang ?? i18n?.alternates(Astro) ?? []
-
-// Search engines index and follow by default, so the tag is only necessary for other values
-const index = props.index ?? config.robots?.index ?? true
-const follow = props.follow ?? config.robots?.follow ?? true
-const robots = [!index && "noindex", !follow && "nofollow", config.robots?.extra]
-  .filter(Boolean)
-  .join(", ")
-
-// Twitter (X) uses the Open Graph title, description and image, so only the tags that
-// are specific to Twitter (X) are necessary
-const card = image ? (config.twitter?.card ?? "summary_large_image") : "summary"
-
-// The authors as a list, for the Twitter (X) handles and the article tags
-const authors = props.author === undefined ? [] : [props.author].flat()
-const creator = authors
-  .map((author) => {
-    return typeof author === "string" ? undefined : author.twitter
-  })
-  .find(Boolean)
-const article = props.type === "article"
-
-const schema = Schema.graph({
-  url: canonical,
-  title: props.title ?? siteName,
-  description,
-  image: image ? Site.url(image.url) : undefined,
-  locale,
-  type: props.type,
-  published: props.published,
-  modified: props.modified,
-  author: props.author,
-  breadcrumbs: props.breadcrumbs,
-  items: props.schema === undefined ? undefined : [props.schema].flat(),
-})
-
-const themeColor = config.themeColor
-const manifest = Manifest.url(locale)
-
-/**
- * Returns a date as an ISO 8601 text. A text stays unchanged.
- */
-function isoDate(value: Date | string): string {
-  return typeof value === "string" ? value : value.toISOString()
-}
-
-const FEED_TYPES = {
-  rss: "application/rss+xml",
-  atom: "application/atom+xml",
-  json: "application/feed+json",
-}
 ---
 
 <meta charset="UTF-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1" />
-{title && <title>{title}</title>}
-{description && <meta name="description" content={description} />}
-<link rel="canonical" href={canonical} />
-{robots && <meta name="robots" content={robots} />}
-{typeof themeColor === "string" && <meta name="theme-color" content={themeColor} />}
-{
-  typeof themeColor === "object" && (
-    <>
-      <meta name="theme-color" content={themeColor.light} media="(prefers-color-scheme: light)" />
-      <meta name="theme-color" content={themeColor.dark} media="(prefers-color-scheme: dark)" />
-    </>
-  )
-}
-
-{socialTitle && <meta property="og:title" content={socialTitle} />}
-{description && <meta property="og:description" content={description} />}
-<meta property="og:url" content={canonical} />
-<meta property="og:type" content={props.type ?? "website"} />
-{siteName && <meta property="og:site_name" content={siteName} />}
-{
-  image && (
-    <>
-      <meta property="og:image" content={Site.url(image.url)} />
-      {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)} />}
-    </>
-  )
-}
-{
-  article && props.published && (
-    <meta property="article:published_time" content={isoDate(props.published)} />
-  )
-}
-{
-  article && props.modified && (
-    <meta property="article:modified_time" content={isoDate(props.modified)} />
-  )
-}
-<meta name="twitter:card" content={card} />
-{config.twitter?.site && <meta name="twitter:site" content={config.twitter.site} />}
-{creator && <meta name="twitter:creator" content={creator} />}
-
-{
-  Favicon.links().map((link) => {
-    return <link rel={link.rel} type={link.type} href={link.href} sizes={link.sizes} />
-  })
-}
-{manifest && <link rel="manifest" href={manifest} />}
-{
-  config.feeds?.map((feed) => {
-    return (
-      <link
-        rel="alternate"
-        type={FEED_TYPES[feed.type ?? "rss"]}
-        title={localize(feed.title, locale)}
-        href={withBase(feed.href)}
-      />
-    )
-  })
-}
-{
-  hreflang.map((link) => {
-    return <link rel="alternate" hreflang={link.hreflang} href={Site.pageUrl(link.href)} />
-  })
-}
-{schema && <script is:inline type="application/ld+json" set:html={Schema.stringify(schema)} />}
+<Title {...props} />
+<Description {...props} />
+<Canonical {...props} />
+<Robots {...props} />
+<ThemeColor />
+<OpenGraph {...props} />
+<Twitter {...props} />
+<Favicon />
+<Manifest {...props} />
+<Feeds {...props} />
+<LanguageAlternates {...props} />
+<Schema {...props} />

package/src/components/OpenGraph.astro

@@ -0,0 +1,70 @@
+---
+import { getConfig, localize } from "../lib/config.ts"
+import {
+  isoDate,
+  pageCanonical,
+  pageDescription,
+  pageHreflang,
+  pageImage,
+  pageLocale,
+  pageOpenGraphLocales,
+} from "../lib/page.ts"
+import type { MetadataProps } from "../lib/page.ts"
+import { url } from "../lib/url.ts"
+
+type Keys =
+  | "title"
+  | "description"
+  | "image"
+  | "type"
+  | "published"
+  | "modified"
+  | "canonical"
+  | "hreflang"
+  | "locale"
+
+export type Props = Pick<MetadataProps, Keys>
+
+const props = Astro.props
+const locale = pageLocale(Astro, props)
+const siteName = localize(getConfig().siteName, locale)
+const description = pageDescription(props, locale)
+const image = pageImage(props, locale)
+const locales = pageOpenGraphLocales(locale, pageHreflang(Astro, props))
+const article = props.type === "article"
+
+// Social cards show the page title without the template: og:site_name has the site name
+const title = props.title ?? siteName
+---
+
+{title && <meta property="og:title" content={title} />}
+{description && <meta property="og:description" content={description} />}
+<meta property="og:url" content={pageCanonical(Astro, props)} />
+<meta property="og:type" content={props.type ?? "website"} />
+{siteName && <meta property="og:site_name" content={siteName} />}
+{locales.locale && <meta property="og:locale" content={locales.locale} />}
+{
+  locales.alternates.map((alternate) => {
+    return <meta property="og:locale:alternate" content={alternate} />
+  })
+}
+{
+  image && (
+    <>
+      <meta property="og:image" content={url(image.url)} />
+      {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)} />}
+    </>
+  )
+}
+{
+  article && props.published && (
+    <meta property="article:published_time" content={isoDate(props.published)} />
+  )
+}
+{
+  article && props.modified && (
+    <meta property="article:modified_time" content={isoDate(props.modified)} />
+  )
+}

package/src/components/Robots.astro

@@ -0,0 +1,10 @@
+---
+import { pageRobots } from "../lib/page.ts"
+import type { MetadataProps } from "../lib/page.ts"
+
+export type Props = Pick<MetadataProps, "index" | "follow">
+
+const robots = pageRobots(Astro.props)
+---
+
+{robots && <meta name="robots" content={robots} />}

package/src/components/Schema.astro

@@ -0,0 +1,42 @@
+---
+import { getConfig, localize } from "../lib/config.ts"
+import { pageCanonical, pageDescription, pageImage, pageLocale } from "../lib/page.ts"
+import type { MetadataProps } from "../lib/page.ts"
+import { Schema } from "../lib/schema.ts"
+import { url } from "../lib/url.ts"
+
+type Keys =
+  | "title"
+  | "description"
+  | "image"
+  | "type"
+  | "published"
+  | "modified"
+  | "author"
+  | "canonical"
+  | "breadcrumbs"
+  | "schema"
+  | "locale"
+
+export type Props = Pick<MetadataProps, Keys>
+
+const props = Astro.props
+const locale = pageLocale(Astro, props)
+const image = pageImage(props, locale)
+
+const schema = Schema.graph({
+  url: pageCanonical(Astro, props),
+  title: props.title ?? localize(getConfig().siteName, locale),
+  description: pageDescription(props, locale),
+  image: image ? url(image.url) : undefined,
+  locale,
+  type: props.type,
+  published: props.published,
+  modified: props.modified,
+  author: props.author,
+  breadcrumbs: props.breadcrumbs,
+  items: props.schema === undefined ? undefined : [props.schema].flat(),
+})
+---
+
+{schema && <script is:inline type="application/ld+json" set:html={Schema.stringify(schema)} />}

package/src/components/ThemeColor.astro

@@ -0,0 +1,15 @@
+---
+import { getConfig } from "../lib/config.ts"
+
+const themeColor = getConfig().themeColor
+---
+
+{typeof themeColor === "string" && <meta name="theme-color" content={themeColor} />}
+{
+  typeof themeColor === "object" && (
+    <>
+      <meta name="theme-color" content={themeColor.light} media="(prefers-color-scheme: light)" />
+      <meta name="theme-color" content={themeColor.dark} media="(prefers-color-scheme: dark)" />
+    </>
+  )
+}

package/src/components/Title.astro

@@ -0,0 +1,10 @@
+---
+import { fullTitle, pageLocale } from "../lib/page.ts"
+import type { MetadataProps } from "../lib/page.ts"
+
+export type Props = Pick<MetadataProps, "title" | "locale">
+
+const title = fullTitle(Astro.props.title, pageLocale(Astro, Astro.props))
+---
+
+{title && <title>{title}</title>}

package/src/components/Twitter.astro

@@ -0,0 +1,21 @@
+---
+import { getConfig } from "../lib/config.ts"
+import { pageAuthors, pageImage } from "../lib/page.ts"
+import type { MetadataProps } from "../lib/page.ts"
+
+export type Props = Pick<MetadataProps, "image" | "author">
+
+// Twitter (X) uses the Open Graph title, description and image, so only the tags that
+// are specific to Twitter (X) are necessary
+const twitter = getConfig().twitter
+const card = pageImage(Astro.props) ? (twitter?.card ?? "summary_large_image") : "summary"
+const creator = pageAuthors(Astro.props)
+  .map((author) => {
+    return typeof author === "string" ? undefined : author.twitter
+  })
+  .find(Boolean)
+---
+
+<meta name="twitter:card" content={card} />
+{twitter?.site && <meta name="twitter:site" content={twitter.site} />}
+{creator && <meta name="twitter:creator" content={creator} />}

package/src/components/index.ts

@@ -1,2 +1,14 @@
-export type { HreflangLink, Props as MetadataProps } from "./Metadata.astro"
+export type { HreflangLink, MetadataProps } from "../lib/page.ts"
+export { default as Canonical } from "./Canonical.astro"
+export { default as Description } from "./Description.astro"
+export { default as Favicon } from "./Favicon.astro"
+export { default as Feeds } from "./Feeds.astro"
+export { default as LanguageAlternates } from "./LanguageAlternates.astro"
+export { default as Manifest } from "./Manifest.astro"
 export { default as Metadata } from "./Metadata.astro"
+export { default as OpenGraph } from "./OpenGraph.astro"
+export { default as Robots } from "./Robots.astro"
+export { default as Schema } from "./Schema.astro"
+export { default as ThemeColor } from "./ThemeColor.astro"
+export { default as Title } from "./Title.astro"
+export { default as Twitter } from "./Twitter.astro"

package/src/integration.js

@@ -8,7 +8,6 @@ import { defaultFaviconFiles, resolveFaviconFiles } from "./lib/favicon-files.js
 
 const NAME = "@mannisto/astro-metadata"
 
-// The site values of the options. The components read them at build time.
 const SITE_KEYS = [
   "siteName",
   "titleTemplate",
@@ -22,7 +21,6 @@ const SITE_KEYS = [
   "schema",
 ]
 
-// The Lit modules of the dev toolbar app
 const LIT_MODULES = [
   "lit",
   "lit/directives/style-map.js",
@@ -285,7 +283,6 @@ function findHtmlFiles(dir) {
     .sort()
 }
 
-// The MIME types of the image files, by their extension
 const MIME_TYPES = {
   ".avif": "image/avif",
   ".gif": "image/gif",
@@ -464,7 +461,6 @@ async function checkPages(context, logger) {
   }
 }
 
-// The path of the check endpoint of the dev server
 const CHECK_PATH = "/__astro-metadata/check"
 
 /**
@@ -546,7 +542,6 @@ export default function metadata(options = {}) {
           })
         }
 
-        // The dev toolbar app runs only in dev, and the `debug` option can turn it off
         const toolbar = command === "dev" && debug.client
         context.root = config.root
         context.site = config.site
@@ -597,7 +592,6 @@ export default function metadata(options = {}) {
           })
         }
 
-        // One route for each favicon file, all with the same endpoint
         if (favicon) {
           for (const file of favicon.files) {
             injectRoute({

package/src/lib/checks.js

@@ -102,7 +102,12 @@ export function isNoindex(head) {
  * @returns {string}
  */
 function trimSlash(path) {
-  return path.length > 1 ? path.replace(/\/+$/, "") : path
+  if (path.length <= 1) return path
+
+  // A loop and not a regular expression: /\/+$/ is slow for a path with many slashes
+  let end = path.length
+  while (end > 0 && path[end - 1] === "/") end--
+  return path.slice(0, end)
 }
 
 /**

package/src/lib/manifest.ts

@@ -117,7 +117,6 @@ export const Manifest = {
       ...manifest.extra,
     }
 
-    // Remove empty fields, so the file has only the values that the config gives
     for (const key of Object.keys(json)) {
       if (json[key] === undefined) delete json[key]
     }

package/src/lib/open-graph.ts

@@ -0,0 +1,54 @@
+/**
+ * Returns the most likely ISO 639-1 language and ISO 3166-1 alpha-2 country of a locale,
+ * or undefined. A numeric region, e.g. "419" in "es-419", is not a country.
+ */
+function languageAndCountry(locale: string): { language: string; country?: string } | undefined {
+  try {
+    const parsed = new Intl.Locale(locale)
+    // "und" is the undefined language: maximize() changes it to "en"
+    if (!parsed.language || parsed.language === "und") return undefined
+
+    const { language, region } = parsed.maximize()
+    if (!/^[a-z]{2}$/.test(language)) return undefined
+    return { language, country: region && /^[A-Z]{2}$/.test(region) ? region : undefined }
+  } catch {
+    return undefined
+  }
+}
+
+/**
+ * Returns a locale in the format of Open Graph: an ISO 639-1 language and an ISO 3166-1
+ * alpha-2 country, e.g. "fi_FI". A locale without a country gets the most likely country
+ * of its language: "fi" becomes "fi_FI", "en" becomes "en_US" and "es-419" becomes "es_ES".
+ * Returns undefined for a locale without this format, e.g. "x-default" or "fil".
+ *
+ * @param locale - A locale, e.g. "fi", "en-GB" or "en_GB".
+ */
+export function openGraphLocale(locale: string | undefined): string | undefined {
+  if (!locale) return undefined
+
+  const value = languageAndCountry(locale.replace("_", "-"))
+  if (!value) return undefined
+
+  const country = value.country ?? languageAndCountry(value.language)?.country
+  return country ? `${value.language}_${country}` : undefined
+}
+
+/**
+ * Returns the other locales of the page in the format of Open Graph, for the
+ * `og:locale:alternate` tags. The list has no duplicates and not the locale of the page.
+ *
+ * @param locale - The locale of the page, e.g. "fi".
+ * @param hreflang - The locales of the hreflang links, e.g. ["en", "fi", "x-default"].
+ */
+export function openGraphAlternates(locale: string | undefined, hreflang: string[]): string[] {
+  const current = openGraphLocale(locale)
+  const alternates = hreflang
+    .map((value) => {
+      return openGraphLocale(value)
+    })
+    .filter((value): value is string => {
+      return value !== undefined && value !== current
+    })
+  return [...new Set(alternates)]
+}