@abreen/tada 1.19.0 → 1.19.1

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.1",
   "type": "module",
   "description": "A static site generator",
   "license": "MIT",

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;

package/src/navigate/runtime.ts

@@ -9,6 +9,8 @@ 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 = '';
@@ -235,15 +237,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 +267,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 +281,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 +293,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;

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/_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>