@abreen/tada 1.19.0 → 1.19.2

package/README.md

@@ -71,9 +71,11 @@ A static site generator. The successor to Presto.
   * Special heading subtitles with `## Heading # A subtitle here`
   * `{{{ _partial.md }}}` syntax for including partials
 
-- Extremely fast client-side navigation
-  * A miniature SPA without the bloat of a framework
-  * Highly efficient, thoroughly covered by cross-platform browser tests
+- Extremely efficient client-side navigation
+  * A miniature SPA that uses internal links tagged at build time
+  * Get the benefits of DOM tree replacement without an entire bloated framework
+  * Thoroughly covered by browser tests across multiple engines
+  * Clear loading indicators for slow requests
   * Also detects a new version of the current page and supplies a reload button
 
 ### Experimental features

package/bin/tada.ts

@@ -50,7 +50,7 @@ function parsePortArg(name: string): number | undefined {
   const idx = process.argv.indexOf(name);
   if (idx !== -1 && process.argv[idx + 1]) {
     const val = parseInt(process.argv[idx + 1], 10);
-    if (val > 0 && val < 65536) {
+    if (val >= 0 && val < 65536) {
       return val;
     }
   }

package/build/reachability.ts

@@ -2,59 +2,24 @@ import path from 'path';
 import { normalizeOutputPath } from './util';
 import type { HtmlOutputAnalysis } from './types';
 
-function normalizeInternalTarget(target: string): string {
-  return normalizeOutputPath(target);
-}
-
+/** HTML candidates for an already normalized target without a non-HTML extension. */
 function toCandidateHtmlAssetPaths(target: string): string[] {
-  const normalizedTarget = normalizeInternalTarget(target);
-
-  if (normalizedTarget === '/') {
+  if (target === '/') {
     return ['index.html'];
   }
 
-  if (normalizedTarget.endsWith('.html')) {
-    return [normalizedTarget.slice(1)];
-  }
-
-  if (path.posix.extname(normalizedTarget)) {
-    return [];
+  if (target.endsWith('.html')) {
+    return [target.slice(1)];
   }
 
-  const withoutLeadingSlash = normalizedTarget.slice(1);
-  if (normalizedTarget.endsWith('/')) {
+  const withoutLeadingSlash = target.slice(1);
+  if (target.endsWith('/')) {
     return [`${withoutLeadingSlash}index.html`];
   }
 
   return [`${withoutLeadingSlash}/index.html`, `${withoutLeadingSlash}.html`];
 }
 
-function resolveTargetToAssetTarget(target: string): string | null {
-  const normalizedTarget = normalizeInternalTarget(target);
-  if (normalizedTarget === '/' || normalizedTarget.endsWith('.html')) {
-    return null;
-  }
-  return path.posix.extname(normalizedTarget) ? normalizedTarget : null;
-}
-
-function collectOutgoingHtmlAssetPaths(
-  analysis: HtmlOutputAnalysis,
-  knownHtmlAssetPaths: Set<string>,
-): string[] {
-  const htmlAssetPaths = new Set<string>();
-
-  for (const target of analysis.outgoingTargets) {
-    for (const candidate of toCandidateHtmlAssetPaths(target)) {
-      if (knownHtmlAssetPaths.has(candidate)) {
-        htmlAssetPaths.add(candidate);
-        break;
-      }
-    }
-  }
-
-  return [...htmlAssetPaths].sort();
-}
-
 interface CollectReachableOptions {
   htmlAnalysisByPath: Map<string, HtmlOutputAnalysis>;
   knownAssetTargets?: Set<string>;
@@ -75,7 +40,6 @@ export function collectReachableSiteAssets({
     throw new Error(`Pagefind reachability root not found: ${rootPath}`);
   }
 
-  const knownHtmlAssetPaths = new Set(htmlAnalysisByPath.keys());
   const reachableHtmlPaths = new Set<string>();
   const reachableAssetTargets = new Set<string>();
   const pending: string[] = [rootPath];
@@ -89,19 +53,19 @@ export function collectReachableSiteAssets({
 
     const analysis = htmlAnalysisByPath.get(currentPath)!;
 
-    for (const targetPath of collectOutgoingHtmlAssetPaths(
-      analysis,
-      knownHtmlAssetPaths,
-    )) {
-      if (!reachableHtmlPaths.has(targetPath)) {
-        pending.push(targetPath);
+    for (const outgoingTarget of analysis.outgoingTargets) {
+      const target = normalizeOutputPath(outgoingTarget);
+      if (!target.endsWith('.html') && path.posix.extname(target)) {
+        if (knownAssetTargets.has(target)) {
+          reachableAssetTargets.add(target);
+        }
+        continue;
       }
-    }
-
-    for (const target of analysis.outgoingTargets) {
-      const assetTarget = resolveTargetToAssetTarget(target);
-      if (assetTarget && knownAssetTargets.has(assetTarget)) {
-        reachableAssetTargets.add(assetTarget);
+      const targetPath = toCandidateHtmlAssetPaths(target).find(candidate =>
+        htmlAnalysisByPath.has(candidate),
+      );
+      if (targetPath && !reachableHtmlPaths.has(targetPath)) {
+        pending.push(targetPath);
       }
     }
   }

package/build/utils/render.ts

@@ -426,7 +426,7 @@ export function renderCopiedContentAsset({
   const rawSource = fs.readFileSync(filePath, 'utf-8');
   const templated = applySourceTemplate(rawSource, siteVariables, filePath);
 
-  if (filePath.endsWith('.java')) {
+  if (path.extname(filePath).toLowerCase() === '.java') {
     const pageDirPath = toPosix(
       path.relative(contentDir, path.dirname(filePath)),
     );
@@ -568,7 +568,7 @@ function renderPlainTextContent(
 } {
   const applyBasePath = createApplyBasePath(siteVariables);
 
-  const ext = path.extname(filePath);
+  const ext = path.extname(filePath).toLowerCase();
   const raw = fs.readFileSync(filePath, 'utf-8');
   const { pageVariables: rawPageVariables, content } =
     parseFrontMatterAndContent(raw, ext);

package/build/utils/trace-layout.ts

@@ -34,18 +34,13 @@ const MIN_ARRAY_CELL_WIDTH = 48;
 
 /** Information collected about a heap object across all trace steps. */
 interface ObjectInfo {
-  id: string;
   type: string;
   firstStep: number;
   lastStep: number;
-  /** Set of object IDs this object ever references (across all steps). */
-  references: Set<string>;
   /** Step indices where this object is actually present. */
   activeSteps: Set<number>;
   /** Per-field reference targets (field name -> set of referenced object IDs). */
   fieldRefs: Map<string, Set<string>>;
-  /** Max number of fields seen on this object (for field objects). */
-  maxFields: number;
   /** Max number of elements seen on this object (for arrays). */
   maxElements: number;
   /** Scalar value (for heap objects represented by a single value). */
@@ -70,7 +65,7 @@ interface TreeNode {
 
 /**
  * Walk every step, collect every heap object's type, lifetime (first/last step),
- * all references it ever makes, max fields seen, whether it's an array or string.
+ * reference targets by field, display widths, and whether it's an array or string.
  */
 export function scanSteps(steps: TraceStep[]): Map<string, ObjectInfo> {
   const objects = new Map<string, ObjectInfo>();
@@ -81,14 +76,11 @@ export function scanSteps(steps: TraceStep[]): Map<string, ObjectInfo> {
       let info = objects.get(id);
       if (!info) {
         info = {
-          id,
           type: obj.type,
           firstStep: stepIndex,
           lastStep: stepIndex,
-          references: new Set(),
           activeSteps: new Set(),
           fieldRefs: new Map(),
-          maxFields: 0,
           maxElements: 0,
           value: null,
           hasValue: false,
@@ -115,18 +107,14 @@ export function scanSteps(steps: TraceStep[]): Map<string, ObjectInfo> {
 
         for (const elem of obj.elements) {
           if (elem.type === 'ref') {
-            info.references.add(elem.id);
             elemRefs.add(elem.id);
           }
         }
       } else if ('fields' in obj) {
-        const fieldEntries = Object.entries(obj.fields);
-        info.maxFields = Math.max(info.maxFields, fieldEntries.length);
-        for (const [fieldName, val] of fieldEntries) {
+        for (const [fieldName, val] of Object.entries(obj.fields)) {
           info.fieldNames.add(fieldName);
 
           if (val.type === 'ref') {
-            info.references.add(val.id);
             if (!info.fieldRefs.has(fieldName)) {
               info.fieldRefs.set(fieldName, new Set());
             }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abreen/tada",
-  "version": "1.19.0",
+  "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/index.ts

@@ -25,6 +25,8 @@ const PERSISTENT_COMPONENTS: Record<
 let startTime = -1;
 
 document.addEventListener('DOMContentLoaded', async () => {
+  const initialHref = window.location.href;
+  const initialHash = window.location.hash;
   startTime = window.performance.now();
 
   const failed: Record<string, string> = {};
@@ -54,8 +56,8 @@ document.addEventListener('DOMContentLoaded', async () => {
   // fragment scroll. Do it ourselves once per-page components have
   // finished mutating the DOM. On a fresh cold load the browser already
   // scrolled, so this is a harmless re-align.
-  if (window.location.hash) {
-    getHashTarget(window.document, window.location.hash)?.scrollIntoView();
+  if (initialHash && window.location.href === initialHref) {
+    getHashTarget(window.document, initialHash)?.scrollIntoView();
   }
 
   for (const [name, reason] of Object.entries(failed)) {

package/src/navigate/_index.scss

@@ -7,6 +7,11 @@ $movement-easing: cubic-bezier(0.2, 0, 0, 1);
   --page-transition-movement-easing: #{$movement-easing};
 }
 
+html.navigation-loading,
+html.navigation-loading * {
+  cursor: progress !important;
+}
+
 @keyframes page-fade-out {
   to {
     opacity: 0;
@@ -100,12 +105,10 @@ $movement-easing: cubic-bezier(0.2, 0, 0, 1);
   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) {
@@ -120,6 +123,19 @@ $movement-easing: cubic-bezier(0.2, 0, 0, 1);
   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,16 +5,24 @@ import {
   teardownPerPageComponents,
 } from './lifecycle';
 import { globals } from '../globals';
+import { getHashTarget } from '../hash-target';
 import { swapHeaderTitle } from '../header';
 
 export const NAVIGATION_EVENT = 'tada:navigation';
 
+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';
 
@@ -63,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);
     }
   }
 }
@@ -136,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 {
@@ -211,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,
@@ -235,15 +327,28 @@ export async function navigateToUrl(
 
   const header = document.querySelector('header');
   header?.classList.add('loading');
+  const loadingCursorTimeout = window.setTimeout(() => {
+    if (isActiveNavigation(controller)) {
+      document.documentElement.classList.add('navigation-loading');
+    }
+  }, LOADING_CURSOR_DELAY);
+  const stopLoading = (): void => {
+    window.clearTimeout(loadingCursorTimeout);
+    if (!isActiveNavigation(controller)) {
+      return;
+    }
+    header?.classList.remove('loading');
+    document.documentElement.classList.remove('navigation-loading');
+  };
 
   let response: Response;
   try {
     response = await globals.fetch(url, { signal: controller.signal });
   } catch (err: unknown) {
+    stopLoading();
     if (!isActiveNavigation(controller)) {
       return;
     }
-    header?.classList.remove('loading');
     if (isAbortError(err)) {
       return;
     }
@@ -252,11 +357,12 @@ export async function navigateToUrl(
   }
 
   if (!isActiveNavigation(controller)) {
+    stopLoading();
     return;
   }
 
   if (!response.ok) {
-    header?.classList.remove('loading');
+    stopLoading();
     globals.setLocationHref(window, url);
     return;
   }
@@ -265,10 +371,10 @@ export async function navigateToUrl(
   try {
     html = await response.text();
   } catch (err: unknown) {
+    stopLoading();
     if (!isActiveNavigation(controller)) {
       return;
     }
-    header?.classList.remove('loading');
     if (isAbortError(err)) {
       return;
     }
@@ -277,10 +383,11 @@ export async function navigateToUrl(
   }
 
   if (!isActiveNavigation(controller)) {
+    stopLoading();
     return;
   }
 
-  header?.classList.remove('loading');
+  stopLoading();
 
   const DOMParserCtor = (window as unknown as { DOMParser: typeof DOMParser })
     .DOMParser;
@@ -306,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;
@@ -352,6 +464,7 @@ export async function navigateToUrl(
     if (titleVisible) {
       setTitleTransitionNames(titleEl, true);
     }
+    setPageBottomTransitionName(window);
 
     document.documentElement.classList.add(
       direction === 'forward' ? 'nav-forward' : 'nav-back',
@@ -372,6 +485,7 @@ export async function navigateToUrl(
       if (newTitleVisible && newTitleEl) {
         setTitleTransitionNames(newTitleEl, true);
       }
+      setPageBottomTransitionName(window);
     });
 
     await transition.finished;

package/src/question/index.ts

@@ -62,12 +62,19 @@ export default (window: Window) => {
   const bodies =
     window.document.querySelectorAll<HTMLElement>('.question-a-body');
   bodies.forEach(el => {
+    const content = el.querySelector<HTMLElement>('.question-a-content');
+    if (content) {
+      content.inert = !el.hasAttribute('data-revealed');
+    }
     el.setAttribute('role', 'button');
     el.setAttribute('tabindex', '0');
     el.setAttribute('aria-label', 'Click to reveal answer');
 
     const reveal = () => {
       el.setAttribute('data-revealed', '');
+      if (content) {
+        content.inert = false;
+      }
       el.removeAttribute('role');
       el.removeAttribute('tabindex');
       el.removeAttribute('aria-label');

package/src/search/index.ts

@@ -94,25 +94,7 @@ async function doSearch(query: string, window: Window): Promise<SearchState> {
   return { totalResults: grouped.length, results: grouped };
 }
 
-function applyHighlight(
-  resultsContainer: HTMLElement,
-  focusedEl: HTMLElement | null,
-) {
-  const options = Array.from(
-    resultsContainer.querySelectorAll('[role="option"]'),
-  ) as HTMLElement[];
-  options.forEach(opt => {
-    const selected = focusedEl !== null && opt.contains(focusedEl);
-    opt.setAttribute('aria-selected', selected ? 'true' : 'false');
-  });
-}
-
-function render(
-  input: HTMLInputElement,
-  resultsContainer: HTMLElement,
-  state: State,
-  loading = false,
-) {
+function render(resultsContainer: HTMLElement, state: State, loading = false) {
   const doc = resultsContainer.ownerDocument;
 
   if (state.showResults) {
@@ -129,16 +111,10 @@ function render(
   }
 
   const ol = doc.createElement('ol');
-  ol.id = `${input.name}-results`;
-  ol.role = 'listbox';
-  ol.tabIndex = -1;
   ol.setAttribute('aria-label', 'Search results');
 
-  const totalVisible = state.results.length;
-
-  state.results.forEach((result, i) => {
+  state.results.forEach(result => {
     const a = doc.createElement('a');
-    a.id = `result-${i}`;
     a.className = 'result';
     a.href = result.url;
     const isGeneratedPage = Boolean(result.template);
@@ -148,7 +124,6 @@ function render(
     a.tabIndex = 0;
 
     const titleEl = doc.createElement('div');
-    titleEl.id = `title-${i}`;
     titleEl.className = 'title';
     if (result.template === 'code') {
       titleEl.classList.add('code-page');
@@ -166,12 +141,6 @@ function render(
     a.appendChild(excerpt);
 
     const li = doc.createElement('li');
-    li.id = `option-${i}`;
-    li.setAttribute('role', 'option');
-    li.setAttribute('aria-selected', 'false');
-    li.setAttribute('aria-setsize', String(totalVisible));
-    li.setAttribute('aria-posinset', String(i + 1));
-    li.setAttribute('aria-labelledby', `title-${i}`);
     li.appendChild(a);
 
     const subsToShow = result.subResults;
@@ -265,9 +234,6 @@ function render(
     resultsContainer.setAttribute('aria-hidden', 'true');
     resultsContainer.setAttribute('inert', '');
   }
-
-  input.setAttribute('aria-expanded', String(state.showResults));
-  input.setAttribute('aria-controls', ol.id);
 }
 
 export default (window: Window) => {
@@ -335,7 +301,7 @@ export default (window: Window) => {
         pagefindLoadGeneration += 1;
         console.log(`failed to load Pagefind: ${err}`);
         if (state.showResults) {
-          render(input!, resultsContainer, state, false);
+          render(resultsContainer, state, false);
         }
       }
       return false;
@@ -362,7 +328,7 @@ export default (window: Window) => {
 
   async function update(updateId: number) {
     if (state.showResults) {
-      render(input!, resultsContainer, state, true);
+      render(resultsContainer, state, true);
     }
     const query = state.value;
     if (!(await loadPagefind()) || updateId !== latestUpdateId) {
@@ -380,7 +346,7 @@ export default (window: Window) => {
     if (!state.showResults) {
       return;
     }
-    render(input!, resultsContainer, state, false);
+    render(resultsContainer, state, false);
   }
 
   function queueUpdate() {
@@ -402,7 +368,7 @@ export default (window: Window) => {
       .catch(err => {
         console.log(`failed to load Pagefind: ${err}`);
         if (state.showResults) {
-          render(input!, resultsContainer, state, false);
+          render(resultsContainer, state, false);
         }
       });
   }
@@ -418,7 +384,7 @@ export default (window: Window) => {
     const stalePagefind = pagefind;
     invalidatePagefind();
     if (state.showResults) {
-      render(input!, resultsContainer, state, true);
+      render(resultsContainer, state, true);
     }
     if (stalePagefind) {
       try {
@@ -434,7 +400,7 @@ export default (window: Window) => {
     reloadPagefindAfterPageUpdateRefresh().catch(err => {
       console.log(`failed to reload Pagefind: ${err}`);
       if (state.showResults) {
-        render(input!, resultsContainer, state, false);
+        render(resultsContainer, state, false);
       }
     });
   }
@@ -446,7 +412,7 @@ export default (window: Window) => {
       return;
     }
     state.showResults = false;
-    render(input!, resultsContainer, state);
+    render(resultsContainer, state);
   }
 
   function handleInput(e: Event) {
@@ -573,23 +539,11 @@ export default (window: Window) => {
       }
     } else if (e.key === 'Escape') {
       e.preventDefault();
-      hide();
       input!.focus();
+      hide();
     }
   }
 
-  function handleResultsFocusIn(e: FocusEvent) {
-    applyHighlight(resultsContainer, e.target as HTMLElement);
-  }
-
-  function handleResultsFocusOut(e: FocusEvent) {
-    const related = e.relatedTarget as HTMLElement | null;
-    if (related && (resultsContainer.contains(related) || related === input)) {
-      return;
-    }
-    applyHighlight(resultsContainer, null);
-  }
-
   function handleWindowPointerDown(e: PointerEvent) {
     const target = e.target as Node;
     if (!input!.contains(target) && !resultsContainer.contains(target)) {
@@ -616,8 +570,6 @@ export default (window: Window) => {
   resultsContainer.addEventListener('pointerdown', handlePointerDown);
   resultsContainer.addEventListener('click', handleResultClick);
   resultsContainer.addEventListener('keydown', handleResultsKeyDown);
-  resultsContainer.addEventListener('focusin', handleResultsFocusIn);
-  resultsContainer.addEventListener('focusout', handleResultsFocusOut);
   window.addEventListener('pointerup', handleWindowPointerUp);
   window.addEventListener('pointerdown', handleWindowPointerDown);
   window.addEventListener('pointermove', handleWindowPointerMove);
@@ -637,8 +589,6 @@ export default (window: Window) => {
     window.removeEventListener('pointermove', handleWindowPointerMove);
     window.removeEventListener('pointerdown', handleWindowPointerDown);
     window.removeEventListener('pointerup', handleWindowPointerUp);
-    resultsContainer.removeEventListener('focusout', handleResultsFocusOut);
-    resultsContainer.removeEventListener('focusin', handleResultsFocusIn);
     resultsContainer.removeEventListener('keydown', handleResultsKeyDown);
     resultsContainer.removeEventListener('click', handleResultClick);
     resultsContainer.removeEventListener('pointerdown', handlePointerDown);

package/src/top/README.md

@@ -1,4 +1,9 @@
 # The `top` component
 
-Show a floating "back to top" button once the page is scrolled more than 250px,
-and keep it visible until the page is back near the top.
+Show a floating "back to top" button on long pages once the reader has scrolled
+well down the page, and keep it visible until they are back above that point.
+
+- The page must be at least 3 viewports tall; shorter pages never show it.
+- It shows once the scroll position passes 1.5 viewports or 25% of the
+  scrollable distance, whichever is farther.
+- Visibility is recalculated on scroll and on resize.

package/src/top/index.ts

@@ -1,8 +1,14 @@
 import { debounce, removeClass } from '../util';
 import { globals } from '../globals';
 
-/** Show the "Back to top" button once the user is past this scroll position */
-const SHOW_THRESHOLD_PX = 250;
+/** Only show the "Back to top" button on pages at least this many viewports tall */
+const MIN_PAGE_SCREENS = 3;
+
+/** Show the button once the user is this many viewports down the page... */
+const SHOW_AFTER_SCREENS = 1.5;
+
+/** ...or this fraction of the scrollable distance, whichever is farther */
+const SHOW_AFTER_FRACTION = 0.25;
 
 /** Debounce time (maximum amount of time to wait before updates) */
 const LATENCY_MS = 50;
@@ -60,8 +66,22 @@ export default (window: Window) => {
     isShowing = false;
   }
 
+  function shouldShow(): boolean {
+    const viewportHeight = window.innerHeight;
+    const maxScroll =
+      window.document.documentElement.scrollHeight - viewportHeight;
+    if (maxScroll < (MIN_PAGE_SCREENS - 1) * viewportHeight) {
+      return false;
+    }
+    const threshold = Math.max(
+      SHOW_AFTER_SCREENS * viewportHeight,
+      SHOW_AFTER_FRACTION * maxScroll,
+    );
+    return window.scrollY > threshold;
+  }
+
   function updateVisibility() {
-    if (window.scrollY > SHOW_THRESHOLD_PX) {
+    if (shouldShow()) {
       show(link);
     } else {
       hide(link);
@@ -70,9 +90,11 @@ export default (window: Window) => {
 
   const debounced = debounce(window, updateVisibility, LATENCY_MS);
   window.addEventListener('scroll', debounced, { passive: true });
+  window.addEventListener('resize', debounced, { passive: true });
   updateVisibility();
 
   return () => {
     window.removeEventListener('scroll', debounced);
+    window.removeEventListener('resize', debounced);
   };
 };

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';

package/templates/_top.html

@@ -192,20 +192,17 @@
       <div class="header-controls">
         <div id="to-top-container" class="to-top-container"></div>
         <% if (site.features.search) { %>
-        <div class="search-controls">
+        <div class="search-controls" role="search">
           <input type="search" class="search quick-search"
                  autocomplete="off" name="quick-search"
                  placeholder="Search"
-                 role="combobox"
-                 aria-haspopup="listbox"
-                 aria-autocomplete="list"
-                 aria-expanded="false"
+                 aria-label="Search"
                  aria-controls="quick-search-results"
                  disabled />
         </div>
         <% } %>
       </div>
-      <div class="results-container" role="region"
+      <div id="quick-search-results" class="results-container" role="region"
            aria-label="Search results"
            aria-live="polite" aria-hidden="true" inert>
         <div class="results" style="display:none"></div>