stack-site-builder 1.10.0

package/src/components/Glossary.astro

@@ -0,0 +1,264 @@
+---
+import { getRelativeLocaleUrl } from 'astro:i18n';
+import { glossary } from '@aas-data/glossary.mjs';
+import { getStacks, slugOf } from '../lib/stacks';
+import { getConcepts, conceptSlugOf } from '../lib/concepts';
+import { getArticles, articleSlugOf } from '../lib/articles';
+import { pathOf as stackPath, rootCategories } from '@aas-data/categories';
+import { conceptTree, conceptCatOf } from '@aas-data/concept-categories';
+import { articleTree, articleCatOf } from '@aas-data/article-categories';
+import ToolAvatar from './ToolAvatar.astro';
+import { useTranslations, type Lang } from '../i18n/ui';
+
+interface Props {
+  lang: Lang;
+}
+
+type Entry = {
+  label: string | { ko: string; en: string };
+  stack?: string;
+  concept?: string;
+  article?: string;
+  href?: string;
+  def?: string | { ko: string; en: string };
+};
+
+type Term = {
+  id: string;
+  label: string;
+  href?: string;
+  external: boolean;
+  subtitle: string;
+  icon: { name: string; logo?: string; logoDark?: string; category?: string; fallback?: string };
+  catId: string;
+  catLabel: string;
+  search: string;
+};
+
+type Group = { id: string; label: string; terms: Term[] };
+
+const { lang } = Astro.props;
+const t = useTranslations(lang);
+
+const map = glossary as Record<string, Entry>;
+const labelOf = (l: Entry['label']) => (typeof l === 'string' ? l : l[lang]);
+const defOf = (d: Entry['def']) => (!d ? '' : typeof d === 'string' ? d : d[lang]);
+
+const stacks = await getStacks(lang);
+const stackBySlug = new Map(stacks.map((s) => [slugOf(s), s]));
+const concepts = await getConcepts(lang);
+const conceptBySlug = new Map(concepts.map((c) => [conceptSlugOf(c), c]));
+const articles = await getArticles(lang);
+const articleBySlug = new Map(articles.map((a) => [articleSlugOf(a), a]));
+
+const tools: Term[] = [];
+const conceptTerms: Term[] = [];
+const articleTerms: Term[] = [];
+const defTerms: Term[] = [];
+const external: Term[] = [];
+
+for (const [id, e] of Object.entries(map)) {
+  const label = labelOf(e.label);
+  const def = defOf(e.def);
+  if (e.stack) {
+    const s = stackBySlug.get(e.stack);
+    const path = stackPath(s?.data.category ?? '');
+    const leaf = path[path.length - 1];
+    const top = path[0];
+    tools.push({
+      id,
+      label,
+      href: getRelativeLocaleUrl(lang, `stack/${e.stack}/`),
+      subtitle: leaf?.label[lang] ?? '',
+      external: false,
+      icon: { name: s?.data.name ?? label, logo: s?.data.logo, logoDark: s?.data.logoDark, category: s?.data.category },
+      catId: top?.id ?? 'zzz',
+      catLabel: top?.label[lang] ?? '',
+      search: `${label} ${leaf?.label[lang] ?? ''} ${top?.label[lang] ?? ''}`.toLowerCase(),
+    });
+  } else if (e.concept) {
+    const c = conceptBySlug.get(e.concept);
+    const catId = conceptCatOf(c?.data.category);
+    const path = conceptTree.pathOf(catId);
+    const leaf = path[path.length - 1];
+    const top = path[0];
+    conceptTerms.push({
+      id,
+      label,
+      href: getRelativeLocaleUrl(lang, `concept/${e.concept}/`),
+      subtitle: leaf?.label[lang] ?? '',
+      external: false,
+      icon: { name: label, fallback: 'concept' },
+      catId: top?.id ?? 'zzz',
+      catLabel: top?.label[lang] ?? '',
+      search: `${label} ${leaf?.label[lang] ?? ''} ${top?.label[lang] ?? ''}`.toLowerCase(),
+    });
+  } else if (e.article) {
+    const a = articleBySlug.get(e.article);
+    const catId = articleCatOf(a?.data.category);
+    const path = articleTree.pathOf(catId);
+    const leaf = path[path.length - 1];
+    const top = path[0];
+    articleTerms.push({
+      id,
+      label,
+      href: getRelativeLocaleUrl(lang, `article/${e.article}/`),
+      subtitle: leaf?.label[lang] ?? '',
+      external: false,
+      icon: { name: label, fallback: 'article' },
+      catId: top?.id ?? 'zzz',
+      catLabel: top?.label[lang] ?? '',
+      search: `${label} ${leaf?.label[lang] ?? ''} ${top?.label[lang] ?? ''}`.toLowerCase(),
+    });
+  } else if (e.href) {
+    external.push({
+      id,
+      label,
+      href: e.href,
+      subtitle: def,
+      external: true,
+      icon: { name: label, fallback: 'external' },
+      catId: '',
+      catLabel: '',
+      search: `${label} ${def}`.toLowerCase(),
+    });
+  } else {
+    // Definition-only term: no link, its `[[Term]]` points here.
+    defTerms.push({
+      id,
+      label,
+      subtitle: def,
+      external: false,
+      icon: { name: label, fallback: 'term' },
+      catId: '',
+      catLabel: '',
+      search: `${label} ${def}`.toLowerCase(),
+    });
+  }
+}
+
+// Group a kind's terms by top-level category, ordered by the category tree, then
+// each group's terms by label.
+const groupBy = (terms: Term[], order: string[]): Group[] => {
+  const byId = new Map<string, Group>();
+  for (const term of terms) {
+    if (!byId.has(term.catId)) byId.set(term.catId, { id: term.catId, label: term.catLabel, terms: [] });
+    byId.get(term.catId)!.terms.push(term);
+  }
+  const groups = [...byId.values()];
+  const rank = (id: string) => {
+    const i = order.indexOf(id);
+    return i === -1 ? order.length : i;
+  };
+  groups.sort((a, b) => rank(a.id) - rank(b.id) || a.label.localeCompare(b.label, lang));
+  for (const g of groups) g.terms.sort((a, b) => a.label.localeCompare(b.label, lang));
+  return groups;
+};
+
+const flat = (terms: Term[]): Group[] =>
+  terms.length ? [{ id: '', label: '', terms: terms.sort((a, b) => a.label.localeCompare(b.label, lang)) }] : [];
+
+const kinds = [
+  { key: 'tool', title: t('glossary.tool'), groups: groupBy(tools, rootCategories.map((c) => c.id)) },
+  { key: 'concept', title: t('glossary.concept'), groups: groupBy(conceptTerms, conceptTree.roots.map((c) => c.id)) },
+  { key: 'article', title: t('glossary.article'), groups: groupBy(articleTerms, articleTree.roots.map((c) => c.id)) },
+  { key: 'term', title: t('glossary.term'), groups: flat(defTerms) },
+  { key: 'external', title: t('glossary.external'), groups: flat(external) },
+].filter((k) => k.groups.length > 0);
+---
+
+<section class="py-6">
+  <h1 class="text-4xl font-bold tracking-tight">{t('glossary.title')}</h1>
+  <p class="mt-3 max-w-2xl text-lg text-[var(--aas-muted)]">{t('glossary.tagline')}</p>
+</section>
+
+<div data-glossary>
+  <div class="relative max-w-md">
+    <svg
+      class="pointer-events-none absolute top-1/2 left-3 -translate-y-1/2 text-[var(--aas-muted)]"
+      width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
+      stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"
+    >
+      <circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/>
+    </svg>
+    <input
+      type="search"
+      data-glossary-search
+      placeholder={t('glossary.search')}
+      aria-label={t('glossary.search')}
+      class="w-full rounded-lg border border-[var(--aas-border)] bg-[var(--aas-panel)] py-2 pr-3 pl-9 text-sm text-[var(--aas-text)] placeholder:text-[var(--aas-muted)]"
+    />
+  </div>
+
+  <p data-glossary-empty hidden class="mt-6 text-[var(--aas-muted)]">{t('glossary.noResults')}</p>
+
+  {
+    kinds.map((kind) => (
+      <section data-kind class="mt-8">
+        <h2 class="text-xs font-semibold tracking-wide text-[var(--aas-muted)] uppercase">{kind.title}</h2>
+        {kind.groups.map((group) => (
+          <div data-group class="mt-3">
+            {group.label && (
+              <h3 class="mb-2 text-sm font-medium text-[var(--aas-text)]">{group.label}</h3>
+            )}
+            <ul class="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
+              {group.terms.map((term) => {
+                // A term with a target is a link; a definition-only term is a
+                // plain card that its `[[Term]]` anchors to (via the id).
+                const Wrapper = term.href ? 'a' : 'div';
+                return (
+                  <li data-term data-search={term.search} id={term.id} class="scroll-mt-24">
+                    <Wrapper
+                      href={term.href}
+                      target={term.external ? '_blank' : undefined}
+                      rel={term.external ? 'noopener noreferrer' : undefined}
+                      class:list={[
+                        'flex items-center gap-3 rounded-xl border border-[var(--aas-border)] bg-[var(--aas-panel)] p-3 no-underline',
+                        term.href && 'aas-lift',
+                      ]}
+                    >
+                      <ToolAvatar name={term.icon.name} logo={term.icon.logo} logoDark={term.icon.logoDark} category={term.icon.category} fallback={term.icon.fallback} size={36} />
+                      <span class="min-w-0">
+                        <span class="block truncate font-semibold text-[var(--aas-text)]">{term.label}</span>
+                        {term.subtitle && (
+                          <span class="block line-clamp-2 text-xs text-[var(--aas-muted)]">{term.subtitle}</span>
+                        )}
+                      </span>
+                    </Wrapper>
+                  </li>
+                );
+              })}
+            </ul>
+          </div>
+        ))}
+      </section>
+    ))
+  }
+</div>
+
+<script>
+  // Client-side filter for the glossary: match each term's `data-search` text,
+  // then hide any category group or kind section left with no visible terms.
+  const root = document.querySelector('[data-glossary]');
+  if (root) {
+    const input = root.querySelector<HTMLInputElement>('[data-glossary-search]');
+    const empty = root.querySelector<HTMLElement>('[data-glossary-empty]');
+    const terms = Array.from(root.querySelectorAll<HTMLElement>('[data-term]'));
+    const groups = Array.from(root.querySelectorAll<HTMLElement>('[data-group]'));
+    const kinds = Array.from(root.querySelectorAll<HTMLElement>('[data-kind]'));
+    const hasVisibleTerm = (el: HTMLElement) => !!el.querySelector('[data-term]:not([hidden])');
+    const apply = () => {
+      const q = (input?.value ?? '').trim().toLowerCase();
+      let any = false;
+      for (const el of terms) {
+        const show = !q || (el.dataset.search ?? '').includes(q);
+        el.hidden = !show;
+        if (show) any = true;
+      }
+      for (const g of groups) g.hidden = !hasVisibleTerm(g);
+      for (const k of kinds) k.hidden = !hasVisibleTerm(k);
+      if (empty) empty.hidden = any;
+    };
+    input?.addEventListener('input', apply);
+  }
+</script>

package/src/components/Home.astro

@@ -0,0 +1,90 @@
+---
+import { getRelativeLocaleUrl } from 'astro:i18n';
+import StackCard from './StackCard.astro';
+import FilterControls from './FilterControls.astro';
+import ArrowUpRight from './ArrowUpRight.astro';
+import { rootCategories, descendantIds } from '@aas-data/categories';
+import { getStacks, slugOf } from '../lib/stacks';
+import { site } from '@aas-data/site';
+import { deriveFacets } from '../lib/facets';
+import { useTranslations, type Lang } from '../i18n/ui';
+
+interface Props {
+  lang: Lang;
+}
+
+const { lang } = Astro.props;
+const t = useTranslations(lang);
+const entries = await getStacks(lang);
+
+// Default order is alphabetical (matches the client's default sort, so no flash).
+// Group by top-level category, rolling up every subcategory in its subtree.
+const byCategory = (categoryId: string) => {
+  const ids = new Set(descendantIds(categoryId));
+  return entries
+    .filter((e) => ids.has(e.data.category))
+    .sort((a, b) => a.data.name.localeCompare(b.data.name));
+};
+
+// Filter facet options, derived from the data (shared with the category pages).
+const facets = deriveFacets(entries, lang);
+
+---
+
+<section class="py-6">
+  <h1 class="text-4xl font-bold tracking-tight">{site.name}</h1>
+  <p class="mt-3 max-w-2xl text-lg text-[var(--aas-muted)]">{t('site.tagline')}</p>
+</section>
+
+{/* Search · filter · sort controls (client-side, URL-synced) */}
+<div class="mt-6">
+  <FilterControls lang={lang} facets={facets} anchorId="categories" />
+</div>
+
+<section class="mt-8 space-y-12">
+  {
+    rootCategories.map((cat) => {
+      const items = byCategory(cat.id);
+      if (items.length === 0) return null;
+      return (
+        <div data-section>
+          <div class="pb-1">
+            <h2 class="text-2xl font-semibold">
+              <a
+                href={getRelativeLocaleUrl(lang, `categories/${cat.id}/`)}
+                data-keep-filters
+                class="text-[var(--aas-text)] no-underline hover:text-[var(--aas-accent)]"
+              >
+                {cat.label[lang]}
+                <ArrowUpRight size={20} class="ml-1 text-[var(--aas-muted)]" />
+              </a>
+            </h2>
+            <p class="mt-1 text-sm text-[var(--aas-muted)]">{cat.description[lang]}</p>
+          </div>
+          <div class="mt-5 grid gap-4 sm:grid-cols-2" data-grid>
+            {items.map((e) => (
+              <StackCard
+                slug={slugOf(e)}
+                lang={lang}
+                name={e.data.name}
+                formerNames={e.data.formerNames}
+                vendor={e.data.vendor}
+                description={e.data.description}
+                tags={e.data.tags}
+                pricing={e.data.pricing}
+                license={e.data.license}
+                language={e.data.language}
+                category={e.data.category}
+                logo={e.data.logo}
+                logoDark={e.data.logoDark}
+                repo={e.data.repo}
+                version={e.data.version}
+                deprecated={e.data.deprecated}
+              />
+            ))}
+          </div>
+        </div>
+      );
+    })
+  }
+</section>

package/src/components/LanguageSwitcher.astro

@@ -0,0 +1,86 @@
+---
+import { getRelativeLocaleUrl } from 'astro:i18n';
+import ChevronDown from './ChevronDown.astro';
+import { languages, type Lang } from '../i18n/ui';
+
+interface Props {
+  lang: Lang;
+  /** Locale-relative path of the current page, e.g. '' or 'stack/litellm/'. */
+  path: string;
+}
+
+const { lang, path } = Astro.props;
+const codes = Object.keys(languages) as Lang[];
+---
+
+<details class="aas-lang">
+  <summary
+    class="flex cursor-pointer list-none items-center gap-1 rounded-lg border border-[var(--aas-border)] px-2.5 py-1 whitespace-nowrap text-[var(--aas-text)] select-none"
+  >
+    {/* Compact language code on mobile; full name from the `sm` breakpoint up. */}
+    <span class="sm:hidden">{lang.toUpperCase()}</span>
+    <span class="hidden sm:inline">{languages[lang]}</span>
+    <ChevronDown class="text-[var(--aas-muted)]" />
+  </summary>
+  <ul
+    class="absolute right-0 z-10 mt-1 min-w-[8rem] overflow-hidden rounded-lg border border-[var(--aas-border)] bg-[var(--aas-panel)] py-1 shadow-lg"
+  >
+    {
+      codes.map((code) => (
+        <li>
+          <a
+            data-lang-link
+            data-lang-code={code}
+            href={getRelativeLocaleUrl(code, path)}
+            class:list={[
+              'block px-3 py-1.5 no-underline hover:bg-[var(--aas-bg)]',
+              code === lang ? 'font-semibold text-[var(--aas-text)]' : 'text-[var(--aas-muted)]',
+            ]}
+            aria-current={code === lang ? 'true' : undefined}
+          >
+            {languages[code]}
+          </a>
+        </li>
+      ))
+    }
+  </ul>
+</details>
+
+<style>
+  /* Lightweight, JS-free dropdown built on <details>. */
+  .aas-lang {
+    position: relative;
+  }
+  .aas-lang > summary::-webkit-details-marker {
+    display: none;
+  }
+</style>
+
+<script>
+  // Carry the current query + hash (selected tab/example/file/section) over to
+  // the other language, so switching keeps you on the same view. The links are
+  // server-rendered without that client-side state, so refresh it when the
+  // dropdown opens (also keeps real hrefs, so open-in-new-tab works too).
+  document.querySelectorAll<HTMLDetailsElement>('.aas-lang').forEach((dd) => {
+    const links = Array.from(dd.querySelectorAll<HTMLAnchorElement>('[data-lang-link]'));
+    const bases = links.map((a) => a.getAttribute('href') ?? '');
+    const sync = () => {
+      const extra = location.search + location.hash;
+      links.forEach((a, i) => a.setAttribute('href', bases[i] + extra));
+    };
+    sync();
+    dd.addEventListener('toggle', () => dd.open && sync());
+
+    // Remember an explicit language choice so the root-home auto-detect
+    // (BaseLayout) respects it instead of overriding on the next visit.
+    links.forEach((a) =>
+      a.addEventListener('click', () => {
+        try {
+          localStorage.setItem('aas:lang', a.dataset.langCode ?? '');
+        } catch {
+          /* ignore */
+        }
+      }),
+    );
+  });
+</script>

package/src/components/ListControls.astro

@@ -0,0 +1,182 @@
+---
+import ChevronDown from './ChevronDown.astro';
+import { useTranslations, type Lang } from '../i18n/ui';
+
+// Sort + pagination control for the concept & article indexes and their
+// category pages. Sorting re-orders every [data-sortgrid] on the page; if a
+// single [data-paginate] grid is present (the flat list on a leaf category
+// page) it is also paginated via ?page=, with the page links rendered into the
+// [data-pager] element. Both pieces mirror their state into the URL the way the
+// stacks catalog does, and degrade to "show everything" without JS.
+//
+// The default is `recent`, which matches the server render (both indexes
+// pre-sort by date, ConceptIndex.astro:25-29 included).
+interface Props {
+  lang: Lang;
+}
+
+const { lang } = Astro.props;
+const t = useTranslations(lang);
+const options = [
+  { key: 'recent', label: t('sort.recent') },
+  { key: 'alpha', label: t('sort.alpha') },
+];
+const summaryClass =
+  'flex items-center gap-1.5 rounded-lg border border-[var(--aas-border)] bg-[var(--aas-panel)] px-3 py-1.5 text-sm text-[var(--aas-text)]';
+const menuClass =
+  'absolute right-0 z-10 mt-1 min-w-[12rem] overflow-y-auto rounded-lg border border-[var(--aas-border)] bg-[var(--aas-panel)] p-1 shadow-lg';
+---
+
+<div class="flex justify-end" data-listcontrols data-default={options[0].key}>
+  <details class="aas-dd">
+    <summary class={summaryClass}>
+      <span class="text-[var(--aas-muted)]">{t('sort.label')}:</span>
+      <span data-sort-label>{options[0].label}</span>
+      <ChevronDown class="text-[var(--aas-muted)]" />
+    </summary>
+    <ul class={menuClass}>
+      {
+        options.map((o, i) => (
+          <li>
+            <button
+              type="button"
+              data-sort={o.key}
+              aria-current={i === 0 ? 'true' : 'false'}
+              class="flex w-full items-center justify-between gap-2 rounded px-2 py-1.5 text-left text-sm hover:bg-[var(--aas-tint)] aria-[current=true]:font-semibold aria-[current=true]:text-[var(--aas-accent)]"
+            >
+              {o.label}
+              <span data-check aria-hidden="true" class="opacity-0">
+                ✓
+              </span>
+            </button>
+          </li>
+        ))
+      }
+    </ul>
+  </details>
+</div>
+
+<script>
+  const bar = document.querySelector<HTMLElement>('[data-listcontrols]');
+  if (bar) {
+    const fallback = bar.dataset.default ?? 'recent';
+    const buttons = Array.from(bar.querySelectorAll<HTMLButtonElement>('[data-sort]'));
+    const labelEl = bar.querySelector<HTMLElement>('[data-sort-label]');
+    const sortGrids = Array.from(document.querySelectorAll<HTMLElement>('[data-sortgrid]'));
+    // Stable snapshot of each grid's cards — the source list every sort starts from.
+    const original = new Map(sortGrids.map((g) => [g, Array.from(g.children) as HTMLElement[]]));
+
+    const pageGrid = document.querySelector<HTMLElement>('[data-paginate]');
+    const pager = document.querySelector<HTMLElement>('[data-pager]');
+    const pageSize = Number(pageGrid?.dataset.pageSize ?? '0') || 0;
+
+    let curSort = fallback;
+    let curPage = 1;
+
+    const byName = (a: HTMLElement, b: HTMLElement) =>
+      (a.dataset.name ?? '').localeCompare(b.dataset.name ?? '');
+    const comparator = (sort: string) =>
+      sort === 'alpha'
+        ? byName
+        : (a: HTMLElement, b: HTMLElement) =>
+            (b.dataset.date ?? '').localeCompare(a.dataset.date ?? '') || byName(a, b);
+
+    function applySort(sort: string) {
+      curSort = sort;
+      for (const grid of sortGrids) {
+        const cards = original.get(grid) ?? [];
+        const ordered = [...cards].sort(comparator(sort));
+        ordered.forEach((c) => grid.appendChild(c));
+      }
+      for (const b of buttons) {
+        const on = b.dataset.sort === sort;
+        b.setAttribute('aria-current', String(on));
+        b.querySelector<HTMLElement>('[data-check]')?.classList.toggle('opacity-0', !on);
+        if (on && labelEl) labelEl.textContent = b.textContent?.replace('✓', '').trim() ?? '';
+      }
+    }
+
+    function pageButton(label: string, page: number | null, opts: { current?: boolean; disabled?: boolean } = {}) {
+      const b = document.createElement('button');
+      b.type = 'button';
+      b.textContent = label;
+      if (page) b.dataset.page = String(page);
+      b.disabled = !!opts.disabled;
+      b.setAttribute('aria-current', opts.current ? 'page' : 'false');
+      b.className =
+        'min-w-9 rounded-lg border border-[var(--aas-border)] bg-[var(--aas-panel)] px-3 py-1.5 text-sm text-[var(--aas-text)] hover:bg-[var(--aas-tint)] disabled:pointer-events-none disabled:opacity-40 aria-[current=page]:border-[var(--aas-accent)] aria-[current=page]:font-semibold aria-[current=page]:text-[var(--aas-accent)]';
+      return b;
+    }
+
+    function renderPager(pages: number) {
+      if (!pager) return;
+      pager.replaceChildren();
+      if (pages <= 1) return;
+      // Page numbers shown in fixed groups of SIZE; the arrows jump a whole
+      // group (‹ → last page of the previous group, › → first of the next), so
+      // long lists are quick to traverse rather than clicking one page at a time.
+      const SIZE = 5;
+      const start = Math.floor((curPage - 1) / SIZE) * SIZE + 1;
+      const end = Math.min(pages, start + SIZE - 1);
+      pager.appendChild(pageButton('«', 1, { disabled: curPage === 1 }));
+      pager.appendChild(pageButton('‹', start - 1, { disabled: start === 1 }));
+      for (let i = start; i <= end; i++) pager.appendChild(pageButton(String(i), i, { current: i === curPage }));
+      // Pad a short last group to five slots with invisible placeholders so
+      // the arrows sit in the same spot on every page.
+      for (let i = end + 1; i < start + SIZE; i++) {
+        const ghost = pageButton('0', null, { disabled: true });
+        ghost.classList.add('invisible');
+        pager.appendChild(ghost);
+      }
+      pager.appendChild(pageButton('›', end + 1, { disabled: end >= pages }));
+      pager.appendChild(pageButton('»', pages, { disabled: curPage === pages }));
+    }
+
+    function applyPage(page: number) {
+      if (!pageGrid || pageSize <= 0) return;
+      const cards = Array.from(pageGrid.children) as HTMLElement[];
+      const pages = Math.max(1, Math.ceil(cards.length / pageSize));
+      curPage = Math.min(Math.max(1, page), pages);
+      const start = (curPage - 1) * pageSize;
+      cards.forEach((c, i) => {
+        c.style.display = i >= start && i < start + pageSize ? '' : 'none';
+      });
+      renderPager(pages);
+    }
+
+    function sync() {
+      const url = new URL(location.href);
+      if (curSort === fallback) url.searchParams.delete('sort');
+      else url.searchParams.set('sort', curSort);
+      if (curPage === 1) url.searchParams.delete('page');
+      else url.searchParams.set('page', String(curPage));
+      history.replaceState(null, '', url);
+    }
+
+    for (const b of buttons) {
+      b.addEventListener('click', () => {
+        applySort(b.dataset.sort ?? fallback);
+        applyPage(1);
+        sync();
+        b.closest('details')?.removeAttribute('open');
+      });
+    }
+
+    if (pager) {
+      pager.addEventListener('click', (e) => {
+        const b = (e.target as HTMLElement).closest<HTMLButtonElement>('[data-page]');
+        if (!b || b.disabled) return;
+        applyPage(Number(b.dataset.page));
+        sync();
+        window.scrollTo({ top: 0 });
+      });
+    }
+
+    const params = new URLSearchParams(location.search);
+    const known = new Set(buttons.map((b) => b.dataset.sort));
+    const wantSort = params.get('sort');
+    const wantPage = Number(params.get('page'));
+    applySort(wantSort && known.has(wantSort) ? wantSort : fallback);
+    applyPage(Number.isFinite(wantPage) && wantPage > 0 ? wantPage : 1);
+  }
+</script>