@abreen/tada 1.19.1 → 1.19.2

package/package.json

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

package/src/hash-target.ts

@@ -5,6 +5,9 @@
  * Tada also allows raw HTML, so an author can create a decoded ID like
  * <h2 id="hello world">Hello</h2>. A link to that target becomes
  * #hello%20world, and getElementById('hello%20world') would not find it.
+ *
+ * Like the browser, fall back to a legacy <a name="..."> anchor when no
+ * element has the ID.
  */
 export function getHashTarget(
   document: Document,
@@ -15,15 +18,31 @@ export function getHashTarget(
     return null;
   }
 
-  const rawTarget = document.getElementById(id);
+  const rawTarget = findIndicatedElement(document, id);
   if (rawTarget) {
     return rawTarget;
   }
 
   try {
     const decodedId = decodeURIComponent(id);
-    return decodedId === id ? null : document.getElementById(decodedId);
+    return decodedId === id ? null : findIndicatedElement(document, decodedId);
   } catch {
     return null;
   }
 }
+
+function findIndicatedElement(
+  document: Document,
+  fragment: string,
+): HTMLElement | null {
+  const byId = document.getElementById(fragment);
+  if (byId) {
+    return byId;
+  }
+  for (const element of document.getElementsByName(fragment)) {
+    if (element.localName === 'a') {
+      return element;
+    }
+  }
+  return null;
+}

package/src/navigate/_index.scss

@@ -105,12 +105,10 @@ html.navigation-loading * {
   mix-blend-mode: normal;
 }
 
-// The footer and appearance controls get their own stationary layer. Show only
-// the incoming snapshot so disabled defaults and stale hover states cannot blend.
-.page-bottom {
-  view-transition-name: page-bottom;
-}
-
+// The footer and appearance controls get their own layer while they are in the
+// viewport. view-transition-name is set via inline style by the navigator. On
+// screen on both pages, the layer stays put and shows only the incoming
+// snapshot so disabled defaults and stale hover states cannot blend.
 ::view-transition-group(page-bottom),
 ::view-transition-old(page-bottom),
 ::view-transition-new(page-bottom) {
@@ -125,6 +123,19 @@ html.navigation-loading * {
   mix-blend-mode: normal;
 }
 
+// On screen on only one page, such as between a short page and the top of a
+// long page: fade out or in where they are, in step with the page. Fill both
+// ways, like the UA default, so the faded-out snapshot cannot reappear in the
+// transition's last frame.
+::view-transition-old(page-bottom):only-child {
+  display: block;
+  animation: page-fade-out $duration ease-in both;
+}
+
+::view-transition-new(page-bottom):only-child {
+  animation: page-fade-in $duration ease-out both;
+}
+
 // Forward navigation: old content slides left, new content slides in from right
 .nav-forward::view-transition-old(root) {
   animation:

package/src/navigate/index.ts

@@ -1,5 +1,6 @@
 import { isEligibleLink } from './eligible';
 import {
+  applyFragmentTarget,
   clearSearch,
   closeHeaderDetails,
   getCurrentPath,
@@ -7,6 +8,7 @@ import {
   getHistoryIndex,
   getSavedScroll,
   initNavigation,
+  isApplyingFragment,
   navigateToUrl,
   saveScrollPosition,
   setCurrentPath,
@@ -134,6 +136,10 @@ export default function mountNavigate(window: Window): () => void {
   }
 
   function handlePopState(event: PopStateEvent) {
+    if (isApplyingFragment()) {
+      return;
+    }
+
     if (clearingFragment) {
       clearingFragment = false;
       if (!window.location.hash) {
@@ -145,19 +151,24 @@ export default function mountNavigate(window: Window): () => void {
     if (newPath === getCurrentPath()) {
       const locationKey = newPath + window.location.hash;
       const savedY = getSavedLocationScroll(locationKey);
+      // Fragment traversal can update :target and apply its native target
+      // scroll after popstate. Correct both in the next task so the URL and our
+      // saved position win. Capture savedY now because the native scroll event
+      // can update the location map first.
+      window.setTimeout(() => {
+        const currentLocationKey =
+          window.location.pathname +
+          window.location.search +
+          window.location.hash;
+        if (currentLocationKey !== locationKey) {
+          return;
+        }
+        applyFragmentTarget(window);
+        if (typeof savedY === 'number') {
+          window.scrollTo({ top: savedY });
+        }
+      }, 0);
       if (typeof savedY === 'number') {
-        // Fragment traversal can apply its native target scroll after popstate.
-        // Restore in the next task so our saved position wins. Capture savedY
-        // now because the native scroll event can update the location map first.
-        window.setTimeout(() => {
-          const currentLocationKey =
-            window.location.pathname +
-            window.location.search +
-            window.location.hash;
-          if (currentLocationKey === locationKey) {
-            window.scrollTo({ top: savedY });
-          }
-        }, 0);
         return;
       }
 

package/src/navigate/runtime.ts

@@ -5,6 +5,7 @@ import {
   teardownPerPageComponents,
 } from './lifecycle';
 import { globals } from '../globals';
+import { getHashTarget } from '../hash-target';
 import { swapHeaderTitle } from '../header';
 
 export const NAVIGATION_EVENT = 'tada:navigation';
@@ -14,9 +15,14 @@ const LOADING_CURSOR_DELAY = 400;
 let currentAbortController: AbortController | null = null;
 let historyIndex = 0;
 let currentPath = '';
+let applyingFragment = false;
+let fragmentTargetRequest = 0;
 
 const scrollByIndex = new Map<number, number>();
 const scrollByLocation = new Map<string, number>();
+// Stylesheets the navigator added that have not loaded or failed yet. Those in
+// the initial document have settled before the deferred client script runs.
+const pendingStylesheets = new Map<Element, Promise<void>>();
 
 type Direction = 'forward' | 'back';
 
@@ -65,7 +71,19 @@ function updateHead(document: Document, newDoc: Document): void {
 
   for (const link of newDoc.querySelectorAll('link[rel="stylesheet"]')) {
     if (!existingHrefs.has(link.getAttribute('href'))) {
-      document.head.appendChild(link.cloneNode(true));
+      const clone = link.cloneNode(true) as Element;
+      pendingStylesheets.set(
+        clone,
+        new Promise(resolve => {
+          const settle = () => {
+            pendingStylesheets.delete(clone);
+            resolve();
+          };
+          clone.addEventListener('load', settle, { once: true });
+          clone.addEventListener('error', settle, { once: true });
+        }),
+      );
+      document.head.appendChild(clone);
     }
   }
 }
@@ -138,11 +156,29 @@ function setTitleTransitionNames(titleEl: Element, enabled: boolean): void {
   }
 }
 
+// The footer and appearance pickers get their own layer only while they are in
+// the viewport, so the layer stays put when they are on screen on both pages
+// and fades on its own when they are on screen on only one.
+function setPageBottomTransitionName(window: Window): void {
+  const bottom = window.document.querySelector<HTMLElement>('.page-bottom');
+  if (!bottom) {
+    return;
+  }
+  const rect = bottom.getBoundingClientRect();
+  if (rect.bottom > 0 && rect.top < window.innerHeight) {
+    bottom.style.viewTransitionName = 'page-bottom';
+  }
+}
+
 function cleanupViewTransitionNames(document: Document): void {
   const titleEl = document.querySelector('.title-and-info');
   if (titleEl) {
     setTitleTransitionNames(titleEl, false);
   }
+  const bottom = document.querySelector<HTMLElement>('.page-bottom');
+  if (bottom) {
+    bottom.style.viewTransitionName = '';
+  }
 }
 
 function getLocationKey(window: Window): string {
@@ -213,6 +249,60 @@ export function getSavedLocationScroll(
   return scrollByLocation.get(locationKey);
 }
 
+// Browsers fire popstate synchronously during applyFragmentTarget
+export function isApplyingFragment(): boolean {
+  return applyingFragment;
+}
+
+// Restoring a history entry can leave :target stale. With manual scroll
+// restoration, WebKit skips fragment processing on Back/Forward, and swapped
+// content loses it in every browser. A fragment navigation sets it in every
+// browser, but it can reset the entry's history state and scroll position, so
+// restore both.
+//
+// WebKit defers fragment scrolling until pending stylesheets load, which would
+// later move the page away from the restored scroll position. Wait for them
+// first, and skip the update if another request or navigation replaced it.
+export function applyFragmentTarget(window: Window): void {
+  const request = ++fragmentTargetRequest;
+  const { href } = window.location;
+  const apply = (): void => {
+    if (request !== fragmentTargetRequest || window.location.href !== href) {
+      return;
+    }
+    const pending = Array.from(pendingStylesheets.values());
+    if (pending.length > 0) {
+      void Promise.all(pending).then(apply);
+      return;
+    }
+    replaceFragmentTarget(window);
+  };
+  apply();
+}
+
+function replaceFragmentTarget(window: Window): void {
+  const { document, history, location } = window;
+  if (
+    document.querySelector(':target') === getHashTarget(document, location.hash)
+  ) {
+    return;
+  }
+  const { href } = location;
+  const state = history.state;
+  const { scrollX, scrollY } = window;
+  applyingFragment = true;
+  try {
+    globals.replaceLocation(
+      window,
+      location.pathname + location.search + (location.hash || '#'),
+    );
+  } finally {
+    applyingFragment = false;
+  }
+  history.replaceState(state, '', href);
+  window.scrollTo({ left: scrollX, top: scrollY });
+}
+
 export async function navigateToUrl(
   window: Window,
   options: NavigationOptions,
@@ -323,6 +413,11 @@ export async function navigateToUrl(
 
     teardownPerPageComponents();
     swapContent(document, newDoc);
+    if (!pushHistory) {
+      // Restore the entry's :target before updateHead adds stylesheets, so it
+      // applies right away unless an earlier stylesheet is still loading
+      applyFragmentTarget(window);
+    }
     updateHead(document, newDoc);
     mountAppearancePickerForPage(window);
     currentPath = parsed.pathname + parsed.search;
@@ -369,6 +464,7 @@ export async function navigateToUrl(
     if (titleVisible) {
       setTitleTransitionNames(titleEl, true);
     }
+    setPageBottomTransitionName(window);
 
     document.documentElement.classList.add(
       direction === 'forward' ? 'nav-forward' : 'nav-back',
@@ -389,6 +485,7 @@ export async function navigateToUrl(
       if (newTitleVisible && newTitleEl) {
         setTitleTransitionNames(newTitleEl, true);
       }
+      setPageBottomTransitionName(window);
     });
 
     await transition.finished;

package/templates/_theme.scss

@@ -54,7 +54,7 @@
     'Segoe UI Symbol';
   --sans-mono-font: 'Google Sans Code', 'Consolas', 'Courier', monospace;
   --serif-font: <%= serifFontStack %>;
-  --serif-preview-font: 'Times New Roman', 'Times', serif;
+  --serif-preview-font: 'Georgia', 'Times New Roman', 'Times', serif;
   --serif-mono-font: <%= serifMonoFontStack %>;
   --sans-font-feature-settings:
     'liga', 'calt', 'ss07', 'ss08', 'cv01', 'cv08', 'cv10';