meowpress 0.3.0-alpha.0 → 0.3.0-alpha.1

package/README.md

@@ -58,9 +58,17 @@ export default meowSite({
 
 Directories in the configuration are provided explicitly by the application; the default theme resolves from this package and does not depend on the startup directory.
 The whole theme can be replaced with `theme: defineTheme(...)`; all static pages output that theme's root attributes and default options.
-The build writes `theme.cssText` to a temporary CSS file, then lets Bun handle fonts and other assets, and finally delivers through a stylesheet link,
-so the theme applies without client-side JavaScript. Files for the default Geist font are bundled with the site and do not depend on an external font service.
-When the default font is used, the output also includes `licenses/geist-OFL.txt`, preserving the font's SIL OFL license.
+The build writes `theme.cssText` to a temporary CSS file, then lets Bun handle the other assets, and finally delivers through a stylesheet link,
+so the theme applies without client-side JavaScript.
+
+`fonts` lists the web fonts the theme names, as Fontsource variable packages
+(`{ family, package, styles }`, the same shape as Meowtail's `journalFonts`). The build publishes
+each package's weight-axis `woff2` files into `fonts/` with a content hash, puts their `@font-face`
+rules first in the theme stylesheet with each subset's `unicode-range`, and copies each license to
+`licenses/<name>-OFL.txt`. A browser fetches only the files a page's text and families use, and
+nothing for a family the page does not use, so a site with a theme switch pays only for the active
+theme. The default Blog theme defaults to `blogFonts` (Geist); any other theme defaults to none.
+Install the listed packages in the site; nothing depends on an external font service.
 Default illustrations use in-package vectors and CSS and require no business images. The `hero`, `feed` and `about` keys of `site.images`
 can explicitly set decorative image paths, for example `images/cover.svg`; paths are relative to the content root's `assets/`, the library handles each page depth,
 and assets are delivered along the existing asset build flow. When no About image is set, the first letter of the site name is used.
@@ -75,8 +83,8 @@ After installing `meowpress` and its `meowcss` and `meowjsx` dependencies, run i
 bunx --no-install meowpress --config ./site.config.ts
 ```
 
-The CLI requires Bun, and the output location is determined by `outputDirectory`. Font files resolve from this package's official Geist dependency,
-and consumers are not required to copy source, install workspace-root dependencies or access an external font service.
+The CLI requires Bun, and the output location is determined by `outputDirectory`. Font packages resolve from the startup directory first, then from
+this package, which carries the default Geist, so consumers are not required to copy source, install workspace-root dependencies or access an external font service.
 
 ## Independent verification
 

package/dist/src/build.d.ts

@@ -1,9 +1,11 @@
 import { type ThemeDefinition } from "meowcss";
+import { type SiteFont } from "./fonts.js";
 import { type SiteIdentity } from "./identity.js";
 import { type ContentSourceInput, type MdxComponent } from "./content.js";
 import { type SitePageProvider } from "./pages.js";
 export type { SitePage, SitePageContext, SitePageProvider } from "./pages.js";
 export type { ContentItem } from "./content.js";
+export type { SiteFont } from "./fonts.js";
 export type { SiteIdentity } from "./identity.js";
 export interface SiteConfig {
     /** One or more roots containing `posts/`, `thoughts/`, and optional assets. */
@@ -24,6 +26,11 @@ export interface SiteConfig {
     mdxComponents?: Record<string, MdxComponent>;
     /** Stylesheet file name for the theme; defaults to "blog-theme.css". */
     themeStylesheet?: string;
+    /**
+     * Web fonts the theme names, published as separate files with their licenses. Defaults to Geist
+     * for the default Blog theme and to none for any other theme.
+     */
+    fonts?: readonly SiteFont[];
 }
 export interface ResolvedSiteConfig {
     content: readonly ContentSourceInput[];
@@ -35,6 +42,7 @@ export interface ResolvedSiteConfig {
     pages?: SitePageProvider;
     mdxComponents: Record<string, MdxComponent>;
     themeStylesheet: string;
+    fonts: readonly SiteFont[];
 }
 /** Define a site config in the app package without taking on the build pipeline. */
 export declare function meowSite(config: SiteConfig): ResolvedSiteConfig;

package/dist/src/build.js

@@ -1,8 +1,9 @@
-import { blogTheme } from "./theme.js";
+import { removeLegacyIsFallbacks } from "meowcss/bundle";
+import { blogFonts, blogTheme } from "./theme.js";
+import { FONT_EXTERNAL, publishFonts } from "./fonts.js";
 import { DEFAULT_SITE } from "./identity.js";
-import { mkdir, rm, writeFile, cp } from "node:fs/promises";
+import { mkdir, readFile, rm, writeFile, cp } from "node:fs/promises";
 import { isAbsolute, join, relative, resolve } from "node:path";
-import { fileURLToPath } from "node:url";
 import { collectContentAssets, isDraftAsset, loadSection, normalizeContentSources, } from "./content.js";
 import { aboutPage, agentMarkdown, DEFAULT_THEME_STYLESHEET, homePage, listPage, llmText, postPage, skillPage, skillsIndexPage, thoughtPage, } from "./site.js";
 import { loadSkills } from "./skills.js";
@@ -21,6 +22,7 @@ export function meowSite(config) {
         pages: config.pages,
         mdxComponents: config.mdxComponents ?? {},
         themeStylesheet: config.themeStylesheet ?? DEFAULT_THEME_STYLESHEET,
+        fonts: config.fonts ?? (config.theme === undefined || config.theme === blogTheme ? blogFonts : []),
     };
 }
 async function writePage(generatedDirectory, pathname, html) {
@@ -56,11 +58,17 @@ async function buildStaticHtmlFromEntrypoints(entrypoints, generatedDirectory, o
         outdir: outputDirectory,
         target: "browser",
         minify: true,
+        // Published font files stay separate, so subsets load by unicode-range instead of inline.
+        external: [FONT_EXTERNAL],
     });
     if (!result.success) {
         console.error(result.logs);
         throw new Error("Unable to build site static HTML");
     }
+    // Bun writes legacy :-webkit-any()/:-moz-any() copies of every :is() rule; Safari misreads them.
+    for (const output of result.outputs)
+        if (output.path.endsWith(".css"))
+            await writeFile(output.path, removeLegacyIsFallbacks(await readFile(output.path, "utf8")));
 }
 /** Consumer pages are written inside the generated directory and never above it. */
 function consumerPageFile(generatedDirectory, path) {
@@ -133,14 +141,12 @@ export async function buildSite(input) {
             entrypoints.push(await writePage(generatedDirectory, `${skillPath}/index.html`, skillPage(skill, config.theme, config.site, config.themeStylesheet)));
         }
     }
-    await writeFile(join(generatedDirectory, config.themeStylesheet), config.theme.cssText.replaceAll('"@fontsource-variable/geist"', JSON.stringify(fileURLToPath(import.meta.resolve("@fontsource-variable/geist")))), "utf8");
+    // Font faces come first in the one theme stylesheet; the bundled stylesheet sits at the output
+    // root, next to the published font directory its rules reference.
+    const fontFaces = await publishFonts(config.fonts, config.outputDirectory);
+    await writeFile(join(generatedDirectory, config.themeStylesheet), fontFaces ? `${fontFaces}\n${config.theme.cssText}` : config.theme.cssText, "utf8");
     await stageAssets(generatedDirectory, config.content);
     await buildStaticHtmlFromEntrypoints(entrypoints, generatedDirectory, config.outputDirectory);
-    if (config.theme.cssText.includes('"@fontsource-variable/geist"')) {
-        const licensesDirectory = join(config.outputDirectory, "licenses");
-        await mkdir(licensesDirectory, { recursive: true });
-        await cp(fileURLToPath(import.meta.resolve("@fontsource-variable/geist/LICENSE")), join(licensesDirectory, "geist-OFL.txt"));
-    }
     await copyPostAssets(config.outputDirectory, config.content);
     await Promise.all([
         writeFile(join(config.outputDirectory, "llm.txt"), llmText(posts, thoughts, config.site, pages), "utf8"),

package/dist/src/fonts.d.ts

@@ -0,0 +1,21 @@
+/**
+ * A web font a site loads, as a Fontsource variable package: `family` is the name the theme's
+ * stacks use, `package` the npm package with its weight-axis files, and `styles` which of them to
+ * load (`italic` loads `wght-italic.css`). The same shape as Meowtail's `ThemeFont`, so a theme's
+ * manifest (such as `journalFonts`) can be passed as it is.
+ */
+export interface SiteFont {
+    readonly family: string;
+    readonly package: string;
+    readonly styles: readonly ("normal" | "italic")[];
+}
+/** Font files are published here, next to the bundled stylesheet at the output root. */
+export declare const FONT_DIRECTORY = "fonts";
+/** The bundler leaves these references alone; the build copies the files itself. */
+export declare const FONT_EXTERNAL = "./fonts/*";
+/**
+ * Publish each font's files into `<output>/fonts/` with a content hash and its license into
+ * `<output>/licenses/`, and return the `@font-face` rules that reference them. Each subset keeps
+ * its `unicode-range`, so a browser fetches only the files a page's text and families use.
+ */
+export declare function publishFonts(fonts: readonly SiteFont[], outputDirectory: string): Promise<string>;

package/dist/src/fonts.js

@@ -0,0 +1,56 @@
+import { mkdir, readFile, writeFile, cp } from "node:fs/promises";
+import { basename, dirname, join } from "node:path";
+import { fileURLToPath } from "node:url";
+/** Font files are published here, next to the bundled stylesheet at the output root. */
+export const FONT_DIRECTORY = "fonts";
+/** The bundler leaves these references alone; the build copies the files itself. */
+export const FONT_EXTERNAL = `./${FONT_DIRECTORY}/*`;
+/**
+ * Resolve a package file from the site first (where a host installs its theme's fonts), then from
+ * this package (which carries the default Geist).
+ */
+function resolveFontFile(specifier) {
+    for (const from of [process.cwd(), dirname(fileURLToPath(import.meta.url))]) {
+        try {
+            return Bun.resolveSync(specifier, from);
+        }
+        catch {
+            // Try the next root.
+        }
+    }
+    throw new Error(`Cannot resolve the font file ${specifier}; install its package in the site`);
+}
+const contentHash = (bytes) => new Bun.CryptoHasher("sha256").update(bytes).digest("hex").slice(0, 8);
+/**
+ * Publish each font's files into `<output>/fonts/` with a content hash and its license into
+ * `<output>/licenses/`, and return the `@font-face` rules that reference them. Each subset keeps
+ * its `unicode-range`, so a browser fetches only the files a page's text and families use.
+ */
+export async function publishFonts(fonts, outputDirectory) {
+    if (!fonts.length)
+        return "";
+    const fontDirectory = join(outputDirectory, FONT_DIRECTORY);
+    const licenseDirectory = join(outputDirectory, "licenses");
+    await mkdir(fontDirectory, { recursive: true });
+    await mkdir(licenseDirectory, { recursive: true });
+    const rules = [];
+    for (const font of fonts) {
+        for (const style of font.styles) {
+            const sheet = resolveFontFile(`${font.package}/${style === "italic" ? "wght-italic" : "wght"}.css`);
+            const source = await readFile(sheet, "utf8");
+            const files = new Map();
+            for (const [, path] of source.matchAll(/url\(\.\/(files\/[^)]+\.woff2)\)/g)) {
+                if (files.has(path))
+                    continue;
+                const bytes = await readFile(join(dirname(sheet), path));
+                const name = `${basename(path, ".woff2")}-${contentHash(bytes)}.woff2`;
+                await writeFile(join(fontDirectory, name), bytes);
+                files.set(path, name);
+            }
+            rules.push(source.replace(/url\(\.\/(files\/[^)]+\.woff2)\)/g, (_match, path) => `url(./${FONT_DIRECTORY}/${files.get(path)})`));
+        }
+        const license = resolveFontFile(`${font.package}/LICENSE`);
+        await cp(license, join(licenseDirectory, `${font.package.split("/").pop()}-OFL.txt`));
+    }
+    return rules.join("\n");
+}

package/dist/src/index.d.ts

@@ -2,5 +2,6 @@ export { collectContentAssets, collectAssetFiles, isDraftAsset, loadSection, nor
 export { buildSite, meowSite, type ResolvedSiteConfig, type SiteConfig } from "./build.js";
 export { aboutPage, agentMarkdown, homePage, listPage, llmText, postPage, skillPage, skillsIndexPage, thoughtPage, } from "./site.js";
 export { DEFAULT_SITE, type SiteAbout, type SiteIdentity, type SiteProfileLink } from "./identity.js";
-export { blogTheme, blogTokens, blogOptions } from "./theme.js";
+export { blogFonts, blogTheme, blogTokens, blogOptions } from "./theme.js";
+export type { SiteFont } from "./fonts.js";
 export { loadSkills, type LoadSkillsOptions, type Skill, type SkillFile, type SkillScope, } from "./skills.js";

package/dist/src/index.js

@@ -2,5 +2,5 @@ export { collectContentAssets, collectAssetFiles, isDraftAsset, loadSection, nor
 export { buildSite, meowSite } from "./build.js";
 export { aboutPage, agentMarkdown, homePage, listPage, llmText, postPage, skillPage, skillsIndexPage, thoughtPage, } from "./site.js";
 export { DEFAULT_SITE } from "./identity.js";
-export { blogTheme, blogTokens, blogOptions } from "./theme.js";
+export { blogFonts, blogTheme, blogTokens, blogOptions } from "./theme.js";
 export { loadSkills, } from "./skills.js";

package/dist/src/theme.d.ts

@@ -37,9 +37,11 @@ export declare const blogTokens: import("meowcss").TokenRefs<{
     readonly fontMono: "\"SF Mono\", \"Cascadia Code\", Menlo, Consolas, ui-monospace, monospace";
     readonly paperGrain: "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.78' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23grain)' opacity='.065'/%3E%3C/svg%3E\")";
 }> & import("meowcss").TokenSet;
-export declare const blogTheme: Readonly<{
-    name: string;
-    defaults: import("meowcss").Selection;
-    cssText: `@import "@fontsource-variable/geist";
-${string}`;
-}>;
+/** Static HTML owns the theme root; CSS remains available without JavaScript. */
+export declare const blogTheme: import("meowcss").ThemeDefinition;
+/** The web font the Blog theme names; the build publishes it with its license. */
+export declare const blogFonts: readonly [{
+    readonly family: "Geist Variable";
+    readonly package: "@fontsource-variable/geist";
+    readonly styles: readonly ["normal"];
+}];

package/dist/src/theme.js

@@ -2217,14 +2217,13 @@ const styles = css `
   }
 `;
 /** Static HTML owns the theme root; CSS remains available without JavaScript. */
-const definition = defineTheme({
+export const blogTheme = defineTheme({
     options: blogOptions,
     defaults: { scheme: "auto" },
     tokens: [blogTokens],
     styles,
 });
-// CSS imports must precede the generated token declarations. Bun resolves and emits font assets.
-export const blogTheme = Object.freeze({
-    ...definition,
-    cssText: `@import "@fontsource-variable/geist";\n${definition.cssText}`,
-});
+/** The web font the Blog theme names; the build publishes it with its license. */
+export const blogFonts = [
+    { family: "Geist Variable", package: "@fontsource-variable/geist", styles: ["normal"] },
+];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "meowpress",
-  "version": "0.3.0-alpha.0",
+  "version": "0.3.0-alpha.1",
   "license": "MIT",
   "type": "module",
   "scripts": {
@@ -37,7 +37,7 @@
     "yaml": "^2.9.0"
   },
   "peerDependencies": {
-    "meowcss": "^0.3.0-alpha.0",
+    "meowcss": "^0.3.0-alpha.1",
     "meowjsx": "^0.3.0-alpha.0"
   },
   "devDependencies": {