@grove-dev/astro 0.1.0

package/templates/default/src/components/AppSection.astro

@@ -0,0 +1,58 @@
+---
+import type { OpenSourceApp } from "../data/types";
+import AppCard from "./AppCard.astro";
+import SectionHeader from "./layout/SectionHeader.astro";
+import Container from "./layout/Container.astro";
+
+interface Props {
+  id: string;
+  title: string;
+  /** Plain-language subtitle explaining the lens. */
+  description: string;
+  apps: OpenSourceApp[];
+  /** Where the "View all" link points (typically the apps page with a
+   *  filter applied). */
+  viewAllHref?: string;
+  /** Custom label for the "View all" link. Lets us say
+   *  "View all new" / "View hot apps" / "View mature apps"
+   *  instead of the generic "View all". */
+  viewAllLabel?: string;
+}
+
+const {
+  id,
+  title,
+  description,
+  apps,
+  viewAllHref = "#",
+  viewAllLabel = "View all",
+} = Astro.props;
+---
+
+<section id={id} class="section border-b border-ink-200 dark:border-ink-800 scroll-mt-20">
+  <Container>
+    <div class="flex items-end justify-between gap-4">
+      <SectionHeader title={title} description={description} />
+      <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>
+
+    <div
+      class="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3"
+    >
+      {apps.map((app) => <AppCard app={app} />)}
+    </div>
+
+    <div class="mt-4 sm:hidden">
+      <a
+        href={viewAllHref}
+        class="text-2xs font-medium text-ink-500 transition-colors hover:text-ink-900 dark:text-ink-400 dark:hover:text-ink-100"
+        >{viewAllLabel} →</a
+      >
+    </div>
+  </Container>
+</section>

package/templates/default/src/components/AppsIndexRow.astro

@@ -0,0 +1,230 @@
+---
+import type { OpenSourceApp } from "../data/types";
+import Icon from "./icons/Icon.astro";
+import {
+  getOwnerAndRepoFromRepoUrl,
+  getOwnerAvatarUrl,
+} from "../lib/repo";
+import { formatStars, formatRelative } from "../lib/format";
+
+interface Props {
+  app: OpenSourceApp;
+}
+
+const { app } = Astro.props;
+
+const { owner, repo } = getOwnerAndRepoFromRepoUrl(app.repoUrl);
+const avatar = app.logoUrl ?? getOwnerAvatarUrl(owner, 80);
+
+// "Mature" wins over "Hot" wins over "New" wins over anything else.
+const label =
+  app.labels?.find((l) => l === "mature" || l === "hot" || l === "new") ??
+  app.labels?.[0];
+
+const labelClass = label === "new"
+  ? "border-emerald-300/60 bg-emerald-50 text-emerald-800 dark:border-emerald-800/60 dark:bg-emerald-950/40 dark:text-emerald-300"
+  : label === "hot"
+    ? "border-orange-300/60 bg-orange-50 text-orange-800 dark:border-orange-800/60 dark:bg-orange-950/40 dark:text-orange-300"
+    : label === "mature"
+      ? "border-blue-300/60 bg-blue-50 text-blue-800 dark:border-blue-800/60 dark:bg-blue-950/40 dark:text-blue-300"
+      : "border-ink-200 bg-ink-50 text-ink-700 dark:border-ink-800 dark:bg-ink-900/60 dark:text-ink-300";
+
+const isCurated = Boolean(
+  app.bestFor?.length || app.whyListed?.length || app.caveats?.length || app.scores,
+);
+
+// Initials for placeholder logo.
+const initials = app.name
+  .split(/\s+/)
+  .map((w) => w[0])
+  .filter(Boolean)
+  .slice(0, 2)
+  .join("")
+  .toUpperCase();
+
+const allStacks = [app.stack, ...(app.stacks ?? [])].filter(Boolean);
+const visibleStacks = allStacks.slice(0, 4);
+const stackOverflow = allStacks.length - visibleStacks.length;
+
+const visiblePlatforms = app.platforms.slice(0, 4);
+const platformOverflow = app.platforms.length - visiblePlatforms.length;
+
+const starsLabel = formatStars(app.stars);
+const updatedLabel = formatRelative(app.lastCommitAt);
+
+const detailHref = `/apps/${app.slug}`;
+const repoHref = app.repoUrl;
+---
+
+<article
+  class="apps-row 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 dark:hover:shadow-[0_1px_2px_rgba(0,0,0,0.4),0_4px_12px_-2px_rgba(0,0,0,0.3)]"
+  data-slug={app.slug}
+  data-stack={app.stack}
+  data-stacks={allStacks.join("|")}
+  data-category={app.category ?? ""}
+  data-platforms={(app.platforms ?? []).join("|")}
+  data-labels={(app.labels ?? []).join("|")}
+  data-status={app.status ?? ""}
+  data-license={app.license ?? ""}
+  data-stars={app.stars ?? 0}
+  data-updated={app.lastCommitAt ?? ""}
+  data-name={app.name.toLowerCase()}
+  data-owner={(owner ?? "").toLowerCase()}
+  data-q={(app.description ?? "").toLowerCase()}
+>
+  {/* Header: avatar + name + label */}
+  <header class="flex items-start gap-3">
+    <a
+      href={detailHref}
+      class="relative z-10 flex shrink-0"
+      aria-label={`Open ${app.name} details`}
+    >
+      {avatar ? (
+        <img
+          src={avatar}
+          alt={`${app.name} avatar`}
+          width="44"
+          height="44"
+          loading="lazy"
+          decoding="async"
+          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="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="flex min-w-0 flex-1 flex-col gap-0.5">
+      <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 text-inherit no-underline hover:underline"
+          >
+            {app.name}
+          </a>
+        </h3>
+        {label && (
+          <span
+            class={`inline-flex items-center rounded border px-1.5 py-0 text-[10px] font-medium uppercase tracking-wider ${labelClass}`}
+          >
+            {label}
+          </span>
+        )}
+        {isCurated && (
+          <span
+            class="inline-flex items-center gap-1 text-[10px] font-medium uppercase tracking-wider text-emerald-700 dark:text-emerald-400"
+            title="Hand-curated entry"
+          >
+            <svg viewBox="0 0 16 16" width="9" height="9" aria-hidden="true" fill="currentColor">
+              <path d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.75.75 0 0 1 1.06-1.06L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"/>
+            </svg>
+            curated
+          </span>
+        )}
+      </div>
+      <div class="flex flex-wrap items-center gap-x-1.5 gap-y-0.5 text-2xs text-ink-500 dark:text-ink-400">
+        {owner && (
+          <a
+            href={repoHref}
+            target="_blank"
+            rel="noopener noreferrer"
+            class="relative z-10 font-mono hover:text-ink-900 dark:hover:text-ink-100"
+          >
+            <span class="text-ink-400 dark:text-ink-500">@</span>{owner}
+            {repo && <span class="text-ink-400 dark:text-ink-500">/{repo}</span>}
+          </a>
+        )}
+        {owner && <span class="text-ink-300 dark:text-ink-700">·</span>}
+        <span>{app.category}</span>
+      </div>
+    </div>
+  </header>
+
+  {/* Description */}
+  <p class="apps-row-desc m-0 line-clamp-2 text-[0.8125rem] leading-relaxed text-ink-600 dark:text-ink-300">
+    {app.description}
+  </p>
+
+  {/* High-priority metadata row: stars · updated · license — the
+      "is this alive and usable?" answers at a glance. */}
+  <dl class="apps-row-meta grid grid-cols-3 gap-x-3 text-2xs">
+    {starsLabel !== null && (
+      <div class="flex items-baseline gap-1.5">
+        <dt class="sr-only">Stars</dt>
+        <dd class="inline-flex items-center gap-1 font-mono text-ink-700 dark:text-ink-300">
+          <svg viewBox="0 0 16 16" width="10" height="10" 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>
+          {starsLabel}
+        </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" title={app.lastCommitAt ?? ""}>{updatedLabel}</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">{app.license ?? "—"}</dd>
+    </div>
+  </dl>
+
+  {/* Medium-priority metadata: platforms + stacks. Hidden in compact mode
+      (controlled by parent via the `data-density` attribute on the
+      results container). */}
+  <div class="apps-row-chips flex flex-col gap-1.5">
+    <div class="flex flex-wrap items-center gap-1.5">
+      {visiblePlatforms.map((p) => (
+        <span class="apps-chip 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={p} category="platform" size={11} />
+          <span>{p}</span>
+        </span>
+      ))}
+      {platformOverflow > 0 && (
+        <span class="apps-chip text-2xs text-ink-400 dark:text-ink-500">+{platformOverflow}</span>
+      )}
+    </div>
+    <div class="flex flex-wrap items-center gap-1.5">
+      {visibleStacks.map((s) => (
+        <span class="apps-chip 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={s} category="stack" size={11} />
+          <span>{s}</span>
+        </span>
+      ))}
+      {stackOverflow > 0 && (
+        <span class="apps-chip text-2xs text-ink-400 dark:text-ink-500">+{stackOverflow}</span>
+      )}
+    </div>
+  </div>
+
+  {/* Footer actions: View details + GitHub. Always visible (even in
+      compact mode) so the two primary actions never disappear. */}
+  <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="relative z-10 inline-flex items-center gap-1 rounded-md border border-ink-200 bg-white px-2 py-1 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/60"
+    >
+      View details
+      <svg viewBox="0 0 16 16" width="10" height="10" aria-hidden="true" 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>
+    <a
+      href={repoHref}
+      target="_blank"
+      rel="noopener noreferrer"
+      class="relative z-10 inline-flex items-center gap-1 rounded-md border border-ink-200 bg-white px-2 py-1 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/60"
+    >
+      <svg viewBox="0 0 16 16" width="11" height="11" aria-hidden="true" fill="currentColor">
+        <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38v-1.33c-2.22.48-2.69-1.07-2.69-1.07-.36-.92-.89-1.17-.89-1.17-.73-.5.05-.49.05-.49.8.06 1.23.83 1.23.83.72 1.22 1.87.87 2.33.67.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48v2.19c0 .21.15.46.55.38A8 8 0 0 0 8 0Z"/>
+      </svg>
+      GitHub
+    </a>
+  </footer>
+</article>

package/templates/default/src/components/AppsPagination.astro

@@ -0,0 +1,147 @@
+---
+/**
+ * Pagination for the /apps list. Server-rendered; the page index in
+ * the URL is the source of truth. "Load more" is not used here — the
+ * full result set is small (a few hundred at most) so a real page
+ * index is simpler and more shareable.
+ *
+ * The component renders Prev / numbered pages / Next, plus a small
+ * "Page X of Y" caption. If there's only one page, returns nothing.
+ */
+interface Props {
+  /** 1-based current page. */
+  current: number;
+  /** Total page count. */
+  total: number;
+  /**
+   * Build the URL for a target page. Caller passes the function so
+   * we can preserve any active filter query string. The function
+   * receives the target page and should return a href with that
+   * page query param updated.
+   */
+  hrefFor: (page: number) => string;
+  class?: string;
+}
+
+const { current, total, hrefFor, class: className = "" } = Astro.props;
+
+// Windowed page list: always show first, last, current ± 1. Hides
+// distant pages with "…". Keeps the bar compact for large total.
+function pageList(current: number, total: number): (number | "ellipsis")[] {
+  if (total <= 7) return Array.from({ length: total }, (_, i) => i + 1);
+  const out: (number | "ellipsis")[] = [];
+  const add = (n: number) => {
+    if (out[out.length - 1] !== n) out.push(n);
+  };
+  add(1);
+  if (current > 3) out.push("ellipsis");
+  for (let p = Math.max(2, current - 1); p <= Math.min(total - 1, current + 1); p++) add(p);
+  if (current < total - 2) out.push("ellipsis");
+  add(total);
+  return out;
+}
+
+const pages = pageList(current, total);
+const hasPrev = current > 1;
+const hasNext = current < total;
+const prevHref = hasPrev ? hrefFor(current - 1) : null;
+const nextHref = hasNext ? hrefFor(current + 1) : null;
+
+const baseBtn =
+  "inline-flex h-8 min-w-8 items-center justify-center rounded-md border px-2 text-2xs font-medium transition-colors";
+const inactiveBtn =
+  "border-ink-200 bg-white text-ink-700 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/60";
+const activeBtn =
+  "border-ink-900 bg-ink-900 text-white dark:border-ink-100 dark:bg-ink-100 dark:text-ink-900";
+const disabledBtn =
+  "border-ink-200 bg-white text-ink-300 dark:border-ink-800 dark:bg-ink-950 dark:text-ink-700";
+---
+
+{
+  total > 1 && (
+    <nav
+      class={`mt-8 flex flex-col items-center gap-3 sm:flex-row sm:justify-between ${className}`}
+      aria-label="Pagination"
+    >
+      <p class="m-0 text-2xs text-ink-500 dark:text-ink-400">
+        Page <span class="font-mono text-ink-700 dark:text-ink-300">{current}</span> of{" "}
+        <span class="font-mono text-ink-700 dark:text-ink-300">{total}</span>
+      </p>
+      <ul class="m-0 flex list-none flex-wrap items-center justify-center gap-1 p-0">
+        <li>
+          {hasPrev && prevHref ? (
+            <a
+              href={prevHref}
+              rel="prev"
+              class={`${baseBtn} ${inactiveBtn}`}
+              aria-label="Previous page"
+            >
+              <svg viewBox="0 0 16 16" width="11" height="11" aria-hidden="true" fill="currentColor">
+                <path d="M9.78 3.22a.75.75 0 0 1 0 1.06L6.56 7.5h6.69a.75.75 0 0 1 0 1.5H6.56l3.22 3.22a.75.75 0 1 1-1.06 1.06l-4.5-4.5a.75.75 0 0 1 0-1.06l4.5-4.5a.75.75 0 0 1 1.06 0Z"/>
+              </svg>
+              <span class="ml-1">Prev</span>
+            </a>
+          ) : (
+            <span class={`${baseBtn} ${disabledBtn} cursor-not-allowed`} aria-disabled="true">
+              <svg viewBox="0 0 16 16" width="11" height="11" aria-hidden="true" fill="currentColor">
+                <path d="M9.78 3.22a.75.75 0 0 1 0 1.06L6.56 7.5h6.69a.75.75 0 0 1 0 1.5H6.56l3.22 3.22a.75.75 0 1 1-1.06 1.06l-4.5-4.5a.75.75 0 0 1 0-1.06l4.5-4.5a.75.75 0 0 1 1.06 0Z"/>
+              </svg>
+              <span class="ml-1">Prev</span>
+            </span>
+          )}
+        </li>
+        {pages.map((p) =>
+          p === "ellipsis" ? (
+            <li>
+              <span class={`${baseBtn} border-transparent text-ink-400 dark:text-ink-500`} aria-hidden="true">
+                …
+              </span>
+            </li>
+          ) : p === current ? (
+            <li>
+              <span
+                class={`${baseBtn} ${activeBtn}`}
+                aria-current="page"
+                aria-label={`Page ${p}, current`}
+              >
+                {p}
+              </span>
+            </li>
+          ) : (
+            <li>
+              <a
+                href={hrefFor(p)}
+                class={`${baseBtn} ${inactiveBtn}`}
+                aria-label={`Go to page ${p}`}
+              >
+                {p}
+              </a>
+            </li>
+          ),
+        )}
+        <li>
+          {hasNext && nextHref ? (
+            <a
+              href={nextHref}
+              rel="next"
+              class={`${baseBtn} ${inactiveBtn}`}
+              aria-label="Next page"
+            >
+              <span class="mr-1">Next</span>
+              <svg viewBox="0 0 16 16" width="11" height="11" aria-hidden="true" fill="currentColor">
+                <path d="M6.22 3.22a.75.75 0 0 1 1.06 0l4.5 4.5a.75.75 0 0 1 0 1.06l-4.5 4.5a.75.75 0 0 1-1.06-1.06L9.44 8.5H2.75a.75.75 0 0 1 0-1.5h6.69L6.22 4.28a.75.75 0 0 1 0-1.06Z"/>
+              </svg>
+            </a>
+          ) : (
+            <span class={`${baseBtn} ${disabledBtn} cursor-not-allowed`} aria-disabled="true">
+              <span class="mr-1">Next</span>
+              <svg viewBox="0 0 16 16" width="11" height="11" aria-hidden="true" fill="currentColor">
+                <path d="M6.22 3.22a.75.75 0 0 1 1.06 0l4.5 4.5a.75.75 0 0 1 0 1.06l-4.5 4.5a.75.75 0 0 1-1.06-1.06L9.44 8.5H2.75a.75.75 0 0 1 0-1.5h6.69L6.22 4.28a.75.75 0 0 1 0-1.06Z"/>
+              </svg>
+            </span>
+          )}
+        </li>
+      </ul>
+    </nav>
+  )
+}

package/templates/default/src/components/CategoryGrid.astro

@@ -0,0 +1,80 @@
+---
+import type { Category } from "../data/categories";
+import SectionHeader from "./layout/SectionHeader.astro";
+import Container from "./layout/Container.astro";
+import { countByCategory } from "../lib/taxonomy-counts";
+
+interface Props {
+  categories: Category[];
+}
+
+const { categories } = Astro.props;
+const counts = countByCategory();
+
+// Hide categories that have zero apps in the directory. We don't lie about
+// coverage. The taxonomy is a "future state" map; the rendered list is the
+// intersection of the taxonomy and what actually exists in data/apps/.
+const visible = categories
+  .map((c) => ({ ...c, count: counts.get(c.slug) ?? 0 }))
+  .filter((c) => c.count > 0)
+  .sort((a, b) => b.count - a.count);
+---
+
+<section
+  id="categories"
+  class="section scroll-mt-20 border-b border-ink-200 dark:border-ink-800"
+>
+  <Container>
+    <SectionHeader
+      eyebrow="Categories"
+      title="Browse by category"
+      description="Find apps by what they do, not by which stack they use."
+    />
+
+    <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"
+      >
+        {
+          visible.map((cat) => (
+            <li class="divide-x divide-ink-200 dark:divide-ink-800">
+              <a
+                href={`/apps?category=${encodeURIComponent(cat.name)}`}
+                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">
+                      {cat.name}
+                    </h3>
+                    <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"
+                      title={`${cat.count} apps in this category`}
+                    >
+                      {cat.count} apps
+                    </span>
+                  </div>
+                  <p class="m-0 text-2xs leading-relaxed text-ink-500 dark:text-ink-400">
+                    {cat.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>
+  </Container>
+</section>

package/templates/default/src/components/ContributorsGrid.astro

@@ -0,0 +1,105 @@
+---
+// SPDX-License-Identifier: MIT
+
+/**
+ * Contributors grid for the home page. Renders all contributors at a
+ * uniform avatar size (no big/small distinction — the previous
+ * "top 10 + rest" layout implied a hierarchy that doesn't exist).
+ *
+ * When the contributor count is large enough that the homepage
+ * layout would feel cluttered, a "View all" link points to the
+ * dedicated `/contributors` page where the full list lives.
+ */
+import type { Contributor } from "../data/contributors";
+import SectionHeader from "./layout/SectionHeader.astro";
+import Container from "./layout/Container.astro";
+
+interface Props {
+  contributors: Contributor[];
+}
+
+const { contributors } = Astro.props;
+const total = contributors.length;
+// Threshold above which we link out to the full /contributors page
+// instead of inlining every avatar on the homepage.
+const INLINE_LIMIT = 100;
+const isCapped = total > INLINE_LIMIT;
+const visible = isCapped ? contributors.slice(0, INLINE_LIMIT) : contributors;
+const more = Math.max(0, total - INLINE_LIMIT);
+---
+
+<section
+  id="contributors"
+  class="section scroll-mt-20 border-b border-ink-200 dark:border-ink-800"
+>
+  <Container>
+    <SectionHeader
+      eyebrow="Community"
+      title="Thanks to every contributor."
+      description="This directory exists because people keep discovering, submitting, reviewing, and maintaining open-source app references."
+    />
+
+    <ul
+      class="m-0 grid list-none grid-cols-[repeat(auto-fill,minmax(72px,1fr))] gap-x-3 gap-y-5 p-0"
+    >
+      {
+        visible.map((c) => (
+          <li class="flex flex-col items-center gap-1.5 text-center">
+            <a
+              href={c.profileUrl}
+              target="_blank"
+              rel="noopener noreferrer"
+              aria-label={`${c.name ?? c.username} on GitHub`}
+              title={`${c.name ?? c.username}${typeof c.contributions === "number" ? ` · ${c.contributions} contributions` : ""}`}
+              class="block transition-opacity hover:opacity-80"
+            >
+              <img
+                src={c.avatarUrl}
+                alt={`${c.name ?? c.username} avatar`}
+                loading="lazy"
+                width="40"
+                height="40"
+                class="h-10 w-10 rounded-full border border-ink-200 bg-white object-cover dark:border-ink-800 dark:bg-ink-900"
+              />
+            </a>
+            <a
+              href={c.profileUrl}
+              target="_blank"
+              rel="noopener noreferrer"
+              title={c.name ?? c.username}
+              class="block max-w-full truncate text-2xs text-ink-500 transition-colors hover:text-ink-900 dark:text-ink-400 dark:hover:text-ink-100"
+            >
+              {c.username}
+            </a>
+          </li>
+        ))
+      }
+    </ul>
+
+    <div
+      class="mt-6 flex flex-wrap items-center gap-x-3 gap-y-2 text-2xs text-ink-500 dark:text-ink-400"
+    >
+      <span>
+        {isCapped
+          ? <>Showing {visible.length} of {total} contributors on the homepage.</>
+          : <>Showing all {total} contributors.</>}
+      </span>
+      <a
+        href="/contributors"
+        class="inline-flex items-center gap-1 font-medium text-ink-700 hover:text-ink-900 dark:text-ink-300 dark:hover:text-ink-100"
+      >
+        View all
+        {more > 0 ? ` (${more} more)` : ""} →
+      </a>
+      <span aria-hidden="true">·</span>
+      <a
+        href="https://github.com/tortuvshin/open-apps/graphs/contributors"
+        target="_blank"
+        rel="noopener noreferrer"
+        class="text-ink-700 hover:text-ink-900 dark:text-ink-300 dark:hover:text-ink-100"
+      >
+        GitHub contributors graph
+      </a>
+    </div>
+  </Container>
+</section>