@abreen/tada 1.0.2 → 1.2.0

package/src/header/style.scss

@@ -1,45 +1,5 @@
-@import '../_mixins.scss';
-
-:root {
-  --header-collapsed-height: 45px;
-}
-
-header {
-  backdrop-filter: var(--backdrop-filter);
-  background: var(--bg-color-translucent);
-
-  width: 100%;
-  position: fixed;
-  top: 0;
-
-  z-index: 1000;
-
-  display: grid;
-  grid-template-columns: 1fr;
-
-  view-transition-name: site-header;
-}
-
-header details summary {
-  display: flex;
-  align-items: center;
-  height: var(--header-collapsed-height);
-  padding: 0;
-  list-style-type: none;
-  cursor: pointer;
-  position: relative;
-  container-type: inline-size;
-
-  @media (hover: hover) {
-    &:hover {
-      color: inherit;
-    }
-  }
-
-  &:focus-visible {
-    outline-offset: -2px;
-  }
-}
+@use '../mixins' as *;
+@use 'base';
 
 header nav {
   display: flex;
@@ -99,28 +59,6 @@ header nav div > p {
   padding-bottom: 2px;
 }
 
-header details summary::-webkit-details-marker {
-  display: none;
-}
-
-header details summary::marker {
-  content: '';
-}
-
-header summary::after {
-  order: -1;
-  height: 24px;
-  content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><polyline points='9 18 15 12 9 6' stroke='hsl(20deg 8% 8%)' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
-  margin-left: var(--gap);
-  margin-right: 8px;
-}
-
-@media (prefers-color-scheme: dark) {
-  header summary::after {
-    content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><polyline points='9 18 15 12 9 6' stroke='hsl(20deg 20% 90%)' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
-  }
-}
-
 @media (hover: hover) {
   header details summary:hover:not(:has(.results-container:hover)) {
     background: var(--bg2-color);
@@ -131,74 +69,8 @@ header summary::after {
   }
 }
 
-header details[open] summary::after {
-  transform: rotate(90deg);
-}
-
-header .content {
-  position: relative;
-}
-
-header summary .logo {
-  flex: 0 0 auto;
-  color: #fff;
-  background: var(--theme-color);
-  padding: 1px 6px;
-  margin: 0 8px 0 0;
-  font-size: var(--font-size-smaller);
-  font-weight: 600;
-  pointer-events: none;
-}
-
-header summary .site-title {
-  flex: 1 1 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  min-width: 0;
-  font-weight: 500;
-  pointer-events: none;
-  margin: 0 8px 0 0;
-}
-
-@container (max-width: 520px) {
-  header summary .site-title {
-    display: none;
-  }
-}
-
-header summary .to-top-container {
-  display: none;
-  align-items: center;
-  height: var(--header-collapsed-height);
-  pointer-events: none;
-  white-space: nowrap;
-
-  &:has(.is-visible) {
-    display: flex;
-    pointer-events: auto;
-  }
-}
-
-header summary .search-controls {
-  margin-left: auto;
-  pointer-events: auto;
-  display: flex;
-  align-items: center;
-  height: var(--header-collapsed-height);
-  padding: 0 var(--gap);
-  min-width: 0;
-
-  input.search {
-    width: 180px;
-
-    @container (max-width: 280px) {
-      display: none;
-    }
-  }
-}
-
 header .results-container {
+  display: block;
   position: absolute;
   top: var(--header-collapsed-height);
   left: 0;

package/src/index.ts

@@ -1,5 +1,4 @@
 import './style.scss';
-import './layout.scss';
 
 import './anchor/style.scss';
 import './code.scss';
@@ -19,7 +18,7 @@ import mountPrint from './print';
 import mountTop from './top';
 import mountAnchor from './anchor';
 import mountQuestion from './question';
-import mountTimezone from './timezone';
+import mountTimeZone from './timezone';
 import mountCode from './code';
 
 import { scheduleTask, formatDuration } from './util';
@@ -32,7 +31,7 @@ const COMPONENTS = {
   top: mountTop,
   anchor: mountAnchor,
   question: mountQuestion,
-  timezone: mountTimezone,
+  timeZone: mountTimeZone,
   code: mountCode,
 };
 
@@ -43,7 +42,7 @@ document.addEventListener('DOMContentLoaded', async () => {
 
   const entries = Object.entries(COMPONENTS);
 
-  const failed: Record<string, any> = {};
+  const failed: Record<string, string> = {};
 
   const mountPromises = entries.map(([name, mount]) => {
     return new Promise<void>((resolve, reject) => {
@@ -66,7 +65,7 @@ document.addEventListener('DOMContentLoaded', async () => {
     console.error(`Failed to mount ${name} component:`, reason);
   }
 
-  if (window.IS_DEV) {
+  if (__IS_DEV__) {
     const diff = window.performance.now() - startTime;
     console.info(`Components mounted in ${formatDuration(diff)}`);
   }

package/src/question/style.scss

@@ -1,4 +1,4 @@
-@import '../_mixins.scss';
+@use '../mixins' as *;
 
 .question {
   margin-bottom: 2rem;

package/src/search/index.test.ts

@@ -0,0 +1,203 @@
+import { describe, expect, test } from 'bun:test';
+import { getPdfPageNumber, getPdfBaseUrl, groupPdfResults } from './pdf-utils';
+import type { Result } from './pdf-utils';
+
+describe('getPdfPageNumber', () => {
+  test('returns page number from meta string', () => {
+    expect(getPdfPageNumber('/doc.pdf#page=3', '3')).toBe(3);
+  });
+
+  test('prefers meta over URL hash', () => {
+    expect(getPdfPageNumber('/doc.pdf#page=5', '2')).toBe(2);
+  });
+
+  test('falls back to URL hash when meta is undefined', () => {
+    expect(getPdfPageNumber('/doc.pdf#page=7', undefined)).toBe(7);
+  });
+
+  test('falls back to URL hash when meta is empty', () => {
+    expect(getPdfPageNumber('/doc.pdf#page=4', '')).toBe(4);
+  });
+
+  test('falls back to URL hash when meta is not a number', () => {
+    expect(getPdfPageNumber('/doc.pdf#page=4', 'abc')).toBe(4);
+  });
+
+  test('returns null when neither meta nor hash has a page', () => {
+    expect(getPdfPageNumber('/doc.pdf', undefined)).toBeNull();
+  });
+
+  test('returns null for non-positive meta page number', () => {
+    expect(getPdfPageNumber('/doc.pdf', '0')).toBeNull();
+  });
+
+  test('returns null for negative meta page number', () => {
+    expect(getPdfPageNumber('/doc.pdf', '-1')).toBeNull();
+  });
+
+  test('returns null for hash page=0', () => {
+    expect(getPdfPageNumber('/doc.pdf#page=0', undefined)).toBeNull();
+  });
+
+  test('parses page from hash with other params', () => {
+    expect(getPdfPageNumber('/doc.pdf#zoom=100&page=12', undefined)).toBe(12);
+  });
+
+  test('handles case-insensitive page hash', () => {
+    expect(getPdfPageNumber('/doc.pdf#Page=9', undefined)).toBe(9);
+  });
+});
+
+describe('getPdfBaseUrl', () => {
+  test('returns base URL for a PDF with hash', () => {
+    expect(getPdfBaseUrl('/docs/guide.pdf#page=3')).toBe('/docs/guide.pdf');
+  });
+
+  test('returns URL unchanged when no hash present', () => {
+    expect(getPdfBaseUrl('/docs/guide.pdf')).toBe('/docs/guide.pdf');
+  });
+
+  test('returns null for non-PDF URL', () => {
+    expect(getPdfBaseUrl('/about/')).toBeNull();
+  });
+
+  test('returns null for non-PDF URL with hash', () => {
+    expect(getPdfBaseUrl('/about/#section')).toBeNull();
+  });
+
+  test('handles .PDF extension case-insensitively', () => {
+    expect(getPdfBaseUrl('/docs/GUIDE.PDF#page=1')).toBe('/docs/GUIDE.PDF');
+  });
+});
+
+describe('groupPdfResults', () => {
+  function makeResult(overrides: Partial<Result>): Result {
+    return {
+      title: 'doc.pdf',
+      url: '/doc.pdf',
+      excerpt: '',
+      score: 1,
+      subResults: [],
+      pageNumber: null,
+      ...overrides,
+    };
+  }
+
+  test('passes through non-PDF results unchanged', () => {
+    const results: Result[] = [
+      makeResult({ title: 'About', url: '/about/', score: 5 }),
+      makeResult({ title: 'Home', url: '/', score: 3 }),
+    ];
+    const grouped = groupPdfResults(results);
+    expect(grouped).toEqual(results);
+  });
+
+  test('groups multiple PDF page results into one result with sub-results', () => {
+    const results: Result[] = [
+      makeResult({
+        url: '/doc.pdf#page=3',
+        score: 10,
+        pageNumber: 3,
+        excerpt: 'page 3 text',
+      }),
+      makeResult({
+        url: '/doc.pdf#page=1',
+        score: 5,
+        pageNumber: 1,
+        excerpt: 'page 1 text',
+      }),
+    ];
+    const grouped = groupPdfResults(results);
+    expect(grouped).toHaveLength(1);
+    expect(grouped[0].url).toBe('/doc.pdf');
+    expect(grouped[0].score).toBe(10);
+    expect(grouped[0].subResults).toEqual([
+      { title: 'Page 1', url: '/doc.pdf#page=1', excerpt: 'page 1 text' },
+      { title: 'Page 3', url: '/doc.pdf#page=3', excerpt: 'page 3 text' },
+    ]);
+  });
+
+  test('sub-results are sorted by page number', () => {
+    const results: Result[] = [
+      makeResult({ url: '/doc.pdf#page=5', score: 1, pageNumber: 5 }),
+      makeResult({ url: '/doc.pdf#page=2', score: 8, pageNumber: 2 }),
+      makeResult({ url: '/doc.pdf#page=9', score: 3, pageNumber: 9 }),
+    ];
+    const grouped = groupPdfResults(results);
+    expect(grouped[0].subResults.map(s => s.title)).toEqual([
+      'Page 2',
+      'Page 5',
+      'Page 9',
+    ]);
+  });
+
+  test('primary result uses highest-scoring page', () => {
+    const results: Result[] = [
+      makeResult({
+        url: '/doc.pdf#page=1',
+        score: 2,
+        pageNumber: 1,
+        excerpt: 'low',
+      }),
+      makeResult({
+        url: '/doc.pdf#page=4',
+        score: 9,
+        pageNumber: 4,
+        excerpt: 'high',
+      }),
+    ];
+    const grouped = groupPdfResults(results);
+    expect(grouped[0].excerpt).toBe('high');
+    expect(grouped[0].score).toBe(9);
+  });
+
+  test('mixes non-PDF and grouped PDF results sorted by score', () => {
+    const results: Result[] = [
+      makeResult({
+        title: 'About',
+        url: '/about/',
+        score: 7,
+        pageNumber: null,
+      }),
+      makeResult({ url: '/doc.pdf#page=1', score: 10, pageNumber: 1 }),
+      makeResult({ url: '/doc.pdf#page=2', score: 3, pageNumber: 2 }),
+    ];
+    const grouped = groupPdfResults(results);
+    expect(grouped).toHaveLength(2);
+    expect(grouped[0].url).toBe('/doc.pdf');
+    expect(grouped[0].score).toBe(10);
+    expect(grouped[1].url).toBe('/about/');
+    expect(grouped[1].score).toBe(7);
+  });
+
+  test('does not group PDF result without a page number', () => {
+    const results: Result[] = [
+      makeResult({ url: '/doc.pdf', score: 5, pageNumber: null }),
+    ];
+    const grouped = groupPdfResults(results);
+    expect(grouped).toHaveLength(1);
+    expect(grouped[0].url).toBe('/doc.pdf');
+    expect(grouped[0].subResults).toEqual([]);
+  });
+
+  test('groups results from different PDFs separately', () => {
+    const results: Result[] = [
+      makeResult({
+        title: 'a.pdf',
+        url: '/a.pdf#page=1',
+        score: 5,
+        pageNumber: 1,
+      }),
+      makeResult({
+        title: 'b.pdf',
+        url: '/b.pdf#page=1',
+        score: 8,
+        pageNumber: 1,
+      }),
+    ];
+    const grouped = groupPdfResults(results);
+    expect(grouped).toHaveLength(2);
+    const urls = grouped.map(r => r.url).sort();
+    expect(urls).toEqual(['/a.pdf', '/b.pdf']);
+  });
+});

package/src/search/index.ts

@@ -1,96 +1,42 @@
 import { getElement, applyBasePath } from '../util';
+import { getPdfPageNumber, groupPdfResults } from './pdf-utils';
+import type { Result } from './pdf-utils';
 
 const MAX_RESULTS = 24;
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-let pagefind: any = null;
+interface PagefindSubResult {
+  title?: string;
+  url: string;
+  excerpt?: string;
+}
 
-type SubResult = { title: string; url: string; excerpt: string };
-type Result = {
-  title: string;
+interface PagefindResult {
+  meta?: { title?: string; page?: string };
   url: string;
-  excerpt: string;
+  excerpt?: string;
   score: number;
-  subResults: SubResult[];
-  pageNumber: number | null;
-};
-
-type State = {
-  value: string;
-  showResults: boolean;
-  results: Result[];
-  totalResults: number;
-};
-
-function getPdfPageNumber(
-  url: string,
-  pageMeta: string | undefined,
-): number | null {
-  const fromMeta = Number.parseInt(pageMeta ?? '', 10);
-  if (Number.isInteger(fromMeta) && fromMeta > 0) {
-    return fromMeta;
-  }
-  const match = url.match(/#(?:.*&)?page=(\d+)\b/i);
-  if (!match) {
-    return null;
-  }
-  const fromUrl = Number.parseInt(match[1], 10);
-  return Number.isInteger(fromUrl) && fromUrl >= 1 ? fromUrl : null;
+  sub_results?: PagefindSubResult[];
 }
 
-function getPdfBaseUrl(url: string): string | null {
-  const hashIndex = url.indexOf('#');
-  const baseUrl = hashIndex >= 0 ? url.slice(0, hashIndex) : url;
-  return baseUrl.toLowerCase().endsWith('.pdf') ? baseUrl : null;
+interface PagefindSearchResult {
+  data(): Promise<PagefindResult>;
 }
 
-function groupPdfResults(results: Result[]): Result[] {
-  const pdfGroups = new Map<string, Result[]>();
-  const other: Result[] = [];
-
-  for (const result of results) {
-    const baseUrl = getPdfBaseUrl(result.url);
-    if (!baseUrl || result.pageNumber == null) {
-      other.push(result);
-      continue;
-    }
-    if (!pdfGroups.has(baseUrl)) {
-      pdfGroups.set(baseUrl, []);
-    }
-    pdfGroups.get(baseUrl)!.push(result);
-  }
+interface Pagefind {
+  init(): Promise<void>;
+  search(query: string): Promise<{ results: PagefindSearchResult[] }>;
+}
 
-  const grouped: Result[] = [...other];
-
-  pdfGroups.forEach((pages, baseUrl) => {
-    const primary = pages
-      .slice()
-      .sort(
-        (a, b) =>
-          b.score - a.score || (a.pageNumber ?? 0) - (b.pageNumber ?? 0),
-      )[0];
-    const subResults = pages
-      .slice()
-      .sort((a, b) => (a.pageNumber ?? 0) - (b.pageNumber ?? 0))
-      .map(page => ({
-        title: `Page ${page.pageNumber ?? '?'}`,
-        url: page.url,
-        excerpt: page.excerpt,
-      }));
+let pagefind: Pagefind | null = null;
 
-    grouped.push({
-      title: primary.title,
-      url: baseUrl,
-      excerpt: primary.excerpt,
-      score: primary.score,
-      subResults,
-      pageNumber: null,
-    });
-  });
+type SubResult = { title: string; url: string; excerpt: string };
 
-  grouped.sort((a, b) => b.score - a.score);
-  return grouped;
-}
+type State = {
+  value: string;
+  showResults: boolean;
+  results: Result[];
+  totalResults: number;
+};
 
 async function doSearch(state: State) {
   if (pagefind == null) {
@@ -105,27 +51,23 @@ async function doSearch(state: State) {
 
   const search = await pagefind.search(state.value);
   const slice = search.results.slice(0, MAX_RESULTS);
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const data = await Promise.all(slice.map((r: any) => r.data()));
+  const data = await Promise.all(slice.map(r => r.data()));
 
-  const titlePostfix = window.siteVariables.titlePostfix ?? '';
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const results: Result[] = data.map((d: any) => {
+  const titlePostfix = __SITE_TITLE_POSTFIX__;
+  const results: Result[] = data.map((d: PagefindResult) => {
     let title: string = d.meta?.title ?? d.url;
     if (titlePostfix && title.endsWith(titlePostfix)) {
       title = title.slice(0, -titlePostfix.length);
     }
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const subResults: SubResult[] = (d.sub_results ?? [])
-      .filter((s: any) => {
+      .filter((s: PagefindSubResult) => {
         try {
           return new URL(s.url, window.location.href).hash !== '';
         } catch {
           return s.url !== d.url;
         }
       })
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      .map((s: any) => ({
+      .map((s: PagefindSubResult) => ({
         title: s.title ?? '',
         url: s.url,
         excerpt: s.excerpt ?? '',
@@ -133,7 +75,7 @@ async function doSearch(state: State) {
     return {
       title,
       url: d.url,
-      excerpt: d.excerpt,
+      excerpt: d.excerpt ?? '',
       score: d.score ?? 0,
       subResults,
       pageNumber: getPdfPageNumber(d.url, d.meta?.page),
@@ -324,14 +266,17 @@ export default (window: Window) => {
     if (pagefind) {
       return;
     }
-    // @ts-ignore pagefind.js is generated post-build, not resolvable at compile time
-    pagefind = await import(
-      /* webpackIgnore: true */ applyBasePath('/pagefind/pagefind.js')
-    );
+
+    pagefind = (await import(
+      applyBasePath('/pagefind/pagefind.js')
+    )) as Pagefind;
+
     await pagefind.init();
+
     const res = await fetch(applyBasePath('/pagefind/pagefind-entry.json'), {
       cache: 'no-cache',
     });
+
     if (res.ok) {
       entryETag = res.headers.get('ETag');
       entryLastModified = res.headers.get('Last-Modified');

package/src/search/pdf-utils.ts

@@ -0,0 +1,79 @@
+export type SubResult = { title: string; url: string; excerpt: string };
+export type Result = {
+  title: string;
+  url: string;
+  excerpt: string;
+  score: number;
+  subResults: SubResult[];
+  pageNumber: number | null;
+};
+
+export function getPdfPageNumber(
+  url: string,
+  pageMeta: string | undefined,
+): number | null {
+  const fromMeta = Number.parseInt(pageMeta ?? '', 10);
+  if (Number.isInteger(fromMeta) && fromMeta > 0) {
+    return fromMeta;
+  }
+  const match = url.match(/#(?:.*&)?page=(\d+)\b/i);
+  if (!match) {
+    return null;
+  }
+  const fromUrl = Number.parseInt(match[1], 10);
+  return Number.isInteger(fromUrl) && fromUrl >= 1 ? fromUrl : null;
+}
+
+export function getPdfBaseUrl(url: string): string | null {
+  const hashIndex = url.indexOf('#');
+  const baseUrl = hashIndex >= 0 ? url.slice(0, hashIndex) : url;
+  return baseUrl.toLowerCase().endsWith('.pdf') ? baseUrl : null;
+}
+
+export function groupPdfResults(results: Result[]): Result[] {
+  const pdfGroups = new Map<string, Result[]>();
+  const other: Result[] = [];
+
+  for (const result of results) {
+    const baseUrl = getPdfBaseUrl(result.url);
+    if (!baseUrl || result.pageNumber == null) {
+      other.push(result);
+      continue;
+    }
+    if (!pdfGroups.has(baseUrl)) {
+      pdfGroups.set(baseUrl, []);
+    }
+    pdfGroups.get(baseUrl)!.push(result);
+  }
+
+  const grouped: Result[] = [...other];
+
+  pdfGroups.forEach((pages, baseUrl) => {
+    const primary = pages
+      .slice()
+      .sort(
+        (a, b) =>
+          b.score - a.score || (a.pageNumber ?? 0) - (b.pageNumber ?? 0),
+      )[0];
+    const subResults = pages
+      .slice()
+      .sort((a, b) => (a.pageNumber ?? 0) - (b.pageNumber ?? 0))
+      .map(page => ({
+        title: `Page ${page.pageNumber ?? '?'}`,
+        url: page.url,
+        excerpt: page.excerpt,
+      }));
+
+    grouped.push({
+      title: primary.title,
+      url: baseUrl,
+      excerpt: primary.excerpt,
+      score: primary.score,
+      subResults,
+      pageNumber: null,
+    });
+  });
+
+  grouped.sort((a, b) => b.score - a.score);
+  return grouped;
+}