site/data.ts

Functions

Imports

It imports site/markdown.ts. Imported by site/color-view.tsx, site/main.tsx, site/parts.tsx, site/views.tsx.

Source

1// What the site reads at build time: every component's doc page, the palette with its
2// asserted pairs, the last test run, the scales, and the repo's own pages. The data files
3// come from `capsomer site-data`, which CI runs after the tests and before the build.
4import { frontmatter } from "./markdown.ts";
5import tokensJson from "../tokens/tokens.json";
6
7export interface ComponentDoc {
8  name: string;
9  title: string;
10  summary: string;
11  tool: string;
12  parts: string[];
13  states: string[];
14  added: string;
15  source: string;
16  body: string;
17}
18
19const docs = import.meta.glob("../components/*/*.md", { query: "?raw", import: "default", eager: true }) as Record<string, string>;
20
21export const COMPONENTS: ComponentDoc[] = Object.entries(docs)
22  .filter(([path]) => {
23    const m = /components\/([\w-]+)\/([\w-]+)\.md$/.exec(path);
24    return m && m[1] === m[2];
25  })
26  .map(([path, src]) => {
27    const { data, body } = frontmatter(src);
28    const name = /components\/([\w-]+)\//.exec(path)?.[1] ?? path;
29    const str = (k: string) => (typeof data[k] === "string" ? (data[k] as string) : "");
30    const list = (k: string) => (Array.isArray(data[k]) ? (data[k] as string[]) : str(k) ? [str(k)] : []);
31    return { name, title: str("title") || name, summary: str("summary"), tool: str("tool"), parts: list("parts"), states: list("states"), added: str("added"), source: str("source"), body };
32  })
33  .sort((a, b) => a.title.localeCompare(b.title));
34
35export interface Pair {
36  fg: string;
37  bg: string;
38  min: number;
39  what: string;
40  ratio: number;
41  pass: boolean;
42}
43export interface Palette {
44  seed: string;
45  order: string[];
46  light: { tokens: Record<string, string>; pairs: Pair[] };
47  dark: { tokens: Record<string, string>; pairs: Pair[] };
48}
49
50interface TestRow {
51  title: string;
52  theme: "light" | "dark" | null;
53  kind: "keyboard" | "accessibility" | "behaviour";
54  status: "passed" | "failed" | "skipped";
55  error: string | null;
56}
57export interface ComponentResults {
58  keyboard: { passed: number; failed: number };
59  accessibility: { passed: number; failed: number };
60  behaviour: { passed: number; failed: number };
61  tests: TestRow[];
62}
63export interface Results {
64  available: boolean;
65  ran: string | null;
66  components: Record<string, ComponentResults>;
67  totals: { passed: number; failed: number; skipped: number };
68}
69export interface Meta {
70  version: string;
71  commit: string | null;
72  branch: string | null;
73  built: string;
74  runUrl: string | null;
75}
76
77const data = import.meta.glob("./data/*.json", { import: "default", eager: true }) as Record<string, unknown>;
78export const PALETTE = (data["./data/palette.json"] ?? null) as Palette | null;
79// The results this build was made with. The deployed site then reads the last run on main
80// from the repo's results branch, which CI writes after every run (see .github/workflows),
81// so the site never waits for a redeploy to show a new result.
82export const RESULTS_BUILD = (data["./data/results.json"] ?? { available: false, ran: null, components: {}, totals: { passed: 0, failed: 0, skipped: 0 } }) as Results;
83const RESULTS_URL = "https://raw.githubusercontent.com/DrDustinEdwards/capsomer/results/results.json";
84
85export async function fetchResults(): Promise<Results | null> {
86  try {
87    const r = await fetch(RESULTS_URL, { cache: "no-cache" });
88    if (!r.ok) return null;
89    const j = (await r.json()) as Results;
90    return j && typeof j === "object" && j.components ? j : null;
91  } catch {
92    return null;
93  }
94}
95
96interface FamilyPair extends Pair {
97  family: string;
98  scheme: "light" | "dark";
99  isDefault: boolean;
100  fgHex: string;
101  bgHex: string;
102}
103export interface Families {
104  families: Record<string, { seed: string; anchor: string | null; defaultTheme: "light" | "dark"; note: string }>;
105  pairs: FamilyPair[];
106  scales?: Record<string, { light: string[]; dark: string[] }>;
107}
108export const FAMILIES = (data["./data/families.json"] ?? null) as Families | null;
109export const META = (data["./data/meta.json"] ?? { version: "0.1.0", commit: null, branch: null, built: "", runUrl: null }) as Meta;
110
111type TokenGroup = Record<string, { $value: unknown; $description?: string }>;
112export const SCALES = tokensJson as unknown as Record<string, TokenGroup>;
113
114const pages = import.meta.glob("../*.md", { query: "?raw", import: "default", eager: true }) as Record<string, string>;
115export const DEFAULTS_MD = pages["../DEFAULTS.md"] ?? "";
116export const CHANGELOG_MD = pages["../CHANGELOG.md"] ?? "";
117
118export const BASE = import.meta.env.BASE_URL;