@abreen/tada 1.5.2 → 1.5.4

package/build/globals.ts

@@ -85,7 +85,7 @@ function readableDate(date: string | Date | null | undefined): string {
   return `${months[month]} ${day}, ${year}`;
 }
 
-function classNames(obj: Record<string, unknown>): string {
+export function classNames(obj: Record<string, unknown>): string {
   const names: string[] = [];
   for (const key in obj) {
     if (obj[key]) {

package/package.json

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

package/src/code/index.ts

@@ -28,15 +28,16 @@ export default async function mount(window: Window): Promise<void> {
     const container = fragment.querySelector('.code-body');
     const topNodes = container ? container.childNodes : fragment.childNodes;
     topNodes.forEach(node => {
-      if (node.nodeType === Node.TEXT_NODE) {
+      if (node.nodeType === 3 /* Node.TEXT_NODE */) {
         const text = node.textContent ?? '';
         if (text.trim()) {
           lines.push(text);
         }
-      } else if (node instanceof Element) {
-        const codeRows = node.querySelectorAll('.code-row');
+      } else if ('querySelectorAll' in node) {
+        const el = node as Element;
+        const codeRows = el.querySelectorAll('.code-row');
         if (codeRows.length > 0) {
-          codeRows.forEach(row => {
+          codeRows.forEach((row: Element) => {
             const codeEl = row.querySelector('code');
             if (codeEl) {
               const text = codeEl.textContent ?? '';

package/src/index.ts

@@ -42,7 +42,7 @@ document.addEventListener('DOMContentLoaded', async () => {
   const persistentEntries = Object.entries(PERSISTENT_COMPONENTS);
   const persistentPromises = persistentEntries.map(([name, mount]) => {
     return new Promise<void>((resolve, reject) => {
-      scheduleTask(async () => {
+      scheduleTask(window, async () => {
         try {
           mount(window);
           resolve();

package/src/navigate/index.ts

@@ -78,7 +78,8 @@ function swapContent(newDoc: Document): void {
   const newContainer = newDoc.querySelector('.container');
   const oldContainer = document.querySelector('.container');
   if (newContainer && oldContainer) {
-    oldContainer.replaceChildren(...newContainer.childNodes);
+    const imported = document.importNode(newContainer, true);
+    oldContainer.replaceChildren(...imported.childNodes);
   }
 
   // Update body class (carries template name and toc-is-active)
@@ -146,7 +147,7 @@ async function performNavigation(
     updateHead(newDoc);
     if (isPush) {
       historyIndex++;
-      history.pushState({ navIndex: historyIndex }, '', url);
+      window.history.pushState({ navIndex: historyIndex }, '', url);
     }
     const parsed = new URL(url);
     currentPath = parsed.pathname + parsed.search;
@@ -177,7 +178,7 @@ async function performNavigation(
     const headerHeight =
       document.querySelector('header')?.getBoundingClientRect().height ?? 0;
     const titleVisible =
-      titleEl != null && titleEl.getBoundingClientRect().bottom >= headerHeight;
+      titleEl != null && titleEl.getBoundingClientRect().top >= headerHeight;
 
     if (titleVisible) {
       const h1 = titleEl.querySelector('h1') as HTMLElement | null;
@@ -202,24 +203,29 @@ async function performNavigation(
 
     const transition = doc.startViewTransition(() => {
       doSwap();
-      // Apply transition names to the new title if the old one was visible
-      if (titleVisible) {
-        const newTitleEl = document.querySelector('.title-and-info');
-        if (newTitleEl) {
-          const h1 = newTitleEl.querySelector('h1') as HTMLElement | null;
-          const info = newTitleEl.querySelector('.info') as HTMLElement | null;
-          const breadcrumb = newTitleEl.querySelector(
-            'a.breadcrumb',
-          ) as HTMLElement | null;
-          if (h1) {
-            h1.style.viewTransitionName = 'page-title';
-          }
-          if (info) {
-            info.style.viewTransitionName = 'page-info';
-          }
-          if (breadcrumb) {
-            breadcrumb.style.viewTransitionName = 'page-breadcrumb';
-          }
+      // Check title visibility on the new page independently (scroll
+      // has been restored by doSwap, so the position reflects the
+      // destination page)
+      const newTitleEl = document.querySelector('.title-and-info');
+      const newHeaderHeight =
+        document.querySelector('header')?.getBoundingClientRect().height ?? 0;
+      const newTitleVisible =
+        newTitleEl != null &&
+        newTitleEl.getBoundingClientRect().top >= newHeaderHeight;
+      if (newTitleVisible && newTitleEl) {
+        const h1 = newTitleEl.querySelector('h1') as HTMLElement | null;
+        const info = newTitleEl.querySelector('.info') as HTMLElement | null;
+        const breadcrumb = newTitleEl.querySelector(
+          'a.breadcrumb',
+        ) as HTMLElement | null;
+        if (h1) {
+          h1.style.viewTransitionName = 'page-title';
+        }
+        if (info) {
+          info.style.viewTransitionName = 'page-info';
+        }
+        if (breadcrumb) {
+          breadcrumb.style.viewTransitionName = 'page-breadcrumb';
         }
       }
     });

package/src/navigate/lifecycle.ts

@@ -31,7 +31,7 @@ export async function mountPerPageComponents(
 
   const mountPromises = entries.map(([name, mount]) => {
     return new Promise<void>((resolve, reject) => {
-      scheduleTask(async () => {
+      scheduleTask(window, async () => {
         try {
           const cleanup = await mount(window);
           if (typeof cleanup === 'function') {

package/src/navigate/style.scss

@@ -1,5 +1,5 @@
-$shift: 40px;
-$duration: 200ms;
+$shift: 12px;
+$duration: 150ms;
 
 @keyframes slide-out-left {
   to {

package/src/search/index.ts

@@ -106,6 +106,8 @@ function render(
   state: State,
   loading = false,
 ) {
+  const doc = resultsContainer.ownerDocument;
+
   if (state.showResults) {
     resultsContainer.removeAttribute('inert');
   }
@@ -114,12 +116,12 @@ function render(
     '.results',
   ) as HTMLElement | null;
   if (!resultsDiv) {
-    resultsDiv = document.createElement('div');
+    resultsDiv = doc.createElement('div');
     resultsDiv.className = 'results';
     resultsContainer.appendChild(resultsDiv);
   }
 
-  const ol = document.createElement('ol');
+  const ol = doc.createElement('ol');
   ol.id = `${input.name}-results`;
   ol.role = 'listbox';
   ol.tabIndex = -1;
@@ -128,29 +130,29 @@ function render(
   const totalVisible = Math.min(state.results.length, MAX_RESULTS);
 
   state.results.slice(0, MAX_RESULTS).forEach((result, i) => {
-    const a = document.createElement('a');
+    const a = doc.createElement('a');
     a.id = `result-${i}`;
     a.className = 'result';
     a.href = result.url;
     a.tabIndex = 0;
 
-    const titleEl = document.createElement('div');
+    const titleEl = doc.createElement('div');
     titleEl.id = `title-${i}`;
     titleEl.className = 'title';
     titleEl.textContent = result.title;
     a.appendChild(titleEl);
 
-    const subtitle = document.createElement('div');
+    const subtitle = doc.createElement('div');
     subtitle.className = 'subtitle';
     subtitle.innerText = result.url;
     a.appendChild(subtitle);
 
-    const excerpt = document.createElement('div');
+    const excerpt = doc.createElement('div');
     excerpt.className = 'excerpt';
     excerpt.innerHTML = result.excerpt;
     a.appendChild(excerpt);
 
-    const li = document.createElement('li');
+    const li = doc.createElement('li');
     li.id = `option-${i}`;
     li.setAttribute('role', 'option');
     li.setAttribute('aria-selected', 'false');
@@ -161,26 +163,26 @@ function render(
 
     const subsToShow = result.subResults.slice(0, 5);
     if (subsToShow.length > 0) {
-      const subList = document.createElement('ul');
+      const subList = doc.createElement('ul');
       subList.className = 'sub-results';
       for (const sub of subsToShow) {
-        const subA = document.createElement('a');
+        const subA = doc.createElement('a');
         subA.href = sub.url;
         subA.className = 'sub-result';
 
-        const subTitle = document.createElement('div');
+        const subTitle = doc.createElement('div');
         subTitle.className = 'title';
         subTitle.textContent = sub.title;
         subA.appendChild(subTitle);
 
         if (sub.excerpt) {
-          const subExcerpt = document.createElement('div');
+          const subExcerpt = doc.createElement('div');
           subExcerpt.className = 'excerpt';
           subExcerpt.innerHTML = sub.excerpt;
           subA.appendChild(subExcerpt);
         }
 
-        const subLi = document.createElement('li');
+        const subLi = doc.createElement('li');
         subLi.appendChild(subA);
         subList.appendChild(subLi);
       }
@@ -196,12 +198,12 @@ function render(
     '.results-info',
   ) as HTMLSpanElement | null;
   if (!infoSpan) {
-    infoSpan = document.createElement('span');
+    infoSpan = doc.createElement('span');
     infoSpan.className = 'results-info';
 
-    const hint = document.createElement('span');
+    const hint = doc.createElement('span');
     hint.className = 'search-hint';
-    const kbd1 = document.createElement('kbd');
+    const kbd1 = doc.createElement('kbd');
     kbd1.textContent = '/';
     hint.append('Press\u00a0', kbd1, '\u00a0to search');
     infoSpan.appendChild(hint);
@@ -213,7 +215,7 @@ function render(
     '.results-count',
   ) as HTMLSpanElement | null;
   if (!countSpan) {
-    countSpan = document.createElement('span');
+    countSpan = doc.createElement('span');
     countSpan.className = 'results-count';
     infoSpan.insertBefore(countSpan, infoSpan.firstChild);
   }
@@ -248,6 +250,7 @@ function render(
 }
 
 export default (window: Window) => {
+  const { document } = window;
   const input = document.querySelector(
     'input.quick-search',
   ) as HTMLInputElement | null;

package/src/toc/index.ts

@@ -270,7 +270,7 @@ export default (window: Window) => {
       scrollIfNeeded(nextItem, window.document);
     }
   }
-  const debounced = debounce(handleScroll, LATENCY_MS);
+  const debounced = debounce(window, handleScroll, LATENCY_MS);
   window.addEventListener('scroll', debounced, { passive: true });
 
   // Call after load to set current item

package/src/top/index.ts

@@ -30,9 +30,9 @@ export default (window: Window) => {
     e.preventDefault();
     const cleanUrl = window.location.pathname + window.location.search;
     if (window.location.hash) {
-      history.pushState(null, '', cleanUrl);
+      window.history.pushState(null, '', cleanUrl);
     } else {
-      history.replaceState(null, '', cleanUrl);
+      window.history.replaceState(null, '', cleanUrl);
     }
     window.scrollTo({ top: 0, behavior: 'smooth' });
     const toc = window.document.querySelector('nav.toc') as HTMLElement | null;
@@ -65,7 +65,7 @@ export default (window: Window) => {
     }
   }
 
-  const debounced = debounce(updateVisibility, LATENCY_MS);
+  const debounced = debounce(window, updateVisibility, LATENCY_MS);
   window.addEventListener('scroll', debounced, { passive: true });
   updateVisibility();
 

package/src/util.ts

@@ -1,11 +1,12 @@
 export function debounce<T extends (...args: unknown[]) => void>(
+  win: Window,
   fn: T,
   time: number,
 ) {
   let timer: number;
   return (...args: Parameters<T>) => {
-    window.clearTimeout(timer);
-    timer = window.setTimeout(() => {
+    win.clearTimeout(timer);
+    timer = win.setTimeout(() => {
       fn(...args);
     }, time);
   };
@@ -41,11 +42,11 @@ export function applyBasePath(subPath: string): string {
   return path + subPath;
 }
 
-export function scheduleTask(fn: () => void) {
-  if (typeof window.requestIdleCallback === 'function') {
-    window.requestIdleCallback(fn);
+export function scheduleTask(win: Window, fn: () => void) {
+  if (typeof win.requestIdleCallback === 'function') {
+    win.requestIdleCallback(fn);
   } else {
-    return setTimeout(fn, 0);
+    return win.setTimeout(fn, 0);
   }
 }
 

package/templates/_nav.html

@@ -8,6 +8,7 @@
           <a
             class="<%= cx({disabled: link.disabled, external: link.external}) %>"
             <% if (!link.disabled) { %>href="<%= link.internal ? applyBasePath(link.internal) : link.external %>"<% } %>
+            <% if (link.external) { %>target="_blank"<% } %>
           >
             <%= link.text %></a>
         </li>