@abreen/tada 1.5.8 → 1.6.2

package/build/watch.ts

@@ -12,6 +12,7 @@ import {
   getPublicDir,
   getDistDir,
   getPackageDir,
+  toPosix,
 } from './utils/paths';
 import { isFeatureEnabled } from './features';
 import { bundle } from './bundle';
@@ -55,10 +56,7 @@ export async function runWatch(options: {
       define: { __WEBSOCKET_PORT__: String(WEBSOCKET_PORT) },
     });
     return result.outputs.map(output =>
-      path
-        .relative(getDistDir(), output.path)
-        .split(path.sep)
-        .join(path.posix.sep),
+      toPosix(path.relative(getDistDir(), output.path)),
     );
   }
 
@@ -154,10 +152,7 @@ export async function runWatch(options: {
       return null;
     }
 
-    return path
-      .relative(contentDir, normalizedFilePath)
-      .split(path.sep)
-      .join(path.posix.sep);
+    return toPosix(path.relative(contentDir, normalizedFilePath));
   }
 
   function toPublicRelativePath(filePath: string): string | null {
@@ -169,10 +164,7 @@ export async function runWatch(options: {
     if (!normalizedFilePath.startsWith(normalizedPublicDir)) {
       return null;
     }
-    return path
-      .relative(publicDir, normalizedFilePath)
-      .split(path.sep)
-      .join(path.posix.sep);
+    return toPosix(path.relative(publicDir, normalizedFilePath));
   }
 
   // Watch mode
@@ -354,10 +346,7 @@ export async function runWatch(options: {
             const absPath = path.resolve(filePath);
             if (fs.existsSync(absPath)) {
               copyPublicFile(publicDir, distDir, absPath, contentAssetRelPaths);
-              const rel = path
-                .relative(publicDir, absPath)
-                .split(path.sep)
-                .join(path.posix.sep);
+              const rel = toPosix(path.relative(publicDir, absPath));
               publicRelPaths.add(rel);
             }
           }
@@ -397,10 +386,7 @@ export async function runWatch(options: {
             const absPath = path.resolve(filePath);
             if (fs.existsSync(absPath)) {
               copyPublicFile(publicDir, distDir, absPath, contentAssetRelPaths);
-              const rel = path
-                .relative(publicDir, absPath)
-                .split(path.sep)
-                .join(path.posix.sep);
+              const rel = toPosix(path.relative(publicDir, absPath));
               publicRelPaths.add(rel);
             }
           }
@@ -417,10 +403,7 @@ export async function runWatch(options: {
           const ext = path.extname(absPath).slice(1).toLowerCase();
           if (!processedExtSet.has(ext) && fs.existsSync(absPath)) {
             copyContentFile(contentDir, distDir, absPath, publicRelPaths);
-            const rel = path
-              .relative(contentDir, absPath)
-              .split(path.sep)
-              .join(path.posix.sep);
+            const rel = toPosix(path.relative(contentDir, absPath));
             contentAssetRelPaths.add(rel);
           }
         }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abreen/tada",
-  "version": "1.5.8",
+  "version": "1.6.2",
   "type": "module",
   "description": "A static site generator",
   "license": "MIT",
@@ -29,10 +29,10 @@
     "prepack": "bun run scripts/prepack.ts",
     "lint": "eslint src/ build/ bin/",
     "typecheck": "tsc --noEmit",
-    "test:functional": "python3 -m pip install -q -r functional_tests/requirements.txt && python3 -m pytest functional_tests/ -v -n auto --durations=10",
-    "test:all": "bun test && bun run test:playwright && bun run test:functional",
-    "test:coverage": "rm -rf coverage/unit coverage/functional && bun test --coverage && TADA_COVERAGE=1 python3 -m pip install -q -r functional_tests/requirements.txt && TADA_COVERAGE=1 python3 -m pytest functional_tests/ -v -n auto --durations=10 && bun run scripts/coverage-report.ts",
-    "test:playwright": "bunx playwright test",
+    "test:functional": "bun run scripts/test.ts functional",
+    "test:all": "bun run scripts/test.ts all",
+    "test:coverage": "bun run scripts/test.ts coverage",
+    "test:playwright": "bun run scripts/test.ts playwright",
     "init-example": "bun run bin/tada.ts init example --no-interactive",
     "iew": "if [ -d example ]; then cd example; else bun run init-example && cd example; fi && ../bin/tada.ts watch"
   },
@@ -41,7 +41,8 @@
   },
   "os": [
     "darwin",
-    "linux"
+    "linux",
+    "win32"
   ],
   "dependencies": {
     "@vscode/markdown-it-katex": "^1.1.2",
@@ -77,7 +78,7 @@
   },
   "devDependencies": {
     "@eslint/js": "^10.0.1",
-    "@playwright/test": "^1.59.1",
+    "@playwright/test": "1.56.1",
     "@saintedlama/lcov-parse": "^1.0.1",
     "@types/bun": "^1.3.10",
     "@types/culori": "^4.0.1",

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;
+}

package/src/anchor/style.scss

@@ -1,40 +1,33 @@
-.heading-anchor {
+@use '../mixins' as *;
+
+a.heading-anchor {
   position: relative;
   display: inline-block;
-  color: var(--fg-color);
-  text-decoration: none;
+  @include subdued-link;
 }
 
-.heading-anchor::after {
-  content: var(--icon-anchor);
+a.heading-anchor::after {
+  content: '';
   display: inline-block;
-  height: 0.75em;
-  width: 0.75em;
+  height: 1em;
+  width: 1em;
   margin-left: 4px;
+  vertical-align: middle;
   opacity: 0;
+  @include contained-mask(var(--icon-anchor));
 }
 
-.heading-anchor:focus::after,
-.heading-anchor:focus-visible::after {
+a.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 {
+  h1:hover a.heading-anchor::after,
+  h2:hover a.heading-anchor::after,
+  h3:hover a.heading-anchor::after,
+  h4:hover a.heading-anchor::after,
+  h5:hover a.heading-anchor::after,
+  h6:hover a.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/header/_base.scss

@@ -1,3 +1,5 @@
+@use '../mixins' as *;
+
 :root {
   --header-collapsed-height: 45px;
 }
@@ -31,6 +33,12 @@ header details summary {
   @media (hover: hover) {
     &:hover {
       color: inherit;
+      text-decoration-line: none;
+      background: var(--bg2-color);
+    }
+
+    &:hover .site-title {
+      @include link-underline;
     }
   }
 

package/src/header/style.scss

@@ -26,20 +26,7 @@ header nav ul li {
 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);
-    }
-  }
+  @include subdued-link;
 }
 
 header nav a.external {
@@ -60,10 +47,6 @@ header nav div > p {
 }
 
 @media (hover: hover) {
-  header details summary:hover {
-    background: var(--bg2-color);
-  }
-
   header:has(details[open]):hover {
     background: var(--bg-color-translucent);
   }

package/src/index.ts

@@ -59,6 +59,18 @@ document.addEventListener('DOMContentLoaded', async () => {
   // Mount per-page components
   await mountPerPageComponents(window);
 
+  // On reload with manual scrollRestoration, browsers skip the initial
+  // fragment scroll. Do it ourselves once per-page components have
+  // finished mutating the DOM. On a fresh cold load the browser already
+  // scrolled, so this is a harmless re-align.
+  if (window.location.hash) {
+    const id = window.location.hash.slice(1);
+    const el = window.document.getElementById(id);
+    if (el) {
+      el.scrollIntoView();
+    }
+  }
+
   for (const [name, reason] of Object.entries(failed)) {
     console.error(`Failed to mount ${name} component:`, reason);
   }

package/src/navigate/index.ts

@@ -5,6 +5,11 @@ let currentAbortController: AbortController | null = null;
 let historyIndex = 0;
 let currentPath = '';
 
+// In-memory scroll positions keyed by navIndex. Populated on scroll and
+// consulted by handlePopState so returning to a previous entry via
+// back/forward restores the user's scroll, not just scroll 0.
+const scrollByIndex = new Map<number, number>();
+
 type Direction = 'forward' | 'back';
 
 function findAnchor(event: MouseEvent): HTMLAnchorElement | null {
@@ -145,27 +150,35 @@ async function performNavigation(
     teardownPerPageComponents();
     swapContent(newDoc);
     updateHead(newDoc);
+    const parsed = new URL(url);
+    currentPath = parsed.pathname + parsed.search;
+
     if (isPush) {
       historyIndex++;
-      window.history.pushState({ navIndex: historyIndex }, '', url);
+      // Push without the hash; we add it back below via location.replace
+      // so the browser performs a real fragment navigation that updates
+      // :target and fires hashchange. pushState alone would not do
+      // either of those things.
+      const urlWithoutHash = parsed.origin + parsed.pathname + parsed.search;
+      window.history.pushState({ navIndex: historyIndex }, '', urlWithoutHash);
     }
-    const parsed = new URL(url);
-    currentPath = parsed.pathname + parsed.search;
 
     if (typeof scrollTarget === 'string') {
-      // Hash target
-      const el = document.getElementById(scrollTarget);
-      if (el) {
-        el.scrollIntoView();
-      } else {
-        window.scrollTo({ top: 0 });
-      }
+      // Trigger a real fragment navigation. location.replace overwrites
+      // the current entry's URL in place and runs fragment navigation
+      // (updating :target, firing hashchange, scrolling to the element).
+      // It wipes the entry's state object, so reapply it via
+      // replaceState.
+      const urlWithHash = parsed.pathname + parsed.search + '#' + scrollTarget;
+      window.location.replace(urlWithHash);
+      window.history.replaceState({ navIndex: historyIndex }, '', urlWithHash);
     } else if (typeof scrollTarget === 'number') {
       // Restore scroll position (popstate)
       window.scrollTo({ top: scrollTarget });
     } else {
       window.scrollTo({ top: 0 });
     }
+    scrollByIndex.set(historyIndex, window.scrollY);
   };
 
   const doc = document as Document & {
@@ -261,6 +274,16 @@ async function performNavigation(
 export default function mountNavigate(window: Window): () => void {
   window.history.scrollRestoration = 'manual';
   currentPath = window.location.pathname + window.location.search;
+  scrollByIndex.set(historyIndex, window.scrollY);
+
+  // Track scroll position on every scroll event. We keep the latest
+  // scrollY per navIndex so that back/forward navigation can restore
+  // where the user was, not just scroll 0. Map writes are cheap; no
+  // need to debounce.
+  const saveScroll = () => {
+    scrollByIndex.set(historyIndex, window.scrollY);
+  };
+  window.addEventListener('scroll', saveScroll, { passive: true });
 
   function handleClick(event: MouseEvent) {
     const anchor = findAnchor(event);
@@ -278,7 +301,8 @@ export default function mountNavigate(window: Window): () => void {
       return;
     }
 
-    // Same-page hash links: smooth scroll instead of letting the browser jump
+    // Same-page hash links: handle locally so we can clear search and
+    // close the header without a full SPA fetch.
     const url = new URL(anchor.href);
     if (
       url.pathname === window.location.pathname &&
@@ -293,11 +317,11 @@ export default function mountNavigate(window: Window): () => void {
         details.open = false;
       }
       if (url.hash) {
-        window.history.pushState(null, '', url.hash);
-        const el = window.document.getElementById(url.hash.slice(1));
-        if (el) {
-          el.scrollIntoView({ behavior: 'smooth' });
-        }
+        // location.hash assignment performs a real fragment navigation:
+        // updates :target, fires hashchange (which the TOC listens for),
+        // creates a new history entry, and scrolls to the element.
+        // pushState would do none of those things.
+        window.location.hash = url.hash.slice(1);
       }
       return;
     }
@@ -314,15 +338,8 @@ export default function mountNavigate(window: Window): () => void {
       details.open = false;
     }
 
-    // Save current scroll position and history index
-    window.history.replaceState(
-      {
-        ...window.history.state,
-        scrollY: window.scrollY,
-        navIndex: historyIndex,
-      },
-      '',
-    );
+    // Save current scroll position for the entry we're leaving
+    scrollByIndex.set(historyIndex, window.scrollY);
 
     const hash = url.hash ? url.hash.slice(1) : null;
 
@@ -337,23 +354,23 @@ export default function mountNavigate(window: Window): () => void {
       if (hash) {
         const el = window.document.getElementById(hash);
         if (el) {
-          el.scrollIntoView({ behavior: 'smooth' });
+          el.scrollIntoView();
         }
       } else {
-        window.scrollTo({ top: 0, behavior: 'smooth' });
+        window.scrollTo({ top: 0 });
       }
       return;
     }
     currentPath = newPath;
 
-    const scrollY = event.state?.scrollY ?? null;
     const targetIndex = event.state?.navIndex ?? 0;
     const direction: Direction =
       targetIndex >= historyIndex ? 'forward' : 'back';
     historyIndex = targetIndex;
+    const savedY = scrollByIndex.get(targetIndex);
     performNavigation(
       window.location.href,
-      typeof scrollY === 'number' ? scrollY : null,
+      typeof savedY === 'number' ? savedY : null,
       direction,
       false,
     );
@@ -367,5 +384,6 @@ export default function mountNavigate(window: Window): () => void {
   return () => {
     window.document.removeEventListener('click', handleClick, true);
     window.removeEventListener('popstate', handlePopState);
+    window.removeEventListener('scroll', saveScroll);
   };
 }

package/src/print/style.scss

@@ -65,7 +65,7 @@
     width: 100%;
   }
 
-  .heading-anchor::after {
+  a.heading-anchor::after {
     display: none;
   }
 

package/src/style.scss

@@ -55,42 +55,23 @@ a.disabled {
   @media (hover: hover) {
     &:hover {
       color: var(--fg-color-translucent);
+      text-decoration-line: none;
     }
   }
 }
 
-a.external::after {
-  content: '';
-  background: var(--icon-external-link);
-  background-size: contain;
-  background-repeat: no-repeat;
-  background-position: center center;
-  margin-left: 4px;
-  padding-right: 18px;
-}
-
-@media (hover: hover) {
-  a.external:hover::after {
-    background: var(--icon-external-link-hover);
-    background-size: contain;
-    background-repeat: no-repeat;
-    background-position: center center;
-  }
-}
-
-a.external:active::after {
-  background: var(--icon-external-link-active) !important;
-  background-size: contain !important;
-  background-repeat: no-repeat !important;
-  background-position: center center !important;
+.external-link-tail {
+  white-space: nowrap;
 }
 
-a.external.disabled::after,
-a.external.disabled:active::after {
-  background: var(--icon-external-translucent) !important;
-  background-size: contain !important;
-  background-repeat: no-repeat !important;
-  background-position: center center !important;
+.external-link-tail::after,
+a.external:not(:has(.external-link-tail))::after {
+  content: '';
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  vertical-align: middle;
+  @include contained-mask(var(--icon-external-link));
 }
 
 .footnotes {
@@ -379,21 +360,6 @@ dl {
   dt {
     font-weight: 600;
     color: var(--theme-color-text);
-
-    a {
-      color: var(--theme-color-text);
-      text-decoration-color: var(--theme-color-text);
-
-      @media (hover: hover) {
-        &:hover {
-          text-decoration-color: var(--fg2-color);
-        }
-      }
-
-      &:active {
-        text-decoration-color: var(--link-active-color);
-      }
-    }
   }
 
   dd > *:first-child {
@@ -407,12 +373,17 @@ dfn {
   font-style: italic;
 }
 
-.breadcrumb {
+a.breadcrumb {
   @include user-select(none);
+  @include subdued-link;
 
   &::after {
-    content: var(--icon-breadcrumb);
+    content: '';
+    display: inline-block;
+    width: 1em;
+    height: 1em;
     vertical-align: middle;
+    @include contained-mask(var(--icon-breadcrumb));
   }
 }