@grove-dev/astro 0.4.1 → 0.5.0-next.2

package/src/components/RecordSidebar.astro

@@ -0,0 +1,339 @@
+---
+/**
+ * RecordSidebar.astro
+ *
+ * Sticky right-hand column on the record detail page. Renders
+ * up to four cards, each conditional on the model's `sidebar`
+ * visibility flags:
+ *
+ *   - Activity   — repo facts (stars, forks, language, license, …)
+ *   - Freshness  — last commit / last fetch / maintenance status
+ *   - Ecosystem  — stack, platforms, category, tags, hygiene files
+ *   - Source     — curation metadata + reading-time summary
+ *
+ * Empty rows are suppressed entirely — the sidebar never shows "—"
+ * or "0" placeholders that confuse "no data" with "zero".
+ *
+ * Sticky on lg+ (`lg:sticky lg:top-20 lg:max-h-calc(100vh-5rem)
+ * lg:overflow-y-auto`) so the cards stay in view while the user
+ * scrolls the body. Cards are individually rendered so the
+ * sticky container's height is bounded by the actual content.
+ */
+import { formatStars, compact, licenseDisplay } from "@grove-dev/core";
+import type { RecordDetailModel } from "../server/models.js";
+import LanguageBreakdown from "./LanguageBreakdown.astro";
+
+interface Props {
+  detail: RecordDetailModel;
+}
+
+const { detail } = Astro.props;
+const {
+  sidebar,
+  github,
+  stars,
+  forks,
+  language,
+  licenseSpdx,
+  pushedAt,
+  pushedLabel,
+  repoUrl,
+  homepageUrl,
+  ownerRepo,
+  healthLabel,
+  activityBadge,
+  stacks,
+  platforms,
+  tags,
+  category,
+  contributionSignals,
+  languages,
+  totalLanguageBytes,
+  readingMetrics,
+  record,
+} = detail;
+
+// Visibility helpers for individual rows inside the Activity card.
+// `hasRepo` is the discriminator between "GitHub data synced" and
+// "no data fetched yet" — without it the card would show "Stars 0"
+// even when the field was never populated.
+const repo = github;
+const hasRepo = !!repo;
+const starsNumber = typeof stars === "number" && stars > 0 ? stars : null;
+const forksNumber = typeof forks === "number" && forks > 0 ? forks : null;
+const recentReleases = (repo?.releases ?? []).slice(0, 1);
+const isArchived = !!repo?.archived;
+
+// Render a kv row only when both the label and value have content.
+function row(label: string, value: unknown) {
+  if (value === null || value === undefined || value === "") return null;
+  return { label, value };
+}
+---
+
+<aside class="grove-sidebar flex flex-col gap-6 lg:sticky lg:top-20 lg:max-h-[calc(100vh-5rem)] lg:overflow-y-auto" aria-label="Project data">
+
+  {/* ── Activity card ──────────────────────────────────────── */}
+  {sidebar.showActivity && (
+    <section class="grove-card rounded-[var(--radius-lg)] border border-ink-200 bg-background p-5 dark:border-ink-800" aria-label="Activity">
+      <h2 class="grove-card-title m-0 mb-3 text-2xs font-semibold uppercase tracking-wider text-ink-500 dark:text-ink-400">
+        Activity
+      </h2>
+      <dl class="grove-kv m-0 flex flex-col gap-2.5 text-sm">
+        {row("Stars", starsNumber !== null ? formatStars(starsNumber) ?? compact(starsNumber) : null) && (
+          <div class="flex items-baseline justify-between gap-3">
+            <dt class="text-ink-500 dark:text-ink-400">Stars</dt>
+            <dd class="font-mono tabular-nums text-ink-900 dark:text-ink-100">{starsNumber!.toLocaleString()}</dd>
+          </div>
+        )}
+        {row("Forks", forksNumber !== null ? forksNumber.toLocaleString() : null) && (
+          <div class="flex items-baseline justify-between gap-3">
+            <dt class="text-ink-500 dark:text-ink-400">Forks</dt>
+            <dd class="font-mono tabular-nums text-ink-900 dark:text-ink-100">{forksNumber!.toLocaleString()}</dd>
+          </div>
+        )}
+        {row("Contributors", repo?.contributors_count) && (
+          <div class="flex items-baseline justify-between gap-3">
+            <dt class="text-ink-500 dark:text-ink-400">Contributors</dt>
+            <dd class="font-mono tabular-nums text-ink-900 dark:text-ink-100">{Number(repo!.contributors_count).toLocaleString()}</dd>
+          </div>
+        )}
+        {row("Open issues", repo?.open_issues_count) && (
+          <div class="flex items-baseline justify-between gap-3">
+            <dt class="text-ink-500 dark:text-ink-400">Open issues</dt>
+            <dd class="font-mono tabular-nums text-ink-900 dark:text-ink-100">{Number(repo!.open_issues_count).toLocaleString()}</dd>
+          </div>
+        )}
+        {row("Watchers", repo?.subscribers_count) && (
+          <div class="flex items-baseline justify-between gap-3">
+            <dt class="text-ink-500 dark:text-ink-400">Watchers</dt>
+            <dd class="font-mono tabular-nums text-ink-900 dark:text-ink-100">{Number(repo!.subscribers_count).toLocaleString()}</dd>
+          </div>
+        )}
+        {row("Language", language) && (
+          <div class="flex items-baseline justify-between gap-3">
+            <dt class="text-ink-500 dark:text-ink-400">Language</dt>
+            <dd class="text-ink-900 dark:text-ink-100">{language}</dd>
+          </div>
+        )}
+        {row("License", licenseSpdx) && (
+          <div class="flex items-baseline justify-between gap-3">
+            <dt class="text-ink-500 dark:text-ink-400">License</dt>
+            <dd class="font-mono text-ink-900 dark:text-ink-100">{licenseDisplay(licenseSpdx)}</dd>
+          </div>
+        )}
+        {row("Default branch", repo?.default_branch) && (
+          <div class="flex items-baseline justify-between gap-3">
+            <dt class="text-ink-500 dark:text-ink-400">Default branch</dt>
+            <dd class="font-mono text-ink-900 dark:text-ink-100">{repo!.default_branch}</dd>
+          </div>
+        )}
+        {row("First commit", repo?.created_at ? new Date(String(repo!.created_at)).getUTCFullYear() : null) && (
+          <div class="flex items-baseline justify-between gap-3">
+            <dt class="text-ink-500 dark:text-ink-400">First commit</dt>
+            <dd class="text-ink-900 dark:text-ink-100">
+              <time datetime={String(repo!.created_at)}>{new Date(String(repo!.created_at)).getUTCFullYear()}</time>
+            </dd>
+          </div>
+        )}
+        {recentReleases[0] && (
+          <div class="flex items-baseline justify-between gap-3">
+            <dt class="text-ink-500 dark:text-ink-400">Latest release</dt>
+            <dd class="text-ink-900 dark:text-ink-100">
+              <a
+                href={recentReleases[0].html_url ?? repoUrl}
+                target="_blank"
+                rel="noopener noreferrer"
+                class="no-underline hover:underline"
+              >
+                {recentReleases[0].tag_name ?? recentReleases[0].name ?? "—"}
+              </a>
+            </dd>
+          </div>
+        )}
+      </dl>
+
+      <LanguageBreakdown languages={languages} totalBytes={totalLanguageBytes} />
+    </section>
+  )}
+
+  {/* ── Freshness card ─────────────────────────────────────── */}
+  {sidebar.showFreshness && (
+    <section class="grove-card rounded-[var(--radius-lg)] border border-ink-200 bg-background p-5 dark:border-ink-800" aria-label="Freshness">
+      <h2 class="grove-card-title m-0 mb-3 text-2xs font-semibold uppercase tracking-wider text-ink-500 dark:text-ink-400">
+        Freshness
+      </h2>
+      <dl class="grove-kv m-0 flex flex-col gap-2.5 text-sm">
+        {pushedLabel && pushedLabel !== "—" && (
+          <div class="flex items-baseline justify-between gap-3">
+            <dt class="text-ink-500 dark:text-ink-400">Last commit</dt>
+            <dd class="text-ink-900 dark:text-ink-100">{pushedLabel}</dd>
+          </div>
+        )}
+        {repo?.updated_at && (
+          <div class="flex items-baseline justify-between gap-3">
+            <dt class="text-ink-500 dark:text-ink-400">Last fetched</dt>
+            <dd class="text-ink-900 dark:text-ink-100">
+              <time datetime={String(repo.updated_at)}>{new Date(String(repo.updated_at)).toLocaleDateString()}</time>
+            </dd>
+          </div>
+        )}
+        {activityBadge && (
+          <div class="flex items-baseline justify-between gap-3">
+            <dt class="text-ink-500 dark:text-ink-400">Maintenance</dt>
+            <dd>
+              <span data-activity-tone={activityBadge.tone} class="grove-pill grove-pill--activity inline-flex items-center gap-1 rounded border px-1.5 py-0.5 text-[10px] font-medium">
+                {activityBadge.label}
+              </span>
+            </dd>
+          </div>
+        )}
+        {healthLabel && (
+          <div class="flex items-baseline justify-between gap-3">
+            <dt class="text-ink-500 dark:text-ink-400">Health</dt>
+            <dd class="text-ink-900 dark:text-ink-100">{healthLabel}</dd>
+          </div>
+        )}
+        {isArchived && (
+          <div class="flex items-baseline justify-between gap-3">
+            <dt class="text-ink-500 dark:text-ink-400">Status</dt>
+            <dd class="text-amber-700 dark:text-amber-400">Archived</dd>
+          </div>
+        )}
+        {repo?.homepage && (
+          <div class="flex items-baseline justify-between gap-3">
+            <dt class="text-ink-500 dark:text-ink-400">Docs</dt>
+            <dd class="truncate text-ink-900 dark:text-ink-100">
+              <a href={String(repo.homepage)} target="_blank" rel="noopener noreferrer" class="no-underline hover:underline">
+                {new URL(String(repo.homepage)).hostname}
+              </a>
+            </dd>
+          </div>
+        )}
+        {repoUrl && (
+          <div class="flex items-baseline justify-between gap-3">
+            <dt class="text-ink-500 dark:text-ink-400">Source</dt>
+            <dd class="text-ink-900 dark:text-ink-100">
+              <a href={repoUrl} target="_blank" rel="noopener noreferrer" class="no-underline hover:underline">
+                {ownerRepo ? `${ownerRepo.owner}/${ownerRepo.repo}` : repoUrl}
+              </a>
+            </dd>
+          </div>
+        )}
+      </dl>
+    </section>
+  )}
+
+  {/* ── Ecosystem card ─────────────────────────────────────── */}
+  {sidebar.showEcosystem && (
+    <section class="grove-card rounded-[var(--radius-lg)] border border-ink-200 bg-background p-5 dark:border-ink-800" aria-label="Ecosystem">
+      <h2 class="grove-card-title m-0 mb-3 text-2xs font-semibold uppercase tracking-wider text-ink-500 dark:text-ink-400">
+        Ecosystem
+      </h2>
+
+      {stacks.length > 0 && (
+        <div class="mb-3">
+          <h3 class="m-0 mb-1.5 text-2xs font-medium uppercase tracking-wider text-ink-500 dark:text-ink-400">Stack</h3>
+          <ul class="m-0 flex list-none flex-wrap gap-1.5 p-0">
+            {stacks.map((s) => (
+              <li>
+                <a href={`/${detail.slug}?stack=${encodeURIComponent(s)}`} class="rounded-full bg-secondary px-2 py-0.5 text-2xs font-medium text-secondary-foreground no-underline">
+                  {s}
+                </a>
+              </li>
+            ))}
+          </ul>
+        </div>
+      )}
+
+      {platforms.length > 0 && (
+        <div class="mb-3">
+          <h3 class="m-0 mb-1.5 text-2xs font-medium uppercase tracking-wider text-ink-500 dark:text-ink-400">Platforms</h3>
+          <ul class="m-0 flex list-none flex-wrap gap-1.5 p-0">
+            {platforms.map((p) => (
+              <li class="rounded-full border border-ink-200 px-2 py-0.5 text-2xs font-medium text-ink-700 dark:border-ink-800 dark:text-ink-300">
+                {p}
+              </li>
+            ))}
+          </ul>
+        </div>
+      )}
+
+      {category && (
+        <div class="mb-3">
+          <h3 class="m-0 mb-1.5 text-2xs font-medium uppercase tracking-wider text-ink-500 dark:text-ink-400">Category</h3>
+          <a href={`/${detail.slug}?category=${encodeURIComponent(category)}`} class="rounded-full bg-secondary px-2 py-0.5 text-2xs font-medium text-secondary-foreground no-underline">
+            {category}
+          </a>
+        </div>
+      )}
+
+      {tags.length > 0 && (
+        <div class="mb-3">
+          <h3 class="m-0 mb-1.5 text-2xs font-medium uppercase tracking-wider text-ink-500 dark:text-ink-400">Tags</h3>
+          <ul class="m-0 flex list-none flex-wrap gap-1.5 p-0">
+            {tags.map((t) => (
+              <li>
+                <a href={`/${detail.slug}?tag=${encodeURIComponent(t)}`} class="rounded-full border border-ink-200 px-2 py-0.5 text-2xs font-medium text-ink-700 no-underline dark:border-ink-800 dark:text-ink-300">
+                  {t}
+                </a>
+              </li>
+            ))}
+          </ul>
+        </div>
+      )}
+
+      {contributionSignals.length > 0 && (
+        <div>
+          <h3 class="m-0 mb-1.5 text-2xs font-medium uppercase tracking-wider text-ink-500 dark:text-ink-400">Repository hygiene</h3>
+          <ul class="m-0 flex list-none flex-col gap-1 p-0 text-sm">
+            {contributionSignals.map((s) => (
+              <li class="inline-flex items-center gap-1.5 text-ink-700 dark:text-ink-200">
+                {s.ok ? (
+                  <svg viewBox="0 0 16 16" width="11" height="11" aria-hidden="true" fill="currentColor" class="text-emerald-600 dark:text-emerald-400">
+                    <path d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.75.75 0 0 1 1.06-1.06L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z" />
+                  </svg>
+                ) : (
+                  <svg viewBox="0 0 16 16" width="11" height="11" aria-hidden="true" fill="currentColor" class="text-ink-400">
+                    <path d="M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.75.75 0 1 1 1.06 1.06L9.06 8l3.22 3.22a.75.75 0 1 1-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 0 1-1.06-1.06L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06Z" />
+                  </svg>
+                )}
+                {s.label}
+              </li>
+            ))}
+          </ul>
+        </div>
+      )}
+    </section>
+  )}
+
+  {/* ── Source card (small) ────────────────────────────────── */}
+  {sidebar.showSource && (
+    <section class="grove-card grove-card--muted rounded-[var(--radius-lg)] border border-dashed border-ink-200 bg-background/50 p-4 text-2xs text-ink-500 dark:border-ink-800 dark:text-ink-400" aria-label="Sources">
+      <h2 class="grove-card-title m-0 mb-1.5 text-2xs font-semibold uppercase tracking-wider text-ink-500 dark:text-ink-400">
+        Source
+      </h2>
+      <p class="m-0 leading-relaxed">
+        Reviewed by {record.curation?.reviewedBy ?? "grove"}
+        on <time datetime={String(record.curation?.reviewedAt)}>
+          {record.curation?.reviewedAt ? new Date(String(record.curation.reviewedAt)).toLocaleDateString() : "—"}
+        </time>.
+      </p>
+      {detail.collectionMembership && detail.collectionMembership.length > 0 && (
+        <p class="m-0 mt-1.5 leading-relaxed">
+          <span class="font-semibold">Also in: </span>
+          {detail.collectionMembership.map((c, i) => (
+            <>
+              <a href={c.url} class="text-inherit no-underline hover:underline">{c.title}</a>{i < detail.collectionMembership.length - 1 ? ", " : ""}
+            </>
+          ))}
+        </p>
+      )}
+      {readingMetrics.wordCount > 0 && (
+        <p class="m-0 mt-1 leading-relaxed">
+          Notes: {readingMetrics.wordCount.toLocaleString()} words · {readingMetrics.minutes} min read.
+        </p>
+      )}
+    </section>
+  )}
+</aside>

package/src/components/SubmissionClient.astro

@@ -4,11 +4,17 @@ interface Props {
   existingFullNames: string[];
   repoUrl: string;
   fields: { category: boolean; stack: boolean; platforms: boolean; tags: boolean };
+  /** Taxonomy ids for client-side validation. */
+  taxonomy?: {
+    categoryIds?: string[];
+    stackIds?: string[];
+    platformIds?: string[];
+  };
 }
-const { existingSlugs, existingFullNames, repoUrl, fields } = Astro.props;
+const { existingSlugs, existingFullNames, repoUrl, fields, taxonomy } = Astro.props;
 ---
 
-<script is:inline define:vars={{ existingSlugs, existingFullNames, repoUrl, fields }}>
+<script is:inline define:vars={{ existingSlugs, existingFullNames, repoUrl, fields, taxonomy }}>
     // @ts-nocheck
     const $ = (selector) => document.querySelector(selector);
     const inputs = {
@@ -24,6 +30,9 @@ const { existingSlugs, existingFullNames, repoUrl, fields } = Astro.props;
     const openPrLink = $("#open-pr-link");
     const slugSet = new Set(existingSlugs);
     const repoSet = new Set(existingFullNames);
+    const categoryIds = new Set(taxonomy?.categoryIds ?? []);
+    const stackIds = new Set(taxonomy?.stackIds ?? []);
+    const platformIds = new Set(taxonomy?.platformIds ?? []);
     let repository = null;
 
     const slugify = (value) => String(value || "").toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "");
@@ -80,10 +89,45 @@ const { existingSlugs, existingFullNames, repoUrl, fields } = Astro.props;
         "",
       ].join("\n");
     };
+    const validationIssues = () => {
+      const issues = [];
+      if (slugSet.has(slugify(inputs.slug.value))) {
+        issues.push("A record with that slug already exists — update the existing one instead of opening a duplicate PR.");
+      }
+      if (inputs.description.value.trim().length < 40) {
+        issues.push("Description must be at least 40 characters.");
+      }
+      if (fields.category && (!inputs.category.value || inputs.category.value === "uncategorized" || (categoryIds.size > 0 && !categoryIds.has(inputs.category.value)))) {
+        issues.push("Choose a category from the taxonomy.");
+      }
+      if (fields.stack && (!inputs.stack.value || (stackIds.size > 0 && !stackIds.has(inputs.stack.value)))) {
+        issues.push("Choose a primary stack from the taxonomy.");
+      }
+      if (fields.platforms && selectedPlatforms().length === 0) {
+        issues.push("Select at least one platform.");
+      } else if (fields.platforms && platformIds.size > 0) {
+        const bad = selectedPlatforms().find((p) => !platformIds.has(p));
+        if (bad) issues.push(`Platform "${bad}" is not in the taxonomy.`);
+      }
+      return issues;
+    };
     const refresh = () => {
       const yaml = generateYaml();
       preview.textContent = yaml || "Paste a GitHub URL to generate a draft.";
-      if (!yaml) return;
+      if (!yaml) {
+        openPrLink.classList.add("pointer-events-none", "opacity-50");
+        copyButton.disabled = true;
+        copyButton.classList.add("pointer-events-none", "opacity-50");
+        return;
+      }
+      const issues = validationIssues();
+      if (issues.length > 0) {
+        setStatus(issues[0], "error");
+        openPrLink.classList.add("pointer-events-none", "opacity-50");
+        copyButton.disabled = true;
+        copyButton.classList.add("pointer-events-none", "opacity-50");
+        return;
+      }
       const params = new URLSearchParams({ filename: `data/records/${slugify(inputs.slug.value)}.yml`, value: yaml });
       openPrLink.href = `${repoUrl}/new/main?${params}`;
       openPrLink.classList.remove("pointer-events-none", "opacity-50");

package/src/components/TableOfContents.astro

@@ -0,0 +1,115 @@
+---
+/**
+ * TableOfContents.astro
+ *
+ * Collapsible on-page nav for a record's Markdown body.
+ *
+ * Behavior:
+ *   - Mobile (<lg): rendered as a closed `<details>` dropdown.
+ *   - Desktop (lg+): forced open via `lg:!open` so the nav stays
+ *     visible while the user scrolls.
+ *   - Heading IDs come from the markdown renderer; the TOC entries
+ *     are pre-computed by `extractToc` and passed in.
+ *
+ * The scroll-spy + smooth-scroll logic lives in an inline script
+ * that finds every `data-toc-link` on the page and highlights the
+ * link whose target is closest to the top of the viewport (rAF-
+ * throttled). Active styling comes from the `data-toc-active`
+ * attribute toggled in the script + CSS rules in `styles.css`.
+ */
+import type { TocEntry } from "@grove-dev/core";
+
+interface Props {
+  /** Heading entries from `extractToc`. */
+  items: TocEntry[];
+  /** Optional accessible label override. */
+  label?: string;
+}
+
+const { items, label = "On this page" } = Astro.props;
+const hasItems = items.length > 1;
+---
+
+{hasItems && (
+  <details class="grove-toc mb-8 rounded-[var(--radius-lg)] border border-ink-200 bg-background open:bg-background dark:border-ink-800 lg:!open">
+    <summary class="cursor-pointer list-none px-4 py-3 text-2xs font-semibold uppercase tracking-wider text-ink-500 hover:text-ink-900 dark:text-ink-400 dark:hover:text-ink-100 lg:cursor-default lg:pointer-events-none">
+      <span class="inline-flex items-center gap-1.5">
+        <svg viewBox="0 0 16 16" width="11" height="11" aria-hidden="true" fill="currentColor" class="grove-toc-chevron transition-transform lg:hidden">
+          <path d="M6 4l4 4-4 4V4z" />
+        </svg>
+        {label}
+        <span class="ml-1 rounded-full bg-ink-100 px-1.5 py-0.5 text-[10px] font-medium text-ink-500 dark:bg-ink-800 dark:text-ink-300">
+          {items.length}
+        </span>
+      </span>
+    </summary>
+    <ol class="grove-toc-list mt-1 list-none border-t border-ink-200 p-2 text-sm dark:border-ink-800 lg:border-t-0 lg:p-0">
+      {items.map((entry) => (
+        <li class="grove-toc-item border-b border-ink-100 last:border-b-0 dark:border-ink-800 lg:border-b-0 lg:py-0.5">
+          <a
+            href={`#${entry.id}`}
+            class="grove-toc-link block truncate px-3 py-2 text-ink-500 no-underline transition-colors hover:text-ink-900 dark:text-ink-400 dark:hover:text-ink-100 lg:px-2 lg:py-1"
+            data-toc-link={entry.id}
+          >
+            {entry.text}
+          </a>
+        </li>
+      ))}
+    </ol>
+  </details>
+)}
+
+{hasItems && (
+  <script is:inline define:vars={{ tocIds: items.map((i) => i.id) }}>
+    (function () {
+      // Smooth scroll + history-replace on TOC link clicks.
+      function onClick(e) {
+        var link = e.target.closest("a[data-toc-link]");
+        if (!link) return;
+        e.preventDefault();
+        var id = link.getAttribute("data-toc-link");
+        var target = document.getElementById(id);
+        if (!target) return;
+        target.scrollIntoView({ behavior: "smooth", block: "start" });
+        history.replaceState(null, "", "#" + id);
+      }
+      document.addEventListener("click", onClick);
+
+      // Scroll-spy: rAF-throttled, toggles `data-toc-active` on the
+      // link whose heading is closest to the top of the viewport.
+      // CSS handles the active styling — no dynamic Tailwind classes.
+      var headings = tocIds
+        .map(function (id) { return document.getElementById(id); })
+        .filter(function (el) { return !!el; });
+      if (!headings.length) return;
+      var links = new Map();
+      document.querySelectorAll("a[data-toc-link]").forEach(function (a) {
+        links.set(a.getAttribute("data-toc-link"), a);
+      });
+      var active = null;
+      var ticking = false;
+      function update() {
+        ticking = false;
+        var top = window.scrollY + 140;
+        var current = headings[0].id;
+        for (var i = 0; i < headings.length; i++) {
+          if (headings[i].offsetTop <= top) current = headings[i].id;
+          else break;
+        }
+        if (current === active) return;
+        active = current;
+        links.forEach(function (a, id) {
+          if (id === current) a.setAttribute("data-toc-active", "");
+          else a.removeAttribute("data-toc-active");
+        });
+      }
+      function onScroll() {
+        if (ticking) return;
+        ticking = true;
+        requestAnimationFrame(update);
+      }
+      window.addEventListener("scroll", onScroll, { passive: true });
+      update();
+    })();
+  </script>
+)}

package/src/server/collections.ts

@@ -19,7 +19,12 @@ interface RawRecord {
   platforms?: string[];
   license?: string;
   visibility?: string;
+  /** GitHub stargazers count. Stored on `github.repository.stargazers_count`
+   *  in the full payload; read explicitly because the index payload
+   *  does not flatten it. */
   stars?: number;
+  /** GitHub fork count. Stored on `github.repository.forks_count`. */
+  forks?: number;
   pushedAt?: string;
   lastCommitAt?: string;
   category?: string;
@@ -27,6 +32,15 @@ interface RawRecord {
   scores?: { curation?: number; activity?: number };
   repoUrl?: string;
   links?: { github?: string; website?: string };
+  /** GitHub metadata block on the full record. The star / fork counts
+   *  are read from `github.repository.stargazers_count` /
+   *  `github.repository.forks_count` here. */
+  github?: {
+    repository?: {
+      stargazers_count?: number;
+      forks_count?: number;
+    };
+  };
 }
 
 /**
@@ -68,7 +82,8 @@ export function recordsToCollectionEntries(
       platform: r.platforms,
       license: r.license,
       status: r.visibility,
-      stars: r.stars,
+      stars: r.stars ?? r.github?.repository?.stargazers_count,
+      forks: r.forks ?? r.github?.repository?.forks_count,
       pushedAt: r.pushedAt ?? r.lastCommitAt,
       curationScore: r.scores?.curation,
       activityScore: r.scores?.activity,
@@ -97,6 +112,10 @@ export interface CollectionPageModel {
   total: number;
   isEmpty: boolean;
   entries: CollectionEntry[];
+  /** ItemList JSON-LD block. Pass to BaseLayout as the `jsonLd` prop
+   *  so it ships in the document head and is indexable by search
+   *  engines as a list of `SoftwareApplication` items. */
+  jsonLd?: unknown;
   related: Array<{ slug: string; title: string; url: string }>;
 }
 
@@ -121,6 +140,7 @@ export function getCollectionPageModel(
   collection: Collection,
   entries: CollectionEntry[],
   allCollections: Collection[],
+  site?: { name?: string; url?: string },
 ): CollectionPageModel {
   const result = runCollection(collection, entries);
   const related = findRelated(collection, allCollections, 4).map((c) => ({
@@ -128,6 +148,29 @@ export function getCollectionPageModel(
     title: c.title,
     url: `/collections/${c.slug}/`,
   }));
+  // ItemList JSON-LD. Search engines can use this to surface
+  // individual entries directly from the collection URL.
+  // Cap at 50 entries to keep the JSON-LD payload bounded;
+  // search engines don't index beyond that anyway.
+  const itemListElement = result.entries.slice(0, 50).map((entry, index) => ({
+    "@type": "ListItem",
+    position: index + 1,
+    item: {
+      "@type": "SoftwareApplication",
+      name: entry.title,
+      url: entry.url,
+      description: entry.description,
+    },
+  }));
+  const jsonLd = {
+    "@context": "https://schema.org",
+    "@type": "ItemList",
+    name: collection.title,
+    description: collection.description,
+    url: site?.url ? `${site.url.replace(/\/$/, "")}/collections/${collection.slug}/` : undefined,
+    numberOfItems: result.entries.length,
+    itemListElement,
+  };
   return {
     collection: {
       slug: collection.slug,
@@ -141,6 +184,7 @@ export function getCollectionPageModel(
     isEmpty: result.isEmpty,
     entries: result.entries,
     related,
+    jsonLd,
   };
 }
 
@@ -202,3 +246,35 @@ export async function loadCollections(cwd: string): Promise<Collection[]> {
   }
   return out;
 }
+
+/**
+ * Reverse lookup — given a record, return the slugs of every
+ * curated collection that includes it. Walks each collection's
+ * query + ranking once, applies the same filter the collection
+ * page uses, and returns the collection slugs that contain the
+ * target record. Used by the detail page's sidebar to show
+ * "Also in" / "Collection membership" links.
+ *
+ * The returned array includes `{slug, title}` pairs so the
+ * sidebar can render both the link target and a user-facing
+ * label without re-loading the collection YAML.
+ */
+export function findCollectionsFor(
+  target: { slug?: string; stack?: string; stacks?: string[]; platforms?: string[]; licenses?: string[]; category?: string; visibility?: string; status?: string },
+  collections: Collection[],
+  entries: CollectionEntry[],
+): { slug: string; title: string; url: string }[] {
+  if (!target.slug) return [];
+  const result: { slug: string; title: string; url: string }[] = [];
+  for (const collection of collections) {
+    const filtered = runCollection(collection, entries).entries;
+    if (filtered.some((entry) => entry.slug === target.slug)) {
+      result.push({
+        slug: collection.slug,
+        title: collection.title,
+        url: `/collections/${collection.slug}/`,
+      });
+    }
+  }
+  return result;
+}