@abreen/tada 1.0.0

package/src/anchor/index.ts

@@ -0,0 +1,34 @@
+function getElements(parent: HTMLElement): HTMLHeadingElement[] {
+  return Array.from(parent.querySelectorAll('h1, h2, h3, h4, h5, h6'));
+}
+
+export default (window: Window) => {
+  const elements = getElements(window.document.body);
+  if (elements == null) {
+    return;
+  }
+
+  elements.forEach(el => {
+    if (!el.id) {
+      return;
+    }
+
+    const link = window.document.createElement('a');
+    link.className = 'heading-anchor';
+    link.href = `#${el.id}`;
+    link.title = 'Link to this heading';
+    link.setAttribute('aria-label', 'Link to this heading');
+
+    // Move all existing child nodes into the link
+    while (el.firstChild) {
+      link.appendChild(el.firstChild);
+    }
+    el.appendChild(link);
+
+    link.addEventListener('click', () => {
+      el.focus();
+    });
+  });
+
+  return () => {};
+};

package/src/anchor/style.scss

@@ -0,0 +1,48 @@
+@import '../_mixins.scss';
+
+.heading-anchor {
+  position: relative;
+  display: inline-block;
+  color: var(--fg-color);
+  text-decoration: none;
+}
+
+.heading-anchor::after {
+  content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="hsl(20 8% 8%)" fill-rule="evenodd" clip-rule="evenodd" d="M10.975 14.51a1.05 1.05 0 0 0 0-1.485 2.95 2.95 0 0 1 0-4.172l3.536-3.535a2.95 2.95 0 1 1 4.172 4.172l-1.093 1.092a1.05 1.05 0 0 0 1.485 1.485l1.093-1.092a5.05 5.05 0 0 0-7.142-7.142L9.49 7.368a5.05 5.05 0 0 0 0 7.142c.41.41 1.075.41 1.485 0zm2.05-5.02a1.05 1.05 0 0 0 0 1.485 2.95 2.95 0 0 1 0 4.172l-3.5 3.5a2.95 2.95 0 1 1-4.171-4.172l1.025-1.025a1.05 1.05 0 0 0-1.485-1.485L3.87 12.99a5.05 5.05 0 0 0 7.142 7.142l3.5-3.5a5.05 5.05 0 0 0 0-7.142 1.05 1.05 0 0 0-1.485 0z"/></svg>');
+  display: inline-block;
+  height: 0.75em;
+  width: 0.75em;
+  margin-left: 4px;
+  opacity: 0;
+}
+
+@media (prefers-color-scheme: dark) {
+  .heading-anchor::after {
+    content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="hsl(20 20% 90%)" fill-rule="evenodd" clip-rule="evenodd" d="M10.975 14.51a1.05 1.05 0 0 0 0-1.485 2.95 2.95 0 0 1 0-4.172l3.536-3.535a2.95 2.95 0 1 1 4.172 4.172l-1.093 1.092a1.05 1.05 0 0 0 1.485 1.485l1.093-1.092a5.05 5.05 0 0 0-7.142-7.142L9.49 7.368a5.05 5.05 0 0 0 0 7.142c.41.41 1.075.41 1.485 0zm2.05-5.02a1.05 1.05 0 0 0 0 1.485 2.95 2.95 0 0 1 0 4.172l-3.5 3.5a2.95 2.95 0 1 1-4.171-4.172l1.025-1.025a1.05 1.05 0 0 0-1.485-1.485L3.87 12.99a5.05 5.05 0 0 0 7.142 7.142l3.5-3.5a5.05 5.05 0 0 0 0-7.142 1.05 1.05 0 0 0-1.485 0z"/></svg>');
+  }
+}
+
+.heading-anchor:focus::after,
+.heading-anchor:focus-visible::after {
+  opacity: 1;
+}
+
+@media (hover: hover) {
+  h1:hover .heading-anchor::after,
+  h2:hover .heading-anchor::after,
+  h3:hover .heading-anchor::after,
+  h4:hover .heading-anchor::after,
+  h5:hover .heading-anchor::after,
+  h6:hover .heading-anchor::after {
+    opacity: 1;
+  }
+
+  h1:hover .heading-anchor,
+  h2:hover .heading-anchor,
+  h3:hover .heading-anchor,
+  h4:hover .heading-anchor,
+  h5:hover .heading-anchor,
+  h6:hover .heading-anchor {
+    color: var(--fg-color);
+  }
+}

package/src/code/README.md

@@ -0,0 +1,5 @@
+# The `code` component
+
+At build time, Markdown comments in Java (`///`) are rendered to HTML,
+but with the original source code hidden in a data attribute, allowing
+client-side JavaScript to restore them when a selection is copied.

package/src/code/index.ts

@@ -0,0 +1,113 @@
+export default async function mount(window: Window): Promise<void> {
+  const { document } = window;
+  if (!document.body.classList.contains('code')) {
+    return;
+  }
+
+  document.addEventListener('copy', (e: ClipboardEvent) => {
+    const selection = window.getSelection();
+    if (!selection || selection.rangeCount === 0) {
+      return;
+    }
+
+    const fragment = selection.getRangeAt(0).cloneContents();
+    const proseEls = fragment.querySelectorAll('[data-prose-source]');
+    if (proseEls.length === 0) {
+      return;
+    }
+
+    proseEls.forEach(el => {
+      const pre = document.createElement('pre');
+      pre.textContent = el.getAttribute('data-prose-source');
+      el.replaceWith(pre);
+    });
+
+    fragment.querySelectorAll('.line-number').forEach(el => el.remove());
+
+    const lines: string[] = [];
+    const container = fragment.querySelector('.code-body');
+    const topNodes = container ? container.childNodes : fragment.childNodes;
+    topNodes.forEach(node => {
+      if (node.nodeType === Node.TEXT_NODE) {
+        const text = node.textContent ?? '';
+        if (text.trim()) {
+          lines.push(text);
+        }
+      } else if (node instanceof Element) {
+        const codeRows = node.querySelectorAll('.code-row');
+        if (codeRows.length > 0) {
+          codeRows.forEach(row => {
+            const codeEl = row.querySelector('code');
+            if (codeEl) {
+              const text = codeEl.textContent ?? '';
+              lines.push(text === '\u00A0' ? '' : text);
+            }
+          });
+        } else {
+          lines.push(node.textContent ?? '');
+        }
+      }
+    });
+
+    e.clipboardData!.setData('text/plain', lines.join('\n'));
+    e.preventDefault();
+  });
+
+  const downloadLink = document.querySelector<HTMLAnchorElement>(
+    '.file-header a[download]',
+  );
+  if (downloadLink && 'showSaveFilePicker' in window) {
+    downloadLink.addEventListener('click', async (e: MouseEvent) => {
+      e.preventDefault();
+      try {
+        const handle = await (window as any).showSaveFilePicker({
+          suggestedName: downloadLink.download,
+        });
+        const response = await fetch(downloadLink.href);
+        const writable = await handle.createWritable();
+        await writable.write(await response.blob());
+        await writable.close();
+      } catch (err: any) {
+        if (err.name !== 'AbortError') {
+          throw err;
+        }
+      }
+    });
+  }
+
+  const codeBody = document.querySelector<HTMLElement>('.code-body');
+  const scrollbar = document.querySelector<HTMLElement>('.code-scrollbar');
+  if (!codeBody || !scrollbar) {
+    return;
+  }
+
+  const inner = scrollbar.firstElementChild as HTMLElement;
+  let syncing = false;
+
+  function updateScrollbar(): void {
+    const hasOverflow = codeBody!.scrollWidth > codeBody!.clientWidth;
+    scrollbar!.style.display = hasOverflow ? '' : 'none';
+    inner.style.width = codeBody!.scrollWidth + 'px';
+  }
+
+  codeBody.addEventListener('scroll', () => {
+    if (syncing) {
+      return;
+    }
+    syncing = true;
+    scrollbar!.scrollLeft = codeBody!.scrollLeft;
+    syncing = false;
+  });
+
+  scrollbar.addEventListener('scroll', () => {
+    if (syncing) {
+      return;
+    }
+    syncing = true;
+    codeBody!.scrollLeft = scrollbar!.scrollLeft;
+    syncing = false;
+  });
+
+  new ResizeObserver(updateScrollbar).observe(codeBody);
+  updateScrollbar();
+}

package/src/code/style.scss

@@ -0,0 +1,101 @@
+body.code .file-header {
+  h1 {
+    margin: 0;
+    padding: 0;
+    font-size: inherit;
+    font-weight: inherit;
+  }
+}
+
+body.code .code-body {
+  background: var(--bg2-color);
+  border-radius: var(--border-radius);
+  display: grid;
+  grid-template-columns: minmax(100%, max-content);
+  overflow-x: auto;
+  overscroll-behavior-x: none;
+  scrollbar-width: none;
+  &::-webkit-scrollbar {
+    display: none;
+  }
+  -webkit-text-size-adjust: 100%;
+  text-size-adjust: 100%;
+}
+
+body.code .code-scrollbar {
+  position: sticky;
+  bottom: 0;
+  overflow-x: auto;
+  overscroll-behavior-x: none;
+  z-index: 10;
+
+  > div {
+    height: 1px;
+  }
+}
+
+body.code .code-body > pre {
+  margin: 0;
+}
+
+body.code pre {
+  display: block;
+  padding: 0;
+  overflow: visible;
+}
+
+body.code pre code {
+  padding-right: var(--gap);
+}
+
+body.code .code-prose {
+  background-color: var(--bg2-color);
+  display: grid;
+  grid-template-columns: var(--code-gutter-width) 1fr;
+
+  .code-prose-gutter {
+    position: sticky;
+    left: 0;
+    z-index: 1;
+    background: var(--bg2-color);
+    border-right: 1px solid var(--fg2-color);
+    margin-right: var(--gap);
+  }
+
+  .code-prose-content {
+    color: var(--fg2-color);
+    min-width: 0;
+    position: relative;
+    padding: var(--gap) var(--gap) var(--gap)
+      calc(var(--prose-indent, 0ch) - 0.2em);
+
+    *:last-of-type {
+      margin-bottom: 0;
+    }
+
+    ol,
+    ul,
+    li {
+      margin: 0;
+    }
+
+    dfn {
+      color: inherit;
+    }
+
+    code {
+      background: inherit;
+      padding: inherit;
+    }
+  }
+}
+
+body.code .code-search-index {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  clip-path: inset(50%);
+  white-space: nowrap;
+}

package/src/code.scss

@@ -0,0 +1,54 @@
+@import './_mixins.scss';
+
+body.code,
+body.literate {
+  --code-gutter-width: 4rem;
+}
+
+.file-header {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--gap);
+  border: 1px solid var(--fg2-color);
+  border-radius: var(--border-radius);
+  padding: var(--gap);
+  margin-bottom: var(--gap);
+
+  tt,
+  code {
+    background: none;
+    padding: 0;
+  }
+}
+
+.code-row {
+  display: grid;
+  grid-template-columns: var(--code-gutter-width) 1fr;
+}
+
+.line-number {
+  cursor: pointer;
+  display: block;
+  padding: 0 0.75em 0 0.75em;
+  text-align: right;
+  @include user-select(none);
+  color: var(--fg2-color);
+  font-family: var(--mono-font);
+  text-decoration: none;
+  position: sticky;
+  left: 0;
+  z-index: 1;
+  background: var(--bg2-color);
+  border-right: 1px solid var(--fg2-color);
+  margin-right: var(--gap);
+
+  &:hover {
+    color: var(--fg-color);
+  }
+
+  &:target {
+    background: var(--fg2-color);
+    color: var(--bg-color);
+  }
+}

package/src/header/README.md

@@ -0,0 +1,8 @@
+# The `header` component
+
+Use the [Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API)
+to animate the `<details>` element in the header.
+
+This component doesn't provide any other functionality related to the header.
+If JavaScript is turned off in the web browser, the `<details>` element is still
+functional but with no animation.

package/src/header/index.ts

@@ -0,0 +1,43 @@
+import { getElement } from '../util';
+
+export default (window: Window) => {
+  const header: HTMLElement = getElement(window.document, 'header');
+  const details = getElement(header, 'details') as HTMLDetailsElement;
+  const summary = getElement(details, 'summary') as HTMLElement;
+
+  function close() {
+    details.open = false;
+  }
+
+  function handleDetailsClick(e: MouseEvent) {
+    if (details.open) {
+      e.stopPropagation();
+    }
+  }
+  details.addEventListener('click', handleDetailsClick);
+
+  function handleWindowClick() {
+    if (details.open) {
+      close();
+    }
+  }
+  window.addEventListener('click', handleWindowClick);
+
+  function handleWindowKeyDown(e: KeyboardEvent) {
+    if (
+      e.key === 'Escape' &&
+      details.open &&
+      details.contains(document.activeElement)
+    ) {
+      close();
+      summary.focus();
+    }
+  }
+  window.addEventListener('keydown', handleWindowKeyDown);
+
+  return () => {
+    window.removeEventListener('keydown', handleWindowKeyDown);
+    window.removeEventListener('click', handleWindowClick);
+    details.removeEventListener('click', handleDetailsClick);
+  };
+};

package/src/header/style.scss

@@ -0,0 +1,228 @@
+@import '../_mixins.scss';
+
+:root {
+  --header-collapsed-height: 45px;
+}
+
+header {
+  backdrop-filter: var(--backdrop-filter);
+  background: var(--bg-color-translucent);
+
+  width: 100%;
+  position: fixed;
+  top: 0;
+
+  z-index: 1000;
+
+  display: grid;
+  grid-template-columns: 1fr;
+
+  view-transition-name: site-header;
+}
+
+header details summary {
+  display: flex;
+  align-items: center;
+  height: var(--header-collapsed-height);
+  padding: 0;
+  list-style-type: none;
+  cursor: pointer;
+  position: relative;
+  container-type: inline-size;
+
+  @media (hover: hover) {
+    &:hover {
+      color: inherit;
+    }
+  }
+
+  &:focus-visible {
+    outline-offset: -2px;
+  }
+}
+
+header nav {
+  display: flex;
+  flex-wrap: wrap;
+  @include user-select(none);
+  gap: var(--gap);
+  margin: var(--gap);
+}
+
+header nav div {
+  flex: 1 1 150px;
+}
+
+header nav ul {
+  list-style-type: none;
+  padding: 0;
+  margin: 8px 0 0 0;
+}
+
+header nav ul li {
+  margin: 0;
+}
+
+header nav a {
+  border: none;
+  display: inline;
+  color: var(--fg-color);
+  text-decoration: none;
+}
+
+@media (hover: hover) {
+  header nav a {
+    &:hover {
+      color: var(--fg2-color);
+    }
+
+    &:active {
+      color: var(--link-active-color);
+    }
+  }
+}
+
+header nav a.external {
+  border: none;
+}
+
+@media only screen and (min-width: 740px) {
+  header details nav {
+    min-height: 100px;
+  }
+}
+
+header nav div > p {
+  font-style: italic;
+  @include user-select(none);
+  border-bottom: 1px solid var(--fg-color);
+  padding-bottom: 2px;
+}
+
+header details summary::-webkit-details-marker {
+  display: none;
+}
+
+header details summary::marker {
+  content: '';
+}
+
+header summary::after {
+  order: -1;
+  height: 24px;
+  content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><polyline points='9 18 15 12 9 6' stroke='hsl(20deg 8% 8%)' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
+  margin-left: var(--gap);
+  margin-right: 8px;
+}
+
+@media (prefers-color-scheme: dark) {
+  header summary::after {
+    content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><polyline points='9 18 15 12 9 6' stroke='hsl(20deg 20% 90%)' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
+  }
+}
+
+@media (hover: hover) {
+  header details summary:hover:not(:has(.results-container:hover)) {
+    background: var(--bg2-color);
+  }
+
+  header:has(details[open]):hover {
+    background: var(--bg-color-translucent);
+  }
+}
+
+header details[open] summary::after {
+  transform: rotate(90deg);
+}
+
+header .content {
+  position: relative;
+}
+
+header summary .logo {
+  flex: 0 0 auto;
+  color: #fff;
+  background: var(--theme-color);
+  padding: 1px 6px;
+  margin: 0 8px 0 0;
+  font-size: var(--font-size-smaller);
+  font-weight: 600;
+  pointer-events: none;
+}
+
+header summary .site-title {
+  flex: 1 1 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  min-width: 0;
+  font-weight: 500;
+  pointer-events: none;
+  margin: 0 8px 0 0;
+}
+
+@container (max-width: 520px) {
+  header summary .site-title {
+    display: none;
+  }
+}
+
+header summary .to-top-container {
+  display: none;
+  align-items: center;
+  height: var(--header-collapsed-height);
+  pointer-events: none;
+  white-space: nowrap;
+
+  &:has(.is-visible) {
+    display: flex;
+    pointer-events: auto;
+  }
+}
+
+header summary .search-controls {
+  margin-left: auto;
+  pointer-events: auto;
+  display: flex;
+  align-items: center;
+  height: var(--header-collapsed-height);
+  padding: 0 var(--gap);
+  min-width: 0;
+
+  input.search {
+    width: 180px;
+
+    @container (max-width: 280px) {
+      display: none;
+    }
+  }
+}
+
+header .results-container {
+  position: absolute;
+  top: var(--header-collapsed-height);
+  left: 0;
+  right: 0;
+  box-sizing: border-box;
+  max-width: 640px;
+  margin: 0 auto;
+  padding: var(--gap);
+  pointer-events: none;
+  z-index: 1000;
+
+  @container (max-width: 260px) {
+    display: none;
+  }
+}
+
+header ol {
+  padding: 0;
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+
+  .excerpt {
+    line-height: 2.5ex;
+    height: 5ex;
+  }
+}

package/src/index.ts

@@ -0,0 +1,73 @@
+import './style.scss';
+import './layout.scss';
+
+import './anchor/style.scss';
+import './code.scss';
+import './code/style.scss';
+import './literate/style.scss';
+import './header/style.scss';
+import './print/style.scss';
+import './question/style.scss';
+import './search/style.scss';
+import './timezone/style.scss';
+import './toc/style.scss';
+
+import mountTableOfContents from './toc';
+import mountSearch from './search';
+import mountHeader from './header';
+import mountPrint from './print';
+import mountTop from './top';
+import mountAnchor from './anchor';
+import mountQuestion from './question';
+import mountTimezone from './timezone';
+import mountCode from './code';
+
+import { scheduleTask, formatDuration } from './util';
+
+const COMPONENTS = {
+  toc: mountTableOfContents,
+  search: mountSearch,
+  header: mountHeader,
+  print: mountPrint,
+  top: mountTop,
+  anchor: mountAnchor,
+  question: mountQuestion,
+  timezone: mountTimezone,
+  code: mountCode,
+};
+
+let startTime = -1;
+
+document.addEventListener('DOMContentLoaded', async () => {
+  startTime = window.performance.now();
+
+  const entries = Object.entries(COMPONENTS);
+
+  const failed: Record<string, any> = {};
+
+  const mountPromises = entries.map(([name, mount]) => {
+    return new Promise<void>((resolve, reject) => {
+      scheduleTask(async () => {
+        try {
+          mount(window);
+          resolve();
+          return;
+        } catch (err) {
+          failed[name] = String(err);
+        }
+        reject();
+      });
+    });
+  });
+
+  await Promise.allSettled(mountPromises);
+
+  for (const [name, reason] of Object.entries(failed)) {
+    console.error(`Failed to mount ${name} component:`, reason);
+  }
+
+  if (window.IS_DEV) {
+    const diff = window.performance.now() - startTime;
+    console.info(`Components mounted in ${formatDuration(diff)}`);
+  }
+});