@abreen/tada 1.6.2 → 1.6.4

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/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.2",
+  "version": "1.6.4",
   "type": "module",
   "description": "A static site generator",
   "license": "MIT",

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/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);