@abreen/tada 1.13.4 → 1.13.7

package/build/bundle.ts

@@ -9,10 +9,20 @@ import {
   getDistDir,
   toPosix,
 } from './utils/paths';
-import { deriveTheme, deriveLinkHue } from './utils/derive-theme';
+import {
+  deriveTheme,
+  deriveLinkHue,
+  deriveTraceLineActiveHue,
+} from './utils/derive-theme';
 import type { PluginBuilder } from 'bun';
 import type { SiteVariables } from './types';
 import timezones from '../src/timezone/timezones.json' with { type: 'json' };
+import pkg from '../package.json' with { type: 'json' };
+
+export function getBundleNaming(): string {
+  const version = pkg.version.replace(/[^a-zA-Z0-9.-]/g, '-');
+  return `[name].bundle.tada-${version}.[ext]`;
+}
 
 function formatCssNumber(value: number, precision = 4): string {
   if (Number.isInteger(value)) {
@@ -40,6 +50,9 @@ function renderThemeScss(siteVariables: SiteVariables): string {
   const linkColorHover = `hsl(${linkHue}deg 34% 60%)`;
   const linkColorDark = `hsl(${linkHue}deg 50% 72%)`;
   const linkColorHoverDark = `hsl(${linkHue}deg 40% 80%)`;
+  const traceLineActiveHue = formatCssNumber(deriveTraceLineActiveHue(tintHue));
+  const bgTraceLineActive = `hsl(${traceLineActiveHue}deg 100% 86%)`;
+  const bgTraceLineActiveDark = `hsl(${traceLineActiveHue}deg 90% 18%)`;
 
   const rendered = _.template(template)({
     ...theme,
@@ -54,6 +67,8 @@ function renderThemeScss(siteVariables: SiteVariables): string {
     linkColorHover,
     linkColorDark,
     linkColorHoverDark,
+    bgTraceLineActive,
+    bgTraceLineActiveDark,
   });
 
   const tmpDir = fs.mkdtempSync(path.join(os.tmpdir(), 'tada-'));
@@ -109,7 +124,7 @@ export async function bundle(
   const result = await Bun.build({
     entrypoints,
     outdir: resolvedDistDir,
-    naming: '[name].bundle.[ext]',
+    naming: getBundleNaming(),
     minify: mode === 'production',
     sourcemap: isDev ? 'inline' : 'none',
     define: createDefine(siteVariables, isDev),

package/build/generate-content-assets.ts

@@ -35,6 +35,7 @@ export class ContentRenderer {
     string,
     {
       manifestUrl: string;
+      artifactId: string;
       highlightedSource: string;
       totalSteps: number;
       mtime: number;

package/build/types.d.ts

@@ -97,6 +97,7 @@ export interface RenderPlainTextOptions {
     string,
     {
       manifestUrl: string;
+      artifactId: string;
       highlightedSource: string;
       totalSteps: number;
       mtime: number;

package/build/utils/derive-theme.ts

@@ -16,6 +16,8 @@ const DARK_TEXT_L_MAX = 0.82;
 
 const LINK_ANCHOR_HUE = 212;
 const LINK_TINT_BLEND = 0.05;
+const TRACE_LINE_ACTIVE_ANCHOR_HUE = 52;
+const TRACE_LINE_ACTIVE_TINT_BLEND = 0.1;
 
 function clamp(v: number, min: number, max: number): number {
   return Math.min(Math.max(v, min), max);
@@ -83,6 +85,14 @@ export function deriveLinkHue(tintHue: number): number {
   return (LINK_ANCHOR_HUE + diff * LINK_TINT_BLEND + 360) % 360;
 }
 
+export function deriveTraceLineActiveHue(tintHue: number): number {
+  const diff = ((tintHue - TRACE_LINE_ACTIVE_ANCHOR_HUE + 540) % 360) - 180;
+  return (
+    (TRACE_LINE_ACTIVE_ANCHOR_HUE + diff * TRACE_LINE_ACTIVE_TINT_BLEND + 360) %
+    360
+  );
+}
+
 export function getTextOnColor(cssColor: string): '#fff' | '#000' {
   const parsed = parse(cssColor);
   if (!parsed) {

package/build/utils/render.ts

@@ -432,6 +432,7 @@ function renderPlainTextContent(
       string,
       {
         manifestUrl: string;
+        artifactId: string;
         highlightedSource: string;
         totalSteps: number;
         mtime: number;

package/build/utils/trace-core.ts

@@ -1,5 +1,6 @@
 import fs from 'fs';
 import path from 'path';
+import { createHash } from 'crypto';
 import { renderCodeSegment } from './code';
 import { splitLines } from './literate-java';
 import { normalizeOutputPath } from './paths';
@@ -14,18 +15,46 @@ export interface ChunkTraceOutputOptions {
   ignoreFields?: Record<string, string[]>;
 }
 
+export interface ChunkTraceOutputResult {
+  manifest: TraceManifest;
+  artifactId: string;
+  outputPaths: string[];
+}
+
+function hashTraceFiles(files: { name: string; content: string }[]): string {
+  const hasher = createHash('sha256');
+  for (const file of files) {
+    hasher.update(file.name, 'utf8');
+    hasher.update('\0', 'utf8');
+    hasher.update(file.content, 'utf8');
+    hasher.update('\0', 'utf8');
+  }
+  return `sha256-${hasher.digest('hex').slice(0, 16)}`;
+}
+
+function buildTraceOutputPath(
+  relDir: string,
+  traceName: string,
+  artifactId: string,
+  fileName: string,
+): string {
+  return [relDir, '_traces', traceName, artifactId, fileName]
+    .filter(Boolean)
+    .join('/');
+}
+
 export function chunkTraceOutput(
   output: string,
   traceOutputDir: string,
+  relDir: string,
+  traceName: string,
   sourceFile: string,
   source: string,
   options: ChunkTraceOutputOptions = {},
-): TraceManifest {
+): ChunkTraceOutputResult {
   const chunkSize = options.chunkSize ?? DEFAULT_CHUNK_SIZE;
   const ignoreFields = options.ignoreFields ?? {};
 
-  fs.mkdirSync(traceOutputDir, { recursive: true });
-
   const lines = output
     .trim()
     .split('\n')
@@ -46,26 +75,27 @@ export function chunkTraceOutput(
 
   let chunkEntries: TraceChunkEntry[] = [];
   let chunkIndex = 0;
+  const chunkFiles: { name: string; content: string }[] = [];
 
   for (const step of allSteps) {
     const svg = generateStepSvg(step, layout);
     chunkEntries.push({ line: step.line, stdout: step.stdout, svg });
 
     if (chunkEntries.length >= chunkSize) {
-      fs.writeFileSync(
-        path.join(traceOutputDir, `chunk-${chunkIndex}.json`),
-        JSON.stringify(chunkEntries),
-      );
+      chunkFiles.push({
+        name: `chunk-${chunkIndex}.json`,
+        content: JSON.stringify(chunkEntries),
+      });
       chunkEntries = [];
       chunkIndex++;
     }
   }
 
   if (chunkEntries.length > 0) {
-    fs.writeFileSync(
-      path.join(traceOutputDir, `chunk-${chunkIndex}.json`),
-      JSON.stringify(chunkEntries),
-    );
+    chunkFiles.push({
+      name: `chunk-${chunkIndex}.json`,
+      content: JSON.stringify(chunkEntries),
+    });
   }
 
   const manifest: TraceManifest = {
@@ -76,12 +106,26 @@ export function chunkTraceOutput(
     lineToSteps,
   };
 
-  fs.writeFileSync(
-    path.join(traceOutputDir, 'manifest.json'),
-    JSON.stringify(manifest),
-  );
+  const manifestFile = {
+    name: 'manifest.json',
+    content: JSON.stringify(manifest),
+  };
+  const files = [manifestFile, ...chunkFiles];
+  const artifactId = hashTraceFiles(files);
+  const artifactDir = path.join(traceOutputDir, artifactId);
 
-  return manifest;
+  fs.mkdirSync(artifactDir, { recursive: true });
+  for (const file of files) {
+    fs.writeFileSync(path.join(artifactDir, file.name), file.content);
+  }
+
+  return {
+    manifest,
+    artifactId,
+    outputPaths: files.map(file =>
+      buildTraceOutputPath(relDir, traceName, artifactId, file.name),
+    ),
+  };
 }
 
 export function highlightTraceSource(
@@ -96,16 +140,25 @@ export function highlightTraceSource(
 export function getTraceOutputPaths(
   relDir: string,
   traceName: string,
+  artifactId: string,
   totalSteps: number,
 ): string[] {
-  const baseDir = [relDir, '_traces', traceName].filter(Boolean).join('/');
-  const outputPaths = [`${baseDir}/manifest.json`];
+  const outputPaths = [
+    buildTraceOutputPath(relDir, traceName, artifactId, 'manifest.json'),
+  ];
   for (
     let chunkIndex = 0;
     chunkIndex * DEFAULT_CHUNK_SIZE < totalSteps;
     chunkIndex++
   ) {
-    outputPaths.push(`${baseDir}/chunk-${chunkIndex}.json`);
+    outputPaths.push(
+      buildTraceOutputPath(
+        relDir,
+        traceName,
+        artifactId,
+        `chunk-${chunkIndex}.json`,
+      ),
+    );
   }
   return outputPaths;
 }
@@ -148,18 +201,18 @@ export function materializeTraceOutputs({
 export function buildManifestUrl({
   relDir,
   traceName,
+  artifactId,
   applyBasePath,
 }: {
   relDir: string;
   traceName: string;
+  artifactId: string;
   applyBasePath: (subPath: string) => string;
 }): string {
   return applyBasePath(
     normalizeOutputPath(
       '/' +
-        [relDir, '_traces', traceName, 'manifest.json']
-          .filter(Boolean)
-          .join('/'),
+        buildTraceOutputPath(relDir, traceName, artifactId, 'manifest.json'),
     ),
   );
 }

package/build/utils/trace.ts

@@ -42,6 +42,7 @@ export interface TraceContext {
 
 export interface TraceResult {
   manifestUrl: string;
+  artifactId: string;
   highlightedSource: string;
   totalSteps: number;
   mtime: number;
@@ -141,6 +142,7 @@ export function createTraceHelpers(context: TraceContext): {
         const outputPaths = getTraceOutputPaths(
           relDir,
           traceName,
+          cached.artifactId,
           cached.totalSteps,
         );
         if (
@@ -155,7 +157,12 @@ export function createTraceHelpers(context: TraceContext): {
           }
           return {
             ...cached,
-            manifestUrl: buildManifestUrl({ relDir, traceName, applyBasePath }),
+            manifestUrl: buildManifestUrl({
+              relDir,
+              traceName,
+              artifactId: cached.artifactId,
+              applyBasePath,
+            }),
           };
         }
       }
@@ -176,32 +183,42 @@ export function createTraceHelpers(context: TraceContext): {
     );
     const traceOutputDir = path.join(distDir, relDir, '_traces', traceName);
 
-    const manifest = chunkTraceOutput(
+    const traceOutput = chunkTraceOutput(
       output,
       traceOutputDir,
+      relDir,
+      traceName,
       sourceFileNameForTrace(sourceFile),
       source,
       { chunkSize: DEFAULT_CHUNK_SIZE, ignoreFields },
     );
-    for (const outputPath of getTraceOutputPaths(
-      relDir,
-      traceName,
-      manifest.totalSteps,
-    )) {
+    for (const outputPath of traceOutput.outputPaths) {
       dependencyCollector?.generatedOutputPaths?.add(outputPath);
     }
 
-    const manifestUrl = buildManifestUrl({ relDir, traceName, applyBasePath });
+    const manifestUrl = buildManifestUrl({
+      relDir,
+      traceName,
+      artifactId: traceOutput.artifactId,
+      applyBasePath,
+    });
 
-    const totalSteps = manifest.totalSteps;
+    const totalSteps = traceOutput.manifest.totalSteps;
     const mtime = fs.statSync(sourceFilePath).mtimeMs;
     cache.set(sourceFilePath, {
       manifestUrl,
+      artifactId: traceOutput.artifactId,
       highlightedSource,
       totalSteps,
       mtime,
     });
-    return { manifestUrl, highlightedSource, totalSteps, mtime };
+    return {
+      manifestUrl,
+      artifactId: traceOutput.artifactId,
+      highlightedSource,
+      totalSteps,
+      mtime,
+    };
   }
 
   return {

package/build/watch/assets.ts

@@ -1,6 +1,6 @@
 import fs from 'fs';
 import path from 'path';
-import { bundle } from '../bundle';
+import { bundle, getBundleNaming } from '../bundle';
 import { copyFonts } from '../generate-fonts';
 import { copyKatexAssets } from '../generate-katex-assets';
 import { generateFavicons } from '../generate-favicon';
@@ -42,7 +42,7 @@ export async function bundleWatchAssets(
   const reloadAssets = await Bun.build({
     entrypoints: [RELOAD_CLIENT_PATH],
     outdir: outputDir,
-    naming: '[name].bundle.[ext]',
+    naming: getBundleNaming(),
     sourcemap: 'inline',
   });
   return [

package/build/watch/compiler-types.d.ts

@@ -6,6 +6,7 @@ import type {
 
 export interface TraceCacheEntry {
   manifestUrl: string;
+  artifactId: string;
   highlightedSource: string;
   totalSteps: number;
   mtime: number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abreen/tada",
-  "version": "1.13.4",
+  "version": "1.13.7",
   "type": "module",
   "description": "A static site generator",
   "license": "MIT",

package/src/_base.scss

@@ -38,12 +38,13 @@ body {
    * Enable Inter's features:
    * liga - standard ligatures
    * calt - contextual alternates
-   * ss03 - round quotes & commas (legibility)
-   * cv01 - alternate 1 (style)
-   * cv05 - lower case L with tail (legibility)
-   * cv10 - capital G with spur (style)
+   * ss07 - square punctuation
+   * ss08 - square quotes
+   * cv01 - alternate 1
+   * cv08 - uppercase I with serif
+   * cv10 - capital G with spur
    */
-  font-feature-settings: 'liga', 'calt', 'ss03', 'cv01', 'cv05', 'cv10';
+  font-feature-settings: 'liga', 'calt', 'ss07', 'ss08', 'cv01', 'cv08', 'cv10';
   line-height: var(--line-height);
   color: var(--fg-color);
   background-color: var(--bg-color);

package/src/slides/index.ts

@@ -9,6 +9,8 @@ interface SlidesPresentDetail {
   slideIndex?: number;
 }
 
+const FULLSCREEN_STORAGE_KEY = 'slidesFullscreen';
+
 function isInteractive(
   view: Window & typeof globalThis,
   target: EventTarget | null,
@@ -83,6 +85,16 @@ export default function mountSlides(window: Window): void | (() => void) {
     presentButton.disabled = false;
   }
   if (fullscreenCheckbox) {
+    try {
+      const stored = window.localStorage.getItem(FULLSCREEN_STORAGE_KEY);
+      if (stored === 'false') {
+        fullscreenCheckbox.checked = false;
+      } else if (stored === 'true') {
+        fullscreenCheckbox.checked = true;
+      }
+    } catch {
+      // ignored
+    }
     fullscreenCheckbox.disabled = false;
   }
 
@@ -365,6 +377,20 @@ export default function mountSlides(window: Window): void | (() => void) {
     exitPresentation();
   }
 
+  function handleFullscreenPreferenceChange(): void {
+    if (!fullscreenCheckbox) {
+      return;
+    }
+    try {
+      window.localStorage.setItem(
+        FULLSCREEN_STORAGE_KEY,
+        String(fullscreenCheckbox.checked),
+      );
+    } catch {
+      // Ignore storage errors so the checkbox remains usable.
+    }
+  }
+
   function handleFullscreenChange(): void {
     if (
       isPresenting &&
@@ -460,6 +486,10 @@ export default function mountSlides(window: Window): void | (() => void) {
   }
 
   presentButton?.addEventListener('click', handlePresentClick);
+  fullscreenCheckbox?.addEventListener(
+    'change',
+    handleFullscreenPreferenceChange,
+  );
   closeButton.addEventListener('click', handleCloseClick);
   document.addEventListener('fullscreenchange', handleFullscreenChange);
   window.addEventListener('keydown', handleKeydown);
@@ -470,6 +500,10 @@ export default function mountSlides(window: Window): void | (() => void) {
   return () => {
     exitPresentation();
     presentButton?.removeEventListener('click', handlePresentClick);
+    fullscreenCheckbox?.removeEventListener(
+      'change',
+      handleFullscreenPreferenceChange,
+    );
     closeButton.removeEventListener('click', handleCloseClick);
     document.removeEventListener('fullscreenchange', handleFullscreenChange);
     window.removeEventListener('keydown', handleKeydown);

package/src/style.scss

@@ -121,7 +121,7 @@ a.footnote-ref {
 
 a.footnote-ref,
 .footnote-marker {
-  font-feature-settings: 'ss06';
+  font-feature-settings: 'ss06'; // squared numbers
 }
 
 .footnote-item {

package/src/trace/index.ts

@@ -58,13 +58,20 @@ async function goToStep(
 }
 
 function updateSourceHighlight(panel: HTMLElement, currentLine: number): void {
-  panel.querySelectorAll('.line-number').forEach(ln => {
-    ln.classList.remove('trace-line-active');
-  });
-  const el = panel.querySelector(`.line-number[data-line="${currentLine}"]`);
-  if (el) {
-    el.classList.add('trace-line-active');
-    const elRect = el.getBoundingClientRect();
+  panel
+    .querySelectorAll(
+      '.code-row.trace-line-active, .line-number.trace-line-active',
+    )
+    .forEach(el => {
+      el.classList.remove('trace-line-active');
+    });
+  const lineNumber = panel.querySelector(
+    `.line-number[data-line="${currentLine}"]`,
+  );
+  const row = lineNumber?.closest('.code-row') as HTMLElement | null;
+  if (row) {
+    row.classList.add('trace-line-active');
+    const elRect = row.getBoundingClientRect();
     const panelRect = panel.getBoundingClientRect();
     panel.scrollTop += elRect.top - panelRect.top - panel.clientHeight / 2;
   }

package/src/trace/style.scss

@@ -112,16 +112,17 @@
     }
   }
 
-  .line-number.trace-line-active {
-    font-weight: bold;
-    color: var(--fg-color);
-
-    &::before {
-      position: absolute;
-      left: 0;
-      margin-right: 0.25em;
-      line-height: 1.3;
-      content: '\25B6';
+  .code-row.trace-line-active {
+    background: var(--bg-trace-line-active);
+
+    .line-number {
+      font-weight: bold;
+      color: var(--fg-color);
+      background: var(--bg-trace-line-active);
+    }
+
+    code {
+      background: none;
     }
   }
 }

package/templates/_theme.scss

@@ -32,6 +32,7 @@
   --bg2-color-translucent: hsl(
     var(--tint-hue) calc(12% * var(--tint-amount)) 92% / 66%
   );
+  --bg-trace-line-active: <%= bgTraceLineActive %>;
   --box-shadow: 0 2px 9px
     hsl(var(--tint-hue) calc(85% * var(--tint-amount)) 10% / 25%);
   --backdrop-filter: blur(10px);
@@ -87,6 +88,7 @@
     --bg2-color-translucent: hsl(
       var(--tint-hue) calc(12% * var(--tint-amount)) 12% / 66%
     );
+    --bg-trace-line-active: <%= bgTraceLineActiveDark %>;
     --box-shadow: 0 3px 8px
       hsl(var(--tint-hue) calc(33% * var(--tint-amount)) 8% / 70%);
     --link-active-color: #fff;

package/templates/default.html

@@ -7,7 +7,7 @@
     <div class="slides-header" data-pagefind-ignore>
       <button type="button" data-slides-present disabled>Present</button>
       <label>
-        <input type="checkbox" data-slides-fullscreen checked disabled>
+        <input id="slides-fullscreen" type="checkbox" data-slides-fullscreen checked disabled>
         Full screen
       </label>
     </div>