@grove-dev/astro 0.1.0

package/src/components/ProjectDetail.astro

@@ -0,0 +1,166 @@
+---
+import type { CuratedItem, HealthEntry, Decision } from "@grove-dev/core";
+import HealthBadge from "./HealthBadge.astro";
+import ScoreBars from "./ScoreBars.astro";
+import { SCORE_LABELS, SCORE_REASONING } from "@grove-dev/ui";
+
+interface Props {
+  item: CuratedItem;
+  health?: HealthEntry;
+  decision?: Decision;
+}
+
+const { item, health, decision } = Astro.props;
+const links = Object.entries(item.links).filter(([, href]) => Boolean(href));
+const channels = item.distribution.channels ?? [];
+const languages = health?.github?.languages
+  ? Object.entries(health.github.languages).sort((a, b) => b[1] - a[1]).slice(0, 5)
+  : [];
+const totalLanguageBytes = Math.max(1, languages.reduce((sum, [, bytes]) => sum + bytes, 0));
+const files = health?.github?.files ?? {};
+const fileSignals = [
+  ["README", files.readme],
+  ["Contributing", files.contributing],
+  ["Security", files.security],
+  ["Issue templates", files.issueTemplates],
+  ["PR template", files.pullRequestTemplate],
+].filter(([, ok]) => ok !== undefined);
+const monthly = health?.github?.monthlyCommits ?? [];
+const maxCommits = Math.max(1, ...monthly.map((entry) => entry.commits));
+---
+
+<article class="oc-detail">
+  <header class="oc-detail-header">
+    <div>
+      <p class="oc-eyebrow">{item.taxonomy.category}</p>
+      <h1>{item.name}</h1>
+      <p class="oc-lede">{item.description}</p>
+    </div>
+    <HealthBadge status={health?.health.status} />
+  </header>
+
+  <div class="oc-detail-grid">
+    <section class="oc-detail-wide">
+      <h2>Curation Scores</h2>
+      <ScoreBars scores={item.curation.scores} />
+      <dl class="oc-score-reasons">
+        {(Object.keys(SCORE_LABELS) as Array<keyof typeof SCORE_LABELS>).map((key) => (
+          <div>
+            <dt>{SCORE_LABELS[key]}</dt>
+            <dd>{SCORE_REASONING[key]}</dd>
+          </div>
+        ))}
+      </dl>
+    </section>
+    <section>
+      <h2>Links</h2>
+      <ul class="oc-link-list">
+        {links.map(([label, href]) => <li><a href={href}>{label}</a></li>)}
+      </ul>
+      {channels.length > 0 && (
+        <>
+          <h3>Distribution</h3>
+          <ul class="oc-link-list">
+            {channels.map((channel) => (
+              <li><a href={channel.url}>{channel.label ?? channel.type}</a>{channel.platform ? ` · ${channel.platform}` : ""}</li>
+            ))}
+          </ul>
+        </>
+      )}
+    </section>
+    <section>
+      <h2>Metadata</h2>
+      <dl class="oc-fact-list">
+        <div><dt>Stars</dt><dd>{health?.github?.stars?.toLocaleString() ?? "Unknown"}</dd></div>
+        <div><dt>Forks</dt><dd>{health?.github?.forks?.toLocaleString() ?? "Unknown"}</dd></div>
+        <div><dt>License</dt><dd>{health?.github?.license ?? "Unknown"}</dd></div>
+        <div><dt>Language</dt><dd>{item.taxonomy.language ?? health?.github?.language ?? "Unknown"}</dd></div>
+        <div><dt>Last activity</dt><dd>{health?.github?.pushedAt?.slice(0, 10) ?? "Unknown"}</dd></div>
+        <div><dt>Latest release</dt><dd>{health?.github?.latestReleaseAt?.slice(0, 10) ?? "Unknown"}</dd></div>
+        <div><dt>Contributors</dt><dd>{health?.github?.contributorsKnown?.toLocaleString() ?? "Unknown"}</dd></div>
+        <div><dt>Open PRs</dt><dd>{health?.github?.openPullRequests?.toLocaleString() ?? "Unknown"}</dd></div>
+      </dl>
+    </section>
+    <section>
+      <h2>Health Signals</h2>
+      <ul class="oc-signal-list">
+        {(health?.health.reasons ?? ["No health metadata available"]).map((reason) => <li>{reason}</li>)}
+      </ul>
+    </section>
+    <section>
+      <h2>Curation</h2>
+      {decision ? (
+        <p><strong>{decision.decision.visibility.replace(/_/g, " ")}</strong>: {decision.decision.reason}</p>
+      ) : (
+        <p>No manual curation decision has been recorded yet.</p>
+      )}
+      {item.curation.reviewed !== undefined && (
+        <p>{item.curation.reviewed ? "Curator reviewed" : "Generated curation pending review"}{item.curation.reviewedBy ? ` by ${item.curation.reviewedBy}` : ""}.</p>
+      )}
+      {item.source.file && <p class="oc-source">Source: {item.source.file}{item.source.line ? `:${item.source.line}` : ""}</p>}
+    </section>
+    {(item.curation.bestFor.length > 0 || item.curation.whyListed.length > 0 || item.curation.caveats.length > 0) && (
+      <section class="oc-detail-wide">
+        <h2>Why Included</h2>
+        <div class="oc-curation-columns">
+          {item.curation.bestFor.length > 0 && (
+            <div>
+              <h3>Best for</h3>
+              <ul class="oc-signal-list">{item.curation.bestFor.map((value) => <li>{value}</li>)}</ul>
+            </div>
+          )}
+          {item.curation.whyListed.length > 0 && (
+            <div>
+              <h3>Why listed</h3>
+              <ul class="oc-signal-list">{item.curation.whyListed.map((value) => <li>{value}</li>)}</ul>
+            </div>
+          )}
+          {item.curation.caveats.length > 0 && (
+            <div>
+              <h3>Caveats</h3>
+              <ul class="oc-signal-list">{item.curation.caveats.map((value) => <li>{value}</li>)}</ul>
+            </div>
+          )}
+        </div>
+      </section>
+    )}
+    {(languages.length > 0 || fileSignals.length > 0 || monthly.length > 0) && (
+      <section class="oc-detail-wide">
+        <h2>Repository Signals</h2>
+        <div class="oc-repo-signals">
+          {languages.length > 0 && (
+            <div>
+              <h3>Languages</h3>
+              <dl class="oc-language-bars">
+                {languages.map(([language, bytes]) => (
+                  <div>
+                    <dt>{language}</dt>
+                    <dd><span style={`width: ${(bytes / totalLanguageBytes) * 100}%`}></span></dd>
+                  </div>
+                ))}
+              </dl>
+            </div>
+          )}
+          {fileSignals.length > 0 && (
+            <div>
+              <h3>Contribution files</h3>
+              <ul class="oc-signal-list">
+                {fileSignals.map(([label, ok]) => <li>{ok ? "Found" : "Missing"}: {label}</li>)}
+              </ul>
+            </div>
+          )}
+          {monthly.length > 0 && (
+            <div>
+              <h3>Monthly activity</h3>
+              <div class="oc-activity-bars">
+                {monthly.map((entry) => (
+                  <span title={`${entry.month}: ${entry.commits} commits`} style={`height: ${Math.max(8, (entry.commits / maxCommits) * 48)}px`}></span>
+                ))}
+              </div>
+            </div>
+          )}
+        </div>
+      </section>
+    )}
+  </div>
+</article>

package/src/components/ScoreBars.astro

@@ -0,0 +1,32 @@
+---
+import type { Score } from "@grove-dev/core";
+import { SCORE_LABELS, scoreTier } from "@grove-dev/ui";
+
+interface Props {
+  scores?: Score;
+  showOverall?: boolean;
+  compact?: boolean;
+}
+
+const { scores = {}, showOverall = true, compact = false } = Astro.props;
+const dimensions = (["activity", "maturity", "learning", "contribution", "docs", "overall"] as const)
+  .filter((dimension) => showOverall || dimension !== "overall");
+const hasAny = Object.values(scores).some((value) => typeof value === "number");
+---
+
+<dl class="oc-scores" aria-label="Curation scores">
+  {!hasAny && <span class="oc-muted">Scores not yet curated</span>}
+  {hasAny && dimensions.map((dimension) => {
+    const value = scores[dimension];
+    const tier = scoreTier(value);
+    return (
+      <div>
+        <dt>{SCORE_LABELS[dimension]}</dt>
+        {!compact && <dd class="oc-score-value">{typeof value === "number" ? Math.round(value) : "-"}</dd>}
+        <dd class="oc-score-bar" aria-label={`${SCORE_LABELS[dimension]} ${value ?? 0} of 100`}>
+          {[0, 1, 2, 3].map((index) => <span class={index < tier ? "is-filled" : ""}></span>)}
+        </dd>
+      </div>
+    );
+  })}
+</dl>

package/src/components/SubmitDraft.astro

@@ -0,0 +1,137 @@
+---
+interface Props {
+  repoUrl?: string;
+}
+
+const { repoUrl = "" } = Astro.props;
+---
+
+<section class="oc-submit-grid">
+  <form class="oc-submit-form" id="submit-form">
+    <label>
+      <span>GitHub URL</span>
+      <input id="repo-url" type="url" required placeholder="https://github.com/owner/repo" value={repoUrl} />
+    </label>
+    <div class="oc-two-col">
+      <label><span>Name</span><input id="project-name" type="text" /></label>
+      <label><span>Slug</span><input id="project-slug" type="text" /></label>
+    </div>
+    <label><span>Description</span><textarea id="project-description" rows="3"></textarea></label>
+    <div class="oc-two-col">
+      <label><span>Category</span><input id="project-category" type="text" placeholder="Developer Tools" /></label>
+      <label><span>Language</span><input id="project-language" type="text" placeholder="TypeScript" /></label>
+    </div>
+    <label><span>Tags</span><input id="project-tags" type="text" placeholder="cli, static-site, search" /></label>
+    <label><span>Best for</span><textarea id="project-best-for" rows="3" placeholder="One line per use case"></textarea></label>
+  </form>
+  <aside class="oc-submit-preview">
+    <div class="oc-section-header">
+      <h2>YAML draft</h2>
+      <button type="button" id="copy-yaml">Copy</button>
+    </div>
+    <pre><code id="yaml-preview">Paste a GitHub URL to generate a draft.</code></pre>
+    <p id="submit-status" aria-live="polite"></p>
+  </aside>
+</section>
+
+<script>
+  type FormField = HTMLInputElement | HTMLTextAreaElement | HTMLElement | null;
+
+  const fields: Record<string, FormField> = {
+    repoUrl: document.querySelector("#repo-url"),
+    name: document.querySelector("#project-name"),
+    slug: document.querySelector("#project-slug"),
+    description: document.querySelector("#project-description"),
+    category: document.querySelector("#project-category"),
+    language: document.querySelector("#project-language"),
+    tags: document.querySelector("#project-tags"),
+    bestFor: document.querySelector("#project-best-for"),
+    preview: document.querySelector("#yaml-preview"),
+    status: document.querySelector("#submit-status"),
+    copy: document.querySelector("#copy-yaml"),
+  };
+
+  function valueOf(name: string): string {
+    const el = fields[name];
+    if (el instanceof HTMLInputElement || el instanceof HTMLTextAreaElement) return el.value;
+    return "";
+  }
+
+  function setText(name: string, text: string): void {
+    const el = fields[name];
+    if (el) el.textContent = text;
+  }
+
+  function slugify(value: string): string {
+    return String(value || "").toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "");
+  }
+
+  function parseRepo(value: string): { owner: string; repo: string } | null {
+    const match = String(value).match(/github\.com\/([^/]+)\/([^/?#]+)/);
+    if (!match) return null;
+    return { owner: match[1], repo: match[2].replace(/\.git$/, "") };
+  }
+
+  function list(values: string[], indent: number): string {
+    return values.length
+      ? values.map((v) => `${" ".repeat(indent)}- ${v}`).join("\n")
+      : `${" ".repeat(indent)}[]`;
+  }
+
+  function quote(value: string): string {
+    return `"${String(value ?? "").replace(/"/g, '\\"')}"`;
+  }
+
+  function generate(): void {
+    const repo = parseRepo(valueOf("repoUrl"));
+    if (!repo) {
+      setText("preview", "Paste a valid GitHub repository URL.");
+      return;
+    }
+    const name = valueOf("name") || repo.repo;
+    const slug = valueOf("slug") || slugify(name);
+    const tags = valueOf("tags")
+      .split(",")
+      .map((t) => t.trim())
+      .filter(Boolean);
+    const bestFor = valueOf("bestFor")
+      .split("\n")
+      .map((l) => l.trim())
+      .filter(Boolean);
+    const yaml = [
+      `id: ${slug}`,
+      `name: ${quote(name)}`,
+      `description: ${quote(valueOf("description") || name)}`,
+      "links:",
+      `  github: https://github.com/${repo.owner}/${repo.repo}`,
+      "source:",
+      "  type: manual",
+      "taxonomy:",
+      `  category: ${quote(valueOf("category") || "uncategorized")}`,
+      "  tags:",
+      list(tags, 4),
+      ...(valueOf("language") ? [`  language: ${quote(valueOf("language"))}`] : []),
+      "curation:",
+      "  bestFor:",
+      list(bestFor, 4),
+      "  whyListed: []",
+      "  caveats: []",
+    ].join("\n");
+    setText("preview", yaml);
+  }
+
+  for (const input of Object.values(fields)) {
+    if (input instanceof HTMLInputElement || input instanceof HTMLTextAreaElement) {
+      input.addEventListener("input", generate);
+    }
+  }
+  const copyBtn = fields.copy;
+  if (copyBtn) {
+    copyBtn.addEventListener("click", async () => {
+      const previewEl = fields.preview;
+      await navigator.clipboard.writeText(previewEl?.textContent ?? "");
+      setText("status", "Copied YAML draft.");
+    });
+  }
+  generate();
+</script>

package/src/index.ts

@@ -0,0 +1,17 @@
+/**
+ * @grove-dev/astro — Astro UI primitives for Grove.
+ *
+ * This package only owns Astro components, layouts, styles, and
+ * Astro-specific integrations. Generic filter/sort/stats/score
+ * helpers live in `@grove-dev/ui` and are re-exported from here for
+ * convenience.
+ *
+ * Astro components are not exported from this barrel — consumers
+ * import them by path, e.g.:
+ *   import ItemCard from "@grove-dev/astro/components/ItemCard.astro";
+ *   import BaseLayout from "@grove-dev/astro/layouts/BaseLayout.astro";
+ *
+ * That keeps the barrel type-only and lets `astro check` validate
+ * the .astro files in their own context.
+ */
+export * from "@grove-dev/ui";

package/src/layouts/BaseLayout.astro

@@ -0,0 +1,32 @@
+---
+import "../styles.css";
+
+interface Props {
+  title: string;
+  description?: string;
+}
+
+const { title, description = "A living, health-aware developer directory." } = Astro.props;
+---
+
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="description" content={description} />
+    <title>{title}</title>
+  </head>
+  <body>
+    <header class="oc-topbar">
+      <a href="/" class="oc-brand">Grove</a>
+      <nav aria-label="Primary">
+        <a href="/projects">Directory</a>
+        <a href="/methodology">Methodology</a>
+      </nav>
+    </header>
+    <main class="oc-shell">
+      <slot />
+    </main>
+  </body>
+</html>