@abreen/tada 1.15.9 → 1.15.11

package/build/utils/code.ts

@@ -7,6 +7,7 @@ import { getExtensionToShikiLanguage } from '../site-variables';
 import { highlightCode } from './shiki-highlighter';
 import externalLinksPlugin from '../external-links-plugin';
 import { createApplyBasePath } from './paths';
+import katexPlugin from './katex';
 import { splitLines } from './literate-java';
 import type { JavaTocEntry, SiteVariables } from '../types';
 
@@ -40,10 +41,9 @@ const log = makeLogger(import.meta.url);
 const PROSE_LINE = /^\s*\/\/\/(\s|$)/;
 
 function createCodeMarkdown(siteVariables: SiteVariables): MarkdownIt {
-  return new MarkdownIt({ html: true, typographer: true }).use(
-    externalLinksPlugin,
-    siteVariables,
-  );
+  return new MarkdownIt({ html: true, typographer: true })
+    .use(externalLinksPlugin, siteVariables)
+    .use(katexPlugin);
 }
 
 // Matches Markdown links: [text](url)

package/build/utils/katex.ts

@@ -0,0 +1,37 @@
+import type MarkdownIt from 'markdown-it';
+import Token from 'markdown-it/lib/token.mjs';
+import markdownItKatex from '@vscode/markdown-it-katex';
+import katex from 'katex';
+import renderA11yString from 'katex/contrib/render-a11y-string';
+
+export default function katexPlugin(markdown: MarkdownIt): void {
+  markdown.use(markdownItKatex);
+
+  // The @vscode/markdown-it-katex plugin's renderers swallow errors thrown
+  // by katex.renderToString() and return error HTML instead of propagating
+  // the exception. Override the renderers so parse errors fail the build.
+  // The plugin's tokenizer ($ and $$ delimiter parsing) is kept.
+  // Each renderer also adds an aria-label with a screen-reader-friendly
+  // description generated by katex/contrib/render-a11y-string.
+  markdown.renderer.rules.math_inline = (tokens: Token[], idx: number) => {
+    const latex = tokens[idx].content;
+    const html = katex.renderToString(latex, { throwOnError: true });
+    const a11y = markdown.utils.escapeHtml(renderA11yString(latex));
+    return html.replace(
+      '<span class="katex">',
+      `<span class="katex" aria-label="${a11y}">`,
+    );
+  };
+  const katexBlockRenderer = (tokens: Token[], idx: number) => {
+    const latex = tokens[idx].content;
+    const html = katex.renderToString(latex, {
+      throwOnError: true,
+      displayMode: true,
+    });
+    const a11y = markdown.utils.escapeHtml(renderA11yString(latex));
+    return `<p class="katex-block" aria-label="${a11y}">` + html + `</p>\n`;
+  };
+  markdown.renderer.rules.math_block = katexBlockRenderer;
+  markdown.renderer.rules.math_inline_block = katexBlockRenderer;
+  markdown.renderer.rules.math_inline_bare_block = katexBlockRenderer;
+}

package/build/utils/markdown.ts

@@ -15,9 +15,7 @@ import deflistIdPlugin from '../deflist-id-plugin';
 import externalLinksPlugin from '../external-links-plugin';
 import { tocPlugin } from '../toc-plugin';
 import columnsPlugin from '../columns-plugin';
-import markdownItKatex from '@vscode/markdown-it-katex';
-import katex from 'katex';
-import renderA11yString from 'katex/contrib/render-a11y-string';
+import katexPlugin from './katex';
 import markdownPartialsPlugin from './markdown-partials';
 import type { RenderDependencyCollector, SiteVariables } from '../types';
 
@@ -81,7 +79,7 @@ export function createMarkdown(
     .use(externalLinksPlugin, siteVariables)
     .use(tocPlugin)
     .use(columnsPlugin)
-    .use(markdownItKatex)
+    .use(katexPlugin)
     .use(markdownItContainer, 'details', {
       marker: '<',
       validate: function (params: string) {
@@ -476,34 +474,6 @@ export function createMarkdown(
     state.tokens = transformedTokens;
   });
 
-  // The @vscode/markdown-it-katex plugin's renderers swallow errors thrown
-  // by katex.renderToString() and return error HTML instead of propagating
-  // the exception. Override the renderers so parse errors fail the build.
-  // The plugin's tokenizer ($ and $$ delimiter parsing) is kept.
-  // Each renderer also adds an aria-label with a screen-reader-friendly
-  // description generated by katex/contrib/render-a11y-string.
-  markdown.renderer.rules.math_inline = (tokens: Token[], idx: number) => {
-    const latex = tokens[idx].content;
-    const html = katex.renderToString(latex, { throwOnError: true });
-    const a11y = markdown.utils.escapeHtml(renderA11yString(latex));
-    return html.replace(
-      '<span class="katex">',
-      `<span class="katex" aria-label="${a11y}">`,
-    );
-  };
-  const katexBlockRenderer = (tokens: Token[], idx: number) => {
-    const latex = tokens[idx].content;
-    const html = katex.renderToString(latex, {
-      throwOnError: true,
-      displayMode: true,
-    });
-    const a11y = markdown.utils.escapeHtml(renderA11yString(latex));
-    return `<p class="katex-block" aria-label="${a11y}">` + html + `</p>\n`;
-  };
-  markdown.renderer.rules.math_block = katexBlockRenderer;
-  markdown.renderer.rules.math_inline_block = katexBlockRenderer;
-  markdown.renderer.rules.math_inline_bare_block = katexBlockRenderer;
-
   const usedIds = new Map<string, number>();
   markdown.use(markdownItContainer, 'alert', {
     marker: '!',

package/build/utils/render.ts

@@ -359,13 +359,10 @@ export function renderCodePageAsset({
     isWatchMode: isWatchMode(assetFiles),
   });
 
+  const templateHtml = render('code.html', templateParameters) as string;
   const finalized = finalizeHtmlPage({
     filePath,
-    html: injectAssetTags(
-      render('code.html', templateParameters) as string,
-      assetFiles,
-      distDir,
-    ),
+    html: preparePageTemplateHtml({ templateHtml, assetFiles, distDir }),
     siteVariables,
     sourceUrlPath,
     validInternalTargets,

package/init/content/lectures/01/Rectangle.java

@@ -6,6 +6,8 @@
 /// See [`rectangle.py`](./rectangle.py) for a Python version of this class.
 ///
 /// Here's `vars.foobar`: <%= vars.foobar %>
+///
+/// Here's some LaTeX: $\frac{n(n-1)}{2}$ is $O(n^2)$
 public class Rectangle {
     private int width;
     private int height;

package/package.json

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

package/src/index.ts

@@ -3,7 +3,7 @@ import './style.scss';
 import './anchor/style.scss';
 import './code.scss';
 import './code/style.scss';
-import './literate/style.scss';
+import './literate.scss';
 import './header/style.scss';
 import './print/style.scss';
 import './question/style.scss';

package/src/navigate/eligible.ts

@@ -45,7 +45,14 @@ export function isEligibleLink(
     return false;
   }
 
-  if (!url.pathname.startsWith(basePath)) {
+  const normalizedBasePath = basePath.endsWith('/')
+    ? basePath.slice(0, -1) || '/'
+    : basePath;
+  if (
+    normalizedBasePath !== '/' &&
+    url.pathname !== normalizedBasePath &&
+    !url.pathname.startsWith(`${normalizedBasePath}/`)
+  ) {
     return false;
   }
 

package/src/page-update/index.ts

@@ -10,6 +10,7 @@ import { NAVIGATION_EVENT, refreshCurrentPage } from '../navigate/runtime';
 import { globals } from '../globals';
 
 const POLL_INTERVAL_MS = 600_000;
+export const PAGE_UPDATE_REFRESH_EVENT = 'tada:page-update-refresh';
 
 interface PageUpdateOptions {
   pollIntervalMs?: number;
@@ -247,7 +248,10 @@ export function mountPageUpdate(
   }
 
   function handleReloadClick() {
-    void refreshPage(window);
+    void refreshPage(window).then(() => {
+      const EventCtor = (window as unknown as { Event: typeof Event }).Event;
+      window.dispatchEvent(new EventCtor(PAGE_UPDATE_REFRESH_EVENT));
+    });
   }
 
   reloadButton.addEventListener('click', handleReloadClick);

package/src/search/index.ts

@@ -1,15 +1,9 @@
 import { getElement, applyBasePath } from '../util';
 import { getPdfPageNumber, groupPdfResults } from './pdf-utils';
 import type { Result } from './pdf-utils';
-import {
-  getResponseValidators,
-  hasResponseValidatorsChanged,
-  type ResponseValidators,
-} from '../validators';
+import { PAGE_UPDATE_REFRESH_EVENT } from '../page-update';
 import { globals } from '../globals';
 
-const MAX_RESULTS = 24;
-
 interface PagefindSubResult {
   title?: string;
   url: string;
@@ -34,7 +28,9 @@ interface PagefindSearchResult {
 }
 
 interface Pagefind {
+  destroy(): Promise<void>;
   init(): Promise<void>;
+  options(options: { basePath: string }): Promise<void>;
   search(query: string): Promise<{ results: PagefindSearchResult[] }>;
 }
 
@@ -61,8 +57,7 @@ async function doSearch(query: string, window: Window): Promise<SearchState> {
   }
 
   const search = await pagefind.search(query);
-  const slice = search.results.slice(0, MAX_RESULTS);
-  const data = await Promise.all(slice.map(r => r.data()));
+  const data = await Promise.all(search.results.map(r => r.data()));
 
   const titlePostfix = __SITE_TITLE_POSTFIX__;
   const results: Result[] = data.map((d: PagefindResult) => {
@@ -139,9 +134,9 @@ function render(
   ol.tabIndex = -1;
   ol.setAttribute('aria-label', 'Search results');
 
-  const totalVisible = Math.min(state.results.length, MAX_RESULTS);
+  const totalVisible = state.results.length;
 
-  state.results.slice(0, MAX_RESULTS).forEach((result, i) => {
+  state.results.forEach((result, i) => {
     const a = doc.createElement('a');
     a.id = `result-${i}`;
     a.className = 'result';
@@ -175,7 +170,7 @@ function render(
     li.setAttribute('aria-labelledby', `title-${i}`);
     li.appendChild(a);
 
-    const subsToShow = result.subResults.slice(0, 5);
+    const subsToShow = result.subResults;
     if (subsToShow.length > 0) {
       const subList = doc.createElement('ul');
       subList.className = 'sub-results';
@@ -250,10 +245,8 @@ function render(
       countSpan.textContent = 'No results';
     } else if (n === 1) {
       countSpan.textContent = 'One result';
-    } else if (n <= MAX_RESULTS) {
-      countSpan.textContent = `${n} results`;
     } else {
-      countSpan.textContent = `Showing first ${MAX_RESULTS} results`;
+      countSpan.textContent = `${n} results`;
     }
   }
 
@@ -286,64 +279,56 @@ export default (window: Window) => {
   // Unhide (hidden via inline style in template to prevent FOUC)
   resultsDiv.style.display = '';
 
-  let entryValidators: ResponseValidators = { etag: null, lastModified: null };
-  let lastIndexCheck = 0;
-  let indexCheckInFlight = false;
-
-  async function loadPagefind() {
-    if (pagefind) {
-      return;
-    }
-
-    pagefind = (await globals.importModule(
-      applyBasePath('/pagefind/pagefind.js'),
-    )) as Pagefind;
-
-    await pagefind.init();
+  let pagefindLoadPromise: Promise<boolean> | null = null;
+  let pagefindLoadGeneration = 0;
 
-    const res = await globals.fetch(
-      applyBasePath('/pagefind/pagefind-entry.json'),
-      { cache: 'no-cache' },
-    );
-
-    if (res.ok) {
-      entryValidators = getResponseValidators(res);
+  function pagefindModulePath(generation: number) {
+    const path = applyBasePath('/pagefind/pagefind.js');
+    if (generation === 0) {
+      return path;
     }
+    return `${path}?tada-pagefind-refresh=${generation}`;
   }
 
-  async function checkForIndexUpdate() {
-    if (indexCheckInFlight || globals.now() - lastIndexCheck < 3000) {
-      return;
+  async function loadPagefind(): Promise<boolean> {
+    if (pagefind) {
+      return true;
     }
-    lastIndexCheck = globals.now();
-    indexCheckInFlight = true;
-    try {
-      const res = await globals.fetch(
-        applyBasePath('/pagefind/pagefind-entry.json'),
-        { method: 'HEAD', cache: 'no-cache' },
-      );
-      if (!res.ok) {
-        return;
+
+    const generation = pagefindLoadGeneration;
+    pagefindLoadPromise ??= (async () => {
+      const loadedPagefind = (await globals.importModule(
+        pagefindModulePath(generation),
+      )) as Pagefind;
+
+      if (generation !== pagefindLoadGeneration) {
+        return false;
+      }
+      if (generation > 0) {
+        await loadedPagefind.options({ basePath: applyBasePath('/pagefind/') });
       }
-      const newValidators = getResponseValidators(res);
-      if (hasResponseValidatorsChanged(entryValidators, newValidators)) {
-        invalidateUpdates();
-        pagefind = null;
-        await loadPagefind();
-        const updateId = ++latestUpdateId;
-        await update(updateId);
+      if (generation !== pagefindLoadGeneration) {
+        return false;
       }
-    } catch {
-      // best-effort
+      await loadedPagefind.init();
+      if (generation !== pagefindLoadGeneration) {
+        await loadedPagefind.destroy();
+        return false;
+      }
+      pagefind = loadedPagefind;
+      return true;
+    })();
+
+    const promise = pagefindLoadPromise;
+    try {
+      return await promise;
     } finally {
-      indexCheckInFlight = false;
+      if (pagefindLoadPromise === promise) {
+        pagefindLoadPromise = null;
+      }
     }
   }
 
-  loadPagefind().catch(err => {
-    console.log(`failed to load Pagefind: ${err}`);
-  });
-
   const state: State = {
     value: '',
     showResults: false,
@@ -362,10 +347,11 @@ export default (window: Window) => {
     if (updateId !== latestUpdateId) {
       return;
     }
-    if (nextState) {
-      state.results = nextState.results;
-      state.totalResults = nextState.totalResults;
+    if (!nextState) {
+      return;
     }
+    state.results = nextState.results;
+    state.totalResults = nextState.totalResults;
     if (!state.showResults) {
       return;
     }
@@ -381,6 +367,55 @@ export default (window: Window) => {
     latestUpdateId += 1;
   }
 
+  function loadPagefindAndUpdate() {
+    loadPagefind()
+      .then(loadedCurrentPagefind => {
+        if (loadedCurrentPagefind && state.showResults) {
+          queueUpdate();
+        }
+      })
+      .catch(err => {
+        console.log(`failed to load Pagefind: ${err}`);
+        if (state.showResults) {
+          render(input!, resultsContainer, state, false);
+        }
+      });
+  }
+
+  function invalidatePagefind() {
+    pagefindLoadGeneration += 1;
+    pagefind = null;
+    pagefindLoadPromise = null;
+    invalidateUpdates();
+  }
+
+  async function reloadPagefindAfterPageUpdateRefresh() {
+    const stalePagefind = pagefind;
+    invalidatePagefind();
+    if (state.showResults) {
+      render(input!, resultsContainer, state, true);
+    }
+    if (stalePagefind) {
+      try {
+        await stalePagefind.destroy();
+      } catch (err) {
+        console.log(`failed to destroy Pagefind: ${err}`);
+      }
+    }
+    loadPagefindAndUpdate();
+  }
+
+  function handlePageUpdateRefresh() {
+    reloadPagefindAfterPageUpdateRefresh().catch(err => {
+      console.log(`failed to reload Pagefind: ${err}`);
+      if (state.showResults) {
+        render(input!, resultsContainer, state, false);
+      }
+    });
+  }
+
+  loadPagefindAndUpdate();
+
   function hide() {
     if (!state.showResults) {
       return;
@@ -417,7 +452,6 @@ export default (window: Window) => {
     if (previous && !resultsContainer.contains(previous)) {
       previousFocus = previous;
     }
-    checkForIndexUpdate().catch(() => {});
     if (!state.showResults) {
       state.showResults = true;
       queueUpdate();
@@ -563,8 +597,13 @@ export default (window: Window) => {
   window.addEventListener('pointerdown', handleWindowPointerDown);
   window.addEventListener('pointermove', handleWindowPointerMove);
   window.addEventListener('keydown', handleWindowKeyDown);
+  window.addEventListener(PAGE_UPDATE_REFRESH_EVENT, handlePageUpdateRefresh);
 
   return () => {
+    window.removeEventListener(
+      PAGE_UPDATE_REFRESH_EVENT,
+      handlePageUpdateRefresh,
+    );
     window.removeEventListener('keydown', handleWindowKeyDown);
     window.removeEventListener('pointermove', handleWindowPointerMove);
     window.removeEventListener('pointerdown', handleWindowPointerDown);

package/src/top/index.ts

@@ -30,11 +30,12 @@ export default (window: Window) => {
   link.onclick = e => {
     e.preventDefault();
     const cleanUrl = window.location.pathname + window.location.search;
+    const historyState = window.history.state;
     if (window.location.hash) {
       globals.setLocationHash(window, '');
-      window.history.replaceState(null, '', cleanUrl);
+      window.history.replaceState(historyState, '', cleanUrl);
     } else {
-      window.history.replaceState(null, '', cleanUrl);
+      window.history.replaceState(historyState, '', cleanUrl);
     }
     window.scrollTo({ top: 0 });
     const toc = window.document.querySelector('nav.toc') as HTMLElement | null;