@abreen/tada 1.16.8 → 1.16.9

package/package.json

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

package/src/appearance-picker/index.ts

@@ -4,6 +4,33 @@ export type ContrastPreference = 'standard' | 'high';
 const FONT_STORAGE_KEY = 'fontPreference';
 const CONTRAST_STORAGE_KEY = 'contrastPreference';
 
+interface FontPreferenceRequest {
+  generation: number;
+  preference: FontPreference;
+  promise: Promise<void>;
+}
+
+interface FontPreferenceLoader {
+  supported: boolean;
+  pending: FontPreferenceRequest | null;
+  failedPreference: FontPreference | null;
+  request(preference: FontPreference): FontPreferenceRequest | null;
+  isCurrent(request: FontPreferenceRequest): boolean;
+  complete(request: FontPreferenceRequest): void;
+  fail(request: FontPreferenceRequest): void;
+  cancel(): void;
+}
+
+function getFontPreferenceLoader(
+  window: Window,
+): FontPreferenceLoader | undefined {
+  return (
+    window as Window & {
+      __tadaFontPreferenceLoader?: FontPreferenceLoader;
+    }
+  ).__tadaFontPreferenceLoader;
+}
+
 function getStorage(window: Window): Storage | null {
   try {
     return window.localStorage;
@@ -91,6 +118,12 @@ function getDefaultFontPreference(document: Document): FontPreference {
     : 'sans';
 }
 
+function getAppliedFontPreference(document: Document): FontPreference {
+  return document.documentElement.dataset.fontPreference === 'serif'
+    ? 'serif'
+    : 'sans';
+}
+
 function getDefaultContrastPreference(window: Window): ContrastPreference {
   const configured =
     window.document.documentElement.dataset.defaultContrastPreference === 'high'
@@ -179,27 +212,78 @@ export default function mountAppearancePicker(window: Window): () => void {
     container.querySelectorAll<HTMLButtonElement>('button'),
   );
   const storage = getStorage(window);
+  const fontLoader = getFontPreferenceLoader(window);
   const defaultFontPreference = getDefaultFontPreference(document);
   const defaultContrastPreference = getDefaultContrastPreference(window);
-  let fontPreference = getFontPreference(storage, defaultFontPreference);
+  const requestedFontPreference = getFontPreference(
+    storage,
+    defaultFontPreference,
+  );
+  let fontPreference = getAppliedFontPreference(document);
   let contrastPreference = getContrastPreference(
     storage,
     defaultContrastPreference,
   );
 
-  applyFontPreference(document, fontPreference);
+  const requestedFontIsWaiting =
+    (fontLoader?.pending?.preference === requestedFontPreference ||
+      fontLoader?.failedPreference === requestedFontPreference) ??
+    false;
+  if (!requestedFontIsWaiting) {
+    fontPreference = requestedFontPreference;
+    applyFontPreference(document, fontPreference);
+  }
   applyContrastPreference(document, contrastPreference);
   syncAppearance(document, fontPreference, contrastPreference);
 
+  const observedRequests = new Set<number>();
+  const observeFontRequest = (request: FontPreferenceRequest) => {
+    if (observedRequests.has(request.generation)) return;
+    observedRequests.add(request.generation);
+    request.promise.then(
+      () => {
+        if (fontLoader?.isCurrent(request)) {
+          fontPreference = request.preference;
+          saveFontPreference(storage, fontPreference, defaultFontPreference);
+          applyFontPreference(document, fontPreference);
+          fontLoader.complete(request);
+        } else {
+          fontPreference = getAppliedFontPreference(document);
+        }
+        syncAppearance(document, fontPreference, contrastPreference);
+      },
+      () => {
+        fontLoader?.fail(request);
+        fontPreference = getAppliedFontPreference(document);
+        syncAppearance(document, fontPreference, contrastPreference);
+      },
+    );
+  };
+
+  if (fontLoader?.pending) {
+    observeFontRequest(fontLoader.pending);
+  }
+
   const handleClick = (event: Event) => {
     const button = event.currentTarget as HTMLButtonElement;
     const fontValue = button.dataset.fontPreferenceValue;
     const contrastValue = button.dataset.contrastPreferenceValue;
 
     if (fontValue === 'sans' || fontValue === 'serif') {
-      fontPreference = fontValue;
-      saveFontPreference(storage, fontPreference, defaultFontPreference);
-      applyFontPreference(document, fontPreference);
+      fontPreference = getAppliedFontPreference(document);
+      if (fontValue === fontPreference) {
+        fontLoader?.cancel();
+        saveFontPreference(storage, fontPreference, defaultFontPreference);
+      } else {
+        const request = fontLoader?.request(fontValue) ?? null;
+        if (request) {
+          observeFontRequest(request);
+          return;
+        }
+        fontPreference = fontValue;
+        saveFontPreference(storage, fontPreference, defaultFontPreference);
+        applyFontPreference(document, fontPreference);
+      }
     } else if (contrastValue === 'standard' || contrastValue === 'high') {
       contrastPreference = contrastValue;
       saveContrastPreference(

package/templates/_top.html

@@ -38,7 +38,70 @@
     <% } %>
     <title><%= page.title %><%= site.titlePostfix %></title>
     <script>
+      (() => {
       document.documentElement.classList.add('js');
+      const fontPreferenceFamilies = {
+        sans: ['Inter', 'Google Sans Code'],
+        serif: [
+          '<%= site.fontOverrides?.serif ? 'Tada Custom Serif' : 'Source Serif 4' %>',
+          '<%= site.fontOverrides?.serifMono ? 'Tada Custom Serif Mono' : 'Libertinus Mono' %>',
+        ],
+      };
+      const fontPreferenceLoader = {
+        generation: 0,
+        pending: null,
+        failedPreference: null,
+        supported:
+          document.fonts && typeof document.fonts.load === 'function',
+        request(preference) {
+          if (!this.supported) return null;
+          if (this.pending?.preference === preference) return this.pending;
+
+          const generation = ++this.generation;
+          const [bodyFamily, monoFamily] = fontPreferenceFamilies[preference];
+          const promise = Promise.all([
+            document.fonts.load('normal 400 1em "' + bodyFamily + '"'),
+            document.fonts.load('normal 700 1em "' + bodyFamily + '"'),
+            document.fonts.load('normal 400 1em "' + monoFamily + '"'),
+          ]).then(matches => {
+            if (matches.some(faces => faces.length === 0)) {
+              throw new Error('A required font face did not load');
+            }
+          });
+          const request = { generation, preference, promise };
+          this.pending = request;
+          this.failedPreference = null;
+          return request;
+        },
+        isCurrent(request) {
+          return (
+            this.pending === request &&
+            this.generation === request.generation
+          );
+        },
+        complete(request) {
+          if (this.isCurrent(request)) this.pending = null;
+        },
+        fail(request) {
+          if (!this.isCurrent(request)) return;
+          this.pending = null;
+          this.failedPreference = request.preference;
+        },
+        cancel() {
+          ++this.generation;
+          this.pending = null;
+          this.failedPreference = null;
+        },
+      };
+      window.__tadaFontPreferenceLoader = fontPreferenceLoader;
+
+      const applyFontPreference = preference => {
+        if (preference === 'serif') {
+          document.documentElement.dataset.fontPreference = 'serif';
+        } else {
+          delete document.documentElement.dataset.fontPreference;
+        }
+      };
       try {
         const preference = window.localStorage.getItem('fontPreference');
         const configured =
@@ -47,10 +110,27 @@
           (preference === 'serif' || preference === 'sans') &&
           preference !== configured
         ) {
-          if (preference === 'serif') {
-            document.documentElement.dataset.fontPreference = 'serif';
+          const request = fontPreferenceLoader.request(preference);
+          if (!request) {
+            applyFontPreference(preference);
           } else {
-            delete document.documentElement.dataset.fontPreference;
+            request.promise.then(
+              () => {
+                let storedPreference;
+                try {
+                  storedPreference =
+                    window.localStorage.getItem('fontPreference');
+                } catch {}
+                if (
+                  fontPreferenceLoader.isCurrent(request) &&
+                  storedPreference === preference
+                ) {
+                  applyFontPreference(preference);
+                  fontPreferenceLoader.complete(request);
+                }
+              },
+              () => fontPreferenceLoader.fail(request),
+            );
           }
         }
       } catch {}
@@ -81,6 +161,7 @@
       } else {
         delete document.documentElement.dataset.contrastPreference;
       }
+      })();
     </script>
     <% if (!isWatchMode) { %>
     <script type="speculationrules">