@abreen/tada 1.16.0 → 1.16.1

package/README.md

@@ -219,6 +219,8 @@ titlePostfix: " - CS 0"
 symbol: CS 0
 themeColor: hsl(351 70% 40%)
 tintAmount: 0
+defaultFont: serif
+defaultContrast: high
 features:
   search: true
   favicon: true
@@ -245,6 +247,8 @@ vars:
 | `themeColor` | Theme color for the site (e.g., `"tomato"`, `"#c04040"`, `"hsl(195 70% 40%)"`) |
 | `tintHue` | *Optional*, hue (0-360) for background and foreground tinting (default `20`) |
 | `tintAmount` | *Optional*, percentage (0-100) of tint to apply (default `100`) |
+| `defaultFont` | *Optional*, initial font pairing: `sans` or `serif` (default `sans`) |
+| `defaultContrast` | *Optional*, initial neutral-palette contrast: `standard` or `high` (default `standard`) |
 | `faviconSymbol` | *Optional*, the text to use instead of `symbol` in the favicon |
 | `features.search` | Enable search UI and Pagefind index generation |
 | `features.favicon` | Enable automatically generated favicons |

package/bin/validators.ts

@@ -78,6 +78,8 @@ export function createSiteConfig({
     basePath,
     internalDomains,
     defaultTimeZone,
+    defaultFont: 'sans',
+    defaultContrast: 'standard',
     extensionToShikiLanguage,
     shikiLanguages,
     themeColor,

package/build/generate-fonts.ts

@@ -6,6 +6,23 @@ import { makeLogger } from './log';
 const log = makeLogger(import.meta.url);
 const FONTS_DIR = path.join(getPackageDir(), 'fonts');
 
+export const DEFAULT_FONT_PRELOAD_FILES = {
+  sans: [
+    'inter/InterVariable.woff2',
+    'google-sans-code/GoogleSansCodeVariable.woff2',
+  ],
+  serif: [
+    'source-serif-4/SourceSerif4-VariableFont_opsz,wght.woff2',
+    'libertinus-mono/LibertinusMono-Regular.woff2',
+  ],
+} as const;
+
+export function getDefaultFontPreloadFiles(
+  defaultFont: 'sans' | 'serif' | undefined,
+): readonly string[] {
+  return DEFAULT_FONT_PRELOAD_FILES[defaultFont ?? 'sans'];
+}
+
 export function copyFonts(distDir: string): void {
   log.info`Copying fonts`;
 

package/build/site-variables.ts

@@ -12,6 +12,8 @@ const configDir = getProjectDir();
 
 const DEFAULT: Partial<SiteVariables> = {
   basePath: '/',
+  defaultFont: 'sans',
+  defaultContrast: 'standard',
   features: { search: true, favicon: true, footer: true },
 };
 

package/build/types.d.ts

@@ -16,6 +16,8 @@ export interface SiteVariables {
   faviconFontWeight?: number;
   internalDomains?: string[];
   defaultTimeZone: string;
+  defaultFont?: 'sans' | 'serif';
+  defaultContrast?: 'standard' | 'high';
   features: FeatureConfig;
   extensionToShikiLanguage?: Record<
     string,

package/build/utils/render.ts

@@ -7,6 +7,7 @@ import { makeLogger } from '../log';
 import { B } from '../colors';
 import createTemplateGlobals from '../template-globals';
 import { getExtensionToShikiLanguage } from '../site-variables';
+import { getDefaultFontPreloadFiles } from '../generate-fonts';
 import { config } from '../templates';
 import { render } from '../templates';
 import {
@@ -157,6 +158,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,10 +184,7 @@ export function injectAssetTags(
     )
     .join('');
 
-  const fontPreloadTags = [
-    'inter/InterVariable.woff2',
-    'google-sans-code/GoogleSansCodeVariable.woff2',
-  ]
+  const fontPreloadTags = getDefaultFontPreloadFiles(siteVariables.defaultFont)
     .filter(f => fs.existsSync(path.join(distDir, f)))
     .map(
       f =>
@@ -210,12 +209,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 +290,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 +368,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 +711,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/package.json

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

package/schema/site.schema.json

@@ -48,6 +48,16 @@
       "default": 700
     },
     "defaultTimeZone": { "type": "string" },
+    "defaultFont": {
+      "type": "string",
+      "enum": ["sans", "serif"],
+      "default": "sans"
+    },
+    "defaultContrast": {
+      "type": "string",
+      "enum": ["standard", "high"],
+      "default": "standard"
+    },
     "vars": { "type": "object" },
     "extensionToShikiLanguage": {
       "type": "object",

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,69 @@ 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(document: Document): ContrastPreference {
+  return document.documentElement.dataset.defaultContrastPreference === 'high'
+    ? 'high'
+    : 'standard';
 }
 
 export function applyFontPreference(
@@ -71,8 +102,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 +115,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 +166,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(document);
+  let fontPreference = getFontPreference(storage, defaultFontPreference);
+  let contrastPreference = getContrastPreference(
+    storage,
+    defaultContrastPreference,
+  );
 
   applyFontPreference(document, fontPreference);
   applyContrastPreference(document, contrastPreference);
@@ -143,11 +185,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;

package/src/appearance-picker/style.scss

@@ -75,8 +75,10 @@
 }
 
 .font-picker-option-sans {
-  font-family: var(--sans-font);
-  font-feature-settings: var(--sans-font-feature-settings);
+  font-family:
+    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial,
+    sans-serif;
+  font-feature-settings: normal;
 }
 
 .font-picker-option-serif {
@@ -86,6 +88,15 @@
   font-feature-settings: var(--serif-font-feature-settings);
 }
 
+:root:not([data-font-preference='serif']) .font-picker-option-sans {
+  font-family: var(--sans-font);
+  font-feature-settings: var(--sans-font-feature-settings);
+}
+
+:root[data-font-preference='serif'] .font-picker-option-serif {
+  font-family: var(--serif-font);
+}
+
 .material-symbol-icon {
   width: 1.25rem;
   height: 1.25rem;

package/src/header/_base.scss

@@ -16,6 +16,10 @@ header {
   view-transition-name: site-header;
 }
 
+:root[data-contrast-preference='high'] header {
+  background: var(--bg-color);
+}
+
 header details summary {
   position: relative;
   display: flex;

package/src/header/style.scss

@@ -50,10 +50,18 @@ header nav div > p {
   @include user-select(none);
 }
 
+:root[data-contrast-preference='high'] header:has(details[open]) {
+  background: var(--bg2-color);
+}
+
 @media (hover: hover) {
   header:has(details[open]):hover {
     background: var(--bg-color-translucent);
   }
+
+  :root[data-contrast-preference='high'] header:hover {
+    background: var(--bg2-color);
+  }
 }
 
 header .results-container {

package/templates/_appearance-picker.html

@@ -1,17 +1,17 @@
 <div class="appearance-pickers" data-pagefind-ignore>
   <div class="preference-picker font-picker" role="group" aria-label="Font style">
-    <button type="button" class="preference-picker-option font-picker-option-sans" data-font-preference-value="sans" aria-label="Use sans-serif fonts" aria-pressed="true" disabled>
+    <button type="button" class="preference-picker-option font-picker-option-sans" data-font-preference-value="sans" aria-label="Use sans-serif fonts" aria-pressed="<%= site.defaultFont === 'sans' %>" disabled>
       <span aria-hidden="true">Aa</span>
     </button>
-    <button type="button" class="preference-picker-option font-picker-option-serif" data-font-preference-value="serif" aria-label="Use serif fonts" aria-pressed="false" disabled>
+    <button type="button" class="preference-picker-option font-picker-option-serif" data-font-preference-value="serif" aria-label="Use serif fonts" aria-pressed="<%= site.defaultFont === 'serif' %>" disabled>
       <span aria-hidden="true">Aa</span>
     </button>
   </div>
   <div class="preference-picker contrast-picker" role="group" aria-label="Contrast">
-    <button type="button" class="preference-picker-option contrast-picker-option-standard" data-contrast-preference-value="standard" aria-label="Use standard contrast" aria-pressed="true" disabled>
+    <button type="button" class="preference-picker-option contrast-picker-option-standard" data-contrast-preference-value="standard" aria-label="Use standard contrast" aria-pressed="<%= site.defaultContrast === 'standard' %>" disabled>
       <span class="material-symbol-icon material-symbol-icon-contrast-standard" aria-hidden="true"></span>
     </button>
-    <button type="button" class="preference-picker-option contrast-picker-option-high" data-contrast-preference-value="high" aria-label="Use high contrast" aria-pressed="false" disabled>
+    <button type="button" class="preference-picker-option contrast-picker-option-high" data-contrast-preference-value="high" aria-label="Use high contrast" aria-pressed="<%= site.defaultContrast === 'high' %>" disabled>
       <span class="material-symbol-icon material-symbol-icon-contrast-high" aria-hidden="true"></span>
     </button>
   </div>

package/templates/_top.html

@@ -1,5 +1,9 @@
 <!doctype html>
-<html lang="en">
+<html lang="en"
+      data-default-font-preference="<%= site.defaultFont %>"
+      data-default-contrast-preference="<%= site.defaultContrast %>"<% if (site.defaultFont === 'serif') { %>
+      data-font-preference="serif"<% } %><% if (site.defaultContrast === 'high') { %>
+      data-contrast-preference="high"<% } %>>
   <head>
     <% if (site.features.favicon) { %>
     <link rel="icon" href="/favicon.ico" sizes="any" />
@@ -36,13 +40,33 @@
     <script>
       document.documentElement.classList.add('js');
       try {
-        if (window.localStorage.getItem('fontPreference') === 'serif') {
-          document.documentElement.dataset.fontPreference = 'serif';
+        const preference = window.localStorage.getItem('fontPreference');
+        const configured =
+          document.documentElement.dataset.defaultFontPreference;
+        if (
+          (preference === 'serif' || preference === 'sans') &&
+          preference !== configured
+        ) {
+          if (preference === 'serif') {
+            document.documentElement.dataset.fontPreference = 'serif';
+          } else {
+            delete document.documentElement.dataset.fontPreference;
+          }
         }
       } catch {}
       try {
-        if (window.localStorage.getItem('contrastPreference') === 'high') {
-          document.documentElement.dataset.contrastPreference = 'high';
+        const preference = window.localStorage.getItem('contrastPreference');
+        const configured =
+          document.documentElement.dataset.defaultContrastPreference;
+        if (
+          (preference === 'high' || preference === 'standard') &&
+          preference !== configured
+        ) {
+          if (preference === 'high') {
+            document.documentElement.dataset.contrastPreference = 'high';
+          } else {
+            delete document.documentElement.dataset.contrastPreference;
+          }
         }
       } catch {}
     </script>