@master/internal-site 0.0.0-stage → 0.1.1

package/src/docs-shell/utils/css-modern-grammar.ts

@@ -0,0 +1,339 @@
+import type { LanguageRegistration } from 'shiki/core'
+
+/*
+ * Presentation-only additions to Shiki's CSS grammar for syntax the docs use but the bundled grammar predates:
+ * nested rules and conditional groups inside declaration blocks, descriptor at-rules, container and scope
+ * preludes, functions, properties or query features newer than its keyword lists, and CSS-in-JS templates.
+ * Master CSS directives keep their own grammar.
+ */
+
+type Pattern = Record<string, unknown>
+
+/**
+ * Root grammars whose documents contain CSS. Shiki injects by root scope prefix, so a stylesheet embedded in
+ * HTML, Vue, Svelte, Astro, MDX, a Markdown fence or a CSS-in-JS template needs its host listed; selectors still
+ * require CSS scopes.
+ */
+export const cssInjectionHosts = ['source.css', 'text.html', 'source.svelte', 'source.astro', 'source.mdx', 'source.js', 'source.ts', 'source.tsx']
+
+const scopePrelude: Pattern[] = [
+  { match: '(?i)(?<=\\))\\s*(to)(?=\\s*\\()', captures: { 1: { name: 'keyword.operator.logical.to.css' } } },
+  {
+    begin: '\\(',
+    beginCaptures: { 0: { name: 'punctuation.definition.parameters.begin.bracket.round.css' } },
+    end: '\\)',
+    endCaptures: { 0: { name: 'punctuation.definition.parameters.end.bracket.round.css' } },
+    name: 'meta.selector.css',
+    patterns: [{ include: 'source.css#selector-innards' }]
+  }
+]
+
+const preludes: Record<string, Pattern[]> = {
+  media: [{ include: 'source.css#media-query-list' }],
+  container: [{ include: 'source.css#media-query-list' }],
+  supports: [{ include: 'source.css#feature-query-operators' }, { include: 'source.css#feature-query' }],
+  scope: scopePrelude,
+  layer: [{ include: 'source.css#comment-block' }, { include: 'source.css#commas' }],
+  'starting-style': [{ include: 'source.css#comment-block' }]
+}
+
+/** `@name prelude { body }` or `@name prelude;`, with the prelude in `meta.at-rule.<name>.header.css`. */
+function atRule(name: string, prelude: Pattern[], body: Pattern): Pattern {
+  return {
+    begin: `(?i)((@)${name})(?![\\w-])`,
+    beginCaptures: {
+      1: { name: `keyword.control.at-rule.${name}.css` },
+      2: { name: 'punctuation.definition.keyword.css' }
+    },
+    end: '(?<=[};])(?!\\G)',
+    patterns: [
+      { begin: '\\G(?!\\s*[;{])', end: '(?=\\s*[;{])', name: `meta.at-rule.${name}.header.css`, patterns: prelude },
+      { match: ';', name: 'punctuation.terminator.rule.css' },
+      body
+    ]
+  }
+}
+
+function block(patterns: Pattern[]): Pattern {
+  return {
+    begin: '\\{',
+    beginCaptures: { 0: { name: 'punctuation.section.begin.bracket.curly.css' } },
+    end: '\\}',
+    endCaptures: { 0: { name: 'punctuation.section.end.bracket.curly.css' } },
+    name: 'meta.at-rule.body.css',
+    patterns
+  }
+}
+
+const selectorInnards: Pattern[] = [
+  { match: '&', name: 'entity.name.tag.nesting.css' },
+  { include: 'source.css#selector-innards' }
+]
+
+const headers = [...Object.keys(preludes), 'custom-media'].map((name) => `-meta.at-rule.${name}.header.css`).join(' ')
+
+/** Rules and conditional groups nested in a declaration block; their blocks accept declarations again. */
+const cssNestingLanguage = {
+  name: 'css-nesting',
+  scopeName: 'source.css.nesting.injection',
+  injectTo: cssInjectionHosts,
+  injectionSelector: `L:meta.property-list.css -meta.property-value.css -meta.property-name.css -meta.selector.css -meta.at-rule.header.css ${headers} -comment -string`,
+  patterns: [
+    ...Object.entries(preludes).map(([name, prelude]) => atRule(name, prelude, { include: 'source.css#rule-list' })),
+    // Each begin consumes its selector: the injection stays active inside, so a zero-width begin would recur.
+    {
+      // At a statement start, including a CSS-in-JS template start, a selector reaches `{` before `;`.
+      begin: '(?<=^\\s*|[{};`]\\s*)(?!--)((?:[&>+~*.#:\\[]|[-_a-zA-Z][\\w-]*)[^;{}]*?)(?<!\\$)(?=\\s*\\{)',
+      beginCaptures: { 1: { name: 'meta.selector.css', patterns: selectorInnards } },
+      end: '(?<=\\})',
+      patterns: [{ include: 'source.css#rule-list' }]
+    },
+    {
+      // A selector list continues on the following lines.
+      begin: '(?<=^\\s*|[{};`]\\s*)([&>+~.#:\\[][^;{}]*,)\\s*$',
+      beginCaptures: { 1: { name: 'meta.selector.css', patterns: selectorInnards } },
+      end: '(?<=\\})',
+      patterns: [
+        { begin: '^', end: '(?=\\s*\\{)', name: 'meta.selector.css', patterns: selectorInnards },
+        { include: 'source.css#rule-list' }
+      ]
+    }
+  ]
+} as unknown as LanguageRegistration
+
+/** Stylesheet-level at-rules the bundled grammar reads as selectors or plain text. */
+const cssAtRulesLanguage = {
+  name: 'css-modern-at-rules',
+  scopeName: 'source.css.modern-at-rules.injection',
+  injectTo: cssInjectionHosts,
+  injectionSelector: `L:source.css -meta.property-list.css -meta.property-value.css -meta.selector.css -meta.at-rule.header.css ${headers} -comment -string`,
+  patterns: [
+    ...['property', 'view-transition', 'font-palette-values', 'position-try'].map((name) => atRule(name, [
+      { include: 'source.css#comment-block' },
+      { match: '--[\\w-]+', name: 'support.type.property-name.custom.css' }
+    ], { include: 'source.css#rule-list' })),
+    atRule('custom-media', [
+      { match: '\\G\\s*(--[\\w-]+)', captures: { 1: { name: 'support.type.property-name.custom.css' } } },
+      { include: 'source.css#media-query-list' }
+    ], { include: 'source.css#comment-block' }),
+    atRule('container', preludes.container, block([{ include: 'source.css' }])),
+    atRule('scope', preludes.scope, block([{ include: 'source.css' }])),
+    atRule('starting-style', preludes['starting-style'], block([{ include: 'source.css' }]))
+  ]
+} as unknown as LanguageRegistration
+
+/** Query features the bundled lists predate, such as `prefers-color-scheme` or container `inline-size`. */
+const cssQueryFeaturesLanguage = {
+  name: 'css-query-features',
+  scopeName: 'source.css.query-features.injection',
+  injectTo: cssInjectionHosts,
+  injectionSelector: ['media', 'container', 'custom-media'].map((name) => `meta.at-rule.${name}.header.css -comment -string`).join(', '),
+  patterns: [
+    {
+      match: '(?i)(?<=\\(\\s*)([a-z][\\w-]*)(?=\\s*[:<>=)])',
+      captures: { 1: { name: 'support.type.property-name.media.css' } }
+    },
+    { match: '(?i)(?<=:\\s*)[a-z][\\w-]*(?=\\s*\\))', name: 'support.constant.property-value.css' }
+  ]
+} as unknown as LanguageRegistration
+
+/** Docs elide CSS with `...`; as a selector it would swallow the rest, including an HTML `</style>`. */
+const cssPlaceholderLanguage = {
+  name: 'css-placeholder',
+  scopeName: 'source.css.placeholder.injection',
+  injectTo: cssInjectionHosts,
+  injectionSelector: 'L:source.css -meta.property-value.css -comment -string',
+  patterns: [{ match: '\\.{3}|…', name: 'comment.other.placeholder.css' }]
+} as unknown as LanguageRegistration
+
+/** `@import` conditions: `layer(name)` and `supports(declaration)`. */
+const cssImportLanguage = {
+  name: 'css-import-conditions',
+  scopeName: 'source.css.import-conditions.injection',
+  injectTo: cssInjectionHosts,
+  injectionSelector: 'L:meta.at-rule.import.css -comment -string',
+  patterns: [['layer', [{ include: 'source.css#comment-block' }]], ['supports', [{ include: 'source.css#rule-list-innards' }]]].map(([name, patterns]) => ({
+    begin: `(?i)(?<![\\w-])(${name})(\\()`,
+    beginCaptures: {
+      1: { name: 'support.function.misc.css' },
+      2: { name: 'punctuation.section.function.begin.bracket.round.css' }
+    },
+    end: '\\)',
+    endCaptures: { 0: { name: 'punctuation.section.function.end.bracket.round.css' } },
+    name: `meta.function.${name}.css`,
+    patterns
+  }))
+} as unknown as LanguageRegistration
+
+/** `@supports selector(...)` tests a selector, not a declaration. */
+const cssSupportsSelectorLanguage = {
+  name: 'css-supports-selector',
+  scopeName: 'source.css.supports-selector.injection',
+  injectTo: cssInjectionHosts,
+  injectionSelector: 'L:meta.at-rule.supports.header.css -comment -string',
+  patterns: [
+    {
+      begin: '(?i)(?<![\\w-])(selector)(\\()',
+      beginCaptures: {
+        1: { name: 'support.function.misc.css' },
+        2: { name: 'punctuation.section.function.begin.bracket.round.css' }
+      },
+      end: '\\)',
+      endCaptures: { 0: { name: 'punctuation.section.function.end.bracket.round.css' } },
+      name: 'meta.function.selector.css',
+      patterns: [
+        {
+          begin: '(?=\\S)',
+          end: '(?=\\))',
+          name: 'meta.selector.css',
+          patterns: selectorInnards
+        }
+      ]
+    }
+  ]
+} as unknown as LanguageRegistration
+
+/** Functions newer than the bundled list, such as `light-dark()` and `env()`, read as functions; `/` separates values. */
+const cssFunctionsLanguage = {
+  name: 'css-modern-functions',
+  scopeName: 'source.css.modern-functions.injection',
+  injectTo: cssInjectionHosts,
+  injectionSelector: 'meta.property-value.css -comment -string',
+  patterns: [
+    {
+      begin: '(?i)(?<![\\w-])((?:-(?:webkit|moz|o|ms)-)?[a-z][\\w-]*)(\\()',
+      beginCaptures: {
+        1: { name: 'support.function.misc.css' },
+        2: { name: 'punctuation.section.function.begin.bracket.round.css' }
+      },
+      end: '\\)',
+      endCaptures: { 0: { name: 'punctuation.section.function.end.bracket.round.css' } },
+      name: 'meta.function.misc.css',
+      patterns: [{ include: 'source.css#property-values' }]
+    },
+    { match: '/', name: 'punctuation.separator.slash.css' }
+  ]
+} as unknown as LanguageRegistration
+
+function functionalPseudo(colons: string, kind: string, names = '[a-z][\\w-]*'): Pattern {
+  return {
+    begin: `(?i)(${colons})(${names})(\\()`,
+    beginCaptures: {
+      1: { name: 'punctuation.definition.entity.css' },
+      2: { name: `entity.other.attribute-name.pseudo-${kind}.css` },
+      3: { name: 'punctuation.section.function.begin.bracket.round.css' }
+    },
+    end: '\\)',
+    endCaptures: { 0: { name: 'punctuation.section.function.end.bracket.round.css' } },
+    name: `meta.function.pseudo-${kind}.css`,
+    patterns: [{ include: 'source.css#selector-innards' }]
+  }
+}
+
+/** Pseudo-classes and pseudo-elements newer than the bundled lists, with or without arguments. */
+const cssPseudoLanguage = {
+  name: 'css-modern-pseudo',
+  scopeName: 'source.css.modern-pseudo.injection',
+  injectTo: cssInjectionHosts,
+  injectionSelector: 'meta.selector.css -comment -string',
+  patterns: [
+    functionalPseudo('::', 'element'),
+    functionalPseudo(':', 'class'),
+    {
+      match: '(?i)(::)[a-z][\\w-]*',
+      captures: {
+        0: { name: 'entity.other.attribute-name.pseudo-element.css' },
+        1: { name: 'punctuation.definition.entity.css' }
+      }
+    },
+    {
+      match: '(?i)(:)[a-z][\\w-]*',
+      captures: {
+        0: { name: 'entity.other.attribute-name.pseudo-class.css' },
+        1: { name: 'punctuation.definition.entity.css' }
+      }
+    }
+  ]
+} as unknown as LanguageRegistration
+
+/** The bundled grammar knows `:host` only without its selector argument. */
+const cssHostLanguage = {
+  name: 'css-host',
+  scopeName: 'source.css.host.injection',
+  injectTo: cssInjectionHosts,
+  injectionSelector: 'L:meta.selector.css -comment -string',
+  patterns: [functionalPseudo(':', 'class', 'host|host-context')]
+} as unknown as LanguageRegistration
+
+const scriptHosts = ['source.js', 'source.ts', 'source.tsx']
+
+/** CSS-in-JS tagged templates hold declarations and nested rules: `styled.button`, `styled(Card)`, `css`, `keyframes`. */
+const cssInJSLanguage = {
+  name: 'css-in-js',
+  scopeName: 'source.css.in-js.injection',
+  injectTo: scriptHosts,
+  injectionSelector: 'L:source -comment -string',
+  patterns: [
+    {
+      // The tag is part of the match: the script grammar would otherwise hold its tagged-template call open past the template.
+      begin: '(?<![\\w$.])(?:(styled)(?:(\\.)([\\w$]+)|(\\()([\\w$.]*)(\\)))|(css|keyframes|createGlobalStyle|injectGlobal))(`)',
+      beginCaptures: {
+        1: { name: 'variable.other.object.js' },
+        2: { name: 'punctuation.accessor.js' },
+        3: { name: 'entity.name.function.tagged-template.js' },
+        4: { name: 'meta.brace.round.js' },
+        5: { name: 'variable.other.readwrite.js' },
+        6: { name: 'meta.brace.round.js' },
+        7: { name: 'entity.name.function.tagged-template.js' },
+        8: { name: 'string.template.js punctuation.definition.string.template.begin.js' }
+      },
+      end: '`',
+      endCaptures: { 0: { name: 'string.template.js punctuation.definition.string.template.end.js' } },
+      contentName: 'meta.embedded.css-in-js source.css meta.property-list.css',
+      patterns: [{ include: 'source.css#rule-list-innards' }]
+    }
+  ]
+} as unknown as LanguageRegistration
+
+/** `${...}` stays a script expression anywhere in a CSS-in-JS template, including inside a declaration value. */
+const cssInJSSubstitutionLanguage = {
+  name: 'css-in-js-substitution',
+  scopeName: 'source.css.in-js-substitution.injection',
+  injectTo: scriptHosts,
+  injectionSelector: 'L:meta.embedded.css-in-js -comment',
+  patterns: [{ include: 'source.ts#template-substitution-element' }]
+} as unknown as LanguageRegistration
+
+/** A custom property declaration names a property, as in `@theme`; `var(--name)` references stay variables. */
+const cssCustomPropertyLanguage = {
+  name: 'css-custom-property',
+  scopeName: 'source.css.custom-property.injection',
+  injectTo: cssInjectionHosts,
+  injectionSelector: 'L:meta.property-list.css -meta.property-value.css -meta.selector.css -comment -string',
+  patterns: [{ match: '(?<![\\w-])--[\\w-]+(?=\\s*:)', name: 'support.type.property-name.custom.css' }]
+} as unknown as LanguageRegistration
+
+/** Property names newer than the bundled list keep the property role. */
+const cssPropertyNamesLanguage = {
+  name: 'css-modern-property-names',
+  scopeName: 'source.css.modern-property-names.injection',
+  injectTo: cssInjectionHosts,
+  injectionSelector: 'meta.property-name.css -comment -string',
+  patterns: [{ match: '(?<![\\w-])-?[a-zA-Z][\\w-]*', name: 'support.type.property-name.css' }]
+} as unknown as LanguageRegistration
+
+export default [
+  cssNestingLanguage,
+  cssAtRulesLanguage,
+  cssQueryFeaturesLanguage,
+  cssPlaceholderLanguage,
+  cssImportLanguage,
+  cssSupportsSelectorLanguage,
+  cssFunctionsLanguage,
+  cssPseudoLanguage,
+  cssHostLanguage,
+  cssCustomPropertyLanguage,
+  cssPropertyNamesLanguage,
+  cssInJSLanguage,
+  cssInJSSubstitutionLanguage
+]

package/src/docs-shell/utils/documentation-search.ts

@@ -0,0 +1,68 @@
+import Fuse from 'fuse.js'
+import type { SearchPage } from './search-pages'
+
+export interface DocumentationSearchPage extends SearchPage {
+  kind?: string
+  identifiers?: { text: string; id?: string; detail?: string }[]
+  terms?: string[]
+}
+
+export interface DocumentationSearchResult {
+  page: DocumentationSearchPage
+  href: string
+  reason: 'Identifier' | 'Title' | 'Syntax' | 'Topic' | 'Content'
+  excerpt: string
+  score: number
+}
+
+const normalize = (text: string) => text.normalize('NFKC').toLocaleLowerCase().trim()
+
+/** One index per loaded locale. Exact public identifiers outrank approximate prose. */
+export function createDocumentationSearch(pages: DocumentationSearchPage[]) {
+  const enabled = pages.filter(page => !page.disabled)
+  const exact = new Map<string, DocumentationSearchResult[]>()
+  for (const page of enabled) {
+    for (const identifier of page.identifiers ?? []) {
+      const key = normalize(identifier.text)
+      const items = exact.get(key) ?? []
+      if (!items.some(item => item.page.url === page.url)) items.push({ page, href: page.url + (identifier.id ? `#${identifier.id}` : ''), reason: 'Identifier', excerpt: identifier.detail || identifier.text, score: 1000 })
+      exact.set(key, items)
+    }
+  }
+  const fuse = new Fuse(enabled, {
+    includeScore: true, includeMatches: true, threshold: .35, ignoreLocation: true,
+    keys: [{ name: 'title', weight: 4 }, { name: 'identifiers.text', weight: 4 }, { name: 'terms', weight: 3 }, { name: 'description', weight: 2 }, { name: 'nodes.text', weight: 1 }]
+  })
+  return (query: string, limit = 40): DocumentationSearchResult[] => {
+    const needle = normalize(query)
+    if (!needle) return []
+    if (exact.has(needle)) return exact.get(needle)!.slice(0, limit)
+    const results = new Map<string, DocumentationSearchResult>()
+    for (const page of enabled) {
+      const identifier = page.identifiers?.find(item => normalize(item.text) === needle)
+      const syntax = page.nodes.find(node => node.tag === 'code' && normalize(node.text).includes(needle))
+      const title = normalize(page.title) === needle
+      const topic = page.terms?.some(term => normalize(term) === needle)
+      if (!identifier && !syntax && !title && !topic) continue
+      const node = identifier ?? syntax
+      const id = node?.id
+      results.set(page.url, {
+        page, href: page.url + (id ? `#${id}` : ''),
+        reason: identifier ? 'Identifier' : title ? 'Title' : topic ? 'Topic' : 'Syntax',
+        excerpt: identifier?.detail || identifier?.text || (title || topic ? page.description : syntax?.text) || page.description,
+        score: identifier ? 1000 : title ? 950 : topic ? 850 : 750
+      })
+    }
+    const approximate = [...results.values()].some(result => result.reason === 'Identifier') ? [] : fuse.search(query, { limit: limit * 2 })
+    for (const match of approximate) {
+      const page = match.item
+      if (results.has(page.url)) continue
+      const nodeMatch = match.matches?.find(match => match.key === 'nodes.text')
+      const index = nodeMatch?.refIndex ?? -1
+      const node = page.nodes[index]
+      const anchor = node?.id ?? page.nodes.slice(0, index).reverse().find(node => node.id)?.id
+      results.set(page.url, { page, href: page.url + (anchor ? `#${anchor}` : ''), reason: 'Content', excerpt: node?.text || page.description, score: 500 - (match.score ?? 1) * 100 })
+    }
+    return [...results.values()].sort((a, b) => b.score - a.score || a.page.title.localeCompare(b.page.title)).slice(0, limit)
+  }
+}

package/src/docs-shell/utils/generate-metadata.ts

@@ -0,0 +1,60 @@
+import { defu } from 'defu'
+import type { Metadata } from '../types/Metadata'
+import type { Props } from '../types/Props'
+import { createTranslation } from './i18n'
+
+export default async function generate(
+  metadata: Metadata | Record<string, any>,
+  { params }: Pick<Props, 'params'>,
+  dictionaries: Record<string, () => Promise<any>>
+): Promise<Metadata> {
+  const { locale } = params
+  const $ = await createTranslation(locale, dictionaries)
+  const description = $(metadata.description)
+  const category = $(metadata.category)
+  const ogTitle = $(metadata.openGraph?.title || metadata.title?.absolute || metadata.title)
+  const ogDescription = $(metadata.openGraph?.description || metadata.description)
+  const requestedSearchParams = {
+    ...metadata as any,
+    title: ogTitle,
+    description: ogDescription,
+    locale
+  }
+  delete requestedSearchParams.openGraph
+  if (requestedSearchParams.authors) {
+    requestedSearchParams.authors = JSON.stringify(requestedSearchParams.authors.map((author: any) => author.name))
+  }
+  const baseMetadata: any = {
+    openGraph: {
+      title: ogTitle,
+      description: ogDescription,
+      siteName: import.meta.env.PUBLIC_PROJECT
+    },
+    twitter: {
+      title: ogTitle,
+      description: ogDescription,
+      site: '@mastercorg',
+      creator: '@aron1tw',
+      card: 'summary_large_image'
+    }
+  }
+  if (metadata.openGraph?.images) {
+    baseMetadata.twitter.images = metadata.openGraph.images
+  } else {
+    // postbuild-static renders each placeholder into a static /og image.
+    baseMetadata.openGraph.images = baseMetadata.twitter.images = `/api/og-image?${new URLSearchParams(requestedSearchParams)}`
+  }
+  return defu(
+    {
+      title: typeof metadata.title === 'string'
+        ? $(metadata.title)
+        : {
+          absolute: $(metadata.title.absolute)
+        },
+      description,
+      category
+    },
+    metadata,
+    baseMetadata
+  ) as Metadata
+}

package/src/docs-shell/utils/group-page-content.ts

@@ -0,0 +1,10 @@
+/** Sections with the subsections that follow them, as nested contents lists; a subsection before any section stands on its own. */
+export default function groupPageContent<T extends { level: number }>(items: T[]) {
+  const groups: { item: T, children: T[] }[] = []
+  for (const item of items) {
+    const parent = groups[groups.length - 1]
+    if (item.level === 3 && parent?.item.level === 2) parent.children.push(item)
+    else groups.push({ item, children: [] })
+  }
+  return groups
+}

package/src/docs-shell/utils/head.ts

@@ -0,0 +1,72 @@
+import type { Metadata } from '../types/Metadata'
+
+export interface HeadTag {
+  tag: 'meta' | 'link'
+  attributes: Record<string, string>
+}
+
+export interface ResolvedHead {
+  title: string
+  tags: HeadTag[]
+}
+
+function list(value: string | string[] | undefined) {
+  return value === undefined ? [] : Array.isArray(value) ? value : [value]
+}
+
+function resolveTitle(title: Metadata['title'], project: string) {
+  if (!title) return project
+  if (typeof title === 'string') return `${title} - ${project}`
+  if ('absolute' in title) return title.absolute
+  return title.default
+}
+
+function resolveRobots(robots: Metadata['robots']) {
+  if (!robots || typeof robots === 'string') return robots
+  return [robots.index === false ? 'noindex' : 'index', robots.follow === false ? 'nofollow' : 'follow']
+    .filter((value, index) => index === 0 || robots.follow !== undefined)
+    .join(', ')
+}
+
+export interface HeadOptions {
+  project: string
+  siteURL: string
+  /** The page's published pathname; indexable pages declare it as canonical. */
+  pathname?: string
+  /** Published pathnames of the page by `hreflang`, including `x-default`. */
+  languages?: Record<string, string>
+}
+
+/** Resolve page metadata into document head tags. Relative URLs resolve against `siteURL`. */
+export function resolveHead(metadata: Partial<Metadata>, { project, siteURL, pathname, languages = {} }: HeadOptions): ResolvedHead {
+  const tags: HeadTag[] = []
+  const absolute = (url: string) => new URL(url, siteURL).href
+  const meta = (key: 'name' | 'property', name: string, content: string | undefined) => {
+    if (content) tags.push({ tag: 'meta', attributes: { [key]: name, content } })
+  }
+  const robots = resolveRobots(metadata.robots)
+  const indexable = !robots?.includes('noindex')
+  meta('name', 'description', metadata.description)
+  meta('name', 'category', metadata.category)
+  meta('name', 'robots', robots)
+  const canonical = metadata.alternates?.canonical ?? (indexable ? pathname : undefined)
+  if (canonical) tags.push({ tag: 'link', attributes: { rel: 'canonical', href: absolute(canonical) } })
+  if (indexable) {
+    for (const [hreflang, href] of Object.entries(languages)) {
+      tags.push({ tag: 'link', attributes: { rel: 'alternate', hreflang, href: absolute(href) } })
+    }
+  }
+  const { openGraph, twitter } = metadata
+  meta('property', 'og:title', openGraph?.title)
+  meta('property', 'og:description', openGraph?.description)
+  meta('property', 'og:site_name', openGraph?.siteName)
+  // Open Graph and Twitter cards require absolute image URLs.
+  for (const image of list(openGraph?.images)) meta('property', 'og:image', absolute(image))
+  meta('name', 'twitter:card', twitter?.card)
+  meta('name', 'twitter:site', twitter?.site)
+  meta('name', 'twitter:creator', twitter?.creator)
+  meta('name', 'twitter:title', twitter?.title)
+  meta('name', 'twitter:description', twitter?.description)
+  for (const image of list(twitter?.images)) meta('name', 'twitter:image', absolute(image))
+  return { title: resolveTitle(metadata.title, project), tags }
+}