@grove-dev/astro 0.1.5 → 0.2.5

package/src/components/ItemCard.astro

@@ -1,41 +1,317 @@
 ---
-import type { CuratedItem, HealthEntry } from "@grove-dev/core";
-import HealthBadge from "./HealthBadge.astro";
+/**
+ * ItemCard — generic project/resource/entity card.
+ *
+ * The most-decorated card in the showcase. Used on home (curated
+ * sections), the list page (cards-only views), and the search
+ * results. Renders:
+ *
+ *   - Logo/avatar with initials fallback (logoUrl -> GitHub owner
+ *     avatar -> 2-letter initials).
+ *   - Owner / repo link (when `repoUrl` is github.com).
+ *   - Stack + platform chips (first 3, then "+N" overflow).
+ *   - Optional curated mark (label badge) — e.g. "Featured", "New".
+ *   - Health badge (Active / Mature / Stale / Archived / ...).
+ *   - License + star count + last-updated date.
+ *   - Two CTAs: "View repo" (links.github if present, else repoUrl)
+ *     and "Details" (the page link).
+ *
+ * Generic: takes any `Resource` (`kind: "project" | "resource" |
+ * "entity"`). For "project" we read the project-style fields
+ * (`repoUrl`, `logoUrl`, `stacks`, `platforms`, `github`,
+ * `curation`, `health`); for other kinds we degrade gracefully to
+ * the minimal view.
+ *
+ * Index-payload-friendly: when the consumer passes an
+ * `IndexProjectRecord` (the slim list-page shape), the component
+ * reads the projected fields directly — `github.stars` /
+ * `github.pushedAt` / `github.license` — rather than the raw
+ * `github.repository` block.
+ */
+import type {
+  Resource,
+  ProjectRecord,
+  HealthStatus,
+  IndexProjectRecord,
+} from "@grove-dev/core";
+import { getOwnerAndRepoFromRepoUrl, getOwnerAvatarUrl } from "../lib/repo";
+import { formatRelative, formatStars } from "../lib/format";
+import { statusDisplay, prettySlug, labelDisplay } from "../lib/display";
 
 interface Props {
-  item: CuratedItem;
-  health?: HealthEntry;
+  record: Resource | IndexProjectRecord;
+  /** Detail page href. */
+  href: string;
+  /** When true, show owner/repo below the title. Default true. */
+  showOwner?: boolean;
+  /** When true, render the stack/platform chip row. Default true. */
+  showChips?: boolean;
+  /** When true, render the curated label badge row. Default true. */
+  showLabel?: boolean;
+  /** When true, render the metadata strip (license/stars/updated). */
+  showMeta?: boolean;
+  /** Extra class on the outer <article>. */
+  class?: string;
 }
 
-const { item, health } = Astro.props;
-const href = `/projects/${item.id}`;
-const tags = item.taxonomy.tags.slice(0, 4);
+const {
+  record,
+  href,
+  showOwner = true,
+  showChips = true,
+  showLabel = true,
+  showMeta = true,
+  class: className = "",
+} = Astro.props;
+
+// Project-specific extraction. The `isIndex` branch reads the slim
+// fields from `toIndexRecord`; the full branch reads the raw
+// `github.repository` block for sites that want max fidelity.
+const isIndex = "github" in record && record.github !== undefined
+  && (record as IndexProjectRecord).github !== undefined
+  && (record.github as { fullName?: string })?.fullName !== undefined;
+const project = record.kind === "project" ? (record as ProjectRecord | IndexProjectRecord) : null;
+
+const name =
+  record.kind === "resource"
+    ? (record as { title: string }).title
+    : (record as { name: string }).name;
+const description = record.description ?? "";
+const tags = (record.tags ?? []).slice(0, 4);
+const repoUrl = (project as ProjectRecord | IndexProjectRecord | null)?.repoUrl;
+const logoUrl = (project as ProjectRecord | IndexProjectRecord | null)?.logoUrl;
+const stacks = (project?.stacks ?? (project?.stack ? [project.stack] : [])) as string[];
+const platforms = (project?.platforms ?? []) as string[];
+const healthStatus: HealthStatus | undefined = project?.health?.status;
+const labels = record.curation?.labels ?? [];
+// Slim (IndexProjectRecord.github) → full (ProjectRecord.github.repository).
+const indexGh = isIndex ? (project as IndexProjectRecord).github : null;
+const fullGh = !isIndex ? (project as ProjectRecord | null)?.github?.repository : null;
+const stars = indexGh?.stars ?? fullGh?.stargazers_count;
+const licenseSpdx = indexGh?.license ?? fullGh?.license?.spdx_id ?? null;
+const pushedAt = indexGh?.pushedAt ?? fullGh?.pushed_at;
+const githubUrl =
+  repoUrl ?? (record.links as { github?: string } | undefined)?.github;
+
+// Logo fallback chain
+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();
+
+// Chips: 3 stacks/platforms, then overflow count
+function withOverflow(
+  items: string[],
+): { shown: string[]; overflow: number } {
+  const shown = items.filter(Boolean).slice(0, 3);
+  const overflow = Math.max(0, items.filter(Boolean).length - shown.length);
+  return { shown, overflow };
+}
+const stackChips = withOverflow(stacks);
+const platformChips = withOverflow(platforms);
+
+// Curated mark
+const curatedLabel = labels[0] ?? null;
+
+// Health class hook (for badge variant). `project` is the union of
+// ProjectRecord | IndexProjectRecord, and both share a `health` field
+// with the same shape, so a single optional-chain read covers both
+// shapes — no isIndex branch is needed for the status itself.
+function healthBadgeClass(s: HealthStatus | undefined): string {
+  switch (s) {
+    case "mature":
+    case "active":
+      return "grove-badge-new";
+    case "stale":
+    case "inactive":
+      return "grove-badge-stale";
+    case "archived":
+    case "unavailable":
+      return "grove-badge-hot";
+    default:
+      return "";
+  }
+}
+const healthLabel = healthStatus ? statusDisplay(healthStatus) : null;
+
+const starsLabel = formatStars(stars);
+const updatedLabel = formatRelative(pushedAt);
 ---
 
-<article class="oc-card">
-  <div class="oc-card-header">
-    <div>
-      <h2 class="oc-card-title">
-        <a href={href}>{item.name}</a>
-      </h2>
-      <p class="oc-card-category">{item.taxonomy.category}</p>
+<article
+  class:list={["grove-card grove-card-hover grove-item-card p-4", className]}
+  data-record-slug={record.slug}
+  data-record-kind={record.kind}
+  data-record-category={record.category}
+  data-record-stacks={stacks.join(",")}
+  data-record-platforms={platforms.join(",")}
+>
+  <div class="flex items-start gap-3">
+    <div class="grove-item-card__logo flex-shrink-0">
+      {avatarSrc ? (
+        <img
+          src={avatarSrc}
+          alt=""
+          width="40"
+          height="40"
+          loading="lazy"
+          decoding="async"
+          class="h-10 w-10 rounded-md border border-ink-200 object-contain bg-white dark:border-ink-800 dark:bg-ink-950"
+        />
+      ) : (
+        <span
+          class="inline-flex h-10 w-10 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 dark:text-ink-200"
+          aria-hidden="true"
+        >
+          {initials || "·"}
+        </span>
+      )}
+    </div>
+
+    <div class="min-w-0 flex-1">
+      <div class="flex flex-wrap items-baseline gap-2">
+        <h2 class="m-0 text-[1rem] font-semibold leading-tight tracking-tight text-ink-900 dark:text-ink-100">
+          <a href={href} class="text-inherit no-underline hover:underline">
+            {name}
+          </a>
+        </h2>
+        {showLabel && curatedLabel && (
+          <span
+            class:list={["grove-badge", `grove-badge-${curatedLabel}`]}
+            title={`Curated: ${labelDisplay(curatedLabel) ?? curatedLabel}`}
+          >
+            {labelDisplay(curatedLabel) ?? prettySlug(curatedLabel)}
+          </span>
+        )}
+        {healthLabel && (
+          <span class:list={["grove-badge", healthBadgeClass(healthStatus)]}>
+            {healthLabel}
+          </span>
+        )}
+      </div>
+
+      {showOwner && ownerRepo && (
+        <p class="m-0 mt-0.5 text-2xs 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>
+      )}
+
+      {description && (
+        <p class="m-0 mt-1.5 line-clamp-2 text-[0.8125rem] leading-snug text-ink-500 dark:text-ink-400">
+          {description}
+        </p>
+      )}
     </div>
-    <HealthBadge status={health?.health.status} />
-  </div>
-  <p class="oc-card-description">{item.description}</p>
-  <div class="oc-card-meta">
-    {health?.github?.stars != null && <span>{health.github.stars.toLocaleString()} stars</span>}
-    {health?.github?.license && <span>{health.github.license}</span>}
-    {health?.github?.language && <span>{health.github.language}</span>}
-  </div>
-  <div class="oc-card-actions">
-    <a href={`/projects/${item.id}`}>Details</a>
-    {item.links.github && <a href={item.links.github}>GitHub</a>}
-    {item.links.docs && <a href={item.links.docs}>Docs</a>}
   </div>
-  {tags.length > 0 && (
-    <ul class="oc-tags" aria-label="Tags">
-      {tags.map((tag) => <li>{tag}</li>)}
-    </ul>
+
+  {showChips && (stackChips.shown.length > 0 || platformChips.shown.length > 0) && (
+    <div class="mt-3 flex flex-wrap items-center gap-1.5">
+      {stackChips.shown.map((s) => (
+        <span class="grove-badge" title={`Stack: ${s}`}>{s}</span>
+      ))}
+      {stackChips.overflow > 0 && (
+        <span class="grove-badge" title={`${stackChips.overflow} more stacks`}>
+          +{stackChips.overflow}
+        </span>
+      )}
+      {platformChips.shown.map((p) => (
+        <span class="grove-badge" title={`Platform: ${p}`}>{p}</span>
+      ))}
+      {platformChips.overflow > 0 && (
+        <span
+          class="grove-badge"
+          title={`${platformChips.overflow} more platforms`}
+        >
+          +{platformChips.overflow}
+        </span>
+      )}
+      {tags.length > 0 && tags.map((t) => <span class="grove-badge">{t}</span>)}
+    </div>
   )}
+
+  {showMeta && (starsLabel || licenseSpdx || updatedLabel !== "—") && (
+    <dl
+      class="mt-3 flex flex-wrap items-center gap-x-3 gap-y-1 text-2xs text-ink-500 dark:text-ink-400"
+      aria-label="Project signals"
+    >
+      {starsLabel && (
+        <div class="flex items-center gap-1">
+          <dt class="sr-only">Stars</dt>
+          <dd class="m-0 font-mono">{starsLabel}</dd>
+          <span aria-hidden="true">★</span>
+        </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>
+      )}
+    </dl>
+  )}
+
+  <div class="mt-4 flex flex-wrap items-center gap-2">
+    <a
+      href={href}
+      class="grove-btn grove-btn-outline"
+      data-event="card_details_click"
+      data-event-source="item_card"
+      data-event-app={record.slug}
+    >
+      Details
+    </a>
+    {githubUrl && (
+      <a
+        href={githubUrl}
+        target="_blank"
+        rel="noopener noreferrer"
+        class="grove-btn grove-btn-ghost"
+        data-event="card_repo_click"
+        data-event-source="item_card"
+        data-event-app={record.slug}
+      >
+        View repo
+      </a>
+    )}
+  </div>
 </article>
+
+<style>
+  .grove-item-card {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+    height: 100%;
+  }
+  .line-clamp-2 {
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+  }
+</style>

package/src/components/MinimalAbout.astro

@@ -0,0 +1,82 @@
+---
+/**
+ * MinimalAbout — 3 short points + title, used on the about page.
+ *
+ * A trimmed-down sibling of `WhyThisExists` with a different layout
+ * (no icons, no "0X" counter, vertical list) for text-heavy pages.
+ *
+ * Generic: every point comes through props.
+ */
+
+interface AboutPoint {
+  title: string;
+  body: string;
+}
+
+interface Props {
+  points?: AboutPoint[];
+  title?: string;
+  description?: string;
+  class?: string;
+}
+
+const {
+  points,
+  title = "About this directory",
+  description,
+  class: className = "",
+} = Astro.props;
+
+const defaultPoints: AboutPoint[] = [
+  {
+    title: "Curated, not scraped",
+    body: "Every entry is hand-checked. If something here, it's because someone looked at the source, ran the build, and decided it was worth your time.",
+  },
+  {
+    title: "Plain text all the way down",
+    body: "Records live in plain YAML, content in plain Markdown, and the static output in plain HTML. No database, no JavaScript framework, no CDN with sticky sessions.",
+  },
+  {
+    title: "Free to fork, free to extend",
+    body: "This whole site is one repo. If you want your own copy, fork it. If you want to add a record, open a PR. The directory is the community.",
+  },
+];
+
+const items = points && points.length > 0 ? points : defaultPoints;
+---
+
+<section class:list={["grove-section", className]}>
+  <div class="grove-container-narrow mx-auto px-5 sm:px-7">
+    <header class="mb-6 flex flex-col gap-2">
+      <h2 class="m-0 text-[1.5rem] sm:text-[1.625rem] font-semibold tracking-tight text-ink-900 dark:text-ink-100">
+        {title}
+      </h2>
+      {description && (
+        <p class="m-0 text-[0.9375rem] text-ink-500 dark:text-ink-400">
+          {description}
+        </p>
+      )}
+    </header>
+
+    <ol class="m-0 flex list-none flex-col gap-5 p-0">
+      {items.map((p, i) => (
+        <li class="flex gap-4">
+          <span
+            aria-hidden="true"
+            class="flex h-7 w-7 flex-shrink-0 items-center justify-center rounded-md border border-ink-200 bg-ink-50 font-mono text-2xs text-ink-500 dark:border-ink-800 dark:bg-ink-900 dark:text-ink-400"
+          >
+            0{i + 1}
+          </span>
+          <div>
+            <h3 class="m-0 text-[1rem] font-semibold tracking-tight text-ink-900 dark:text-ink-100">
+              {p.title}
+            </h3>
+            <p class="m-0 mt-1 text-[0.9375rem] leading-relaxed text-ink-500 dark:text-ink-400">
+              {p.body}
+            </p>
+          </div>
+        </li>
+      ))}
+    </ol>
+  </div>
+</section>

package/src/components/OriginalCollection.astro

@@ -0,0 +1,116 @@
+---
+/**
+ * OriginalCollection — legacy lineage card.
+ *
+ * Renders a single wide card that links out to the project's origin
+ * repository, with stars/forks/contributors stats. Used on home and
+ * about pages to give visitors a way to find the original curated
+ * collection this directory descends from.
+ *
+ * Generic: takes plain `stats` and a `repoUrl`. No blueprint or
+ * site-specific copy.
+ */
+
+interface OriginStats {
+  stars?: number;
+  forks?: number;
+  contributors?: number;
+  description?: string;
+}
+
+interface Props {
+  repoUrl: string;
+  repoLabel?: string;
+  stats?: OriginStats;
+  title?: string;
+  description?: string;
+  class?: string;
+}
+
+const {
+  repoUrl,
+  repoLabel = "View on GitHub",
+  stats = {},
+  title = "A growing list, forked from the original",
+  description = "This directory descends from an earlier curated collection. The original still lives on — same shape, same spirit, fresh data.",
+  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 hasStats =
+  stats.stars !== undefined ||
+  stats.forks !== undefined ||
+  stats.contributors !== undefined;
+---
+
+<section class:list={["grove-section", className]}>
+  <div class="grove-container mx-auto px-5 sm:px-7">
+    <div
+      class="grove-card flex flex-col gap-4 p-6 sm:flex-row sm:items-center sm:justify-between"
+    >
+      <div class="flex flex-col gap-2">
+        <span class="text-2xs font-medium uppercase tracking-wider text-ink-500 dark:text-ink-400">
+          Origin
+        </span>
+        <h2 class="m-0 text-[1.25rem] font-semibold tracking-tight text-ink-900 dark:text-ink-100">
+          {title}
+        </h2>
+        <p class="m-0 max-w-2xl text-[0.875rem] text-ink-500 dark:text-ink-400">
+          {description}
+        </p>
+        {stats.description && (
+          <p class="m-0 max-w-2xl text-[0.8125rem] text-ink-500 dark:text-ink-400">
+            {stats.description}
+          </p>
+        )}
+        {hasStats && (
+          <dl
+            class="mt-2 flex flex-wrap items-center gap-x-4 gap-y-1 text-2xs text-ink-500 dark:text-ink-400"
+            aria-label="Original repository signals"
+          >
+            {stats.stars !== undefined && (
+              <div class="flex items-center gap-1">
+                <dd class="m-0 font-mono">{fmt(stats.stars) ?? stats.stars}</dd>
+                <dt>stars</dt>
+              </div>
+            )}
+            {stats.forks !== undefined && (
+              <div class="flex items-center gap-1">
+                <dd class="m-0 font-mono">{fmt(stats.forks) ?? stats.forks}</dd>
+                <dt>forks</dt>
+              </div>
+            )}
+            {stats.contributors !== undefined && (
+              <div class="flex items-center gap-1">
+                <dd class="m-0 font-mono">
+                  {fmt(stats.contributors) ?? stats.contributors}
+                </dd>
+                <dt>contributors</dt>
+              </div>
+            )}
+          </dl>
+        )}
+      </div>
+      <div class="flex flex-shrink-0 items-center gap-2">
+        <a
+          href={repoUrl}
+          target="_blank"
+          rel="noopener noreferrer"
+          class="grove-btn grove-btn-primary"
+          data-event="original_collection_click"
+          data-event-source="original_collection"
+        >
+          {repoLabel} →
+        </a>
+      </div>
+    </div>
+  </div>
+</section>

package/src/components/RecordSection.astro

@@ -0,0 +1,88 @@
+---
+/**
+ * RecordSection — a titled "lens" of records on the home page.
+ *
+ * Renders a SectionHeader + a 3-column grid of `ItemCard`s, with an
+ * optional "View all" link in the header. Generic: passes the
+ * record list + per-record href through to `ItemCard`.
+ *
+ * The component is the workhorse of the home page — featured, hot,
+ * new, mature, "by category", "by stack" — all of them are just a
+ * `RecordSection` with a different `id` + `title` + sliced list.
+ *
+ * V1: items are `IndexProjectRecord`s (the slim list-page shape).
+ * Other blueprints (`resource-hub`, `ecosystem-map`) can pass their
+ * own `IndexResourceRecord` / `IndexEntityRecord` arrays; the
+ * component does not branch on the kind.
+ */
+
+import type { IndexProjectRecord } from "@grove-dev/core";
+import ItemCard from "./ItemCard.astro";
+import SectionHeader from "../layouts/SectionHeader.astro";
+
+interface Props {
+  /** Used as the section id (so deep links work) and a stable key. */
+  id: string;
+  title: string;
+  description?: string;
+  items: IndexProjectRecord[];
+  /** Detail page href builder. */
+  hrefFor: (record: IndexProjectRecord) => string;
+  /** Optional "View all" link rendered in the header. */
+  viewAllHref?: string;
+  viewAllLabel?: string;
+  /** Optional eyebrow. */
+  eyebrow?: string;
+  /** Empty-state copy. */
+  emptyLabel?: string;
+  /** Extra class on the outer <section>. */
+  class?: string;
+}
+
+const {
+  id,
+  title,
+  description,
+  items,
+  hrefFor,
+  viewAllHref,
+  viewAllLabel = "View all",
+  eyebrow,
+  emptyLabel = "No records yet.",
+  class: className = "",
+} = Astro.props;
+---
+
+<section
+  id={id}
+  class:list={["grove-section", className]}
+  aria-labelledby={`${id}-heading`}
+>
+  <div class="grove-container-wide mx-auto px-5 sm:px-7">
+    <SectionHeader
+      eyebrow={eyebrow}
+      title={title}
+      description={description}
+    >
+      {viewAllHref && (
+        <a
+          slot="actions"
+          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>
+      )}
+    </SectionHeader>
+
+    {items.length === 0 ? (
+      <p class="m-0 text-sm text-ink-500 dark:text-ink-400">{emptyLabel}</p>
+    ) : (
+      <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
+        {items.map((record) => (
+          <ItemCard record={record} href={hrefFor(record)} />
+        ))}
+      </div>
+    )}
+  </div>
+</section>