@abreen/tada 1.11.2 → 1.13.2

package/src/slides/style.scss

@@ -0,0 +1,104 @@
+@use '../mixins' as *;
+
+.slide-deck,
+.slide {
+  display: block;
+}
+
+body.is-presenting {
+  --slides-scale: clamp(150%, 3.6vmin, 250%);
+
+  overflow: hidden;
+}
+
+body.is-presenting.is-presentation-cursor-hidden,
+body.is-presenting.is-presentation-cursor-hidden * {
+  cursor: none !important;
+}
+
+body.is-presenting header,
+body.is-presenting .title-and-info,
+body.is-presenting nav.toc,
+body.is-presenting footer,
+body.is-presenting .slides-header,
+body.is-presenting .trace-toolbar {
+  display: none;
+}
+
+@media (hover: none) {
+  .slides-header {
+    display: none;
+  }
+}
+
+body.is-presenting [data-slides-close] {
+  position: fixed;
+  top: var(--gap);
+  right: var(--gap);
+  z-index: 1001;
+}
+
+@media print {
+  [data-slides-close] {
+    display: none;
+  }
+}
+
+body.is-presenting .slide-deck {
+  position: fixed;
+  inset: 0;
+  z-index: 999;
+  background: var(--bg-color);
+}
+
+body.is-presenting .slide {
+  @include user-select(none);
+
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  z-index: 1000;
+  box-sizing: border-box;
+  display: none;
+  width: min(100vw, calc(100vh * 4 / 3));
+  height: min(100vh, calc(100vw * 3 / 4));
+  padding: calc(3 * var(--gap));
+  overflow: auto;
+  font-size: var(--slides-scale);
+  letter-spacing: 0.2px;
+  outline: none;
+  background: var(--bg-color);
+  transform: translate(-50%, -50%);
+
+  > :first-child {
+    margin-top: 0;
+  }
+
+  > h2:first-child {
+    text-align: center;
+
+    a.heading-anchor {
+      color: var(--theme-color-text);
+    }
+  }
+}
+
+body.is-presenting .slide.is-active {
+  display: block;
+}
+
+body.is-presenting .slide.is-active:has(> .trace-widget) {
+  display: flex;
+  flex-direction: column;
+}
+
+body.is-presenting .slide:has(> .trace-widget) > .trace-widget {
+  flex: 1 1 auto;
+  min-height: 0;
+  font-size: 66.6%;
+}
+
+body.is-presenting .slide:has(> .trace-widget) > .trace-widget > .trace-body {
+  height: 100%;
+  min-height: 0;
+}

package/src/style.scss

@@ -235,12 +235,17 @@ ul.styled-list {
 
 ul.styled-list {
   // Make bullet points slightly bigger
-  font-size: 1.2rem;
+  font-size: 1.2em;
+}
+
+ol li .styled-list-item {
+  font-size: 1em;
+  font-weight: var(--font-weight);
+  color: var(--fg-color);
 }
 
-ol li .styled-list-item,
 ul li .styled-list-item {
-  font-size: 1rem;
+  font-size: 0.8333em;
   font-weight: var(--font-weight);
   color: var(--fg-color);
 }

package/src/timezone/index.ts

@@ -45,6 +45,11 @@ export function normalizeHM(totalMinutes: number) {
   return [h, m] as const;
 }
 
+function getDayShift(totalMinutes: number) {
+  // Negative partial days like -30 minutes should still count as the previous day.
+  return Math.floor(totalMinutes / 1440);
+}
+
 function parseHHMM(hhmm: string) {
   const [h, m] = hhmm.split(':');
   if (h == null || m == null) {
@@ -85,26 +90,16 @@ function getOffsetMinutes(tz: string, date: Date): number {
   return (utcTs - date.getTime()) / 60000;
 }
 
-// Read lazily so tests can set __SITE_TIMEZONES__ before the first call.
-// Cache the result so mutations (like computeOffsets adding offsetMinutes)
-// persist across calls. The bundler inlines __SITE_TIMEZONES__ as a JSON
-// literal, so each raw access would create a fresh array.
-let _timezones: TimeZone[] | null = null;
 function getTimezones(): TimeZone[] {
-  if (_timezones === null) {
-    _timezones =
-      typeof __SITE_TIMEZONES__ !== 'undefined' ? __SITE_TIMEZONES__ : [];
-  }
-  return _timezones;
+  return __SITE_TIMEZONES__.map(tz => ({ ...tz }));
 }
 
-function getDefaultTimezone() {
-  const value = __SITE_DEFAULT_TIMEZONE__;
-  return getTimezones().find(tz => tz.value === value)!;
+function getDefaultTimezone(timezones: TimeZone[]): TimeZone {
+  return timezones.find(tz => tz.value === __SITE_DEFAULT_TIMEZONE__)!;
 }
 
-function computeOffsets(baseDate: Date) {
-  getTimezones().forEach(tz => {
+function computeOffsets(timezones: TimeZone[], baseDate: Date) {
+  timezones.forEach(tz => {
     tz.offsetMinutes = getOffsetMinutes(tz.value, baseDate);
   });
 }
@@ -143,14 +138,15 @@ function dominantPeriodStyle(
 }
 
 export default (window: Window) => {
-  const defaultTz = getDefaultTimezone();
+  const timezones = getTimezones();
+  const defaultTz = getDefaultTimezone(timezones);
   const resetTitle = `Reset time zone to ${defaultTz.abbreviation} (default)`;
 
   // determine initial time zone (from storage or default)
   let initialTz = defaultTz.value;
   try {
     const stored = window.localStorage.getItem(STORAGE_KEY);
-    if (stored && getTimezones().some(t => t.value === stored)) {
+    if (stored && timezones.some(t => t.value === stored)) {
       initialTz = stored;
     }
   } catch {
@@ -158,7 +154,7 @@ export default (window: Window) => {
   }
 
   const now = new Date();
-  computeOffsets(now);
+  computeOffsets(timezones, now);
   const defaultOffset = defaultTz.offsetMinutes ?? 0;
 
   // Snapshot the original AM/PM style from each <time> element's text
@@ -173,7 +169,7 @@ export default (window: Window) => {
   const pagePeriodStyle = dominantPeriodStyle(periodStyles);
 
   function updateTimes(targetTz: string) {
-    const target = getTimezones().find(t => t.value === targetTz) || defaultTz;
+    const target = timezones.find(t => t.value === targetTz) || defaultTz;
     const targetOffset = target.offsetMinutes ?? 0;
     const deltaMinutes = targetOffset - defaultOffset;
 
@@ -196,7 +192,7 @@ export default (window: Window) => {
 
       // raw (can be < 0 or > 1439)
       const rawMinutes = baseMinutes + deltaMinutes;
-      const dayShift = Math.floor(rawMinutes / 1440) - (rawMinutes < 0 ? 1 : 0);
+      const dayShift = getDayShift(rawMinutes);
       // Normalize after computing dayShift
       const [h, m] = normalizeHM(rawMinutes);
 

package/src/top/index.ts

@@ -1,4 +1,5 @@
 import { debounce, removeClass } from '../util';
+import { globals } from '../globals';
 
 /** Show the "Back to top" button once the user is past this scroll position */
 const SHOW_THRESHOLD_PX = 250;
@@ -30,10 +31,7 @@ export default (window: Window) => {
     e.preventDefault();
     const cleanUrl = window.location.pathname + window.location.search;
     if (window.location.hash) {
-      // Clear the hash via fragment navigation so :target clears and
-      // hashchange fires. location.hash = '' may leave a trailing '#';
-      // strip it with replaceState.
-      window.location.hash = '';
+      globals.setLocationHash(window, '');
       window.history.replaceState(null, '', cleanUrl);
     } else {
       window.history.replaceState(null, '', cleanUrl);

package/src/trace/index.ts

@@ -1,4 +1,5 @@
 import type { TraceManifest, TraceChunkEntry } from './types';
+import { globals } from '../globals';
 
 interface WidgetState {
   manifest: TraceManifest;
@@ -33,7 +34,7 @@ async function loadChunk(
     return;
   }
   const url = chunkUrlFromManifest(manifestUrl, chunkIndex);
-  const res = await fetch(url);
+  const res = await globals.fetch(url);
   const chunk: TraceChunkEntry[] = await res.json();
   state.chunks.set(chunkIndex, chunk);
 }
@@ -135,6 +136,63 @@ function updateStepControls(
   }
 }
 
+function parsePositiveNumber(
+  rawValue: string | null | undefined,
+): number | null {
+  if (!rawValue) {
+    return null;
+  }
+
+  const parsed = Number.parseFloat(rawValue);
+  return Number.isFinite(parsed) && parsed > 0 ? parsed : null;
+}
+
+function getPresentationScale(diagram: HTMLElement, doc: Document): number {
+  if (!doc.body.classList.contains('is-presenting')) {
+    return 1;
+  }
+
+  const view = doc.defaultView;
+  const traceWidget = diagram.closest('.trace-widget') as HTMLElement | null;
+  const traceFontSize = parsePositiveNumber(
+    traceWidget && view ? view.getComputedStyle(traceWidget).fontSize : null,
+  );
+  const baseFontSize = parsePositiveNumber(
+    view ? view.getComputedStyle(doc.body).fontSize : null,
+  );
+  if (traceFontSize && baseFontSize) {
+    return traceFontSize / baseFontSize;
+  }
+
+  return 1;
+}
+
+function scaleDiagramSvg(diagram: HTMLElement, doc: Document): void {
+  const svg = diagram.querySelector('.trace-memory') as SVGElement | null;
+  if (!svg) {
+    return;
+  }
+
+  const width = svg.dataset.traceBaseWidth ?? svg.getAttribute('width');
+  const height = svg.dataset.traceBaseHeight ?? svg.getAttribute('height');
+  if (!width || !height) {
+    return;
+  }
+
+  svg.dataset.traceBaseWidth = width;
+  svg.dataset.traceBaseHeight = height;
+
+  const baseWidth = Number.parseFloat(width);
+  const baseHeight = Number.parseFloat(height);
+  if (!Number.isFinite(baseWidth) || !Number.isFinite(baseHeight)) {
+    return;
+  }
+
+  const scale = getPresentationScale(diagram, doc);
+  svg.setAttribute('width', String(baseWidth * scale));
+  svg.setAttribute('height', String(baseHeight * scale));
+}
+
 function renderWidgetState(
   state: WidgetState,
   elements: WidgetElements,
@@ -161,6 +219,7 @@ function renderWidgetState(
 
   const prevHeight = elements.diagram.scrollHeight;
   elements.diagram.innerHTML = entry.svg;
+  scaleDiagramSvg(elements.diagram, doc);
 
   // If the diagram grew past the visible area, scroll to show the new content
   if (elements.diagram.scrollHeight > prevHeight) {
@@ -177,7 +236,7 @@ async function initWidget(root: HTMLElement, doc: Document): Promise<void> {
 
   let res: Response;
   try {
-    res = await fetch(manifestUrl);
+    res = await globals.fetch(manifestUrl);
   } catch {
     return;
   }
@@ -239,20 +298,45 @@ async function initWidget(root: HTMLElement, doc: Document): Promise<void> {
 
   const elements: WidgetElements = { root, source, controls, output, diagram };
 
-  updateStepControls(controls, state.currentStep, manifest.totalSteps, doc);
-
-  diagram.innerHTML = entry.svg;
-  updateSourceHighlight(source, entry.line);
+  renderWidgetState(state, elements, doc);
 }
 
-export default function mountTrace(window: Window): void {
+export default function mountTrace(window: Window): void | (() => void) {
   const widgets = window.document.querySelectorAll('.trace-widget');
 
   if (widgets.length === 0) {
     return;
   }
 
+  const refreshDiagramScales = (): void => {
+    for (const widget of widgets) {
+      const diagram = (widget as HTMLElement).querySelector(
+        '.trace-diagram',
+      ) as HTMLElement | null;
+      if (diagram) {
+        scaleDiagramSvg(diagram, window.document);
+      }
+    }
+  };
+
+  const MutationObserverCtor = (window as Window & typeof globalThis)
+    .MutationObserver;
+  const bodyClassObserver = MutationObserverCtor
+    ? new MutationObserverCtor(() => {
+        refreshDiagramScales();
+      })
+    : null;
+
+  bodyClassObserver?.observe(window.document.body, {
+    attributes: true,
+    attributeFilter: ['class'],
+  });
+
   for (const widget of widgets) {
     initWidget(widget as HTMLElement, window.document);
   }
+
+  return () => {
+    bodyClassObserver?.disconnect();
+  };
 }

package/src/trace/style.scss

@@ -144,7 +144,7 @@
   max-width: 100%;
   height: auto;
   font-family: var(--mono-font, monospace);
-  font-size: var(--font-size-smaller, 15px);
+  font-size: 15px;
 
   .trace-separator {
     stroke: var(--fg2-color);

package/src/util.ts

@@ -30,18 +30,22 @@ export function getElement(
   return el as HTMLElement;
 }
 
-export function applyBasePath(subPath: string): string {
+function applyBasePathWithBasePath(subPath: string, basePath: string): string {
   if (!subPath.startsWith('/')) {
     throw new Error('invalid internal path, must start with "/": ' + subPath);
   }
 
-  let path = __SITE_BASE_PATH__;
+  let path = basePath;
   if (path.endsWith('/')) {
     path = path.slice(0, -1);
   }
   return path + subPath;
 }
 
+export function applyBasePath(subPath: string): string {
+  return applyBasePathWithBasePath(subPath, __SITE_BASE_PATH__);
+}
+
 export function scheduleTask(win: Window, fn: () => void) {
   if (typeof win.requestIdleCallback === 'function') {
     win.requestIdleCallback(fn);

package/templates/_author.html

@@ -1,14 +1,14 @@
 <aside class="author">
   Written by
   <% if (page.author.url) { %>
-  <a href="<%= applyBasePath(page.author.url) %>">
+  <a href="<%= page.author.url %>">
   <% } %>
   <span class="text"><%= page.author.name %></span>
   <% if (page.author.avatar) { %>
   <img
     width="32"
     height="32"
-    src="<%= applyBasePath(page.author.avatar) %>"
+    src="<%= page.author.avatar %>"
     alt="Picture of <%= page.author.name %>"
     class="avatar"
   />

package/templates/_heading.html

@@ -1,6 +1,6 @@
 <div class="title-and-info" data-pagefind-body>
   <% if (page.parent) { %>
-  <a class="breadcrumb" href="<%= applyBasePath(page.parent) %>" data-pagefind-ignore><%= page.parentLabel %></a>
+  <a class="breadcrumb" href="<%= page.parent %>" data-pagefind-ignore><%= page.parentLabel %></a>
   <% } %>
   <h1 data-pagefind-weight="10" data-pagefind-meta="title_html[data-title-html]" data-title-html="<%- page.titleHtml %>"><%= page.titleHtml %></h1>
 

package/templates/_nav.html

@@ -1,5 +1,5 @@
 <nav>
-<% json('nav.json').forEach(function(section) { %>
+<% config('nav').forEach(function(section) { %>
   <div>
     <p><%= section.title %></p>
     <ul>
@@ -7,7 +7,7 @@
         <li>
           <a
             class="<%= cx({disabled: link.disabled, external: link.external}) %>"
-            <% if (!link.disabled) { %>href="<%= link.internal ? applyBasePath(link.internal) : link.external %>"<% } %>
+            <% if (!link.disabled) { %>href="<%= link.internal || link.external %>"<% } %>
             <% if (link.external) { %>target="_blank"<% } %>
           >
             <%= link.text %></a>

package/templates/_theme.scss

@@ -42,9 +42,9 @@
   --heading-font: var(--font);
   --heading-line-height: 1.3;
   --mono-font: 'Google Sans Code', 'Consolas', 'Courier', monospace;
-  --font-size: 16px;
-  --font-size-smaller: 15px;
-  --font-size-small: 13px;
+  --font-size: 1rem;
+  --font-size-smaller: 0.9375em;
+  --font-size-small: 0.8125em;
   --font-weight: 400;
   --line-height: 1.7;
   --mono-font-size: 0.94em;

package/templates/_top.html

@@ -2,19 +2,19 @@
 <html lang="en">
   <head>
     <% if (site.features.favicon) { %>
-    <link rel="icon" href="<%= applyBasePath('/favicon.ico') %>" sizes="any" />
-    <link rel="icon" type="image/svg+xml" href="<%= applyBasePath('/favicon.svg') %>" />
-    <link rel="icon" type="image/png" sizes="512x512" href="<%= applyBasePath('/favicon-512.png') %>" />
-    <link rel="icon" type="image/png" sizes="256x256" href="<%= applyBasePath('/favicon-256.png') %>" />
-    <link rel="icon" type="image/png" sizes="192x192" href="<%= applyBasePath('/favicon-192.png') %>" />
-    <link rel="icon" type="image/png" sizes="128x128" href="<%= applyBasePath('/favicon-128.png') %>" />
-    <link rel="icon" type="image/png" sizes="64x64" href="<%= applyBasePath('/favicon-64.png') %>" />
-    <link rel="icon" type="image/png" sizes="48x48" href="<%= applyBasePath('/favicon-48.png') %>" />
-    <link rel="icon" type="image/png" sizes="32x32" href="<%= applyBasePath('/favicon-32.png') %>" />
-    <link rel="icon" type="image/png" sizes="16x16" href="<%= applyBasePath('/favicon-16.png') %>" />
-    <link rel="apple-touch-icon" sizes="512x512" href="<%= applyBasePath('/favicon-512.png') %>" />
-    <link rel="apple-touch-icon" sizes="256x256" href="<%= applyBasePath('/favicon-256.png') %>" />
-    <link rel="manifest" href="<%= applyBasePath('/manifest.json') %>" />
+    <link rel="icon" href="/favicon.ico" sizes="any" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <link rel="icon" type="image/png" sizes="512x512" href="/favicon-512.png" />
+    <link rel="icon" type="image/png" sizes="256x256" href="/favicon-256.png" />
+    <link rel="icon" type="image/png" sizes="192x192" href="/favicon-192.png" />
+    <link rel="icon" type="image/png" sizes="128x128" href="/favicon-128.png" />
+    <link rel="icon" type="image/png" sizes="64x64" href="/favicon-64.png" />
+    <link rel="icon" type="image/png" sizes="48x48" href="/favicon-48.png" />
+    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png" />
+    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16.png" />
+    <link rel="apple-touch-icon" sizes="512x512" href="/favicon-512.png" />
+    <link rel="apple-touch-icon" sizes="256x256" href="/favicon-256.png" />
+    <link rel="manifest" href="/manifest.json" />
     <meta name="apple-mobile-web-app-title" content="<%= site.symbol %>">
     <meta name="mobile-web-app-capable" content="yes">
     <% } %>
@@ -38,7 +38,7 @@
     {
       "prerender": [{
         "where": {
-          "href_matches": "<%= applyBasePath('/') %>*"
+          "href_matches": "<%= speculationRulesHrefMatches %>"
         },
         "eagerness": "moderate"
       }]

package/templates/default.html

@@ -3,6 +3,14 @@
 <div class="main-content">
   <%= render('_heading.html') %>
   <main class="body" data-pagefind-body>
+    <% if (page.slides) { %>
+    <div class="slides-header" data-pagefind-ignore>
+      <button type="button" data-slides-present disabled>Present</button>
+      <button type="button" data-slides-present-fullscreen disabled>
+        Present (Full Screen)
+      </button>
+    </div>
+    <% } %>
     <%= content %>
     <%= render('_footer.html') %>
   </main>

package/types/dev.d.ts

@@ -1 +1 @@
-declare const __IS_DEV__: boolean;
+declare var __IS_DEV__: boolean;

package/types/site-variables.d.ts

@@ -5,8 +5,7 @@ interface TimeZone {
   offsetMinutes?: number;
 }
 
-declare const __SITE_BASE__: string;
-declare const __SITE_BASE_PATH__: string;
-declare const __SITE_TITLE_POSTFIX__: string;
-declare const __SITE_DEFAULT_TIMEZONE__: string;
-declare const __SITE_TIMEZONES__: TimeZone[];
+declare var __SITE_BASE_PATH__: string;
+declare var __SITE_TITLE_POSTFIX__: string;
+declare var __SITE_DEFAULT_TIMEZONE__: string;
+declare var __SITE_TIMEZONES__: TimeZone[];