@grove-dev/astro 0.4.1 → 0.5.0-next.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@grove-dev/astro",
-  "version": "0.4.1",
+  "version": "0.5.0-next.2",
   "type": "module",
   "description": "Composable Astro UI, data adapters, and integration for Grove directories.",
   "license": "MIT",
@@ -54,8 +54,9 @@
     "astro": "^7.1.3",
     "marked": "^18.0.0",
     "sanitize-html": "^2.17.5",
+    "shiki": "^1.29.2",
     "yaml": "^2.9.0",
-    "@grove-dev/core": "0.4.1"
+    "@grove-dev/core": "0.5.0-next.2"
   },
   "peerDependencies": {
     "astro": "^6.0.0 || ^7.0.0"

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,7 +1,7 @@
 ---
 import type { IndexRecord } from "@grove-dev/core";
 import StackPlatformChips from "./StackPlatformChips.astro";
-import { formatRelative, formatStars, getOwnerAndRepoFromRepoUrl, getOwnerAvatarUrl, projectStackIds, statusDisplay } from "@grove-dev/astro";
+import { formatRelative, formatStars, getOwnerAndRepoFromRepoUrl, getOwnerAvatarUrl, projectStackIds, statusDisplay, licenseDisplay } from "@grove-dev/astro";
 
 interface Props {
   record: IndexRecord;
@@ -71,7 +71,7 @@ const curated = Boolean(item.curation?.reviewed || (project && (project.bestFor.
   <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 dark:text-ink-400">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 dark:text-ink-400">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 dark:text-ink-400">License</dt><dd class="font-mono text-ink-700 dark:text-ink-300">{license ?? "—"}</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">{license ? licenseDisplay(license) : "—"}</dd></div>
   </dl>
 
   {showChips && (platforms.length > 0 || stacks.length > 0) && (

package/src/components/ItemCard.astro

@@ -28,6 +28,7 @@ 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";
+import { licenseDisplay } from "@grove-dev/astro";
 
 type CardRecord = IndexRecord | Resource | ProjectRecord | IndexProjectRecord;
 
@@ -273,7 +274,7 @@ const category = (item as { category?: string }).category;
       )}
       {license && (
         <span class="inline-flex items-center gap-1" title={`License: ${license}`}>
-          <span class="font-mono uppercase tracking-wide text-[10px]">{license}</span>
+          <span class="font-mono uppercase tracking-wide text-[10px]">{licenseDisplay(license)}</span>
         </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,187 @@
+---
+/**
+ * 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,
+  summary,
+  sourceDescription,
+  screenshots,
+  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>
+    )}
+
+    {summary && (
+      <p class="m-0 mt-3 max-w-[68ch] text-base leading-relaxed text-ink-700 dark:text-ink-200">
+        {summary}
+      </p>
+    )}
+    {sourceDescription && sourceDescription !== summary && (
+      <p class="m-0 mt-2 max-w-[68ch] text-sm leading-relaxed text-ink-500 dark:text-ink-400">
+        <span class="text-2xs font-semibold uppercase tracking-wider">From the project's README: </span>
+        {sourceDescription}
+      </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>
+  {screenshots && screenshots.length > 0 && (
+    <div class="mt-6 grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3" aria-label="Screenshots">
+      {screenshots.map((shot) => (
+        <figure class="m-0 overflow-hidden rounded-[var(--radius-lg)] border border-ink-200 bg-muted dark:border-ink-800">
+          <img
+            src={shot.src}
+            alt={shot.alt}
+            loading="lazy"
+            decoding="async"
+            width={shot.width}
+            height={shot.height}
+            class="block h-auto w-full object-cover"
+          />
+          {shot.source && (
+            <figcaption class="px-3 py-1.5 text-2xs text-ink-500 dark:text-ink-400">
+              Source: <a href={shot.source} target="_blank" rel="noopener noreferrer" class="text-inherit no-underline hover:underline">{shot.source.replace(/^https?:\/\//, "")}</a>
+            </figcaption>
+          )}
+        </figure>
+      ))}
+    </div>
+  )}
+</header>