@abreen/tada 1.11.2 → 1.13.2

package/init/content/labs/02/index.md

@@ -0,0 +1,61 @@
+---
+parent: ../index.html
+parentLabel: Labs
+title: Lab 2
+author: alex
+description: A page demonstrating slides mode.
+slides: true
+---
+
+## Selection sort
+
+Selection sort is a well-known comparison-based sorting algorithm.
+
+- Divides the array into a sorted left part and an unsorted right part
+- Repeatedly scans left-to-right, looking for the smallest element
+- Swaps the smallest in the right part into correct position in the left part
+
+---
+
+<%= renderTrace('selection_sort.py') %>
+
+---
+
+## Impressions
+
+Selection sort's strength is its simplicity.
+
+- `index_smallest()` always scans from `start` to the end
+- It requires no additional memory (other than local variables)
+
+However
+
+- It has no `break` statements & can't return early
+- No difference between best, average and worst cases
+
+---
+
+## Performance
+
+- The outer loop always performs $n - 1$ iterations
+- There are always $n - 1$ swaps
+- At each value of `i`, `index_smallest()` iterates from `i + 1` to the end
+
+---
+
+## Comparisons
+
+The innermost statement compares `nums[i]` and `nums[curr]`.
+
+- when `i` is 0, the comparison is executed $n - 1$ times
+- when `i` is 1, the innermost statement is executed $n - 2$ times
+- $\dots$
+- when `i` is $n - 3$, the innermost statement is executed two times
+- when `i` is $n - 2$, the innermost statement is executed one time
+
+Therefore the total number of comparisons is
+
+$$
+(n-1) + (n-2) + \dots + 1 = \sum_{i=1}^{n-1}i
+$$
+

package/init/content/labs/02/selection_sort.py

@@ -0,0 +1,23 @@
+def swap(items, i, j):
+    temp = items[i]
+    items[i] = items[j]
+    items[j] = temp
+
+
+def index_smallest(nums, start):
+    curr = start
+    for i in range(start + 1, len(nums)):
+        if nums[i] < nums[curr]:
+            curr = i
+
+    return curr
+
+
+def selection(nums):
+    for i in range(len(nums) - 1):
+        swap(nums, i, index_smallest(nums, i))
+
+
+input1 = [4, 9, 2, 10, 19, 5, 7]
+selection(input1)
+print(input1)

package/init/content/labs/index.md

@@ -8,6 +8,8 @@ In each one-hour lab, we'll dive deeper and write code together, exploring how
 to apply the concepts we learned in lecture to solve real-world problems and
 write full-length programs.
 
-0. [`VowelCounter` and user input](/labs/00/index.html)
+0. [`VowelCounter` and user input](00/index.html)
 
-1. [Memory diagrams](/labs/01/index.html)
+1. [Memory diagrams](01/index.html)
+
+2. [Slides mode demo](02/index.html)

package/init/content/lectures/01/index.md

@@ -10,7 +10,7 @@ Here is a sample description of the topics covered at the first lecture.
 
 The value of `vars.foobar` is <%= vars.foobar %>.
 
-You can add any variables you want to the `site.dev.json` and `site.prod.json`
+You can add any variables you want to the `site.dev.yaml` and `site.prod.yaml`
 files under the `"vars"` property and access them using Lodash template syntax
 from Markdown files, HTML files, and source code. (Lodash template subtitution
 only works in source code files whose extension is listed in

package/init/content/markdown.md

@@ -126,7 +126,7 @@ The syntax for links is unchanged from Presto. However,
 - external links (links whose domain is not one of `site.internalDomains`) are
   automatically given `target="_blank"` and special styling
 
-See `config/site.dev.json` and `config/site.prod.json` to change `site.basePath`
+See `site.dev.yaml` and `site.prod.yaml` to change `site.basePath`
 and `site.internalDomains`.
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abreen/tada",
-  "version": "1.11.2",
+  "version": "1.13.2",
   "type": "module",
   "description": "A static site generator",
   "license": "MIT",
@@ -38,6 +38,7 @@
     "lint:sass": "bun run scripts/lint-sass.ts",
     "typecheck": "tsc --noEmit",
     "format": "prettier --write \"**/*.{ts,js,scss,json}\"",
+    "test:unit": "bun run scripts/test.ts unit",
     "test:playwright": "bun run scripts/test.ts playwright",
     "test:functional": "bun run scripts/test.ts functional",
     "test:all": "bun run scripts/test.ts all",
@@ -79,8 +80,7 @@
     "sass": "^1.99.0",
     "sharp": "^0.34.5",
     "shiki": "^4.0.2",
-    "string-strip-html": "^8.5.0",
-    "ws": "^8.20.0"
+    "string-strip-html": "^8.5.0"
   },
   "lint-staged": {
     "*.{ts,js}": "prettier --write",
@@ -110,7 +110,6 @@
     "@types/istanbul-reports": "^3.0.4",
     "@types/lodash": "^4.17.24",
     "@types/markdown-it-container": "^4.0.0",
-    "@types/ws": "^8.18.1",
     "eslint": "^10.2.1",
     "husky": "^9.1.7",
     "istanbul-lib-coverage": "^3.2.2",

package/src/code/index.ts

@@ -1,3 +1,5 @@
+import { globals } from '../globals';
+
 export default async function mount(
   window: Window,
 ): Promise<void | (() => void)> {
@@ -6,7 +8,17 @@ export default async function mount(
     return;
   }
 
-  document.addEventListener('copy', (e: ClipboardEvent) => {
+  const codeBodyEl = document.querySelector<HTMLElement>('.code-body');
+  const scrollbarEl = document.querySelector<HTMLElement>('.code-scrollbar');
+  if (!codeBodyEl || !scrollbarEl) {
+    return;
+  }
+  const codeBody = codeBodyEl;
+  const scrollbar = scrollbarEl;
+
+  const cleanups: Array<() => void> = [];
+
+  const handleCopy = (e: ClipboardEvent) => {
     const selection = window.getSelection();
     if (!selection || selection.rangeCount === 0) {
       return;
@@ -54,19 +66,23 @@ export default async function mount(
 
     e.clipboardData!.setData('text/plain', lines.join('\n'));
     e.preventDefault();
+  };
+  document.addEventListener('copy', handleCopy);
+  cleanups.push(() => {
+    document.removeEventListener('copy', handleCopy);
   });
 
   const downloadLink = document.querySelector<HTMLAnchorElement>(
     '.file-header a[download]',
   );
   if (downloadLink && 'showSaveFilePicker' in window) {
-    downloadLink.addEventListener('click', async (e: MouseEvent) => {
+    const handleDownloadClick = async (e: MouseEvent) => {
       e.preventDefault();
       try {
         const handle = await window.showSaveFilePicker!({
           suggestedName: downloadLink.download,
         });
-        const response = await fetch(downloadLink.href);
+        const response = await globals.fetch(downloadLink.href);
         const writable = await handle.createWritable();
         await writable.write(await response.blob());
         await writable.close();
@@ -75,47 +91,59 @@ export default async function mount(
           throw err;
         }
       }
+    };
+    downloadLink.addEventListener('click', handleDownloadClick);
+    cleanups.push(() => {
+      downloadLink.removeEventListener('click', handleDownloadClick);
     });
   }
 
-  const codeBody = document.querySelector<HTMLElement>('.code-body');
-  const scrollbar = document.querySelector<HTMLElement>('.code-scrollbar');
-  if (!codeBody || !scrollbar) {
-    return;
-  }
-
   const inner = scrollbar.firstElementChild as HTMLElement;
   let syncing = false;
 
   function updateScrollbar(): void {
-    const hasOverflow = codeBody!.scrollWidth > codeBody!.clientWidth;
-    scrollbar!.style.display = hasOverflow ? '' : 'none';
-    inner.style.width = codeBody!.scrollWidth + 'px';
+    const hasOverflow = codeBody.scrollWidth > codeBody.clientWidth;
+    scrollbar.style.display = hasOverflow ? '' : 'none';
+    inner.style.width = codeBody.scrollWidth + 'px';
   }
 
-  codeBody.addEventListener('scroll', () => {
+  const handleCodeBodyScroll = () => {
     if (syncing) {
       return;
     }
     syncing = true;
-    scrollbar!.scrollLeft = codeBody!.scrollLeft;
+    scrollbar.scrollLeft = codeBody.scrollLeft;
     syncing = false;
+  };
+  codeBody.addEventListener('scroll', handleCodeBodyScroll);
+  cleanups.push(() => {
+    codeBody.removeEventListener('scroll', handleCodeBodyScroll);
   });
 
-  scrollbar.addEventListener('scroll', () => {
+  const handleScrollbarScroll = () => {
     if (syncing) {
       return;
     }
     syncing = true;
-    codeBody!.scrollLeft = scrollbar!.scrollLeft;
+    codeBody.scrollLeft = scrollbar.scrollLeft;
     syncing = false;
+  };
+  scrollbar.addEventListener('scroll', handleScrollbarScroll);
+  cleanups.push(() => {
+    scrollbar.removeEventListener('scroll', handleScrollbarScroll);
   });
 
-  const resizeObserver = new ResizeObserver(updateScrollbar);
+  const resizeObserver = globals.createResizeObserver(updateScrollbar);
   resizeObserver.observe(codeBody);
   updateScrollbar();
+  cleanups.push(() => {
+    resizeObserver.disconnect();
+  });
 
   return () => {
-    resizeObserver.disconnect();
+    cleanups
+      .splice(0)
+      .reverse()
+      .forEach(cleanup => cleanup());
   };
 }

package/src/code.scss

@@ -4,7 +4,8 @@ body.code {
   --code-gutter-width: 4rem;
 }
 
-.file-header {
+.file-header,
+.slides-header {
   display: flex;
   gap: var(--gap);
   align-items: center;

package/src/globals.ts

@@ -0,0 +1,47 @@
+type FetchFunction = (
+  input: RequestInfo | URL,
+  init?: RequestInit,
+) => Promise<Response>;
+
+type ImportModuleFunction = (specifier: string) => Promise<unknown>;
+type LocationMutationFunction = (window: Window, value: string) => void;
+
+export interface Globals {
+  replaceLocation: LocationMutationFunction;
+  createResizeObserver: (
+    callback: ResizeObserverCallback,
+  ) => Pick<ResizeObserver, 'disconnect' | 'observe'>;
+  fetch: FetchFunction;
+  importModule: ImportModuleFunction;
+  isDocumentHidden: (document: Document) => boolean;
+  now: () => number;
+  setLocationHash: LocationMutationFunction;
+  setLocationHref: LocationMutationFunction;
+}
+
+export const globals: Globals = {
+  replaceLocation(window, value) {
+    window.location.replace(value);
+  },
+  createResizeObserver(callback) {
+    return new ResizeObserver(callback);
+  },
+  fetch(input: RequestInfo | URL, init?: RequestInit) {
+    return fetch(input, init);
+  },
+  importModule(specifier) {
+    return import(specifier);
+  },
+  isDocumentHidden(document) {
+    return document.hidden;
+  },
+  now() {
+    return Date.now();
+  },
+  setLocationHash(window, value) {
+    window.location.hash = value;
+  },
+  setLocationHref(window, value) {
+    window.location.href = value;
+  },
+};

package/src/index.ts

@@ -8,6 +8,7 @@ import './header/style.scss';
 import './print/style.scss';
 import './question/style.scss';
 import './search/style.scss';
+import './slides/style.scss';
 import './timezone/style.scss';
 import './toc/style.scss';
 import './trace/style.scss';

package/src/navigate/index.ts

@@ -12,6 +12,7 @@ import {
   setCurrentPath,
   setHistoryIndex,
 } from './runtime';
+import { globals } from '../globals';
 
 function findAnchor(event: MouseEvent): HTMLAnchorElement | null {
   const target = event.target as HTMLElement | null;
@@ -77,11 +78,7 @@ export default function mountNavigate(window: Window): () => void {
       clearSearch(window.document);
       closeHeaderDetails(window.document);
       if (url.hash) {
-        // location.hash assignment performs a real fragment navigation:
-        // updates :target, fires hashchange (which the TOC listens for),
-        // creates a new history entry, and scrolls to the element.
-        // pushState would do none of those things.
-        window.location.hash = url.hash.slice(1);
+        globals.setLocationHash(window, url.hash);
       }
       return;
     }

package/src/navigate/lifecycle.ts

@@ -5,6 +5,7 @@ import mountTimeZone from '../timezone';
 import mountCode from '../code';
 import mountTrace from '../trace';
 import mountPrint from '../print';
+import mountSlides from '../slides';
 import { scheduleTask } from '../util';
 
 const PER_PAGE_COMPONENTS: Record<
@@ -17,6 +18,7 @@ const PER_PAGE_COMPONENTS: Record<
   timeZone: mountTimeZone,
   code: mountCode,
   trace: mountTrace,
+  slides: mountSlides,
   print: mountPrint,
 };
 
@@ -39,7 +41,7 @@ export async function mountPerPageComponents(
           }
           resolve();
         } catch (err) {
-          if (typeof __IS_DEV__ !== 'undefined' && __IS_DEV__) {
+          if (__IS_DEV__) {
             console.error(`Failed to mount ${name} component:`, String(err));
           }
           reject();

package/src/navigate/runtime.ts

@@ -1,4 +1,5 @@
 import { mountPerPageComponents, teardownPerPageComponents } from './lifecycle';
+import { globals } from '../globals';
 
 export const NAVIGATION_EVENT = 'tada:navigation';
 
@@ -196,19 +197,19 @@ export async function navigateToUrl(
 
   let response: Response;
   try {
-    response = await fetch(url, { signal: controller.signal });
+    response = await globals.fetch(url, { signal: controller.signal });
   } catch (err: unknown) {
     header?.classList.remove('loading');
     if (err instanceof Error && err.name === 'AbortError') {
       return;
     }
-    window.location.href = url;
+    globals.setLocationHref(window, url);
     return;
   }
 
   if (!response.ok) {
     header?.classList.remove('loading');
-    window.location.href = url;
+    globals.setLocationHref(window, url);
     return;
   }
 
@@ -226,7 +227,7 @@ export async function navigateToUrl(
     .querySelector('meta[name="generator"]')
     ?.getAttribute('content');
   if (!currentGenerator || !newGenerator || newGenerator !== currentGenerator) {
-    window.location.href = url;
+    globals.setLocationHref(window, url);
     return;
   }
 
@@ -246,7 +247,7 @@ export async function navigateToUrl(
 
     if (typeof scrollTarget === 'string') {
       const urlWithHash = parsed.pathname + parsed.search + '#' + scrollTarget;
-      window.location.replace(urlWithHash);
+      globals.replaceLocation(window, urlWithHash);
       window.history.replaceState({ navIndex: historyIndex }, '', urlWithHash);
     } else if (typeof scrollTarget === 'number') {
       window.scrollTo({ top: scrollTarget });

package/src/page-update/index.ts

@@ -7,6 +7,7 @@ import {
   type ResponseValidators,
 } from '../validators';
 import { NAVIGATION_EVENT, refreshCurrentPage } from '../navigate/runtime';
+import { globals } from '../globals';
 
 const POLL_INTERVAL_MS = 600_000;
 
@@ -96,7 +97,7 @@ export function mountPageUpdate(
 
   function scheduleNextCheck() {
     clearTimer();
-    if (document.hidden) {
+    if (globals.isDocumentHidden(document)) {
       return;
     }
     timer = window.setTimeout(() => {
@@ -107,17 +108,20 @@ export function mountPageUpdate(
   async function fetchValidators(
     path: string,
   ): Promise<ResponseValidators | null> {
-    if (typeof __IS_DEV__ !== 'undefined' && __IS_DEV__) {
+    if (__IS_DEV__) {
       console.log(
-        `[page-update] HEAD ${path} visibility=${document.visibilityState} focus=${document.hasFocus()}`,
+        `[page-update] HEAD ${path} hidden=${globals.isDocumentHidden(document)} visibility=${document.visibilityState} focus=${document.hasFocus()}`,
       );
     }
 
-    const res = await fetch(path, { method: 'HEAD', cache: 'no-cache' });
+    const res = await globals.fetch(path, {
+      method: 'HEAD',
+      cache: 'no-cache',
+    });
 
-    if (typeof __IS_DEV__ !== 'undefined' && __IS_DEV__) {
+    if (__IS_DEV__) {
       console.log(
-        `[page-update] HEAD ${path} -> ${res.status} etag=${res.headers.get('ETag')} last-modified=${res.headers.get('Last-Modified')} visibility=${document.visibilityState} focus=${document.hasFocus()}`,
+        `[page-update] HEAD ${path} -> ${res.status} etag=${res.headers.get('ETag')} last-modified=${res.headers.get('Last-Modified')} hidden=${globals.isDocumentHidden(document)} visibility=${document.visibilityState} focus=${document.hasFocus()}`,
       );
     }
 
@@ -170,7 +174,7 @@ export function mountPageUpdate(
       // best-effort
     } finally {
       checkInFlight = false;
-      if (rerunAfterCurrentCheck && !document.hidden) {
+      if (rerunAfterCurrentCheck && !globals.isDocumentHidden(document)) {
         rerunAfterCurrentCheck = false;
         shouldRerun = true;
       } else {
@@ -191,20 +195,20 @@ export function mountPageUpdate(
     hasBaseline = false;
     hideToast();
     clearTimer();
-    if (!document.hidden) {
+    if (!globals.isDocumentHidden(document)) {
       void checkForUpdate();
     }
   }
 
   function handleVisibilityChange() {
-    if (typeof __IS_DEV__ !== 'undefined' && __IS_DEV__) {
+    if (__IS_DEV__) {
       console.log(
-        `[page-update] visibilitychange hidden=${document.hidden} visibility=${document.visibilityState} focus=${document.hasFocus()}`,
+        `[page-update] visibilitychange hidden=${globals.isDocumentHidden(document)} visibility=${document.visibilityState} focus=${document.hasFocus()}`,
       );
     }
 
     clearTimer();
-    if (document.hidden) {
+    if (globals.isDocumentHidden(document)) {
       return;
     }
 
@@ -212,7 +216,7 @@ export function mountPageUpdate(
   }
 
   function handleNavigation() {
-    if (typeof __IS_DEV__ !== 'undefined' && __IS_DEV__) {
+    if (__IS_DEV__) {
       console.log(
         `[page-update] navigation path=${window.location.pathname} visibility=${document.visibilityState} focus=${document.hasFocus()}`,
       );
@@ -227,7 +231,7 @@ export function mountPageUpdate(
   }
 
   function handleWindowFocus() {
-    if (typeof __IS_DEV__ !== 'undefined' && __IS_DEV__) {
+    if (__IS_DEV__) {
       console.log(
         `[page-update] window focus visibility=${document.visibilityState} focus=${document.hasFocus()}`,
       );
@@ -235,7 +239,7 @@ export function mountPageUpdate(
   }
 
   function handleWindowBlur() {
-    if (typeof __IS_DEV__ !== 'undefined' && __IS_DEV__) {
+    if (__IS_DEV__) {
       console.log(
         `[page-update] window blur visibility=${document.visibilityState} focus=${document.hasFocus()}`,
       );
@@ -253,8 +257,8 @@ export function mountPageUpdate(
   window.addEventListener('blur', handleWindowBlur);
   window.addEventListener(NAVIGATION_EVENT, handleNavigation);
 
-  if (!document.hidden) {
-    if (typeof __IS_DEV__ !== 'undefined' && __IS_DEV__) {
+  if (!globals.isDocumentHidden(document)) {
+    if (__IS_DEV__) {
       console.log(
         `[page-update] mount path=${currentPath} interval=${pollIntervalMs} visibility=${document.visibilityState} focus=${document.hasFocus()}`,
       );