stack-site-builder 1.10.0

package/src/components/MermaidLoader.astro

@@ -0,0 +1,96 @@
+---
+// Renders any <pre class="mermaid"> on the page on the client, themed to match
+// the site (colors pulled from our CSS variables), and re-renders when the
+// theme changes. Include once on pages that contain Mermaid diagrams.
+---
+
+<script>
+  import mermaid from 'mermaid';
+
+  // Read the live site palette so Mermaid matches the current theme exactly.
+  function palette() {
+    const cs = getComputedStyle(document.documentElement);
+    const v = (name: string) => cs.getPropertyValue(name).trim();
+    return {
+      bg: v('--aas-bg'),
+      panel: v('--aas-panel'),
+      text: v('--aas-text'),
+      accent: v('--aas-accent'),
+      border: v('--aas-border'),
+      muted: v('--aas-muted'),
+    };
+  }
+
+  function init() {
+    const p = palette();
+    mermaid.initialize({
+      startOnLoad: false,
+      securityLevel: 'strict',
+      theme: 'base',
+      themeVariables: {
+        background: 'transparent',
+        fontFamily: 'ui-sans-serif, system-ui, sans-serif',
+        primaryColor: p.panel,
+        primaryTextColor: p.text,
+        primaryBorderColor: p.accent,
+        nodeBorder: p.accent,
+        mainBkg: p.panel,
+        nodeTextColor: p.text,
+        lineColor: p.muted,
+        edgeLabelBackground: p.bg,
+        clusterBkg: 'transparent',
+        clusterBorder: p.muted,
+        titleColor: p.text,
+        secondaryColor: p.bg,
+        tertiaryColor: p.bg,
+      },
+    });
+  }
+
+  async function renderAll() {
+    const nodes = Array.from(document.querySelectorAll<HTMLElement>('pre.mermaid'));
+    if (nodes.length === 0) return;
+    for (const n of nodes) {
+      if (!n.dataset.src) n.dataset.src = (n.textContent ?? '').trim();
+      n.removeAttribute('data-processed');
+      // textContent, not innerHTML: dataset.src is entity-DECODED source, so
+      // injecting it as HTML would turn `<…>` in labels into live DOM (the
+      // server-side escaping exists precisely to prevent that). Mermaid reads
+      // the element's innerHTML and decodes entities itself.
+      n.textContent = n.dataset.src ?? '';
+    }
+    init();
+    try {
+      await mermaid.run({ nodes });
+    } catch {
+      /* leave the raw source visible on failure */
+    }
+  }
+
+  renderAll();
+
+  // Allow tab/version switches to re-render diagrams that were hidden (and thus
+  // mis-sized) at first paint.
+  (window as unknown as { __aasRenderMermaid?: () => void }).__aasRenderMermaid = renderAll;
+
+  // Re-render diagrams (with fresh palette) when the theme toggles.
+  let last = document.documentElement.dataset.theme;
+  new MutationObserver(() => {
+    const now = document.documentElement.dataset.theme;
+    if (now !== last) {
+      last = now;
+      renderAll();
+    }
+  }).observe(document.documentElement, { attributes: true, attributeFilter: ['data-theme'] });
+
+  // A diagram inside a closed <details> renders at zero size; when the reveal
+  // opens, re-render so it lays out correctly. `toggle` doesn't bubble — capture.
+  document.addEventListener(
+    'toggle',
+    (e) => {
+      const d = e.target as HTMLElement;
+      if (d instanceof HTMLDetailsElement && d.open && d.querySelector('pre.mermaid')) renderAll();
+    },
+    true,
+  );
+</script>

package/src/components/PricingSection.astro

@@ -0,0 +1,100 @@
+---
+// A "Pricing" tab body: a short intro (`note`) above an optional plan / price /
+// note table, with the source and the as-of date below. Driven by the
+// frontmatter pricing fields.
+//
+// The freshness chip (aging 6m+, stale 1y+) is computed client-side against the
+// visitor's *current* date — not the build date — so a long-lived static build
+// still flags stale prices. The chip ships hidden and is revealed by the script.
+import { useTranslations, type Lang } from '../i18n/ui';
+
+interface Tier {
+  plan: string;
+  price: string;
+  note?: string;
+}
+interface Props {
+  lang: Lang;
+  note?: string;
+  tiers?: Tier[];
+  source?: string;
+  checkedAt?: string;
+}
+const { lang, note, tiers = [], source, checkedAt } = Astro.props;
+const t = useTranslations(lang);
+const hasTable = tiers.length > 0;
+---
+
+{
+  (note || hasTable) && (
+    <Fragment>
+      <h2 id="pricing">
+        <a class="aas-anchor" href="#pricing" aria-label="Copy link to section" />
+        {t('detail.pricing')}
+      </h2>
+      {note && <p>{note}</p>}
+      {hasTable && (
+        <table>
+          <thead>
+            <tr>
+              <th>{t('detail.plan')}</th>
+              <th>{t('detail.price')}</th>
+              <th>{t('detail.notes')}</th>
+            </tr>
+          </thead>
+          <tbody>
+            {tiers.map((tier) => (
+              <tr>
+                <td>{tier.plan}</td>
+                <td>{tier.price}</td>
+                <td>{tier.note}</td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      )}
+      {(source || checkedAt) && (
+        <p class="text-sm text-[var(--aas-muted)]">
+          {source && (
+            <a href={source} target="_blank" rel="noopener noreferrer">
+              {t('detail.source')} &nearr;
+            </a>
+          )}
+          {checkedAt && (
+            <Fragment>
+              {source ? ' · ' : ''}
+              {`${t('detail.asOf')} ${checkedAt}`}
+              <span
+                data-pricing-freshness
+                data-checked={checkedAt}
+                data-aging-label={t('pricing.aging')}
+                data-aging-hint={t('pricing.agingHint')}
+                data-stale-label={t('pricing.stale')}
+                data-stale-hint={t('pricing.staleHint')}
+                class="ml-2 hidden rounded-md px-2 py-0.5 align-middle text-xs font-medium"
+              />
+            </Fragment>
+          )}
+        </p>
+      )}
+    </Fragment>
+  )
+}
+
+<script>
+  // Flag prices that haven't been re-checked recently, relative to the viewer's
+  // current date (so a stale static build still warns). Mirrors stalenessOf().
+  const SIX_MONTHS = 182 * 24 * 60 * 60 * 1000;
+  const ONE_YEAR = 365 * 24 * 60 * 60 * 1000;
+  document.querySelectorAll<HTMLElement>('[data-pricing-freshness]').forEach((el) => {
+    const ts = Date.parse(el.dataset.checked || '');
+    if (Number.isNaN(ts)) return;
+    const age = Date.now() - ts;
+    const kind = age > ONE_YEAR ? 'stale' : age > SIX_MONTHS ? 'aging' : null;
+    if (!kind) return;
+    el.textContent = kind === 'stale' ? el.dataset.staleLabel! : el.dataset.agingLabel!;
+    el.title = kind === 'stale' ? el.dataset.staleHint! : el.dataset.agingHint!;
+    el.classList.add(kind === 'stale' ? 'aas-stale' : 'aas-aging');
+    el.classList.remove('hidden');
+  });
+</script>

package/src/components/ProjectFileList.astro

@@ -0,0 +1,68 @@
+---
+import { useTranslations, type Lang } from '../i18n/ui';
+import ProjectFileTree, { type DirNode, type TreeNode } from './ProjectFileTree.astro';
+
+interface Props {
+  lang: Lang;
+  folder: string;
+  files: { path: string }[];
+  class?: string;
+}
+
+const { lang, folder, files, class: className } = Astro.props;
+const t = useTranslations(lang);
+
+// Group the flat, pre-sorted file list into a folder tree. Each file keeps its
+// original index (the ProjectViewer script selects the file at index 0 by
+// default). A directory node is created the first time one of its files is
+// seen, so folders land where their contents already sort.
+function buildTree(items: { path: string }[]): TreeNode[] {
+  const roots: TreeNode[] = [];
+  const dirChildren = new Map<string, TreeNode[]>([['', roots]]);
+
+  items.forEach((file, index) => {
+    const parts = file.path.split('/');
+    let parentPath = '';
+    for (let i = 0; i < parts.length - 1; i++) {
+      const dirPath = parentPath ? `${parentPath}/${parts[i]}` : parts[i];
+      if (!dirChildren.has(dirPath)) {
+        const children: TreeNode[] = [];
+        dirChildren.set(dirPath, children);
+        const dir: DirNode = { type: 'dir', name: parts[i], path: dirPath, children };
+        dirChildren.get(parentPath)!.push(dir);
+      }
+      parentPath = dirPath;
+    }
+    dirChildren.get(parentPath)!.push({
+      type: 'file',
+      name: parts[parts.length - 1],
+      path: file.path,
+      index,
+    });
+  });
+
+  return roots;
+}
+
+// Folders before files at every level (stable within each group), so the tree
+// reads like a file explorer.
+function foldersFirst(nodes: TreeNode[]): TreeNode[] {
+  for (const n of nodes) if (n.type === 'dir') n.children = foldersFirst(n.children);
+  return [...nodes.filter((n) => n.type === 'dir'), ...nodes.filter((n) => n.type === 'file')];
+}
+
+const tree = foldersFirst(buildTree(files));
+---
+
+{
+  files.length > 0 && (
+    <div class:list={['text-sm', className]}>
+      <p class="mb-2 text-xs font-semibold tracking-wide text-[var(--aas-muted)] uppercase">
+        {t('project.files')}
+      </p>
+      <div class="rounded-xl border border-[var(--aas-border)] bg-[var(--aas-panel)] p-1.5">
+        <ProjectFileTree folder={folder} nodes={tree} />
+      </div>
+    </div>
+  )
+}

package/src/components/ProjectFileTree.astro

@@ -0,0 +1,95 @@
+---
+// Recursive file-tree node. Folders are native <details> so they fold/expand
+// with no JS; files stay plain buttons carrying the data-* attributes the
+// ProjectViewer script matches on (data-file-path / data-file-folder), so the
+// tree is a drop-in for the old flat list.
+//
+// Indentation is relative: each nested level is one <ul> with a left padding +
+// a faint guide line (border-l), so children visibly hang off their folder.
+import Self from './ProjectFileTree.astro';
+
+export interface FileNode {
+  type: 'file';
+  name: string;
+  path: string;
+  index: number;
+}
+export interface DirNode {
+  type: 'dir';
+  name: string;
+  path: string;
+  children: TreeNode[];
+}
+export type TreeNode = FileNode | DirNode;
+
+interface Props {
+  folder: string;
+  nodes: TreeNode[];
+  depth?: number;
+}
+
+const { folder, nodes, depth = 0 } = Astro.props;
+---
+
+<ul
+  class:list={[
+    'space-y-0.5',
+    // Guide line + indent for nested levels; the top level sits flush.
+    depth > 0 && 'ml-[0.85rem] border-l border-[var(--aas-border)] pl-1.5',
+  ]}
+>
+  {
+    nodes.map((node) =>
+      node.type === 'dir' ? (
+        <li>
+          <details open class="aas-tree-dir" data-tree-folder={folder} data-tree-dir={node.path}>
+            <summary class="flex cursor-pointer list-none items-center gap-1.5 rounded-lg px-2 py-1 text-left font-mono text-xs text-[var(--aas-muted)] select-none hover:bg-[var(--aas-tint)]">
+              <svg
+                class="aas-tree-caret h-3 w-3 shrink-0 transition-transform"
+                viewBox="0 0 12 12"
+                aria-hidden="true"
+              >
+                <path
+                  d="M4 2.5 7.5 6 4 9.5"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="1.5"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                />
+              </svg>
+              <span>{node.name}/</span>
+            </summary>
+            <Self folder={folder} nodes={node.children} depth={depth + 1} />
+          </details>
+        </li>
+      ) : (
+        <li>
+          <button
+            type="button"
+            data-file={node.index}
+            data-file-path={node.path}
+            data-file-folder={folder}
+            aria-current={node.index === 0 ? 'true' : 'false'}
+            class="block w-full truncate rounded-lg px-2 py-1 text-left font-mono text-xs text-[var(--aas-muted)] hover:bg-[var(--aas-tint)] aria-[current=true]:bg-[var(--aas-tint)] aria-[current=true]:text-[var(--aas-text)]"
+          >
+            {node.name}
+          </button>
+        </li>
+      ),
+    )
+  }
+</ul>
+
+<style>
+  .aas-tree-dir > summary::-webkit-details-marker {
+    display: none;
+  }
+  .aas-tree-dir > summary {
+    list-style: none;
+  }
+  /* Caret points right when collapsed, rotates down when the folder is open. */
+  .aas-tree-dir[open] > summary .aas-tree-caret {
+    transform: rotate(90deg);
+  }
+</style>

package/src/components/ProjectRelatedTools.astro

@@ -0,0 +1,70 @@
+---
+import { getRelativeLocaleUrl } from 'astro:i18n';
+import { categoryMap } from '@aas-data/categories';
+import { useTranslations, type Lang } from '../i18n/ui';
+import type { ToolRef } from '../lib/stacks';
+import ToolAvatar from './ToolAvatar.astro';
+
+/** A related tool resolved against the stacks collection — an alias of ToolRef
+ *  (produced by `toolResolver` in src/lib/stacks.ts). */
+export type RelatedTool = ToolRef;
+
+interface Props {
+  lang: Lang;
+  tools: RelatedTool[];
+}
+
+const { lang, tools } = Astro.props;
+const t = useTranslations(lang);
+---
+
+{
+  tools.length > 0 && (
+    <nav aria-label={t('project.relatedTools')} class="text-sm">
+      <p class="mb-2 text-xs font-semibold tracking-wide text-[var(--aas-muted)] uppercase">
+        {t('project.relatedTools')}
+      </p>
+      <ul class="space-y-1.5">
+        {tools.map((tool) =>
+          tool.registered ? (
+            <li>
+              <a
+                href={getRelativeLocaleUrl(lang, `stack/${tool.slug}/`)}
+                class="aas-lift flex items-center gap-2.5 rounded-xl border border-[var(--aas-border)] bg-[var(--aas-panel)] p-2 no-underline"
+              >
+                <ToolAvatar name={tool.name} logo={tool.logo} logoDark={tool.logoDark} category={tool.category} size={28} />
+                <div class="min-w-0">
+                  <div class="flex items-center gap-1.5">
+                    <span class="truncate font-semibold text-[var(--aas-text)]">{tool.name}</span>
+                    {tool.deprecated && (
+                      <span class="aas-deprecated shrink-0 rounded px-1 py-0.5 text-[0.6rem]">
+                        {t('meta.deprecated')}
+                      </span>
+                    )}
+                  </div>
+                  {tool.category && (
+                    <div class="truncate text-xs text-[var(--aas-muted)]">
+                      {categoryMap.get(tool.category)?.label[lang]}
+                    </div>
+                  )}
+                </div>
+              </a>
+            </li>
+          ) : (
+            <li>
+              <div class="flex items-center gap-2.5 rounded-xl border border-dashed border-[var(--aas-border)] p-2">
+                <ToolAvatar name={tool.name} category="" size={28} />
+                <div class="min-w-0">
+                  <span class="truncate font-medium text-[var(--aas-muted)]">{tool.name}</span>
+                  <div class="truncate text-xs text-[var(--aas-muted)] opacity-70">
+                    {t('project.unregistered')}
+                  </div>
+                </div>
+              </div>
+            </li>
+          ),
+        )}
+      </ul>
+    </nav>
+  )
+}