@lovrozagar/flare 0.1.0

package/scripts/populate-fonts.ts

@@ -0,0 +1,721 @@
+/**
+ * Font generation pipeline — fetches Google Fonts CSS, parses it,
+ * and generates registry.gen.ts, unicode-ranges.gen.ts, and per-font files.
+ *
+ * Usage: bun run scripts/populate-fonts.ts
+ */
+import { createHash } from "node:crypto";
+import { existsSync, mkdirSync, readFileSync, writeFileSync } from "node:fs";
+import { join } from "node:path";
+
+function writeGenFile(filePath: string, body: string, generator: string): void {
+	const normalized = body.replace(/\n*$/, "\n");
+	const hash = createHash("sha256").update(normalized).digest("hex").slice(0, 12);
+	const header = `/* @generated by ${generator} — do not edit. checksum: ${hash} */`;
+	const fullContent = `${header}\n${normalized}`;
+
+	if (existsSync(filePath)) {
+		const existing = readFileSync(filePath, "utf-8");
+		const firstLine = existing.split("\n")[0] ?? "";
+		const match = firstLine.match(/checksum: ([0-9a-f]{12})/);
+		if (match?.[1] === hash) return;
+	}
+
+	mkdirSync(join(filePath, ".."), { recursive: true });
+	writeFileSync(filePath, fullContent, "utf-8");
+}
+
+/* ── curated font list ─────────────────────────────────────────── */
+
+const FONTS = [
+	"ABeeZee",
+	"Abel",
+	"Abril Fatface",
+	"Acme",
+	"Alegreya",
+	"Alegreya Sans",
+	"Alfa Slab One",
+	"Amatic SC",
+	"Amiri",
+	"Antic Slab",
+	"Anton",
+	"Archivo",
+	"Archivo Black",
+	"Archivo Narrow",
+	"Arimo",
+	"Arvo",
+	"Asap",
+	"Assistant",
+	"Barlow",
+	"Barlow Condensed",
+	"Barlow Semi Condensed",
+	"Be Vietnam Pro",
+	"Bebas Neue",
+	"Bitter",
+	"Black Ops One",
+	"Bree Serif",
+	"Cabin",
+	"Cairo",
+	"Catamaran",
+	"Caveat",
+	"Chakra Petch",
+	"Cinzel",
+	"Comfortaa",
+	"Commissioner",
+	"Cormorant Garamond",
+	"Courgette",
+	"Crimson Text",
+	"DM Mono",
+	"DM Sans",
+	"DM Serif Display",
+	"Dancing Script",
+	"Domine",
+	"Dosis",
+	"EB Garamond",
+	"Encode Sans",
+	"Exo 2",
+	"Figtree",
+	"Fira Code",
+	"Fira Sans",
+	"Fira Sans Condensed",
+	"Fjalla One",
+	"Fredoka",
+	"Gelasio",
+	"Gloria Hallelujah",
+	"Gothic A1",
+	"Great Vibes",
+	"Heebo",
+	"Hind",
+	"Hind Siliguri",
+	"IBM Plex Mono",
+	"IBM Plex Sans",
+	"IBM Plex Sans Arabic",
+	"IBM Plex Serif",
+	"Inconsolata",
+	"Indie Flower",
+	"Inter",
+	"Inter Tight",
+	"JetBrains Mono",
+	"Josefin Sans",
+	"Josefin Slab",
+	"Jost",
+	"Kalam",
+	"Kanit",
+	"Karla",
+	"Khand",
+	"Lato",
+	"League Spartan",
+	"Lexend",
+	"Lexend Deca",
+	"Libre Baskerville",
+	"Libre Franklin",
+	"Lilita One",
+	"Lobster",
+	"Lobster Two",
+	"Lora",
+	"M PLUS Rounded 1c",
+	"Manrope",
+	"Maven Pro",
+	"Merriweather",
+	"Merriweather Sans",
+	"Montserrat",
+	"Montserrat Alternates",
+	"Mulish",
+	"Nanum Gothic",
+	"Neuton",
+	"Noticia Text",
+	"Noto Sans",
+	"Noto Sans Arabic",
+	"Noto Sans JP",
+	"Noto Sans KR",
+	"Noto Sans SC",
+	"Noto Sans TC",
+	"Noto Serif",
+	"Nunito",
+	"Nunito Sans",
+	"Old Standard TT",
+	"Onest",
+	"Open Sans",
+	"Orbitron",
+	"Oswald",
+	"Outfit",
+	"Overpass",
+	"Oxygen",
+	"PT Sans",
+	"PT Sans Narrow",
+	"PT Serif",
+	"Pacifico",
+	"Passion One",
+	"Pathway Gothic One",
+	"Permanent Marker",
+	"Philosopher",
+	"Play",
+	"Playfair Display",
+	"Plus Jakarta Sans",
+	"Poppins",
+	"Prompt",
+	"Public Sans",
+	"Quicksand",
+	"Rajdhani",
+	"Raleway",
+	"Recursive",
+	"Red Hat Display",
+	"Righteous",
+	"Roboto",
+	"Roboto Condensed",
+	"Roboto Flex",
+	"Roboto Mono",
+	"Roboto Slab",
+	"Rokkitt",
+	"Rubik",
+	"Saira",
+	"Satisfy",
+	"Sawarabi Mincho",
+	"Shadows Into Light",
+	"Signika Negative",
+	"Slabo 27px",
+	"Sora",
+	"Source Code Pro",
+	"Source Sans 3",
+	"Source Serif 4",
+	"Space Grotesk",
+	"Space Mono",
+	"Spectral",
+	"Teko",
+	"Titillium Web",
+	"Ubuntu",
+	"Ubuntu Condensed",
+	"Ubuntu Mono",
+	"Unbounded",
+	"Urbanist",
+	"Varela Round",
+	"Vollkorn",
+	"Work Sans",
+	"Yanone Kaffeesatz",
+	"Yellowtail",
+	"Zen Kaku Gothic New",
+	"Zilla Slab",
+];
+
+/* ── category lookup table ─────────────────────────────────────── */
+
+const CATEGORY_MAP: Record<string, string> = {
+	ABeeZee: "sans-serif",
+	Abel: "sans-serif",
+	"Abril Fatface": "display",
+	Acme: "sans-serif",
+	Alegreya: "serif",
+	"Alegreya Sans": "sans-serif",
+	"Alfa Slab One": "display",
+	"Amatic SC": "handwriting",
+	Amiri: "serif",
+	"Antic Slab": "serif",
+	Anton: "sans-serif",
+	Archivo: "sans-serif",
+	"Archivo Black": "sans-serif",
+	"Archivo Narrow": "sans-serif",
+	Arimo: "sans-serif",
+	Arvo: "serif",
+	Asap: "sans-serif",
+	Assistant: "sans-serif",
+	Barlow: "sans-serif",
+	"Barlow Condensed": "sans-serif",
+	"Barlow Semi Condensed": "sans-serif",
+	"Be Vietnam Pro": "sans-serif",
+	"Bebas Neue": "sans-serif",
+	Bitter: "serif",
+	"Black Ops One": "display",
+	"Bree Serif": "serif",
+	Cabin: "sans-serif",
+	Cairo: "sans-serif",
+	Catamaran: "sans-serif",
+	Caveat: "handwriting",
+	"Chakra Petch": "sans-serif",
+	Cinzel: "serif",
+	Comfortaa: "display",
+	Commissioner: "sans-serif",
+	"Cormorant Garamond": "serif",
+	Courgette: "handwriting",
+	"Crimson Text": "serif",
+	"DM Mono": "monospace",
+	"DM Sans": "sans-serif",
+	"DM Serif Display": "serif",
+	"Dancing Script": "handwriting",
+	Domine: "serif",
+	Dosis: "sans-serif",
+	"EB Garamond": "serif",
+	"Encode Sans": "sans-serif",
+	"Exo 2": "sans-serif",
+	Figtree: "sans-serif",
+	"Fira Code": "monospace",
+	"Fira Sans": "sans-serif",
+	"Fira Sans Condensed": "sans-serif",
+	"Fjalla One": "sans-serif",
+	Fredoka: "sans-serif",
+	Gelasio: "serif",
+	"Gloria Hallelujah": "handwriting",
+	"Gothic A1": "sans-serif",
+	"Great Vibes": "handwriting",
+	Heebo: "sans-serif",
+	Hind: "sans-serif",
+	"Hind Siliguri": "sans-serif",
+	"IBM Plex Mono": "monospace",
+	"IBM Plex Sans": "sans-serif",
+	"IBM Plex Sans Arabic": "sans-serif",
+	"IBM Plex Serif": "serif",
+	Inconsolata: "monospace",
+	"Indie Flower": "handwriting",
+	Inter: "sans-serif",
+	"Inter Tight": "sans-serif",
+	"JetBrains Mono": "monospace",
+	"Josefin Sans": "sans-serif",
+	"Josefin Slab": "serif",
+	Jost: "sans-serif",
+	Kalam: "handwriting",
+	Kanit: "sans-serif",
+	Karla: "sans-serif",
+	Khand: "sans-serif",
+	Lato: "sans-serif",
+	"League Spartan": "sans-serif",
+	Lexend: "sans-serif",
+	"Lexend Deca": "sans-serif",
+	"Libre Baskerville": "serif",
+	"Libre Franklin": "sans-serif",
+	"Lilita One": "sans-serif",
+	Lobster: "display",
+	"Lobster Two": "display",
+	Lora: "serif",
+	"M PLUS Rounded 1c": "sans-serif",
+	Manrope: "sans-serif",
+	"Maven Pro": "sans-serif",
+	Merriweather: "serif",
+	"Merriweather Sans": "sans-serif",
+	Montserrat: "sans-serif",
+	"Montserrat Alternates": "sans-serif",
+	Mulish: "sans-serif",
+	"Nanum Gothic": "sans-serif",
+	Neuton: "serif",
+	"Noticia Text": "serif",
+	"Noto Sans": "sans-serif",
+	"Noto Sans Arabic": "sans-serif",
+	"Noto Sans JP": "sans-serif",
+	"Noto Sans KR": "sans-serif",
+	"Noto Sans SC": "sans-serif",
+	"Noto Sans TC": "sans-serif",
+	"Noto Serif": "serif",
+	Nunito: "sans-serif",
+	"Nunito Sans": "sans-serif",
+	"Old Standard TT": "serif",
+	Onest: "sans-serif",
+	"Open Sans": "sans-serif",
+	Orbitron: "sans-serif",
+	Oswald: "sans-serif",
+	Outfit: "sans-serif",
+	Overpass: "sans-serif",
+	Oxygen: "sans-serif",
+	"PT Sans": "sans-serif",
+	"PT Sans Narrow": "sans-serif",
+	"PT Serif": "serif",
+	Pacifico: "handwriting",
+	"Passion One": "display",
+	"Pathway Gothic One": "sans-serif",
+	"Permanent Marker": "handwriting",
+	Philosopher: "sans-serif",
+	Play: "sans-serif",
+	"Playfair Display": "serif",
+	"Plus Jakarta Sans": "sans-serif",
+	Poppins: "sans-serif",
+	Prompt: "sans-serif",
+	"Public Sans": "sans-serif",
+	Quicksand: "sans-serif",
+	Rajdhani: "sans-serif",
+	Raleway: "sans-serif",
+	Recursive: "sans-serif",
+	"Red Hat Display": "sans-serif",
+	Righteous: "display",
+	Roboto: "sans-serif",
+	"Roboto Condensed": "sans-serif",
+	"Roboto Flex": "sans-serif",
+	"Roboto Mono": "monospace",
+	"Roboto Slab": "serif",
+	Rokkitt: "serif",
+	Rubik: "sans-serif",
+	Saira: "sans-serif",
+	Satisfy: "handwriting",
+	"Sawarabi Mincho": "serif",
+	"Shadows Into Light": "handwriting",
+	"Signika Negative": "sans-serif",
+	"Slabo 27px": "serif",
+	Sora: "sans-serif",
+	"Source Code Pro": "monospace",
+	"Source Sans 3": "sans-serif",
+	"Source Serif 4": "serif",
+	"Space Grotesk": "sans-serif",
+	"Space Mono": "monospace",
+	Spectral: "serif",
+	Teko: "sans-serif",
+	"Titillium Web": "sans-serif",
+	Ubuntu: "sans-serif",
+	"Ubuntu Condensed": "sans-serif",
+	"Ubuntu Mono": "monospace",
+	Unbounded: "sans-serif",
+	Urbanist: "sans-serif",
+	"Varela Round": "sans-serif",
+	Vollkorn: "serif",
+	"Work Sans": "sans-serif",
+	"Yanone Kaffeesatz": "sans-serif",
+	Yellowtail: "handwriting",
+	"Zen Kaku Gothic New": "sans-serif",
+	"Zilla Slab": "serif",
+};
+
+/* ── fallback font for category ────────────────────────────────── */
+
+const CATEGORY_FALLBACK: Record<string, string> = {
+	display: "Arial",
+	handwriting: "Arial",
+	monospace: "Courier New",
+	"sans-serif": "Arial",
+	serif: "Times New Roman",
+};
+
+/* ── capsizecss metrics loader ─────────────────────────────────── */
+
+/* @capsizecss/metrics provides pre-calculated metrics for many fonts */
+async function getFallbackMetrics(
+	family: string,
+	category: string,
+): Promise<
+	| {
+			ascentOverride: string;
+			descentOverride: string;
+			fallbackFont: string;
+			lineGapOverride: string;
+			sizeAdjust: string;
+	  }
+	| undefined
+> {
+	const noSpaces = family.replace(/ /g, "");
+	const slug = noSpaces[0].toLowerCase() + noSpaces.slice(1);
+	try {
+		const mod = await import(`@capsizecss/metrics/${slug}`);
+		const metrics = mod.default ?? mod;
+
+		const fallbackFont = CATEGORY_FALLBACK[category] ?? "Arial";
+		let fallbackMetrics: {
+			ascent: number;
+			capHeight: number;
+			descent: number;
+			lineGap: number;
+			unitsPerEm: number;
+		};
+
+		try {
+			const fbNoSpaces = fallbackFont.replace(/ /g, "");
+			const fallbackSlug = fbNoSpaces[0].toLowerCase() + fbNoSpaces.slice(1);
+			const fallbackMod = await import(`@capsizecss/metrics/${fallbackSlug}`);
+			fallbackMetrics = fallbackMod.default ?? fallbackMod;
+		} catch {
+			return undefined;
+		}
+
+		/* calculate size-adjust and override values */
+		const sizeAdjust =
+			((metrics.unitsPerEm / fallbackMetrics.unitsPerEm) *
+				(fallbackMetrics.ascent - fallbackMetrics.descent + fallbackMetrics.lineGap)) /
+			(metrics.ascent - metrics.descent + metrics.lineGap);
+
+		const ascentOverride = metrics.ascent / (metrics.unitsPerEm * sizeAdjust);
+		const descentOverride = Math.abs(metrics.descent) / (metrics.unitsPerEm * sizeAdjust);
+		const lineGapOverride = metrics.lineGap / (metrics.unitsPerEm * sizeAdjust);
+
+		return {
+			ascentOverride: `${(ascentOverride * 100).toFixed(2)}%`,
+			descentOverride: `${(descentOverride * 100).toFixed(2)}%`,
+			fallbackFont,
+			lineGapOverride: `${(lineGapOverride * 100).toFixed(2)}%`,
+			sizeAdjust: `${(sizeAdjust * 100).toFixed(2)}%`,
+		};
+	} catch {
+		return undefined;
+	}
+}
+
+/* ── Google Fonts CSS parser ───────────────────────────────────── */
+
+interface ParsedEntry {
+	family: string;
+	style: "italic" | "normal";
+	subset: string;
+	unicodeRange: string;
+	url: string;
+	weight: string;
+}
+
+function parseCss(css: string, family: string): ParsedEntry[] {
+	const entries: ParsedEntry[] = [];
+
+	/* match each @font-face block, preceded by a subset comment */
+	const blockRe = /\/\*\s*([a-zA-Z0-9-]+)\s*\*\/\s*@font-face\s*\{([^}]+)\}/g;
+	let match: RegExpExecArray | null;
+
+	while ((match = blockRe.exec(css)) !== null) {
+		const subset = match[1] ?? "";
+		const body = match[2] ?? "";
+
+		const styleMatch = /font-style:\s*(italic|normal)/.exec(body);
+		const weightMatch = /font-weight:\s*([\d\s]+)/.exec(body);
+		const srcMatch = /url\(([^)]+)\)\s*format\(['"]woff2['"]\)/.exec(body);
+		const rangeMatch = /unicode-range:\s*([^;]+)/.exec(body);
+
+		if (srcMatch && rangeMatch) {
+			entries.push({
+				family,
+				style: (styleMatch?.[1] as "italic" | "normal") ?? "normal",
+				subset,
+				unicodeRange: rangeMatch[1]?.trim() ?? "",
+				url: srcMatch[1]?.trim() ?? "",
+				weight: weightMatch?.[1]?.trim() ?? "400",
+			});
+		}
+	}
+
+	return entries;
+}
+
+async function fetchGoogleFontCss(family: string, variable: boolean): Promise<string | undefined> {
+	const encodedFamily = family.replace(/\s+/g, "+");
+	const spec = variable
+		? `${encodedFamily}:ital,wght@0,100..900;1,100..900`
+		: `${encodedFamily}:ital,wght@0,400;0,700;1,400;1,700`;
+
+	const url = `https://fonts.googleapis.com/css2?family=${spec}&display=swap`;
+
+	/* woff2 user-agent trick */
+	const res = await fetch(url, {
+		headers: {
+			"User-Agent":
+				"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36",
+		},
+	});
+
+	if (!res.ok) return undefined;
+	return res.text();
+}
+
+/* ── slug helpers ──────────────────────────────────────────────── */
+
+function toSlug(family: string): string {
+	return family.toLowerCase().replace(/\s+/g, "-");
+}
+
+function toCamelCase(family: string): string {
+	return family
+		.replace(/[^a-zA-Z0-9\s]/g, "")
+		.split(/\s+/)
+		.map((word, i) => {
+			const lower = word.toLowerCase();
+			if (i === 0) return lower;
+			return lower[0]?.toUpperCase() + lower.slice(1);
+		})
+		.join("");
+}
+
+/* ── output generation ─────────────────────────────────────────── */
+
+interface FontGenData {
+	camelName: string;
+	category: string;
+	fallbackMetrics?: {
+		ascentOverride: string;
+		descentOverride: string;
+		fallbackFont: string;
+		lineGapOverride: string;
+		sizeAdjust: string;
+	};
+	family: string;
+	slug: string;
+	subsetEntries: Array<{
+		style: "italic" | "normal";
+		subset: string;
+		unicodeRange: string;
+		weight: string;
+	}>;
+	subsets: string[];
+	weights: number[] | string;
+}
+
+function generatePerFontFile(font: FontGenData): string {
+	const subsetsType = font.subsets.map((s) => `"${s}"`).join(" | ");
+	const slug = font.slug;
+
+	const entriesStr = font.subsetEntries
+		.map(
+			(e) =>
+				`    { style: "${e.style}", subset: "${e.subset}", ` +
+				`unicodeRange: "${e.unicodeRange}", ` +
+				`url: "/fonts/${slug}/${buildFileName(e)}", ` +
+				`weight: ${JSON.stringify(e.weight)} }`,
+		)
+		.join(",\n");
+
+	const metricsStr = font.fallbackMetrics
+		? `  fallbackMetrics: ${JSON.stringify(font.fallbackMetrics, null, 4).replace(/\n/g, "\n  ")},\n`
+		: "";
+
+	const weightsStr = typeof font.weights === "string" ? `"${font.weights}"` : JSON.stringify(font.weights);
+
+	return `import { createRegistryFont } from "./create-registry-font"
+import type { Font } from "./types"
+
+export const ${font.camelName}: Font<${subsetsType}> = createRegistryFont({
+  category: "${font.category}",
+${metricsStr}  family: "${font.family}",
+  subsetEntries: [
+${entriesStr},
+  ],
+  subsets: [${font.subsets.map((s) => `"${s}"`).join(", ")}],
+  weights: ${weightsStr},
+})
+`;
+}
+
+function buildFileName(entry: { style: "italic" | "normal"; subset: string; weight: string }): string {
+	const parts = [entry.subset];
+	if (entry.style === "italic") parts.push("i");
+
+	/* static weight: append weight number */
+	if (/^\d+$/.test(entry.weight)) {
+		parts.push(entry.weight);
+	}
+
+	return `${parts.join("-")}.woff2`;
+}
+
+/* ── main pipeline ─────────────────────────────────────────────── */
+
+async function main(): Promise<void> {
+	const fontsDir = join(import.meta.dirname ?? ".", "..", "src", "fonts");
+
+	if (!existsSync(fontsDir)) {
+		mkdirSync(fontsDir, { recursive: true });
+	}
+
+	const allFonts: FontGenData[] = [];
+	const errors: string[] = [];
+
+	for (const family of FONTS) {
+		process.stdout.write(`Processing ${family}... `);
+
+		/* try variable first, fall back to static */
+		let css = await fetchGoogleFontCss(family, true);
+		let isVariable = true;
+
+		if (!css || css.trim().length < 50) {
+			css = await fetchGoogleFontCss(family, false);
+			isVariable = false;
+		}
+
+		if (!css) {
+			errors.push(family);
+			console.log("FAILED (no CSS)");
+			continue;
+		}
+
+		const entries = parseCss(css, family);
+		if (entries.length === 0) {
+			errors.push(family);
+			console.log("FAILED (no entries parsed)");
+			continue;
+		}
+
+		/* determine subsets + weights */
+		const subsets = [...new Set(entries.map((e) => e.subset))].sort();
+
+		let weights: number[] | string;
+		if (isVariable) {
+			/* use the range from the first entry */
+			const first = entries[0];
+			weights = first?.weight ?? "100 900";
+		} else {
+			weights = [...new Set(entries.map((e) => Number.parseInt(e.weight, 10)))].sort((a, b) => a - b);
+		}
+
+		/* deduplicate subset entries (same subset + style + weight = one entry) */
+		const seen = new Set<string>();
+		const deduped = entries.filter((e) => {
+			const key = `${e.subset}:${e.style}:${e.weight}`;
+			if (seen.has(key)) return false;
+			seen.add(key);
+			return true;
+		});
+
+		const category = CATEGORY_MAP[family] ?? "sans-serif";
+		const fallbackMetrics = await getFallbackMetrics(family, category);
+
+		const fontData: FontGenData = {
+			camelName: toCamelCase(family),
+			category,
+			fallbackMetrics,
+			family,
+			slug: toSlug(family),
+			subsetEntries: deduped.map((e) => ({
+				style: e.style,
+				subset: e.subset,
+				unicodeRange: e.unicodeRange,
+				weight: e.weight,
+			})),
+			subsets,
+			weights,
+		};
+
+		allFonts.push(fontData);
+		console.log(`OK (${subsets.length} subsets, ${deduped.length} entries)`);
+	}
+
+	/* generate per-font files */
+	for (const font of allFonts) {
+		const content = generatePerFontFile(font);
+		writeFileSync(join(fontsDir, `${font.slug}.ts`), content);
+	}
+
+	/* generate registry.gen.ts */
+	const registryEntries = allFonts
+		.map((f) => `  ["${f.family}", "${f.slug}", "${f.camelName}", "${f.category}"]`)
+		.join(",\n");
+
+	writeGenFile(
+		join(fontsDir, "registry.gen.ts"),
+		`\nexport const FONT_REGISTRY: Array<[family: string, slug: string, camelName: string, category: string]> = [\n${registryEntries},\n]\n`,
+		"flare/fonts",
+	);
+
+	/* generate unicode-ranges.gen.ts */
+	const allRanges = new Map<string, string>();
+	for (const font of allFonts) {
+		for (const entry of font.subsetEntries) {
+			if (!allRanges.has(entry.subset)) {
+				allRanges.set(entry.subset, entry.unicodeRange);
+			}
+		}
+	}
+
+	const rangeEntries = [...allRanges.entries()]
+		.sort(([a], [b]) => a.localeCompare(b))
+		.map(([subset, range]) => `  "${subset}": "${range}"`)
+		.join(",\n");
+
+	writeGenFile(
+		join(fontsDir, "unicode-ranges.gen.ts"),
+		`\nexport const UNICODE_RANGES: Record<string, string> = {\n${rangeEntries},\n}\n`,
+		"flare/fonts",
+	);
+
+	/* summary */
+	console.log(`\nGenerated ${allFonts.length} fonts`);
+	if (errors.length > 0) {
+		console.log(`Failed: ${errors.join(", ")}`);
+	}
+}
+
+main().catch(console.error);