@abreen/tada 1.18.0 → 1.18.1

package/README.md

@@ -383,7 +383,7 @@ list of variables parsed using the [`front-matter`][front-matter] library).
 | `description` | Meta description for the page |
 | `toc` | Set to `true` to show a table of contents |
 | `slides` | Set to `true` on Markdown pages to treat top-level `---` as slide separators and add presentation controls |
-| `parent` & `parentLabel` | URL and label for a breadcrumb link displayed above the title |
+| `breadcrumbs` | Ordered ancestor links with `label` and `url`; the page title completes the trail |
 | `published` | Year, month, and day of publishing (e.g, `2025-09-09`) |
 
 You may also add arbitrary fields in a page's front matter, and access them

package/assets/material-symbols/chevron_right_24px.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M504-480 320-664l56-56 240 240-240 240-56-56 184-184Z"/></svg>

package/build/material-symbols.ts

@@ -48,10 +48,13 @@ export const MATERIAL_SYMBOLS = Object.freeze({
     symbol: 'warning',
     opticalSize: 20,
   }),
-  parent: Object.freeze({
-    cssVariable: '--icon-parent',
-    symbol: 'south_east',
-    opticalSize: 20,
+  breadcrumbSeparator: Object.freeze({
+    cssVariable: '--icon-breadcrumb-separator',
+    symbol: 'chevron_right',
+    opticalSize: 24,
+    // The authored selection differs from the shared weight/grade defaults.
+    weight: 400,
+    grade: 0,
   }),
   search: Object.freeze({
     cssVariable: '--icon-search',

package/build/types.d.ts

@@ -1,6 +1,12 @@
 import type { BundledLanguage } from 'shiki';
 import type { TraceCache } from './build-types';
 
+/** An explicitly authored ancestor in a page's breadcrumb trail. */
+export interface BreadcrumbEntry {
+  label: string;
+  url: string;
+}
+
 export type PlainTextLanguage = 'text' | 'txt' | 'plain';
 
 export interface SerifFontTuning {

package/build/utils/render.ts

@@ -15,8 +15,8 @@ import {
   getSupportedConfigFileNamesText,
 } from '../config-files';
 import {
-  resolveParentLinkTarget,
-  validateParentLink,
+  resolveBreadcrumbLinkTarget,
+  validateBreadcrumbs,
 } from '../validate-config-links';
 import {
   extractJavaMethodToc,
@@ -66,8 +66,8 @@ export { stripHtmlComments } from './html-comments';
 
 const REQUIRED_FRONT_MATTER_FIELDS = ['title'];
 
-// Page variables that renderers assign themselves. Front matter that sets one
-// would be overwritten or, for `template`, select a nonexistent template.
+// Internal page variables and retired front matter keys. Internal values would
+// be overwritten or, for `template`, select a nonexistent template.
 const RESERVED_FRONT_MATTER_KEYS: readonly string[] = [
   'template',
   'titleHtml',
@@ -77,6 +77,8 @@ const RESERVED_FRONT_MATTER_KEYS: readonly string[] = [
   'codeFilePath',
   'downloadName',
   'filePath',
+  'parent',
+  'parentLabel',
 ];
 
 function renderInlineField(
@@ -456,7 +458,7 @@ interface PreparePageVariablesInput {
  * Turns parsed front matter into page variables. Shared by every renderer
  * whose source has front matter, so each one applies the same rules:
  * Lodash processing of string values, inline Markdown for the title and
- * description, required fields, author lookup, and parent link validation.
+ * description, required fields, author lookup, and breadcrumb validation.
  */
 function preparePageVariables({
   rawPageVariables,
@@ -484,12 +486,29 @@ function preparePageVariables({
     subPath,
     isWatchMode,
   });
+  const templateString = (value: unknown): unknown =>
+    typeof value === 'string' ? compileTemplate(value)(siteOnlyParams) : value;
   const pageVariables: Record<string, unknown> = Object.fromEntries(
-    Object.entries(rawPageVariables).map(([k, v]) => [
-      k,
-      typeof v === 'string' ? compileTemplate(v)(siteOnlyParams) : v,
+    Object.entries(rawPageVariables).map(([key, value]) => [
+      key,
+      templateString(value),
     ]),
   );
+  if (Array.isArray(pageVariables.breadcrumbs)) {
+    pageVariables.breadcrumbs = pageVariables.breadcrumbs.map(
+      (entry: unknown) => {
+        if (!entry || typeof entry !== 'object' || Array.isArray(entry)) {
+          return entry;
+        }
+        const breadcrumb = entry as Record<string, unknown>;
+        return {
+          ...breadcrumb,
+          label: templateString(breadcrumb.label),
+          url: templateString(breadcrumb.url),
+        };
+      },
+    );
+  }
 
   // Render title and description as inline Markdown
   const frontMatterMd = createMarkdown(siteVariables, {
@@ -502,21 +521,21 @@ function preparePageVariables({
   validateFrontMatter(pageVariables, filePath);
   resolveAuthor(pageVariables, filePath, dependencyCollector);
 
-  const parentError = validateParentLink(
-    pageVariables.parent,
+  const breadcrumbs = pageVariables.breadcrumbs;
+  validateBreadcrumbs(
+    breadcrumbs,
     filePath,
     validInternalTargets,
     sourceUrlPath,
   );
-  if (parentError) {
-    throw new Error(parentError);
-  }
-  const resolvedParentTarget = resolveParentLinkTarget(
-    pageVariables.parent,
-    sourceUrlPath,
-  );
-  if (resolvedParentTarget) {
-    dependencyCollector?.internalTargets?.add(resolvedParentTarget);
+  for (const entry of breadcrumbs ?? []) {
+    const resolvedTarget = resolveBreadcrumbLinkTarget(
+      entry.url,
+      sourceUrlPath,
+    );
+    if (resolvedTarget) {
+      dependencyCollector?.internalTargets?.add(resolvedTarget);
+    }
   }
 
   return pageVariables;

package/build/validate-config-links.ts

@@ -1,4 +1,5 @@
 import path from 'path';
+import type { BreadcrumbEntry } from './types';
 import { encodeAuthoredUrl } from './template-globals';
 import { normalizeOutputPath } from './utils/paths';
 
@@ -208,47 +209,86 @@ function splitHref(href: string): { pathname: string; suffix: string } {
   return { pathname: match ? match[1] : href, suffix: match ? match[2] : '' };
 }
 
-export function validateParentLink(
-  parent: unknown,
+export function validateBreadcrumbs(
+  breadcrumbs: unknown,
   filePath: string,
   validTargets: ReadonlySet<string>,
   sourceUrlPath: string,
-): string | null {
-  if (typeof parent === 'string' && splitHref(parent).pathname === '') {
-    return `${filePath}: broken parent link: "${parent}"`;
+): asserts breadcrumbs is BreadcrumbEntry[] | undefined {
+  if (breadcrumbs === undefined) {
+    return;
+  }
+  if (!Array.isArray(breadcrumbs)) {
+    throw new Error(`${filePath}: breadcrumbs must be a list`);
   }
+  breadcrumbs.forEach((entry: unknown, index) => {
+    const context = `${filePath}: breadcrumb entry ${index + 1}`;
+    if (!entry || typeof entry !== 'object' || Array.isArray(entry)) {
+      throw new Error(`${context} must be an object with label and url fields`);
+    }
+    const { label, url } = entry as Record<string, unknown>;
+    for (const [field, value] of Object.entries({ label, url })) {
+      if (typeof value !== 'string' || !value.trim()) {
+        throw new Error(`${context}: ${field} must be a nonempty string`);
+      }
+    }
+    const error = validateBreadcrumbLink(
+      url as string,
+      filePath,
+      validTargets,
+      sourceUrlPath,
+      index + 1,
+    );
+    if (error) {
+      throw new Error(error);
+    }
+  });
+}
 
-  const resolvedTarget = resolveParentLinkTarget(parent, sourceUrlPath);
+export function validateBreadcrumbLink(
+  url: string,
+  filePath: string,
+  validTargets: ReadonlySet<string>,
+  sourceUrlPath: string,
+  entryNumber = 1,
+): string | null {
+  const context = `${filePath}: breadcrumb entry ${entryNumber}`;
+  const resolvedTarget = resolveBreadcrumbLinkTarget(url, sourceUrlPath);
   if (!resolvedTarget) {
-    return null;
+    return `${context}: broken breadcrumb link: "${url}" (must be an internal site link with a pathname)`;
   }
 
   const directoryError = validateDirectoryLink(
-    parent as string,
+    url,
     resolvedTarget,
     validTargets,
-    `${filePath}: parent link`,
+    context,
   );
   if (directoryError) {
     return directoryError;
   }
 
   if (!validTargets.has(resolvedTarget)) {
-    return `${filePath}: broken parent link: "${parent}"`;
+    return `${context}: broken breadcrumb link: "${url}"`;
   }
 
   return null;
 }
 
-export function resolveParentLinkTarget(
-  parent: unknown,
+export function resolveBreadcrumbLinkTarget(
+  url: string,
   sourceUrlPath: string,
 ): string | null {
-  if (!parent || typeof parent !== 'string') {
+  // Breadcrumbs always point into this site. Backslashes also have special
+  // URL semantics in browsers, so they cannot be used as path separators.
+  if (
+    /^[a-zA-Z][a-zA-Z0-9+.-]*:/.test(url) ||
+    url.startsWith('//') ||
+    url.includes('\\')
+  ) {
     return null;
   }
-
-  const { pathname } = splitHref(parent);
+  const { pathname } = splitHref(url);
   if (!pathname) {
     return null;
   }

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

@@ -1,6 +1,9 @@
 ---
-parent: /labs/00/index.html
-parentLabel: Lab 0
+breadcrumbs:
+  - label: Labs
+    url: /labs/index.html
+  - label: Lab 0
+    url: /labs/00/index.html
 title: Counting vowels
 author: alex
 description: An example of a literate Java program that takes predefined input.

package/init/content/labs/00/index.md

@@ -1,6 +1,7 @@
 ---
-parent: /labs/index.html
-parentLabel: Labs
+breadcrumbs:
+  - label: Labs
+    url: /labs/index.html
 title: Lab 0
 author: alex
 description: An example lab page for <%= site.title %>.

package/init/content/labs/01/index.md

@@ -1,6 +1,7 @@
 ---
-parent: /labs/index.html
-parentLabel: Labs
+breadcrumbs:
+  - label: Labs
+    url: /labs/index.html
 title: Lab 1
 author: alex
 description: A lab page for <%= site.title %> demonstrating the trace feature.

package/init/content/labs/02/index.md

@@ -1,6 +1,7 @@
 ---
-parent: ../index.html
-parentLabel: Labs
+breadcrumbs:
+  - label: Labs
+    url: ../index.html
 title: Lab 2
 author: alex
 description: A page demonstrating slides mode.

package/init/content/lectures/01/index.md

@@ -1,6 +1,7 @@
 ---
-parentLabel: Lectures
-parent: /lectures/index.html
+breadcrumbs:
+  - label: Lectures
+    url: /lectures/index.html
 title: Lecture 1
 description: An example lecture page.
 author: alex

package/init/content/lectures/02/index.md

@@ -1,6 +1,7 @@
 ---
-parentLabel: Lectures
-parent: /lectures/index.html
+breadcrumbs:
+  - label: Lectures
+    url: /lectures/index.html
 title: Lecture 2
 description: An example lecture page demonstrating partials.
 author: alex

package/package.json

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

package/src/_content.scss

@@ -364,18 +364,34 @@ dfn {
   color: var(--theme-color-text);
 }
 
-a.breadcrumb {
-  @include user-select(none);
-  @include subdued-link;
+.breadcrumbs {
+  ol {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.25em;
+    padding: 0;
+    margin: 0;
+    list-style: none;
+  }
+
+  li {
+    display: flex;
+    gap: 0.25em;
+    align-items: center;
+    min-width: 0;
+    overflow-wrap: anywhere;
+  }
 
-  &::after {
-    display: inline-block;
-    width: var(--icon-parent-size);
-    height: var(--icon-parent-size);
-    vertical-align: middle;
-    content: '';
+  a {
+    @include subdued-link;
+  }
+
+  [aria-current='page'] {
+    font-style: italic;
+  }
 
-    @include contained-mask(var(--icon-parent));
+  .material-symbol-icon {
+    flex-shrink: 0;
   }
 }
 

package/src/_material-symbols.scss

@@ -22,3 +22,10 @@
   --material-symbol-icon: var(--icon-contrast-high);
   --material-symbol-icon-size: var(--icon-contrast-high-size);
 }
+
+.material-symbol-icon-breadcrumb-separator {
+  --material-symbol-icon: var(--icon-breadcrumb-separator);
+  --material-symbol-icon-size: var(--icon-breadcrumb-separator-size);
+
+  color: var(--fg2-color);
+}

package/src/navigate/_index.scss

@@ -2,6 +2,11 @@ $shift: 8px;
 $duration: 150ms;
 $movement-easing: cubic-bezier(0.2, 0, 0, 1);
 
+:root {
+  --page-transition-duration: #{$duration};
+  --page-transition-movement-easing: #{$movement-easing};
+}
+
 @keyframes page-fade-out {
   to {
     opacity: 0;
@@ -45,12 +50,13 @@ $movement-easing: cubic-bezier(0.2, 0, 0, 1);
 ::view-transition-old(page-title),
 ::view-transition-new(page-title),
 ::view-transition-old(page-info),
-::view-transition-new(page-info),
-::view-transition-old(page-breadcrumb),
-::view-transition-new(page-breadcrumb) {
+::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.
+
 // 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.
 .site-banner {

package/src/navigate/breadcrumbs.ts

@@ -0,0 +1,129 @@
+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();
+}

package/src/navigate/runtime.ts

@@ -5,12 +5,22 @@ 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>();
@@ -124,9 +134,6 @@ function cleanupViewTransitionNames(document: Document): void {
   const newInfo = document.querySelector(
     '.title-and-info .info',
   ) as HTMLElement | null;
-  const newBreadcrumb = document.querySelector(
-    '.title-and-info a.breadcrumb',
-  ) as HTMLElement | null;
 
   if (newH1) {
     newH1.style.viewTransitionName = '';
@@ -134,9 +141,7 @@ function cleanupViewTransitionNames(document: Document): void {
   if (newInfo) {
     newInfo.style.viewTransitionName = '';
   }
-  if (newBreadcrumb) {
-    newBreadcrumb.style.viewTransitionName = '';
-  }
+  cleanupBreadcrumbTransitionNames(document);
 }
 
 function getLocationKey(window: Window): string {
@@ -172,6 +177,7 @@ 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);
 }
@@ -305,6 +311,7 @@ export async function navigateToUrl(
     updateHead(document, newDoc);
     mountAppearancePickerForPage(window);
     currentPath = parsed.pathname + parsed.search;
+    renderedPageUrl = parsed.href;
 
     if (pushHistory) {
       historyIndex++;
@@ -336,6 +343,18 @@ 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;
@@ -345,18 +364,18 @@ export async function navigateToUrl(
     if (titleVisible) {
       const h1 = titleEl.querySelector('h1') as HTMLElement | null;
       const info = titleEl.querySelector('.info') as HTMLElement | null;
-      const breadcrumb = titleEl.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';
-      }
+      setBreadcrumbTransitionNames(
+        document,
+        renderedPageUrl,
+        sharedCount,
+        'leave',
+      );
     }
 
     document.documentElement.classList.add(
@@ -378,18 +397,18 @@ export async function navigateToUrl(
       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';
-        }
+        setBreadcrumbTransitionNames(
+          document,
+          renderedPageUrl,
+          sharedCount,
+          'enter',
+        );
       }
     });
 

package/templates/_heading.html

@@ -1,6 +1,19 @@
 <div class="title-and-info" data-pagefind-body>
-  <% if (page.parent) { %>
-  <a class="breadcrumb" href="<%- encodeAuthoredUrl(page.parent) %>" data-pagefind-ignore><%- page.parentLabel %></a>
+  <% if (page.breadcrumbs && page.breadcrumbs.length) { %>
+  <nav class="breadcrumbs" aria-label="Breadcrumb" data-pagefind-ignore>
+    <ol>
+      <% page.breadcrumbs.forEach((entry, index) => { %>
+      <li>
+        <% if (index > 0) { %><span class="material-symbol-icon material-symbol-icon-breadcrumb-separator" aria-hidden="true"></span><% } %>
+        <a href="<%- encodeAuthoredUrl(entry.url) %>"><%- entry.label %></a>
+      </li>
+      <% }); %>
+      <li>
+        <span class="material-symbol-icon material-symbol-icon-breadcrumb-separator" aria-hidden="true"></span>
+        <span aria-current="page"><%- page.title %></span>
+      </li>
+    </ol>
+  </nav>
   <% } %>
   <h1 data-pagefind-weight="10" data-pagefind-meta="title_html[data-title-html]" data-title-html="<%- page.titleHtml %>"><%= page.titleHtml %></h1>
 

package/assets/material-symbols/south_east_20px.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="20" viewBox="0 -960 960 960" width="20"><path d="M386-224v-58h250.69L200-718.69 241.31-760 678-323.31V-574h58v350H386Z"/></svg>