@abreen/tada 1.15.4 → 1.15.5

package/package.json

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

package/src/hash-target.ts

@@ -0,0 +1,29 @@
+/*
+ * markdown-it-anchor's slugifier uses encodeURIComponent() so generated
+ * heading IDs can safely be used as URL hashes.
+ *
+ * Tada also allows raw HTML, so an author can create a decoded ID like
+ * <h2 id="hello world">Hello</h2>. A link to that target becomes
+ * #hello%20world, and getElementById('hello%20world') would not find it.
+ */
+export function getHashTarget(
+  document: Document,
+  hash: string,
+): HTMLElement | null {
+  const id = hash.slice(1);
+  if (!id) {
+    return null;
+  }
+
+  const rawTarget = document.getElementById(id);
+  if (rawTarget) {
+    return rawTarget;
+  }
+
+  try {
+    const decodedId = decodeURIComponent(id);
+    return decodedId === id ? null : document.getElementById(decodedId);
+  } catch {
+    return null;
+  }
+}

package/src/index.ts

@@ -21,6 +21,7 @@ import mountTop from './top';
 import mountNavigate from './navigate';
 import mountPageUpdate from './page-update';
 import { mountPerPageComponents } from './navigate/lifecycle';
+import { getHashTarget } from './hash-target';
 
 import { scheduleTask, formatDuration } from './util';
 
@@ -68,11 +69,7 @@ document.addEventListener('DOMContentLoaded', async () => {
   // 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();
-    }
+    getHashTarget(window.document, window.location.hash)?.scrollIntoView();
   }
 
   for (const [name, reason] of Object.entries(failed)) {

package/src/navigate/index.ts

@@ -13,6 +13,7 @@ import {
   setHistoryIndex,
 } from './runtime';
 import { globals } from '../globals';
+import { getHashTarget } from '../hash-target';
 
 function findAnchor(event: MouseEvent): HTMLAnchorElement | null {
   const target = event.target as HTMLElement | null;
@@ -78,7 +79,11 @@ export default function mountNavigate(window: Window): () => void {
       clearSearch(window.document);
       closeHeaderDetails(window.document);
       if (url.hash) {
-        globals.setLocationHash(window, url.hash);
+        if (url.hash === window.location.hash) {
+          getHashTarget(window.document, url.hash)?.scrollIntoView();
+        } else {
+          globals.setLocationHash(window, url.hash);
+        }
       }
       return;
     }
@@ -112,12 +117,8 @@ export default function mountNavigate(window: Window): () => void {
       }
 
       // Same page, different hash: fall back to the fragment target
-      const hash = window.location.hash.slice(1);
-      if (hash) {
-        const el = window.document.getElementById(hash);
-        if (el) {
-          el.scrollIntoView();
-        }
+      if (window.location.hash) {
+        getHashTarget(window.document, window.location.hash)?.scrollIntoView();
       } else {
         window.scrollTo({ top: 0 });
       }