@abreen/tada 1.6.0 → 1.6.4

package/build/bundle.ts

@@ -9,7 +9,7 @@ import {
   getDistDir,
   toPosix,
 } from './utils/paths';
-import { deriveTheme } from './utils/derive-theme';
+import { deriveTheme, deriveLinkHue } from './utils/derive-theme';
 import type { PluginBuilder } from 'bun';
 import type { SiteVariables } from './types';
 import timezones from '../src/timezone/timezones.json' with { type: 'json' };
@@ -27,6 +27,12 @@ function renderThemeScss(siteVariables: SiteVariables): string {
   const iconColorHoverDark = `hsl(${tintHue}deg ${(6 * tintAmount) / 100}% 60%)`;
   const iconColorTranslucentDark = `hsl(${tintHue}deg ${(85 * tintAmount) / 100}% 90%)`;
 
+  const linkHue = deriveLinkHue(tintHue);
+  const linkColor = `hsl(${linkHue}deg 44.4% 49.4%)`;
+  const linkColorHover = `hsl(${linkHue}deg 34% 60%)`;
+  const linkColorDark = `hsl(${linkHue}deg 50% 72%)`;
+  const linkColorHoverDark = `hsl(${linkHue}deg 40% 80%)`;
+
   const rendered = _.template(template)({
     ...theme,
     tintHue,
@@ -36,6 +42,10 @@ function renderThemeScss(siteVariables: SiteVariables): string {
     iconColorDark,
     iconColorHoverDark,
     iconColorTranslucentDark,
+    linkColor,
+    linkColorHover,
+    linkColorDark,
+    linkColorHoverDark,
   });
 
   const tmpDir = fs.mkdtempSync(path.join(os.tmpdir(), 'tada-'));

package/build/external-links-plugin.ts

@@ -1,5 +1,5 @@
 import type MarkdownIt from 'markdown-it';
-import type Token from 'markdown-it/lib/token.mjs';
+import Token from 'markdown-it/lib/token.mjs';
 import { makeLogger } from './log';
 import type { SiteVariables } from './types';
 
@@ -9,38 +9,197 @@ export default function externalLinks(
   md: MarkdownIt,
   siteVariables: SiteVariables,
 ): void {
-  function addClass(token: Token): void {
-    if (token.type === 'link_open') {
-      const href = token.attrGet('href');
-      if (!href) {
-        return;
+  function isExternal(href: string): boolean {
+    if (!href.match(/^https?:\/\/.*$/)) {
+      return false;
+    }
+    const url = new URL(href);
+    return !siteVariables.internalDomains?.includes(url.host);
+  }
+
+  function findMatchingClose(children: Token[], openIdx: number): number {
+    let depth = 1;
+    for (let i = openIdx + 1; i < children.length; i++) {
+      if (children[i].type === 'link_open') {
+        depth++;
+      } else if (children[i].type === 'link_close') {
+        depth--;
+        if (depth === 0) {
+          return i;
+        }
       }
+    }
+    return -1;
+  }
+
+  function makeSpanOpen(): Token {
+    const t = new Token('html_inline', '', 0);
+    t.content = '<span class="external-link-tail">';
+    return t;
+  }
 
-      if (href.match(/^https?:\/\/.*$/)) {
-        const url = new URL(href);
-        if (!siteVariables.internalDomains?.includes(url.host)) {
-          const classAttr = token.attrGet('class');
-          let newClassAttr;
+  function makeSpanClose(): Token {
+    const t = new Token('html_inline', '', 0);
+    t.content = '</span>';
+    return t;
+  }
+
+  // Wrap the trailing word of an external link in
+  // <span class="external-link-tail"> so the icon (added via that span's
+  // ::after) stays glued to the last word and doesn't wrap on its own.
+  // The span is inserted inside any inline-formatting elements (em,
+  // strong, code, ...) that are still open at the split point, so the
+  // resulting markup stays nested.
+  function wrapTail(linkChildren: Token[]): Token[] | null {
+    if (linkChildren.length === 0) {
+      return null;
+    }
 
-          if (classAttr) {
-            newClassAttr = classAttr + ' external';
-          } else {
-            newClassAttr = 'external';
-          }
+    // Find the rightmost split char (space or hyphen) in a text token,
+    // skipping any candidate that would produce an empty tail (e.g. a
+    // trailing hyphen with no content after it).
+    let splitTokenIdx = -1;
+    let splitCharIdx = -1;
+    for (let i = linkChildren.length - 1; i >= 0; i--) {
+      const tok = linkChildren[i];
+      if (tok.type !== 'text') {
+        continue;
+      }
+      const text = tok.content;
+      const hasLaterTokens = i < linkChildren.length - 1;
+      let foundIdx = -1;
+      for (let j = text.length - 1; j >= 0; j--) {
+        const c = text[j];
+        if (c !== ' ' && c !== '-') {
+          continue;
+        }
+        if (j < text.length - 1 || hasLaterTokens) {
+          foundIdx = j;
+          break;
+        }
+      }
+      if (foundIdx !== -1) {
+        splitTokenIdx = i;
+        splitCharIdx = foundIdx;
+        break;
+      }
+    }
 
-          log.debug`${href} -> "${newClassAttr}"`;
-          token.attrSet('class', newClassAttr);
+    if (splitTokenIdx === -1) {
+      // No space anywhere in the link's text. Wrap the whole content.
+      return [makeSpanOpen(), ...linkChildren, makeSpanClose()];
+    }
 
-          log.debug`${href} -> target="_blank"`;
-          token.attrSet('target', '_blank');
+    // Find where to put the span close: walk forward from the split
+    // point tracking nesting depth (locally opened elements after the
+    // split). The span must close before any -1 token that would close
+    // an element that was already open at the split point.
+    let spanCloseIdx = linkChildren.length;
+    let depth = 0;
+    for (let i = splitTokenIdx + 1; i < linkChildren.length; i++) {
+      const tok = linkChildren[i];
+      if (tok.nesting === 1) {
+        depth++;
+      } else if (tok.nesting === -1) {
+        if (depth > 0) {
+          depth--;
+        } else {
+          spanCloseIdx = i;
+          break;
         }
       }
     }
 
-    token.children?.map(addClass);
+    const splitToken = linkChildren[splitTokenIdx];
+    const before = splitToken.content.slice(0, splitCharIdx + 1);
+    const after = splitToken.content.slice(splitCharIdx + 1);
+
+    const result: Token[] = [];
+
+    // Tokens before the split, unchanged.
+    for (let i = 0; i < splitTokenIdx; i++) {
+      result.push(linkChildren[i]);
+    }
+
+    // The "before" part of the split text token.
+    if (before.length > 0) {
+      const beforeToken = new Token('text', '', 0);
+      beforeToken.content = before;
+      result.push(beforeToken);
+    }
+
+    result.push(makeSpanOpen());
+
+    // The "after" part of the split text token.
+    if (after.length > 0) {
+      const afterToken = new Token('text', '', 0);
+      afterToken.content = after;
+      result.push(afterToken);
+    }
+
+    // Tokens between the split and the span close.
+    for (let i = splitTokenIdx + 1; i < spanCloseIdx; i++) {
+      result.push(linkChildren[i]);
+    }
+
+    result.push(makeSpanClose());
+
+    // Tokens from the span close position to the end.
+    for (let i = spanCloseIdx; i < linkChildren.length; i++) {
+      result.push(linkChildren[i]);
+    }
+
+    return result;
+  }
+
+  function processChildren(children: Token[]): Token[] {
+    const result: Token[] = [];
+    let i = 0;
+    while (i < children.length) {
+      const token = children[i];
+
+      if (token.type !== 'link_open') {
+        result.push(token);
+        i++;
+        continue;
+      }
+
+      const href = token.attrGet('href');
+      if (!href || !isExternal(href)) {
+        result.push(token);
+        i++;
+        continue;
+      }
+
+      const classAttr = token.attrGet('class');
+      const newClassAttr = classAttr ? `${classAttr} external` : 'external';
+      token.attrSet('class', newClassAttr);
+      token.attrSet('target', '_blank');
+      log.debug`${href} -> "${newClassAttr}"`;
+
+      const closeIdx = findMatchingClose(children, i);
+      if (closeIdx === -1) {
+        result.push(token);
+        i++;
+        continue;
+      }
+
+      const linkContent = children.slice(i + 1, closeIdx);
+      const wrapped = wrapTail(linkContent);
+
+      result.push(token);
+      result.push(...(wrapped ?? linkContent));
+      result.push(children[closeIdx]);
+      i = closeIdx + 1;
+    }
+    return result;
   }
 
   md.core.ruler.push('external_links', state => {
-    state.tokens.map(addClass);
+    state.tokens.forEach(token => {
+      if (token.children) {
+        token.children = processChildren(token.children);
+      }
+    });
   });
 }

package/build/utils/derive-theme.ts

@@ -14,6 +14,9 @@ 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;
+
 function clamp(v: number, min: number, max: number): number {
   return Math.min(Math.max(v, min), max);
 }
@@ -75,6 +78,11 @@ export function deriveTheme(cssColor: string): DerivedTheme {
   };
 }
 
+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 getTextOnColor(cssColor: string): '#fff' | '#000' {
   const parsed = parse(cssColor);
   if (!parsed) {

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/build/utils/render.ts

@@ -46,12 +46,17 @@ const log = makeLogger(import.meta.url);
 
 const REQUIRED_FRONT_MATTER_FIELDS = ['title'];
 
+function isWatchMode(assetFiles: string[]): boolean {
+  return assetFiles.some(f => f.includes('watch-reload-client'));
+}
+
 interface TemplateParametersInput {
   pageVariables: Record<string, unknown>;
   siteVariables: SiteVariables;
   content: string | null;
   applyBasePath: (subPath: string) => string;
   subPath: string;
+  isWatchMode: boolean;
 }
 
 function resolveAuthor(
@@ -101,6 +106,7 @@ function createTemplateParameters({
   content,
   applyBasePath,
   subPath,
+  isWatchMode,
 }: TemplateParametersInput): Record<string, unknown> {
   return {
     vars: siteVariables.vars || {},
@@ -111,6 +117,7 @@ function createTemplateParameters({
     page: pageVariables,
     content,
     applyBasePath,
+    isWatchMode,
   };
 }
 
@@ -188,12 +195,14 @@ export function renderPlainTextPageAsset({
   const applyBasePath = createApplyBasePath(siteVariables);
 
   log.info`Rendering page ${B`${subPath + ext}`}`;
+  const watchMode = isWatchMode(assetFiles);
   const { content, pageVariables, tocItems, alertIds } = renderPlainTextContent(
     filePath,
     subPath,
     siteVariables,
     applyBasePath,
     validInternalTargets,
+    watchMode,
     {
       validateInternalLinks: extensionIsMarkdown(ext.toLowerCase()),
       traceCache,
@@ -223,6 +232,7 @@ export function renderPlainTextPageAsset({
     content,
     applyBasePath,
     subPath,
+    isWatchMode: watchMode,
   });
 
   const templateHtml = render(
@@ -286,6 +296,7 @@ export function renderCodePageAsset({
     content,
     applyBasePath,
     subPath,
+    isWatchMode: isWatchMode(assetFiles),
   });
 
   const html = injectAssetTags(
@@ -339,6 +350,7 @@ function renderPlainTextContent(
   siteVariables: SiteVariables,
   applyBasePath: (subPath: string) => string,
   validInternalTargets: Set<string>,
+  isWatchMode: boolean,
   {
     validateInternalLinks = true,
     traceCache,
@@ -396,6 +408,7 @@ function renderPlainTextContent(
     content: null,
     applyBasePath,
     subPath,
+    isWatchMode,
   });
   const pageVariablesProcessed: Record<string, unknown> = Object.entries(
     pageVariables,
@@ -446,6 +459,7 @@ function renderPlainTextContent(
     content: strippedContent,
     applyBasePath,
     subPath,
+    isWatchMode,
   });
 
   if (traceCache && contentDir && distDir) {
@@ -649,6 +663,7 @@ export function renderLiterateJavaPageAsset({
     content: contentHtml,
     applyBasePath,
     subPath,
+    isWatchMode: isWatchMode(assetFiles),
   });
 
   const templateHtml = render('literate.html', templateParameters) as string;

package/init/content/markdown.md

@@ -182,10 +182,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 +417,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/package.json

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

package/src/_alerts.scss

@@ -39,10 +39,15 @@
   }
 
   a {
-    text-decoration-color: var(--fg-color);
+    @include link-underline;
+    color: var(--fg-color);
 
     &:hover {
-      text-decoration-color: inherit;
+      color: var(--fg2-color);
+    }
+
+    &:active {
+      color: var(--link-active-color);
     }
   }
 
@@ -60,6 +65,7 @@
 }
 
 .alert .title::before {
+  content: '';
   left: 8px;
   top: 8px;
   position: absolute;
@@ -68,12 +74,11 @@
 }
 
 .alert.warning .title::before {
-  content: var(--icon-warning);
+  @include contained-mask(var(--icon-warning));
 }
 
 i.warning {
-  background: var(--icon-warning);
-  background-size: contain;
+  @include contained-mask(var(--icon-warning));
   display: inline-block;
   height: 1em;
   width: 1em;
@@ -81,7 +86,7 @@ i.warning {
 }
 
 .alert.note .title::before {
-  content: var(--icon-note);
+  @include contained-mask(var(--icon-note));
 }
 
 .alert .title {

package/src/_base.scss

@@ -66,22 +66,18 @@ html {
 }
 
 a {
-  color: var(--fg-color);
-  text-decoration-color: var(--fg2-color);
-  text-decoration-thickness: 1.5px;
+  color: var(--link-color);
+  text-decoration-line: none;
 
   @media (hover: hover) {
     &:hover {
-      color: var(--fg2-color);
+      color: var(--link-color-hover);
+      @include link-underline;
     }
   }
-}
 
-a:active {
-  color: var(--link-active-color);
-
-  @media (hover: hover) {
-    text-decoration-color: var(--link-active-color);
+  &:active {
+    color: var(--link-active-color);
   }
 }
 
@@ -146,6 +142,7 @@ details .content {
   details summary {
     &:hover {
       color: var(--fg2-color);
+      @include link-underline;
     }
 
     &:active {

package/src/_layout.scss

@@ -156,10 +156,31 @@ body.literate main table {
       .text {
         color: var(--fg2-color);
         text-decoration: underline;
-        text-decoration-color: var(--fg2-color);
         text-decoration-thickness: 1px;
         text-underline-offset: 3px;
       }
+
+      &:hover .text {
+        color: var(--link-color-hover);
+      }
+
+      &:active .text {
+        color: var(--link-active-color);
+      }
+
+      &:active .avatar {
+        border-color: var(--link-active-color);
+      }
+
+      &:focus-visible {
+        outline: none;
+      }
+
+      &:focus-visible .text,
+      &:focus-visible .avatar {
+        outline: 2px solid var(--theme-color);
+        outline-offset: 2px;
+      }
     }
 
     .avatar {
@@ -167,6 +188,7 @@ body.literate main table {
       height: 24px;
       vertical-align: middle;
       margin-left: 4px;
+      border: 1px solid transparent;
     }
   }
 }

package/src/_mixins.scss

@@ -2,3 +2,44 @@
   -webkit-user-select: $val;
   user-select: $val;
 }
+
+@mixin link-underline {
+  text-decoration-line: underline;
+  text-decoration-color: currentColor;
+  text-decoration-thickness: 1px;
+  text-underline-offset: 0.11rem;
+}
+
+@mixin subdued-link {
+  color: var(--fg-color);
+  text-decoration-line: none;
+
+  @media (hover: hover) {
+    &:hover {
+      color: var(--fg2-color);
+      @include link-underline;
+    }
+  }
+
+  &:active {
+    color: var(--link-active-color);
+  }
+}
+
+@mixin contained-icon {
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: center center;
+}
+
+@mixin contained-mask($url) {
+  -webkit-mask-image: $url;
+  mask-image: $url;
+  -webkit-mask-size: contain;
+  mask-size: contain;
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+  -webkit-mask-position: center center;
+  mask-position: center center;
+  background-color: currentColor;
+}