@abreen/tada 1.19.5 → 1.20.0

package/README.md

@@ -62,8 +62,6 @@ A static site generator. The successor to Presto.
   * Highlights the heading currently being viewed
 
 - Extended Markdown syntax
-  * `<<< details ... <<<` renders a collapsible box
-  * `::: section ... :::` renders a special section with a fancy background
   * `!!! note ... !!!` and `!!! warning ... !!!` render alert boxes
   * `??? question ... ???` renders a Q&A section; answer is hidden until click
     - To display clickable multiple choice options, use a [task list][task-list]

package/build/bundle.ts

@@ -3,11 +3,7 @@ import path from 'path';
 import { compileTemplate } from './lodash-template';
 import * as sass from 'sass';
 import { getPackageDir, toPosix } from './utils/paths';
-import {
-  deriveTheme,
-  deriveLinkHue,
-  deriveTraceLineActiveHue,
-} from './utils/derive-theme';
+import { deriveTheme } from './utils/derive-theme';
 import type { PluginBuilder } from 'bun';
 import type { SiteVariables } from './types';
 import timezones from '../src/timezone/timezones.json' with { type: 'json' };
@@ -38,14 +34,6 @@ function getBundleNaming(): string {
   return `[name].bundle.tada-${version}.[ext]`;
 }
 
-function formatCssNumber(value: number, precision = 4): string {
-  if (Number.isInteger(value)) {
-    return String(value);
-  }
-
-  return value.toFixed(precision).replace(/\.?0+$/, '');
-}
-
 // Returns the rendered SCSS source of the theme module (`config/theme`)
 function renderThemeScss(siteVariables: SiteVariables): string {
   const templatePath = path.join(getPackageDir(), 'templates/_theme.scss');
@@ -54,14 +42,6 @@ function renderThemeScss(siteVariables: SiteVariables): string {
   const tintHue = siteVariables.tintHue ?? 190;
   const tintAmount = siteVariables.tintAmount ?? 100;
 
-  const linkHue = formatCssNumber(deriveLinkHue(tintHue));
-  const linkColor = `hsl(${linkHue}deg 66% 38%)`;
-  const linkColorHover = `hsl(${linkHue}deg 56% 49%)`;
-  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 customFontFaces = renderCustomFontFaceScss(siteVariables.fontOverrides);
   const customFontTuning = renderCustomFontTuningScss(
     siteVariables.fontOverrides,
@@ -71,12 +51,6 @@ function renderThemeScss(siteVariables: SiteVariables): string {
     ...theme,
     tintHue,
     tintAmount,
-    linkColor,
-    linkColorHover,
-    linkColorDark,
-    linkColorHoverDark,
-    bgTraceLineActive,
-    bgTraceLineActiveDark,
     serifFontStack: getSerifFontStack(siteVariables.fontOverrides),
     serifMonoFontStack: getSerifMonoFontStack(siteVariables.fontOverrides),
     serifFontFeatureSettings: renderFontFeatureSettings(

package/build/source-records.ts

@@ -203,7 +203,7 @@ export function createPublicRecord(
   };
 }
 
-export function collectSourceOutputs(
+function collectSourceOutputs(
   assets: Asset[],
   traceOutputs: ReadonlyMap<string, string>,
 ): Map<string, OutputContent> {
@@ -223,7 +223,7 @@ function cloneHtmlOutputAnalysis(
   return { outgoingTargets: new Set(analysis.outgoingTargets) };
 }
 
-export function collectSourceHtmlAnalysis(
+function collectSourceHtmlAnalysis(
   assets: Asset[],
 ): Map<string, HtmlOutputAnalysis> {
   const htmlAnalysisByOutputPath = new Map<string, HtmlOutputAnalysis>();

package/build/toc-plugin.ts

@@ -23,6 +23,14 @@ interface AlertItem {
 
 type TocItem = HeadingItem | DinkusItem | AlertItem;
 
+// Net <details> elements an HTML block opens. Markdown between a raw <details>
+// and its </details> is parsed as separate tokens, so track the nesting here.
+function detailsDepthChange(html: string): number {
+  const opened = html.match(/<details[\s>]/gi)?.length ?? 0;
+  const closed = html.match(/<\/details\s*>/gi)?.length ?? 0;
+  return opened - closed;
+}
+
 export function tocPlugin(md: MarkdownIt): void {
   md.core.ruler.push('toc_collector', state => {
     if (!state.env) {
@@ -31,14 +39,27 @@ export function tocPlugin(md: MarkdownIt): void {
 
     const tokens = state.tokens;
     const items: TocItem[] = [];
-    const containerStack: string[] = [];
+    let containerDepth = 0;
+    let detailsDepth = 0;
     const usedAlertIds = new Map<string, number>();
 
     for (let i = 0; i < tokens.length; i++) {
       const token = tokens[i];
 
-      // Headings (included at any nesting level)
+      // Nothing inside a <details> is listed
+      if (token.type === 'html_block') {
+        detailsDepth = Math.max(
+          0,
+          detailsDepth + detailsDepthChange(token.content),
+        );
+        continue;
+      }
+
+      // Headings (included at any container depth, but not inside a <details>)
       if (token.type === 'heading_open') {
+        if (detailsDepth > 0) {
+          continue;
+        }
         const inline = tokens[i + 1];
         if (!inline || inline.type !== 'inline') {
           continue;
@@ -56,22 +77,20 @@ export function tocPlugin(md: MarkdownIt): void {
         continue;
       }
 
-      // Thematic breaks / dinkuses (only at top level)
+      // Thematic breaks / dinkuses (not inside an alert, question, or <details>)
       if (
         token.type === 'hr' &&
-        containerStack.length === 0 &&
+        containerDepth === 0 &&
+        detailsDepth === 0 &&
         !state.env?.slides
       ) {
         items.push({ kind: 'dinkus' });
         continue;
       }
 
-      // Alerts (only at top level or directly inside a section)
+      // Alerts (not inside another alert, question, or <details>)
       // Must be checked before generic container tracking below
       if (token.type === 'container_alert_open') {
-        const depth = containerStack.length;
-        const parentIsSection = depth === 1 && containerStack[0] === 'section';
-
         const match = token.info
           .trim()
           .match(/^(note|warning)(?:\s+"(.+)"|\s+(.+))?$/);
@@ -81,7 +100,7 @@ export function tocPlugin(md: MarkdownIt): void {
           // Assign IDs to every alert, including those excluded from the TOC.
           const id = deduplicateId(usedAlertIds, textToId(title || type));
           token.attrSet('id', id);
-          if (depth === 0 || parentIsSection) {
+          if (containerDepth === 0 && detailsDepth === 0) {
             const displayTitle = title
               ? md.utils.escapeHtml(curlyQuote(title))
               : type === 'warning'
@@ -90,23 +109,19 @@ export function tocPlugin(md: MarkdownIt): void {
             items.push({ kind: 'alert', type, title: displayTitle, id });
           }
         }
-        // Fall through to push 'alert' onto container stack
+        // Fall through to count the alert as a container
       }
 
       // Track container nesting
       if (token.type.startsWith('container_') && token.type.endsWith('_open')) {
-        const containerType = token.type.slice(
-          'container_'.length,
-          -'_open'.length,
-        );
-        containerStack.push(containerType);
+        containerDepth++;
         continue;
       }
       if (
         token.type.startsWith('container_') &&
         token.type.endsWith('_close')
       ) {
-        containerStack.pop();
+        containerDepth--;
         continue;
       }
     }

package/build/types.d.ts

@@ -217,10 +217,8 @@ export interface LiterateCodeBlock {
   hidden: boolean;
 }
 
-/** Result from parseLiterateJava */
+/** Result from extractLiterateJavaCode */
 export interface LiterateJavaParseResult {
-  pageVariables: Record<string, unknown>;
-  content: string;
   javaSource: string;
   codeBlocks: LiterateCodeBlock[];
   visibleBlockIndices: number[];

package/build/utils/derive-theme.ts

@@ -1,5 +1,5 @@
-import { parse, oklch, rgb, toGamut, formatHex } from 'culori';
-import type { Oklch, Rgb } from 'culori';
+import { parse, oklch, toGamut, formatHex, wcagContrast } from 'culori';
+import type { Oklch } from 'culori';
 import type { DerivedTheme } from '../types';
 
 // OKLCH lightness range for the theme color used as backgrounds/outlines
@@ -14,36 +14,17 @@ const LIGHT_TEXT_L_MAX = 0.5;
 const DARK_TEXT_L_MIN = 0.7;
 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);
 }
 
-function linearize(c: number): number {
-  return c <= 0.04045 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
-}
-
-function relativeLuminance({ r, g, b }: Rgb): number {
-  return 0.2126 * linearize(r) + 0.7152 * linearize(g) + 0.0722 * linearize(b);
-}
-
-function contrastRatio(l1: number, l2: number): number {
-  return (Math.max(l1, l2) + 0.05) / (Math.min(l1, l2) + 0.05);
-}
-
 // Pick black or white text for use on the given background color.
-// Prefer white unless black has substantially better contrast (1.5x),
+// Prefer white unless black has substantially better contrast (1.9x),
 // which gives white text on saturated mid-tone colors like steelblue and tomato.
 function pickTextColor(bgHex: string): '#fff' | '#000' {
-  const bgRgb = rgb(parse(bgHex)) as Rgb;
-  const bgLum = relativeLuminance(bgRgb);
-  const whiteContrast = contrastRatio(1, bgLum);
-  const blackContrast = contrastRatio(bgLum, 0);
-  return blackContrast > whiteContrast * 1.9 ? '#000' : '#fff';
+  return wcagContrast(bgHex, '#000') > wcagContrast(bgHex, '#fff') * 1.9
+    ? '#000'
+    : '#fff';
 }
 
 function toHex(oklchColor: Oklch): string {
@@ -56,48 +37,20 @@ export function deriveTheme(cssColor: string): DerivedTheme {
     throw new Error(`Invalid color: ${cssColor}`);
   }
 
-  const base = oklch(parsed) as Oklch;
-  const l = base.l;
-  const c = base.c || 0;
-  const h = base.h;
-
-  const lightL = clamp(l, LIGHT_THEME_L_MIN, LIGHT_THEME_L_MAX);
-  const darkL = clamp(l, DARK_THEME_L_MIN, DARK_THEME_L_MAX);
+  // Keep the hue and chroma of the theme color, clamping only its lightness
+  const base = oklch(parsed);
+  const withLightness = (min: number, max: number) =>
+    toHex({ ...base, l: clamp(base.l, min, max) });
 
-  const textLightL = clamp(l, LIGHT_TEXT_L_MIN, LIGHT_TEXT_L_MAX);
-  const textDarkL = clamp(l, DARK_TEXT_L_MIN, DARK_TEXT_L_MAX);
-
-  const themeColorLight = toHex({ mode: 'oklch', l: lightL, c, h });
-  const themeColorDark = toHex({ mode: 'oklch', l: darkL, c, h });
+  const themeColorLight = withLightness(LIGHT_THEME_L_MIN, LIGHT_THEME_L_MAX);
+  const themeColorDark = withLightness(DARK_THEME_L_MIN, DARK_THEME_L_MAX);
 
   return {
     themeColorLight,
     themeColorDark,
-    themeColorTextLight: toHex({ mode: 'oklch', l: textLightL, c, h }),
-    themeColorTextDark: toHex({ mode: 'oklch', l: textDarkL, c, h }),
+    themeColorTextLight: withLightness(LIGHT_TEXT_L_MIN, LIGHT_TEXT_L_MAX),
+    themeColorTextDark: withLightness(DARK_TEXT_L_MIN, DARK_TEXT_L_MAX),
     textOnThemeLight: pickTextColor(themeColorLight),
     textOnThemeDark: pickTextColor(themeColorDark),
   };
 }
-
-export function deriveLinkHue(tintHue: number): number {
-  const diff = ((tintHue - LINK_ANCHOR_HUE + 540) % 360) - 180;
-  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) {
-    throw new Error(`Invalid color: ${cssColor}`);
-  }
-  const gamutMapped = formatHex(toGamut('rgb', 'oklch')(parsed));
-  return pickTextColor(gamutMapped);
-}

package/build/utils/literate-java.ts

@@ -3,11 +3,8 @@ import type Token from 'markdown-it/lib/token.mjs';
 import os from 'os';
 import path from 'path';
 import { execFileSync } from 'child_process';
-import { createMarkdown } from './markdown';
 import { makeLogger } from '../log';
-import { parseFrontMatterAndContent } from './front-matter';
 import type {
-  SiteVariables,
   LiterateJavaParseResult,
   LiterateCodeBlock,
   LiterateRunnerEntry,
@@ -50,29 +47,9 @@ let runnerClassDir: string | null = null;
 
 const MAIN_PATTERN = /\bvoid\s+main\s*\(/m;
 
-export function parseLiterateJava(
-  rawContent: string,
-  siteVariables: SiteVariables,
-): LiterateJavaParseResult {
-  const { pageVariables, content } = parseFrontMatterAndContent(
-    rawContent,
-    '.md',
-  );
-
-  const md = createMarkdown(siteVariables, {
-    validatorOptions: { enabled: false },
-  });
-  const tokens = md.parse(content, {});
-
-  return { pageVariables, content, ...extractLiterateJavaCode(tokens) };
-}
-
 export function extractLiterateJavaCode(
   tokens: Token[],
-): Pick<
-  LiterateJavaParseResult,
-  'javaSource' | 'codeBlocks' | 'visibleBlockIndices'
-> {
+): LiterateJavaParseResult {
   const codeBlocks: LiterateCodeBlock[] = [];
   let javaLine = 1;
 

package/build/utils/markdown.ts

@@ -19,7 +19,6 @@ import katexPlugin from './katex';
 import markdownPartialsPlugin from './markdown-partials';
 import type { RenderDependencyCollector, SiteVariables } from '../types';
 
-const DETAILS_PATTERN = /^details\s+(.*)$/;
 const ALERT_PATTERN = /^(note|warning)(?:\s+"(.+)"|\s+(.+))?$/;
 const QUESTION_PATTERN = /^question\s+(.+)$/;
 const MULTIPLE_CHOICE_MARKER_LENGTH = 4;
@@ -65,40 +64,7 @@ export function createMarkdown(
     .use(superlinkPlugin, siteVariables)
     .use(tocPlugin)
     .use(columnsPlugin)
-    .use(katexPlugin)
-    .use(markdownItContainer, 'details', {
-      marker: '<',
-      validate: function (params: string) {
-        return DETAILS_PATTERN.test(params.trim());
-      },
-
-      render: function (tokens: Token[], idx: number) {
-        const m = tokens[idx].info.trim().match(DETAILS_PATTERN);
-
-        if (tokens[idx].nesting === 1) {
-          return (
-            '<details><summary>' +
-            markdown.renderInline(m![1]) +
-            '</summary><div class="content">\n'
-          );
-        } else {
-          return '</div></details>\n';
-        }
-      },
-    })
-    .use(markdownItContainer, 'section', {
-      marker: ':',
-      validate: function (params: string) {
-        return !!params.trim().match(/^section$/);
-      },
-      render: function (tokens: Token[], idx: number) {
-        if (tokens[idx].nesting === 1) {
-          return '<section>\n';
-        } else {
-          return '</section>\n';
-        }
-      },
-    });
+    .use(katexPlugin);
 
   if (filePath && options.templateParams) {
     markdown.use(markdownPartialsPlugin, {

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

@@ -159,11 +159,12 @@ Please note:
 To provide some confidence that our `Pair` class works, let's write some tests.
 
 <!---
-Code blocks inside of Tada's special containers, like alerts, collapisbles,
-sections, etc. are included in the final .java file.
+Code blocks inside of Tada's special containers, like alerts, or inside raw HTML
+elements, like details, are included in the final .java file.
 -->
 
-<<< details The `test()` helper method
+<details>
+<summary>The <code>test()</code> helper method</summary>
 
 ```
     private static void test(boolean condition) {
@@ -179,7 +180,7 @@ sections, etc. are included in the final .java file.
     }
 ```
 
-<<<
+</details>
 
 <!---
 When Tada renders a literate code block, it trims leading whitespace common to

package/init/content/lectures/index.md

@@ -10,9 +10,12 @@ One-hour lectures are held weekly at <time datetime="17:40">5:40 PM</time>.
 Each lecture is recorded and made available by password-protected link.
 Return to this page to access the recordings.
 
-<<< details More details
+<details>
+<summary>More details</summary>
+
 Here is a sample collapsible with more information.
-<<<
+
+</details>
 
 Following lecture, an optional office hour is held, during which you may ask
 questions and get hints for the problem sets.

package/init/content/markdown.md

@@ -202,24 +202,6 @@ headings, so you may [link directly to a definition](#binary-tree):
 ```
 
 
-### Collapsible section
-
-Use
-
-```
-<<< details Title of *collapsible*
-Here's the content that is visible when expanded.
-<<<
-```
-
-to create a collapsible section (the `<details>` element):
-
-<<< details Title of *collapsible*
-Here's the content that is visible when expanded. (When the page is being
-printed, all collapsibles are automatically opened.)
-<<<
-
-
 ### Alerts
 
 Brightly colored boxes that call attention to specific warnings or information.
@@ -304,45 +286,6 @@ becomes a multiple choice question with clickable options:
 ???
 
 
-### Generic section
-
-Break up a long page by introducing a `<section>` (a standard HTML 5 element)
-which must start with a heading. Generic sections are displayed with a slightly
-different background.
-
-Use
-
-```
-::: section
-
-### Submitting your work
-
-Here are the steps to follow when you are ready to submit your work for
-this problem set.
-
-...
-
-:::
-```
-
-to create:
-
-::: section
-
-### Submitting your work
-
-Here are the steps to follow when you are ready to submit your work for
-this problem set.
-
-1. Step one
-2. Step two
-3. Step three
-4. Step four
-
-Email the files you changed to the course staff.
-
-:::
-
 ### Two-column layout
 
 Use
@@ -383,16 +326,33 @@ Use
 [KaTeX][The library behind math support](https://katex.org/)
 ```
 
-to create a link with a title and a description:
+to render a large, button-styled link with a title and description:
 
 [Home][Back to the front page](index.html)
 [Markdown][You are here](markdown.html)
 [KaTeX][The library behind math support](https://katex.org/)
 
-Superlinks are rendered as block elements, so don't use them inline, in the
-middle of a paragraph, or in a heading. Put them on their own lines, as above.
-A superlink to another website, like the last one above, opens in a new tab and
-shows an external link icon in place of the chevron.
+The syntax is an extension of the normal link syntax, but with a second set of
+square brackets `[ ]` for the superlink description.
+
+Because superlinks are block elements, don't use them in paragraphs or headings.
+Instead, separate them from surrrounding content with blank lines.
+
+Combine superlinks with [two-column layout](#two-column-layout) to achieve a row
+or grid of links:
+
++++
+
+[First][Back to the front page](index.html)
+[Second][Back to the front page](index.html)
+[Third][Back to the front page](index.html)
+
++++
+
+[Fourth][You are here](https://example.com)
+[Fifth][You are here](markdown.html)
+
++++
 
 ---
 

package/package.json

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

package/src/_alerts.scss

@@ -29,10 +29,11 @@
     color: var(--fg-color);
   }
 
-  tt,
-  code {
-    padding: inherit;
-    background: inherit;
+  // Inline code keeps its padding. A border replaces the background chip,
+  // which would clash with the alert's own background.
+  :is(tt, code):not(pre *) {
+    background: none;
+    border: 1px solid var(--fg-color);
   }
 
   a:not(.superlink) {

package/src/_base.scss

@@ -122,14 +122,6 @@ pre {
   }
 }
 
-details .content > *:first-child {
-  margin-top: 0;
-}
-
-details .content > *:last-child {
-  margin-bottom: 0;
-}
-
 details summary {
   padding: var(--details-padding);
   cursor: pointer;
@@ -146,11 +138,6 @@ main details:focus-within {
   outline-offset: 1px;
 }
 
-details .content {
-  padding: 0 var(--details-padding) var(--details-padding)
-    var(--details-padding);
-}
-
 @media (hover: hover) {
   details summary:hover {
     color: var(--fg2-color);
@@ -164,11 +151,33 @@ details summary:active {
 }
 
 main details {
+  padding: 0 var(--details-padding);
   margin-bottom: 1rem;
   border: 2px solid var(--fg-color);
   border-radius: var(--border-radius);
 }
 
+main details[open] {
+  padding-bottom: var(--details-padding);
+}
+
+/*
+ * Plain <details> in content has no .content wrapper, and its body can be bare
+ * text, so the details element supplies the inset. The summary spans the full
+ * width so its whole row stays clickable.
+ */
+main details > summary {
+  margin: 0 calc(-1 * var(--details-padding));
+}
+
+main details > summary + * {
+  margin-top: 0;
+}
+
+main details > :last-child {
+  margin-bottom: 0;
+}
+
 input[type='text'],
 input[type='search'] {
   padding: 4px;

package/src/code/_index.scss

@@ -168,9 +168,11 @@ body.code .code-prose {
       color: inherit;
     }
 
-    code {
-      padding: inherit;
-      background: inherit;
+    // The prose block is on the same background as the inline code chip, so a
+    // border delineates inline code instead
+    :is(tt, code):not(pre *) {
+      background: none;
+      border: 1px solid var(--fg2-color);
     }
   }
 }

package/src/header/_index.scss

@@ -171,6 +171,15 @@ header .content {
   position: relative;
   box-sizing: border-box;
   width: 100cqw;
+  padding: 0 var(--details-padding) var(--details-padding);
+}
+
+header .content > :first-child {
+  margin-top: 0;
+}
+
+header .content > :last-child {
+  margin-bottom: 0;
 }
 
 header summary .logo {

package/src/header/index.ts

@@ -1,7 +1,7 @@
 import { getElement } from '../util';
 import { globals } from '../globals';
 
-export type HeaderTitleState = 'site' | 'page';
+type HeaderTitleState = 'site' | 'page';
 
 export interface HeadingGeometry {
   /** Bottom edge of the page heading block (breadcrumbs, h1, and info) */

package/src/navigate/runtime.ts

@@ -103,11 +103,6 @@ export function closeHeaderDetails(document: Document): void {
   }
 }
 
-export interface NavigationEventDetail {
-  path: string;
-  validators: ResponseValidators;
-}
-
 function dispatchNavigationEvent(
   window: Window,
   validators: ResponseValidators,

package/src/print/_index.scss

@@ -46,18 +46,16 @@
   }
 
   .code-body pre,
-  .code-prose-content code,
   .file-header tt,
   .file-header code {
     border: none;
   }
 
-  // .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);
+  // Alerts and code prose draw a themed border around inline code on screen.
+  // Print uses the same light border as other inline code.
+  .alert .content :is(tt, code):not(pre *),
+  body.code .code-prose .code-prose-content :is(tt, code):not(pre *) {
+    border-color: #ccc;
   }
 
   .footnotes {

package/src/toc/index.ts

@@ -1,10 +1,10 @@
 import { debounce } from '../util';
 import {
   alertToTableItem,
+  getHeadingsAndAlerts,
   getHighlightIndexes,
   headingToTableItem,
   switchCurrent,
-  type Dinkus,
 } from './model';
 
 const LATENCY_MS = 50;
@@ -40,26 +40,6 @@ function scrollIfNeeded(element: HTMLElement, doc: Document) {
   container.scrollTo({ top: desiredScrollTop });
 }
 
-function getHeadingsAndAlerts(
-  parent: HTMLElement,
-): (HTMLHeadingElement | HTMLDivElement)[] {
-  return Array.from(
-    parent.querySelectorAll(
-      '.body h1, .body h2, .body h3, .body h4, .body h5, .body h6, :is(.body, .page-content) > div.alert, .body section > div.alert',
-    ),
-  );
-}
-
-function getTocElements(
-  parent: HTMLElement,
-): (HTMLHeadingElement | HTMLDivElement | HTMLHRElement)[] {
-  return Array.from(
-    parent.querySelectorAll(
-      '.body h1, .body h2, .body h3, .body h4, .body h5, .body h6, :is(.body, .page-content) > div.alert, .body section > div.alert, :is(.body, .page-content) > hr',
-    ),
-  );
-}
-
 /* Calculate how much to offset scroll calculations based on floating header */
 function getHeaderOffset(doc: Document) {
   const element = doc.querySelector('header details summary');
@@ -156,17 +136,12 @@ export default (window: Window) => {
   }
 
   const headingsAndAlerts = getHeadingsAndAlerts(window.document.body);
-  const items = getTocElements(window.document.body)
-    .map(el => {
-      const tag = el.tagName.toLowerCase();
-      if (tag === 'hr') {
-        return { type: 'dinkus' } as Dinkus;
-      } else if (tag === 'div') {
-        return alertToTableItem(el as HTMLElement);
-      } else {
-        return headingToTableItem(el as HTMLHeadingElement);
-      }
-    })
+  const items = headingsAndAlerts
+    .map(el =>
+      el.tagName === 'DIV'
+        ? alertToTableItem(el)
+        : headingToTableItem(el as HTMLHeadingElement),
+    )
     .filter(obj => obj != null);
 
   const highlightIndexes = getHighlightIndexes(items);

package/src/toc/model.ts

@@ -3,18 +3,36 @@ type AlertType = 'warning' | 'note';
 
 export type Alert = { type: AlertType; title: string };
 export type Heading = { level: HeadingLevel; innerHtml: string; id: string };
-export type Dinkus = { type: 'dinkus' };
 
-export function getHighlightIndexes(items: (Heading | Alert | Dinkus)[]) {
+const HEADINGS = '.body h1, .body h2, .body h3, .body h4, .body h5, .body h6';
+
+function isNestedBlock(el: Element): boolean {
+  return el.parentElement?.closest('.alert, .question') != null;
+}
+
+// Like the build-time TOC, nothing inside a <details> is listed, and alerts are
+// only listed outside of another alert or question. Headings are listed at any
+// other depth.
+export function getHeadingsAndAlerts(
+  parent: ParentNode,
+): (HTMLHeadingElement | HTMLDivElement)[] {
+  return Array.from(
+    parent.querySelectorAll<HTMLHeadingElement | HTMLDivElement>(
+      `${HEADINGS}, .body div.alert`,
+    ),
+  ).filter(
+    el =>
+      el.closest('details') == null &&
+      (!el.matches('div.alert') || !isNestedBlock(el)),
+  );
+}
+
+export function getHighlightIndexes(items: (Heading | Alert)[]) {
   const indexes: (number | null)[] = [];
   let currentHeadingIndex: number | null = null;
   let tocIndex = 0;
 
   items.forEach(item => {
-    if (!('level' in item) && item.type === 'dinkus') {
-      return;
-    }
-
     if ('level' in item) {
       currentHeadingIndex = tocIndex;
     }

package/templates/_theme.scss

@@ -8,6 +8,11 @@
   /* TADA_CUSTOM_FONT_TUNING */
 }
 
+// Lean $anchor up to $max toward --tint-hue, most when the tint is 90deg away
+@function lean-toward-tint($anchor, $max) {
+  @return calc(#{$anchor} + #{$max} * sin(var(--tint-hue) - #{$anchor}));
+}
+
 :root {
   --theme-color: <%= themeColorLight %>;
   --theme-color-text: <%= themeColorTextLight %>;
@@ -28,8 +33,11 @@
 
   // Secondary foreground color (lighter)
   --fg2-color: hsl(var(--tint-hue) calc(8% * var(--tint-amount)) 45%);
-  --link-color: <%= linkColor %>;
-  --link-color-hover: <%= linkColorHover %>;
+
+  // Link color; the @supports block below leans the hue toward the tint
+  --link-hue: 216deg;
+  --link-color: hsl(var(--link-hue) 66% 38%);
+  --link-color-hover: hsl(var(--link-hue) 56% 49%);
 
   // Main background color (the color of the page background)
   --bg-color: hsl(var(--tint-hue) calc(65% * var(--tint-amount)) 97%);
@@ -44,7 +52,8 @@
   --bg2-color-translucent: hsl(
     var(--tint-hue) calc(55% * var(--tint-amount)) 92% / 66%
   );
-  --bg-trace-line-active: <%= bgTraceLineActive %>;
+  --trace-line-active-hue: 52deg;
+  --bg-trace-line-active: hsl(var(--trace-line-active-hue) 100% 86%);
   --box-shadow: 0 2px 9px
     hsl(var(--tint-hue) calc(85% * var(--tint-amount)) 10% / 25%);
   --backdrop-filter: blur(10px);
@@ -82,6 +91,14 @@
   color-scheme: light dark;
 }
 
+// Browsers without CSS sin() keep the fixed hues above
+@supports (scale: sin(90deg)) {
+  :root {
+    --link-hue: #{lean-toward-tint(216deg, 9deg)};
+    --trace-line-active-hue: #{lean-toward-tint(52deg, 18deg)};
+  }
+}
+
 :root[data-font-preference='serif'] {
   --font: var(--serif-font);
   --mono-font: var(--serif-mono-font);
@@ -110,8 +127,8 @@
       var(--tint-hue) calc(85% * var(--tint-amount)) 90% / 33%
     );
     --fg2-color: hsl(var(--tint-hue) calc(10% * var(--tint-amount)) 60%);
-    --link-color: <%= linkColorDark %>;
-    --link-color-hover: <%= linkColorHoverDark %>;
+    --link-color: hsl(var(--link-hue) 50% 72%);
+    --link-color-hover: hsl(var(--link-hue) 40% 80%);
     --bg-color: hsl(var(--tint-hue) calc(35% * var(--tint-amount)) 5%);
     --bg-color-translucent: hsl(
       var(--tint-hue) calc(35% * var(--tint-amount)) 10% / 66%
@@ -120,7 +137,7 @@
     --bg2-color-translucent: hsl(
       var(--tint-hue) calc(40% * var(--tint-amount)) 12% / 66%
     );
-    --bg-trace-line-active: <%= bgTraceLineActiveDark %>;
+    --bg-trace-line-active: hsl(var(--trace-line-active-hue) 90% 18%);
     --box-shadow: 0 3px 8px
       hsl(var(--tint-hue) calc(33% * var(--tint-amount)) 8% / 70%);
     --link-active-color: #fff;