@abreen/tada 1.11.3 → 1.13.4

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 = [25, 31, 12, 9]
+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.3",
+  "version": "1.13.4",
   "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/_base.scss

@@ -180,6 +180,73 @@ input[type='search'] {
   }
 }
 
+label:has(> input[type='checkbox']) {
+  display: inline-flex;
+  gap: 0.45em;
+  align-items: center;
+  font-size: var(--font-size-small);
+  font-weight: 500;
+
+  @include user-select(none);
+}
+
+input[type='checkbox'] {
+  display: inline-grid;
+  flex: 0 0 auto;
+  place-content: center;
+  width: 1.5em;
+  height: 1.25em;
+  padding: 0;
+  margin: 0;
+  font: inherit;
+  color: var(--fg-color);
+  appearance: none;
+  cursor: pointer;
+  background: var(--bg-color);
+  border: var(--control-border-width) solid var(--fg2-color);
+  border-radius: 0.25em;
+
+  &::after {
+    display: block;
+    width: 1.1em;
+    height: 1.1em;
+    content: '';
+    background-color: currentcolor;
+    opacity: 0;
+
+    @include contained-mask(var(--icon-check));
+  }
+
+  &:checked {
+    &::after {
+      opacity: 1;
+    }
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.4;
+  }
+
+  &:active:not(:disabled) {
+    color: var(--bg-color) !important;
+    background: var(--link-active-color) !important;
+  }
+
+  &:focus {
+    outline: 2px solid var(--theme-color);
+    outline-offset: 1px;
+    background-color: var(--bg2-color);
+    border-color: var(--fg-color);
+  }
+}
+
+@media (hover: hover) {
+  input[type='checkbox']:hover:not(:disabled) {
+    background: var(--bg2-color);
+  }
+}
+
 figure {
   margin: 1rem 0;
 

package/src/anchor/README.md

@@ -4,3 +4,12 @@ Append a link to each heading having an `id` attribute.
 
 When the link is clicked, `window.location` is updated and the heading is
 highlighted using the same function as the `toc` component.
+
+The heading link includes a real inline SVG hash icon, revealed on heading
+hover or link focus.
+
+For slide title headings (`div.slide > h2:first-child`), append a
+`Present from this slide` icon button. Clicking the button dispatches a
+bubbling `tada:slides-present` custom event with the slide index so the slides
+component can open presentation mode from that slide using the current
+`Full screen` checkbox state.

package/src/anchor/index.ts

@@ -2,32 +2,131 @@ function getElements(parent: HTMLElement): HTMLHeadingElement[] {
   return Array.from(parent.querySelectorAll('h1, h2, h3, h4, h5, h6'));
 }
 
+function createIcon(window: Window, type: 'hash' | 'present'): SVGSVGElement {
+  const svg = window.document.createElementNS(
+    'http://www.w3.org/2000/svg',
+    'svg',
+  );
+  svg.setAttribute('aria-hidden', 'true');
+  svg.setAttribute('viewBox', '0 0 24 24');
+  svg.setAttribute('width', '16');
+  svg.setAttribute('height', '16');
+  svg.setAttribute('fill', 'none');
+  svg.setAttribute('stroke', 'currentColor');
+  svg.setAttribute('stroke-width', '1.5');
+  svg.setAttribute('stroke-linecap', 'round');
+  svg.setAttribute('stroke-linejoin', 'round');
+
+  const paths =
+    type === 'hash'
+      ? ['M10 3 8 21', 'M16 3l-2 18', 'M4 9h17', 'M3 15h17']
+      : [
+          'M5 5h14a1 1 0 0 1 1 1v9a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1Z',
+          'M9 20h6',
+        ];
+
+  for (const d of paths) {
+    const path = window.document.createElementNS(
+      'http://www.w3.org/2000/svg',
+      'path',
+    );
+    path.setAttribute('d', d);
+    svg.appendChild(path);
+  }
+
+  return svg;
+}
+
+function getSlideIndex(slide: HTMLElement): number {
+  const rawIndex = slide.getAttribute('data-slide-index');
+  if (rawIndex != null) {
+    const parsed = Number.parseInt(rawIndex, 10);
+    if (Number.isFinite(parsed)) {
+      return parsed;
+    }
+  }
+
+  const root = slide.closest('[data-slides-root]');
+  if (!root) {
+    return 0;
+  }
+
+  return Array.from(root.querySelectorAll('.slide')).indexOf(slide);
+}
+
+function isSlideTitleHeading(
+  heading: HTMLHeadingElement,
+): heading is HTMLHeadingElement & { parentElement: HTMLElement } {
+  const slide = heading.parentElement;
+  return (
+    heading.tagName === 'H2' &&
+    slide?.tagName === 'DIV' &&
+    slide.classList.contains('slide') &&
+    slide.firstElementChild === heading
+  );
+}
+
 export default (window: Window) => {
+  const view = window as Window & typeof globalThis;
   const elements = getElements(window.document.body);
-  if (elements == null) {
-    return;
-  }
+  const cleanups: (() => void)[] = [];
 
   elements.forEach(el => {
-    if (!el.id) {
+    if (el.id) {
+      const link = window.document.createElement('a');
+      link.className = 'heading-anchor';
+      link.href = `#${el.id}`;
+      link.title = 'Link to this heading';
+
+      // Move all existing child nodes into the link.
+      while (el.firstChild) {
+        link.appendChild(el.firstChild);
+      }
+      link.appendChild(createIcon(window, 'hash'));
+      el.appendChild(link);
+
+      const handleClick = () => {
+        el.focus();
+      };
+      link.addEventListener('click', handleClick);
+      cleanups.push(() => {
+        link.removeEventListener('click', handleClick);
+      });
+    }
+
+    if (!isSlideTitleHeading(el)) {
       return;
     }
 
-    const link = window.document.createElement('a');
-    link.className = 'heading-anchor';
-    link.href = `#${el.id}`;
-    link.title = 'Link to this heading';
+    const button = window.document.createElement('button');
+    button.type = 'button';
+    button.className = 'heading-present-button';
+    button.setAttribute('aria-label', 'Present from this slide');
+    button.title = 'Present from this slide';
+    button.appendChild(createIcon(window, 'present'));
+    el.appendChild(button);
 
-    // Move all existing child nodes into the link
-    while (el.firstChild) {
-      link.appendChild(el.firstChild);
-    }
-    el.appendChild(link);
+    const slide = el.parentElement;
+    const slideIndex = getSlideIndex(slide);
 
-    link.addEventListener('click', () => {
-      el.focus();
+    const handlePresentClick = () => {
+      button.dispatchEvent(
+        new view.CustomEvent('tada:slides-present', {
+          bubbles: true,
+          detail: { slideIndex },
+        }),
+      );
+    };
+    button.addEventListener('click', handlePresentClick);
+
+    cleanups.push(() => {
+      button.removeEventListener('click', handlePresentClick);
     });
   });
 
-  return () => {};
+  return () => {
+    for (const cleanup of cleanups) {
+      cleanup();
+    }
+  };
 };

package/src/anchor/style.scss

@@ -7,29 +7,89 @@ a.heading-anchor {
   @include subdued-link;
 }
 
-a.heading-anchor::after {
+.heading-anchor svg,
+.heading-present-button svg {
   display: inline-block;
   width: 1em;
   height: 1em;
+  vertical-align: middle;
+}
+
+.heading-anchor svg {
   margin-left: 4px;
   vertical-align: middle;
-  content: '';
   opacity: 0;
+}
 
-  @include contained-mask(var(--icon-anchor));
+.heading-present-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1em;
+  height: 1em;
+  padding: 0;
+  margin-left: 4px;
+  font: inherit;
+  line-height: 1;
+  vertical-align: middle;
+  color: var(--fg-color);
+  background: transparent;
+  border: none;
+  border-radius: 0;
+  opacity: 0;
 }
 
-a.heading-anchor:focus-visible::after {
+a.heading-anchor:focus-visible svg,
+.heading-present-button:focus {
   opacity: 1;
 }
 
+.heading-present-button:focus {
+  outline-offset: 2px;
+  background-color: transparent;
+  border-color: transparent;
+}
+
+button.heading-present-button:active:not(:disabled) {
+  color: var(--link-active-color) !important;
+  background: transparent !important;
+}
+
+body.is-presenting .heading-present-button {
+  display: none;
+}
+
 @media (hover: hover) {
-  h1:hover a.heading-anchor::after,
-  h2:hover a.heading-anchor::after,
-  h3:hover a.heading-anchor::after,
-  h4:hover a.heading-anchor::after,
-  h5:hover a.heading-anchor::after,
-  h6:hover a.heading-anchor::after {
+  button.heading-present-button:hover:not(:disabled) {
+    color: var(--fg2-color);
+    background: transparent;
+  }
+
+  h1:hover a.heading-anchor svg,
+  h2:hover a.heading-anchor svg,
+  h3:hover a.heading-anchor svg,
+  h4:hover a.heading-anchor svg,
+  h5:hover a.heading-anchor svg,
+  h6:hover a.heading-anchor svg,
+  h1:hover .heading-present-button,
+  h2:hover .heading-present-button,
+  h3:hover .heading-present-button,
+  h4:hover .heading-present-button,
+  h5:hover .heading-present-button,
+  h6:hover .heading-present-button {
     opacity: 1;
   }
 }
+
+@media (hover: none) {
+  .heading-present-button {
+    display: none;
+  }
+}
+
+@media print {
+  .heading-anchor svg,
+  .heading-present-button {
+    display: none;
+  }
+}

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';