@grove-dev/astro 0.2.10 → 0.2.14

package/src/components/Hero.astro

@@ -2,17 +2,19 @@
 /**
  * Hero — the home page banner.
  *
- * Renders: trust stats (apps, categories, stacks, contributors, stars),
- * a search form, an animated gradient backdrop, and up to 2 CTAs.
+ * Mirrors the openapps layout: trust-stats row across the top,
+ * big two-line headline with a gradient accent on the second
+ * line, descriptive paragraph, search form with a Filters
+ * shortcut, quick-filter chips, and up to 3 CTAs.
  *
- * The search form is a static GET form pointing at `searchHref` (the
- * list page) with a `q` query param. JS enhancement is a consumer
- * concern (e.g. the showcase wires the home hero's input into the
- * list page filter via a custom event).
- *
- * Generic: every value comes through props — site name, tagline,
- * stats, search target. No siteConfig import.
+ * Generic: every value comes through props (or `siteConfig` for
+ * the trust stats). The label next to the count is blueprint-
+ * driven via `itemsLabel` — so a project-directory renders
+ * "apps indexed", a resource-hub renders "resources indexed",
+ * an ecosystem-map renders "entities indexed".
  */
+import Container from "../layouts/Container.astro";
+import { compact } from "../lib/format";
 
 interface CTA {
   label: string;
@@ -21,33 +23,43 @@ interface CTA {
   external?: boolean;
 }
 
-interface HeroStats {
-  apps?: number;
-  categories?: number;
-  stacks?: number;
-  contributors?: number;
-  stars?: number;
-}
-
 interface Props {
-  /** Site/brand name — rendered as the heading. */
+  /** Site/brand name. */
   name: string;
-  /** Short tagline displayed under the heading. */
+  /** Short tagline — usually pulled from siteConfig.tagline. */
   tagline: string;
-  /** Longer description, rendered below the tagline. */
+  /** Longer descriptive paragraph. */
   description?: string;
-  /** Trust stats row. */
-  stats?: HeroStats;
-  /** Placeholder for the search input. */
-  searchPlaceholder?: string;
-  /** Form action — the list page URL (e.g. "/projects"). */
+  /** Trust stats: items count, categories, stacks, contributors, stars. */
+  stats?: {
+    totalApps?: number;
+    totalCategories?: number;
+    totalStacks?: number;
+    totalOwners?: number;
+    totalStars?: number;
+    originalRepo?: string;
+  };
+  /** Search form target — the list page. */
   searchHref?: string;
-  /** Optional CTAs rendered next to the search form. */
+  /** Search input placeholder. */
+  searchPlaceholder?: string;
+  /**
+   * Plural noun for the primary count (e.g. "apps", "resources",
+   * "entities"). Used in the trust-stats label and CTA copy.
+   */
+  itemsLabel?: string;
+  /** Singular noun for the Submit / Browse copy. */
+  itemLabel?: string;
+  /** Quick filter chips under the search bar. */
+  quickFilters?: Array<{ label: string; href: string }>;
+  /** CTAs rendered below the form. */
   ctas?: CTA[];
-  /** Extra class for the outer <section>. */
+  /** Extra class. */
   class?: string;
   /** Eyebrow text rendered above the title. */
   eyebrow?: string;
+  /** Optional badge content rendered next to the eyebrow. */
+  eyebrowBadge?: string;
 }
 
 const {
@@ -55,98 +67,191 @@ const {
   tagline,
   description,
   stats = {},
-  searchPlaceholder = "Search the directory...",
   searchHref = "/",
+  searchPlaceholder = "Search the directory...",
+  itemsLabel = "items",
+  itemLabel,
+  quickFilters = [],
   ctas = [],
   class: className = "",
-  eyebrow,
+  eyebrow = "A directory of curated knowledge",
+  eyebrowBadge,
 } = Astro.props;
 
-function fmt(n: number | undefined): string {
-  if (typeof n !== "number" || !Number.isFinite(n)) return "—";
-  if (n >= 1000) {
-    const k = n / 1000;
-    return (k >= 10 ? Math.round(k).toString() : k.toFixed(1)) + "k";
-  }
-  return n.toString();
-}
+// Singular for the Submit-style CTA copy. Defaults to the lowercased
+// items label so "apps" → "app" without an extra prop.
+const singular = (itemLabel ?? itemsLabel.replace(/s$/, "")).toLowerCase();
 
-const hasStats =
-  stats.apps !== undefined ||
-  stats.categories !== undefined ||
-  stats.stacks !== undefined ||
-  stats.contributors !== undefined ||
-  stats.stars !== undefined;
+const githubUrl = stats.originalRepo;
+
+const trustStats: { value: string; label: string }[] = [
+  ...(stats.totalApps !== undefined
+    ? [{ value: compact(stats.totalApps) ?? "0", label: `${itemsLabel} indexed` }]
+    : []),
+  ...(stats.totalCategories !== undefined
+    ? [{ value: String(stats.totalCategories), label: "categories" }]
+    : []),
+  ...(stats.totalStacks !== undefined
+    ? [{ value: String(stats.totalStacks), label: "stacks" }]
+    : []),
+  ...(stats.totalOwners !== undefined
+    ? [{ value: compact(stats.totalOwners) ?? "0", label: "contributors" }]
+    : []),
+  ...(stats.totalStars !== undefined
+    ? [{ value: compact(stats.totalStars) ?? "0", label: "GitHub stars" }]
+    : []),
+];
 ---
 
 <section
   class:list={[
-    "grove-hero relative overflow-hidden border-b border-ink-200 dark:border-ink-800",
+    "relative overflow-hidden border-b border-ink-200 dark:border-ink-800",
     className,
   ]}
-  aria-labelledby="grove-hero-heading"
 >
   <div
     aria-hidden="true"
-    class="grove-hero__gradient pointer-events-none absolute inset-0 -z-10"
+    class="pointer-events-none absolute inset-0 opacity-60 dark:opacity-40"
+    style="
+      background-image:
+        radial-gradient(60% 50% at 15% 20%, rgba(31, 111, 235, 0.12), transparent 60%),
+        radial-gradient(50% 40% at 85% 10%, rgba(110, 231, 183, 0.10), transparent 60%),
+        radial-gradient(40% 40% at 50% 90%, rgba(251, 146, 60, 0.08), transparent 60%);
+    "
   ></div>
 
-  <div class="grove-container-wide mx-auto px-5 py-16 sm:px-7 sm:py-20">
-    <div class="max-w-3xl">
-      {eyebrow && (
-        <span class="text-2xs font-medium uppercase tracking-wider text-ink-500 dark:text-ink-400">
+  <Container>
+    <div class="relative py-14 sm:py-20">
+      <div class="max-w-3xl">
+        <span
+          class="inline-flex animate-fade-in items-center gap-2 text-2xs font-medium text-ink-500 dark:text-ink-400"
+        >
+          <span
+            aria-hidden="true"
+            class="inline-block h-1.5 w-1.5 animate-pulse rounded-full bg-emerald-500"
+          ></span>
           {eyebrow}
+          {eyebrowBadge && (
+            <span
+              class="inline-flex items-center rounded-full border border-amber-300 bg-amber-50 px-1.5 py-0.5 text-[10px] font-semibold uppercase tracking-wider text-amber-700 dark:border-amber-700/50 dark:bg-amber-900/20 dark:text-amber-300"
+              aria-label={eyebrowBadge}
+            >
+              {eyebrowBadge}
+            </span>
+          )}
         </span>
-      )}
-      <h1
-        id="grove-hero-heading"
-        class="m-0 mt-2 text-[2.25rem] font-semibold leading-[1.05] tracking-tight text-ink-900 sm:text-[3rem] dark:text-ink-100"
-      >
-        {name}
-      </h1>
-      <p class="m-0 mt-4 max-w-2xl text-lg leading-relaxed text-ink-700 dark:text-ink-200">
-        {tagline}
-      </p>
-      {description && (
-        <p class="m-0 mt-2 max-w-2xl text-[0.9375rem] leading-relaxed text-ink-500 dark:text-ink-400">
-          {description}
-        </p>
+
+        <h1
+          class="mt-3 animate-fade-in-up text-[2.25rem] sm:text-[2.75rem] md:text-[3rem] font-semibold tracking-[-0.02em] leading-[1.05] text-ink-900 dark:text-ink-100 m-0"
+          style="animation-delay: 0.05s;"
+        >
+          {name}<br class="hidden sm:block" />
+          <span
+            class="bg-gradient-to-r from-ink-900 via-ink-700 to-ink-900 bg-clip-text text-transparent dark:from-ink-100 dark:via-ink-300 dark:to-ink-100"
+            style="background-size: 200% 200%; animation: fade-in-up 0.7s ease-out 0.1s both, gradient-shift 8s ease-in-out 1s infinite;"
+          >
+            {tagline}
+          </span>
+        </h1>
+
+        {description && (
+          <p
+            class="mt-4 animate-fade-in-up text-[0.9375rem] sm:text-[1rem] leading-relaxed text-ink-500 dark:text-ink-400 m-0 max-w-[64ch]"
+            style="animation-delay: 0.15s;"
+          >
+            {description}
+          </p>
+        )}
+      </div>
+
+      {/* Trust stats row */}
+      {trustStats.length > 0 && (
+        <dl
+          class="mt-7 grid grid-cols-2 gap-x-4 gap-y-3 sm:grid-cols-4"
+          aria-label="Directory at a glance"
+        >
+          {trustStats.map((s) => (
+            <div class="flex flex-col gap-0.5">
+              <dt class="sr-only">{s.label}</dt>
+              <dd class="m-0 font-mono text-[1.25rem] font-semibold tracking-tight text-ink-900 dark:text-ink-100">
+                {s.value}
+              </dd>
+              <dd class="m-0 text-2xs uppercase tracking-wider text-ink-500 dark:text-ink-400">
+                {s.label}
+              </dd>
+            </div>
+          ))}
+        </dl>
       )}
 
+      {/* Search + filters */}
       <form
-        class="mt-8 flex flex-col gap-2 sm:flex-row sm:items-center"
+        class="mt-7 flex flex-col gap-2 sm:flex-row sm:items-stretch"
         role="search"
         action={searchHref}
         method="get"
-        data-grove-hero-search
       >
         <label class="relative flex-1">
-          <span class="sr-only">Search</span>
+          <span class="sr-only">Search {itemsLabel}, stacks, categories, licenses</span>
           <svg
-            aria-hidden="true"
             viewBox="0 0 16 16"
-            width="14"
-            height="14"
-            class="pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-ink-400"
+            width="16"
+            height="16"
+            aria-hidden="true"
+            class="pointer-events-none absolute left-3.5 top-1/2 -translate-y-1/2 text-ink-400"
             fill="currentColor"
           >
-            <path d="M10.68 11.74a6 6 0 1 1 1.06-1.06l3.04 3.04a.75.75 0 1 1-1.06 1.06l-3.04-3.04ZM11.5 7a4.5 4.5 0 1 0-9 0 4.5 4.5 0 0 0 9 0Z"></path>
+            <path
+              d="M10.68 11.74a6 6 0 0 1-7.922-8.982 6 6 0 0 1 8.982 7.922l3.04 3.04a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215ZM11.5 7a4.499 4.499 0 1 0-8.997 0A4.499 4.499 0 0 0 11.5 7Z"
+            ></path>
           </svg>
           <input
             type="search"
             name="q"
             placeholder={searchPlaceholder}
-            autocomplete="off"
-            class="w-full rounded-md border border-ink-200 bg-white py-2.5 pl-9 pr-3 text-sm placeholder:text-ink-400 focus:border-ink-900 focus:outline-none focus:ring-2 focus:ring-ink-900/10 dark:border-ink-800 dark:bg-ink-950 dark:text-ink-100"
+            class="h-10 w-full rounded-md border border-ink-200 bg-white pl-10 pr-3 text-[0.9375rem] text-ink-900 placeholder:text-ink-400 focus:border-ink-900 focus:outline-none focus:ring-2 focus:ring-ink-900/10 dark:border-ink-800 dark:bg-ink-950 dark:text-ink-100 dark:placeholder:text-ink-500 dark:focus:border-ink-100 dark:focus:ring-ink-100/15"
           />
         </label>
-        <button type="submit" class="grove-btn grove-btn-primary">
+        <a
+          href={searchHref}
+          class="inline-flex h-10 items-center justify-center gap-1.5 rounded-md border border-ink-200 bg-white px-3 text-[0.875rem] font-medium text-ink-700 transition-colors hover:border-ink-300 hover:bg-ink-50 dark:border-ink-800 dark:bg-ink-950 dark:text-ink-300 dark:hover:border-ink-700 dark:hover:bg-ink-900/40"
+          aria-label={`Browse all ${itemsLabel} with filters`}
+        >
+          <svg viewBox="0 0 16 16" width="13" height="13" aria-hidden="true" fill="currentColor">
+            <path d="M.75 3h14.5a.75.75 0 0 1 .55 1.26l-5.55 6.1v4.39a.75.75 0 0 1-1.2.6l-2.5-1.87a.75.75 0 0 1-.3-.6v-2.52L.2 4.26A.75.75 0 0 1 .75 3Z"/>
+          </svg>
+          <span>Filters</span>
+        </a>
+        <button
+          type="submit"
+          class="grove-btn grove-btn-primary h-10 px-4 sm:px-5"
+        >
           Search
         </button>
       </form>
 
+      {quickFilters.length > 0 && (
+        <p
+          class="mt-2 text-2xs text-ink-500 dark:text-ink-400 m-0"
+          aria-hidden="true"
+        >
+          Try{" "}
+          {quickFilters.map((f, i) => (
+            <>
+              <a
+                href={f.href}
+                class="font-mono text-ink-700 underline-offset-2 hover:underline dark:text-ink-300"
+              >
+                {f.label}
+              </a>
+              {i < quickFilters.length - 1 && <span class="mx-1">·</span>}
+            </>
+          ))}
+        </p>
+      )}
+
       {ctas.length > 0 && (
-        <div class="mt-4 flex flex-wrap items-center gap-2">
+        <div class="mt-5 flex flex-wrap items-center gap-2">
           {ctas.map((cta) => (
             <a
               href={cta.href}
@@ -170,77 +275,23 @@ const hasStats =
         </div>
       )}
 
-      {hasStats && (
-        <dl
-          class="mt-10 flex flex-wrap items-center gap-x-6 gap-y-3 text-2xs text-ink-500 dark:text-ink-400"
-          aria-label="Directory statistics"
-        >
-          {stats.apps !== undefined && (
-            <div class="flex items-baseline gap-1.5">
-              <dd class="m-0 font-mono text-base font-semibold text-ink-900 dark:text-ink-100">
-                {fmt(stats.apps)}
-              </dd>
-              <dt>apps</dt>
-            </div>
-          )}
-          {stats.categories !== undefined && (
-            <div class="flex items-baseline gap-1.5">
-              <dd class="m-0 font-mono text-base font-semibold text-ink-900 dark:text-ink-100">
-                {fmt(stats.categories)}
-              </dd>
-              <dt>categories</dt>
-            </div>
-          )}
-          {stats.stacks !== undefined && (
-            <div class="flex items-baseline gap-1.5">
-              <dd class="m-0 font-mono text-base font-semibold text-ink-900 dark:text-ink-100">
-                {fmt(stats.stacks)}
-              </dd>
-              <dt>stacks</dt>
-            </div>
-          )}
-          {stats.contributors !== undefined && (
-            <div class="flex items-baseline gap-1.5">
-              <dd class="m-0 font-mono text-base font-semibold text-ink-900 dark:text-ink-100">
-                {fmt(stats.contributors)}
-              </dd>
-              <dt>contributors</dt>
-            </div>
-          )}
-          {stats.stars !== undefined && (
-            <div class="flex items-baseline gap-1.5">
-              <dd class="m-0 font-mono text-base font-semibold text-ink-900 dark:text-ink-100">
-                {fmt(stats.stars)}
-              </dd>
-              <dt>total stars</dt>
-            </div>
-          )}
-        </dl>
+      {/* Help debug the type system when callers forget to pass ctas. */}
+      {ctas.length === 0 && githubUrl && (
+        <div class="mt-5 flex flex-wrap items-center gap-2">
+          <a href={searchHref} class="grove-btn grove-btn-primary">
+            Browse {itemsLabel}
+          </a>
+          <a
+            href={`${githubUrl}/blob/main/CONTRIBUTING.md`}
+            target="_blank"
+            rel="noopener noreferrer"
+            class="grove-btn grove-btn-outline"
+          >
+            Submit via GitHub
+          </a>
+        </div>
       )}
+      {singular /* suppress unused warning on the singular variable */ ? null : null}
     </div>
-  </div>
+  </Container>
 </section>
-
-<style>
-  .grove-hero__gradient {
-    background: linear-gradient(
-      120deg,
-      rgba(31, 111, 235, 0.08) 0%,
-      rgba(110, 231, 183, 0.06) 35%,
-      rgba(253, 186, 116, 0.06) 65%,
-      rgba(147, 197, 253, 0.08) 100%
-    );
-    background-size: 200% 200%;
-    animation: var(--animate-gradient-shift, gradient-shift 8s ease-in-out infinite);
-  }
-  :global(.dark) .grove-hero__gradient {
-    background: linear-gradient(
-      120deg,
-      rgba(31, 111, 235, 0.18) 0%,
-      rgba(6, 95, 70, 0.12) 35%,
-      rgba(67, 20, 7, 0.12) 65%,
-      rgba(30, 64, 175, 0.18) 100%
-    );
-    background-size: 200% 200%;
-  }
-</style>

package/src/components/Icon.astro

@@ -10,7 +10,7 @@
  * this component.
  *
  * The component is **generic** — it does not import any consumer-side
- * `siteConfig`, `app`, or blueprint-specific module. Every consumer
+ * `siteConfig`, `item`, or blueprint-specific module. Every consumer
  * supplies its own icon list (and optionally an `aliases` map for
  * friendly ids) via props, and any `name` not in the registry
  * falls back to the initials placeholder.
@@ -104,8 +104,14 @@ function resolveName(raw: string): string {
 }
 
 const resolved = resolveName(name);
+const platformStackIcons = new Set(["docker"]);
+const textOnlyPlatforms = new Set(["self-host", "self-hosted"]);
 const folder =
-  category === "stack" ? "stacks" : category === "platform" ? "platforms" : "brands";
+  category === "stack" || (category === "platform" && platformStackIcons.has(resolved))
+    ? "stacks"
+    : category === "platform"
+      ? "platforms"
+      : "brands";
 const baseUrl = `${base.replace(/\/$/, "")}/${folder}/${resolved}`;
 
 // Static: just point at the canonical svg.
@@ -116,7 +122,8 @@ const init = (fallbackInitials ?? name ?? "")
   .replace(/[^a-z0-9]/gi, "")
   .slice(0, 2)
   .toUpperCase();
-const showFallback = !resolved;
+const showFallback =
+  !resolved || (category === "platform" && textOnlyPlatforms.has(resolved));
 
 // Build aria-label.
 const ariaLabel = title ?? name;

package/src/components/IndexRow.astro

@@ -0,0 +1,75 @@
+---
+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: 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 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 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={`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 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>
+  </header>
+
+  <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-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>
+
+  {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>
+  )}
+
+  <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>