@abreen/tada 1.17.0 → 1.18.0

package/src/trace/index.ts

@@ -5,6 +5,7 @@ interface WidgetState {
   manifest: TraceManifest;
   chunks: Map<number, TraceChunkEntry[]>;
   currentStep: number;
+  navigationRequest: number;
 }
 
 interface TraceResizeState {
@@ -54,6 +55,7 @@ async function goToStep(
   stepIndex: number,
   doc: Document,
 ): Promise<void> {
+  const request = ++state.navigationRequest;
   stepIndex = Math.max(0, Math.min(stepIndex, state.manifest.totalSteps - 1));
   const lastChunk = Math.floor(stepIndex / state.manifest.chunkSize);
   const loads: Promise<void>[] = [];
@@ -61,6 +63,9 @@ async function goToStep(
     loads.push(loadChunk(state, manifestUrl, i));
   }
   await Promise.all(loads);
+  if (request !== state.navigationRequest) {
+    return;
+  }
   state.currentStep = stepIndex;
   renderWidgetState(state, elements, doc);
 }
@@ -492,7 +497,12 @@ async function initWidget(root: HTMLElement, doc: Document): Promise<void> {
   }
   const manifest: TraceManifest = await res.json();
 
-  const state: WidgetState = { manifest, chunks: new Map(), currentStep: 0 };
+  const state: WidgetState = {
+    manifest,
+    chunks: new Map(),
+    currentStep: 0,
+    navigationRequest: 0,
+  };
 
   await loadChunk(state, manifestUrl, 0);
 

package/templates/_author.html

@@ -3,13 +3,13 @@
   <% if (page.author.url) { %>
   <a href="<%- encodeAuthoredUrl(page.author.url) %>">
   <% } %>
-  <span class="text"><%= page.author.name %></span>
+  <span class="text"><%- page.author.name %></span>
   <% if (page.author.avatar) { %>
   <img
     width="32"
     height="32"
     src="<%- encodeAuthoredUrl(page.author.avatar) %>"
-    alt="Picture of <%= page.author.name %>"
+    alt="Picture of <%- page.author.name %>"
     class="avatar"
   />
   <% } else { %>

package/templates/_download.html

@@ -1 +1 @@
-<a class="button" href="<%= page.codeFilePath %>" download="<%= page.downloadName %>" data-pagefind-ignore>Download</a>
+<a class="button" href="<%= page.codeFilePath %>" download="<%- page.downloadName %>" data-pagefind-ignore>Download</a>

package/templates/_footer.html

@@ -1,5 +1,5 @@
 <% if (site.features.footer) { %>
 <footer data-pagefind-ignore>
-  <p>Built using <a href="https://github.com/abreen/Tada" target="_blank" rel="noopener noreferrer">Tada</a> <%= tadaVersion %></p>
+  <p>Built using <a href="https://github.com/abreen/Tada" target="_blank" rel="noopener noreferrer">Tada</a> <%- tadaVersion %></p>
 </footer>
 <% } %>

package/templates/_heading.html

@@ -1,14 +1,14 @@
 <div class="title-and-info" data-pagefind-body>
   <% if (page.parent) { %>
-  <a class="breadcrumb" href="<%- encodeAuthoredUrl(page.parent) %>" data-pagefind-ignore><%= page.parentLabel %></a>
+  <a class="breadcrumb" href="<%- encodeAuthoredUrl(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>
 
   <div class="info" data-pagefind-ignore>
     <% if (page.published) { %>
     <div class="publish-date">
-      <time datetime="<%= isoDate(page.published) %>">
-        <%= readableDate(page.published) %>
+      <time datetime="<%- isoDate(page.published) %>">
+        <%- readableDate(page.published) %>
       </time>
     </div>
     <% } %>

package/templates/_nav.html

@@ -1,7 +1,7 @@
 <nav>
 <% config('nav').forEach(function(section) { %>
   <div>
-    <p><%= section.title %></p>
+    <p><%- section.title %></p>
     <ul>
       <% section.links.forEach(function(link) { %>
         <li>
@@ -10,7 +10,7 @@
             <% if (!link.disabled) { %>href="<%- encodeAuthoredUrl(link.internal || link.external) %>"<% } %>
             <% if (link.external) { %>target="_blank" rel="noopener noreferrer"<% } %>
           >
-            <%= link.text %></a>
+            <%- link.text %></a>
         </li>
       <% }) %>
     </ul>

package/templates/_page-bottom.html

@@ -0,0 +1,6 @@
+<% if (site.features.footer || site.features.pickers) { %>
+<div class="page-bottom" data-pagefind-ignore>
+  <%= render('_footer.html') %>
+  <%= render('_appearance-picker.html') %>
+</div>
+<% } %>

package/templates/_top.html

@@ -1,11 +1,15 @@
 <!doctype html>
 <html lang="en"
-      data-default-font-preference="<%= site.defaultFont %>"
-      data-default-contrast-preference="<%= site.defaultContrast %>"<% if (site.defaultFont === 'serif') { %>
+      data-default-font-preference="<%- site.defaultFont %>"
+      data-default-contrast-preference="<%- site.defaultContrast %>"<% if (site.defaultFont === 'serif') { %>
       data-font-preference="serif"<% } %><% if (site.defaultContrast === 'high') { %>
       data-contrast-preference="high"<% } %>>
   <head>
+    <meta charset="UTF-8" />
     <% if (site.features.favicon) { %>
+    <% if (site.favicon) { %>
+    <link rel="icon" type="image/x-icon" href="/<%- encodePublicAssetPath(site.favicon) %>" sizes="any" />
+    <% } else { %>
     <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" />
@@ -19,32 +23,32 @@
     <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="apple-mobile-web-app-title" content="<%- site.symbol %>">
     <meta name="mobile-web-app-capable" content="yes">
     <% } %>
-    <meta name="generator" content="Tada <%= tadaVersion %>" />
-    <meta charset="UTF-8" />
+    <% } %>
+    <meta name="generator" content="Tada <%- tadaVersion %>" />
     <meta http-equiv="cache-control" content="no-cache" />
     <meta http-equiv="expires" content="0" />
     <meta http-equiv="pragma" content="no-cache" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <% if (page.description) { %>
-    <meta name="description" content="<%= page.description %>" />
+    <meta name="description" content="<%- page.description %>" />
     <% } %>
-    <meta property="og:title" content="<%= page.title %>" />
+    <meta property="og:title" content="<%- page.title %>" />
     <% if (page.author) { %>
-    <meta name="author" content="<%= page.author.name %>" />
-    <meta property="og:author" content="<%= page.author.name %>" />
+    <meta name="author" content="<%- page.author.name %>" />
+    <meta property="og:author" content="<%- page.author.name %>" />
     <% } %>
-    <title><%= page.title %><%= site.titlePostfix %></title>
+    <title><%- page.title %><%- site.titlePostfix %></title>
     <script>
       (() => {
       document.documentElement.classList.add('js');
       const fontPreferenceFamilies = {
         sans: ['Inter', 'Google Sans Code'],
         serif: [
-          '<%= site.fontOverrides?.serif ? 'Tada Custom Serif' : 'Source Serif 4' %>',
-          '<%= site.fontOverrides?.serifMono ? 'Tada Custom Serif Mono' : 'Courier Prime' %>',
+          '<%= site.fontOverrides?.serif?.regular ? 'Tada Custom Serif' : 'Source Serif 4' %>',
+          '<%= site.fontOverrides?.serifMono?.regular ? 'Tada Custom Serif Mono' : 'Courier Prime' %>',
         ],
       };
       const fontPreferenceLoader = {
@@ -215,8 +219,8 @@
             <path class="menu-icon-line menu-icon-line-middle" d="M3 12h18" />
             <path class="menu-icon-line menu-icon-line-bottom" d="M3 18h18" />
           </svg>
-          <% if (site.symbol) { %><span class="logo" aria-hidden="true"><%= site.symbol %></span><% } %>
-          <span class="site-title" aria-hidden="true"><%= site.title %></span>
+          <% if (site.logo) { %><img class="logo-image" src="/<%- encodePublicAssetPath(site.logo) %>" alt="" aria-hidden="true" /><% } else if (site.symbol) { %><span class="logo" aria-hidden="true"><%- site.symbol %></span><% } %>
+          <span class="site-title" aria-hidden="true"><%- site.title %></span>
         </summary>
         <div class="content">
           <%= render('_nav.html') %>

package/templates/code.html

@@ -2,28 +2,29 @@
 
 <div class="main-content">
   <main class="body" data-pagefind-body>
-    <div class="file-header">
-      <h1 class="file-title" data-pagefind-weight="10" data-pagefind-meta="title_html[data-title-html]" data-title-html="<%- page.titleHtml %>"><%= page.titleHtml %></h1>
-      <%= render('_download.html') %>
+    <div class="page-content">
+      <div class="file-header">
+        <h1 class="file-title" data-pagefind-weight="10" data-pagefind-meta="title_html[data-title-html]" data-title-html="<%- page.titleHtml %>"><%= page.titleHtml %></h1>
+        <%= render('_download.html') %>
+      </div>
+      <div class="code-body">
+        <%= content %>
+      </div>
+      <div class="code-scrollbar" aria-hidden="true">
+        <div></div>
+      </div>
+      <% if (page.tocItems && page.tocItems.length > 0) { %>
+      <div class="code-search-index" aria-hidden="true" inert>
+        <% page.tocItems.forEach(function(item) { %>
+        <section>
+          <h2 id="L<%- item.line %>"><%- item.name %></h2>
+          <p><%- item.label %> defined at line <%- item.line %>.</p>
+        </section>
+        <% }); %>
+      </div>
+      <% } %>
     </div>
-    <div class="code-body">
-      <%= content %>
-    </div>
-    <div class="code-scrollbar" aria-hidden="true">
-      <div></div>
-    </div>
-    <% if (page.tocItems && page.tocItems.length > 0) { %>
-    <div class="code-search-index" aria-hidden="true" inert>
-      <% page.tocItems.forEach(function(item) { %>
-      <section>
-        <h2 id="L<%= item.line %>"><%= item.name %></h2>
-        <p><%= item.label %> defined at line <%= item.line %>.</p>
-      </section>
-      <% }); %>
-    </div>
-    <% } %>
-    <%= render('_footer.html') %>
-    <%= render('_appearance-picker.html') %>
+    <%= render('_page-bottom.html') %>
   </main>
   <% if (page.tocHtml) { %>
   <nav class="toc"><%= page.tocHtml %></nav>

package/templates/default.html

@@ -3,18 +3,19 @@
 <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>
-      <label>
-        <input id="slides-fullscreen" type="checkbox" data-slides-fullscreen checked disabled>
-        Full screen
-      </label>
+    <div class="page-content">
+      <% if (page.slides) { %>
+      <div class="slides-header" data-pagefind-ignore>
+        <button type="button" data-slides-present disabled>Present</button>
+        <label>
+          <input id="slides-fullscreen" type="checkbox" data-slides-fullscreen checked disabled>
+          Full screen
+        </label>
+      </div>
+      <% } %>
+      <%= content %>
     </div>
-    <% } %>
-    <%= content %>
-    <%= render('_footer.html') %>
-    <%= render('_appearance-picker.html') %>
+    <%= render('_page-bottom.html') %>
   </main>
   <% if (page.toc && page.tocHtml) { %>
   <nav class="toc"><%= page.tocHtml %></nav>

package/templates/literate.html

@@ -3,12 +3,13 @@
 <div class="main-content">
   <%= render('_heading.html') %>
   <main class="body" data-pagefind-body>
-    <div class="file-header">
-      <code><%= page.downloadName %></code><%= render('_download.html') %>
+    <div class="page-content">
+      <div class="file-header">
+        <code><%- page.downloadName %></code><%= render('_download.html') %>
+      </div>
+      <%= content %>
     </div>
-    <%= content %>
-    <%= render('_footer.html') %>
-    <%= render('_appearance-picker.html') %>
+    <%= render('_page-bottom.html') %>
   </main>
   <% if (page.toc && page.tocHtml) { %>
   <nav class="toc"><%= page.tocHtml %></nav>

package/build/copy.ts

@@ -1,82 +0,0 @@
-import fs from 'fs';
-import path from 'path';
-import { toPosix } from './utils/paths';
-import { makeLogger } from './log';
-import { B } from './colors';
-
-const log = makeLogger(import.meta.url);
-
-interface CollectedFile {
-  abs: string;
-  rel: string;
-}
-
-function collectFiles(dir: string): CollectedFile[] {
-  let entries: fs.Dirent[];
-  try {
-    entries = fs.readdirSync(dir, { withFileTypes: true, recursive: true });
-  } catch (err: unknown) {
-    if ((err as NodeJS.ErrnoException).code === 'ENOENT') {
-      return [];
-    }
-    throw err;
-  }
-  return entries
-    .filter(entry => entry.isFile())
-    .map(entry => {
-      const abs = path.join(entry.parentPath, entry.name);
-      const rel = path.relative(dir, abs);
-      return { abs, rel: toPosix(rel) };
-    });
-}
-
-export function copyPublicFiles(
-  publicDir: string,
-  distDir: string,
-): Set<string> {
-  const files = collectFiles(publicDir);
-  const publicRelPaths = new Set<string>();
-  for (const { abs, rel } of files) {
-    const dest = path.join(distDir, rel);
-    fs.mkdirSync(path.dirname(dest), { recursive: true });
-    fs.copyFileSync(abs, dest);
-    publicRelPaths.add(rel);
-    log.info`Copying public file ${B`${rel}`}`;
-  }
-  return publicRelPaths;
-}
-
-export function copyContentAssets(
-  contentDir: string,
-  distDir: string,
-  processedExtensions: string[],
-  publicRelPaths: Set<string>,
-): Set<string> {
-  const processedExtSet = new Set(processedExtensions);
-  const files = collectFiles(contentDir);
-  const contentAssetRelPaths = new Set<string>();
-  const conflicts: string[] = [];
-  for (const { abs, rel } of files) {
-    const ext = path.extname(abs).slice(1).toLowerCase();
-    if (processedExtSet.has(ext)) {
-      continue;
-    }
-    contentAssetRelPaths.add(rel);
-    if (publicRelPaths.has(rel)) {
-      conflicts.push(rel);
-    }
-    const dest = path.join(distDir, rel);
-    fs.mkdirSync(path.dirname(dest), { recursive: true });
-    fs.copyFileSync(abs, dest);
-  }
-  if (conflicts.length > 0) {
-    for (const rel of conflicts) {
-      log.error`content/${B`${rel}`} conflicts with public/${B`${rel}`}`;
-    }
-    const noun = conflicts.length === 1 ? 'file' : 'files';
-    throw new Error(
-      `${conflicts.length} ${noun} in content/ and public/ have the same path`,
-    );
-  }
-  return contentAssetRelPaths;
-}

package/build/generate-content-assets.ts

@@ -1,121 +0,0 @@
-import fs from 'fs';
-import path from 'path';
-import { makeLogger } from './log';
-import { getRuntimeBundledShikiLanguages } from './site-variables';
-import { createContentRecord } from './source-records';
-import { validateConfigLinks } from './validate-config-links';
-import { config, getConfigFileName } from './templates';
-import { initHighlighter } from './utils/shiki-highlighter';
-import { checkTraceToolAvailability } from './utils/trace';
-import type {
-  SiteVariables,
-  ContentRenderOptions,
-  ContentRenderResult,
-  HtmlOutputAnalysis,
-  TraceToolAvailability,
-} from './types';
-import type { TraceCache } from './watch/compiler-types';
-
-const log = makeLogger(import.meta.url);
-
-function cloneHtmlOutputAnalysis(
-  analysis: HtmlOutputAnalysis,
-): HtmlOutputAnalysis {
-  return { outgoingTargets: new Set(analysis.outgoingTargets) };
-}
-
-function writeRecordOutputs(
-  distDir: string,
-  outputs: Map<string, string | Buffer>,
-): void {
-  for (const [outputPath, content] of outputs) {
-    const outPath = path.join(distDir, outputPath);
-    fs.mkdirSync(path.dirname(outPath), { recursive: true });
-    fs.writeFileSync(outPath, content);
-  }
-}
-
-export class ContentRenderer {
-  private siteVariables: SiteVariables;
-  private traceToolAvailability: TraceToolAvailability | undefined;
-  private traceCache: TraceCache = new Map();
-
-  constructor(siteVariables: SiteVariables) {
-    this.siteVariables = siteVariables;
-  }
-
-  async initHighlighter(): Promise<void> {
-    await initHighlighter(getRuntimeBundledShikiLanguages(this.siteVariables));
-  }
-
-  processContent({
-    distDir,
-    assetFiles,
-    scan,
-  }: ContentRenderOptions): ContentRenderResult {
-    const buildContentFiles = [...scan.buildContentFiles];
-    const validInternalTargets = scan.validTargets;
-
-    const errors: Error[] = [];
-    const htmlAssetsByPath = new Map<string, string>();
-    const htmlAnalysisByPath = new Map<string, HtmlOutputAnalysis>();
-
-    const configLinkErrors = validateConfigLinks(
-      validInternalTargets,
-      config('nav'),
-      config('authors'),
-      {
-        navFileName: getConfigFileName('nav'),
-        authorsFileName: getConfigFileName('authors'),
-      },
-    );
-    for (const msg of configLinkErrors) {
-      errors.push(new Error(msg));
-    }
-
-    if (buildContentFiles.length > 0) {
-      const noun = buildContentFiles.length === 1 ? 'file' : 'files';
-      log.info`Processing ${buildContentFiles.length} content ${noun}`;
-    }
-
-    if (!this.traceToolAvailability && buildContentFiles.length > 0) {
-      this.traceToolAvailability = checkTraceToolAvailability();
-      if (!this.traceToolAvailability.java) {
-        log.warn`javac was not found; literate Java pages will not include execution output`;
-      }
-    }
-
-    for (const filePath of buildContentFiles) {
-      try {
-        const record = createContentRecord({
-          filePath,
-          siteVariables: this.siteVariables,
-          scan,
-          assetFiles,
-          outputDir: distDir,
-          traceCache: this.traceCache,
-          traceToolAvailability: this.traceToolAvailability,
-          skipLiterateJavaExecution: !this.traceToolAvailability?.java,
-        });
-        writeRecordOutputs(distDir, record.outputs);
-        for (const [outputPath, content] of record.outputs) {
-          if (!outputPath.endsWith('.html') || typeof content !== 'string') {
-            continue;
-          }
-          htmlAssetsByPath.set(outputPath, content);
-          const analysis = record.htmlAnalysisByOutputPath?.get(outputPath);
-          if (analysis) {
-            htmlAnalysisByPath.set(
-              outputPath,
-              cloneHtmlOutputAnalysis(analysis),
-            );
-          }
-        }
-      } catch (err) {
-        errors.push(err as Error);
-      }
-    }
-
-    return { errors, htmlAssetsByPath, htmlAnalysisByPath };
-  }
-}

package/build/utils/content-files.ts

@@ -1,170 +0,0 @@
-import fs from 'fs';
-import path from 'path';
-import {
-  getProcessedExts,
-  getSourceOutputPaths,
-  getSourceTargetPaths,
-  isBuildContentSource,
-  shouldSkipContentFile,
-} from '../source-model';
-import { getPublicDir, toPosix } from './paths';
-
-function walkFiles(dir: string): string[] {
-  return fs.readdirSync(dir).flatMap(file => {
-    const fullPath = path.join(dir, file);
-    if (fs.statSync(fullPath).isDirectory()) {
-      return walkFiles(fullPath);
-    }
-    return [fullPath];
-  });
-}
-
-export function getContentFiles(
-  contentDir: string,
-  codeExtensions: string[],
-): string[] {
-  const extensions = ['md', 'html', ...codeExtensions];
-  const pattern = new RegExp(`\\.(${extensions.join('|')})$`);
-
-  return walkFiles(contentDir).filter(filePath => {
-    return pattern.test(path.basename(filePath));
-  });
-}
-
-export function getBuildContentFiles(
-  contentDir: string,
-  codeExtensions: string[],
-): string[] {
-  const processedExts = getProcessedExts(codeExtensions);
-
-  return getContentFiles(contentDir, codeExtensions).filter(filePath =>
-    isBuildContentSource(filePath, processedExts),
-  );
-}
-
-export function getContentSourceOutputRelPaths(
-  contentDir: string,
-  filePath: string,
-  codeExtensions: string[],
-): Set<string> {
-  const processedExts = getProcessedExts(codeExtensions);
-  const buildContentFiles = new Set(
-    getBuildContentFiles(contentDir, codeExtensions),
-  );
-
-  return getSourceOutputPaths({
-    contentDir,
-    filePath,
-    processedExts,
-    buildContent: buildContentFiles.has(filePath),
-  });
-}
-
-export function getContentOutputRelPaths(
-  contentDir: string,
-  codeExtensions: string[],
-): Set<string> {
-  const buildContentFiles = getBuildContentFiles(contentDir, codeExtensions);
-  const processedExts = getProcessedExts(codeExtensions);
-  const outputs = new Set<string>();
-
-  for (const filePath of buildContentFiles) {
-    for (const outputPath of getSourceOutputPaths({
-      contentDir,
-      filePath,
-      processedExts,
-      buildContent: true,
-    })) {
-      outputs.add(outputPath);
-    }
-  }
-
-  for (const filePath of walkFiles(contentDir)) {
-    const ext = path.extname(filePath).slice(1).toLowerCase();
-    if (processedExts.has(ext)) {
-      continue;
-    }
-    outputs.add(toPosix(path.relative(contentDir, filePath)));
-  }
-
-  return outputs;
-}
-
-function getPublicFiles(publicDir: string): string[] {
-  if (!fs.existsSync(publicDir)) {
-    return [];
-  }
-
-  return walkFiles(publicDir);
-}
-
-export function getFilesByExtensions(
-  rootDir: string,
-  extensions: string[],
-): string[] {
-  if (!fs.existsSync(rootDir)) {
-    return [];
-  }
-
-  const extensionSet = new Set(extensions.map(ext => ext.toLowerCase()));
-
-  return walkFiles(rootDir).filter(filePath => {
-    const ext = path.extname(filePath).slice(1).toLowerCase();
-    return extensionSet.has(ext);
-  });
-}
-
-export function getValidInternalTargets(
-  contentDir: string,
-  contentFiles: string[],
-  codeExtensions: string[],
-): Set<string> {
-  const targets = new Set<string>();
-  const processedExts = getProcessedExts(codeExtensions);
-
-  for (const filePath of contentFiles) {
-    for (const targetPath of getSourceTargetPaths({
-      kind: 'content',
-      rootDir: contentDir,
-      filePath,
-      processedExts,
-      buildContent: true,
-    })) {
-      targets.add(targetPath);
-    }
-  }
-
-  // Include non-processed assets in content/ that are copied directly to dist/.
-  for (const filePath of walkFiles(contentDir)) {
-    const ext = path.extname(filePath).slice(1).toLowerCase();
-    if (processedExts.has(ext)) {
-      continue;
-    }
-    for (const targetPath of getSourceTargetPaths({
-      kind: 'content',
-      rootDir: contentDir,
-      filePath,
-      processedExts,
-      buildContent: false,
-    })) {
-      targets.add(targetPath);
-    }
-  }
-
-  const publicDir = getPublicDir();
-  for (const filePath of getPublicFiles(publicDir)) {
-    for (const targetPath of getSourceTargetPaths({
-      kind: 'public',
-      rootDir: publicDir,
-      filePath,
-      processedExts,
-      buildContent: true,
-    })) {
-      targets.add(targetPath);
-    }
-  }
-
-  return targets;
-}
-
-export { shouldSkipContentFile };