seo 0.13.3 → 0.14.0

package/site-kit/starter/src/components/ui/button.ts

@@ -0,0 +1,51 @@
+import { cn } from '../../lib/cn'
+
+// The button styles. Button.astro uses them, and so can a link that
+// should look like a button.
+export const buttonVariants = {
+  variant: {
+    default: 'bg-primary text-primary-foreground hover:bg-primary-hover',
+    destructive:
+      'bg-destructive text-destructive-foreground hover:bg-destructive-hover',
+    outline:
+      'border border-border bg-card hover:bg-secondary hover:text-foreground',
+    secondary:
+      'bg-secondary text-secondary-foreground hover:bg-secondary-hover',
+    ghost: 'text-foreground-muted hover:bg-foreground/5 hover:text-foreground',
+    link: 'text-primary underline-offset-4 hover:underline',
+    'link-foreground': 'text-foreground underline-offset-4 hover:underline',
+    'link-muted':
+      'text-foreground-muted underline-offset-4 hover:underline hover:text-foreground',
+  },
+  size: {
+    default: 'h-9 px-4 py-2 has-[>svg]:px-3',
+    xs: 'h-7 rounded-md gap-1 px-2.5 text-xs has-[>svg]:px-2 [&_svg:not([class*=size-])]:size-3.5',
+    sm: 'h-8 rounded-lg gap-1.5 px-3 has-[>svg]:px-2.5',
+    lg: 'h-10 rounded-lg px-6 has-[>svg]:px-4',
+    icon: 'size-9',
+    iconSm: 'size-8',
+    iconXs: 'size-7',
+  },
+}
+
+export type ButtonVariant = keyof typeof buttonVariants.variant
+export type ButtonSize = keyof typeof buttonVariants.size
+
+export const buttonBaseStyles = cn(
+  'inline-flex cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded-lg border border-transparent text-sm font-medium no-underline',
+  'transition-all outline-none',
+  'focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/20',
+  'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
+  'disabled:pointer-events-none disabled:opacity-50',
+  '[&_svg]:pointer-events-none [&_svg:not([class*="size-"])]:size-4 shrink-0 [&_svg]:shrink-0',
+)
+
+export const getButtonClasses = (
+  variant: ButtonVariant = 'default',
+  size: ButtonSize = 'default',
+) =>
+  cn(
+    buttonBaseStyles,
+    buttonVariants.variant[variant],
+    buttonVariants.size[size],
+  )

package/site-kit/starter/src/data/parks.json

@@ -0,0 +1,106 @@
+[
+  {
+    "slug": "alder-common",
+    "name": "Alder Common",
+    "region": "Northvale",
+    "areaHectares": 42.5,
+    "opened": 1891,
+    "toilets": true,
+    "cafe": true,
+    "playground": true,
+    "dogs": "yes",
+    "parkingSpaces": 120,
+    "source": "parks-register"
+  },
+  {
+    "slug": "beacon-gardens",
+    "name": "Beacon Gardens",
+    "region": "Northvale",
+    "areaHectares": 6.2,
+    "opened": 1934,
+    "toilets": true,
+    "cafe": false,
+    "playground": false,
+    "dogs": "on leads",
+    "parkingSpaces": null,
+    "source": "parks-register"
+  },
+  {
+    "slug": "cherry-lane-park",
+    "name": "Cherry Lane Park",
+    "region": "Northvale",
+    "areaHectares": 11.8,
+    "opened": 1972,
+    "toilets": false,
+    "cafe": false,
+    "playground": true,
+    "dogs": "yes",
+    "parkingSpaces": 30,
+    "source": "parks-register"
+  },
+  {
+    "slug": "dockside-green",
+    "name": "Dockside Green",
+    "region": "Riverside",
+    "areaHectares": 3.4,
+    "opened": 2009,
+    "toilets": true,
+    "cafe": true,
+    "playground": true,
+    "dogs": "no",
+    "parkingSpaces": 0,
+    "source": "parks-register"
+  },
+  {
+    "slug": "ferry-meadows",
+    "name": "Ferry Meadows",
+    "region": "Riverside",
+    "areaHectares": 58.0,
+    "opened": 1958,
+    "toilets": true,
+    "cafe": true,
+    "playground": true,
+    "dogs": "yes",
+    "parkingSpaces": 260,
+    "source": "parks-register"
+  },
+  {
+    "slug": "mill-pond-park",
+    "name": "Mill Pond Park",
+    "region": "Riverside",
+    "areaHectares": 9.1,
+    "opened": 1903,
+    "toilets": false,
+    "cafe": true,
+    "playground": false,
+    "dogs": "on leads",
+    "parkingSpaces": null,
+    "source": "parks-register"
+  },
+  {
+    "slug": "heath-top",
+    "name": "Heath Top",
+    "region": "Eastmoor",
+    "areaHectares": 74.3,
+    "opened": 1886,
+    "toilets": true,
+    "cafe": false,
+    "playground": false,
+    "dogs": "yes",
+    "parkingSpaces": 85,
+    "source": "parks-register"
+  },
+  {
+    "slug": "quarry-wood",
+    "name": "Quarry Wood",
+    "region": "Eastmoor",
+    "areaHectares": 21.6,
+    "opened": 1995,
+    "toilets": false,
+    "cafe": false,
+    "playground": true,
+    "dogs": "yes",
+    "parkingSpaces": 40,
+    "source": "parks-register"
+  }
+]

package/site-kit/starter/src/data/sources.json

@@ -0,0 +1,11 @@
+[
+  {
+    "id": "parks-register",
+    "name": "Example parks register",
+    "url": "https://example.org/data/parks.csv",
+    "checked": "2026-10-01",
+    "etag": null,
+    "lastModified": null,
+    "sha256": null
+  }
+]

package/site-kit/starter/src/integrations/og-images.ts

@@ -0,0 +1,49 @@
+import { mkdir, readdir, readFile, writeFile } from 'node:fs/promises'
+import { dirname, join, relative } from 'node:path'
+import { fileURLToPath } from 'node:url'
+import type { AstroIntegration } from 'astro'
+import config from '../../site.config.json'
+import { readH1 } from '../lib/og/card'
+import { ogImagePath, pagePathname } from '../lib/og/path'
+import { ogRenderer } from '../lib/og/render'
+
+// Draws one sharing image per page at build time, from the page's real H1,
+// into dist/og/<path>.png. The layout points og:image at the same path, and
+// `seo site check` fails the build when an image is missing.
+export default function ogImages(): AstroIntegration {
+  return {
+    name: 'og-images',
+    hooks: {
+      'astro:build:done': async ({ dir, logger }) => {
+        const out = fileURLToPath(dir)
+        const started = performance.now()
+        const card = await ogRenderer(config)
+        const entries = await readdir(out, {
+          withFileTypes: true,
+          recursive: true,
+        })
+        let drawn = 0
+        for (const entry of entries) {
+          if (!entry.isFile() || !entry.name.endsWith('.html')) continue
+          const file = join(entry.parentPath, entry.name)
+          const path = pagePathname(relative(out, file))
+          if (path === '/404') continue
+          const title = readH1(await readFile(file, 'utf8'))
+          if (!title) {
+            logger.warn(
+              `${relative(out, file)} has no H1, so it gets no image.`,
+            )
+            continue
+          }
+          const target = join(out, ogImagePath(path))
+          await mkdir(dirname(target), { recursive: true })
+          await writeFile(target, await card(title, path))
+          drawn += 1
+        }
+        logger.info(
+          `${drawn} sharing images in ${Math.round(performance.now() - started)} ms`,
+        )
+      },
+    },
+  }
+}

package/site-kit/starter/src/integrations/sitemaps.ts

@@ -0,0 +1,104 @@
+import { readdir, readFile, rm, writeFile } from 'node:fs/promises'
+import { join, relative } from 'node:path'
+import { fileURLToPath } from 'node:url'
+import {
+  buildUrlManifest,
+  hashContent,
+  serializeManifest,
+} from '@iannuttall/seo-graph-core'
+import type { AstroIntegration } from 'astro'
+import { pagePathname } from '../lib/og/path'
+import { absoluteUrl } from '../site'
+
+export const SITEMAP_URL_LIMIT = 5_000
+
+const escapeXml = (value: string) =>
+  value
+    .replaceAll('&', '&')
+    .replaceAll('<', '&lt;')
+    .replaceAll('>', '&gt;')
+    .replaceAll('"', '&quot;')
+    .replaceAll("'", '&apos;')
+
+const xml = (tag: string, entries: string[]) =>
+  `<?xml version="1.0" encoding="UTF-8"?>\n<${tag} xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">\n${entries.join('\n')}\n</${tag}>\n`
+
+// Writes a sitemap index with one file per section, split at 5,000 URLs,
+// from the pages that were really built. No lastmod: a fake date is worse
+// than none. Also writes indexnow.json, the page hashes that
+// scripts/deploy.mjs compares to find the URLs that changed.
+export default function sitemaps(): AstroIntegration {
+  return {
+    name: 'sitemaps',
+    hooks: {
+      'astro:build:done': async ({ dir, logger }) => {
+        const out = fileURLToPath(dir)
+        const entries = await readdir(out, {
+          withFileTypes: true,
+          recursive: true,
+        })
+        const pages: Array<{ url: string; content: string }> = []
+        for (const entry of entries) {
+          if (!entry.isFile()) continue
+          if (/^sitemap.*\.xml$/.test(entry.name)) {
+            await rm(join(entry.parentPath, entry.name))
+            continue
+          }
+          if (!entry.name.endsWith('.html')) continue
+          const file = join(entry.parentPath, entry.name)
+          const path = pagePathname(relative(out, file))
+          if (path === '/404') continue
+          const html = await readFile(file, 'utf8')
+          if (/<meta[^>]+name="robots"[^>]+noindex/i.test(html)) continue
+          pages.push({ url: absoluteUrl(path), content: html })
+        }
+        pages.sort((a, b) => (a.url < b.url ? -1 : a.url > b.url ? 1 : 0))
+
+        const groups = new Map<string, string[]>()
+        for (const { url } of pages) {
+          const parts = new URL(url).pathname.split('/').filter(Boolean)
+          const section = parts.length > 1 ? (parts[0] as string) : 'pages'
+          const group = groups.get(section)
+          if (group) group.push(url)
+          else groups.set(section, [url])
+        }
+        const files: string[] = []
+        for (const [section, urls] of [...groups].sort()) {
+          for (let at = 0; at < urls.length; at += SITEMAP_URL_LIMIT) {
+            const name = `sitemap-${section}-${at / SITEMAP_URL_LIMIT + 1}.xml`
+            const chunk = urls.slice(at, at + SITEMAP_URL_LIMIT)
+            await writeFile(
+              join(out, name),
+              xml(
+                'urlset',
+                chunk.map((url) => `<url><loc>${escapeXml(url)}</loc></url>`),
+              ),
+            )
+            files.push(name)
+          }
+        }
+        await writeFile(
+          join(out, 'sitemap.xml'),
+          xml(
+            'sitemapindex',
+            files.map(
+              (name) =>
+                `<sitemap><loc>${absoluteUrl(`/${name}`)}</loc></sitemap>`,
+            ),
+          ),
+        )
+        await writeFile(
+          join(out, 'indexnow.json'),
+          // Hash the page content only, so a new stylesheet hash does not
+          // mark every page as changed.
+          serializeManifest(
+            buildUrlManifest(pages, (html) =>
+              hashContent(/<main\b[\s\S]*<\/main>/i.exec(html)?.[0] ?? html),
+            ),
+          ),
+        )
+        logger.info(`${pages.length} URLs in ${files.length} sitemap files`)
+      },
+    },
+  }
+}

package/site-kit/starter/src/layouts/Base.astro

@@ -0,0 +1,69 @@
+---
+// The one root layout. It owns the title, description, canonical, sharing
+// tags and JSON-LD for every page, so no page can forget one.
+import '../styles/globals.css'
+import Breadcrumbs from '../components/Breadcrumbs.astro'
+import Footer from '../components/Footer.astro'
+import Header from '../components/Header.astro'
+import { ogImagePath } from '../lib/og/path'
+import { type Breadcrumb, type Faq, pageGraph, serializeGraph } from '../lib/seo'
+import { absoluteUrl, pageTitle, site } from '../site'
+
+interface Props {
+  title: string
+  description: string
+  breadcrumbs?: Breadcrumb[]
+  faqs?: Faq[]
+}
+
+const { title, description, breadcrumbs = [], faqs } = Astro.props
+// One URL form: `/`, `/about`, `/parks/alder-common`.
+const path = Astro.url.pathname.replace(/(?:\/index)?(?:\.html)?\/?$/, '') || '/'
+const canonical = absoluteUrl(path)
+const ogImage = absoluteUrl(ogImagePath(path))
+const crumbs = [{ name: 'Home', path: '/' }, ...breadcrumbs]
+const graph = pageGraph({ name: title, description, path, breadcrumbs: crumbs, faqs })
+const fullTitle = pageTitle(title)
+---
+
+<!doctype html>
+<html lang={site.language}>
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>{fullTitle}</title>
+    <meta name="description" content={description} />
+    <link rel="canonical" href={canonical} />
+    <meta name="color-scheme" content="light dark" />
+    {/* Start both font downloads before the stylesheet is parsed. */}
+    <link rel="preload" href="/fonts/InterLatinVF.woff2" as="font" type="font/woff2" crossorigin="anonymous" />
+    <link rel="preload" href="/fonts/JetBrainsMonoLatinVF.woff2" as="font" type="font/woff2" crossorigin="anonymous" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <link rel="sitemap" href="/sitemap.xml" />
+    <meta property="og:site_name" content={site.name} />
+    <meta property="og:type" content="website" />
+    <meta property="og:title" content={title} />
+    <meta property="og:description" content={description} />
+    <meta property="og:url" content={canonical} />
+    <meta property="og:image" content={ogImage} />
+    <meta property="og:image:width" content="1200" />
+    <meta property="og:image:height" content="630" />
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:image" content={ogImage} />
+    <script type="application/ld+json" set:html={serializeGraph(graph)} />
+  </head>
+  <body class="min-h-screen bg-background text-foreground antialiased">
+    <a
+      class="sr-only focus:not-sr-only focus:absolute focus:left-4 focus:top-4 focus:rounded-lg focus:bg-muted focus:px-3 focus:py-2"
+      href="#main">Skip to content</a
+    >
+    <div class="flex min-h-screen flex-col">
+      <Header />
+      <main id="main" class="site-frame flex-1 py-10">
+        {breadcrumbs.length > 0 && <Breadcrumbs items={crumbs} />}
+        <slot />
+      </main>
+      <Footer />
+    </div>
+  </body>
+</html>

package/site-kit/starter/src/lib/cn.ts

@@ -0,0 +1,5 @@
+// Joins class names and drops empty values. There is no class merging
+// library, so later classes do not remove earlier ones.
+export function cn(...values: Array<string | false | null | undefined>) {
+  return values.filter(Boolean).join(' ')
+}

package/site-kit/starter/src/lib/narrative.ts

@@ -0,0 +1,115 @@
+// Page prose built from the data. Every sentence states a fact from the
+// dataset or a number worked out from it, and a sentence is left out when
+// its fact is missing. Never add what the data cannot show, such as how
+// busy a car park gets or how to travel there. Change the wording here,
+// never page by page.
+import {
+  facilities,
+  formatHectares,
+  listText,
+  type Park,
+  regionFor,
+} from './parks'
+
+// Ages are worked out from the year of the build. The site rebuilds when
+// the data refreshes.
+const YEAR = new Date().getFullYear()
+
+export function answer(park: Park): string {
+  const has = facilities(park)
+  const offer = has.length
+    ? `It has ${listText(has)}`
+    : 'It has no toilets, cafe or playground'
+  return `${park.name} is a park in ${park.region} that covers ${formatHectares(park.areaHectares)} and opened in ${park.opened}. ${offer}, and ${dogsSentence(park)}.`
+}
+
+function dogsSentence(park: Park): string {
+  if (park.dogs === 'yes') return 'dogs are allowed'
+  if (park.dogs === 'on leads') return 'dogs must stay on a lead'
+  return 'dogs are not allowed'
+}
+
+export function story(park: Park): string[] {
+  const region = regionFor(park)
+  const others = region.parks.filter((entry) => entry.slug !== park.slug)
+  const sentences: string[] = []
+
+  const sizes = [...region.parks].sort(
+    (a, b) => b.areaHectares - a.areaHectares,
+  )
+  const rank = sizes.findIndex((entry) => entry.slug === park.slug) + 1
+  if (region.parks.length > 1) {
+    sentences.push(
+      rank === 1
+        ? `It is the largest of the ${region.parks.length} parks in ${region.name}.`
+        : rank === region.parks.length
+          ? `It is the smallest of the ${region.parks.length} parks in ${region.name}.`
+          : `It is number ${rank} of ${region.parks.length} by size in ${region.name}.`,
+    )
+  }
+
+  // Compare with the average of the other parks only at either end of the
+  // range, where the comparison says something a reader can use.
+  const average =
+    others.reduce((sum, entry) => sum + entry.areaHectares, 0) /
+    Math.max(1, others.length)
+  const ratio = average > 0 ? park.areaHectares / average : 1
+  const other =
+    others.length === 1 ? 'the other park there' : 'an average park there'
+  if (others.length && rank === 1 && ratio >= 1.5) {
+    sentences.push(
+      `That makes it about ${Math.round(ratio)} times the size of ${other}.`,
+    )
+  } else if (others.length && rank === region.parks.length && ratio <= 0.67) {
+    sentences.push(
+      `${other.charAt(0).toUpperCase()}${other.slice(1)} is about ${Math.round(1 / ratio)} times its size.`,
+    )
+  }
+
+  const age = YEAR - park.opened
+  if (age >= 100) {
+    sentences.push(`The park opened ${age} years ago, in ${park.opened}.`)
+  }
+
+  if (park.parkingSpaces === null) {
+    sentences.push('The register does not list parking for this park.')
+  } else if (park.parkingSpaces === 0) {
+    sentences.push('The register lists no car park for this park.')
+  } else {
+    sentences.push(`The car park has ${park.parkingSpaces} spaces.`)
+  }
+
+  return sentences
+}
+
+export function faqs(park: Park): Array<{ question: string; answer: string }> {
+  const list = [
+    {
+      question: `Are dogs allowed in ${park.name}?`,
+      answer: `${capitalise(dogsSentence(park))} in ${park.name}.`,
+    },
+    {
+      question: `Does ${park.name} have toilets?`,
+      answer: park.toilets
+        ? `Yes, ${park.name} has public toilets.`
+        : `No, the register lists no public toilets at ${park.name}.`,
+    },
+    {
+      question: `How big is ${park.name}?`,
+      answer: `${park.name} covers ${formatHectares(park.areaHectares)}.`,
+    },
+  ]
+  if (park.parkingSpaces !== null) {
+    list.push({
+      question: `Can you park at ${park.name}?`,
+      answer: park.parkingSpaces
+        ? `Yes, the car park has ${park.parkingSpaces} spaces.`
+        : `No, ${park.name} has no car park.`,
+    })
+  }
+  return list
+}
+
+function capitalise(text: string): string {
+  return text.charAt(0).toUpperCase() + text.slice(1)
+}

package/site-kit/starter/src/lib/og/card.ts

@@ -0,0 +1,85 @@
+// The sharing image for one page, as HTML for Takumi: the page H1 on a
+// plain background, with the site name above and the domain below.
+export const OG_WIDTH = 1200
+export const OG_HEIGHT = 630
+
+const ENTITIES: Record<string, string> = {
+  amp: '&',
+  lt: '<',
+  gt: '>',
+  quot: '"',
+  apos: "'",
+  nbsp: ' ',
+  rsquo: '’',
+  lsquo: '‘',
+  rdquo: '”',
+  ldquo: '“',
+  hellip: '…',
+}
+
+function decode(text: string): string {
+  return text.replace(
+    /&(#x[0-9a-f]+|#\d+|[a-z]+);/gi,
+    (match, code: string) => {
+      if (code.startsWith('#')) {
+        const hex = code[1]?.toLowerCase() === 'x'
+        return String.fromCodePoint(
+          hex ? Number.parseInt(code.slice(2), 16) : Number(code.slice(1)),
+        )
+      }
+      return ENTITIES[code.toLowerCase()] ?? match
+    },
+  )
+}
+
+const escapeHtml = (text: string) =>
+  text.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
+
+// The first H1 of a built page as plain text. Null when there is none.
+export function readH1(html: string): string | null {
+  const match = /<h1\b[^>]*>([\s\S]*?)<\/h1>/i.exec(html)
+  if (!match?.[1]) return null
+  const text = decode(match[1].replace(/<[^>]+>/g, ''))
+    .replace(/\s+/g, ' ')
+    .trim()
+  return text || null
+}
+
+// The site's light theme from src/styles/globals.css, in hex for the
+// renderer, and the same mark as src/components/Logo.astro. Change them
+// here when the theme changes.
+const colors = {
+  surface: '#fafafa',
+  text: '#171717',
+  faint: '#808080',
+  primary: '#0092b8',
+}
+
+export const MARK_SVG = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="${colors.text}"><path d="M16 3c-4 5-7 9-7 13a7 7 0 0 0 6 6.9V29h2v-6.1A7 7 0 0 0 23 16c0-4-3-8-7-13z"/></svg>`
+
+// Longer headings step down so three lines always fit.
+function titleSize(length: number): number {
+  if (length > 60) return 60
+  if (length > 36) return 70
+  return 80
+}
+
+// The page's own path, cut to one line.
+function cardPath(path: string): string {
+  if (path === '/') return ''
+  return path.length > 48 ? `${path.slice(0, 47)}\u2026` : path
+}
+
+// The mark at the top, the page H1 in the middle and the address at the
+// bottom.
+export function ogCardHtml(input: {
+  title: string
+  domain: string
+  path: string
+}): string {
+  return `<div style="width:${OG_WIDTH}px;height:${OG_HEIGHT}px;display:flex;flex-direction:column;justify-content:space-between;padding:72px;background-color:${colors.surface};color:${colors.text};font-family:Inter">
+  <img src="mark.svg" width="64" height="64" alt="" />
+  <h1 style="margin:0;max-width:1000px;font-size:${titleSize(input.title.length)}px;font-weight:600;line-height:1.08;letter-spacing:-2.4px;text-wrap:balance;line-clamp:3">${escapeHtml(input.title)}</h1>
+  <div style="display:flex;font-family:JetBrains Mono;font-size:26px;color:${colors.faint}"><span style="color:${colors.primary};font-weight:700">${escapeHtml(input.domain)}</span>${escapeHtml(cardPath(input.path))}</div>
+</div>`
+}

package/site-kit/starter/src/lib/og/path.ts

@@ -0,0 +1,14 @@
+// Where a page's sharing image lives: `/` is `/og/index.png` and
+// `/parks/alder-common` is `/og/parks/alder-common.png`.
+export function ogImagePath(pathname: string): string {
+  const slug = pathname.replace(/^\/+|\/+$/g, '').replace(/\.html$/, '')
+  return `/og/${slug || 'index'}.png`
+}
+
+// The URL path a built file serves: `index.html` is `/`, `parks/a.html` is
+// `/parks/a`.
+export function pagePathname(htmlFile: string): string {
+  const file = htmlFile.replace(/\\/g, '/')
+  const path = `/${file}`.replace(/(?:\/index)?\.html$/, '')
+  return path || '/'
+}

package/site-kit/starter/src/lib/og/render.ts

@@ -0,0 +1,30 @@
+import { readFile } from 'node:fs/promises'
+import { render } from 'takumi-js'
+import { Renderer } from 'takumi-js/node'
+import { MARK_SVG, OG_HEIGHT, OG_WIDTH, ogCardHtml } from './card'
+
+const fonts = new URL('../../../public/fonts/', import.meta.url)
+
+// One Takumi renderer with the page fonts loaded once and reused for every
+// card. Nothing is fetched over the network.
+export async function ogRenderer(site: {
+  domain: string
+}): Promise<(title: string, path: string) => Promise<Uint8Array>> {
+  const renderer = new Renderer()
+  await renderer.registerFont({
+    name: 'Inter',
+    data: await readFile(new URL('InterLatinVF.woff2', fonts)),
+  })
+  await renderer.registerFont({
+    name: 'JetBrains Mono',
+    data: await readFile(new URL('JetBrainsMonoLatinVF.woff2', fonts)),
+  })
+  const images = [{ src: 'mark.svg', data: Buffer.from(MARK_SVG) }]
+  return (title, path) =>
+    render(ogCardHtml({ title, domain: site.domain, path }), {
+      renderer,
+      images,
+      width: OG_WIDTH,
+      height: OG_HEIGHT,
+    })
+}