@abreen/tada 1.16.0 → 1.16.2

package/build/types.d.ts

@@ -3,6 +3,32 @@ import type { TadaProjectScan } from './source-model';
 
 export type PlainTextLanguage = 'text' | 'txt' | 'plain';
 
+export interface SerifFontTuning {
+  scale?: number;
+  lineHeight?: number;
+  headingScale?: number;
+  headingWeight?: 400 | 700;
+}
+
+export interface SerifMonoFontTuning {
+  scale?: number;
+  lineHeight?: number;
+}
+
+export interface FontFamilyOverride<Tuning = unknown> {
+  regular: string;
+  italic?: string;
+  bold?: string;
+  boldItalic?: string;
+  features?: string[];
+  tuning?: Tuning;
+}
+
+export interface FontOverrides {
+  serif?: FontFamilyOverride<SerifFontTuning>;
+  serifMono?: FontFamilyOverride<SerifMonoFontTuning>;
+}
+
 /** Site configuration loaded from site.dev.yaml/yml/json or site.prod.yaml/yml/json */
 export interface SiteVariables {
   base: string;
@@ -16,6 +42,9 @@ export interface SiteVariables {
   faviconFontWeight?: number;
   internalDomains?: string[];
   defaultTimeZone: string;
+  defaultFont?: 'sans' | 'serif';
+  defaultContrast?: 'standard' | 'high';
+  fontOverrides?: FontOverrides;
   features: FeatureConfig;
   extensionToShikiLanguage?: Record<
     string,

package/build/utils/render.ts

@@ -7,6 +7,8 @@ import { makeLogger } from '../log';
 import { B } from '../colors';
 import createTemplateGlobals from '../template-globals';
 import { getExtensionToShikiLanguage } from '../site-variables';
+import { getDefaultFontPreloadFiles } from '../generate-fonts';
+import { encodePublicAssetPath } from '../custom-fonts';
 import { config } from '../templates';
 import { render } from '../templates';
 import {
@@ -157,6 +159,7 @@ export function injectAssetTags(
   html: string,
   assetFiles: string[],
   distDir: string,
+  siteVariables: SiteVariables,
 ): string {
   const jsAssets = assetFiles.filter(f => f.endsWith('.js'));
   const cssAssets = assetFiles.filter(f => f.endsWith('.css'));
@@ -182,15 +185,19 @@ export function injectAssetTags(
     )
     .join('');
 
-  const fontPreloadTags = [
-    'inter/InterVariable.woff2',
-    'google-sans-code/GoogleSansCodeVariable.woff2',
-  ]
-    .filter(f => fs.existsSync(path.join(distDir, f)))
-    .map(
-      f =>
-        `<link rel="preload" href="${normalizeOutputPath('/' + f)}" as="font" type="font/woff2" crossorigin>`,
+  const fontPreloadTags = getDefaultFontPreloadFiles(siteVariables)
+    .filter(
+      preload =>
+        preload.source === 'public' ||
+        fs.existsSync(path.join(distDir, preload.filePath)),
     )
+    .map(preload => {
+      const urlPath =
+        preload.source === 'public'
+          ? encodePublicAssetPath(preload.filePath)
+          : preload.filePath;
+      return `<link rel="preload" href="${normalizeOutputPath('/' + urlPath)}" as="font" type="font/woff2" crossorigin>`;
+    })
     .join('');
 
   return html
@@ -210,12 +217,14 @@ export function preparePageTemplateHtml({
   templateHtml,
   assetFiles,
   distDir,
+  siteVariables,
 }: {
   templateHtml: string;
   assetFiles: string[];
   distDir: string;
+  siteVariables: SiteVariables;
 }): string {
-  let html = injectAssetTags(templateHtml, assetFiles, distDir);
+  let html = injectAssetTags(templateHtml, assetFiles, distDir, siteVariables);
   if (templateHtml.includes('class="katex"')) {
     html = injectKatexStylesheet(html);
   }
@@ -289,7 +298,12 @@ export function renderPlainTextPageAsset({
   ) as string;
   const finalized = finalizeHtmlPage({
     filePath,
-    html: preparePageTemplateHtml({ templateHtml, assetFiles, distDir }),
+    html: preparePageTemplateHtml({
+      templateHtml,
+      assetFiles,
+      distDir,
+      siteVariables,
+    }),
     siteVariables,
     sourceUrlPath,
     validInternalTargets,
@@ -362,7 +376,12 @@ export function renderCodePageAsset({
   const templateHtml = render('code.html', templateParameters) as string;
   const finalized = finalizeHtmlPage({
     filePath,
-    html: preparePageTemplateHtml({ templateHtml, assetFiles, distDir }),
+    html: preparePageTemplateHtml({
+      templateHtml,
+      assetFiles,
+      distDir,
+      siteVariables,
+    }),
     siteVariables,
     sourceUrlPath,
     validInternalTargets,
@@ -700,7 +719,12 @@ export function renderLiterateJavaPageAsset({
   const templateHtml = render('literate.html', templateParameters) as string;
   const finalized = finalizeHtmlPage({
     filePath,
-    html: preparePageTemplateHtml({ templateHtml, assetFiles, distDir }),
+    html: preparePageTemplateHtml({
+      templateHtml,
+      assetFiles,
+      distDir,
+      siteVariables,
+    }),
     siteVariables,
     sourceUrlPath,
     validInternalTargets,

package/build/watch/assets.ts

@@ -1,7 +1,7 @@
 import fs from 'fs';
 import path from 'path';
 import { bundle, getBundleNaming } from '../bundle';
-import { copyFonts } from '../generate-fonts';
+import { copyFonts, DEFAULT_FONT_PRELOAD_FILES } from '../generate-fonts';
 import { copyKatexAssets } from '../generate-katex-assets';
 import { generateFavicons } from '../generate-favicon';
 import { generateWebAppManifest } from '../generate-web-app-manifest';
@@ -72,8 +72,8 @@ export function copyExistingBuildAssets(
 ): void {
   const relPaths = [
     ...assetFiles,
-    'inter/InterVariable.woff2',
-    'google-sans-code/GoogleSansCodeVariable.woff2',
+    ...DEFAULT_FONT_PRELOAD_FILES.sans,
+    ...DEFAULT_FONT_PRELOAD_FILES.serif,
   ];
 
   for (const relPath of relPaths) {

package/build/watch/build-full.ts

@@ -32,7 +32,7 @@ export async function buildFull({
   try {
     const siteVariables = getDevSiteVariables();
     const scan = scanProject(siteVariables);
-    const configDiagnostics = validateConfig(scan);
+    const configDiagnostics = validateConfig(scan, siteVariables);
     if (configDiagnostics.length > 0) {
       return buildFailedWithDiagnostics(outputDir, configDiagnostics);
     }

package/build/watch/build-incremental.ts

@@ -34,7 +34,7 @@ export async function buildIncremental({
   const outputDir = makeTempBuildDir(distDir);
   try {
     const siteVariables = snapshot.siteVariables;
-    const configDiagnostics = validateConfig(plan.scan);
+    const configDiagnostics = validateConfig(plan.scan, siteVariables);
     if (configDiagnostics.length > 0) {
       return buildFailedWithDiagnostics(outputDir, configDiagnostics);
     }

package/build/watch/validation.ts

@@ -2,6 +2,8 @@ import { B } from '../colors';
 import { makeLogger } from '../log';
 import { config, getConfigFileName } from '../templates';
 import { validateConfigLinks } from '../validate-config-links';
+import { validateCustomFontOverrides } from '../custom-fonts';
+import type { SiteVariables } from '../types';
 import type { WatchDiagnostic } from './types';
 import { assertNoOutputPathConflicts, type TadaProjectScan } from './snapshot';
 
@@ -11,20 +13,29 @@ export function diagnosticsFromMessages(messages: string[]): WatchDiagnostic[] {
   return messages.map(message => ({ message }));
 }
 
-export function validateConfig(scan: TadaProjectScan): WatchDiagnostic[] {
+export function validateConfig(
+  scan: TadaProjectScan,
+  siteVariables: SiteVariables,
+): WatchDiagnostic[] {
+  const diagnostics = diagnosticsFromMessages(
+    validateCustomFontOverrides({
+      fontOverrides: siteVariables.fontOverrides,
+      publicDir: scan.publicDir,
+      publicFiles: scan.publicFiles,
+    }),
+  );
   const conflicts = assertNoOutputPathConflicts(scan);
   if (conflicts.length === 0) {
-    return [];
+    return diagnostics;
   }
   for (const relPath of conflicts) {
     log.error`content/${B`${relPath}`} conflicts with public/${B`${relPath}`}`;
   }
   const noun = conflicts.length === 1 ? 'file' : 'files';
-  return [
-    {
-      message: `${conflicts.length} ${noun} in content/ and public/ have the same path`,
-    },
-  ];
+  diagnostics.push({
+    message: `${conflicts.length} ${noun} in content/ and public/ have the same path`,
+  });
+  return diagnostics;
 }
 
 export function validateProjectConfigLinks(

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abreen/tada",
-  "version": "1.16.0",
+  "version": "1.16.2",
   "type": "module",
   "description": "A static site generator",
   "license": "MIT",

package/schema/site.schema.json

@@ -48,6 +48,24 @@
       "default": 700
     },
     "defaultTimeZone": { "type": "string" },
+    "defaultFont": {
+      "type": "string",
+      "enum": ["sans", "serif"],
+      "default": "sans"
+    },
+    "defaultContrast": {
+      "type": "string",
+      "enum": ["standard", "high"],
+      "default": "standard"
+    },
+    "fontOverrides": {
+      "type": "object",
+      "properties": {
+        "serif": { "$ref": "#/$defs/serifFontOverride" },
+        "serifMono": { "$ref": "#/$defs/serifMonoFontOverride" }
+      },
+      "additionalProperties": false
+    },
     "vars": { "type": "object" },
     "extensionToShikiLanguage": {
       "type": "object",
@@ -55,5 +73,64 @@
     },
     "shikiLanguages": { "type": "array", "items": { "type": "string" } }
   },
+  "$defs": {
+    "serifFontOverride": {
+      "type": "object",
+      "required": ["regular"],
+      "properties": {
+        "regular": { "$ref": "#/$defs/publicWoff2Path" },
+        "italic": { "$ref": "#/$defs/publicWoff2Path" },
+        "bold": { "$ref": "#/$defs/publicWoff2Path" },
+        "boldItalic": { "$ref": "#/$defs/publicWoff2Path" },
+        "features": {
+          "type": "array",
+          "items": { "type": "string", "pattern": "^[A-Za-z0-9]{4}$" },
+          "uniqueItems": true
+        },
+        "tuning": {
+          "type": "object",
+          "properties": {
+            "scale": { "$ref": "#/$defs/fontScale" },
+            "lineHeight": { "$ref": "#/$defs/fontLineHeight" },
+            "headingScale": { "$ref": "#/$defs/fontScale" },
+            "headingWeight": { "type": "integer", "enum": [400, 700] }
+          },
+          "additionalProperties": false
+        }
+      },
+      "additionalProperties": false
+    },
+    "serifMonoFontOverride": {
+      "type": "object",
+      "required": ["regular"],
+      "properties": {
+        "regular": { "$ref": "#/$defs/publicWoff2Path" },
+        "italic": { "$ref": "#/$defs/publicWoff2Path" },
+        "bold": { "$ref": "#/$defs/publicWoff2Path" },
+        "boldItalic": { "$ref": "#/$defs/publicWoff2Path" },
+        "features": {
+          "type": "array",
+          "items": { "type": "string", "pattern": "^[A-Za-z0-9]{4}$" },
+          "uniqueItems": true
+        },
+        "tuning": {
+          "type": "object",
+          "properties": {
+            "scale": { "$ref": "#/$defs/fontScale" },
+            "lineHeight": { "$ref": "#/$defs/fontLineHeight" }
+          },
+          "additionalProperties": false
+        }
+      },
+      "additionalProperties": false
+    },
+    "fontScale": { "type": "number", "minimum": 0.75, "maximum": 1.5 },
+    "fontLineHeight": { "type": "number", "minimum": 1, "maximum": 2.5 },
+    "publicWoff2Path": {
+      "type": "string",
+      "minLength": 6,
+      "pattern": "\\.woff2$"
+    }
+  },
   "additionalProperties": false
 }

package/src/_alerts.scss

@@ -18,6 +18,8 @@
 
 .alert .title {
   padding: 10px 6px;
+  padding-top: 18px;
+  padding-left: 58px;
 }
 
 .alert .content {
@@ -67,32 +69,35 @@
 
 .alert .title::before {
   position: absolute;
-  top: 8px;
-  left: 8px;
-  width: 32px;
-  height: 32px;
+  top: 12px;
+  left: 10px;
+  width: var(--alert-icon-size);
+  height: var(--alert-icon-size);
   content: '';
+
+  @include contained-mask(var(--alert-icon));
 }
 
-.alert.warning .title::before {
-  @include contained-mask(var(--icon-warning));
+.alert.warning {
+  --alert-icon: var(--icon-warning);
+  --alert-icon-size: var(--icon-warning-size);
 }
 
 i.warning {
-  @include contained-mask(var(--icon-warning));
+  @include contained-mask(var(--icon-warning-compact));
 
   display: inline-block;
-  width: 1em;
-  height: 1em;
+  width: var(--icon-warning-compact-size);
+  height: var(--icon-warning-compact-size);
   vertical-align: sub;
 }
 
-.alert.note .title::before {
-  @include contained-mask(var(--icon-info));
+.alert.note {
+  --alert-icon: var(--icon-info);
+  --alert-icon-size: var(--icon-info-size);
 }
 
 .alert .title {
-  padding-left: 48px;
   margin: 0;
   font-weight: 700;
 

package/src/_layout.scss

@@ -223,8 +223,8 @@ footer {
 
     &::after {
       display: inline-block;
-      width: 1.5em;
-      height: 1.5em;
+      width: var(--icon-tada-size);
+      height: var(--icon-tada-size);
       margin-left: 0.2em;
       vertical-align: middle;
       content: '';

package/src/anchor/index.ts

@@ -2,45 +2,13 @@ function getElements(parent: HTMLElement): HTMLHeadingElement[] {
   return Array.from(parent.querySelectorAll('h1, h2, h3, h4, h5, h6'));
 }
 
-function createHeadingAnchorIcon(window: Window): HTMLSpanElement {
+function createPresentIcon(window: Window): HTMLSpanElement {
   const icon = window.document.createElement('span');
-  icon.className = 'material-symbol-icon material-symbol-icon-heading-anchor';
+  icon.className = 'material-symbol-icon material-symbol-icon-heading-present';
   icon.setAttribute('aria-hidden', 'true');
   return icon;
 }
 
-function createPresentIcon(window: Window): SVGSVGElement {
-  const svg = window.document.createElementNS(
-    'http://www.w3.org/2000/svg',
-    'svg',
-  );
-  svg.setAttribute('aria-hidden', 'true');
-  svg.setAttribute('viewBox', '0 0 24 24');
-  svg.setAttribute('width', '16');
-  svg.setAttribute('height', '16');
-  svg.setAttribute('fill', 'none');
-  svg.setAttribute('stroke', 'currentColor');
-  svg.setAttribute('stroke-width', '1.5');
-  svg.setAttribute('stroke-linecap', 'round');
-  svg.setAttribute('stroke-linejoin', 'round');
-
-  const paths = [
-    'M5 5h14a1 1 0 0 1 1 1v9a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1Z',
-    'M9 20h6',
-  ];
-
-  for (const d of paths) {
-    const path = window.document.createElementNS(
-      'http://www.w3.org/2000/svg',
-      'path',
-    );
-    path.setAttribute('d', d);
-    svg.appendChild(path);
-  }
-
-  return svg;
-}
-
 function getSlideIndex(slide: HTMLElement): number {
   const rawIndex = slide.getAttribute('data-slide-index');
   if (rawIndex != null) {
@@ -86,7 +54,6 @@ export default (window: Window) => {
       while (el.firstChild) {
         link.appendChild(el.firstChild);
       }
-      link.appendChild(createHeadingAnchorIcon(window));
       el.appendChild(link);
 
       const handleClick = () => {

package/src/anchor/style.scss

@@ -7,28 +7,12 @@ a.heading-anchor {
   @include subdued-link;
 }
 
-.heading-anchor .material-symbol-icon,
-.heading-present-button svg {
-  display: inline-block;
-  width: 1em;
-  height: 1em;
-  vertical-align: middle;
-}
-
-.heading-anchor .material-symbol-icon {
-  margin-left: 4px;
-  vertical-align: middle;
-  opacity: 0;
-}
-
 .heading-present-button {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 1em;
-  height: 1em;
+  display: inline-block;
+  width: var(--icon-heading-present-size);
+  height: var(--icon-heading-present-size);
   padding: 0;
-  margin-left: 4px;
+  margin-left: 8px;
   font: inherit;
   line-height: 1;
   vertical-align: middle;
@@ -39,7 +23,6 @@ a.heading-anchor {
   opacity: 0;
 }
 
-a.heading-anchor:focus-visible .material-symbol-icon,
 .heading-present-button:focus {
   opacity: 1;
 }
@@ -65,12 +48,6 @@ body.is-presenting .heading-present-button {
     background: transparent;
   }
 
-  h1:hover a.heading-anchor .material-symbol-icon,
-  h2:hover a.heading-anchor .material-symbol-icon,
-  h3:hover a.heading-anchor .material-symbol-icon,
-  h4:hover a.heading-anchor .material-symbol-icon,
-  h5:hover a.heading-anchor .material-symbol-icon,
-  h6:hover a.heading-anchor .material-symbol-icon,
   h1:hover .heading-present-button,
   h2:hover .heading-present-button,
   h3:hover .heading-present-button,
@@ -88,7 +65,6 @@ body.is-presenting .heading-present-button {
 }
 
 @media print {
-  .heading-anchor .material-symbol-icon,
   .heading-present-button {
     display: none;
   }

package/src/appearance-picker/index.ts

@@ -15,11 +15,14 @@ function getStorage(window: Window): Storage | null {
 function getStoredPreference<T extends string>(
   storage: Storage | null,
   key: string,
-  storedValue: T,
+  storedValues: readonly T[],
   defaultValue: T,
 ): T {
   try {
-    return storage?.getItem(key) === storedValue ? storedValue : defaultValue;
+    const storedValue = storage?.getItem(key);
+    return storedValues.includes(storedValue as T)
+      ? (storedValue as T)
+      : defaultValue;
   } catch {
     return defaultValue;
   }
@@ -29,41 +32,82 @@ function saveStoredPreference<T extends string>(
   storage: Storage | null,
   key: string,
   preference: T,
-  storedValue: T,
+  defaultValue: T,
 ): void {
   try {
-    if (preference === storedValue) {
-      storage?.setItem(key, preference);
-    } else {
+    if (preference === defaultValue) {
       storage?.removeItem(key);
+    } else {
+      storage?.setItem(key, preference);
     }
   } catch {
     // Storage can be unavailable in privacy-restricted contexts.
   }
 }
 
-export function getFontPreference(storage: Storage | null): FontPreference {
-  return getStoredPreference(storage, FONT_STORAGE_KEY, 'serif', 'sans');
+export function getFontPreference(
+  storage: Storage | null,
+  defaultValue: FontPreference = 'sans',
+): FontPreference {
+  return getStoredPreference(
+    storage,
+    FONT_STORAGE_KEY,
+    ['sans', 'serif'],
+    defaultValue,
+  );
 }
 
 export function getContrastPreference(
   storage: Storage | null,
+  defaultValue: ContrastPreference = 'standard',
 ): ContrastPreference {
-  return getStoredPreference(storage, CONTRAST_STORAGE_KEY, 'high', 'standard');
+  return getStoredPreference(
+    storage,
+    CONTRAST_STORAGE_KEY,
+    ['standard', 'high'],
+    defaultValue,
+  );
 }
 
 export function saveFontPreference(
   storage: Storage | null,
   preference: FontPreference,
+  defaultValue: FontPreference = 'sans',
 ): void {
-  saveStoredPreference(storage, FONT_STORAGE_KEY, preference, 'serif');
+  saveStoredPreference(storage, FONT_STORAGE_KEY, preference, defaultValue);
 }
 
 export function saveContrastPreference(
   storage: Storage | null,
   preference: ContrastPreference,
+  defaultValue: ContrastPreference = 'standard',
 ): void {
-  saveStoredPreference(storage, CONTRAST_STORAGE_KEY, preference, 'high');
+  saveStoredPreference(storage, CONTRAST_STORAGE_KEY, preference, defaultValue);
+}
+
+function getDefaultFontPreference(document: Document): FontPreference {
+  return document.documentElement.dataset.defaultFontPreference === 'serif'
+    ? 'serif'
+    : 'sans';
+}
+
+function getDefaultContrastPreference(window: Window): ContrastPreference {
+  const configured =
+    window.document.documentElement.dataset.defaultContrastPreference === 'high'
+      ? 'high'
+      : 'standard';
+
+  if (configured === 'high' || typeof window.matchMedia !== 'function') {
+    return configured;
+  }
+
+  try {
+    return window.matchMedia('(prefers-contrast: more)').matches
+      ? 'high'
+      : configured;
+  } catch {
+    return configured;
+  }
 }
 
 export function applyFontPreference(
@@ -71,8 +115,10 @@ export function applyFontPreference(
   preference: FontPreference,
 ): void {
   if (preference === 'serif') {
-    document.documentElement.dataset.fontPreference = preference;
-  } else {
+    if (document.documentElement.dataset.fontPreference !== preference) {
+      document.documentElement.dataset.fontPreference = preference;
+    }
+  } else if (document.documentElement.dataset.fontPreference !== undefined) {
     delete document.documentElement.dataset.fontPreference;
   }
 }
@@ -82,8 +128,12 @@ export function applyContrastPreference(
   preference: ContrastPreference,
 ): void {
   if (preference === 'high') {
-    document.documentElement.dataset.contrastPreference = preference;
-  } else {
+    if (document.documentElement.dataset.contrastPreference !== preference) {
+      document.documentElement.dataset.contrastPreference = preference;
+    }
+  } else if (
+    document.documentElement.dataset.contrastPreference !== undefined
+  ) {
     delete document.documentElement.dataset.contrastPreference;
   }
 }
@@ -129,8 +179,13 @@ export default function mountAppearancePicker(window: Window): () => void {
     container.querySelectorAll<HTMLButtonElement>('button'),
   );
   const storage = getStorage(window);
-  let fontPreference = getFontPreference(storage);
-  let contrastPreference = getContrastPreference(storage);
+  const defaultFontPreference = getDefaultFontPreference(document);
+  const defaultContrastPreference = getDefaultContrastPreference(window);
+  let fontPreference = getFontPreference(storage, defaultFontPreference);
+  let contrastPreference = getContrastPreference(
+    storage,
+    defaultContrastPreference,
+  );
 
   applyFontPreference(document, fontPreference);
   applyContrastPreference(document, contrastPreference);
@@ -143,11 +198,15 @@ export default function mountAppearancePicker(window: Window): () => void {
 
     if (fontValue === 'sans' || fontValue === 'serif') {
       fontPreference = fontValue;
-      saveFontPreference(storage, fontPreference);
+      saveFontPreference(storage, fontPreference, defaultFontPreference);
       applyFontPreference(document, fontPreference);
     } else if (contrastValue === 'standard' || contrastValue === 'high') {
       contrastPreference = contrastValue;
-      saveContrastPreference(storage, contrastPreference);
+      saveContrastPreference(
+        storage,
+        contrastPreference,
+        defaultContrastPreference,
+      );
       applyContrastPreference(document, contrastPreference);
     } else {
       return;