@grove-dev/astro 0.4.0 → 0.4.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@grove-dev/astro",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "type": "module",
   "description": "Composable Astro UI, data adapters, and integration for Grove directories.",
   "license": "MIT",
@@ -55,7 +55,7 @@
     "marked": "^18.0.0",
     "sanitize-html": "^2.17.5",
     "yaml": "^2.9.0",
-    "@grove-dev/core": "0.4.0"
+    "@grove-dev/core": "0.4.1"
   },
   "peerDependencies": {
     "astro": "^6.0.0 || ^7.0.0"

package/src/components/CollectionIndex.astro

@@ -5,50 +5,85 @@
  * detail page and shows the entry count.
  *
  * Consumes a `CollectionIndexModel` produced by
- * `getCollectionIndexModel`. Generic: no blueprint-specific copy.
+ * `getCollectionIndexModel`. Pass `limit` (e.g. 3) for a teaser-style
+ * subset; the framework also re-exports this component as
+ * `CollectionTeaser` for the homepage use case.
+ *
+ * API parity with `RecordSection`:
+ *  - `id`, `eyebrow`, `title`, `description`
+ *  - `viewAllHref`, `viewAllLabel` — header CTA
+ *  - `emptyLabel` — copy when there are no collections
+ *  - `<slot name="header-actions">` — custom buttons in header
+ *  - `class` — extra class on the outer <section>
  */
 import Container from "../layouts/Container.astro";
+import SectionHeader from "../layouts/SectionHeader.astro";
 import type { CollectionIndexModel } from "../server/collections.js";
 
 interface Props {
   model: CollectionIndexModel;
+  id?: string;
+  eyebrow?: string;
   title?: string;
   description?: string;
+  /** Header "View all" link. Hides when not provided. */
+  viewAllHref?: string;
+  viewAllLabel?: string;
+  emptyLabel?: string;
+  /** Cap the number of cards rendered. Omit for "all". */
+  limit?: number;
   class?: string;
 }
 
 const {
   model,
+  id,
+  eyebrow = "Collections",
   title = "Collections",
   description = "Curated and generated directories of related items.",
+  viewAllHref,
+  viewAllLabel = "View all",
+  emptyLabel = "No collections yet.",
+  limit,
   class: className = "",
 } = Astro.props;
+
+const cards = typeof limit === "number" ? model.collections.slice(0, limit) : model.collections;
+const headerActions = Astro.slots.has("header-actions");
 ---
 
-<section class={`py-12 sm:py-16 ${className}`}>
+<section id={id} class={`py-12 sm:py-16 ${className}`}>
   <Container>
-    <header class="mb-6">
-      <span class="text-2xs font-medium uppercase tracking-wider text-ink-500 dark:text-ink-400">
-        Browse
-      </span>
-      <h1 class="m-0 mt-1 text-[1.875rem] sm:text-[2.125rem] font-semibold tracking-tight text-ink-900 dark:text-ink-100">
-        {title}
-      </h1>
-      <p class="m-0 mt-2 max-w-[64ch] text-[0.9375rem] text-ink-500 dark:text-ink-400">
-        {description}
-      </p>
-    </header>
+    <div class="mb-6 flex flex-wrap items-end justify-between gap-3">
+      <SectionHeader eyebrow={eyebrow} title={title} description={description} />
+      {(viewAllHref || headerActions) && (
+        <div class="flex shrink-0 items-center gap-2 pb-2">
+          {viewAllHref && (
+            <a
+              href={viewAllHref}
+              class="text-2xs font-medium text-ink-500 transition-colors hover:text-ink-900 sm:inline dark:text-ink-400 dark:hover:text-ink-100"
+            >
+              {viewAllLabel} →
+            </a>
+          )}
+          <slot name="header-actions" />
+        </div>
+      )}
+    </div>
 
-    {model.collections.length === 0 ? (
+    {cards.length === 0 ? (
       <p class="rounded-md border border-dashed border-ink-200 bg-white p-6 text-sm text-ink-500 dark:border-ink-800 dark:bg-ink-950 dark:text-ink-400">
-        No collections yet.
+        {emptyLabel}
       </p>
     ) : (
       <ul class="m-0 grid list-none grid-cols-1 gap-3 p-0 sm:grid-cols-2 lg:grid-cols-3">
-        {model.collections.map((c) => (
+        {cards.map((c) => (
           <li class="m-0 p-0">
             <a
               href={c.url}
+              data-event="collection_card_click"
+              data-event-source="collection_index"
+              data-event-item={c.slug}
               class="flex h-full flex-col gap-2 rounded-md border border-ink-200 bg-white p-5 transition-colors hover:border-ink-400 dark:border-ink-800 dark:bg-ink-950 dark:hover:border-ink-600"
             >
               <span class="text-2xs font-medium uppercase tracking-wider text-ink-500 dark:text-ink-400">

package/src/components/CollectionPage.astro

@@ -3,58 +3,71 @@
  * CollectionPage — renders a single curated/generated collection.
  *
  * Consumes a `CollectionPageModel` produced by `getCollectionPageModel`.
- * Renders the header (title, description, editorial notes), the
- * matched entries via `CollectionRow`, and a related-collections
+ * Renders the header via `SectionHeader` (framework consistency),
+ * the matched entries via `CollectionRow`, and a related-collections
  * section.
  *
- * Generic: no blueprint-specific copy. The `eyebrow` prop lets the
- * consumer pick a label (e.g. "Curated" or "Generated").
+ * Generic: no blueprint-specific copy. Consumers can override
+ * `eyebrow`, `title`, `description`; the `<slot name="intro">` is
+ * the natural place for editorial intros (markdown rendered with
+ * the consumer's content pipeline). `emptyLabel` matches
+ * `RecordSection`'s API for empty-state copy.
  */
 import CollectionRow from "./CollectionRow.astro";
 import Container from "../layouts/Container.astro";
+import SectionHeader from "../layouts/SectionHeader.astro";
 import type { CollectionPageModel } from "../server/collections.js";
 
 interface Props {
   model: CollectionPageModel;
+  /** Override the eyebrow text (default: derived from collection kind). */
   eyebrow?: string;
+  /** Override the title (default: collection.title). */
+  title?: string;
+  /** Override the description (default: collection.description). */
+  description?: string;
+  /** Default copy when the collection has no matching entries. */
+  emptyLabel?: string;
+  /** Section id (deep link + stable key). */
+  id?: string;
   class?: string;
 }
 
 const {
   model,
-  eyebrow = "Collection",
+  eyebrow,
+  title,
+  description,
+  emptyLabel = "This collection is currently empty.",
+  id,
   class: className = "",
 } = Astro.props;
+
+const finalTitle = title ?? model.collection.title;
+const finalDescription = description ?? model.collection.description;
+const finalEyebrow = eyebrow ?? (model.collection.kind === "curated" ? "Curated collection" : "Generated collection");
 ---
 
-<section class={`py-12 sm:py-16 ${className}`}>
+<section id={id} class={`py-12 sm:py-16 ${className}`}>
   <Container>
-    <header class="mb-6">
-      <span class="text-2xs font-medium uppercase tracking-wider text-ink-500 dark:text-ink-400">
-        {eyebrow}
-      </span>
-      <h1 class="m-0 mt-1 text-[1.875rem] sm:text-[2.125rem] font-semibold tracking-tight text-ink-900 dark:text-ink-100">
-        {model.collection.title}
-      </h1>
-      <p class="m-0 mt-2 max-w-[64ch] text-[0.9375rem] text-ink-500 dark:text-ink-400">
-        {model.collection.description}
+    <SectionHeader eyebrow={finalEyebrow} title={finalTitle} description={finalDescription} />
+
+    {model.collection.selectionNote && (
+      <p class="m-0 mb-6 max-w-[64ch] text-[0.875rem] font-medium text-ink-700 dark:text-ink-300">
+        <span class="text-2xs font-medium uppercase tracking-wider text-ink-500 dark:text-ink-400">Selection criteria · </span>
+        {model.collection.selectionNote}
       </p>
-      {model.collection.introduction && (
-        <p class="m-0 mt-3 max-w-[64ch] text-[0.9375rem] text-ink-700 dark:text-ink-300">
-          {model.collection.introduction}
-        </p>
-      )}
-      {model.collection.selectionNote && (
-        <p class="m-0 mt-3 max-w-[64ch] text-[0.875rem] font-medium text-ink-700 dark:text-ink-300">
-          <span class="text-2xs font-medium uppercase tracking-wider text-ink-500 dark:text-ink-400">Selection criteria · </span>
-          {model.collection.selectionNote}
-        </p>
-      )}
-    </header>
+    )}
+
+    <slot name="intro" />
+
+    <p class="m-0 mb-4 text-2xs font-medium uppercase tracking-wider text-ink-500 dark:text-ink-400">
+      {model.total} {model.total === 1 ? "item" : "items"}
+    </p>
 
     {model.isEmpty ? (
       <p class="rounded-md border border-dashed border-ink-200 bg-white p-6 text-sm text-ink-500 dark:border-ink-800 dark:bg-ink-950 dark:text-ink-400">
-        This collection is currently empty.
+        {emptyLabel}
       </p>
     ) : (
       <ul class="m-0 flex list-none flex-col gap-3 p-0">
@@ -68,17 +81,20 @@ const {
 
     {model.related.length > 0 && (
       <section class="mt-12 border-t border-ink-200 pt-8 dark:border-ink-800">
-        <h2 class="m-0 text-[1.125rem] font-semibold tracking-tight text-ink-900 dark:text-ink-100">
-          Related collections
-        </h2>
-        <ul class="m-0 mt-3 flex list-none flex-col gap-2 p-0">
+        <SectionHeader
+          eyebrow="Related"
+          title="Related collections"
+          description="Other curated groupings of related items."
+          level={3}
+        />
+        <ul class="m-0 grid list-none grid-cols-1 gap-2 p-0 sm:grid-cols-2 lg:grid-cols-4">
           {model.related.map((r) => (
-            <li>
+            <li class="m-0 p-0">
               <a
                 href={r.url}
-                class="text-sm text-ink-700 transition-colors hover:text-ink-900 dark:text-ink-300 dark:hover:text-ink-100"
+                class="group flex h-full flex-col gap-1 rounded-md border border-ink-200 bg-white px-3 py-2.5 no-underline transition-colors hover:border-ink-400 dark:border-ink-800 dark:bg-ink-950 dark:hover:border-ink-600"
               >
-                {r.title} →
+                <span class="text-sm font-medium text-ink-900 group-hover:underline dark:text-ink-100">{r.title}</span>
               </a>
             </li>
           ))}

package/src/components/CollectionRow.astro

@@ -1,109 +1,246 @@
 ---
 /**
- * CollectionRow — a single entry inside a curated/generated collection.
+ * CollectionRow — card-shaped row for a single entry inside a
+ * curated/generated collection.
  *
- * Mirrors `IndexRow`'s visual rhythm (avatar, header, description, dl
- * stats, footer links) but consumes the lighter `CollectionEntry`
- * shape directly. The existing `IndexRow` is tightly coupled to
- * `IndexRecord` (which carries `kind`, `repoUrl`, `github`, `bestFor`,
- * etc.) — collections only have a subset of those fields, so a
- * dedicated row keeps the contract clean.
+ * Mirrors `ItemCard`'s visual treatment so a collection page sitting
+ * next to the directory index reads as the same site. The component
+ * consumes the lightweight `CollectionEntry` shape directly — the
+ * existing `IndexRow` is too tightly coupled to `IndexRecord`
+ * (which carries `kind`, `repoUrl`, `github`, `bestFor` etc.) to
+ * accept a `CollectionEntry` cleanly.
  *
- * Generic: no blueprint-specific copy. Visual style mirrors IndexRow
- * so a collection page sitting next to the directory index reads as
- * the same site.
+ * API parity with `ItemCard`:
+ *  - `entry` — the collection entry (slug, title, description, …)
+ *  - `href` — full detail URL; wins over `routeSlug`
+ *  - `routeSlug` — blueprint slug (e.g. "projects"); details derived
+ *    as `/${routeSlug}/${slug}` when `href` is not provided
+ *  - `showChips` — render platform + stack chip row (default true)
+ *  - `showMeta` — render stars/updated/license metadata row (default true)
+ *  - `showLabel` — render the curated/category label (default true)
+ *  - `class` — extra class on the outer <article>
+ *  - `eager` — bypass lazy loading for above-the-fold avatars (first 1-2)
+ *
+ * Footer links:
+ *  - "View repo" — when `entry.repoHref` is set
+ *  - "Visit site" — when `entry.homepageHref` is set
+ *  - "Details →" — always rendered (links to the consumer's detail page)
+ *
+ * Analytics: emits `data-event="collection_item_click"` and
+ * `data-event-source="collection_row"` so sites wire one handler
+ * in BaseLayout.
  */
 import type { CollectionEntry } from "@grove-dev/core";
-import { formatStars, formatRelative } from "@grove-dev/astro";
+import { formatRelative, formatStars, statusDisplay, getOwnerAndRepoFromRepoUrl, getOwnerAvatarUrl } from "@grove-dev/astro";
+import StackPlatformChips from "./StackPlatformChips.astro";
 
 interface Props {
   entry: CollectionEntry;
+  /** Full detail-page URL. Wins over `routeSlug`. */
+  href?: string;
+  /** Blueprint route slug; detail URL = `/${routeSlug}/${slug}`. */
+  routeSlug?: string;
+  showChips?: boolean;
+  showMeta?: boolean;
+  showLabel?: boolean;
   eager?: boolean;
   class?: string;
 }
 
-const { entry, eager = false, class: className = "" } = Astro.props;
+const {
+  entry,
+  href: hrefProp,
+  routeSlug,
+  showChips = true,
+  showMeta = true,
+  showLabel = true,
+  eager = false,
+  class: className = "",
+} = Astro.props;
 
-const initials = entry.title
+const slug = entry.slug;
+const base = (routeSlug ?? "").replace(/^\/+|\/+$/g, "");
+const detailHref =
+  typeof hrefProp === "string" && hrefProp.length > 0
+    ? hrefProp
+    : entry.url || (base ? `/${base}/${slug}` : `/${slug}`);
+
+const title = entry.title;
+const initials = title
   .split(/\s+/)
-  .map((word) => word[0])
+  .map((w) => w[0])
   .filter(Boolean)
   .slice(0, 2)
   .join("")
   .toUpperCase();
-const stack = entry.stack ?? "—";
-const stars = entry.stars ?? null;
-const pushedAt = entry.pushedAt ?? null;
+
+// Derive a logo URL from the entry's `repoHref` when present;
+// otherwise fall back to the detail URL. Detail URL is the
+// consumer's page, not necessarily a GitHub owner — so the
+// initials placeholder is the safe default when nothing matches.
+const repoHref = entry.repoHref;
+const { owner } = getOwnerAndRepoFromRepoUrl(repoHref ?? "");
+const avatar = owner ? getOwnerAvatarUrl(owner, 80) : undefined;
+
+const stack = entry.stack ? [entry.stack] : [];
+const platform = entry.platform?.slice(0, 4) ?? [];
+const platformOverflow = (entry.platform?.length ?? 0) - platform.length;
+
+const stars = entry.stars;
+const starsLabel = formatStars(stars);
+const updatedAt = entry.pushedAt;
+const updatedLabel = formatRelative(updatedAt);
+const license = entry.license ?? null;
+const status = entry.status;
+const statusText = status ? statusDisplay(status as Parameters<typeof statusDisplay>[0]) : "";
 const category = entry.categories?.[0];
+const curated = Boolean(entry.curationScore || (entry.activityScore && entry.activityScore > 0.5));
+
+const homepageHref = entry.homepageHref;
+const showViewRepo = typeof repoHref === "string" && repoHref.length > 0;
+const showVisitSite = typeof homepageHref === "string" && homepageHref.length > 0;
 ---
 
 <article
-  class={`rounded-[calc(var(--radius)+0.25rem)] border border-ink-200 bg-white shadow-none transition-colors hover:bg-secondary dark:border-ink-800 dark:bg-ink-950 dark:hover:bg-ink-900 group relative flex flex-col gap-3 p-4 ${className}`}
+  data-event="collection_item_click"
+  data-event-source="collection_row"
+  data-event-item={slug}
+  class={`rounded-[calc(var(--radius)+0.25rem)] border-0 bg-muted shadow-none transition-colors hover:bg-secondary group relative flex h-full flex-col gap-3 p-4 ${className}`}
 >
   <header class="flex items-start gap-3">
-    <a
-      href={entry.url}
-      class="relative z-10 flex shrink-0"
-      aria-label={`Open ${entry.title} details`}
-    >
-      <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 || "·"}
+    {avatar ? (
+      <img
+        src={avatar}
+        alt={`${title} avatar`}
+        width="40"
+        height="40"
+        loading={eager ? "eager" : "lazy"}
+        fetchpriority={eager ? "high" : undefined}
+        decoding="async"
+        class="h-10 w-10 shrink-0 rounded-md border border-ink-200 bg-white object-cover dark:border-ink-800 dark:bg-ink-900"
+      />
+    ) : (
+      <span
+        aria-hidden="true"
+        class="flex h-10 w-10 shrink-0 items-center justify-center rounded-md border border-ink-200 bg-ink-50 text-2xs 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={entry.url} class="relative z-10 hover:underline">{entry.title}</a>
-        </h3>
-        {category && (
-          <span class="text-2xs font-medium uppercase tracking-wider text-ink-500 dark:text-ink-400">
-            {category}
-          </span>
-        )}
-      </div>
-      <div class="flex flex-wrap items-center gap-x-1.5 text-2xs text-ink-500 dark:text-ink-400">
-        <span class="font-mono">{stack}</span>
-        {entry.platform?.length ? (
-          <>
-            <span class="text-ink-300 dark:text-ink-700">·</span>
-            <span>{entry.platform.slice(0, 3).join(", ")}</span>
-          </>
-        ) : null}
-        {entry.license ? (
-          <>
-            <span class="text-ink-300 dark:text-ink-700">·</span>
-            <span>{entry.license}</span>
-          </>
-        ) : null}
-      </div>
+    )}
+    <div class="flex min-w-0 flex-1 flex-col gap-0.5">
+      <h3 class="m-0 truncate text-[0.9375rem] font-semibold tracking-tight text-ink-900 group-hover:underline dark:text-ink-100">
+        <a href={detailHref} class="inline-flex min-h-6 min-w-6 items-center text-inherit no-underline">
+          {title}
+        </a>
+      </h3>
+      {showLabel && (
+        <span class="truncate text-2xs text-ink-500 dark:text-ink-400">
+          {category}
+          {status && (
+            <>
+              <span class="mx-1 text-ink-300 dark:text-ink-700">·</span>
+              <span class="text-ink-500 dark:text-ink-400">{statusText}</span>
+            </>
+          )}
+        </span>
+      )}
     </div>
+    {curated && showLabel && (
+      <span
+        class="inline-flex shrink-0 items-center gap-1 text-[10px] font-medium uppercase tracking-wider text-emerald-700 dark:text-emerald-400"
+        title="Has curation or activity score"
+      >
+        <svg viewBox="0 0 16 16" width="10" height="10" aria-hidden="true" fill="currentColor">
+          <path d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0Zm3.41 5.09a.75.75 0 0 0-1.06 0L6.75 8.69 5.65 7.59a.75.75 0 1 0-1.06 1.06l1.65 1.65a.75.75 0 0 0 1.06 0l4.11-4.11a.75.75 0 0 0 0-1.06Z" />
+        </svg>
+        curated
+      </span>
+    )}
   </header>
 
-  <p class="m-0 line-clamp-2 text-[0.8125rem] leading-relaxed text-ink-600 dark:text-ink-300">
-    {entry.description}
-  </p>
+  {entry.description && (
+    <p class="m-0 line-clamp-2 text-[0.8125rem] leading-relaxed text-ink-500 dark:text-ink-400">
+      {entry.description}
+    </p>
+  )}
 
-  <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 dark:text-ink-400">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 dark:text-ink-400">Updated</dt>
-      <dd class="font-mono text-ink-700 dark:text-ink-300">{formatRelative(pushedAt) ?? "—"}</dd>
-    </div>
-    <div class="flex items-baseline gap-1.5">
-      <dt class="font-medium uppercase tracking-wider text-ink-500 dark:text-ink-400">License</dt>
-      <dd class="font-mono text-ink-700 dark:text-ink-300">{entry.license ?? "—"}</dd>
+  {/* Stack + platform rendered as 2 distinct labelled rows so the
+      primary/secondary hierarchy is unambiguous. Stack is the more
+      identifying signal for an item (it's the main technology) and
+      gets a filled pill; platform is secondary and gets an outlined
+      pill. Shared with `IndexRow` / `ItemCard` so the pattern is
+      identical across all card-shaped components. */}
+  <StackPlatformChips
+    show={showChips}
+    stack={stack[0]}
+    platform={platform}
+  />
+
+  {showMeta && (
+    <div class="flex flex-wrap items-center gap-x-3 gap-y-1 text-2xs text-ink-500 dark:text-ink-400">
+      {starsLabel !== null && (
+        <span class="inline-flex items-center gap-1" title={`${stars ?? 0} stars`}>
+          <svg viewBox="0 0 16 16" width="11" height="11" aria-hidden="true" fill="currentColor" class="text-amber-500">
+            <path d="M8 .25a.75.75 0 0 1 .673.418l1.882 3.815 4.21.612a.75.75 0 0 1 .416 1.279l-3.046 2.97.719 4.192a.751.751 0 0 1-1.088.791L8 12.347l-3.766 1.98a.75.75 0 0 1-1.088-.79l.72-4.194L.818 6.374a.75.75 0 0 1 .416-1.28l4.21-.611L7.327.668A.75.75 0 0 1 8 .25Z" />
+          </svg>
+          <span class="font-mono">{starsLabel}</span>
+        </span>
+      )}
+      {updatedAt && (
+        <span class="inline-flex items-center gap-1" title={`Last updated ${updatedAt}`}>
+          <svg viewBox="0 0 16 16" width="11" height="11" aria-hidden="true" fill="currentColor" class="text-ink-400">
+            <path d="M8 2a6 6 0 1 0 0 12A6 6 0 0 0 8 2Zm0 1.5a4.5 4.5 0 1 1 0 9 4.5 4.5 0 0 1 0-9Zm-.5 1.5a.5.5 0 0 0-1 0v3.25c0 .15.07.29.18.39l1.95 1.65a.5.5 0 0 0 .66-.76L7.5 7.55V5Z" />
+          </svg>
+          <span class="font-mono">Updated {updatedLabel}</span>
+        </span>
+      )}
+      {license && (
+        <span class="inline-flex items-center gap-1" title={`License: ${license}`}>
+          <span class="font-mono uppercase tracking-wide text-[10px]">{license}</span>
+        </span>
+      )}
     </div>
-  </dl>
+  )}
 
-  <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">
+  {/* Footer: source links (View repo / Visit site) + Details. */}
+  <footer class="mt-1 flex items-center justify-between gap-3 border-t border-ink-100 pt-2 text-2xs dark:border-ink-900">
+    <div class="flex min-w-0 items-center gap-3">
+      {showViewRepo && (
+        <a
+          href={repoHref}
+          target="_blank"
+          rel="noopener noreferrer"
+          data-event="external_repo_click"
+          data-event-source="collection_row_view_repo"
+          data-event-item={slug}
+          class="inline-flex items-center gap-1 font-medium text-ink-700 transition-colors hover:text-ink-900 dark:text-ink-300 dark:hover:text-ink-100"
+        >
+          View repo
+          <svg viewBox="0 0 16 16" width="10" height="10" aria-hidden="true" fill="currentColor">
+            <path d="M3.75 2A1.75 1.75 0 0 0 2 3.75v8.5C2 13.216 2.784 14 3.75 14h8.5A1.75 1.75 0 0 0 14 12.25v-3.5a.75.75 0 0 0-1.5 0v3.5a.25.25 0 0 1-.25.25h-8.5a.25.25 0 0 1-.25-.25v-8.5a.25.25 0 0 1 .25-.25h3.5a.75.75 0 0 0 0-1.5h-3.5Z" />
+            <path d="M10 0a.75.75 0 0 0-.75.75v.75h-3a.75.75 0 0 0 0 1.5h3v.75A.75.75 0 0 0 10.75 4.5h2.5A.75.75 0 0 0 14 3.75v-2.5A.75.75 0 0 0 13.25.5H10Z" />
+          </svg>
+        </a>
+      )}
+      {showVisitSite && (
+        <a
+          href={homepageHref}
+          target="_blank"
+          rel="noopener noreferrer"
+          data-event="external_link_click"
+          data-event-source="collection_row_visit_site"
+          data-event-item={slug}
+          class="inline-flex items-center gap-1 font-medium text-ink-500 transition-colors hover:text-ink-900 dark:text-ink-400 dark:hover:text-ink-100"
+        >
+          Visit site →
+        </a>
+      )}
+    </div>
     <a
-      href={entry.url}
-      class="inline-flex h-8 cursor-pointer items-center justify-center gap-1.5 rounded-[var(--radius)] border border-transparent px-3 text-sm font-medium leading-none no-underline outline-none transition-colors focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/35 border-border bg-secondary text-foreground hover:bg-accent px-2 text-2xs"
+      href={detailHref}
+      class="inline-flex shrink-0 items-center gap-1 font-medium text-ink-500 transition-colors hover:text-ink-900 dark:text-ink-400 dark:hover:text-ink-100"
     >
-      View details →
+      Details →
     </a>
   </footer>
 </article>

package/src/components/CollectionTeaser.astro

@@ -1,18 +1,23 @@
 ---
 /**
  * CollectionTeaser — homepage-friendly subset of `CollectionIndex`.
- * Renders a horizontal grid of 2-3 collection cards with a "View all"
- * link in the header. Generic: no blueprint copy.
+ *
+ * Thin wrapper that defaults `limit` to 3 and sets homepage-friendly
+ * "View all collections" link + copy. For custom card counts or
+ * different copy, use `CollectionIndex` directly with explicit
+ * `limit` and `viewAllHref` props.
  */
-import Container from "../layouts/Container.astro";
-import type { CollectionTeaserModel } from "../server/collections.js";
+import CollectionIndex from "./CollectionIndex.astro";
+import type { CollectionIndexModel } from "../server/collections.js";
 
 interface Props {
-  model: CollectionTeaserModel;
+  model: CollectionIndexModel;
   title?: string;
   description?: string;
   viewAllHref?: string;
   viewAllLabel?: string;
+  /** Cap the number of cards rendered. Default: 3. */
+  limit?: number;
   class?: string;
 }
 
@@ -22,60 +27,17 @@ const {
   description = "Hand-picked and auto-generated groupings of related items.",
   viewAllHref = "/collections/",
   viewAllLabel = "View all collections",
-  class: className = "",
+  limit = 3,
+  class: className,
 } = Astro.props;
 ---
 
-<section class={`py-12 sm:py-16 ${className}`}>
-  <Container>
-    <div class="mb-6 flex flex-wrap items-end justify-between gap-3">
-      <div>
-        <span class="text-2xs font-medium uppercase tracking-wider text-ink-500 dark:text-ink-400">
-          Collections
-        </span>
-        <h2 class="m-0 mt-1 text-[1.5rem] sm:text-[1.625rem] font-semibold tracking-tight text-ink-900 dark:text-ink-100">
-          {title}
-        </h2>
-        <p class="m-0 mt-2 max-w-[60ch] text-[0.9375rem] text-ink-500 dark:text-ink-400">
-          {description}
-        </p>
-      </div>
-      {viewAllHref && (
-        <a
-          href={viewAllHref}
-          class="hidden shrink-0 pb-2 text-2xs font-medium text-ink-500 transition-colors hover:text-ink-900 sm:inline dark:text-ink-400 dark:hover:text-ink-100"
-        >
-          {viewAllLabel} →
-        </a>
-      )}
-    </div>
-
-    {model.collections.length === 0 ? (
-      <p class="m-0 text-sm text-ink-500 dark:text-ink-400">
-        No collections yet.
-      </p>
-    ) : (
-      <div class="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3">
-        {model.collections.map((c) => (
-          <a
-            href={c.url}
-            class="flex flex-col gap-2 rounded-md border border-ink-200 bg-white p-5 transition-colors hover:border-ink-400 dark:border-ink-800 dark:bg-ink-950 dark:hover:border-ink-600"
-          >
-            <span class="text-2xs font-medium uppercase tracking-wider text-ink-500 dark:text-ink-400">
-              {c.kind === "curated" ? "Curated" : "Generated"}
-            </span>
-            <span class="text-[1.0625rem] font-semibold tracking-tight text-ink-900 dark:text-ink-100">
-              {c.title}
-            </span>
-            <span class="text-[0.875rem] text-ink-500 dark:text-ink-400">
-              {c.description}
-            </span>
-            <span class="mt-auto pt-2 text-2xs font-medium text-ink-500 dark:text-ink-400">
-              {c.count} {c.count === 1 ? "item" : "items"} →
-            </span>
-          </a>
-        ))}
-      </div>
-    )}
-  </Container>
-</section>
+<CollectionIndex
+  model={model}
+  title={title}
+  description={description}
+  viewAllHref={viewAllHref}
+  viewAllLabel={viewAllLabel}
+  limit={limit}
+  class={className}
+/>

package/src/components/IndexRow.astro

@@ -1,6 +1,6 @@
 ---
 import type { IndexRecord } from "@grove-dev/core";
-import Icon from "./Icon.astro";
+import StackPlatformChips from "./StackPlatformChips.astro";
 import { formatRelative, formatStars, getOwnerAndRepoFromRepoUrl, getOwnerAvatarUrl, projectStackIds, statusDisplay } from "@grove-dev/astro";
 
 interface Props {
@@ -75,10 +75,10 @@ const curated = Boolean(item.curation?.reviewed || (project && (project.bestFor.
   </dl>
 
   {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 min-h-5 items-center justify-center gap-1 rounded-full border border-transparent bg-secondary px-2 py-0.5 align-middle text-xs font-medium leading-none text-secondary-foreground"><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 min-h-5 items-center justify-center gap-1 rounded-full border border-transparent bg-secondary px-2 py-0.5 align-middle text-xs font-medium leading-none text-secondary-foreground !bg-muted !text-muted-foreground"><Icon name={stack} category="stack" size={11} />{stack}</span>)}</div>
-    </div>
+    <StackPlatformChips
+      stack={stacks[0]}
+      platform={platforms}
+    />
   )}
 
   <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">

package/src/components/ItemCard.astro

@@ -24,7 +24,7 @@
  * pattern is to pass `routeSlug` (or `href` directly).
  */
 import type { IndexRecord, Resource, ProjectRecord, IndexProjectRecord } from "@grove-dev/core";
-import Icon from "./Icon.astro";
+import StackPlatformChips from "./StackPlatformChips.astro";
 import { getOwnerAndRepoFromRepoUrl, getOwnerAvatarUrl, projectStackIds } from "@grove-dev/astro";
 import { formatStars, formatRelative } from "@grove-dev/astro";
 import { statusDisplay } from "@grove-dev/astro";
@@ -279,34 +279,17 @@ const category = (item as { category?: string }).category;
     </div>
   )}
 
-  {/* Platform + stack chips, pushed to the bottom. */}
+  {/* Platform + stack chips, pushed to the bottom. Shared with
+      `IndexRow` / `CollectionRow` so the labelled-row pattern is
+      consistent across all card-shaped components. */}
   {showChips && (
-    <div class="mt-auto flex flex-col gap-1.5">
-      {visiblePlatforms.length > 0 && (
-        <div class="flex flex-wrap items-center gap-1.5">
-          {visiblePlatforms.map((p) => (
-            <span class="inline-flex min-h-5 items-center justify-center gap-1 rounded-full border border-transparent bg-secondary px-2 py-0.5 align-middle text-xs font-medium leading-none text-secondary-foreground">
-              <Icon name={p} category="platform" size={11} />
-              <span>{p}</span>
-            </span>
-          ))}
-          {platformOverflow > 0 && (
-            <span class="inline-flex min-h-5 items-center justify-center gap-1 rounded-full border border-transparent bg-secondary px-2 py-0.5 align-middle text-xs font-medium leading-none text-secondary-foreground text-ink-400">+{platformOverflow}</span>
-          )}
-        </div>
-      )}
-      {visibleStacks.length > 0 && (
-        <div class="flex flex-wrap items-center gap-1.5">
-          {visibleStacks.map((s) => (
-            <span class="inline-flex min-h-5 items-center justify-center gap-1 rounded-full border border-transparent bg-secondary px-2 py-0.5 align-middle text-xs font-medium leading-none text-secondary-foreground !bg-muted !text-muted-foreground">
-              <Icon name={s} category="stack" size={11} />
-              <span>{s}</span>
-            </span>
-          ))}
-          {stackOverflow > 0 && (
-            <span class="inline-flex min-h-5 items-center justify-center gap-1 rounded-full border border-transparent bg-secondary px-2 py-0.5 align-middle text-xs font-medium leading-none text-secondary-foreground !bg-muted !text-muted-foreground text-ink-400">+{stackOverflow}</span>
-          )}
-        </div>
+    <div class="mt-auto">
+      <StackPlatformChips
+        stack={visibleStacks[0]}
+        platform={visiblePlatforms}
+      />
+      {stackOverflow > 0 && (
+        <span class="text-2xs text-ink-400 dark:text-ink-600">+{stackOverflow} more stacks</span>
       )}
     </div>
   )}

package/src/components/StackPlatformChips.astro

@@ -0,0 +1,73 @@
+---
+/**
+ * StackPlatformChips — labelled Stack + Platform chip rows.
+ *
+ * Renders up to two rows: one for stack (filled pills, primary) and
+ * one for platform (outlined pills, secondary). Each row is prefixed
+ * with a `w-14` (56px) label column so the pills always start at
+ * the same horizontal position, even when the stack/label is wider
+ * than the longest platform.
+ *
+ * Used by every card-shaped component in the framework so the
+ * primary/secondary distinction is unambiguous across surfaces
+ * (homepage grid, directory index, collection rows).
+ */
+import Icon from "./Icon.astro";
+
+interface Props {
+  /** Primary technology — filled pill, one entry per item. */
+  stack?: string;
+  /** Secondary target platforms — outlined pills, multiple per item. */
+  platform?: string[];
+  /** Cap the number of platform pills rendered. Default 4. */
+  maxPlatform?: number;
+  /** Hide the row(s) entirely. Default true. */
+  show?: boolean;
+  class?: string;
+}
+
+const {
+  stack,
+  platform = [],
+  maxPlatform = 4,
+  show = true,
+  class: className = "",
+} = Astro.props;
+
+if (!show || (!stack && platform.length === 0)) {
+  return Astro.redirect ? null : null;
+}
+
+const visiblePlatform = platform.slice(0, maxPlatform);
+const platformOverflow = platform.length - visiblePlatform.length;
+---
+
+<div class={`flex flex-col gap-1 ${className}`}>
+  {stack && (
+    <div class="flex flex-wrap items-center gap-x-1.5 gap-y-1">
+      <span class="w-14 shrink-0 text-2xs font-medium uppercase tracking-wider text-ink-500 dark:text-ink-400">
+        Stack
+      </span>
+      <span class="inline-flex min-h-5 items-center gap-1 rounded-full border border-transparent bg-secondary px-2 py-0.5 text-2xs font-medium leading-none text-secondary-foreground">
+        <Icon name={stack} category="stack" size={10} />
+        <span>{stack}</span>
+      </span>
+    </div>
+  )}
+  {platform.length > 0 && (
+    <div class="flex flex-wrap items-center gap-x-1.5 gap-y-1">
+      <span class="w-14 shrink-0 text-2xs font-medium uppercase tracking-wider text-ink-500 dark:text-ink-400">
+        Platform
+      </span>
+      {visiblePlatform.map((p) => (
+        <span class="inline-flex min-h-5 items-center gap-1 rounded-full border border-ink-200 bg-transparent px-2 py-0.5 text-2xs font-medium leading-none text-ink-500 dark:border-ink-800 dark:text-ink-400">
+          <Icon name={p} category="platform" size={10} />
+          <span>{p}</span>
+        </span>
+      ))}
+      {platformOverflow > 0 && (
+        <span class="text-2xs text-ink-400 dark:text-ink-600">+{platformOverflow}</span>
+      )}
+    </div>
+  )}
+</div>

package/src/server/collections.test.ts

@@ -78,6 +78,28 @@ describe("recordsToCollectionEntries", () => {
     const entries = recordsToCollectionEntries(records as never, {});
     expect(entries[0].url).toBe("/projects/x/");
   });
+
+  it("populates repoHref from repoUrl and homepageHref from links.website", () => {
+    const records = [
+      {
+        slug: "crewai",
+        name: "CrewAI",
+        repoUrl: "https://github.com/crewAIInc/crewAI",
+        links: { github: "https://github.com/other/repo", website: "https://crewai.com" },
+      },
+    ];
+    const entries = recordsToCollectionEntries(records as never, {});
+    expect(entries[0].repoHref).toBe("https://github.com/crewAIInc/crewAI");
+    expect(entries[0].homepageHref).toBe("https://crewai.com");
+  });
+
+  it("falls back to links.github when repoUrl is missing", () => {
+    const records = [
+      { slug: "x", name: "X", links: { github: "https://github.com/foo/bar" } },
+    ];
+    const entries = recordsToCollectionEntries(records as never, {});
+    expect(entries[0].repoHref).toBe("https://github.com/foo/bar");
+  });
 });
 
 const collection: Collection = {

package/src/server/collections.ts

@@ -25,6 +25,8 @@ interface RawRecord {
   category?: string;
   tags?: string[];
   scores?: { curation?: number; activity?: number };
+  repoUrl?: string;
+  links?: { github?: string; website?: string };
 }
 
 /**
@@ -38,6 +40,9 @@ interface RawRecord {
  * - Prefers `pushedAt`; falls back to `lastCommitAt`.
  * - Constructs `url` as `${routeSlug}/${slug}/` so the value points
  *   back to the consumer's detail page.
+ * - Populates `repoHref` (from `repoUrl` or `links.github`) and
+ *   `homepageHref` (from `links.website`) so the row component
+ *   can render "View repo" / "Visit site" footer links.
  */
 export function recordsToCollectionEntries(
   records: RawRecord[],
@@ -57,6 +62,8 @@ export function recordsToCollectionEntries(
       title: r.name ?? r.title ?? r.slug,
       description: r.description ?? "",
       url: `/${routeSlug}/${r.slug}/`,
+      repoHref: r.repoUrl ?? r.links?.github,
+      homepageHref: r.links?.website,
       stack: r.stack ?? r.stacks?.[0],
       platform: r.platforms,
       license: r.license,