@grove-dev/astro 0.4.0 → 0.5.0-next.0

package/src/components/CollectionTeaser.astro

@@ -1,18 +1,23 @@
 ---
 /**
  * CollectionTeaser — homepage-friendly subset of `CollectionIndex`.
- * Renders a horizontal grid of 2-3 collection cards with a "View all"
- * link in the header. Generic: no blueprint copy.
+ *
+ * Thin wrapper that defaults `limit` to 3 and sets homepage-friendly
+ * "View all collections" link + copy. For custom card counts or
+ * different copy, use `CollectionIndex` directly with explicit
+ * `limit` and `viewAllHref` props.
  */
-import Container from "../layouts/Container.astro";
-import type { CollectionTeaserModel } from "../server/collections.js";
+import CollectionIndex from "./CollectionIndex.astro";
+import type { CollectionIndexModel } from "../server/collections.js";
 
 interface Props {
-  model: CollectionTeaserModel;
+  model: CollectionIndexModel;
   title?: string;
   description?: string;
   viewAllHref?: string;
   viewAllLabel?: string;
+  /** Cap the number of cards rendered. Default: 3. */
+  limit?: number;
   class?: string;
 }
 
@@ -22,60 +27,17 @@ const {
   description = "Hand-picked and auto-generated groupings of related items.",
   viewAllHref = "/collections/",
   viewAllLabel = "View all collections",
-  class: className = "",
+  limit = 3,
+  class: className,
 } = Astro.props;
 ---
 
-<section class={`py-12 sm:py-16 ${className}`}>
-  <Container>
-    <div class="mb-6 flex flex-wrap items-end justify-between gap-3">
-      <div>
-        <span class="text-2xs font-medium uppercase tracking-wider text-ink-500 dark:text-ink-400">
-          Collections
-        </span>
-        <h2 class="m-0 mt-1 text-[1.5rem] sm:text-[1.625rem] font-semibold tracking-tight text-ink-900 dark:text-ink-100">
-          {title}
-        </h2>
-        <p class="m-0 mt-2 max-w-[60ch] text-[0.9375rem] text-ink-500 dark:text-ink-400">
-          {description}
-        </p>
-      </div>
-      {viewAllHref && (
-        <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>
-
-    {model.collections.length === 0 ? (
-      <p class="m-0 text-sm text-ink-500 dark:text-ink-400">
-        No collections yet.
-      </p>
-    ) : (
-      <div class="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3">
-        {model.collections.map((c) => (
-          <a
-            href={c.url}
-            class="flex flex-col gap-2 rounded-md border border-ink-200 bg-white p-5 transition-colors hover:border-ink-400 dark:border-ink-800 dark:bg-ink-950 dark:hover:border-ink-600"
-          >
-            <span class="text-2xs font-medium uppercase tracking-wider text-ink-500 dark:text-ink-400">
-              {c.kind === "curated" ? "Curated" : "Generated"}
-            </span>
-            <span class="text-[1.0625rem] font-semibold tracking-tight text-ink-900 dark:text-ink-100">
-              {c.title}
-            </span>
-            <span class="text-[0.875rem] text-ink-500 dark:text-ink-400">
-              {c.description}
-            </span>
-            <span class="mt-auto pt-2 text-2xs font-medium text-ink-500 dark:text-ink-400">
-              {c.count} {c.count === 1 ? "item" : "items"} →
-            </span>
-          </a>
-        ))}
-      </div>
-    )}
-  </Container>
-</section>
+<CollectionIndex
+  model={model}
+  title={title}
+  description={description}
+  viewAllHref={viewAllHref}
+  viewAllLabel={viewAllLabel}
+  limit={limit}
+  class={className}
+/>

package/src/components/EditorialSummary.astro

@@ -0,0 +1,57 @@
+---
+/**
+ * EditorialSummary.astro
+ *
+ * Compact card at the top of the record body that surfaces the
+ * curator's "Best for" and "Consider before using" notes. Renders
+ * nothing when both arrays are empty.
+ *
+ * This is the editorial half of the page: the sidebar (right) is
+ * auto-generated facts; the summary (left) is human-authored
+ * curation.
+ */
+interface Props {
+  bestFor: string[];
+  caveats: string[];
+}
+
+const { bestFor, caveats } = Astro.props;
+const hasAny = bestFor.length > 0 || caveats.length > 0;
+---
+
+{hasAny && (
+  <section class="grove-editorial mb-10 rounded-[var(--radius-lg)] border border-ink-200 bg-background p-5 dark:border-ink-800" aria-label="Editorial summary">
+    <div class="grid grid-cols-1 gap-5 sm:grid-cols-2">
+      {bestFor.length > 0 && (
+        <div>
+          <h2 class="m-0 flex items-center gap-1.5 text-2xs font-semibold uppercase tracking-wider text-emerald-700 dark:text-emerald-400">
+            <svg viewBox="0 0 16 16" width="11" height="11" 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>
+            Best for
+          </h2>
+          <ul class="mt-2 m-0 flex list-none flex-col gap-1.5 p-0 text-sm text-ink-700 dark:text-ink-200">
+            {bestFor.map((b) => (
+              <li class="leading-relaxed">{b}</li>
+            ))}
+          </ul>
+        </div>
+      )}
+      {caveats.length > 0 && (
+        <div>
+          <h2 class="m-0 flex items-center gap-1.5 text-2xs font-semibold uppercase tracking-wider text-amber-700 dark:text-amber-400">
+            <svg viewBox="0 0 16 16" width="11" height="11" aria-hidden="true" fill="currentColor">
+              <path d="M8 1.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13zM0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm9 3a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm-.25-6.25a.75.75 0 0 0-1.5 0v3.5a.75.75 0 0 0 .4 1.04l1.6.8a.75.75 0 1 0 .67-1.34l-1.17-.59V4.75z" />
+            </svg>
+            Consider before using
+          </h2>
+          <ul class="mt-2 m-0 flex list-none flex-col gap-1.5 p-0 text-sm text-ink-700 dark:text-ink-200">
+            {caveats.map((c) => (
+              <li class="leading-relaxed">{c}</li>
+            ))}
+          </ul>
+        </div>
+      )}
+    </div>
+  </section>
+)}

package/src/components/IndexRow.astro

@@ -1,6 +1,6 @@
 ---
 import type { IndexRecord } from "@grove-dev/core";
-import Icon from "./Icon.astro";
+import StackPlatformChips from "./StackPlatformChips.astro";
 import { formatRelative, formatStars, getOwnerAndRepoFromRepoUrl, getOwnerAvatarUrl, projectStackIds, statusDisplay } from "@grove-dev/astro";
 
 interface Props {
@@ -75,10 +75,10 @@ const curated = Boolean(item.curation?.reviewed || (project && (project.bestFor.
   </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 min-h-5 items-center justify-center gap-1 rounded-full border border-transparent bg-secondary px-2 py-0.5 align-middle text-xs font-medium leading-none text-secondary-foreground"><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 min-h-5 items-center justify-center gap-1 rounded-full border border-transparent bg-secondary px-2 py-0.5 align-middle text-xs font-medium leading-none text-secondary-foreground !bg-muted !text-muted-foreground"><Icon name={stack} category="stack" size={11} />{stack}</span>)}</div>
-    </div>
+    <StackPlatformChips
+      stack={stacks[0]}
+      platform={platforms}
+    />
   )}
 
   <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">

package/src/components/ItemCard.astro

@@ -24,7 +24,7 @@
  * pattern is to pass `routeSlug` (or `href` directly).
  */
 import type { IndexRecord, Resource, ProjectRecord, IndexProjectRecord } from "@grove-dev/core";
-import Icon from "./Icon.astro";
+import StackPlatformChips from "./StackPlatformChips.astro";
 import { getOwnerAndRepoFromRepoUrl, getOwnerAvatarUrl, projectStackIds } from "@grove-dev/astro";
 import { formatStars, formatRelative } from "@grove-dev/astro";
 import { statusDisplay } from "@grove-dev/astro";
@@ -279,34 +279,17 @@ const category = (item as { category?: string }).category;
     </div>
   )}
 
-  {/* Platform + stack chips, pushed to the bottom. */}
+  {/* Platform + stack chips, pushed to the bottom. Shared with
+      `IndexRow` / `CollectionRow` so the labelled-row pattern is
+      consistent across all card-shaped components. */}
   {showChips && (
-    <div class="mt-auto flex flex-col gap-1.5">
-      {visiblePlatforms.length > 0 && (
-        <div class="flex flex-wrap items-center gap-1.5">
-          {visiblePlatforms.map((p) => (
-            <span class="inline-flex min-h-5 items-center justify-center gap-1 rounded-full border border-transparent bg-secondary px-2 py-0.5 align-middle text-xs font-medium leading-none text-secondary-foreground">
-              <Icon name={p} category="platform" size={11} />
-              <span>{p}</span>
-            </span>
-          ))}
-          {platformOverflow > 0 && (
-            <span class="inline-flex min-h-5 items-center justify-center gap-1 rounded-full border border-transparent bg-secondary px-2 py-0.5 align-middle text-xs font-medium leading-none text-secondary-foreground text-ink-400">+{platformOverflow}</span>
-          )}
-        </div>
-      )}
-      {visibleStacks.length > 0 && (
-        <div class="flex flex-wrap items-center gap-1.5">
-          {visibleStacks.map((s) => (
-            <span class="inline-flex min-h-5 items-center justify-center gap-1 rounded-full border border-transparent bg-secondary px-2 py-0.5 align-middle text-xs font-medium leading-none text-secondary-foreground !bg-muted !text-muted-foreground">
-              <Icon name={s} category="stack" size={11} />
-              <span>{s}</span>
-            </span>
-          ))}
-          {stackOverflow > 0 && (
-            <span class="inline-flex min-h-5 items-center justify-center gap-1 rounded-full border border-transparent bg-secondary px-2 py-0.5 align-middle text-xs font-medium leading-none text-secondary-foreground !bg-muted !text-muted-foreground text-ink-400">+{stackOverflow}</span>
-          )}
-        </div>
+    <div class="mt-auto">
+      <StackPlatformChips
+        stack={visibleStacks[0]}
+        platform={visiblePlatforms}
+      />
+      {stackOverflow > 0 && (
+        <span class="text-2xs text-ink-400 dark:text-ink-600">+{stackOverflow} more stacks</span>
       )}
     </div>
   )}

package/src/components/LanguageBreakdown.astro

@@ -0,0 +1,63 @@
+---
+/**
+ * LanguageBreakdown.astro
+ *
+ * Visual GitHub-Linguist-style code-composition bar plus a legend
+ * showing each language's percentage. Reads from the record's
+ * pre-computed `languages` array (top-5 by bytes) and `langColor`
+ * (in @grove-dev/core).
+ *
+ * Used inside the Activity sidebar card.
+ */
+import { langColor } from "@grove-dev/core";
+
+interface LangEntry {
+  name: string;
+  bytes: number;
+}
+
+interface Props {
+  /** Top-N languages as `[name, bytes]` tuples (already sorted). */
+  languages: ReadonlyArray<readonly [string, number]>;
+  /** Total bytes across all languages (denominator). */
+  totalBytes: number;
+  /** Optional max segments to show. */
+  maxSegments?: number;
+}
+
+const { languages, totalBytes, maxSegments = 5 } = Astro.props;
+
+const segments = languages.slice(0, maxSegments).map(([name, bytes]) => {
+  const pct = Math.round((bytes / Math.max(1, totalBytes)) * 100);
+  return { name, pct, color: langColor(name) };
+});
+---
+
+{segments.length > 0 && (
+  <div class="grove-langbreak mt-4 border-t border-ink-100 pt-4 dark:border-ink-800">
+    <h3 class="m-0 text-2xs font-semibold uppercase tracking-wider text-ink-500 dark:text-ink-400">
+      Code composition
+    </h3>
+    <div class="grove-langbreak-bar mt-2 flex h-2 w-full overflow-hidden rounded-full bg-ink-100 dark:bg-ink-800">
+      {segments.map((s) => (
+        <span
+          class="grove-langbreak-seg h-full"
+          style={`width:${s.pct}%;background-color:${s.color}`}
+          title={`${s.name}: ${s.pct}%`}
+        />
+      ))}
+    </div>
+    <ul class="grove-langbreak-list mt-2 flex flex-wrap gap-x-3 gap-y-1 text-2xs text-ink-500 dark:text-ink-400">
+      {segments.map((s) => (
+        <li class="inline-flex items-center gap-1">
+          <span
+            class="inline-block h-2 w-2 rounded-sm"
+            style={`background-color:${s.color}`}
+          />
+          <span class="font-mono">{s.name}</span>
+          <span>{s.pct}%</span>
+        </li>
+      ))}
+    </ul>
+  </div>
+)}

package/src/components/MarkdownBody.astro

@@ -0,0 +1,37 @@
+---
+/**
+ * MarkdownBody.astro
+ *
+ * Renders a record's pre-sanitized Markdown body (`getContentHtml`)
+ * inside the package's `.grove-prose` stylesheet.
+ *
+ * The renderer itself lives in `@grove-dev/astro/server/directory.ts`
+ * (`renderMarkdownToSafeHtml`) and runs once per record at module
+ * load; this component is the presentation half of that pipeline.
+ *
+ * Props:
+ *   - `recordSlug`: the **record's** slug (not the route prefix).
+ *     `getContentHtml` is keyed by record slug — `detail.slug` is the
+ *     route prefix (e.g. "projects"), `detail.record.slug` is the
+ *     record (e.g. "crewai").
+ *   - `fallback`: optional content to render when the record has no
+ *     body (e.g. an empty-state message).
+ */
+import { getContentHtml } from "../server/directory.js";
+
+interface Props {
+  /** Record slug — looks up the pre-rendered HTML in the module map. */
+  recordSlug: string;
+  /** Optional fallback content for records without a body. */
+  fallback?: string;
+}
+
+const { recordSlug, fallback } = Astro.props;
+const html = getContentHtml(recordSlug);
+---
+
+{html ? (
+  <div class="grove-prose" set:html={html} />
+) : fallback ? (
+  <p class="grove-prose text-ink-500 dark:text-ink-400">{fallback}</p>
+) : null}

package/src/components/RecordHeader.astro

@@ -0,0 +1,156 @@
+---
+/**
+ * RecordHeader.astro
+ *
+ * Compact project-identity header used at the top of every record
+ * detail page. The header carries:
+ *   - avatar / initials
+ *   - pills row (category + curation labels + "Curated" check +
+ *     optional activity badge)
+ *   - record name + owner/repo line
+ *   - short description
+ *   - GitHub + Homepage CTAs
+ *
+ * Tags + activity metadata are surfaced separately (sidebar), so
+ * the header stays narrow on mobile and doesn't compete with the
+ * two-column layout below.
+ *
+ * Tone classes for the activity badge are static `[data-activity-tone]`
+ * selectors in `styles.css` — Tailwind purges any classes built from
+ * dynamic strings, so the package ships the rules statically and
+ * the badge's `data-activity-tone` attribute picks one at runtime.
+ */
+import type { RecordDetailModel } from "../server/models.js";
+
+interface Props {
+  detail: RecordDetailModel;
+}
+
+const { detail } = Astro.props;
+const {
+  record,
+  repoUrl,
+  homepageUrl,
+  ownerRepo,
+  avatarSrc,
+  initials,
+  curationLabels,
+  activityBadge,
+  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>
+  )}
+
+  <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">
+      {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 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">
+          <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>
+      )}
+      {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"
+        >
+          <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>
+            <span class="relative inline-flex h-1.5 w-1.5 rounded-full bg-current"></span>
+          </span>
+          {activityBadge.label}
+        </span>
+      )}
+    </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>
+    )}
+
+    {description && (
+      <p class="m-0 mt-3 max-w-[68ch] text-base leading-relaxed text-ink-700 dark:text-ink-200">
+        {description}
+      </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="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>
+</header>