@mannisto/astro-metadata 1.0.2 → 2.0.0-alpha.2

package/src/assets/icons/copy.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M216,28H88A12,12,0,0,0,76,40V76H40A12,12,0,0,0,28,88V216a12,12,0,0,0,12,12H168a12,12,0,0,0,12-12V180h36a12,12,0,0,0,12-12V40A12,12,0,0,0,216,28ZM156,204H52V100H156Zm48-48H180V88a12,12,0,0,0-12-12H100V52H204Z"/></svg>

package/src/assets/icons/seal-check-duotone.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M232,128c0,12.51-17.82,21.95-22.68,33.69-4.68,11.32,1.42,30.65-7.78,39.85s-28.53,3.1-39.85,7.78C150,214.18,140.5,232,128,232s-22-17.82-33.69-22.68c-11.32-4.68-30.65,1.42-39.85-7.78s-3.1-28.53-7.78-39.85C41.82,150,24,140.5,24,128s17.82-22,22.68-33.69C51.36,83,45.26,63.66,54.46,54.46S83,51.36,94.31,46.68C106.05,41.82,115.5,24,128,24S150,41.82,161.69,46.68c11.32,4.68,30.65-1.42,39.85,7.78s3.1,28.53,7.78,39.85C214.18,106.05,232,115.5,232,128Z" opacity="0.2"/><path d="M225.86,102.82c-3.77-3.94-7.67-8-9.14-11.57-1.36-3.27-1.44-8.69-1.52-13.94-.15-9.76-.31-20.82-8-28.51s-18.75-7.85-28.51-8c-5.25-.08-10.67-.16-13.94-1.52-3.56-1.47-7.63-5.37-11.57-9.14C146.28,23.51,138.44,16,128,16s-18.27,7.51-25.18,14.14c-3.94,3.77-8,7.67-11.57,9.14C88,40.64,82.56,40.72,77.31,40.8c-9.76.15-20.82.31-28.51,8S41,67.55,40.8,77.31c-.08,5.25-.16,10.67-1.52,13.94-1.47,3.56-5.37,7.63-9.14,11.57C23.51,109.72,16,117.56,16,128s7.51,18.27,14.14,25.18c3.77,3.94,7.67,8,9.14,11.57,1.36,3.27,1.44,8.69,1.52,13.94.15,9.76.31,20.82,8,28.51s18.75,7.85,28.51,8c5.25.08,10.67.16,13.94,1.52,3.56,1.47,7.63,5.37,11.57,9.14C109.72,232.49,117.56,240,128,240s18.27-7.51,25.18-14.14c3.94-3.77,8-7.67,11.57-9.14,3.27-1.36,8.69-1.44,13.94-1.52,9.76-.15,20.82-.31,28.51-8s7.85-18.75,8-28.51c.08-5.25.16-10.67,1.52-13.94,1.47-3.56,5.37-7.63,9.14-11.57C232.49,146.28,240,138.44,240,128S232.49,109.73,225.86,102.82Zm-11.55,39.29c-4.79,5-9.75,10.17-12.38,16.52-2.52,6.1-2.63,13.07-2.73,19.82-.1,7-.21,14.33-3.32,17.43s-10.39,3.22-17.43,3.32c-6.75.1-13.72.21-19.82,2.73-6.35,2.63-11.52,7.59-16.52,12.38S132,224,128,224s-9.15-4.92-14.11-9.69-10.17-9.75-16.52-12.38c-6.1-2.52-13.07-2.63-19.82-2.73-7-.1-14.33-.21-17.43-3.32s-3.22-10.39-3.32-17.43c-.1-6.75-.21-13.72-2.73-19.82-2.63-6.35-7.59-11.52-12.38-16.52S32,132,32,128s4.92-9.15,9.69-14.11,9.75-10.17,12.38-16.52c2.52-6.1,2.63-13.07,2.73-19.82.1-7,.21-14.33,3.32-17.43S70.51,56.9,77.55,56.8c6.75-.1,13.72-.21,19.82-2.73,6.35-2.63,11.52-7.59,16.52-12.38S124,32,128,32s9.15,4.92,14.11,9.69,10.17,9.75,16.52,12.38c6.1,2.52,13.07,2.63,19.82,2.73,7,.1,14.33.21,17.43,3.32s3.22,10.39,3.32,17.43c.1,6.75.21,13.72,2.73,19.82,2.63,6.35,7.59,11.52,12.38,16.52S224,124,224,128,219.08,137.15,214.31,142.11ZM173.66,98.34a8,8,0,0,1,0,11.32l-56,56a8,8,0,0,1-11.32,0l-24-24a8,8,0,0,1,11.32-11.32L112,148.69l50.34-50.35A8,8,0,0,1,173.66,98.34Z"/></svg>

package/src/assets/icons/seal-question-duotone.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M232,128c0,12.51-17.82,21.95-22.68,33.69-4.68,11.32,1.42,30.64-7.78,39.85s-28.53,3.1-39.85,7.78C150,214.18,140.5,232,128,232s-22-17.82-33.69-22.68c-11.32-4.68-30.65,1.42-39.85-7.78s-3.1-28.53-7.78-39.85C41.82,150,24,140.5,24,128s17.82-22,22.68-33.69C51.36,83,45.26,63.66,54.46,54.46S83,51.36,94.31,46.68C106.05,41.82,115.5,24,128,24S150,41.82,161.69,46.68c11.32,4.68,30.65-1.42,39.85,7.78s3.1,28.53,7.78,39.85C214.18,106.05,232,115.5,232,128Z" opacity="0.2"/><path d="M225.86,102.82c-3.77-3.94-7.67-8-9.14-11.57-1.36-3.27-1.44-8.69-1.52-13.94-.15-9.76-.31-20.82-8-28.51s-18.75-7.85-28.51-8c-5.25-.08-10.67-.16-13.94-1.52-3.56-1.47-7.63-5.37-11.57-9.14C146.28,23.51,138.44,16,128,16s-18.27,7.51-25.18,14.14c-3.94,3.77-8,7.67-11.57,9.14C88,40.64,82.56,40.72,77.31,40.8c-9.76.15-20.82.31-28.51,8S41,67.55,40.8,77.31c-.08,5.25-.16,10.67-1.52,13.94-1.47,3.56-5.37,7.63-9.14,11.57C23.51,109.72,16,117.56,16,128s7.51,18.27,14.14,25.18c3.77,3.94,7.67,8,9.14,11.57,1.36,3.27,1.44,8.69,1.52,13.94.15,9.76.31,20.82,8,28.51s18.75,7.85,28.51,8c5.25.08,10.67.16,13.94,1.52,3.56,1.47,7.63,5.37,11.57,9.14C109.72,232.49,117.56,240,128,240s18.27-7.51,25.18-14.14c3.94-3.77,8-7.67,11.57-9.14,3.27-1.36,8.69-1.44,13.94-1.52,9.76-.15,20.82-.31,28.51-8s7.85-18.75,8-28.51c.08-5.25.16-10.67,1.52-13.94,1.47-3.56,5.37-7.63,9.14-11.57C232.49,146.28,240,138.44,240,128S232.49,109.73,225.86,102.82Zm-11.55,39.29c-4.79,5-9.75,10.17-12.38,16.52-2.52,6.1-2.63,13.07-2.73,19.82-.1,7-.21,14.33-3.32,17.43s-10.39,3.22-17.43,3.32c-6.75.1-13.72.21-19.82,2.73-6.35,2.63-11.52,7.59-16.52,12.38S132,224,128,224s-9.15-4.92-14.11-9.69-10.17-9.75-16.52-12.38c-6.1-2.52-13.07-2.63-19.82-2.73-7-.1-14.33-.21-17.43-3.32s-3.22-10.39-3.32-17.43c-.1-6.75-.21-13.72-2.73-19.82-2.63-6.35-7.59-11.52-12.38-16.52S32,132,32,128s4.92-9.15,9.69-14.11,9.75-10.17,12.38-16.52c2.52-6.1,2.63-13.07,2.73-19.82.1-7,.21-14.33,3.32-17.43S70.51,56.9,77.55,56.8c6.75-.1,13.72-.21,19.82-2.73,6.35-2.63,11.52-7.59,16.52-12.38S124,32,128,32s9.15,4.92,14.11,9.69,10.17,9.75,16.52,12.38c6.1,2.52,13.07,2.63,19.82,2.73,7,.1,14.33.21,17.43,3.32s3.22,10.39,3.32,17.43c.1,6.75.21,13.72,2.73,19.82,2.63,6.35,7.59,11.52,12.38,16.52S224,124,224,128,219.08,137.15,214.31,142.11ZM140,180a12,12,0,1,1-12-12A12,12,0,0,1,140,180Zm28-72c0,17.38-13.76,31.93-32,35.28V144a8,8,0,0,1-16,0v-8a8,8,0,0,1,8-8c13.23,0,24-9,24-20s-10.77-20-24-20-24,9-24,20v4a8,8,0,0,1-16,0v-4c0-19.85,17.94-36,40-36S168,88.15,168,108Z"/></svg>

package/src/assets/icons/warning-circle-duotone.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M224,128a96,96,0,1,1-96-96A96,96,0,0,1,224,128Z" opacity="0.2"/><path d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216Zm-8-80V80a8,8,0,0,1,16,0v56a8,8,0,0,1-16,0Zm20,36a12,12,0,1,1-12-12A12,12,0,0,1,140,172Z"/></svg>

package/src/assets/icons/warning-duotone.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M215.46,216H40.54C27.92,216,20,202.79,26.13,192.09L113.59,40.22c6.3-11,22.52-11,28.82,0l87.46,151.87C236,202.79,228.08,216,215.46,216Z" opacity="0.2"/><path d="M236.8,188.09,149.35,36.22h0a24.76,24.76,0,0,0-42.7,0L19.2,188.09a23.51,23.51,0,0,0,0,23.72A24.35,24.35,0,0,0,40.55,224h174.9a24.35,24.35,0,0,0,21.33-12.19A23.51,23.51,0,0,0,236.8,188.09ZM222.93,203.8a8.5,8.5,0,0,1-7.48,4.2H40.55a8.5,8.5,0,0,1-7.48-4.2,7.59,7.59,0,0,1,0-7.72L120.52,44.21a8.75,8.75,0,0,1,15,0l87.45,151.87A7.59,7.59,0,0,1,222.93,203.8ZM120,144V104a8,8,0,0,1,16,0v40a8,8,0,0,1-16,0Zm20,36a12,12,0,1,1-12-12A12,12,0,0,1,140,180Z"/></svg>

package/src/assets/icons/x.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M208.49,191.51a12,12,0,0,1-17,17L128,145,64.49,208.49a12,12,0,0,1-17-17L111,128,47.51,64.49a12,12,0,0,1,17-17L128,111l63.51-63.52a12,12,0,0,1,17,17L145,128Z"/></svg>

package/src/components/Metadata.astro

@@ -0,0 +1,145 @@
+---
+import { localize } from "../lib/config.ts"
+import type { MetadataImage } from "../lib/config.ts"
+import { Favicon } from "../lib/favicon.ts"
+import { Manifest } from "../lib/manifest.ts"
+import { Schema } from "../lib/schema.ts"
+import type { 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, e.g. "article". Defaults to "website". */
+  type?: string
+  /** The Twitter (X) handle of the author, e.g. "@acmewriter". */
+  author?: string
+  /** The canonical path or URL. Defaults to the current 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`.
+   * The output of `Locale.hreflang()` of @mannisto/astro-i18n fits here.
+   */
+  hreflang?: HreflangLink[]
+  /** JSON-LD structured data, e.g. from the `Schema` builders. */
+  schema?: SchemaData | SchemaData[]
+  /** The locale of the localized config values. Defaults to `Astro.currentLocale`. */
+  locale?: string
+}
+
+const props = Astro.props
+const config = Site.config
+const locale = props.locale ?? Astro.currentLocale
+
+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 ?? Astro.url.pathname)
+
+// 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"
+
+const themeColor = config.themeColor
+const manifest = Manifest.url(locale)
+
+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)} />}
+    </>
+  )
+}
+<meta name="twitter:card" content={card} />
+{config.twitter?.site && <meta name="twitter:site" content={config.twitter.site} />}
+{props.author && <meta name="twitter:creator" content={props.author} />}
+
+{
+  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)}
+      />
+    )
+  })
+}
+{
+  props.hreflang?.map((link) => {
+    return <link rel="alternate" hreflang={link.hreflang} href={Site.pageUrl(link.href)} />
+  })
+}
+{
+  props.schema && (
+    <script is:inline type="application/ld+json" set:html={Schema.stringify(props.schema)} />
+  )
+}

package/src/components/index.ts

@@ -0,0 +1,2 @@
+export type { HreflangLink, Props as MetadataProps } from "./Metadata.astro"
+export { default as Metadata } from "./Metadata.astro"

package/src/integration.d.ts

@@ -0,0 +1,112 @@
+import type { AstroIntegration } from "astro"
+
+import type { CheckOptions, CustomRule, HeadData } from "./lib/checks"
+import type { MetadataConfig } from "./lib/config.ts"
+import type { FaviconFile } from "./lib/favicon-files"
+
+export type { FaviconFile, HeadData, MetadataConfig }
+
+/** A check rule of your own, for the `rules.custom` option. */
+export type MetadataRule = CustomRule
+
+export type FaviconOptions = {
+  /**
+   * The path of the source image, relative to the project root. An SVG gives the best
+   * result. A PNG, WebP or JPEG source must be square and at least 512 px.
+   *
+   * @example "./src/assets/logo.svg"
+   */
+  source: string
+  /**
+   * The background color of the Apple icon. iOS shows transparent pixels as black,
+   * so the icon needs a solid color. Defaults to "#ffffff".
+   */
+  background?: string
+  /**
+   * The files to generate. This list replaces the default files. The format comes from
+   * the extension (.ico, .png or .svg), and the use comes from the name, format and size:
+   * `.ico` and `.svg` files get an icon link tag, `apple-touch-icon.png` gets the Apple
+   * link tag, other `.png` files smaller than 192 px get an icon link tag, and `.png`
+   * files of 192 px or larger go into the web app manifest.
+   *
+   * @default
+   * [
+   *   { path: "/favicon.ico", sizes: [16, 32] },
+   *   { path: "/favicon.svg" }, // only for an SVG source
+   *   { path: "/favicon-16.png", size: 16 },
+   *   { path: "/favicon-32.png", size: 32 },
+   *   { path: "/apple-touch-icon.png", size: 180 },
+   *   { path: "/favicon-192.png", size: 192 },
+   *   { path: "/favicon-512.png", size: 512 },
+   * ]
+   */
+  files?: FaviconFile[]
+}
+
+/**
+ * The options of the integration: the site values, which the props of `<Metadata>`
+ * override, and the build features.
+ */
+export type MetadataOptions = MetadataConfig & {
+  /**
+   * Generates the favicon files from one source image.
+   */
+  favicon?: FaviconOptions
+  /**
+   * The debug features: the Metadata app in the Astro dev toolbar (`client`), and the
+   * checks of the built pages in the build log (`build`). Set to false to turn off both.
+   *
+   * @default true
+   * @example { client: true, build: false }
+   */
+  debug?: boolean | { client?: boolean; build?: boolean }
+  /**
+   * The pages to check.
+   */
+  pages?: {
+    /**
+     * The pages without checks, as path patterns without the base. `*` matches one part
+     * of the path, and `**` matches any number of parts. The dev toolbar app shows the
+     * other values of these pages, without problems.
+     *
+     * @example ["/404", "/drafts/**"]
+     */
+    ignore?: string[]
+  }
+  /**
+   * The check rules: turn off rules of the package, and add your own rules.
+   * The rules run in the dev toolbar app and in the build.
+   */
+  rules?: {
+    /**
+     * The ids of the rules to turn off. The ids are in `src/lib/rules.js`.
+     *
+     * @example ["description-short", "og-image-alt-missing"]
+     */
+    ignore?: string[]
+    /** Your own rules. */
+    custom?: MetadataRule[]
+  }
+}
+
+/** The values that the build checks need. */
+export type BuildContext = {
+  /** The output directory of the build. */
+  dir: string
+  root?: URL
+  site?: string
+  base: string
+  /** The path patterns of the pages without checks. */
+  pages?: string[]
+  /** The rules to turn off, and the custom rules. */
+  checks: CheckOptions
+  /** sharp, for the size of the images. Without sharp, the checks skip the size. */
+  sharp?: (file: string) => { metadata(): Promise<{ width?: number; height?: number }> }
+}
+
+/**
+ * The Astro integration of `@mannisto/astro-metadata`. It gives the site values to the
+ * `<Metadata>` component, generates the favicons and the web app manifest, and checks
+ * the metadata of the built pages.
+ */
+export default function metadata(options?: MetadataOptions): AstroIntegration