@devslab/site-kit 0.3.0

package/package.json

@@ -0,0 +1,87 @@
+{
+  "name": "@devslab/site-kit",
+  "version": "0.3.0",
+  "description": "Strict i18n, SEO/GEO, and Solid public-site shells for DevsLab products",
+  "type": "module",
+  "license": "SEE LICENSE IN LICENSE",
+  "sideEffects": [
+    "./styles.css"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/devslab-kr/dds.git",
+    "directory": "packages/site-kit"
+  },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org",
+    "access": "public",
+    "provenance": true
+  },
+  "files": [
+    "dist",
+    "src/core",
+    "src/tanstack-start.mjs",
+    "src/tanstack-start.d.mts",
+    "styles.css",
+    "README.md",
+    "README.ko.md"
+  ],
+  "main": "./src/core/index.mjs",
+  "types": "./src/core/index.d.mts",
+  "exports": {
+    ".": {
+      "types": "./src/core/index.d.mts",
+      "import": "./src/core/index.mjs"
+    },
+    "./solid": {
+      "types": "./dist/index.d.ts",
+      "worker": "./dist/solid.server.js",
+      "workerd": "./dist/solid.server.js",
+      "node": "./dist/solid.server.js",
+      "browser": "./dist/solid.js",
+      "default": "./dist/solid.js"
+    },
+    "./tanstack-start": {
+      "types": "./src/tanstack-start.d.mts",
+      "import": "./src/tanstack-start.mjs"
+    },
+    "./styles.css": "./styles.css"
+  },
+  "dependencies": {
+    "@devslab/dds-solid": "0.3.0"
+  },
+  "peerDependencies": {
+    "@tanstack/solid-router": "1.170.30",
+    "@tanstack/solid-start": "1.168.47",
+    "solid-js": "1.9.15"
+  },
+  "peerDependenciesMeta": {
+    "@tanstack/solid-router": {
+      "optional": true
+    },
+    "@tanstack/solid-start": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@types/node": "26.3.0",
+    "@tanstack/solid-router": "1.170.30",
+    "@tanstack/solid-start": "1.168.47",
+    "axe-core": "4.13.0",
+    "jsdom": "30.0.1",
+    "solid-js": "1.9.15",
+    "@testing-library/jest-dom": "6.9.1",
+    "typescript": "7.0.2",
+    "vite": "8.2.1",
+    "vite-plugin-solid": "2.11.14",
+    "vitest": "4.1.1",
+    "wrangler": "4.127.1"
+  },
+  "scripts": {
+    "build": "vite build && vite build --config vite.server.config.ts && tsc -p tsconfig.build.json --emitDeclarationOnly",
+    "check": "tsc -p tsconfig.json --noEmit",
+    "test": "vitest run --config vitest.config.ts && vitest run --config vitest.ssr.config.ts",
+    "test:a11y": "vitest run --config vitest.config.ts src/solid/__tests__/a11y.test.tsx",
+    "test:worker": "wrangler deploy --dry-run --config fixtures/worker/wrangler.jsonc --outdir dist-worker"
+  }
+}

package/src/core/catalog.d.mts

@@ -0,0 +1,5 @@
+import type { SiteLocale } from "./locales.mjs";
+export type MessageCatalog = Record<string, string>;
+export declare class CatalogValidationError extends Error { readonly issues: readonly string[] }
+export declare function validateCatalogs(catalogs: Record<SiteLocale, MessageCatalog>, referenceLocale: SiteLocale): true;
+export declare function createTranslator(catalog: MessageCatalog, locale: SiteLocale): (key: string, values?: Record<string, string | number>) => string;

package/src/core/catalog.mjs

@@ -0,0 +1,45 @@
+import { LOCALES, canonicalLocale } from "./locales.mjs";
+
+const placeholders = (message) => [...String(message).matchAll(/\{([A-Za-z][A-Za-z0-9_]*)\}/g)].map((match) => match[1]).sort();
+const difference = (left, right) => left.filter((value) => !right.includes(value));
+
+export class CatalogValidationError extends Error {
+  constructor(issues) {
+    super(`Catalog validation failed:\n${issues.map((issue) => `- ${issue}`).join("\n")}`);
+    this.name = "CatalogValidationError";
+    this.issues = issues;
+  }
+}
+
+export function validateCatalogs(catalogs, referenceLocale) {
+  const reference = canonicalLocale(referenceLocale);
+  if (!reference || !catalogs[reference]) throw new CatalogValidationError([`reference locale ${referenceLocale} is missing`]);
+  const referenceKeys = Object.keys(catalogs[reference]).sort();
+  const issues = [];
+  for (const { code } of LOCALES) {
+    const catalog = catalogs[code];
+    if (!catalog) { issues.push(`missing locale ${code}`); continue; }
+    const keys = Object.keys(catalog).sort();
+    for (const key of difference(referenceKeys, keys)) issues.push(`${code} missing key ${key}`);
+    for (const key of difference(keys, referenceKeys)) issues.push(`${code} extra key ${key}`);
+    for (const key of referenceKeys.filter((candidate) => candidate in catalog)) {
+      if (typeof catalog[key] !== "string") { issues.push(`${code} key ${key} is not a string`); continue; }
+      const expected = placeholders(catalogs[reference][key]);
+      const actual = placeholders(catalog[key]);
+      if (expected.join("|") !== actual.join("|")) issues.push(`${code} placeholder mismatch for ${key}: expected ${expected.join(",")}; received ${actual.join(",")}`);
+    }
+  }
+  if (issues.length) throw new CatalogValidationError(issues);
+  return true;
+}
+
+export function createTranslator(catalog, locale) {
+  return (key, values = {}) => {
+    const message = catalog[key];
+    if (typeof message !== "string") throw new Error(`Missing translation ${locale}:${key}; runtime fallback is disabled`);
+    const required = placeholders(message);
+    for (const name of required) if (!(name in values)) throw new Error(`Missing placeholder ${name} for ${locale}:${key}`);
+    for (const name of Object.keys(values)) if (!required.includes(name)) throw new Error(`Extra placeholder ${name} for ${locale}:${key}`);
+    return message.replace(/\{([A-Za-z][A-Za-z0-9_]*)\}/g, (_, name) => String(values[name]));
+  };
+}

package/src/core/geo.d.mts

@@ -0,0 +1,10 @@
+export interface VerifiedFact { id: string; value: string; sourceUrl: string; verifiedAt: string; expiresAt?: string }
+export declare class VerifiedFactRegistry {
+  constructor(facts: VerifiedFact[], options?: { now?: string });
+  get(id: string): Readonly<VerifiedFact>;
+  all(): Array<Readonly<VerifiedFact>>;
+}
+export type FactClaim = { factId: string } | FactClaim[] | { [key: string]: FactClaim };
+export type VerifiedSchemaType = "Organization" | "WebSite" | "SoftwareApplication" | "Product" | "BreadcrumbList" | "FAQPage" | "TechArticle";
+export declare function buildVerifiedJsonLd(input: { type: VerifiedSchemaType; id: string; identity: { name: string; url: string; logo?: string }; claims?: Record<string, FactClaim> }, registry: VerifiedFactRegistry): Record<string, unknown>;
+export declare function renderLlmsTxt(input: { title: string; summary: string; canonicalUrl: string; facts: VerifiedFactRegistry }): string;

package/src/core/geo.mjs

@@ -0,0 +1,69 @@
+const isoDate = /^\d{4}-\d{2}-\d{2}$/;
+const schemaClaims = new Map([
+  ["Organization", new Set(["description", "sameAs", "contactPoint", "areaServed"])],
+  ["WebSite", new Set(["description", "inLanguage", "publisher"])],
+  ["SoftwareApplication", new Set(["description", "applicationCategory", "operatingSystem", "featureList", "offers"])],
+  ["Product", new Set(["description", "category", "brand", "offers"])],
+  ["BreadcrumbList", new Set(["itemListElement"])],
+  ["FAQPage", new Set(["mainEntity"])],
+  ["TechArticle", new Set(["headline", "description", "datePublished", "dateModified", "author", "about"])],
+]);
+
+export class VerifiedFactRegistry {
+  #facts = new Map();
+  #now;
+
+  constructor(facts, { now = new Date().toISOString().slice(0, 10) } = {}) {
+    if (!isoDate.test(now)) throw new TypeError("now must be YYYY-MM-DD");
+    this.#now = now;
+    for (const fact of facts) {
+      if (!fact?.id || this.#facts.has(fact.id)) throw new Error(`Duplicate or missing fact id: ${fact?.id}`);
+      if (typeof fact.value !== "string" || !fact.value.trim()) throw new Error(`Fact ${fact.id} has no value`);
+      if (!String(fact.sourceUrl).startsWith("https://")) throw new Error(`Fact ${fact.id} requires an HTTPS sourceUrl`);
+      if (!isoDate.test(fact.verifiedAt) || fact.verifiedAt > this.#now) throw new Error(`Fact ${fact.id} has an invalid verifiedAt date`);
+      if (fact.expiresAt && (!isoDate.test(fact.expiresAt) || fact.expiresAt < this.#now)) throw new Error(`Fact ${fact.id} is expired`);
+      this.#facts.set(fact.id, Object.freeze({ ...fact }));
+    }
+  }
+
+  get(id) {
+    const fact = this.#facts.get(id);
+    if (!fact) throw new Error(`Unverified fact: ${id}`);
+    return fact;
+  }
+
+  all() { return [...this.#facts.values()]; }
+}
+
+function resolveClaim(value, registry) {
+  if (Array.isArray(value)) return value.map((entry) => resolveClaim(entry, registry));
+  if (value && typeof value === "object" && Object.keys(value).length === 1 && "factId" in value) return registry.get(value.factId).value;
+  if (value && typeof value === "object") return Object.fromEntries(Object.entries(value).map(([key, entry]) => [key, resolveClaim(entry, registry)]));
+  throw new TypeError("GEO claims must reference a verified factId; literal claims are forbidden");
+}
+
+export function buildVerifiedJsonLd({ type, id, identity, claims = {} }, registry) {
+  if (!(registry instanceof VerifiedFactRegistry)) throw new TypeError("A VerifiedFactRegistry is required");
+  if (!type || !id || !identity?.name || !identity?.url) throw new TypeError("Schema type, id, identity.name, and identity.url are required");
+  const allowedClaims = schemaClaims.get(type);
+  if (!allowedClaims) throw new TypeError(`Unsupported schema type: ${type}`);
+  for (const claim of Object.keys(claims)) {
+    if (!allowedClaims.has(claim)) throw new TypeError(`Unsupported claim ${claim} for schema type ${type}`);
+  }
+  return {
+    "@context": "https://schema.org",
+    "@type": type,
+    "@id": id,
+    name: identity.name,
+    url: identity.url,
+    ...(identity.logo ? { logo: identity.logo } : {}),
+    ...Object.fromEntries(Object.entries(claims).map(([key, value]) => [key, resolveClaim(value, registry)])),
+  };
+}
+
+export function renderLlmsTxt({ title, summary, canonicalUrl, facts }) {
+  if (!(facts instanceof VerifiedFactRegistry)) throw new TypeError("facts must be a VerifiedFactRegistry");
+  const lines = [`# ${title}`, "", `> ${summary}`, "", `Canonical: ${canonicalUrl}`, "", "## Verified facts", ""];
+  for (const fact of facts.all()) lines.push(`- ${fact.value} (source: ${fact.sourceUrl}; verified: ${fact.verifiedAt})`);
+  return `${lines.join("\n")}\n`;
+}

package/src/core/index.d.mts

@@ -0,0 +1,4 @@
+export * from "./locales.mjs";
+export * from "./catalog.mjs";
+export * from "./seo.mjs";
+export * from "./geo.mjs";

package/src/core/index.mjs

@@ -0,0 +1,4 @@
+export { LOCALES, canonicalLocale, localeAttributes, resolveLocale } from "./locales.mjs";
+export { CatalogValidationError, createTranslator, validateCatalogs } from "./catalog.mjs";
+export { ROBOTS_USER_AGENTS, buildMetadata, buildRobots, buildSitemap, localizedPath, localizedUrl, renderSitemapXml } from "./seo.mjs";
+export { VerifiedFactRegistry, buildVerifiedJsonLd, renderLlmsTxt } from "./geo.mjs";

package/src/core/locales.d.mts

@@ -0,0 +1,7 @@
+export type SiteLocale = "ko" | "en" | "ja" | "zh-HK" | "zh-TW" | "hi" | "vi" | "id" | "th" | "pt-BR" | "fr" | "de" | "es" | "ar";
+export type TextDirection = "ltr" | "rtl";
+export interface LocaleDefinition { readonly code: SiteLocale; readonly language: string; readonly nativeName: string; readonly dir: TextDirection }
+export declare const LOCALES: readonly LocaleDefinition[];
+export declare function canonicalLocale(candidate: string | undefined | null): SiteLocale | undefined;
+export declare function localeAttributes(locale: string): { lang: SiteLocale; dir: TextDirection };
+export declare function resolveLocale(input: { pathname?: string; cookie?: string; acceptLanguage?: string; defaultLocale: SiteLocale }): { locale: SiteLocale; source: "route" | "cookie" | "accept-language" | "default" };

package/src/core/locales.mjs

@@ -0,0 +1,66 @@
+export const LOCALES = Object.freeze([
+  { code: "ko", language: "Korean", nativeName: "한국어", dir: "ltr" },
+  { code: "en", language: "English", nativeName: "English", dir: "ltr" },
+  { code: "ja", language: "Japanese", nativeName: "日本語", dir: "ltr" },
+  { code: "zh-HK", language: "Chinese (Hong Kong)", nativeName: "繁體中文（香港）", dir: "ltr" },
+  { code: "zh-TW", language: "Chinese (Taiwan)", nativeName: "繁體中文（台灣）", dir: "ltr" },
+  { code: "hi", language: "Hindi", nativeName: "हिन्दी", dir: "ltr" },
+  { code: "vi", language: "Vietnamese", nativeName: "Tiếng Việt", dir: "ltr" },
+  { code: "id", language: "Indonesian", nativeName: "Bahasa Indonesia", dir: "ltr" },
+  { code: "th", language: "Thai", nativeName: "ไทย", dir: "ltr" },
+  { code: "pt-BR", language: "Portuguese (Brazil)", nativeName: "Português (Brasil)", dir: "ltr" },
+  { code: "fr", language: "French", nativeName: "Français", dir: "ltr" },
+  { code: "de", language: "German", nativeName: "Deutsch", dir: "ltr" },
+  { code: "es", language: "Spanish", nativeName: "Español", dir: "ltr" },
+  { code: "ar", language: "Arabic", nativeName: "العربية", dir: "rtl" },
+]);
+
+const byLower = new Map(LOCALES.map((locale) => [locale.code.toLowerCase(), locale]));
+const aliases = new Map([["zh", "zh-TW"], ["pt", "pt-BR"]]);
+
+export function canonicalLocale(candidate) {
+  if (!candidate) return undefined;
+  const exact = byLower.get(String(candidate).trim().toLowerCase());
+  if (exact) return exact.code;
+  const base = String(candidate).trim().toLowerCase().split("-")[0];
+  if (aliases.has(base)) return aliases.get(base);
+  return byLower.get(base)?.code;
+}
+
+export function localeAttributes(locale) {
+  const canonical = canonicalLocale(locale);
+  if (!canonical) throw new RangeError(`Unsupported locale: ${locale}`);
+  return { lang: canonical, dir: canonical === "ar" ? "rtl" : "ltr" };
+}
+
+function cookieValue(header, name) {
+  for (const part of String(header ?? "").split(";")) {
+    const separator = part.indexOf("=");
+    if (separator < 0) continue;
+    if (part.slice(0, separator).trim() === name) {
+      try { return decodeURIComponent(part.slice(separator + 1).trim()); }
+      catch { return undefined; }
+    }
+  }
+  return undefined;
+}
+
+function acceptedLocales(header) {
+  return String(header ?? "").split(",").map((part, order) => {
+    const [tag, ...parameters] = part.trim().split(";");
+    const q = Number(parameters.find((parameter) => parameter.trim().startsWith("q="))?.split("=")[1] ?? 1);
+    return { locale: canonicalLocale(tag), q: Number.isFinite(q) ? q : 0, order };
+  }).filter(({ locale, q }) => locale && q > 0).sort((a, b) => b.q - a.q || a.order - b.order);
+}
+
+export function resolveLocale({ pathname = "/", cookie = "", acceptLanguage = "", defaultLocale }) {
+  const routeLocale = canonicalLocale(pathname.split("/").filter(Boolean)[0]);
+  if (routeLocale) return { locale: routeLocale, source: "route" };
+  const storedLocale = canonicalLocale(cookieValue(cookie, "locale"));
+  if (storedLocale) return { locale: storedLocale, source: "cookie" };
+  const accepted = acceptedLocales(acceptLanguage)[0]?.locale;
+  if (accepted) return { locale: accepted, source: "accept-language" };
+  const fallback = canonicalLocale(defaultLocale);
+  if (!fallback) throw new RangeError(`Unsupported default locale: ${defaultLocale}`);
+  return { locale: fallback, source: "default" };
+}

package/src/core/seo.d.mts

@@ -0,0 +1,17 @@
+import type { SiteLocale, TextDirection } from "./locales.mjs";
+export interface MetadataInput { baseUrl: string; path: string; locale: SiteLocale; defaultLocale: SiteLocale; title: string; description: string; siteName: string; image: string }
+export interface SiteMetadata {
+  html: { lang: SiteLocale; dir: TextDirection };
+  title: string; description: string; canonical: string;
+  alternates: Array<{ hreflang: SiteLocale | "x-default"; href: string }>;
+  openGraph: { type: "website"; locale: SiteLocale; url: string; siteName: string; title: string; description: string; images: Array<{ url: string }> };
+  twitter: { card: "summary_large_image"; title: string; description: string; image: string };
+}
+export declare function localizedPath(path: string, locale: SiteLocale, defaultLocale: SiteLocale): string;
+export declare function localizedUrl(baseUrl: string, path: string, locale: SiteLocale, defaultLocale: SiteLocale): string;
+export declare function buildMetadata(input: MetadataInput): SiteMetadata;
+export declare function buildSitemap(input: { baseUrl: string; routes: string[]; defaultLocale: SiteLocale; lastModified?: string }): Array<{ loc: string; locale: SiteLocale; alternates: Array<{ hreflang: SiteLocale | "x-default"; href: string }>; lastmod?: string }>;
+export declare function renderSitemapXml(entries: ReturnType<typeof buildSitemap>): string;
+export type RobotsPolicy = "allow" | "disallow";
+export declare const ROBOTS_USER_AGENTS: { readonly citation: readonly string[]; readonly modelTraining: readonly string[] };
+export declare function buildRobots(input: { baseUrl: string; environment: "production" | "preview" | "development"; policies?: { search: RobotsPolicy; citation: RobotsPolicy; modelTraining: RobotsPolicy } }): string;

package/src/core/seo.mjs

@@ -0,0 +1,88 @@
+import { LOCALES, canonicalLocale, localeAttributes } from "./locales.mjs";
+
+const cleanBase = (baseUrl) => String(baseUrl).replace(/\/+$/, "");
+const cleanPath = (path) => {
+  const value = `/${String(path || "/").replace(/^\/+|\/+$/g, "")}`;
+  return value === "/" ? "/" : value;
+};
+
+export function localizedPath(path, locale, defaultLocale) {
+  const canonical = canonicalLocale(locale);
+  const fallback = canonicalLocale(defaultLocale);
+  if (!canonical || !fallback) throw new RangeError("localizedPath received an unsupported locale");
+  const normalized = cleanPath(path);
+  return canonical === fallback ? normalized : `/${canonical}${normalized === "/" ? "" : normalized}`;
+}
+
+export function localizedUrl(baseUrl, path, locale, defaultLocale) {
+  return `${cleanBase(baseUrl)}${localizedPath(path, locale, defaultLocale)}`;
+}
+
+export function buildMetadata({ baseUrl, path, locale, defaultLocale, title, description, siteName, image }) {
+  const canonicalLocaleCode = canonicalLocale(locale);
+  if (!canonicalLocaleCode) throw new RangeError(`Unsupported locale: ${locale}`);
+  const canonical = localizedUrl(baseUrl, path, canonicalLocaleCode, defaultLocale);
+  const alternates = LOCALES.map(({ code }) => ({ hreflang: code, href: localizedUrl(baseUrl, path, code, defaultLocale) }));
+  alternates.push({ hreflang: "x-default", href: localizedUrl(baseUrl, path, defaultLocale, defaultLocale) });
+  const imageUrl = new URL(image, `${cleanBase(baseUrl)}/`).href;
+  return {
+    html: localeAttributes(canonicalLocaleCode),
+    title,
+    description,
+    canonical,
+    alternates,
+    openGraph: {
+      type: "website",
+      locale: canonicalLocaleCode,
+      url: canonical,
+      siteName,
+      title,
+      description,
+      images: [{ url: imageUrl }],
+    },
+    twitter: { card: "summary_large_image", title, description, image: imageUrl },
+  };
+}
+
+export function buildSitemap({ baseUrl, routes, defaultLocale, lastModified }) {
+  return routes.flatMap((path) => LOCALES.map(({ code }) => ({
+    loc: localizedUrl(baseUrl, path, code, defaultLocale),
+    locale: code,
+    alternates: [
+      ...LOCALES.map(({ code: alternate }) => ({ hreflang: alternate, href: localizedUrl(baseUrl, path, alternate, defaultLocale) })),
+      { hreflang: "x-default", href: localizedUrl(baseUrl, path, defaultLocale, defaultLocale) },
+    ],
+    ...(lastModified ? { lastmod: lastModified } : {}),
+  })));
+}
+
+export function renderSitemapXml(entries) {
+  const escape = (value) => String(value).replaceAll("&", "&amp;").replaceAll("<", "&lt;").replaceAll(">", "&gt;").replaceAll('"', "&quot;");
+  const urls = entries.map((entry) => `  <url>\n    <loc>${escape(entry.loc)}</loc>${entry.lastmod ? `\n    <lastmod>${escape(entry.lastmod)}</lastmod>` : ""}${entry.alternates.map((alternate) => `\n    <xhtml:link rel="alternate" hreflang="${escape(alternate.hreflang)}" href="${escape(alternate.href)}" />`).join("")}\n  </url>`).join("\n");
+  return `<?xml version="1.0" encoding="UTF-8"?>\n<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml">\n${urls}\n</urlset>\n`;
+}
+
+export const ROBOTS_USER_AGENTS = Object.freeze({
+  citation: Object.freeze(["OAI-SearchBot", "PerplexityBot"]),
+  modelTraining: Object.freeze(["GPTBot", "Google-Extended", "ClaudeBot"]),
+});
+
+const robotsDirective = (policy) => {
+  if (policy === "allow") return "Allow: /";
+  if (policy === "disallow") return "Disallow: /";
+  throw new RangeError(`Unsupported robots policy: ${policy}`);
+};
+
+export function buildRobots({ baseUrl, environment, policies }) {
+  if (policies) {
+    const groups = [
+      `User-agent: *\n${robotsDirective(policies.search)}`,
+      `${ROBOTS_USER_AGENTS.citation.map((agent) => `User-agent: ${agent}`).join("\n")}\n${robotsDirective(policies.citation)}`,
+      `${ROBOTS_USER_AGENTS.modelTraining.map((agent) => `User-agent: ${agent}`).join("\n")}\n${robotsDirective(policies.modelTraining)}`,
+    ];
+    if (environment === "production") groups.push(`Sitemap: ${cleanBase(baseUrl)}/sitemap.xml`);
+    return `${groups.join("\n\n")}\n`;
+  }
+  if (environment !== "production") return "User-agent: *\nDisallow: /\n";
+  return `User-agent: *\nAllow: /\nSitemap: ${cleanBase(baseUrl)}/sitemap.xml\n`;
+}

package/src/tanstack-start.d.mts

@@ -0,0 +1,3 @@
+import type { SiteMetadata } from "./core/seo.mjs";
+export declare function toTanStackHead(metadata: SiteMetadata): { meta: Array<Record<string, string>>; links: Array<Record<string, string>> };
+export declare const toHtmlAttributes: (metadata: SiteMetadata) => { lang: string; dir: string };

package/src/tanstack-start.mjs

@@ -0,0 +1,25 @@
+export function toTanStackHead(metadata) {
+  return {
+    meta: [
+      { title: metadata.title },
+      { name: "description", content: metadata.description },
+      { property: "og:type", content: metadata.openGraph.type },
+      { property: "og:locale", content: metadata.openGraph.locale },
+      { property: "og:url", content: metadata.openGraph.url },
+      { property: "og:site_name", content: metadata.openGraph.siteName },
+      { property: "og:title", content: metadata.openGraph.title },
+      { property: "og:description", content: metadata.openGraph.description },
+      { property: "og:image", content: metadata.openGraph.images[0].url },
+      { name: "twitter:card", content: metadata.twitter.card },
+      { name: "twitter:title", content: metadata.twitter.title },
+      { name: "twitter:description", content: metadata.twitter.description },
+      { name: "twitter:image", content: metadata.twitter.image },
+    ],
+    links: [
+      { rel: "canonical", href: metadata.canonical },
+      ...metadata.alternates.map(({ hreflang, href }) => ({ rel: "alternate", hreflang, href })),
+    ],
+  };
+}
+
+export const toHtmlAttributes = (metadata) => ({ lang: metadata.html.lang, dir: metadata.html.dir });

package/styles.css

@@ -0,0 +1,44 @@
+@import "@devslab/dds-solid/styles.css";
+
+.dds-sr-only { position: absolute; inline-size: 1px; block-size: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
+.dds-sr-only:focus { position: fixed; inset-block-start: var(--dds-space-8); inset-inline-start: var(--dds-space-8); z-index: 1000; inline-size: auto; block-size: auto; padding: var(--dds-space-8) var(--dds-space-12); margin: 0; overflow: visible; clip-path: none; white-space: normal; border: 2px solid currentColor; border-radius: var(--dds-radius-sm); background: var(--dds-color-bg-default); color: var(--dds-color-text-primary); }
+
+.site-shell { min-block-size: 100dvh; display: flex; flex-direction: column; background: var(--dds-color-bg-default); color: var(--dds-color-text-primary); }
+.site-main { flex: 1; inline-size: min(100% - var(--dds-space-32), 1120px); margin-inline: auto; }
+.site-header { position: sticky; inset-block-start: 0; z-index: 100; border-block-end: 1px solid var(--dds-color-border-default); background: var(--dds-color-bg-default); }
+.site-header__inner { min-block-size: 64px; inline-size: min(100% - var(--dds-space-32), 1120px); margin-inline: auto; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: var(--dds-space-16); }
+.site-brand { justify-self: start; color: var(--dds-color-text-primary); font-weight: 700; text-decoration: none; }
+.site-nav { grid-column: 2; justify-self: center; min-inline-size: 0; }
+.site-nav__list, .site-footer__links { display: flex; flex-wrap: wrap; gap: var(--dds-space-16); padding: 0; margin: 0; list-style: none; }
+.site-nav__list a, .site-footer__links a { color: var(--dds-color-text-secondary); text-decoration: none; }
+.site-nav__list a:hover, .site-footer__links a:hover { color: var(--dds-color-text-primary); text-decoration: underline; }
+.site-header__controls { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: var(--dds-space-8); }
+.site-menu-button { display: none; }
+.site-locale { inline-size: auto; min-inline-size: 9rem; }
+.site-footer { border-block-start: 1px solid var(--dds-color-border-default); margin-block-start: var(--dds-space-64); padding-block: var(--dds-space-32); }
+.site-footer__inner { inline-size: min(100% - var(--dds-space-32), 1120px); margin-inline: auto; display: grid; gap: var(--dds-space-16); }
+.site-legal { max-inline-size: 760px; margin-inline: auto; padding-block: var(--dds-space-40); }
+.site-status { border: 1px solid var(--dds-color-border-default); border-inline-start-width: var(--dds-space-4); border-radius: var(--dds-radius-md); padding: var(--dds-space-12) var(--dds-space-16); }
+.site-status--danger { border-inline-start-color: var(--dds-color-status-danger); }
+.site-status--warning { border-inline-start-color: var(--dds-color-status-warning); }
+.site-status--success { border-inline-start-color: var(--dds-color-status-success); }
+.site-status--info { border-inline-start-color: var(--dds-color-status-info); }
+.site-request-form { display: grid; gap: var(--dds-space-16); max-inline-size: 640px; }
+.site-centered-layout { min-block-size: 60dvh; display: grid; place-content: center; justify-items: start; gap: var(--dds-space-16); }
+.oss-product-mark { display: block; flex: none; inline-size: var(--oss-product-mark-size); block-size: var(--oss-product-mark-size); object-fit: contain; }
+.oss-product-mark--sm { --oss-product-mark-size: 24px; }
+.oss-product-mark--md { --oss-product-mark-size: 32px; }
+.oss-product-mark--lg { --oss-product-mark-size: 48px; }
+
+@media (max-width: 720px) {
+  .site-header__inner { grid-template-columns: minmax(0, 1fr) auto; padding-block: var(--dds-space-12); }
+  .site-menu-button { display: inline-flex; grid-column: 2; grid-row: 1; }
+  .site-nav { display: none; grid-column: 1 / -1; grid-row: 2; justify-self: stretch; }
+  .site-nav[data-open="true"] { display: grid; }
+  .site-nav__list { display: grid; }
+  .site-header__controls { display: none; grid-column: 1 / -1; grid-row: 3; flex-wrap: wrap; }
+  .site-header__controls[data-open="true"] { display: flex; }
+}
+
+@media (prefers-reduced-motion: reduce) { .site-header { scroll-behavior: auto; } }
+@media (forced-colors: active) { .site-header, .site-footer, .site-status { forced-color-adjust: auto; } }