site/seo.ts

Functions

Imports

It imports no other module of this repo. Imported by site/vite.config.ts.

Source

1/**
2 * The site's search and AI surface, from Prelum (`@drdustinedwards/site-helpers`), the family's one
3 * SEO module: the front page's head tags and JSON-LD, and the sitemap, robots.txt (the family bot
4 * policy; Cloudflare puts its own lines first), ai.txt (citation welcome, training reserved, as the
5 * tdm-reservation header in _headers says) and llms.txt (https://llmstxt.org). site/vite.config.ts
6 * writes them into the build. The site is two pages, the public page at / and the admin at /admin/,
7 * whose sections are hash addresses that search engines treat as that page.
8 */
9import { headHtml, headTags } from "@drdustinedwards/site-helpers/head";
10import { llmsDocument } from "@drdustinedwards/site-helpers/llms";
11import { aiTxt, robotsDocument } from "@drdustinedwards/site-helpers/robots";
12import { graph, jsonLd, thing, website } from "@drdustinedwards/site-helpers/schema";
13import { sitemapDocument } from "@drdustinedwards/site-helpers/sitemap";
14
15/** The production origin (rulings.md, rule 16): a workers.dev copy must not claim to be the page. */
16const ORIGIN = "https://capsomer.dustinedwards.info";
17const REPO = "https://github.com/DrDustinEdwards/capsomer";
18const DESCRIPTION =
19  "Capsomer: the shared design system for Dustin Edwards's sites and apps. Six colour families, three faces, every component in every state, in plain CSS.";
20const AUTHOR = { "@type": "Person", "@id": "https://dustinedwards.info/#person", name: "Dustin Edwards", url: "https://dustinedwards.info" };
21
22const ADMIN_DESCRIPTION =
23  "Capsomer's admin: every token, every component in every state, and each component's test results.";
24
25/** A page's head: title, description, canonical, Open Graph and Twitter with the card; the public page also carries the JSON-LD, and the admin says noindex so search shows the public page. */
26export function siteHead(page: "home" | "admin"): string {
27  const card = { url: "/og-card.png", width: 1200, height: 630, alt: "Capsomer, the family design system" };
28  if (page === "admin")
29    return headHtml(
30      headTags({ origin: ORIGIN, path: "/admin/", title: "Capsomer admin", description: ADMIN_DESCRIPTION, image: card, siteName: "Capsomer", locale: "en_US", noindex: true }),
31    );
32  return headHtml([
33    ...headTags({
34      origin: ORIGIN,
35      path: "/",
36      title: "Capsomer",
37      description: DESCRIPTION,
38      image: card,
39      siteName: "Capsomer",
40      locale: "en_US",
41    }),
42    jsonLd(
43      graph([
44        website({ origin: ORIGIN, name: "Capsomer", description: DESCRIPTION, publisher: AUTHOR }),
45        thing("SoftwareSourceCode", {
46          "@id": `${ORIGIN}/#code`,
47          name: "Capsomer",
48          description: "Plain CSS with design tokens, web components and React wrappers, an app shell and patterns.",
49          url: ORIGIN,
50          codeRepository: REPO,
51          license: "https://opensource.org/licenses/MIT",
52          programmingLanguage: ["CSS", "TypeScript"],
53          author: AUTHOR,
54        }),
55      ]),
56    ),
57  ]);
58}
59
60/** The discovery files, by their path in the built site. */
61export function discoveryFiles(): Record<string, string> {
62  return {
63    "sitemap.xml": sitemapDocument([{ loc: `${ORIGIN}/` }]),
64    "robots.txt": robotsDocument({ origin: ORIGIN, notes: [`AI usage policy: ${ORIGIN}/ai.txt`, `LLM guide: ${ORIGIN}/llms.txt`] }),
65    "ai.txt": aiTxt({ origin: ORIGIN, name: "Capsomer", contact: "contact@dustinedwards.info" }),
66    "llms.txt": llmsDocument({
67      title: "Capsomer",
68      summary:
69        "Capsomer is Dustin Edwards's open-source (MIT) design system: plain CSS with design tokens, web components and React wrappers, an app shell and patterns, shared by his sites and apps (dustinedwards.info, the Capsid Portal, Carrel and others). No CSS framework; light and dark themes; every component tested for accessibility in every state.",
70      intro: [
71        [
72          `- Showcase: ${ORIGIN}/ (the colour families, type, every component with a link to its states, the defaults and how to install)`,
73          `- Admin: ${ORIGIN}/admin/ (an interactive page: every token, every component in every state, and each component's test results)`,
74          `- Code: ${REPO}`,
75          "- Author: Dustin Edwards, https://dustinedwards.info",
76        ].join("\n"),
77      ],
78      sections: [
79        {
80          heading: "Documentation",
81          links: [
82            { title: "README", url: `${REPO}#readme`, description: "what Capsomer holds and how apps use it" },
83            { title: "Components", url: `${REPO}/tree/main/components`, description: "one folder per component, each with its README, CSS and examples; how one is built is components/README.md" },
84            { title: "Defaults", url: `${REPO}/blob/main/DEFAULTS.md`, description: "the design defaults and their reasons" },
85            { title: "Changelog", url: `${REPO}/blob/main/CHANGELOG.md`, description: "every release and its breaking changes" },
86          ],
87        },
88      ],
89    }),
90  };
91}