@abreen/tada 1.4.1 → 1.5.1

package/src/header/_base.scss

@@ -22,7 +22,7 @@ header details summary {
   display: flex;
   align-items: center;
   height: var(--header-collapsed-height);
-  padding: 0;
+  padding: 0 200px 0 0;
   list-style-type: none;
   cursor: pointer;
   position: relative;
@@ -39,6 +39,10 @@ header details summary {
   }
 }
 
+header:has(.to-top-container .is-visible) details summary {
+  padding-right: 320px;
+}
+
 header details summary::-webkit-details-marker {
   display: none;
 }
@@ -85,13 +89,24 @@ header summary .site-title {
   margin: 0 8px 0 0;
 }
 
-@container (max-width: 520px) {
+@container (max-width: 200px) {
   header summary .site-title {
     display: none;
   }
 }
 
-header summary .to-top-container {
+header > .header-controls {
+  position: absolute;
+  top: 0;
+  right: 0;
+  display: flex;
+  align-items: center;
+  height: var(--header-collapsed-height);
+  padding: 0 var(--gap) 0 0;
+  z-index: 1;
+}
+
+header .to-top-container {
   display: none;
   align-items: center;
   height: var(--header-collapsed-height);
@@ -111,20 +126,44 @@ header .results-container {
   display: none;
 }
 
-header summary .search-controls {
-  margin-left: auto;
-  pointer-events: auto;
+header .search-controls {
   display: flex;
   align-items: center;
   height: var(--header-collapsed-height);
-  padding: 0 var(--gap) 0 0;
-  min-width: 0;
 
   input.search {
     width: 180px;
 
-    @container (max-width: 280px) {
+    @media (max-width: 400px) {
       display: none;
     }
   }
 }
+
+@keyframes shimmer {
+  0%,
+  15% {
+    background-position: 200% 0;
+  }
+  100% {
+    background-position: -200% 0;
+  }
+}
+
+header.loading::after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 3px;
+  background-image: linear-gradient(
+    90deg,
+    transparent 25%,
+    var(--theme-color) 50%,
+    transparent 75%
+  );
+  background-size: 200% 100%;
+  background-repeat: no-repeat;
+  animation: shimmer 3s ease-in-out infinite;
+}

package/src/header/index.test.ts

@@ -0,0 +1,89 @@
+import { describe, expect, test } from 'bun:test';
+import { JSDOM } from 'jsdom';
+import mount from './index';
+
+function create(open = false) {
+  const dom = new JSDOM(
+    `<body><header><details${open ? ' open' : ''}><summary>Menu</summary><nav>Links</nav></details></header></body>`,
+  );
+  return dom.window;
+}
+
+describe('header', () => {
+  test('closes open details on outside click', () => {
+    const win = create(true);
+    mount(win);
+
+    const details = win.document.querySelector('details') as HTMLDetailsElement;
+    expect(details.open).toBe(true);
+
+    win.document.body.dispatchEvent(
+      new win.MouseEvent('click', { bubbles: true }),
+    );
+    expect(details.open).toBe(false);
+  });
+
+  test('does not close details when clicking inside', () => {
+    const win = create(true);
+    mount(win);
+
+    const details = win.document.querySelector('details') as HTMLDetailsElement;
+    details.dispatchEvent(new win.MouseEvent('click', { bubbles: false }));
+    expect(details.open).toBe(true);
+  });
+
+  test('closes on Escape key when details is open', () => {
+    const win = create(true);
+    mount(win);
+
+    const details = win.document.querySelector('details') as HTMLDetailsElement;
+    const summary = win.document.querySelector('summary')!;
+
+    // Focus the summary so activeElement is inside details
+    summary.focus();
+
+    win.dispatchEvent(
+      new win.KeyboardEvent('keydown', { key: 'Escape', bubbles: true }),
+    );
+    expect(details.open).toBe(false);
+  });
+
+  test('ignores Escape when details is closed', () => {
+    const win = create(false);
+    mount(win);
+
+    const details = win.document.querySelector('details') as HTMLDetailsElement;
+    win.dispatchEvent(
+      new win.KeyboardEvent('keydown', { key: 'Escape', bubbles: true }),
+    );
+    expect(details.open).toBe(false);
+  });
+
+  test('ignores other keys', () => {
+    const win = create(true);
+    mount(win);
+
+    const details = win.document.querySelector('details') as HTMLDetailsElement;
+    const summary = win.document.querySelector('summary')!;
+    summary.focus();
+
+    win.dispatchEvent(
+      new win.KeyboardEvent('keydown', { key: 'Tab', bubbles: true }),
+    );
+    expect(details.open).toBe(true);
+  });
+
+  test('cleanup removes event listeners', () => {
+    const win = create(true);
+    const cleanup = mount(win);
+
+    cleanup!();
+
+    win.document.body.dispatchEvent(
+      new win.MouseEvent('click', { bubbles: true }),
+    );
+
+    const details = win.document.querySelector('details') as HTMLDetailsElement;
+    expect(details.open).toBe(true);
+  });
+});

package/src/header/index.ts

@@ -27,7 +27,7 @@ export default (window: Window) => {
     if (
       e.key === 'Escape' &&
       details.open &&
-      details.contains(document.activeElement)
+      details.contains(window.document.activeElement)
     ) {
       close();
       summary.focus();

package/src/header/style.scss

@@ -60,7 +60,7 @@ header nav div > p {
 }
 
 @media (hover: hover) {
-  header details summary:hover:not(:has(.results-container:hover)) {
+  header details summary:hover {
     background: var(--bg2-color);
   }
 
@@ -81,10 +81,6 @@ header .results-container {
   padding: var(--gap);
   pointer-events: none;
   z-index: 1000;
-
-  @container (max-width: 260px) {
-    display: none;
-  }
 }
 
 header ol {

package/src/index.ts

@@ -10,29 +10,25 @@ import './question/style.scss';
 import './search/style.scss';
 import './timezone/style.scss';
 import './toc/style.scss';
+import './trace/style.scss';
+import './navigate/style.scss';
 
-import mountTableOfContents from './toc';
 import mountSearch from './search';
 import mountHeader from './header';
-import mountPrint from './print';
 import mountTop from './top';
-import mountAnchor from './anchor';
-import mountQuestion from './question';
-import mountTimeZone from './timezone';
-import mountCode from './code';
+import mountNavigate from './navigate';
+import { mountPerPageComponents } from './navigate/lifecycle';
 
 import { scheduleTask, formatDuration } from './util';
 
-const COMPONENTS = {
-  toc: mountTableOfContents,
-  search: mountSearch,
+const PERSISTENT_COMPONENTS: Record<
+  string,
+  (w: Window) => void | (() => void)
+> = {
   header: mountHeader,
-  print: mountPrint,
+  search: mountSearch,
   top: mountTop,
-  anchor: mountAnchor,
-  question: mountQuestion,
-  timeZone: mountTimeZone,
-  code: mountCode,
+  navigate: mountNavigate,
 };
 
 let startTime = -1;
@@ -40,26 +36,28 @@ let startTime = -1;
 document.addEventListener('DOMContentLoaded', async () => {
   startTime = window.performance.now();
 
-  const entries = Object.entries(COMPONENTS);
-
   const failed: Record<string, string> = {};
 
-  const mountPromises = entries.map(([name, mount]) => {
+  // Mount persistent components
+  const persistentEntries = Object.entries(PERSISTENT_COMPONENTS);
+  const persistentPromises = persistentEntries.map(([name, mount]) => {
     return new Promise<void>((resolve, reject) => {
       scheduleTask(async () => {
         try {
           mount(window);
           resolve();
-          return;
         } catch (err) {
           failed[name] = String(err);
+          reject();
         }
-        reject();
       });
     });
   });
 
-  await Promise.allSettled(mountPromises);
+  await Promise.allSettled(persistentPromises);
+
+  // Mount per-page components
+  await mountPerPageComponents(window);
 
   for (const [name, reason] of Object.entries(failed)) {
     console.error(`Failed to mount ${name} component:`, reason);

package/src/literate/style.scss

@@ -1,3 +1,7 @@
+body.literate {
+  --code-gutter-width: 4rem;
+}
+
 body.literate .body pre:has(.code-row) {
   background: var(--bg2-color);
   border-radius: var(--mono-border-radius);
@@ -11,13 +15,17 @@ body.literate .body pre:has(.code-row) {
     padding-right: var(--gap);
   }
 
-  .code-row {
-    &:first-child {
-      padding-top: var(--gap);
+  *:first-child {
+    .line-number,
+    code {
+      padding-top: 0.5rem;
     }
+  }
 
-    &:last-child {
-      padding-bottom: var(--gap);
+  *:last-child {
+    .line-number,
+    code {
+      padding-bottom: 0.5rem;
     }
   }
 }
@@ -36,7 +44,7 @@ body.literate .literate-code-output {
     white-space: pre-wrap;
   }
 
-  @media (max-width: 899px) {
+  @media (width < 924px) {
     > pre:first-child {
       margin-bottom: 0;
     }
@@ -50,7 +58,7 @@ body.literate .literate-code-output {
     }
   }
 
-  @media (min-width: 900px) {
+  @media (width >= 924px) {
     grid-template-columns: 1fr 1fr;
 
     > pre:last-child {

package/src/navigate/eligible.test.ts

@@ -0,0 +1,101 @@
+import { describe, expect, test } from 'bun:test';
+import { isEligibleLink } from './eligible';
+
+describe('isEligibleLink', () => {
+  const origin = 'http://localhost';
+  const basePath = '/';
+
+  test('eligible: same-origin absolute path', () => {
+    expect(
+      isEligibleLink('http://localhost/about.html', origin, basePath),
+    ).toBe(true);
+  });
+
+  test('eligible: path without extension', () => {
+    expect(isEligibleLink('http://localhost/about', origin, basePath)).toBe(
+      true,
+    );
+  });
+
+  test('eligible: path ending in .html', () => {
+    expect(isEligibleLink('http://localhost/page.html', origin, basePath)).toBe(
+      true,
+    );
+  });
+
+  test('eligible: root path', () => {
+    expect(isEligibleLink('http://localhost/', origin, basePath)).toBe(true);
+  });
+
+  test('eligible: path with hash', () => {
+    expect(
+      isEligibleLink('http://localhost/page.html#section', origin, basePath),
+    ).toBe(true);
+  });
+
+  test('ineligible: different origin', () => {
+    expect(
+      isEligibleLink('https://example.com/page.html', origin, basePath),
+    ).toBe(false);
+  });
+
+  test('ineligible: PDF file', () => {
+    expect(isEligibleLink('http://localhost/doc.pdf', origin, basePath)).toBe(
+      false,
+    );
+  });
+
+  test('ineligible: Java file', () => {
+    expect(isEligibleLink('http://localhost/Main.java', origin, basePath)).toBe(
+      false,
+    );
+  });
+
+  test('ineligible: Python file', () => {
+    expect(isEligibleLink('http://localhost/script.py', origin, basePath)).toBe(
+      false,
+    );
+  });
+
+  test('ineligible: PNG image', () => {
+    expect(isEligibleLink('http://localhost/image.png', origin, basePath)).toBe(
+      false,
+    );
+  });
+
+  test('ineligible: ZIP file', () => {
+    expect(
+      isEligibleLink('http://localhost/archive.zip', origin, basePath),
+    ).toBe(false);
+  });
+
+  test('ineligible: JPG image', () => {
+    expect(isEligibleLink('http://localhost/photo.jpg', origin, basePath)).toBe(
+      false,
+    );
+  });
+
+  test('ineligible: JSON file', () => {
+    expect(isEligibleLink('http://localhost/data.json', origin, basePath)).toBe(
+      false,
+    );
+  });
+
+  test('eligible: link under non-root base path', () => {
+    expect(
+      isEligibleLink('http://localhost/course1/page.html', origin, '/course1/'),
+    ).toBe(true);
+  });
+
+  test('ineligible: link outside base path', () => {
+    expect(
+      isEligibleLink('http://localhost/course2/page.html', origin, '/course1/'),
+    ).toBe(false);
+  });
+
+  test('ineligible: link to root when base path is subdir', () => {
+    expect(isEligibleLink('http://localhost/', origin, '/course1/')).toBe(
+      false,
+    );
+  });
+});

package/src/navigate/eligible.ts

@@ -0,0 +1,62 @@
+const NON_HTML_EXTENSIONS = new Set([
+  '.pdf',
+  '.java',
+  '.py',
+  '.png',
+  '.jpg',
+  '.jpeg',
+  '.gif',
+  '.svg',
+  '.zip',
+  '.tar',
+  '.gz',
+  '.json',
+  '.xml',
+  '.css',
+  '.js',
+  '.ts',
+  '.c',
+  '.h',
+  '.cpp',
+  '.rb',
+  '.go',
+  '.rs',
+  '.txt',
+  '.csv',
+  '.ico',
+  '.woff2',
+  '.mp4',
+  '.mp3',
+]);
+
+export function isEligibleLink(
+  href: string,
+  origin: string,
+  basePath: string,
+): boolean {
+  let url: URL;
+  try {
+    url = new URL(href);
+  } catch {
+    return false;
+  }
+
+  if (url.origin !== origin) {
+    return false;
+  }
+
+  if (!url.pathname.startsWith(basePath)) {
+    return false;
+  }
+
+  const path = url.pathname;
+  const dotIndex = path.lastIndexOf('.');
+  if (dotIndex !== -1) {
+    const ext = path.slice(dotIndex).toLowerCase();
+    if (NON_HTML_EXTENSIONS.has(ext)) {
+      return false;
+    }
+  }
+
+  return true;
+}

package/src/navigate/index.test.ts

@@ -0,0 +1,82 @@
+import { describe, expect, test, beforeEach, mock } from 'bun:test';
+import { JSDOM } from 'jsdom';
+
+// Mock the lifecycle module so we can track calls
+const mockTeardown = mock(() => {});
+const mockMount = mock(async () => mockTeardown);
+mock.module('./lifecycle', () => ({
+  mountPerPageComponents: mockMount,
+  teardownPerPageComponents: mockTeardown,
+}));
+
+import mount from './index';
+
+function createDOM(bodyContent = '') {
+  const html = `<html><head><title>Page One</title><meta name="description" content="desc one"></head><body class="default toc-is-active"><header><details><summary>Menu</summary><nav></nav></details></header><div class="container">${bodyContent}</div></body></html>`;
+  const dom = new JSDOM(html, {
+    url: 'http://localhost/',
+    pretendToBeVisual: true,
+  });
+  return dom.window;
+}
+
+describe('navigate', () => {
+  beforeEach(() => {
+    mockTeardown.mockClear();
+    mockMount.mockClear();
+  });
+
+  test('mount returns a cleanup function', () => {
+    const win = createDOM();
+    const cleanup = mount(win);
+    expect(typeof cleanup).toBe('function');
+  });
+
+  test('cleanup removes event listeners without throwing', () => {
+    const win = createDOM();
+    const cleanup = mount(win);
+    cleanup!();
+  });
+
+  test('ignores clicks with modifier keys', () => {
+    const win = createDOM('<a href="http://localhost/other.html">Link</a>');
+    mount(win);
+
+    const link = win.document.querySelector('a')!;
+    const event = new win.MouseEvent('click', { bubbles: true, ctrlKey: true });
+    const prevented = !link.dispatchEvent(event);
+    expect(prevented).toBe(false);
+  });
+
+  test('ignores links with target attribute', () => {
+    const win = createDOM(
+      '<a href="http://localhost/other.html" target="_blank">Link</a>',
+    );
+    mount(win);
+
+    const link = win.document.querySelector('a')!;
+    const event = new win.MouseEvent('click', { bubbles: true });
+    const prevented = !link.dispatchEvent(event);
+    expect(prevented).toBe(false);
+  });
+
+  test('ignores external links', () => {
+    const win = createDOM('<a href="https://example.com/page">Link</a>');
+    mount(win);
+
+    const link = win.document.querySelector('a')!;
+    const event = new win.MouseEvent('click', { bubbles: true });
+    const prevented = !link.dispatchEvent(event);
+    expect(prevented).toBe(false);
+  });
+
+  test('ignores non-HTML resource links', () => {
+    const win = createDOM('<a href="http://localhost/file.pdf">PDF</a>');
+    mount(win);
+
+    const link = win.document.querySelector('a')!;
+    const event = new win.MouseEvent('click', { bubbles: true });
+    const prevented = !link.dispatchEvent(event);
+    expect(prevented).toBe(false);
+  });
+});