@abreen/tada 1.18.1 → 1.18.2

package/init/content/labs/00/VowelCounter.java.md

@@ -18,7 +18,7 @@ The <dfn>standard in</dfn> (or `stdin`) is one of three streams available to a
 running program. The other two streams are the standard out and standard error.
 
 <figure>
-<svg viewBox="0 50 410 90" xmlns="http://www.w3.org/2000/svg" font-size="14" fill="none" style="margin:1rem auto;display:block;max-width:410px">
+<svg viewBox="15 50 380 90" xmlns="http://www.w3.org/2000/svg" font-size="14" fill="none" style="margin:1rem auto;display:block;max-width:380px">
   <defs>
     <marker id="arrow" markerWidth="8" markerHeight="8" refX="8" refY="4" orient="auto">
       <path d="M0,0 L8,4 L0,8 Z" stroke="currentColor" fill="currentColor"></path>

package/package.json

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

package/src/_layout.scss

@@ -152,14 +152,16 @@ body.literate main table {
 .info {
   @include user-select(none);
 
-  display: grid;
-  grid-template-columns: 1fr auto;
+  // Flex instead of a `1fr auto` grid: WebKit keeps the auto column's width
+  // after the font changes, which wraps the author avatar onto its own line.
+  display: flex;
   align-items: baseline;
+  justify-content: space-between;
   font-size: var(--font-size-smaller);
   color: var(--fg2-color);
 
   @media (width < 450px) {
-    grid-template-columns: 1fr;
+    flex-direction: column;
   }
 
   aside.author {

package/src/navigate/_index.scss

@@ -43,19 +43,37 @@ $movement-easing: cubic-bezier(0.2, 0, 0, 1);
   }
 }
 
-// Page heading and info: crossfade in place instead of sliding with the page
+// Page heading parts: crossfade in place instead of sliding with the page
 // view-transition-name is set via inline style by the navigator
-// only when .title-and-info is visible in the viewport
-
+// only when .title-and-info is visible in the viewport. All parts share one
+// duration and easing so they move in step when the layout changes; the
+// crossfades inherit the group timing.
+::view-transition-group(page-breadcrumbs),
+::view-transition-old(page-breadcrumbs),
+::view-transition-new(page-breadcrumbs),
+::view-transition-group(page-title),
 ::view-transition-old(page-title),
 ::view-transition-new(page-title),
+::view-transition-group(page-info),
 ::view-transition-old(page-info),
 ::view-transition-new(page-info) {
   animation-duration: $duration;
 }
 
-// Breadcrumbs use per-item named rules installed by the navigator. Shared
-// items stay opaque and preserve their position; removed/added suffixes fade.
+::view-transition-group(page-breadcrumbs),
+::view-transition-group(page-title),
+::view-transition-group(page-info) {
+  animation-timing-function: $movement-easing;
+}
+
+// Breadcrumbs: the whole trail is one group, so every item moves together when
+// the layout changes. The default plus-lighter crossfade keeps unchanged items
+// opaque while added or removed items fade. Snapshots keep their natural size
+// so a change in trail width does not stretch the text.
+::view-transition-old(page-breadcrumbs),
+::view-transition-new(page-breadcrumbs) {
+  inline-size: auto;
+}
 
 // The site-wide banner does not change between pages. Keep it out of the root
 // slide and pin its named transition layer in place without a crossfade.

package/src/navigate/runtime.ts

@@ -5,22 +5,12 @@ import {
   teardownPerPageComponents,
 } from './lifecycle';
 import { globals } from '../globals';
-import {
-  cleanupBreadcrumbTransitionNames,
-  getBreadcrumbItems,
-  prepareBreadcrumbTransitionStyles,
-  setBreadcrumbTransitionNames,
-  sharedBreadcrumbCount,
-} from './breadcrumbs';
 
 export const NAVIGATION_EVENT = 'tada:navigation';
 
 let currentAbortController: AbortController | null = null;
 let historyIndex = 0;
 let currentPath = '';
-// Unlike the browser URL (which already changes on popstate), this tracks the
-// page whose content is currently displayed, for relative breadcrumb identity.
-let renderedPageUrl = '';
 
 const scrollByIndex = new Map<number, number>();
 const scrollByLocation = new Map<string, number>();
@@ -127,21 +117,29 @@ function dispatchNavigationEvent(
   );
 }
 
-function cleanupViewTransitionNames(document: Document): void {
-  const newH1 = document.querySelector(
-    '.title-and-info h1',
-  ) as HTMLElement | null;
-  const newInfo = document.querySelector(
-    '.title-and-info .info',
-  ) as HTMLElement | null;
-
-  if (newH1) {
-    newH1.style.viewTransitionName = '';
+// Heading parts that get their own layer instead of sliding with the page. The
+// breadcrumb trail is one group so every item, including the current one,
+// moves together when the page layout changes.
+const TITLE_TRANSITION_NAMES = [
+  ['nav.breadcrumbs', 'page-breadcrumbs'],
+  ['h1', 'page-title'],
+  ['.info', 'page-info'],
+] as const;
+
+function setTitleTransitionNames(titleEl: Element, enabled: boolean): void {
+  for (const [selector, name] of TITLE_TRANSITION_NAMES) {
+    const element = titleEl.querySelector<HTMLElement>(selector);
+    if (element) {
+      element.style.viewTransitionName = enabled ? name : '';
+    }
   }
-  if (newInfo) {
-    newInfo.style.viewTransitionName = '';
+}
+
+function cleanupViewTransitionNames(document: Document): void {
+  const titleEl = document.querySelector('.title-and-info');
+  if (titleEl) {
+    setTitleTransitionNames(titleEl, false);
   }
-  cleanupBreadcrumbTransitionNames(document);
 }
 
 function getLocationKey(window: Window): string {
@@ -177,7 +175,6 @@ export function initNavigation(window: Window): void {
   scrollByLocation.clear();
   window.history.scrollRestoration = 'manual';
   currentPath = window.location.pathname + window.location.search;
-  renderedPageUrl = window.location.href;
   scrollByIndex.set(historyIndex, window.scrollY);
   scrollByLocation.set(getLocationKey(window), window.scrollY);
 }
@@ -311,7 +308,6 @@ export async function navigateToUrl(
     updateHead(document, newDoc);
     mountAppearancePickerForPage(window);
     currentPath = parsed.pathname + parsed.search;
-    renderedPageUrl = parsed.href;
 
     if (pushHistory) {
       historyIndex++;
@@ -343,18 +339,6 @@ export async function navigateToUrl(
     !prefersReducedMotion(window) &&
     typeof transitionDoc.startViewTransition === 'function'
   ) {
-    const oldBreadcrumbItems = getBreadcrumbItems(document, renderedPageUrl);
-    const newBreadcrumbItems = getBreadcrumbItems(newDoc, parsed.href);
-    const sharedCount = sharedBreadcrumbCount(
-      oldBreadcrumbItems,
-      newBreadcrumbItems,
-    );
-    prepareBreadcrumbTransitionStyles(
-      document,
-      oldBreadcrumbItems.length,
-      newBreadcrumbItems.length,
-      sharedCount,
-    );
     const titleEl = document.querySelector('.title-and-info');
     const headerHeight =
       document.querySelector('header')?.getBoundingClientRect().height ?? 0;
@@ -362,20 +346,7 @@ export async function navigateToUrl(
       titleEl != null && titleEl.getBoundingClientRect().top >= headerHeight;
 
     if (titleVisible) {
-      const h1 = titleEl.querySelector('h1') as HTMLElement | null;
-      const info = titleEl.querySelector('.info') as HTMLElement | null;
-      if (h1) {
-        h1.style.viewTransitionName = 'page-title';
-      }
-      if (info) {
-        info.style.viewTransitionName = 'page-info';
-      }
-      setBreadcrumbTransitionNames(
-        document,
-        renderedPageUrl,
-        sharedCount,
-        'leave',
-      );
+      setTitleTransitionNames(titleEl, true);
     }
 
     document.documentElement.classList.add(
@@ -395,20 +366,7 @@ export async function navigateToUrl(
         newTitleEl.getBoundingClientRect().top >= newHeaderHeight;
 
       if (newTitleVisible && newTitleEl) {
-        const h1 = newTitleEl.querySelector('h1') as HTMLElement | null;
-        const info = newTitleEl.querySelector('.info') as HTMLElement | null;
-        if (h1) {
-          h1.style.viewTransitionName = 'page-title';
-        }
-        if (info) {
-          info.style.viewTransitionName = 'page-info';
-        }
-        setBreadcrumbTransitionNames(
-          document,
-          renderedPageUrl,
-          sharedCount,
-          'enter',
-        );
+        setTitleTransitionNames(newTitleEl, true);
       }
     });
 

package/templates/_theme.scss

@@ -33,8 +33,10 @@
 
   // Main background color (the color of the page background)
   --bg-color: hsl(var(--tint-hue) calc(5% * var(--tint-amount)) 97%);
+
+  // Same saturation as --bg-color, so frosting doesn't add color to the page
   --bg-color-translucent: hsl(
-    var(--tint-hue) calc(30% * var(--tint-amount)) 95% / 66%
+    var(--tint-hue) calc(5% * var(--tint-amount)) 95% / 66%
   );
 
   // Secondary background color (lighter)
@@ -117,7 +119,7 @@
     --link-color-hover: <%= linkColorHoverDark %>;
     --bg-color: hsl(var(--tint-hue) calc(3% * var(--tint-amount)) 5%);
     --bg-color-translucent: hsl(
-      var(--tint-hue) calc(15% * var(--tint-amount)) 10% / 66%
+      var(--tint-hue) calc(3% * var(--tint-amount)) 10% / 66%
     );
     --bg2-color: hsl(var(--tint-hue) calc(12% * var(--tint-amount)) 12%);
     --bg2-color-translucent: hsl(

package/src/navigate/breadcrumbs.ts

@@ -1,129 +0,0 @@
-interface BreadcrumbIdentity {
-  label: string;
-  url: string;
-}
-
-interface BreadcrumbItem extends BreadcrumbIdentity {
-  element: HTMLElement;
-}
-
-export function breadcrumbPageKey(href: string, pageUrl: string): string {
-  const url = new URL(href, pageUrl);
-  // Fragments identify positions on the same page; query strings can identify
-  // different content. URL serialization also resolves relative paths/spaces.
-  return url.origin + url.pathname + url.search;
-}
-
-export function sharedBreadcrumbCount(
-  oldItems: readonly BreadcrumbIdentity[],
-  newItems: readonly BreadcrumbIdentity[],
-): number {
-  let count = 0;
-  while (
-    count < Math.min(oldItems.length, newItems.length) &&
-    oldItems[count].url === newItems[count].url &&
-    oldItems[count].label === newItems[count].label
-  ) {
-    count++;
-  }
-  return count;
-}
-
-export function getBreadcrumbItems(
-  document: Document,
-  pageUrl: string,
-): BreadcrumbItem[] {
-  return Array.from(
-    document.querySelectorAll<HTMLElement>('nav.breadcrumbs ol > li'),
-  ).flatMap(element => {
-    const text = element.querySelector('a, [aria-current="page"]');
-    if (!text) {
-      return [];
-    }
-    const href = text.getAttribute('href') ?? pageUrl;
-    return [
-      {
-        element,
-        label: (text.textContent ?? '').trim().replace(/\s+/g, ' '),
-        url: breadcrumbPageKey(href, pageUrl),
-      },
-    ];
-  });
-}
-
-export function setBreadcrumbTransitionNames(
-  document: Document,
-  pageUrl: string,
-  sharedCount: number,
-  side: 'enter' | 'leave',
-): void {
-  const breadcrumb = document.querySelector<HTMLElement>('nav.breadcrumbs');
-  if (!breadcrumb) {
-    return;
-  }
-  getBreadcrumbItems(document, pageUrl).forEach((item, index) => {
-    const kind = index < sharedCount ? 'shared' : side;
-    item.element.style.viewTransitionName = `page-breadcrumb-${kind}-${index}`;
-  });
-}
-
-export function prepareBreadcrumbTransitionStyles(
-  document: Document,
-  oldCount: number,
-  newCount: number,
-  sharedCount: number,
-): void {
-  if (!oldCount && !newCount) {
-    return;
-  }
-  const style = document.createElement('style');
-  style.setAttribute('data-breadcrumb-transition-styles', '');
-  const rules: string[] = [];
-  const duration = 'var(--page-transition-duration)';
-  for (let index = 0; index < sharedCount; index++) {
-    const name = `page-breadcrumb-shared-${index}`;
-    rules.push(`
-      ::view-transition-group(${name}) {
-        animation-duration: ${duration};
-        animation-timing-function: var(--page-transition-movement-easing);
-      }
-      ::view-transition-old(${name}), ::view-transition-new(${name}) {
-        mix-blend-mode: normal;
-        animation: none;
-      }
-      ::view-transition-old(${name}) { display: none; }
-      ::view-transition-old(${name}):only-child {
-        display: block;
-        animation: page-fade-out ${duration} ease-in both;
-      }
-      ::view-transition-new(${name}):only-child {
-        animation: page-fade-in ${duration} ease-out both;
-      }
-    `);
-  }
-  for (let index = sharedCount; index < oldCount; index++) {
-    rules.push(`::view-transition-old(page-breadcrumb-leave-${index}) {
-      mix-blend-mode: normal;
-      animation: page-fade-out ${duration} ease-in both;
-    }`);
-  }
-  for (let index = sharedCount; index < newCount; index++) {
-    rules.push(`::view-transition-new(page-breadcrumb-enter-${index}) {
-      mix-blend-mode: normal;
-      animation: page-fade-in ${duration} ease-out both;
-    }`);
-  }
-  // Exact names keep these rules compatible with the bundled CSS parser, which
-  // does not yet accept view-transition-class selectors. Names use indices only.
-  style.textContent = rules.join('\n');
-  document.head.appendChild(style);
-}
-
-export function cleanupBreadcrumbTransitionNames(document: Document): void {
-  for (const element of document.querySelectorAll<HTMLElement>(
-    'nav.breadcrumbs, nav.breadcrumbs li',
-  )) {
-    element.style.removeProperty('view-transition-name');
-  }
-  document.querySelector('[data-breadcrumb-transition-styles]')?.remove();
-}