@grove-dev/astro 0.2.16 → 0.2.19

package/templates/default/src/data/records.ts

@@ -24,14 +24,20 @@
  *  blueprints — `project-directory` (default), `resource-hub`, and
  *  `ecosystem-map` — without per-blueprint forks.
  *
- *  When the JSON files are missing (e.g. before `grove generate`
- *  runs, or in a fresh scaffold with no records) this module falls
- *  back to empty arrays so the Astro build still succeeds — every
- *  page must render a graceful "no records yet" state.
+ *  JSON imports are static at the top of this module so Vite
+ *  resolves them at build time. A fresh scaffold that has not yet
+ *  run `grove generate` will fail the build with a clear Vite
+ *  resolution error, which is the correct signal — a build that
+ *  silently renders an empty directory hides real config mistakes.
  */
+import fullPayload from "../../data/generated/records.full.json";
+import indexPayload from "../../data/generated/records.index.json";
+import siteConfigPayload from "../../data/generated/site-config.json";
 import { existsSync, readFileSync } from "node:fs";
 import { fileURLToPath } from "node:url";
 import { dirname, resolve } from "node:path";
+import { marked } from "marked";
+import sanitizeHtml from "sanitize-html";
 import type {
   ProjectRecord,
   ResourceRecord,
@@ -76,87 +82,26 @@ interface SiteConfigPayload {
   name?: string;
 }
 
-function loadGenerated<T>(filename: string, parser: (raw: string) => T): T {
-  // The Astro build resolves JSON imports from `src/data/*.ts`, but
-  // we want to be defensive about the order of operations: a fresh
-  // scaffold runs `astro build` without first running
-  // `grove generate`, in which case the JSON file does not exist.
-  // Resolve the path relative to this module's URL, then fall back
-  // to an empty list.
-  try {
-    const here = dirname(fileURLToPath(import.meta.url));
-    const candidates = [
-      resolve(here, "..", "..", "data", "generated", filename),
-      resolve(here, "..", "..", "..", "data", "generated", filename),
-      resolve(process.cwd(), "data", "generated", filename),
-    ];
-    const path = candidates.find((p) => existsSync(p));
-    if (!path) return parser("");
-    return parser(readFileSync(path, "utf8"));
-  } catch {
-    return parser("");
-  }
-}
+const fullRecordsRaw: Resource[] = (fullPayload as FullPayload).records ?? [];
+const indexRecordsRaw: IndexRecord[] = (indexPayload as IndexPayload).records ?? [];
+const siteConfigRaw: SiteConfigPayload = siteConfigPayload as SiteConfigPayload;
 
-const fullRecordsRaw: Resource[] = loadGenerated(
-  "records.full.json",
-  (raw) => {
-    if (!raw) return [];
-    try {
-      const parsed = JSON.parse(raw) as FullPayload;
-      return (parsed.records ?? []) as Resource[];
-    } catch {
-      return [];
-    }
-  },
-);
-
-const indexRecordsRaw: IndexRecord[] = loadGenerated(
-  "records.index.json",
-  (raw) => {
-    if (!raw) return [];
-    try {
-      const parsed = JSON.parse(raw) as IndexPayload;
-      return (parsed.records ?? []) as IndexRecord[];
-    } catch {
-      return [];
-    }
-  },
-);
-
-const siteConfigRaw: SiteConfigPayload = loadGenerated(
-  "site-config.json",
-  (raw) => {
-    if (!raw) return {};
-    try {
-      return JSON.parse(raw) as SiteConfigPayload;
-    } catch {
-      return {};
-    }
-  },
-);
-
-/**
- *  Full records (all visibility). Use this for the detail page,
- *  where you need `content`, `bestFor`, `whyListed`, `caveats`,
- *  the full `github.repository` block, etc.
- */
+/** Full records (every record, all visibility). Use this for the
+ *  detail page (where you need `content`, `bestFor`, `whyListed`,
+ *  `caveats`, the full `github.repository` block, ...) and for
+ *  the V0-published alias page at `/apps/[recordSlug]` that
+ *  enumerates all records for `getStaticPaths`. */
 export const fullRecords: Resource[] = fullRecordsRaw;
 
-/**
- *  Index-payload records (visible only). Use this for the list
- *  page and any home-page sectioning, where you only need the
- *  slim search-index fields.
- */
-export const records: IndexRecord[] =
-  indexRecordsRaw.length > 0 ? indexRecordsRaw : [];
+/** Index-payload records (visible-only slim shape). */
+export const records: IndexRecord[] = indexRecordsRaw;
 
-/** Project-kind records only — slim shape, ready for list pages. */
+/** Resource-kind records — slim shape. */
+/** Project-kind records — slim shape, ready for list pages. */
 export const projects = records.filter(
   (r): r is IndexProjectRecord => r.kind === "project",
 );
 
-/** Resource-kind records — slim shape. */
 export const resources = records.filter(
   (r): r is IndexResourceRecord => r.kind === "resource",
 );
@@ -278,3 +223,96 @@ export const items: IndexRecord[] = (() => {
 export const fullItems: Resource[] = (() => {
   return fullRecords.filter((r) => r.kind === blueprintKind);
 })();
+
+// ──────────────────────────────────────────────────────────────────────
+// Markdown content rendering (sanitized)
+// ──────────────────────────────────────────────────────────────────────
+//
+// `record.content` is a path to a markdown file under
+// `content/records/<slug>.md` (see the project schema in
+// @grove-dev/core). The previous page-level implementation
+// imported `node:fs`, called `marked.parse` on the result, and
+// inlined the raw HTML through `set:html` — a live XSS footgun
+// the moment a record body is added. This module owns the read
+// + render + sanitize pipeline at build time:
+//
+//   1. Resolve the path relative to this module's URL (or
+//      `process.cwd` for tool-driven runs).
+//   2. Read the file (gracefully absent → `null`).
+//   3. `marked.parse` to HTML.
+//   4. `sanitize-html` with a conservative allowlist that
+//      matches the elements the `grove-prose` CSS actually
+//      styles (h1-h4, p, ul/ol/li, pre/code, blockquote, a).
+//      Links are restricted to safe schemes and external links
+//      are hardened to `rel="noopener noreferrer" target="_blank"`.
+//      javascript: / data: URIs are blocked; event handlers,
+//      iframes, and scripts are stripped.
+//
+// The result is computed once at module load (per record) and
+// memoized in `contentHtmlBySlug`. Pages call
+// `getContentHtml(recordSlug)` to receive the sanitized HTML or
+// `null` if the record has no `content` field / the file is
+// missing. No page module needs to import `node:fs` anymore.
+
+const here = dirname(fileURLToPath(import.meta.url));
+function resolveContentPath(contentPath: string): string {
+  const candidates = [
+    resolve(here, "..", "..", contentPath),
+    resolve(here, "..", "..", "..", contentPath),
+    resolve(process.cwd(), contentPath),
+  ];
+  return candidates.find((p) => existsSync(p)) ?? "";
+}
+
+const contentHtmlBySlug = new Map<string, string>();
+for (const r of fullRecords) {
+  if (r.kind !== "project") continue;
+  const projectRecord = r as ProjectRecord;
+  if (!projectRecord.content) continue;
+  const path = resolveContentPath(projectRecord.content);
+  if (!path) continue;
+  try {
+    const text = readFileSync(path, "utf8");
+    // `async: false` keeps the call synchronous so we can populate
+    // the map at module-load time. (marked v18 defaults to
+    // Promise-returning; v9-17 also support this flag.)
+    const rawHtml = marked.parse(text, { async: false }) as string;
+    const safeHtml = sanitizeHtml(rawHtml, {
+      allowedTags: [
+        "h1", "h2", "h3", "h4",
+        "p", "br", "hr",
+        "ul", "ol", "li",
+        "strong", "em", "b", "i", "u", "s", "del",
+        "a", "code", "pre", "blockquote",
+      ],
+      allowedAttributes: {
+        a: ["href", "title", "rel", "target"],
+      },
+      allowedSchemes: ["http", "https", "mailto", "tel"],
+      allowedSchemesByTag: { a: ["http", "https", "mailto", "tel"] },
+      transformTags: {
+        a: sanitizeHtml.simpleTransform("a", {
+          rel: "noopener noreferrer",
+          target: "_blank",
+        }, true),
+      },
+      disallowedTagsMode: "discard",
+    });
+    contentHtmlBySlug.set(r.slug, safeHtml);
+  } catch {
+    // Missing / unreadable / parse-failed content: skip the record
+    // rather than render broken HTML. The page treats `null` as
+    // "no Notes section".
+  }
+}
+
+/**
+ *  Pre-sanitized HTML for a record's `content` markdown body, or
+ *  `null` if the record has no `content` field / the file is
+ *  missing / parse failed. Safe to feed straight into
+ *  `set:html` — the render and sanitize steps already ran at
+ *  module load.
+ */
+export function getContentHtml(slug: string): string | null {
+  return contentHtmlBySlug.get(slug) ?? null;
+}

package/templates/default/src/pages/[slug]/[recordSlug].astro

@@ -27,6 +27,7 @@ import {
   resourceBySlug,
   entityBySlug,
   indexSlug,
+  getContentHtml,
 } from "../../data/records";
 import BaseLayout from "@grove-dev/astro/layouts/BaseLayout.astro";
 import Icon from "@grove-dev/astro/components/Icon.astro";
@@ -35,24 +36,17 @@ 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";
-import { readFileSync, existsSync } from "node:fs";
-import { fileURLToPath } from "node:url";
-import { dirname, resolve } from "node:path";
+import type { LabelId } from "@grove-dev/astro";
 import type { ProjectRecord } from "@grove-dev/core";
-import { marked } from "marked";
 
-export async function getStaticPaths() {
+export 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 */
-  }
+  // is read from the static site-config import at the top of this
+  // file (Vite resolves the JSON at build time). This template
+  // ships with the `project-directory` blueprint, so the slug is
+  // always `projects`; swapping in a different blueprint means
+  // changing the blueprint config that drives this value.
+  const dirSlug = siteConfig.blueprintConfig?.routeSlug ?? "projects";
   return fullRecords.map((record) => ({
     params: { slug: dirSlug, recordSlug: record.slug },
   }));
@@ -107,25 +101,27 @@ const tags = record.tags ?? [];
 const healthStatus = proj?.health?.status;
 const healthLabel = healthStatus ? statusDisplay(healthStatus) : null;
 
+// ── Badge class lookup ────────────────────────────────────────────
+// The previous code interpolated `LabelId` straight into the class
+// string (`grove-badge-{l}`), which Astro renders as a literal class
+// name — every badge became `grove-badge-{l}` regardless of value.
+// Map each known id to its stable CSS class in the package
+// stylesheet. Unknown ids (e.g. legacy "featured") fall back to the
+// neutral `.grove-badge` look instead of producing broken classes.
+const labelClassMap: Record<LabelId, string> = {
+  new: "grove-badge-new",
+  hot: "grove-badge-hot",
+  mature: "grove-badge-mature",
+  featured: "grove-badge",
+};
+
 // ── Optional content markdown (record.content is a path under
 // content/records/<slug>.md) ────────────────────────────────────
-let contentHtml: string | null = null;
-if (isProject && proj?.content) {
-  const here = dirname(fileURLToPath(import.meta.url));
-  const candidates = [
-    resolve(here, "..", "..", "..", proj.content),
-    resolve(process.cwd(), proj.content),
-  ];
-  const contentPath = candidates.find((p) => existsSync(p));
-  if (contentPath) {
-    try {
-      const text = readFileSync(contentPath, "utf8");
-      contentHtml = await marked.parse(text);
-    } catch {
-      contentHtml = null;
-    }
-  }
-}
+// The read + marked.parse + sanitize-html pipeline lives in
+// `data/records.ts` and runs once at module load. The page just
+// looks up the pre-sanitized HTML by record slug; no node:fs
+// import needed here.
+const contentHtml: string | null = isProject ? getContentHtml(recordSlug) : null;
 
 // ── Detail-page decision-signal data (5 sections) ────────────
 // Hoist out of the template body so the JSX stays free of
@@ -296,7 +292,7 @@ if (isProject && proj) {
               </span>
             )}
             {curationLabels.map((l) => (
-              <span class="grove-badge grove-badge-{l}" title={`Curated: ${labelDisplay(l) ?? l}`}>
+              <span class={`grove-badge ${labelClassMap[l as LabelId] ?? ""}`} title={`Curated: ${labelDisplay(l) ?? l}`}>
                 {labelDisplay(l) ?? prettySlug(l)}
               </span>
             ))}