@abreen/tada 1.6.2 → 1.7.0

package/build/utils/front-matter.ts

@@ -57,11 +57,39 @@ function parseFrontMatterPlainText(rawContent: string): RawParsedFrontMatter {
   };
 }
 
+function parseFrontMatterStandard(rawContent: string): RawParsedFrontMatter {
+  const lines = rawContent.split(/\r?\n/);
+
+  // Caller has already verified lines[0] === '---'
+  for (let i = 1; i < lines.length; i++) {
+    if (lines[i].trimEnd() === '---') {
+      return {
+        frontMatter: lines.slice(1, i).join('\n'),
+        content: lines.slice(i + 1).join('\n'),
+      };
+    }
+  }
+
+  throw new Error(
+    'Front matter starts with --- but no closing --- delimiter was found',
+  );
+}
+
 export function parseFrontMatter(
   rawContent: string,
   ext: string,
 ): RawParsedFrontMatter {
   if (extensionIsMarkdown(ext) || ext === '.html') {
+    // Detect standard YAML front matter (first line is exactly ---,
+    // ignoring trailing whitespace and \r)
+    const firstNewline = rawContent.indexOf('\n');
+    const firstLine =
+      firstNewline === -1 ? rawContent : rawContent.slice(0, firstNewline);
+
+    if (firstLine.trimEnd() === '---') {
+      return parseFrontMatterStandard(rawContent);
+    }
+
     return parseFrontMatterPlainText(rawContent);
   } else {
     // unknown type, return raw

package/build/utils/markdown.ts

@@ -36,6 +36,22 @@ function capitalize(str: string): string {
   return str[0].toUpperCase() + str.slice(1);
 }
 
+const MAX_FOOTNOTES = 35;
+
+export function footnoteLabel(oneBasedIndex: number): string {
+  if (oneBasedIndex < 1 || oneBasedIndex > MAX_FOOTNOTES) {
+    throw new Error(
+      `Tada supports at most ${MAX_FOOTNOTES} footnotes per page ` +
+        `(9 digits + 26 capital letters), but footnote ${oneBasedIndex} ` +
+        `was requested. Reduce the number of footnotes on this page.`,
+    );
+  }
+  if (oneBasedIndex <= 9) {
+    return String(oneBasedIndex);
+  }
+  return String.fromCharCode('A'.charCodeAt(0) + (oneBasedIndex - 10));
+}
+
 export function createMarkdown(
   siteVariables: SiteVariables,
   options: CreateMarkdownOptions = {},
@@ -196,24 +212,22 @@ export function createMarkdown(
   });
 
   /*
-   * Customize markdown-it-footnote renderer
+   * Customize markdown-it-footnote renderer.
+   *
+   * Footnotes are labeled with single characters from Inter's ss06
+   * stylistic set: 1-9 for the first nine footnotes, then A-Z. The
+   * default <ol> numbering is suppressed via CSS and we inject a
+   * marker span per item so the label sequence can mix digits and
+   * letters.
    */
   markdown.renderer.rules.footnote_block_open = () =>
     '<div class="footnotes"><p class="title">Footnotes</p><ol>';
 
   markdown.renderer.rules.footnote_block_close = () => '</ol></div>';
 
-  // Change appearance of reference
-  const caption = markdown.renderer.rules.footnote_caption!;
-  markdown.renderer.rules.footnote_caption = (
-    tokens: Token[],
-    idx: number,
-    options: Options,
-    env: unknown,
-    self: Renderer,
-  ) => {
-    const str = caption(tokens, idx, options, env, self);
-    return str.slice(1, str.length - 1);
+  markdown.renderer.rules.footnote_caption = (tokens: Token[], idx: number) => {
+    const id = tokens[idx].meta!.id as number;
+    return footnoteLabel(id + 1);
   };
 
   const footnoteRef = markdown.renderer.rules.footnote_ref!;
@@ -224,11 +238,26 @@ export function createMarkdown(
     env: unknown,
     self: Renderer,
   ) =>
+    // Prepend a non-breaking space so the reference link cannot wrap
+    // away from the word it follows.
+    '\u00a0' +
     footnoteRef(tokens, idx, options, env, self)
       .replace('<sup class="footnote-ref">', '')
       .replace('</sup>', '')
       .replace('<a href="', '<a class="footnote-ref" href="');
 
+  markdown.renderer.rules.footnote_open = (tokens: Token[], idx: number) => {
+    const id = tokens[idx].meta!.id as number;
+    const label = footnoteLabel(id + 1);
+    const refid = id + 1;
+    return (
+      `<li id="fn${refid}" class="footnote-item">` +
+      `<span class="footnote-marker" aria-hidden="true">${label}</span> `
+    );
+  };
+
+  markdown.renderer.rules.footnote_close = () => '</li>\n';
+
   const footnoteAnchor = markdown.renderer.rules.footnote_anchor!;
   markdown.renderer.rules.footnote_anchor = (
     tokens: Token[],

package/init/content/index.md

@@ -1,8 +1,10 @@
+---
 title: Home
 description: The home page for <%= site.title %>.
 author: alex
 published: 2026-03-20
 toolName: Tada
+---
 
 ## Welcome
 

package/init/content/labs/00/VowelCounter.java.md

@@ -1,9 +1,11 @@
+---
 parent: /labs/00/index.html
 parentLabel: Lab 0
 title: Counting vowels
 author: alex
 description: An example of a literate Java program that takes predefined input.
 stdin: "hello, world!\n"
+---
 
 A Java program can process input in different ways: it could open a file and
 read it; it could open a network connection and wait for data from another

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

@@ -1,8 +1,10 @@
+---
 parent: /labs/index.html
 parentLabel: Labs
 title: Lab 0
 author: alex
 description: An example lab page for <%= site.title %>.
+---
 
 In this lab, we'll explore the [`VowelCounter` program](./VowelCounter.java.html).
 

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

@@ -1,8 +1,10 @@
+---
 parent: /labs/index.html
 parentLabel: Labs
 title: Lab 1
 author: alex
 description: A lab page for <%= site.title %> demonstrating the trace feature.
+---
 
 In this lab, we'll examine memory diagrams.
 

package/init/content/labs/index.md

@@ -1,6 +1,8 @@
+---
 title: Labs
 author: alex
 description: An example page for <%= site.title %>.
+---
 
 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

package/init/content/lectures/01/Pair.java.md

@@ -1,6 +1,8 @@
+---
 title: A generic `Pair` class
 author: alex
 description: An example of a literate Java program.
+---
 
 <!---
 You may hide code from the generated HTML page but still include it in the

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

@@ -1,8 +1,10 @@
+---
 parentLabel: Lectures
 parent: /lectures/index.html
 title: Lecture 1
 description: An example lecture page.
 author: alex
+---
 
 Here is a sample description of the topics covered at the first lecture.
 

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

@@ -1,8 +1,10 @@
+---
 parentLabel: Lectures
 parent: /lectures/index.html
 title: Lecture 2
 description: An example lecture page demonstrating partials.
 author: alex
+---
 
 Here is a page constructed from multiple partials.
 

package/init/content/lectures/index.md

@@ -1,6 +1,8 @@
+---
 title: Lectures
 author: alex
 description: An example page for <%= site.title %>.
+---
 
 <%= renderTimeZoneChooser() %>
 

package/init/content/markdown.md

@@ -1,18 +1,22 @@
+---
 title: Markdown Examples
 description: Examples of Markdown syntax supported by Tada.
 author: alex
 published: 2026-03-20
 toc: true
+---
 
 Markdown and HTML files in the `content/` directory
 must contain ["front matter"][front-matter] (YAML-formatted metadata).
 For example, this file's first five lines look like this:
 
 ```text
+---
 title: Markdown Examples
-description: Examples of Markdown syntax supported by tada.
+description: Examples of Markdown syntax supported by Tada.
 toc: true
 author: alex
+---
 ```
 
 This page contains a table of contents because the front matter
@@ -182,10 +186,10 @@ footnote.[^example-footnote]
 Definition lists are supported using the same syntax as Presto:
 
 Stack
-: Last-in first-out collection.
+: Last-in first-out collection.[^footnote-2]
 
 Queue
-: First-in first-out collection.
+: First-in first-out collection.[^footnote-3]
 
 Binary tree
 : Hierarchical structure where each node has up to two children.
@@ -417,7 +421,15 @@ Here's a time range:
 
 
 [^example-footnote]: Footnotes render inside a numbered list at the bottom of
-the page.
+                     the page.
+
+    Here's a second paragraph.
+
+    Here's a third paragraph.
+
+[^footnote-2]: Also known as "LIFO".
+
+[^footnote-3]: Also known as "FIFO".
 
 [front-matter]: https://www.npmjs.com/package/front-matter
 [markdown-it]: https://markdown-it.github.io/

package/init/content/problem_sets/index.html

@@ -1,7 +1,9 @@
+---
 title: Problem Sets
 author: alex
 description: An example page for <%= site.title %> which is not generated.
 skip: true
+---
 
 <p>
     For convenience or backwards compatibility, you can write standard HTML

package/package.json

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

package/src/_alerts.scss

@@ -1,7 +1,7 @@
 @use 'mixins' as *;
 
 .alert {
-  border: 3px solid var(--bg2-color);
+  border: 2px solid var(--bg2-color);
   position: relative;
   margin: 1rem 0;
 }

package/src/_base.scss

@@ -92,7 +92,7 @@ code {
   font-size: var(--mono-font-size);
   background: var(--bg2-color);
   border-radius: var(--mono-border-radius);
-  padding: 0.12em 0.25em;
+  padding: var(--mono-padding);
   overflow-wrap: anywhere;
 }
 
@@ -139,18 +139,16 @@ details .content {
 }
 
 @media (hover: hover) {
-  details summary {
-    &:hover {
-      color: var(--fg2-color);
-      @include link-underline;
-    }
-
-    &:active {
-      color: var(--link-active-color);
-    }
+  details summary:hover {
+    color: var(--fg2-color);
+    @include link-underline;
   }
 }
 
+details summary:active {
+  color: var(--link-active-color);
+}
+
 main details {
   margin-bottom: 1rem;
   border-radius: var(--border-radius);

package/src/_mixins.scss

@@ -42,4 +42,8 @@
   -webkit-mask-position: center center;
   mask-position: center center;
   background-color: currentColor;
+  // The icon's visible fill is the background color, which browsers strip
+  // when printing by default. Preserve it so masked icons remain visible.
+  -webkit-print-color-adjust: exact;
+  print-color-adjust: exact;
 }

package/src/header/index.ts

@@ -35,9 +35,21 @@ export default (window: Window) => {
   }
   window.addEventListener('keydown', handleWindowKeyDown);
 
+  function handleDetailsFocusOut(e: FocusEvent) {
+    if (!details.open) {
+      return;
+    }
+    const next = e.relatedTarget as Node | null;
+    if (!next || !details.contains(next)) {
+      close();
+    }
+  }
+  details.addEventListener('focusout', handleDetailsFocusOut);
+
   return () => {
     window.removeEventListener('keydown', handleWindowKeyDown);
     window.removeEventListener('click', handleWindowClick);
     details.removeEventListener('click', handleDetailsClick);
+    details.removeEventListener('focusout', handleDetailsFocusOut);
   };
 };

package/src/print/style.scss

@@ -1,13 +1,10 @@
-:root {
-  --print-font-size: 15px;
-}
+@use '../mixins' as *;
 
 @media print {
   html,
-  body,
-  main,
-  section {
+  body {
     background: none !important;
+    color: #000;
   }
 
   hr {
@@ -27,15 +24,22 @@
     margin-top: 0;
   }
 
-  body {
-    font-size: var(--print-font-size);
-    color: #000;
+  main a:not(.heading-anchor):not(.footnote-ref):not(.line-number) {
+    @include link-underline;
   }
 
-  pre {
-    font-size: var(--print-font-size);
-    border: none;
-    padding: 0;
+  pre,
+  tt,
+  :not(pre) > code {
+    border: 1px solid #ccc;
+  }
+
+  // .alert strips the default padding from inline code (since it also
+  // strips the background). In print we add a border, so restore the
+  // padding so the border doesn't hug the text.
+  .alert .content tt,
+  .alert .content code {
+    padding: var(--mono-padding);
   }
 
   .footnotes {
@@ -50,18 +54,15 @@
     display: none !important;
   }
 
-  main details {
-    border: 2px solid #000;
-  }
-
-  main details .alert {
-    border: none;
-    padding: 0;
+  details,
+  .alert {
+    border-color: #000 !important;
   }
 
   section {
     border: none;
     padding: 0;
+    margin: 0;
     width: 100%;
   }
 
@@ -69,7 +70,8 @@
     display: none;
   }
 
-  a.external::after {
-    display: none;
+  .external-link-tail::after,
+  a.external:not(:has(.external-link-tail))::after {
+    content: none;
   }
 }

package/src/style.scss

@@ -91,14 +91,34 @@ a.external:not(:has(.external-link-tail))::after {
   margin: 0;
 }
 
+.footnotes ol {
+  list-style: none;
+  padding-left: 0;
+}
+
 .footnotes li {
+  position: relative;
+  padding-left: 1.8em;
   margin-bottom: 8px;
 }
 
 a.footnote-ref {
-  vertical-align: super;
-  border-bottom: none;
+  vertical-align: text-bottom;
   font-size: 0.8em;
+  font-weight: 600;
+}
+
+.footnote-marker {
+  @include user-select(none);
+  position: absolute;
+  left: 0;
+  top: 0;
+  font-weight: 500;
+}
+
+a.footnote-ref,
+.footnote-marker {
+  font-feature-settings: 'ss06';
 }
 
 .footnote-item {
@@ -108,7 +128,10 @@ a.footnote-ref {
   }
 }
 
-a.footnote-ref,
+a.footnote-ref {
+  @include user-select(none);
+}
+
 .footnotes .footnote-backref {
   display: inline-block;
   @include user-select(none);

package/src/toc/style.scss

@@ -61,10 +61,11 @@ body.code .toc ol a {
   .toc ol li:has(a):hover a {
     color: var(--fg2-color);
   }
+}
 
-  .toc ol li a:active {
-    color: var(--link-active-color);
-  }
+.toc ol li:has(a):active,
+.toc ol li:has(a):active a {
+  color: var(--link-active-color);
 }
 
 @media (min-width: 900px) {

package/templates/_theme.scss

@@ -57,6 +57,7 @@
   --mono-font-size: 0.94em;
   --mono-line-height: 1.5;
   --mono-border-radius: 0.375em;
+  --mono-padding: 0.12em 0.25em;
 
   // SVG icons
   // Mask icons (color-agnostic, painted via background-color: currentColor)