@abreen/tada 1.16.7 → 1.16.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abreen/tada",
-  "version": "1.16.7",
+  "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/src/header/_base.scss

@@ -5,6 +5,9 @@
 }
 
 header {
+  --header-search-reservation: 0px;
+  --header-to-top-reservation: 0px;
+
   position: fixed;
   top: 0;
   z-index: 1000;
@@ -14,19 +17,36 @@ header {
   background: var(--bg-color-translucent);
   backdrop-filter: var(--backdrop-filter);
   view-transition-name: site-header;
+
+  &:has(.search-controls) {
+    --header-search-reservation: 200px;
+
+    @media (width <= 400px) {
+      --header-search-reservation: 0px;
+    }
+  }
+
+  &:has(.to-top-container .is-visible) {
+    --header-to-top-reservation: 120px;
+  }
 }
 
 :root[data-contrast-preference='high'] header {
   background: var(--bg-color);
 }
 
+header > details {
+  min-width: 0;
+}
+
 header details summary {
   position: relative;
   display: flex;
   align-items: center;
   height: var(--header-collapsed-height);
-  padding: 0 200px 0 0;
-  container-type: inline-size;
+  padding: 0
+    calc(var(--header-search-reservation) + var(--header-to-top-reservation)) 0
+    0;
   cursor: pointer;
   list-style-type: none;
 
@@ -47,10 +67,6 @@ header details summary {
   }
 }
 
-header:has(.to-top-container .is-visible) details summary {
-  padding-right: 320px;
-}
-
 header details summary::-webkit-details-marker {
   display: none;
 }
@@ -105,12 +121,6 @@ header summary .site-title {
   pointer-events: none;
 }
 
-@container (max-width: 200px) {
-  header summary .site-title {
-    display: none;
-  }
-}
-
 header > .header-controls {
   position: absolute;
   top: 0;

package/src/question/style.scss

@@ -220,7 +220,7 @@
 }
 
 @media print {
-  .question-a-body {
+  .js .question-a-body {
     cursor: default;
 
     @include user-select(text);

package/src/style.scss

@@ -93,14 +93,28 @@ a.disabled {
 }
 
 .external-link-tail::after,
+a.external:not(:has(.external-link-tail))::after {
+  vertical-align: text-top;
+
+  @include contained-mask(var(--icon-external-link));
+}
+
+.external-link-tail::after {
+  display: inline;
+
+  // With zero font metrics, block-end padding paints down from text-top.
+  padding-block-end: var(--icon-external-link-size);
+  padding-inline-start: var(--icon-external-link-size);
+  font-size: 0;
+  line-height: 0;
+  content: '\2060' / '';
+}
+
 a.external:not(:has(.external-link-tail))::after {
   display: inline-block;
   width: var(--icon-external-link-size);
   height: var(--icon-external-link-size);
-  vertical-align: text-top;
   content: '';
-
-  @include contained-mask(var(--icon-external-link));
 }
 
 .footnotes {

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">