@grove-dev/astro 0.1.4 → 0.2.2

package/src/components/AppsIndexRow.astro

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

package/src/components/AppsPagination.astro

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

package/src/components/CategoryGrid.astro

@@ -1,27 +1,96 @@
 ---
-import { slugForCategory } from "@grove-dev/ui";
+/**
+ * CategoryGrid — browse-by-category grid for the home page.
+ *
+ * The lighter sibling of StackGrid. Renders a card per category with
+ * name, blurb, and count. Generic: takes a list of plain
+ * `{ name, slug, blurb, count }` entries.
+ */
+
+interface CategoryEntry {
+  name: string;
+  slug: string;
+  blurb?: string;
+  count?: number;
+}
 
 interface Props {
-  categories: Array<{ name: string; count: number }>;
+  categories: CategoryEntry[];
+  /** List page base. */
+  pathPrefix?: string;
+  /** Extra class. */
+  class?: string;
+  /** Hide the section header. */
+  bare?: boolean;
 }
 
-const { categories } = Astro.props;
+const {
+  categories,
+  pathPrefix = "/",
+  class: className = "",
+  bare = false,
+} = Astro.props;
+
+function buildHref(slug: string): string {
+  const base = pathPrefix.replace(/\/$/, "");
+  return `${base}?category=${encodeURIComponent(slug)}`;
+}
 ---
 
-<section class="oc-section">
-  <div class="oc-section-header">
-    <div>
-      <p class="oc-eyebrow">Browse</p>
-      <h2>Categories</h2>
+<section
+  class:list={["grove-section", className]}
+  aria-labelledby={bare ? undefined : "grove-categorygrid-heading"}
+>
+  <div class="grove-container-wide mx-auto px-5 sm:px-7">
+    {!bare && (
+      <header class="mb-6 flex flex-col gap-2">
+        <h2
+          id="grove-categorygrid-heading"
+          class="m-0 text-[1.5rem] sm:text-[1.625rem] font-semibold tracking-tight text-ink-900 dark:text-ink-100"
+        >
+          Browse by category
+        </h2>
+        <p class="m-0 max-w-[60ch] text-[0.9375rem] text-ink-500 dark:text-ink-400">
+          What kind of project are you looking for? Browse by category to find
+          reference apps, libraries, demos, and more.
+        </p>
+      </header>
+    )}
+
+    <div class="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3">
+      {categories.map((c) => (
+        <a
+          href={buildHref(c.slug)}
+          class="grove-card grove-card-hover group flex flex-col gap-1.5 p-4 no-underline"
+          data-event="category_grid_click"
+          data-event-source="category_grid"
+        >
+          <div class="flex items-baseline justify-between gap-2">
+            <h3 class="m-0 text-[0.9375rem] font-semibold tracking-tight text-ink-900 group-hover:underline dark:text-ink-100">
+              {c.name}
+            </h3>
+            {typeof c.count === "number" && (
+              <span class="font-mono text-2xs text-ink-500 dark:text-ink-400">
+                {c.count}
+              </span>
+            )}
+          </div>
+          {c.blurb && (
+            <p class="m-0 line-clamp-2 text-[0.8125rem] leading-snug text-ink-500 dark:text-ink-400">
+              {c.blurb}
+            </p>
+          )}
+        </a>
+      ))}
     </div>
-    <a href="/projects">View all</a>
-  </div>
-  <div class="oc-category-grid">
-    {categories.map((category) => (
-      <a class="oc-category-card" href={`/categories/${slugForCategory(category.name)}`}>
-        <span>{category.name}</span>
-        <strong>{category.count}</strong>
-      </a>
-    ))}
   </div>
 </section>
+
+<style>
+  .line-clamp-2 {
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+  }
+</style>

package/src/components/ContributorsGrid.astro

@@ -0,0 +1,149 @@
+---
+/**
+ * ContributorsGrid — avatar grid for the home page.
+ *
+ * Renders a dense grid of contributor avatars with optional name and
+ * contribution count. Each tile links to the contributor's profile.
+ * No blueprint-specific terms — works for any "people" feed.
+ *
+ * Empty tiles are skipped. When the list is empty the entire section
+ * hides its body but keeps the header (so a "no contributors yet"
+ * state can be wired by a consumer via a slot).
+ */
+
+interface Contributor {
+  username: string;
+  name?: string;
+  avatarUrl?: string;
+  profileUrl?: string;
+  contributions?: number;
+}
+
+interface Props {
+  contributors: Contributor[];
+  /** Total count to display in the header (e.g. "1,234 contributors"). */
+  total?: number;
+  /** Optional view-all href rendered top-right. */
+  viewAllHref?: string;
+  viewAllLabel?: string;
+  title?: string;
+  description?: string;
+  class?: string;
+}
+
+const {
+  contributors,
+  total,
+  viewAllHref,
+  viewAllLabel = "View all",
+  title = "Top contributors",
+  description,
+  class: className = "",
+} = Astro.props;
+
+function fmt(n: number | undefined): string | null {
+  if (typeof n !== "number" || !Number.isFinite(n)) return null;
+  if (n >= 1000) {
+    const k = n / 1000;
+    return (k >= 10 ? Math.round(k).toString() : k.toFixed(1)) + "k";
+  }
+  return n.toString();
+}
+
+const visible = contributors
+  .filter((c) => c.username)
+  .slice(0, 24);
+---
+
+<section
+  class:list={["grove-section", className]}
+  aria-labelledby="grove-contributors-heading"
+>
+  <div class="grove-container-wide mx-auto px-5 sm:px-7">
+    <header class="mb-6 flex flex-wrap items-end justify-between gap-3">
+      <div>
+        <h2
+          id="grove-contributors-heading"
+          class="m-0 text-[1.5rem] sm:text-[1.625rem] font-semibold tracking-tight text-ink-900 dark:text-ink-100"
+        >
+          {title}
+          {typeof total === "number" && (
+            <span class="ml-2 font-mono text-[0.9375rem] font-normal text-ink-500 dark:text-ink-400">
+              ({fmt(total) ?? total})
+            </span>
+          )}
+        </h2>
+        {description && (
+          <p class="m-0 mt-1 max-w-[60ch] text-[0.9375rem] text-ink-500 dark:text-ink-400">
+            {description}
+          </p>
+        )}
+      </div>
+      {viewAllHref && (
+        <a
+          href={viewAllHref}
+          class="text-sm font-medium text-ink-500 hover:text-ink-900 dark:text-ink-400 dark:hover:text-ink-100"
+        >
+          {viewAllLabel} →
+        </a>
+      )}
+    </header>
+
+    {visible.length === 0 ? (
+      <p class="m-0 text-sm text-ink-500 dark:text-ink-400">
+        No contributors yet.
+      </p>
+    ) : (
+      <ul
+        class="m-0 grid list-none grid-cols-3 gap-3 p-0 sm:grid-cols-4 md:grid-cols-6 lg:grid-cols-8"
+        aria-label="Contributors"
+      >
+        {visible.map((c) => {
+          const href = c.profileUrl ?? `https://github.com/${c.username}`;
+          const avatar =
+            c.avatarUrl ??
+            `https://avatars.githubusercontent.com/${c.username}?v=4&s=80`;
+          return (
+            <li class="m-0 p-0">
+              <a
+                href={href}
+                target="_blank"
+                rel="noopener noreferrer"
+                class="group flex flex-col items-center gap-1.5 p-2 text-center no-underline"
+                data-event="contributor_click"
+                data-event-source="contributors_grid"
+              >
+                <img
+                  src={avatar}
+                  alt={c.name ?? c.username}
+                  width="48"
+                  height="48"
+                  loading="lazy"
+                  decoding="async"
+                  class="h-12 w-12 rounded-full border border-ink-200 object-cover dark:border-ink-800"
+                />
+                <span class="line-clamp-1 text-2xs font-medium text-ink-700 group-hover:text-ink-900 dark:text-ink-300 dark:group-hover:text-ink-100">
+                  {c.name ?? c.username}
+                </span>
+                {typeof c.contributions === "number" && (
+                  <span class="font-mono text-2xs text-ink-400">
+                    {fmt(c.contributions) ?? c.contributions}
+                  </span>
+                )}
+              </a>
+            </li>
+          );
+        })}
+      </ul>
+    )}
+  </div>
+</section>
+
+<style>
+  .line-clamp-1 {
+    display: -webkit-box;
+    -webkit-line-clamp: 1;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+  }
+</style>

package/src/components/DecisionRow.astro

@@ -0,0 +1,89 @@
+---
+/**
+ * DecisionRow — a single row of the curation decision table.
+ *
+ * Used on the "Decisions" admin/curation page. Renders the record
+ * name, the current visibility/tier, the cleanup-candidate flag,
+ * and links to the source repo and detail page.
+ *
+ * Generic: takes a `Resource` and reads the standard fields. No
+ * blueprint-specific copy.
+ */
+
+import type { Resource, ProjectRecord } from "@grove-dev/core";
+import { statusDisplay, prettySlug } from "../lib/display";
+import { getOwnerAndRepoFromRepoUrl } from "../lib/repo";
+
+interface Props {
+  record: Resource;
+  detailHref?: string;
+  class?: string;
+}
+
+const { record, detailHref, class: className = "" } = Astro.props;
+
+const isProject = record.kind === "project";
+const project = isProject ? (record as ProjectRecord) : null;
+
+const name =
+  record.kind === "resource"
+    ? (record as { title: string }).title
+    : (record as { name: string }).name;
+
+const repoUrl = project?.repoUrl;
+const ownerRepo = repoUrl ? getOwnerAndRepoFromRepoUrl(repoUrl) : null;
+
+const visibility = project?.health?.visibility ?? "keep";
+const tier = project?.health?.tier;
+const status = project?.health?.status;
+const cleanup = project?.health?.cleanupCandidate;
+---
+
+<tr
+  class:list={["grove-decision-row align-top text-sm", className]}
+  data-record-slug={record.slug}
+>
+  <td class="px-3 py-2">
+    <div class="flex flex-col gap-0.5">
+      <a
+        href={detailHref ?? `/${record.slug}`}
+        class="font-medium text-ink-900 hover:underline dark:text-ink-100"
+      >
+        {name}
+      </a>
+      {ownerRepo && (
+        <span class="text-2xs text-ink-500 dark:text-ink-400">
+          @{ownerRepo.owner}/{ownerRepo.repo}
+        </span>
+      )}
+    </div>
+  </td>
+  <td class="px-3 py-2 font-mono text-2xs text-ink-700 dark:text-ink-300">
+    {prettySlug(visibility)}
+  </td>
+  <td class="px-3 py-2 font-mono text-2xs text-ink-700 dark:text-ink-300">
+    {tier ? prettySlug(tier) : "—"}
+  </td>
+  <td class="px-3 py-2 font-mono text-2xs text-ink-700 dark:text-ink-300">
+    {status ? statusDisplay(status) : "—"}
+  </td>
+  <td class="px-3 py-2 text-2xs">
+    {cleanup ? (
+      <span class="grove-badge grove-badge-stale">cleanup</span>
+    ) : (
+      <span class="text-ink-400">—</span>
+    )}
+  </td>
+  <td class="px-3 py-2 text-right">
+    {repoUrl && (
+      <a
+        href={repoUrl}
+        target="_blank"
+        rel="noopener noreferrer"
+        class="text-2xs text-ink-500 hover:text-ink-900 dark:text-ink-400 dark:hover:text-ink-100"
+      >
+        repo →
+      </a>
+    )}
+  </td>
+</tr>