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

package/src/components/ProjectCard.astro

@@ -0,0 +1,345 @@
+---
+/**
+ * ProjectCard — the canonical card for one directory record.
+ *
+ * V1 (v0.5.0) refined design for the three-column grid, now shared by
+ * every listing surface (home sections, browse results, collection
+ * entries, taxonomy pages) through thin adapters (`IndexRow`,
+ * `CollectionRow`):
+ *
+ *   - Default mode: the whole card is one clickable `<a>` (cursor:
+ *     pointer, subtle border + surface lift on hover, no more than
+ *     1–2px vertical motion).
+ *   - When `secondaryLinks` are passed the root becomes an `<article>`
+ *     with a stretched title link, because nesting `<a>` inside `<a>`
+ *     is invalid HTML. Secondary links sit above the stretched link
+ *     (`relative z-10`).
+ *   - App icon top-left (48px), app name + repository owner/repo,
+ *     two-line description with reserved vertical space.
+ *   - Footer row: platform logos (or labelled stack/platform chips via
+ *     `labelledChips`), stars/updated/license on the right, and the
+ *     navigation arrow anchored bottom-right.
+ *   - Everything beyond the default home-page rendering is opt-in:
+ *     `showCurated`, `showLicense`, `showCategoryStatus`,
+ *     `labelledChips`, `secondaryLinks`, analytics `data-event` props.
+ *
+ * Data can come from a full `record` or from explicit props (adapters
+ * for shapes like `CollectionEntry` pass fields directly); explicit
+ * props win over record-derived values.
+ *
+ * Uses the package's design-system tokens plus the standard `dark:`
+ * variant. Equal-height cards in the row are achieved at the grid
+ * level (`CardGrid`: `grid` + `items-stretch`).
+ */
+import type { IndexRecord, Resource, ProjectRecord, IndexProjectRecord } from "@grove-dev/core";
+import {
+  getOwnerAndRepoFromRepoUrl,
+  getOwnerAvatarUrl,
+  formatRelative,
+  formatStars,
+  licenseDisplay,
+  nameInitials,
+  projectStackIds,
+  statusDisplay,
+} from "@grove-dev/astro";
+import CardIcon from "./CardIcon.astro";
+import Icon from "./Icon.astro";
+import StackPlatformChips from "./StackPlatformChips.astro";
+
+type CardRecord = IndexRecord | Resource | ProjectRecord | IndexProjectRecord;
+
+interface SecondaryLink {
+  label: string;
+  href: string;
+  /** Adds target="_blank" + rel and the external-link glyph. */
+  external?: boolean;
+  /** Analytics hooks forwarded as data-event attributes. */
+  event?: string;
+  eventSource?: string;
+}
+
+interface Props {
+  /** Record to render. Optional when explicit props are passed. */
+  record?: CardRecord;
+  /** Full detail-page URL. */
+  href: string;
+  /** Optional pre-resolved logo URL. Wins over the GitHub avatar. */
+  logoUrl?: string;
+  /** Override the description (defaults to `record.description`). */
+  description?: string;
+  /** Explicit overrides for record-derived values (adapter use). */
+  name?: string;
+  slug?: string;
+  repoUrl?: string;
+  stars?: number;
+  pushedAt?: string | null;
+  license?: string | null;
+  category?: string;
+  status?: string;
+  curated?: boolean;
+  stack?: string;
+  platforms?: string[];
+  /** Opt-in extras (all default off to keep the home grid unchanged). */
+  showCurated?: boolean;
+  showLicense?: boolean;
+  showCategoryStatus?: boolean;
+  /** Labelled stack/platform chip rows instead of the logo strip. */
+  labelledChips?: boolean;
+  /** Footer links; presence switches the root to `<article>` mode. */
+  secondaryLinks?: SecondaryLink[];
+  /** Eager-load the avatar (above-the-fold rows). */
+  eager?: boolean;
+  /** Analytics data-event attributes on the card root. */
+  event?: string;
+  eventSource?: string;
+  class?: string;
+}
+
+const {
+  record,
+  href,
+  logoUrl: logoUrlProp,
+  description: descriptionProp,
+  name: nameProp,
+  slug: slugProp,
+  repoUrl: repoUrlProp,
+  stars: starsProp,
+  pushedAt: pushedAtProp,
+  license: licenseProp,
+  category: categoryProp,
+  status: statusProp,
+  curated: curatedProp,
+  stack: stackProp,
+  platforms: platformsProp,
+  showCurated = false,
+  showLicense = false,
+  showCategoryStatus = false,
+  labelledChips = false,
+  secondaryLinks = [],
+  eager = false,
+  event,
+  eventSource,
+  class: className = "",
+} = Astro.props;
+
+const isProject = record?.kind === "project";
+const name =
+  nameProp ??
+  (record
+    ? record.kind === "resource"
+      ? (record as { title: string }).title
+      : (record as { name: string }).name
+    : "");
+const slug = slugProp ?? (record as { slug?: string } | undefined)?.slug;
+const repoHref =
+  repoUrlProp ??
+  (isProject
+    ? (record as { repoUrl?: string }).repoUrl
+    : (record as { links?: { github?: string } } | undefined)?.links?.github);
+
+const { owner, repo } = getOwnerAndRepoFromRepoUrl(repoHref ?? "");
+const avatarUrl =
+  logoUrlProp ??
+  (isProject ? (record as { logoUrl?: string }).logoUrl : undefined) ??
+  getOwnerAvatarUrl(owner, 80);
+
+const initials = nameInitials(name);
+
+const description =
+  descriptionProp ?? (record as { description?: string } | undefined)?.description ?? "";
+
+const platforms =
+  platformsProp ?? (isProject ? ((record as { platforms?: string[] }).platforms ?? []) : []);
+const stars =
+  starsProp ?? (isProject ? (record as { github?: { stars?: number } }).github?.stars : undefined);
+const pushedAt =
+  pushedAtProp ??
+  (isProject
+    ? (record as { github?: { pushedAt?: string | null } }).github?.pushedAt
+    : (record as { publishedAt?: string | null } | undefined)?.publishedAt);
+const license =
+  licenseProp ??
+  (isProject ? (record as { github?: { license?: string | null } }).github?.license : undefined);
+const category = categoryProp ?? (record as { category?: string } | undefined)?.category;
+const status =
+  statusProp ?? (isProject ? (record as { health?: { status?: string } }).health?.status : undefined);
+const curated =
+  curatedProp ??
+  Boolean(
+    (record as { curation?: { reviewed?: boolean } } | undefined)?.curation?.reviewed ||
+      (isProject &&
+        ((record as { bestFor?: string[] }).bestFor?.length ||
+          (record as { whyListed?: string[] }).whyListed?.length ||
+          (record as { caveats?: string[] }).caveats?.length)),
+  );
+
+const stackId =
+  stackProp ??
+  (isProject
+    ? projectStackIds(record as { stack?: string; stacks?: string[] })[0]
+    : undefined);
+
+const starsLabel = formatStars(stars);
+const updatedLabel = formatRelative(pushedAt);
+// "Unknown" is an internal placeholder, not information — suppress it
+// so card metadata never reads "Category · Unknown" to visitors.
+const rawStatusText = status ? statusDisplay(status as Parameters<typeof statusDisplay>[0]) : "";
+const statusText = rawStatusText === "Unknown" ? "" : rawStatusText;
+const licenseLabel = license ? licenseDisplay(license) : null;
+
+const hasStars = starsLabel !== null && typeof stars === "number" && stars > 0;
+const hasUpdated = Boolean(pushedAt);
+
+// `<a>`-in-`<a>` is invalid HTML, so cards with secondary links render
+// as an `<article>` whose title link is stretched over the card.
+const isArticle = secondaryLinks.length > 0;
+const Root = isArticle ? "article" : "a";
+const rootAttrs = isArticle ? {} : { href, "aria-label": `Open ${name}` };
+
+// Render the homepage brand strip through the shared `Icon` component
+// so brand marks come from the same `/icons/platforms/` files the
+// chip rows use. No more inline SVG strings — one source of truth.
+// `Icon` falls back to initials when an asset is missing, so the
+// strip simply renders whatever platforms the record declares.
+const visiblePlatforms = platforms.slice(0, 4);
+const platformOverflow = platforms.length - visiblePlatforms.length;
+const hasPlatforms = visiblePlatforms.length > 0;
+---
+
+<Root
+  {...rootAttrs}
+  class={`groove-project-card group relative flex h-full min-w-0 flex-col gap-3 rounded-xl border border-ink-200 bg-card p-5 outline-none transition-[border-color,background-color,transform] duration-150 hover:-translate-y-0.5 hover:border-ink-300 hover:bg-ink-50 focus-visible:border-ink-500 focus-visible:ring-2 focus-visible:ring-ink-900/15 dark:border-ink-800 dark:hover:border-ink-700 dark:hover:bg-ink-900 dark:focus-visible:border-ink-500 dark:focus-visible:ring-ink-100/15 ${className}`}
+  data-record-slug={slug}
+  data-event={event}
+  data-event-source={eventSource}
+  data-event-item={event ? slug : undefined}
+>
+  {/* Header: icon + name + owner */}
+  <header class="flex items-start gap-3">
+    {avatarUrl ? (
+      <img
+        src={avatarUrl}
+        alt=""
+        width="48"
+        height="48"
+        loading={eager ? "eager" : "lazy"}
+        fetchpriority={eager ? "high" : undefined}
+        decoding="async"
+        class="h-12 w-12 shrink-0 rounded-lg bg-white object-contain p-1 dark:bg-white"
+      />
+    ) : (
+      <span
+        aria-hidden="true"
+        class="flex h-12 w-12 shrink-0 items-center justify-center rounded-lg bg-ink-100 text-base font-semibold uppercase text-ink-700 dark:bg-ink-800 dark:text-ink-200"
+      >
+        {initials}
+      </span>
+    )}
+
+    <div class="flex min-w-0 flex-1 flex-col gap-0.5">
+      <h3 class="m-0 truncate text-[17px] font-semibold leading-snug tracking-tight text-ink-900 sm:text-[18px] dark:text-ink-100">
+        {isArticle ? (
+          <a
+            href={href}
+            class="text-inherit no-underline before:absolute before:inset-0 before:z-0 before:content-['']"
+          >
+            {name}
+          </a>
+        ) : (
+          name
+        )}
+      </h3>
+      {owner && repo && (
+        <p class="m-0 truncate font-mono text-[13px] text-ink-500 dark:text-ink-400">
+          {owner}<span class="opacity-60">/</span>{repo}
+        </p>
+      )}
+      {showCategoryStatus && (category || statusText) && (
+        <p class="m-0 truncate text-2xs text-ink-500 dark:text-ink-400">
+          {category}
+          {category && statusText && <span class="mx-1 text-ink-300 dark:text-ink-700">·</span>}
+          {statusText}
+        </p>
+      )}
+    </div>
+
+    {showCurated && curated && (
+      <span
+        class="inline-flex shrink-0 items-center gap-1 text-[10px] font-medium uppercase tracking-wider text-muted-foreground"
+        title="Reviewed by a curator"
+      >
+        <CardIcon name="curated" />
+        curated
+      </span>
+    )}
+  </header>
+
+  {/* Description — two-line clamp with reserved vertical space */}
+  <p
+    class="m-0 line-clamp-2 min-h-[42px] text-[14px] leading-[1.5] text-ink-500 dark:text-ink-400"
+  >
+    {description}
+  </p>
+
+  {/* Labelled stack/platform chip rows (opt-in; directory surfaces) */}
+  {labelledChips && (
+    <StackPlatformChips stack={stackId} platform={platforms} />
+  )}
+
+  {/* Footer: links / platform logos · meta · arrow */}
+  <footer class="mt-auto flex items-center justify-between gap-3 text-[12px] sm:text-[13px]">
+    <div class="flex min-w-0 flex-wrap items-center gap-x-3 gap-y-1 text-ink-500 dark:text-ink-400">
+      {secondaryLinks.map((link) => (
+        <a
+          href={link.href}
+          {...(link.external ? { target: "_blank", rel: "noopener noreferrer" } : {})}
+          data-event={link.event}
+          data-event-source={link.eventSource}
+          data-event-item={link.event ? slug : undefined}
+          class="relative z-10 inline-flex items-center gap-1 font-medium text-ink-700 no-underline transition-colors hover:text-ink-900 dark:text-ink-300 dark:hover:text-ink-100"
+        >
+          {link.label}
+          {link.external && <CardIcon name="external" />}
+        </a>
+      ))}
+      {!labelledChips && hasPlatforms && (
+        <div class="flex items-center gap-2.5">
+          {visiblePlatforms.map((platform) => (
+            <Icon
+              name={platform}
+              category="platform"
+              size={22}
+              title={platform}
+            />
+          ))}
+          {platformOverflow > 0 && (
+            <span class="text-[12px] text-ink-500 dark:text-ink-400">+{platformOverflow}</span>
+          )}
+        </div>
+      )}
+    </div>
+
+    <div class="flex min-w-0 shrink-0 items-center gap-3 text-ink-500 dark:text-ink-400">
+      {hasStars && (
+        <span class="inline-flex items-center gap-1" title={`${stars ?? 0} stars on GitHub`}>
+          <span class="inline-flex text-amber-500"><CardIcon name="star" /></span>
+          <span class="font-mono">{starsLabel}</span>
+        </span>
+      )}
+      {hasUpdated && (
+        <span class="whitespace-nowrap" title={`Last updated ${pushedAt}`}>
+          Updated {updatedLabel}
+        </span>
+      )}
+      {showLicense && licenseLabel && (
+        <span class="font-mono text-[10px] uppercase tracking-wide" title={`License: ${licenseLabel}`}>
+          {licenseLabel}
+        </span>
+      )}
+      <CardIcon
+        name="arrow"
+        class="shrink-0 text-ink-400 transition-colors group-hover:text-ink-700 dark:text-ink-500 dark:group-hover:text-ink-100"
+      />
+    </div>
+  </footer>
+</Root>

package/src/components/RecordHeader.astro

@@ -21,6 +21,7 @@
  * the badge's `data-activity-tone` attribute picks one at runtime.
  */
 import type { RecordDetailModel } from "../server/models.js";
+import { buttonClass } from "../ui/button.js";
 
 interface Props {
   detail: RecordDetailModel;
@@ -40,34 +41,64 @@ const {
   sourceDescription,
   screenshots,
   category,
-  description,
   name,
 } = detail;
 ---
 
-<header class="mb-10 flex flex-col gap-5 sm:flex-row sm:items-start sm:gap-6">
-  {avatarSrc ? (
-    <img
-      src={avatarSrc}
-      alt=""
-      width="64"
-      height="64"
-      loading="lazy"
-      decoding="async"
-      class="h-14 w-14 shrink-0 rounded-lg border border-ink-200 object-contain bg-white p-1 dark:border-ink-800 dark:bg-ink-950 sm:h-16 sm:w-16"
-    />
-  ) : (
-    <span
-      aria-hidden="true"
-      class="inline-flex h-14 w-14 shrink-0 items-center justify-center rounded-lg border border-ink-200 bg-ink-50 text-xl font-semibold text-ink-700 dark:border-ink-800 dark:bg-ink-900 dark:text-ink-200 sm:h-16 sm:w-16"
-    >
-      {initials || "·"}
-    </span>
-  )}
+<header class="mb-8">
+  {/* Identity row: logo sized to the name+repo block beside it — no
+      tall avatar column leaving dead space under the logo. Pills sit
+      at the row's right edge on wide viewports and wrap below on
+      mobile. */}
+  <div class="flex items-center gap-4">
+    {avatarSrc ? (
+      <img
+        src={avatarSrc}
+        alt=""
+        width="56"
+        height="56"
+        loading="lazy"
+        decoding="async"
+        class="h-12 w-12 shrink-0 rounded-lg border border-ink-200 object-contain bg-white p-1 dark:border-ink-800 dark:bg-ink-950 sm:h-14 sm:w-14"
+      />
+    ) : (
+      <span
+        aria-hidden="true"
+        class="inline-flex h-12 w-12 shrink-0 items-center justify-center rounded-lg border border-ink-200 bg-ink-50 text-xl font-semibold text-ink-700 dark:border-ink-800 dark:bg-ink-900 dark:text-ink-200 sm:h-14 sm:w-14"
+      >
+        {initials || "·"}
+      </span>
+    )}
+
+    <div class="min-w-0 flex-1">
+      <h1 class="m-0 text-[1.75rem] font-semibold leading-tight tracking-tight text-ink-900 dark:text-ink-100 sm:text-[2rem]">
+        {name}
+      </h1>
+      {ownerRepo && (
+        <p class="m-0 mt-0.5 text-sm text-ink-500 dark:text-ink-400">
+          <a
+            href={`https://github.com/${ownerRepo.owner}`}
+            target="_blank"
+            rel="noopener noreferrer"
+            class="text-inherit no-underline hover:text-ink-900 dark:hover:text-ink-100"
+          >
+            @{ownerRepo.owner}
+          </a>
+          <span class="mx-1 text-ink-300 dark:text-ink-700">/</span>
+          <a
+            href={repoUrl}
+            target="_blank"
+            rel="noopener noreferrer"
+            class="text-inherit no-underline hover:text-ink-900 dark:hover:text-ink-100"
+          >
+            {ownerRepo.repo}
+          </a>
+        </p>
+      )}
+    </div>
 
-  <div class="min-w-0 flex-1">
-    {/* Pills row — category + curation + Curated check + activity badge. */}
-    <div class="flex flex-wrap items-center gap-1.5">
+    {/* Pills — right-aligned beside the name on wide viewports. */}
+    <div class="hidden shrink-0 flex-wrap items-center justify-end gap-1.5 md:flex">
       {category && (
         <span 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">
           {category}
@@ -78,8 +109,9 @@ const {
           {l}
         </span>
       ))}
+      {/* Curated = reviewed provenance, not a success status. */}
       {record.curation?.reviewed && (
-        <span class="inline-flex items-center gap-1 rounded border border-emerald-300/60 bg-emerald-50 px-1.5 py-0.5 text-[10px] font-medium text-emerald-800 dark:border-emerald-800/60 dark:bg-emerald-950/40 dark:text-emerald-300">
+        <span class="inline-flex items-center gap-1 rounded-full border border-border bg-secondary px-2 py-0.5 text-2xs font-medium text-secondary-foreground">
           <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>
@@ -89,7 +121,7 @@ const {
       {activityBadge && (
         <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"
+          class="grove-pill grove-pill--activity inline-flex items-center gap-1 rounded-full border px-2 py-0.5 text-2xs font-medium"
         >
           <span class="relative flex h-1.5 w-1.5">
             <span class="absolute inline-flex h-full w-full animate-ping rounded-full bg-current opacity-60"></span>
@@ -99,68 +131,65 @@ const {
         </span>
       )}
     </div>
+  </div>
 
-    <h1 class="m-0 mt-2 text-[2rem] font-semibold leading-tight tracking-tight text-ink-900 dark:text-ink-100 sm:text-[2.25rem]">
-      {name}
-    </h1>
-
-    {ownerRepo && (
-      <p class="m-0 mt-1 text-sm text-ink-500 dark:text-ink-400">
-        <a
-          href={`https://github.com/${ownerRepo.owner}`}
-          target="_blank"
-          rel="noopener noreferrer"
-          class="text-inherit no-underline hover:text-ink-900 dark:hover:text-ink-100"
-        >
-          @{ownerRepo.owner}
-        </a>
-        <span class="mx-1 text-ink-300 dark:text-ink-700">/</span>
-        <a
-          href={repoUrl}
-          target="_blank"
-          rel="noopener noreferrer"
-          class="text-inherit no-underline hover:text-ink-900 dark:hover:text-ink-100"
-        >
-          {ownerRepo.repo}
-        </a>
-      </p>
+  {/* Same pills below the identity row on narrow viewports. */}
+  <div class="mt-3 flex flex-wrap items-center gap-1.5 md:hidden">
+    {category && (
+      <span 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">
+        {category}
+      </span>
+    )}
+    {curationLabels.map((l) => (
+      <span class="rounded-full bg-secondary px-2 py-0.5 text-2xs font-medium text-secondary-foreground">
+        {l}
+      </span>
+    ))}
+    {record.curation?.reviewed && (
+      <span class="inline-flex items-center gap-1 rounded-full border border-border bg-secondary px-2 py-0.5 text-2xs font-medium text-secondary-foreground">
+        <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>
     )}
+  </div>
 
-    {summary && (
-      <p class="m-0 mt-3 max-w-[68ch] text-base leading-relaxed text-ink-700 dark:text-ink-200">
-        {summary}
-      </p>
+  {/* Description — full width below the identity row. */}
+  {summary && (
+    <p class="m-0 mt-4 max-w-[72ch] text-base leading-relaxed text-ink-700 dark:text-ink-200">
+      {summary}
+    </p>
+  )}
+  {sourceDescription && sourceDescription !== summary && (
+    <p class="m-0 mt-2 max-w-[72ch] text-sm leading-relaxed text-ink-500 dark:text-ink-400">
+      <span class="text-2xs font-semibold uppercase tracking-wider">From the project's README: </span>
+      {sourceDescription}
+    </p>
+  )}
+
+  {/* CTA row — primary actions only. */}
+  <div class="mt-4 flex flex-wrap items-center gap-2">
+    {repoUrl && (
+      <a
+        href={repoUrl}
+        target="_blank"
+        rel="noopener noreferrer"
+        class={buttonClass("primary", "sm")}
+      >
+        View on GitHub →
+      </a>
     )}
-    {sourceDescription && sourceDescription !== summary && (
-      <p class="m-0 mt-2 max-w-[68ch] text-sm leading-relaxed text-ink-500 dark:text-ink-400">
-        <span class="text-2xs font-semibold uppercase tracking-wider">From the project's README: </span>
-        {sourceDescription}
-      </p>
+    {homepageUrl && (
+      <a
+        href={homepageUrl}
+        target="_blank"
+        rel="noopener noreferrer"
+        class={buttonClass("secondary", "sm")}
+      >
+        Homepage
+      </a>
     )}
-
-    {/* CTA row — primary actions only. */}
-    <div class="mt-4 flex flex-wrap items-center gap-2">
-      {repoUrl && (
-        <a
-          href={repoUrl}
-          target="_blank"
-          rel="noopener noreferrer"
-          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 bg-primary text-primary-foreground hover:bg-primary/90"
-        >
-          View on GitHub →
-        </a>
-      )}
-      {homepageUrl && (
-        <a
-          href={homepageUrl}
-          target="_blank"
-          rel="noopener noreferrer"
-          class="inline-flex h-8 cursor-pointer items-center justify-center gap-1.5 rounded-[var(--radius)] border border-border bg-secondary 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 text-foreground hover:bg-accent"
-        >
-          Homepage
-        </a>
-      )}
-    </div>
   </div>
   {screenshots && screenshots.length > 0 && (
     <div class="mt-6 grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3" aria-label="Screenshots">

package/src/components/RecordSection.astro

@@ -3,9 +3,9 @@
  * RecordSection — generic lens-style section wrapper for the
  * home page.
  *
- * Renders a SectionHeader + a 3-column grid of `ItemCard`s (a
- * record card; kept as `ItemCard` for V1 published API stability),
- * optional "View all" link in the header. Generic: takes any
+ * Renders a SectionHeader + a 3-column grid of `ProjectCard`s
+ * (the v0.5.0 refined card), plus an optional "View all" link
+ * in the header. Generic: takes any
  * `IndexRecord[]` (the slim list-page shape, discriminated union
  * over `kind`).
  *
@@ -24,7 +24,8 @@
  * homepage never collapses to a blank section.
  */
 import type { IndexRecord } from "@grove-dev/core";
-import ItemCard from "./ItemCard.astro";
+import CardGrid from "./CardGrid.astro";
+import ProjectCard from "./ProjectCard.astro";
 import Container from "../layouts/Container.astro";
 import SectionHeader from "../layouts/SectionHeader.astro";
 
@@ -47,6 +48,8 @@ interface Props {
   emptyLabel?: string;
   /** Extra class on the outer <section>. */
   class?: string;
+  /** How many records to render. Default 3 — the refined grid shows one row. */
+  limit?: number;
 }
 
 const {
@@ -61,9 +64,10 @@ const {
   eyebrow,
   emptyLabel = "No records yet.",
   class: className = "",
+  limit = 3,
 } = Astro.props;
 
-const visible = items.slice(0, 6);
+const visible = items.slice(0, limit);
 ---
 
 <section
@@ -92,9 +96,7 @@ const visible = items.slice(0, 6);
         {emptyLabel}
       </p>
     ) : (
-      <div
-        class="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3"
-      >
+      <CardGrid>
         {visible.map((item) => {
           // Resolve href: caller-supplied `hrefFor` callback wins;
           // otherwise fall back to `${pathPrefix}/${slug}`. The href
@@ -106,10 +108,12 @@ const visible = items.slice(0, 6);
           const finalHref =
             typeof hrefFor === "function" ? hrefFor(item) : fallbackHref;
           return (
-            <ItemCard record={item} href={finalHref} />
+            <li class="m-0 p-0">
+              <ProjectCard record={item} href={finalHref} />
+            </li>
           );
         })}
-      </div>
+      </CardGrid>
     )}
 
     {viewAllHref && (