@grove-dev/astro 0.2.10 → 0.2.14

package/templates/default/src/pages/{projects/[slug].astro → [slug]/[recordSlug].astro}

@@ -1,9 +1,9 @@
 ---
 /**
- * Detail page — one record at a time.
+ *  Detail page — one record at a time.
  *
- * Layout (top to bottom):
- *   1. Breadcrumb                    — back to /projects (or blueprint slug)
+ *  Layout (top to bottom):
+ *   1. Breadcrumb                    — back to the directory index
  *   2. AppCard-style header          — logo + name + owner + description + CTAs
  *   3. ScoreBars                     — 5-dimension + overall score block
  *   4. BestFor / WhyListed / Caveats — 3-column curation grid
@@ -14,14 +14,24 @@
  *                                      body) when present
  *   9. JSON-LD SoftwareSourceCode    — for SEO + AI crawlers
  *
- * The page is generic across the 3 record kinds (project / resource
- * / entity) — non-project fields simply render nothing.
+ *  Generic across the 3 record kinds (project / resource / entity) —
+ *  non-project fields simply render nothing. The URL is dynamic on
+ *  both `[slug]` (blueprint route, e.g. `projects`/`resources`/
+ *  `entities`) and `[recordSlug]` (the record slug), so a single page
+ *  file serves every blueprint and every record.
  */
 import siteConfig from "../../../data/generated/site-config.json";
-import { fullRecords, projectBySlug, resourceBySlug, entityBySlug, indexSlug } from "../../data/records";
+import {
+  fullRecords,
+  projectBySlug,
+  resourceBySlug,
+  entityBySlug,
+  indexSlug,
+} from "../../data/records";
 import BaseLayout from "@grove-dev/astro/layouts/BaseLayout.astro";
 import Icon from "@grove-dev/astro/components/Icon.astro";
 import ScoreBars from "@grove-dev/astro/components/ScoreBars.astro";
+import CurationGrid from "@grove-dev/astro/components/CurationGrid.astro";
 import { getOwnerAndRepoFromRepoUrl, getOwnerAvatarUrl } from "@grove-dev/astro";
 import { formatRelative, formatStars } from "@grove-dev/astro";
 import { statusDisplay, prettySlug, labelDisplay } from "@grove-dev/astro";
@@ -29,15 +39,27 @@ import { readFileSync, existsSync } from "node:fs";
 import { fileURLToPath } from "node:url";
 import { dirname, resolve } from "node:path";
 import type { ProjectRecord } from "@grove-dev/core";
+import { marked } from "marked";
 
-export function getStaticPaths() {
+export async function getStaticPaths() {
+  // Walk every record and emit a path for it. The directory slug
+  // (`projects` / `resources` / `entities`) is taken from the
+  // blueprint config so a `resource-hub` blueprint produces
+  // `/resources/<slug>` URLs without any per-blueprint fork.
+  let dirSlug = "projects";
+  try {
+    const raw = await import("../../../data/generated/site-config.json");
+    dirSlug = raw.default?.blueprintConfig?.routeSlug ?? "projects";
+  } catch {
+    /* not present */
+  }
   return fullRecords.map((record) => ({
-    params: { slug: record.slug },
+    params: { slug: dirSlug, recordSlug: record.slug },
   }));
 }
 
-const slug = indexSlug();
-const recordSlug = Astro.params.slug ?? "";
+const slug = Astro.params.slug ?? indexSlug();
+const recordSlug = Astro.params.recordSlug ?? "";
 const project = projectBySlug(recordSlug);
 const resource = resourceBySlug(recordSlug);
 const entity = entityBySlug(recordSlug);
@@ -55,6 +77,7 @@ const name =
 
 const title = `${name} — ${siteConfig.name}`;
 const description = record.description ?? `${name} on ${siteConfig.name}`;
+const itemSingular = siteConfig.blueprintConfig?.labelSingular ?? record.kind;
 
 const repoUrl = proj?.repoUrl ?? (record.links as { github?: string } | undefined)?.github ?? "";
 const homepageUrl = record.links?.website ?? "";
@@ -96,25 +119,50 @@ if (isProject && proj?.content) {
   const contentPath = candidates.find((p) => existsSync(p));
   if (contentPath) {
     try {
-      // Cheap markdown → HTML using a minimal renderer would be
-      // nice, but we don't want to pull another dep into the
-      // template. Render the file as a <pre> for now so the body
-      // still surfaces on the page. Consumers can replace this
-      // with a real markdown pipeline (`marked`, `remark`, ...)
-      // by overriding the `[slug].astro` page.
       const text = readFileSync(contentPath, "utf8");
-      contentHtml = text
-        .replace(/&/g, "&amp;")
-        .replace(/</g, "&lt;")
-        .replace(/>/g, "&gt;");
+      contentHtml = await marked.parse(text);
     } catch {
       contentHtml = null;
     }
   }
 }
 
-// ── JSON-LD (SoftwareSourceCode) for project-kind records ──────
-let jsonLd: Record<string, unknown> | null = null;
+// ── Detail-page decision-signal data (5 sections) ────────────
+// Hoist out of the template body so the JSX stays free of
+// complex TypeScript type assertions.
+type MonthlyCommit = number | { month: string; commits: number };
+type ProjectExtras = {
+  github?: {
+    activity?: { monthlyCommits?: MonthlyCommit[] };
+    files?: Record<string, boolean>;
+    languages?: Record<string, number>;
+  };
+  health?: { status?: string; tier?: string };
+};
+const extras = record as ProjectExtras;
+const monthlyCommits = (extras.github?.activity?.monthlyCommits ?? []).map(
+  (it): { month: string; commits: number } =>
+    typeof it === "number" ? { month: "", commits: it } : { month: it.month ?? "", commits: it.commits ?? 0 },
+);
+const maxMonthlyCommits = Math.max(1, ...monthlyCommits.map((i) => i.commits));
+const contributionFiles = extras.github?.files ?? {};
+const contributionLabels: Record<string, string> = {
+  readme: "README",
+  contributing: "Contributing",
+  security: "Security",
+  issueTemplates: "Issue templates",
+  pullRequestTemplate: "PR template",
+};
+const contributionSignals = (Object.keys(contributionLabels) as Array<keyof typeof contributionLabels>)
+  .map((k) => ({ key: k, label: contributionLabels[k], ok: contributionFiles[k] }))
+  .filter((s) => s.ok !== undefined);
+const languages = extras.github?.languages
+  ? Object.entries(extras.github.languages).sort((a, b) => b[1] - a[1]).slice(0, 5)
+  : [];
+const totalLanguageBytes = Math.max(1, languages.reduce((sum, [, b]) => sum + b, 0));
+
+// ── Kind-aware JSON-LD ─────────────────────────────────────────
+let jsonLd: Record<string, unknown>;
 if (isProject && proj) {
   jsonLd = {
     "@context": "https://schema.org",
@@ -129,6 +177,33 @@ if (isProject && proj) {
       ? { "@type": "Organization", name: ownerRepo.owner, url: `https://github.com/${ownerRepo.owner}` }
       : undefined,
   };
+} else if (record.kind === "resource") {
+  const resourceSchemaType: Record<string, string> = {
+    article: "Article",
+    book: "Book",
+    course: "Course",
+    podcast: "PodcastSeries",
+    video: "VideoObject",
+  };
+  jsonLd = {
+    "@context": "https://schema.org",
+    "@type": resourceSchemaType[record.type] ?? "CreativeWork",
+    name,
+    description: record.description || undefined,
+    url: homepageUrl || undefined,
+    author: record.author ? { "@type": "Person", name: record.author } : undefined,
+    datePublished: record.publishedAt || undefined,
+  };
+} else {
+  jsonLd = {
+    "@context": "https://schema.org",
+    "@type": record.type === "person" ? "Person" : "Organization",
+    name,
+    description: record.description || undefined,
+    url: homepageUrl || undefined,
+    foundingDate: record.founded || undefined,
+    location: record.location || undefined,
+  };
 }
 ---
 
@@ -137,7 +212,7 @@ if (isProject && proj) {
   description={description}
   site={siteConfig}
   type="article"
-  jsonLd={jsonLd ?? undefined}
+  jsonLd={jsonLd}
   submitHref="/submit"
   submitLabel={`Submit ${name}`}
 >
@@ -267,45 +342,13 @@ if (isProject && proj) {
       )}
 
       {/* ── BestFor / WhyListed / Caveats grid ──────────────── */}
-      {isProject && (bestFor.length > 0 || whyListed.length > 0 || caveats.length > 0) && (
-        <section class="mt-8 grid grid-cols-1 gap-4 md:grid-cols-3" aria-label="Curation notes">
-          {bestFor.length > 0 && (
-            <div class="grove-card p-5">
-              <h3 class="m-0 text-sm font-semibold uppercase tracking-wider text-ink-500 dark:text-ink-400">
-                Best for
-              </h3>
-              <ul class="mt-3 m-0 flex list-none flex-col gap-1.5 p-0">
-                {bestFor.map((b) => (
-                  <li class="text-sm text-ink-700 dark:text-ink-200">— {b}</li>
-                ))}
-              </ul>
-            </div>
-          )}
-          {whyListed.length > 0 && (
-            <div class="grove-card p-5">
-              <h3 class="m-0 text-sm font-semibold uppercase tracking-wider text-ink-500 dark:text-ink-400">
-                Why listed
-              </h3>
-              <ul class="mt-3 m-0 flex list-none flex-col gap-1.5 p-0">
-                {whyListed.map((w) => (
-                  <li class="text-sm text-ink-700 dark:text-ink-200">— {w}</li>
-                ))}
-              </ul>
-            </div>
-          )}
-          {caveats.length > 0 && (
-            <div class="grove-card p-5">
-              <h3 class="m-0 text-sm font-semibold uppercase tracking-wider text-ink-500 dark:text-ink-400">
-                Caveats
-              </h3>
-              <ul class="mt-3 m-0 flex list-none flex-col gap-1.5 p-0">
-                {caveats.map((c) => (
-                  <li class="text-sm text-ink-700 dark:text-ink-200">— {c}</li>
-                ))}
-              </ul>
-            </div>
-          )}
-        </section>
+      {isProject && (
+        <CurationGrid
+          bestFor={bestFor}
+          whyListed={whyListed}
+          caveats={caveats}
+          class="mt-8"
+        />
       )}
 
       {/* ── GitHub signals dl ────────────────────────────────── */}
@@ -372,6 +415,132 @@ if (isProject && proj) {
         </section>
       )}
 
+      {/* ── Decision signals (3-col) ──────────────────────────── */}
+      {isProject && github && (
+        <section class="mt-8 grid grid-cols-1 gap-4 lg:grid-cols-3" aria-label="Decision signals">
+          {/* Repository health 3-col card */}
+          <div class="grove-card p-5">
+            <h3 class="m-0 text-[1rem] font-semibold tracking-tight text-ink-900 dark:text-ink-100">
+              Repository health
+            </h3>
+            <dl class="mt-4 grid gap-3 text-sm">
+              <div class="flex items-center justify-between gap-3">
+                <dt class="text-ink-500 dark:text-ink-400">Status</dt>
+                <dd class="font-medium text-ink-900 dark:text-ink-100">
+                  {healthLabel ?? "—"}
+                </dd>
+              </div>
+              <div class="flex items-center justify-between gap-3">
+                <dt class="text-ink-500 dark:text-ink-400">Stars</dt>
+                <dd class="font-mono text-ink-900 dark:text-ink-100">
+                  {starsLabel ?? "—"}
+                </dd>
+              </div>
+              <div class="flex items-center justify-between gap-3">
+                <dt class="text-ink-500 dark:text-ink-400">Forks</dt>
+                <dd class="font-mono text-ink-900 dark:text-ink-100">
+                  {forks}
+                </dd>
+              </div>
+              <div class="flex items-center justify-between gap-3">
+                <dt class="text-ink-500 dark:text-ink-400">Open issues</dt>
+                <dd class="font-mono text-ink-900 dark:text-ink-100">
+                  {github?.open_issues_count ?? "—"}
+                </dd>
+              </div>
+              {licenseSpdx && (
+                <div class="flex items-center justify-between gap-3">
+                  <dt class="text-ink-500 dark:text-ink-400">License</dt>
+                  <dd class="font-mono text-ink-900 dark:text-ink-100">{licenseSpdx}</dd>
+                </div>
+              )}
+            </dl>
+          </div>
+
+          {/* Activity bar chart */}
+          <div class="grove-card p-5">
+            <h3 class="m-0 text-[1rem] font-semibold tracking-tight text-ink-900 dark:text-ink-100">
+              Activity
+            </h3>
+            {monthlyCommits.length > 0 ? (
+              <figure class="mt-4 m-0">
+                <div
+                  class="flex h-28 items-end gap-1.5"
+                  role="img"
+                  aria-label="Monthly commits over the last 12 months"
+                >
+                  {monthlyCommits.map((item) => (
+                    <div class="flex min-w-0 flex-1 flex-col items-center gap-1">
+                      <div
+                        class="w-full rounded-sm bg-ink-700 dark:bg-ink-200"
+                        style={`height: ${Math.max(8, Math.round((item.commits / maxMonthlyCommits) * 96))}px`}
+                        title={`${item.month || "month"}: ${item.commits} commits`}
+                      />
+                      <span class="max-w-full truncate text-[10px] text-ink-500 dark:text-ink-400">
+                        {item.month ? item.month.slice(5) : item.commits}
+                      </span>
+                    </div>
+                  ))}
+                </div>
+                <figcaption class="sr-only">
+                  Monthly commit count over the last 12 months
+                </figcaption>
+              </figure>
+            ) : (
+              <p class="mt-4 m-0 text-sm text-ink-500 dark:text-ink-400">
+                Monthly commit history is not yet populated for this {itemSingular}.
+              </p>
+            )}
+          </div>
+
+          {/* Contribution readiness chips */}
+          <div class="grove-card p-5">
+            <h3 class="m-0 text-[1rem] font-semibold tracking-tight text-ink-900 dark:text-ink-100">
+              Contribution readiness
+            </h3>
+            {contributionSignals.length > 0 ? (
+              <ul class="mt-4 m-0 grid list-none gap-2 p-0 text-sm">
+                {contributionSignals.map((signal) => (
+                  <li class="flex items-center justify-between gap-3">
+                    <span class="text-ink-700 dark:text-ink-200">{signal.label}</span>
+                    <span class={signal.ok ? "text-emerald-700 dark:text-emerald-400" : "text-ink-400 dark:text-ink-600"}>
+                      {signal.ok ? "Found" : "Missing"}
+                    </span>
+                  </li>
+                ))}
+              </ul>
+            ) : (
+              <p class="mt-4 m-0 text-sm text-ink-500 dark:text-ink-400">
+                Contribution files have not been synced yet.
+              </p>
+            )}
+          </div>
+        </section>
+      )}
+
+      {/* ── Language mix ─────────────────────────────────────── */}
+      {isProject && languages.length > 0 && (
+        <section class="mt-4 grove-card p-5">
+          <h3 class="m-0 text-[1rem] font-semibold tracking-tight text-ink-900 dark:text-ink-100">
+            Language mix
+          </h3>
+          <dl class="mt-4 grid gap-2 text-sm">
+            {languages.map(([language, bytes]) => {
+              const pct = Math.round((bytes / totalLanguageBytes) * 100);
+              return (
+                <div class="grid grid-cols-[8rem_minmax(0,1fr)_3rem] items-center gap-3">
+                  <dt class="truncate text-ink-700 dark:text-ink-200">{language}</dt>
+                  <dd class="h-2 overflow-hidden rounded-sm bg-ink-200 dark:bg-ink-800">
+                    <div class="h-full bg-ink-700 dark:bg-ink-200" style={`width: ${pct}%`} />
+                  </dd>
+                  <dd class="text-right font-mono text-2xs text-ink-500 dark:text-ink-400">{pct}%</dd>
+                </div>
+              );
+            })}
+          </dl>
+        </section>
+      )}
+
       {/* ── Stack + Platform chips ───────────────────────────── */}
       {isProject && (stacks.length > 0 || platforms.length > 0) && (
         <section class="mt-8" aria-labelledby="stacks-heading">
@@ -464,15 +633,16 @@ if (isProject && proj) {
         </section>
       )}
 
-      {/* ── Content markdown (record.content → <pre> for now) ── */}
+      {/* ── Content markdown ─────────────────────────────────── */}
       {contentHtml && (
         <section class="mt-8" aria-labelledby="content-heading">
           <h2 id="content-heading" class="m-0 text-lg font-semibold tracking-tight text-ink-900 dark:text-ink-100">
             Notes
           </h2>
-          <pre
-            class="mt-4 overflow-x-auto rounded-md border border-ink-200 bg-ink-50 p-4 text-xs leading-relaxed text-ink-800 dark:border-ink-800 dark:bg-ink-900/60 dark:text-ink-200"
-          ><code>{contentHtml}</code></pre>
+          <div
+            class="grove-prose mt-4"
+            set:html={contentHtml}
+          />
         </section>
       )}
     </div>