@abreen/tada 1.16.1 → 1.16.2

package/build/utils/render.ts

@@ -8,6 +8,7 @@ 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 {
@@ -184,12 +185,19 @@ export function injectAssetTags(
     )
     .join('');
 
-  const fontPreloadTags = getDefaultFontPreloadFiles(siteVariables.defaultFont)
-    .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

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.1",
+  "version": "1.16.2",
   "type": "module",
   "description": "A static site generator",
   "license": "MIT",

package/schema/site.schema.json

@@ -58,6 +58,14 @@
       "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",
@@ -65,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

@@ -91,10 +91,23 @@ function getDefaultFontPreference(document: Document): FontPreference {
     : 'sans';
 }
 
-function getDefaultContrastPreference(document: Document): ContrastPreference {
-  return document.documentElement.dataset.defaultContrastPreference === 'high'
-    ? 'high'
-    : 'standard';
+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(
@@ -167,7 +180,7 @@ export default function mountAppearancePicker(window: Window): () => void {
   );
   const storage = getStorage(window);
   const defaultFontPreference = getDefaultFontPreference(document);
-  const defaultContrastPreference = getDefaultContrastPreference(document);
+  const defaultContrastPreference = getDefaultContrastPreference(window);
   let fontPreference = getFontPreference(storage, defaultFontPreference);
   let contrastPreference = getContrastPreference(
     storage,

package/src/appearance-picker/style.scss

@@ -97,19 +97,6 @@
   font-family: var(--serif-font);
 }
 
-.material-symbol-icon {
-  width: 1.25rem;
-  height: 1.25rem;
-}
-
-.material-symbol-icon-contrast-standard {
-  --material-symbol-icon: var(--icon-contrast-standard);
-}
-
-.material-symbol-icon-contrast-high {
-  --material-symbol-icon: var(--icon-contrast-high);
-}
-
 .preference-picker-option[aria-pressed='true'] {
   color: var(--fg-color);
   background: transparent;

package/src/header/_base.scss

@@ -60,10 +60,10 @@ header details summary::marker {
 }
 
 header summary::after {
-  flex: 0 0 24px;
+  flex: 0 0 var(--icon-header-menu-size);
   order: -1;
-  width: 24px;
-  height: 24px;
+  width: var(--icon-header-menu-size);
+  height: var(--icon-header-menu-size);
   margin-right: 8px;
   margin-left: var(--gap);
   content: '';
@@ -97,7 +97,10 @@ header summary .site-title {
   margin: 0 8px 0 0;
   overflow: hidden;
   text-overflow: ellipsis;
-  font-weight: 500;
+
+  // Values above 500 resolve to the supplied bold face when a custom family
+  // provides only fixed 400 and 700 weights.
+  font-weight: 600;
   white-space: nowrap;
   pointer-events: none;
 }
@@ -154,8 +157,8 @@ header .search-controls {
     top: 50%;
     left: 7px;
     z-index: 1;
-    width: 22px;
-    height: 22px;
+    width: var(--icon-search-size);
+    height: var(--icon-search-size);
     pointer-events: none;
     content: '';
     transform: translateY(-50%);
@@ -169,6 +172,7 @@ header .search-controls {
 
   input.search {
     width: 180px;
+    padding-left: calc(2rem - 1px);
   }
 }
 

package/src/material-symbols.scss

@@ -1,11 +1,24 @@
 @use 'mixins' as *;
 
 .material-symbol-icon {
+  display: block;
+  width: var(--material-symbol-icon-size);
+  height: var(--material-symbol-icon-size);
+
   @include contained-mask(var(--material-symbol-icon));
+}
 
-  display: block;
+.material-symbol-icon-heading-present {
+  --material-symbol-icon: var(--icon-heading-present);
+  --material-symbol-icon-size: var(--icon-heading-present-size);
+}
+
+.material-symbol-icon-contrast-standard {
+  --material-symbol-icon: var(--icon-contrast-standard);
+  --material-symbol-icon-size: var(--icon-contrast-standard-size);
 }
 
-.material-symbol-icon-heading-anchor {
-  --material-symbol-icon: var(--icon-heading-anchor);
+.material-symbol-icon-contrast-high {
+  --material-symbol-icon: var(--icon-contrast-high);
+  --material-symbol-icon-size: var(--icon-contrast-high-size);
 }

package/src/navigate/runtime.ts

@@ -138,6 +138,18 @@ function isActiveNavigation(controller: AbortController): boolean {
   return currentAbortController === controller && !controller.signal.aborted;
 }
 
+function prefersReducedMotion(window: Window): boolean {
+  if (typeof window.matchMedia !== 'function') {
+    return false;
+  }
+
+  try {
+    return window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+  } catch {
+    return false;
+  }
+}
+
 export function initNavigation(window: Window): void {
   currentAbortController = null;
   historyIndex = 0;
@@ -305,6 +317,7 @@ export async function navigateToUrl(
 
   if (
     useViewTransition &&
+    !prefersReducedMotion(window) &&
     typeof transitionDoc.startViewTransition === 'function'
   ) {
     const titleEl = document.querySelector('.title-and-info');

package/src/question/style.scss

@@ -62,8 +62,7 @@
   margin-bottom: 0;
 }
 
-.question-a-body > *,
-.question-a-body > * * {
+.question-a-body > * {
   @media (prefers-reduced-motion: no-preference) {
     transition:
       color 0.25s,

package/src/search/style.scss

@@ -127,7 +127,9 @@ header {
     }
 
     ol a .title {
-      font-weight: 500;
+      // Values above 500 resolve to the supplied bold face when a custom
+      // family provides only fixed 400 and 700 weights.
+      font-weight: 600;
       line-height: var(--heading-line-height);
     }
 
@@ -138,10 +140,10 @@ header {
 
     ol li .excerpt {
       grid-row-start: 3;
-      height: 7.5ex;
+      height: 4.2em;
       overflow: hidden;
       font-size: var(--font-size-small);
-      line-height: 2.5ex;
+      line-height: 1.4;
       color: var(--fg2-color);
 
       mark {

package/src/style.scss

@@ -3,6 +3,8 @@
 @use 'base';
 @use 'layout';
 @use 'alerts';
+@include theme.custom-font-faces;
+@include theme.custom-font-tuning;
 
 @font-face {
   font-family: Inter;
@@ -93,9 +95,9 @@ a.disabled {
 .external-link-tail::after,
 a.external:not(:has(.external-link-tail))::after {
   display: inline-block;
-  width: 1em;
-  height: 1em;
-  vertical-align: middle;
+  width: var(--icon-external-link-size);
+  height: var(--icon-external-link-size);
+  vertical-align: text-top;
   content: '';
 
   @include contained-mask(var(--icon-external-link));
@@ -272,6 +274,10 @@ ol {
   list-style-type: decimal;
 }
 
+:root[data-font-preference='serif'] ol > li::marker {
+  font-variant-numeric: oldstyle-nums;
+}
+
 ol ol {
   list-style-type: lower-alpha;
 }
@@ -413,8 +419,8 @@ a.breadcrumb {
 
   &::after {
     display: inline-block;
-    width: 1em;
-    height: 1em;
+    width: var(--icon-parent-size);
+    height: var(--icon-parent-size);
     vertical-align: middle;
     content: '';
 

package/src/toc/style.scss

@@ -131,22 +131,26 @@ body.code .toc ol a {
   position: relative;
 }
 
+.toc ol li.alert-item.warning {
+  --toc-alert-icon: var(--icon-warning-compact);
+  --toc-alert-icon-size: var(--icon-warning-compact-size);
+}
+
+.toc ol li.alert-item.note {
+  --toc-alert-icon: var(--icon-info-compact);
+  --toc-alert-icon-size: var(--icon-info-compact-size);
+}
+
 .toc ol li.alert-item.warning a::before,
 .toc ol li.alert-item.note a::before {
   display: inline-block;
-  width: 20px;
-  height: 20px;
+  width: var(--toc-alert-icon-size);
+  height: var(--toc-alert-icon-size);
   margin-right: 4px;
-  vertical-align: bottom;
+  vertical-align: sub;
   content: '';
-}
-
-.toc ol li.alert-item.warning a::before {
-  @include contained-mask(var(--icon-warning));
-}
 
-.toc ol li.alert-item.note a::before {
-  @include contained-mask(var(--icon-info));
+  @include contained-mask(var(--toc-alert-icon));
 }
 
 .toc ol li.label {