@grove-dev/astro 0.2.10 → 0.2.13

package/dist/lib/taxonomy-counts.js.map

@@ -1 +1 @@
-{"version":3,"file":"taxonomy-counts.js","sourceRoot":"","sources":["../../src/lib/taxonomy-counts.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AASH,2CAA2C;AAC3C,MAAM,UAAU,eAAe,CAC7B,OAAY;IAEZ,MAAM,CAAC,GAAG,IAAI,GAAG,EAAkB,CAAC;IACpC,KAAK,MAAM,CAAC,IAAI,OAAO,EAAE,CAAC;QACxB,MAAM,CAAC,GAAG,CAAC,CAAC,QAAQ,IAAI,OAAO,CAAC;QAChC,CAAC,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC;IAChC,CAAC;IACD,OAAO,CAAC,CAAC;AACX,CAAC;AAED,2EAA2E;AAC3E,MAAM,UAAU,YAAY,CAC1B,OAAY;IAEZ,MAAM,CAAC,GAAG,IAAI,GAAG,EAAkB,CAAC;IACpC,KAAK,MAAM,CAAC,IAAI,OAAO,EAAE,CAAC;QACxB,MAAM,IAAI,GAAG,IAAI,GAAG,CAClB,CAAC,CAAC,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC,CAAC,MAAM,IAAI,EAAE,CAAC,CAAC,CAAC,MAAM,CACnC,CAAC,CAAC,EAAe,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC,CAC/B,CACF,CAAC;QACF,KAAK,MAAM,CAAC,IAAI,IAAI,EAAE,CAAC;YACrB,CAAC,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC;QAChC,CAAC;IACH,CAAC;IACD,OAAO,CAAC,CAAC;AACX,CAAC;AAED,6DAA6D;AAC7D,MAAM,UAAU,YAAY,CAC1B,OAAY;IAEZ,MAAM,CAAC,GAAG,IAAI,GAAG,EAAkB,CAAC;IACpC,KAAK,MAAM,CAAC,IAAI,OAAO,EAAE,CAAC;QACxB,KAAK,MAAM,CAAC,IAAI,CAAC,CAAC,QAAQ,EAAE,MAAM,IAAI,EAAE,EAAE,CAAC;YACzC,CAAC,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC;QAChC,CAAC;IACH,CAAC;IACD,OAAO,CAAC,CAAC;AACX,CAAC"}
+{"version":3,"file":"taxonomy-counts.js","sourceRoot":"","sources":["../../src/lib/taxonomy-counts.ts"],"names":[],"mappings":"AAMA,2DAA2D;AAC3D,MAAM,UAAU,eAAe,CAAC,QAA0B,EAAE;IAC1D,MAAM,CAAC,GAAG,IAAI,GAAG,EAAkB,CAAC;IACpC,KAAK,MAAM,CAAC,IAAI,KAAK,EAAE,CAAC;QACtB,MAAM,CAAC,GAAG,CAAC,CAAC,QAAQ,IAAI,OAAO,CAAC;QAChC,CAAC,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC;IAChC,CAAC;IACD,OAAO,CAAC,CAAC;AACX,CAAC;AAED,2DAA2D;AAC3D,MAAM,UAAU,YAAY,CAAC,QAA0B,EAAE;IACvD,MAAM,CAAC,GAAG,IAAI,GAAG,EAAkB,CAAC;IACpC,KAAK,MAAM,CAAC,IAAI,KAAK,EAAE,CAAC;QACtB,MAAM,MAAM,GAAG,IAAI,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC,CAAC,MAAM,IAAI,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAa,CAAC,CAAC;QACnF,IAAI,MAAM,CAAC,IAAI,KAAK,CAAC;YAAE,MAAM,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;QAC3C,KAAK,MAAM,KAAK,IAAI,MAAM;YAAE,CAAC,CAAC,GAAG,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC;IACpE,CAAC;IACD,OAAO,CAAC,CAAC;AACX,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@grove-dev/astro",
-  "version": "0.2.10",
+  "version": "0.2.13",
   "type": "module",
   "description": "Astro framework adapter for Grove. Components, layouts, design tokens, and a default template.",
   "license": "MIT",
@@ -43,9 +43,9 @@
     "./layouts/*": "./src/layouts/*.astro"
   },
   "dependencies": {
-    "astro": "^6.4.6",
-    "@grove-dev/core": "0.2.10",
-    "@grove-dev/ui": "0.2.10"
+    "@grove-dev/core": "0.2.13",
+    "@grove-dev/ui": "1.0.3",
+    "astro": "^6.4.6"
   },
   "peerDependencies": {
     "astro": "^6.0.0"

package/src/components/AppsIndexRow.astro

@@ -1,204 +1,75 @@
 ---
-/**
- * AppsIndexRow — compact table row for the list page.
- *
- * Renders: avatar + name + description + 3 metadata tiles
- * (license, stars, updated) + chip row (stack/platform) + two
- * CTAs (Details, GitHub). Designed for a dense table that the
- * client-side filter script (and screen readers) can scan.
- *
- * `data-*` attributes are emitted so the consumer's filter script
- * can read them and toggle visibility without re-rendering.
- *
- * Generic: takes a `Resource`. For non-project kinds the project
- * fields are simply absent and the row degrades to a minimal
- * name + description layout.
- */
-
-import type { Resource, ProjectRecord } from "@grove-dev/core";
-import { getOwnerAndRepoFromRepoUrl, getOwnerAvatarUrl } from "../lib/repo";
-import { formatRelative, formatStars } from "../lib/format";
-import { statusDisplay, prettySlug } from "../lib/display";
+import type { IndexRecord } from "@grove-dev/core";
+import Icon from "./Icon.astro";
+import { formatRelative, formatStars, getOwnerAndRepoFromRepoUrl, getOwnerAvatarUrl, statusDisplay } from "@grove-dev/astro";
 
 interface Props {
-  record: Resource;
+  record: IndexRecord;
   detailHref: string;
   /** Whether to show stack/platform chips. Default true. */
   showChips?: boolean;
   class?: string;
 }
 
-const {
-  record,
-  detailHref,
-  showChips = true,
-  class: className = "",
-} = Astro.props;
-
-const isProject = record.kind === "project";
-const project = isProject ? (record as ProjectRecord) : null;
-
-const name =
-  record.kind === "resource"
-    ? (record as { title: string }).title
-    : (record as { name: string }).name;
-const description = record.description ?? "";
-const repoUrl = project?.repoUrl;
-const logoUrl = project?.logoUrl;
-const stacks = project?.stacks ?? (project?.stack ? [project.stack] : []);
+const { record, detailHref, showChips = true, class: className = "" } = Astro.props;
+const item = record;
+const project = item.kind === "project" ? item : null;
+const name = item.kind === "resource" ? item.title : item.name;
+const repoHref = project?.repoUrl ?? item.links.github;
+const { owner, repo } = getOwnerAndRepoFromRepoUrl(repoHref ?? "");
+const avatar = project ? project.logoUrl ?? getOwnerAvatarUrl(owner, 80) : undefined;
+const initials = name.split(/\s+/).map((word) => word[0]).filter(Boolean).slice(0, 2).join("").toUpperCase();
+const stacks = project ? [project.stack, ...project.stacks].filter(Boolean) : [];
 const platforms = project?.platforms ?? [];
-const github = project?.github?.repository;
-const stars = github?.stargazers_count;
-const licenseSpdx = github?.license?.spdx_id;
-const pushedAt = github?.pushed_at;
-const healthStatus = project?.health?.status;
-const githubUrl =
-  repoUrl ?? (record.links as { github?: string } | undefined)?.github;
-
-const ownerRepo = repoUrl ? getOwnerAndRepoFromRepoUrl(repoUrl) : null;
-const avatarSrc =
-  logoUrl ?? (ownerRepo ? getOwnerAvatarUrl(ownerRepo.owner, 80) : null);
-const initials = (name || "")
-  .replace(/[^a-z0-9]/gi, "")
-  .slice(0, 2)
-  .toUpperCase();
-
-const allTags = [
-  ...stacks.slice(0, 2).map((s) => `Stack: ${s}`),
-  ...platforms.slice(0, 1).map((p) => `Platform: ${p}`),
-];
-const starsLabel = formatStars(stars);
-const updatedLabel = formatRelative(pushedAt);
-const healthLabel = healthStatus ? statusDisplay(healthStatus) : null;
-
-const tags = record.tags ?? [];
-const labels = record.curation?.labels ?? [];
+const stars = project?.github?.stars;
+const updatedAt = project?.github?.pushedAt ?? (item.kind === "resource" ? item.publishedAt : null);
+const license = project?.github?.license;
+const status = project?.health?.status;
+const curated = Boolean(item.curation?.reviewed || (project && (project.bestFor.length || project.whyListed.length || project.caveats.length)));
 ---
 
-<article
-  class:list={[
-    "grove-row grove-card grid grid-cols-1 gap-3 p-4 sm:grid-cols-[auto_1fr_auto] sm:items-center",
-    className,
-  ]}
-  data-record-slug={record.slug}
-  data-record-name={name}
-  data-record-kind={record.kind}
-  data-record-category={record.category}
-  data-record-stacks={stacks.join(",")}
-  data-record-platforms={platforms.join(",")}
-  data-record-tags={tags.join(",")}
-  data-record-labels={labels.join(",")}
-  data-record-search={[name, description, ownerRepo?.owner ?? "", ...stacks, ...platforms, ...tags, licenseSpdx ?? ""].join(" ").toLowerCase()}
->
-  <div class="flex items-center gap-3">
-    <div class="flex-shrink-0">
-      {avatarSrc ? (
-        <img
-          src={avatarSrc}
-          alt=""
-          width="32"
-          height="32"
-          loading="lazy"
-          decoding="async"
-          class="h-8 w-8 rounded-md border border-ink-200 object-contain bg-white dark:border-ink-800 dark:bg-ink-950"
-        />
+<article class={`group relative flex flex-col gap-3 rounded-lg border border-ink-200 bg-white p-4 transition-colors hover:border-ink-300 hover:shadow-[0_1px_2px_rgba(0,0,0,0.04),0_4px_12px_-2px_rgba(0,0,0,0.06)] dark:border-ink-800 dark:bg-ink-950 dark:hover:border-ink-700 ${className}`}>
+  <header class="flex items-start gap-3">
+    <a href={detailHref} class="relative z-10 flex shrink-0" aria-label={`Open ${name} details`}>
+      {avatar ? (
+        <img src={avatar} alt={`${name} avatar`} width="44" height="44" loading="lazy" class="h-11 w-11 rounded-md border border-ink-200 bg-white object-cover dark:border-ink-800 dark:bg-ink-900" />
       ) : (
-        <span
-          aria-hidden="true"
-          class="inline-flex h-8 w-8 items-center justify-center rounded-md border border-ink-200 bg-ink-50 text-xs font-semibold text-ink-700 dark:border-ink-800 dark:bg-ink-900 dark:text-ink-200"
-        >
-          {initials || "·"}
-        </span>
-      )}
-    </div>
-    <div class="min-w-0">
-      <h3 class="m-0 text-[0.9375rem] font-semibold tracking-tight text-ink-900 dark:text-ink-100">
-        <a href={detailHref} class="text-inherit no-underline hover:underline">
-          {name}
-        </a>
-      </h3>
-      {ownerRepo && (
-        <p class="m-0 mt-0.5 text-2xs text-ink-500 dark:text-ink-400">
-          @{ownerRepo.owner}/{ownerRepo.repo}
-        </p>
+        <span class="flex h-11 w-11 items-center justify-center rounded-md border border-ink-200 bg-ink-50 text-sm font-semibold text-ink-700 dark:border-ink-800 dark:bg-ink-900/60 dark:text-ink-300">{initials}</span>
       )}
+    </a>
+    <div class="min-w-0 flex-1">
+      <div class="flex flex-wrap items-baseline gap-x-2 gap-y-0.5">
+        <h3 class="m-0 text-[1.0625rem] font-semibold tracking-tight text-ink-900 dark:text-ink-100">
+          <a href={detailHref} class="relative z-10 hover:underline">{name}</a>
+        </h3>
+        {curated && <span class="text-[10px] font-medium uppercase tracking-wider text-emerald-700 dark:text-emerald-400">✓ curated</span>}
+      </div>
+      <div class="flex flex-wrap items-center gap-x-1.5 text-2xs text-ink-500 dark:text-ink-400">
+        {repoHref && owner && <a href={repoHref} target="_blank" rel="noopener noreferrer" class="relative z-10 font-mono hover:text-ink-900 dark:hover:text-ink-100">@{owner}{repo ? `/${repo}` : ""}</a>}
+        {owner && <span class="text-ink-300 dark:text-ink-700">·</span>}
+        <span>{item.category}</span>
+        {status && <><span class="text-ink-300 dark:text-ink-700">·</span><span>{statusDisplay(status)}</span></>}
+      </div>
     </div>
-  </div>
+  </header>
 
-  <div class="min-w-0">
-    {description && (
-      <p class="m-0 line-clamp-2 text-[0.8125rem] leading-snug text-ink-500 dark:text-ink-400">
-        {description}
-      </p>
-    )}
-    {showChips && allTags.length > 0 && (
-      <ul class="mt-1.5 flex list-none flex-wrap gap-1.5 p-0">
-        {allTags.map((t) => <li class="grove-badge">{t}</li>)}
-      </ul>
-    )}
-  </div>
+  <p class="m-0 line-clamp-2 text-[0.8125rem] leading-relaxed text-ink-600 dark:text-ink-300">{item.description}</p>
 
-  <dl
-    class="grid grid-cols-3 gap-x-4 gap-y-1 text-2xs text-ink-500 dark:text-ink-400 sm:flex sm:flex-col sm:items-end sm:gap-y-0.5"
-    aria-label="Project signals"
-  >
-    {starsLabel && (
-      <div class="flex items-center gap-1">
-        <dt class="sr-only">Stars</dt>
-        <dd class="m-0 font-mono text-ink-700 dark:text-ink-200">{starsLabel} ★</dd>
-      </div>
-    )}
-    {licenseSpdx && (
-      <div class="flex items-center gap-1">
-        <dt class="sr-only">License</dt>
-        <dd class="m-0">{licenseSpdx}</dd>
-      </div>
-    )}
-    {updatedLabel && updatedLabel !== "—" && (
-      <div class="flex items-center gap-1">
-        <dt class="sr-only">Last updated</dt>
-        <dd class="m-0">Updated {updatedLabel}</dd>
-      </div>
-    )}
-    {healthLabel && (
-      <div class="flex items-center gap-1">
-        <dt class="sr-only">Health</dt>
-        <dd class="m-0">{healthLabel}</dd>
-      </div>
-    )}
+  <dl class="grid grid-cols-3 gap-x-3 text-2xs">
+    <div class="flex items-baseline gap-1.5"><dt class="font-medium uppercase tracking-wider text-ink-500">Stars</dt><dd class="font-mono text-ink-700 dark:text-ink-300">{formatStars(stars) ?? "—"}</dd></div>
+    <div class="flex items-baseline gap-1.5"><dt class="font-medium uppercase tracking-wider text-ink-500">Updated</dt><dd class="font-mono text-ink-700 dark:text-ink-300">{formatRelative(updatedAt)}</dd></div>
+    <div class="flex items-baseline gap-1.5"><dt class="font-medium uppercase tracking-wider text-ink-500">License</dt><dd class="font-mono text-ink-700 dark:text-ink-300">{license ?? "—"}</dd></div>
   </dl>
 
-  <div class="col-span-full flex flex-wrap items-center gap-2 sm:col-span-1 sm:justify-end">
-    <a
-      href={detailHref}
-      class="grove-btn grove-btn-outline"
-      data-event="row_details_click"
-      data-event-source="apps_index_row"
-      data-event-app={record.slug}
-    >
-      View details
-    </a>
-    {githubUrl && (
-      <a
-        href={githubUrl}
-        target="_blank"
-        rel="noopener noreferrer"
-        class="grove-btn grove-btn-ghost"
-        data-event="row_repo_click"
-        data-event-source="apps_index_row"
-        data-event-app={record.slug}
-      >
-        GitHub
-      </a>
-    )}
-  </div>
-</article>
+  {showChips && (platforms.length > 0 || stacks.length > 0) && (
+    <div class="flex flex-col gap-1.5">
+      <div class="flex flex-wrap gap-1.5">{platforms.slice(0, 4).map((platform) => <span class="inline-flex items-center gap-1 rounded-md border border-ink-200 bg-white px-1.5 py-0.5 text-2xs font-medium text-ink-700 dark:border-ink-800 dark:bg-ink-950 dark:text-ink-300"><Icon name={platform} category="platform" size={11} />{platform}</span>)}</div>
+      <div class="flex flex-wrap gap-1.5">{stacks.slice(0, 4).map((stack) => <span class="inline-flex items-center gap-1 rounded-md border border-ink-200 bg-ink-50 px-1.5 py-0.5 text-2xs font-medium text-ink-700 dark:border-ink-800 dark:bg-ink-900/60 dark:text-ink-300"><Icon name={stack} category="stack" size={11} />{stack}</span>)}</div>
+    </div>
+  )}
 
-<style>
-  .line-clamp-2 {
-    display: -webkit-box;
-    -webkit-line-clamp: 2;
-    -webkit-box-orient: vertical;
-    overflow: hidden;
-  }
-</style>
+  <footer class="relative z-10 mt-1 flex items-center gap-2 border-t border-ink-100 pt-2 text-2xs dark:border-ink-900">
+    <a href={detailHref} class="inline-flex items-center gap-1 rounded-md border border-ink-200 bg-white px-2 py-1 font-medium text-ink-700 hover:bg-ink-50 dark:border-ink-800 dark:bg-ink-950 dark:text-ink-300">View details →</a>
+    {repoHref && <a href={repoHref} target="_blank" rel="noopener noreferrer" class="inline-flex items-center gap-1 rounded-md border border-ink-200 bg-white px-2 py-1 font-medium text-ink-700 hover:bg-ink-50 dark:border-ink-800 dark:bg-ink-950 dark:text-ink-300">GitHub</a>}
+  </footer>
+</article>

package/src/components/AppsPagination.astro

@@ -1,126 +1,63 @@
 ---
-/**
- * AppsPagination — windowed page list.
- *
- * Renders a row of page links with first / prev / numeric / next /
- * last. The numeric window is a 5-page sliding window centered on
- * the current page (clamped at the ends). Pages with no links
- * (gaps) are rendered as "…" to preserve visual rhythm.
- *
- * Generic: takes a `current` and `total` page count and an
- * `hrefFor` builder. The href builder is the only consumer-side
- * knowledge; no siteConfig import.
- */
-
 interface Props {
   current: number;
   total: number;
   hrefFor: (page: number) => string;
   class?: string;
-  /** Window size for the numeric page list. Default 5. */
-  windowSize?: number;
 }
 
-const {
-  current,
-  total,
-  hrefFor,
-  class: className = "",
-  windowSize = 5,
-} = Astro.props;
-
-// Clamp current into [1, total].
-const safeCurrent = Math.max(1, Math.min(total, current));
-const half = Math.floor(windowSize / 2);
-
-// Compute the numeric window. Clamp so it never extends past 1 or
-// total, and never narrower than `windowSize` unless total is
-// smaller.
-function buildWindow(): (number | "…")[] {
-  if (total <= windowSize + 2) {
-    return Array.from({ length: total }, (_, i) => i + 1);
+const { current, total, hrefFor, class: className = "" } = Astro.props;
+
+function pageList(active: number, count: number): Array<number | "ellipsis"> {
+  if (count <= 7) return Array.from({ length: count }, (_, index) => index + 1);
+  const pages = new Set([1, count, active - 1, active, active + 1]);
+  const sorted = [...pages].filter((page) => page >= 1 && page <= count).sort((a, b) => a - b);
+  const result: Array<number | "ellipsis"> = [];
+  for (const page of sorted) {
+    const previous = result.at(-1);
+    if (typeof previous === "number" && page - previous > 1) result.push("ellipsis");
+    result.push(page);
   }
-  let start = Math.max(2, safeCurrent - half);
-  let end = Math.min(total - 1, safeCurrent + half);
-  // Expand the window toward the nearest edge if it shrinks.
-  if (end - start + 1 < windowSize) {
-    if (safeCurrent <= half + 1) {
-      end = Math.min(total - 1, end + (windowSize - (end - start + 1)));
-    } else {
-      start = Math.max(2, start - (windowSize - (end - start + 1)));
-    }
-  }
-  const items: (number | "…")[] = [1];
-  if (start > 2) items.push("…");
-  for (let i = start; i <= end; i++) items.push(i);
-  if (end < total - 1) items.push("…");
-  items.push(total);
-  return items;
+  return result;
 }
 
-const pages = buildWindow();
-const hasPrev = safeCurrent > 1;
-const hasNext = safeCurrent < total;
+const pages = pageList(current, total);
+const linkClass =
+  "grove-btn grove-btn-outline min-w-9 px-2 py-1.5 text-2xs";
 ---
 
-<nav
-  class:list={[
-    "grove-pagination flex flex-wrap items-center gap-1",
-    className,
-  ]}
-  aria-label="Pagination"
->
-  {hasPrev && (
-    <a
-      href={hrefFor(safeCurrent - 1)}
-      rel="prev"
-      class="grove-btn grove-btn-ghost"
-      data-event="pagination_click"
-      data-event-source="apps_pagination"
-    >
-      ← Prev
-    </a>
-  )}
+{total > 1 && (
+  <nav
+    class:list={["flex flex-wrap items-center justify-center gap-1.5", className]}
+    aria-label="Pagination"
+  >
+    {current > 1 ? (
+      <a href={hrefFor(current - 1)} class={linkClass} rel="prev">Previous</a>
+    ) : (
+      <span class={`${linkClass} pointer-events-none opacity-40`}>Previous</span>
+    )}
 
-  <ol class="m-0 flex list-none items-center gap-1 p-0">
-    {pages.map((p) =>
-      p === "…" ? (
-        <li aria-hidden="true" class="px-2 text-2xs text-ink-400">
-          …
-        </li>
+    {pages.map((page) =>
+      page === "ellipsis" ? (
+        <span class="px-1 text-2xs text-ink-400" aria-hidden="true">...</span>
       ) : (
-        <li>
-          {p === safeCurrent ? (
-            <span
-              aria-current="page"
-              class="grove-btn grove-btn-primary pointer-events-none"
-            >
-              {p}
-            </span>
-          ) : (
-            <a
-              href={hrefFor(p)}
-              class="grove-btn grove-btn-ghost"
-              data-event="pagination_click"
-              data-event-source="apps_pagination"
-            >
-              {p}
-            </a>
-          )}
-        </li>
+        <a
+          href={hrefFor(page)}
+          class:list={[
+            linkClass,
+            page === current && "grove-btn-primary",
+          ]}
+          aria-current={page === current ? "page" : undefined}
+        >
+          {page}
+        </a>
       ),
     )}
-  </ol>
 
-  {hasNext && (
-    <a
-      href={hrefFor(safeCurrent + 1)}
-      rel="next"
-      class="grove-btn grove-btn-ghost"
-      data-event="pagination_click"
-      data-event-source="apps_pagination"
-    >
-      Next →
-    </a>
-  )}
-</nav>
+    {current < total ? (
+      <a href={hrefFor(current + 1)} class={linkClass} rel="next">Next</a>
+    ) : (
+      <span class={`${linkClass} pointer-events-none opacity-40`}>Next</span>
+    )}
+  </nav>
+)}

package/src/components/CategoryGrid.astro

@@ -22,6 +22,7 @@ interface Props {
   class?: string;
   /** Hide the section header. */
   bare?: boolean;
+  itemLabelPlural?: string;
 }
 
 const {
@@ -29,6 +30,7 @@ const {
   pathPrefix = "/",
   class: className = "",
   bare = false,
+  itemLabelPlural = "items",
 } = Astro.props;
 
 function buildHref(slug: string): string {
@@ -38,50 +40,60 @@ function buildHref(slug: string): string {
 ---
 
 <section
-  class:list={["grove-section", className]}
+  id="categories"
+  class:list={["grove-section scroll-mt-20 border-b border-ink-200 dark:border-ink-800", className]}
   aria-labelledby={bare ? undefined : "grove-categorygrid-heading"}
 >
-  <div class="grove-container-wide mx-auto px-5 sm:px-7">
+  <div class="grove-container mx-auto px-5 sm:px-7">
     {!bare && (
-      <header class="mb-6 flex flex-col gap-2">
+      <header class="mb-6">
+        <span class="text-2xs font-medium uppercase tracking-wider text-ink-500 dark:text-ink-400">
+          Categories
+        </span>
         <h2
           id="grove-categorygrid-heading"
-          class="m-0 text-[1.5rem] sm:text-[1.625rem] font-semibold tracking-tight text-ink-900 dark:text-ink-100"
+          class="m-0 mt-1 text-[1.5rem] sm:text-[1.625rem] font-semibold tracking-tight text-ink-900 dark:text-ink-100"
         >
           Browse by category
         </h2>
         <p class="m-0 max-w-[60ch] text-[0.9375rem] text-ink-500 dark:text-ink-400">
-          What kind of project are you looking for? Browse by category to find
-          reference apps, libraries, demos, and more.
+          Find {itemLabelPlural} by what they do, not by which stack they use.
         </p>
       </header>
     )}
 
-    <div class="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3">
-      {categories.map((c) => (
-        <a
-          href={buildHref(c.slug)}
-          class="grove-card grove-card-hover group flex flex-col gap-1.5 p-4 no-underline"
-          data-event="category_grid_click"
-          data-event-source="category_grid"
-        >
-          <div class="flex items-baseline justify-between gap-2">
-            <h3 class="m-0 text-[0.9375rem] font-semibold tracking-tight text-ink-900 group-hover:underline dark:text-ink-100">
-              {c.name}
-            </h3>
-            {typeof c.count === "number" && (
-              <span class="font-mono text-2xs text-ink-500 dark:text-ink-400">
-                {c.count}
-              </span>
-            )}
-          </div>
-          {c.blurb && (
-            <p class="m-0 line-clamp-2 text-[0.8125rem] leading-snug text-ink-500 dark:text-ink-400">
-              {c.blurb}
-            </p>
-          )}
-        </a>
-      ))}
+    <div class="overflow-hidden rounded-lg border border-ink-200 dark:border-ink-800">
+      <ul class="m-0 grid list-none grid-cols-1 divide-y divide-ink-200 p-0 sm:grid-cols-2 sm:divide-x sm:divide-y-0 lg:grid-cols-3 dark:divide-ink-800">
+        {categories.map((c) => (
+          <li class="divide-x divide-ink-200 dark:divide-ink-800">
+            <a
+              href={buildHref(c.slug)}
+              class="group flex h-full items-start gap-3 p-4 no-underline transition-colors hover:bg-ink-50/60 dark:hover:bg-ink-900/40"
+            >
+              <div class="flex min-w-0 flex-1 flex-col gap-0.5">
+                <div class="flex items-center gap-2">
+                  <h3 class="m-0 text-[0.9375rem] font-semibold tracking-tight text-ink-900 group-hover:underline dark:text-ink-100">
+                    {c.name}
+                  </h3>
+                  {typeof c.count === "number" && (
+                    <span class="inline-flex items-center rounded-md border border-ink-200 bg-ink-50 px-1.5 py-0.5 font-mono text-[10px] font-medium text-ink-600 dark:border-ink-800 dark:bg-ink-900/60 dark:text-ink-400">
+                      {c.count} {itemLabelPlural}
+                    </span>
+                  )}
+                </div>
+                {c.blurb && (
+                  <p class="m-0 text-2xs leading-relaxed text-ink-500 dark:text-ink-400">
+                    {c.blurb}
+                  </p>
+                )}
+              </div>
+              <svg viewBox="0 0 16 16" width="12" height="12" aria-hidden="true" class="mt-1 shrink-0 text-ink-300 transition-colors group-hover:text-ink-500 dark:text-ink-700 dark:group-hover:text-ink-400" fill="currentColor">
+                <path d="M6.22 3.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06-1.06L9.94 8 6.22 4.28a.75.75 0 0 1 0-1.06Z" />
+              </svg>
+            </a>
+          </li>
+        ))}
+      </ul>
     </div>
   </div>
 </section>

package/src/components/ContributorsGrid.astro

@@ -52,14 +52,14 @@ function fmt(n: number | undefined): string | null {
 
 const visible = contributors
   .filter((c) => c.username)
-  .slice(0, 24);
+  .slice(0, 100);
 ---
 
 <section
   class:list={["grove-section", className]}
   aria-labelledby="grove-contributors-heading"
 >
-  <div class="grove-container-wide mx-auto px-5 sm:px-7">
+  <div class="grove-container mx-auto px-5 sm:px-7">
     <header class="mb-6 flex flex-wrap items-end justify-between gap-3">
       <div>
         <h2
@@ -95,7 +95,7 @@ const visible = contributors
       </p>
     ) : (
       <ul
-        class="m-0 grid list-none grid-cols-3 gap-3 p-0 sm:grid-cols-4 md:grid-cols-6 lg:grid-cols-8"
+        class="m-0 grid list-none grid-cols-[repeat(auto-fill,minmax(72px,1fr))] gap-x-3 gap-y-5 p-0"
         aria-label="Contributors"
       >
         {visible.map((c) => {

package/src/components/CurationGrid.astro

@@ -0,0 +1,41 @@
+---
+interface Props {
+  bestFor?: string[];
+  whyListed?: string[];
+  caveats?: string[];
+  class?: string;
+}
+
+const {
+  bestFor = [],
+  whyListed = [],
+  caveats = [],
+  class: className = "",
+} = Astro.props;
+
+const columns = [
+  { title: "Best for", items: bestFor },
+  { title: "Why listed", items: whyListed },
+  { title: "Caveats", items: caveats },
+].filter((column) => column.items.length > 0);
+---
+
+{columns.length > 0 && (
+  <section
+    class:list={["grid grid-cols-1 gap-4 md:grid-cols-3", className]}
+    aria-label="Curation notes"
+  >
+    {columns.map((column) => (
+      <div class="grove-card p-5">
+        <h3 class="m-0 text-sm font-semibold uppercase tracking-wider text-ink-500 dark:text-ink-400">
+          {column.title}
+        </h3>
+        <ul class="mt-3 m-0 flex list-none flex-col gap-1.5 p-0">
+          {column.items.map((item) => (
+            <li class="text-sm text-ink-700 dark:text-ink-200">- {item}</li>
+          ))}
+        </ul>
+      </div>
+    ))}
+  </section>
+)}