npm - @grove-dev/astro - Versions diffs - 0.2.10 → 0.2.13 - Mend

@grove-dev/astro 0.2.10 → 0.2.13

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (235) hide show

package/src/layouts/SectionHeader.astro CHANGED Viewed

@@ -1,58 +1,42 @@
 ---
-/**
- * SectionHeader — eyebrow + title + description, used to title
- * every section on the home page. Optionally centered (good for
- * "Why this exists" and friends).
- */
 interface Props {
   eyebrow?: string;
   title: string;
   description?: string;
   align?: "left" | "center";
-  /** 2 (default) for top-level sections, 3 for nested ones. */
   level?: 2 | 3;
-  /** Extra class for the outer header element. */
-  class?: string;
 }
-const {
-  eyebrow,
-  title,
-  description,
-  align = "left",
-  level = 2,
-  class: className = "",
-} = Astro.props;
+const { eyebrow, title, description, align = "left", level = 2 } = Astro.props;
 const Heading = `h${level}` as "h2" | "h3";
 ---
 <header
-  class:list={[
-    "mb-6 flex flex-col gap-2",
-    align === "center" ? "items-center text-center" : "",
-    className,
-  ]}
+  class={`mb-6 flex flex-col gap-2 ${
+    align === "center" ? "items-center text-center" : ""
+  }`}
 >
-  {eyebrow && (
-    <span class="text-2xs font-medium uppercase tracking-wider text-ink-500 dark:text-ink-400">
-      {eyebrow}
-    </span>
-  )}
-  <div class="flex flex-wrap items-end justify-between gap-3">
-    <Heading class="m-0 text-[1.5rem] sm:text-[1.625rem] font-semibold tracking-tight text-ink-900 dark:text-ink-100">
-      {title}
-    </Heading>
-    <slot name="actions" />
-  </div>
-  {description && (
-    <p
-      class:list={[
-        "m-0 text-[0.9375rem] leading-relaxed text-ink-500 dark:text-ink-400",
-        align === "center" ? "max-w-2xl" : "max-w-[56ch]",
-      ]}
-    >
-      {description}
-    </p>
-  )}
+  {
+    eyebrow && (
+      <span class="text-2xs font-medium uppercase tracking-wider text-ink-500 dark:text-ink-400">
+        {eyebrow}
+      </span>
+    )
+  }
+  <Heading
+    class="text-[1.5rem] sm:text-[1.625rem] font-semibold tracking-tight text-ink-900 dark:text-ink-100 m-0"
+  >
+    {title}
+  </Heading>
+  {
+    description && (
+      <p
+        class={`text-[0.9375rem] leading-relaxed text-ink-500 dark:text-ink-400 m-0 ${
+          align === "center" ? "max-w-2xl" : "max-w-[56ch]"
+        }`}
+      >
+        {description}
+      </p>
+    )
+  }
 </header>

package/src/layouts/Seo.astro CHANGED Viewed

@@ -1,80 +1,73 @@
 ---
+// SPDX-License-Identifier: MIT
 /**
- * Seo — per-page <head> content: title, description, canonical,
- * Open Graph, Twitter Card, and JSON-LD structured data. Designed
- * to be used inside the <head> slot of BaseLayout. Pages pass the
- * rich props they care about; everything else has a sensible default
- * derived from `site` and the Astro URL.
+ * Per-page SEO: <title>, description, canonical, Open Graph, Twitter Card,
+ * and JSON-LD structured data. Designed to be used inside <head> by the
+ * BaseLayout. Pages pass the rich props they care about; everything else
+ * has a sensible default derived from the site config and the Astro URL.
  *
  * Renders:
  *   - <title>, meta description, canonical link
  *   - Open Graph (og:*) for Facebook, LinkedIn, Discord, Slack, etc.
  *   - Twitter Card (twitter:*) for X / Twitter
  *   - JSON-LD WebSite + Organization on every page
- *   - JSON-LD custom payload (e.g. SoftwareSourceCode) when `jsonLd`
- *     is provided.
+ *   - JSON-LD SoftwareSourceCode (or custom) when `jsonLd` is provided
+ *     (e.g. on /items/[slug] for the per-item structured data)
  *
- * Noindex is opt-in via the `noindex` prop. By default everything
- * is indexable.
+ * Noindex is opt-in via the `noindex` prop. By default everything is
+ * indexable; the only noindex target today is the thin /submit wrapper.
  */
-interface SiteRef {
-  name: string;
-  description?: string;
-  url?: string;
-  repoUrl?: string;
-  searchPath?: string;
-}
 interface Props {
   title: string;
   description: string;
-  /** Open Graph / Twitter image. Default: /og-image.svg. */
+  site: {
+    name: string;
+    description?: string;
+    repoUrl?: string;
+  };
+  searchPath?: string;
+  /** Open Graph / Twitter image. Default: /og-image.svg. Should be absolute or root-relative. */
   image?: string;
-  /** og:type. Default: "website". */
+  /** og:type. Default: "website". Use "article" for blog posts / changelog. */
   type?: "website" | "article" | "profile";
   /** Set true to add noindex,nofollow. */
   noindex?: boolean;
-  /** Extra JSON-LD payload (object) — typically SoftwareSourceCode. */
+  /** Extra JSON-LD payload (object) — typically SoftwareSourceCode on item pages. */
   jsonLd?: Record<string, unknown> | Record<string, unknown>[];
-  /** Site identity (name, description, url, repoUrl). Required. */
-  site: SiteRef;
 }
 const {
   title,
   description,
+  site: siteConfig,
+  searchPath = "/items",
   image = "/og-image.svg",
   type = "website",
   noindex = false,
   jsonLd,
-  site,
 } = Astro.props;
-const siteUrl = site.url
-  ? new URL(site.url)
-  : (Astro.site ?? new URL("https://grove.dev"));
+const siteUrl = Astro.site ?? new URL("https://example.com");
 const canonical = new URL(Astro.url.pathname, siteUrl).toString();
 const ogImage = new URL(image, siteUrl).toString();
-// Truncate description for OG/Twitter where longer is worse (160-200 chars).
+// Truncate description for OG/Twitter where longer is worse (160–200 chars).
 function truncate(s: string, max: number): string {
   if (s.length <= max) return s;
   return s.slice(0, max - 1).trimEnd() + "\u2026";
 }
 const shortDescription = truncate(description, 200);
-const siteDescription =
-  site.description ??
-  "A growing community knowledge site powered by Grove.";
-// JSON-LD: site-wide identity. Google uses these for site links
-// and the knowledge panel.
-const searchPath = site.searchPath ?? "/projects";
-const websiteLd: Record<string, unknown> = {
+// WebSite + Organization JSON-LD. These are site-wide identity signals
+// that should appear on every page (Google uses them for site links
+// and the knowledge panel).
+const websiteLd = {
   "@context": "https://schema.org",
   "@type": "WebSite",
-  name: site.name,
-  description: siteDescription,
+  name: siteConfig.name,
+  description: siteConfig.description ?? description,
   url: siteUrl.toString().replace(/\/$/, ""),
   inLanguage: "en",
   potentialAction: {
@@ -84,17 +77,14 @@ const websiteLd: Record<string, unknown> = {
   },
 };
-const organizationLd: Record<string, unknown> = {
+const organizationLd = {
   "@context": "https://schema.org",
   "@type": "Organization",
-  name: site.name,
+  name: siteConfig.name,
   url: siteUrl.toString().replace(/\/$/, ""),
   logo: new URL("/og-image.svg", siteUrl).toString(),
+  ...(siteConfig.repoUrl ? { sameAs: [siteConfig.repoUrl] } : {}),
 };
-if (site.repoUrl) {
-  organizationLd.sameAs = [site.repoUrl];
-}
 ---
 <!-- Primary meta -->
@@ -111,8 +101,8 @@ if (site.repoUrl) {
 <meta property="og:image" content={ogImage} />
 <meta property="og:image:width" content="1200" />
 <meta property="og:image:height" content="630" />
-<meta property="og:image:alt" content={`${site.name} — ${siteDescription}`} />
-<meta property="og:site_name" content={site.name} />
+<meta property="og:image:alt" content={`${siteConfig.name} social preview`} />
+<meta property="og:site_name" content={siteConfig.name} />
 <meta property="og:locale" content="en" />
 <!-- Twitter Card -->
@@ -120,21 +110,13 @@ if (site.repoUrl) {
 <meta name="twitter:title" content={title} />
 <meta name="twitter:description" content={shortDescription} />
 <meta name="twitter:image" content={ogImage} />
-<meta name="twitter:image:alt" content={`${site.name} — ${siteDescription}`} />
+<meta name="twitter:image:alt" content={`${siteConfig.name} social preview`} />
 <!-- JSON-LD: site-wide identity -->
-<script
-  is:inline
-  type="application/ld+json"
-  set:html={JSON.stringify(websiteLd)}
-></script>
-<script
-  is:inline
-  type="application/ld+json"
-  set:html={JSON.stringify(organizationLd)}
-></script>
+<script is:inline type="application/ld+json" set:html={JSON.stringify(websiteLd)} />
+<script is:inline type="application/ld+json" set:html={JSON.stringify(organizationLd)} />
-<!-- JSON-LD: per-page (SoftwareSourceCode for [slug], etc.) -->
+<!-- JSON-LD: per-page (SoftwareSourceCode for /items/[slug], etc.) -->
 {jsonLd && (
   <script
     is:inline

package/src/layouts/ThemeToggle.astro CHANGED Viewed

@@ -1,17 +1,15 @@
 ---
-/**
- * ThemeToggle — a three-position theme switcher (light / dark / system).
- *
- * State is persisted in `localStorage` under the key "grove-theme"
- * (matching `STORAGE_KEY` in `BaseLayout.astro`'s THEME_INIT script).
- *
- * The actual `<html class="dark">` toggle happens in the inline
- * THEME_INIT script in BaseLayout — that script runs before paint
- * so the user never sees a flash of the wrong theme.
- *
- * This button just rotates the stored mode and dispatches a
- * `theme:set` event that the THEME_INIT listener picks up.
- */
+// A three-position theme switcher: light / dark / system.
+//
+// State is persisted in `localStorage` under the key "grove-theme".
+// On mount it reads the stored value (or "system" if none), applies
+// the corresponding class to <html>, and re-syncs when the OS
+// preference changes (only meaningful when mode is "system").
+//
+// Implementation note: the actual <html class="dark"> toggle happens
+// in the inline script in `src/components/layout/BaseLayout.astro`
+// (THEME_INIT). That script runs before paint so the user never sees
+// a flash of the wrong theme.
 interface Props {
   class?: string;
@@ -22,17 +20,15 @@ const { class: className = "" } = Astro.props;
 <button
   type="button"
+  id="theme-toggle"
   data-theme-toggle
   aria-label="Toggle theme"
   title="Toggle theme"
-  class:list={[
-    "relative inline-flex h-8 w-8 items-center justify-center rounded-md border border-ink-200 bg-white text-ink-700 transition-colors hover:border-ink-300 hover:bg-ink-50 dark:border-ink-800 dark:bg-ink-950 dark:text-ink-200 dark:hover:border-ink-700 dark:hover:bg-ink-900/40",
-    className,
-  ]}
+  class={`relative inline-flex h-8 w-8 items-center justify-center rounded-md border border-ink-200 bg-white text-ink-700 transition-colors hover:border-ink-300 hover:bg-ink-50 dark:border-ink-800 dark:bg-ink-950 dark:text-ink-200 dark:hover:border-ink-700 dark:hover:bg-ink-900/40 ${className}`}
 >
   {/* Sun — shown in dark mode (click to go light) */}
   <svg
-    class="hidden h-4 w-4 dark:block"
+    class="h-4 w-4 hidden dark:block"
     viewBox="0 0 24 24"
     fill="none"
     stroke="currentColor"
@@ -41,12 +37,12 @@ const { class: className = "" } = Astro.props;
     stroke-linejoin="round"
     aria-hidden="true"
   >
-    <circle cx="12" cy="12" r="4"></circle>
-    <path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41"></path>
+    <circle cx="12" cy="12" r="4"/>
+    <path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41"/>
   </svg>
   {/* Moon — shown in light mode (click to go dark) */}
   <svg
-    class="block h-4 w-4 dark:hidden"
+    class="h-4 w-4 block dark:hidden"
     viewBox="0 0 24 24"
     fill="none"
     stroke="currentColor"
@@ -55,7 +51,7 @@ const { class: className = "" } = Astro.props;
     stroke-linejoin="round"
     aria-hidden="true"
   >
-    <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79Z"></path>
+    <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79Z"/>
   </svg>
 </button>
@@ -67,44 +63,35 @@ const { class: className = "" } = Astro.props;
   type Mode = "light" | "dark" | "system";
   function currentMode(): Mode {
-    try {
-      const stored = localStorage.getItem(STORAGE_KEY);
-      return stored === "light" || stored === "dark" || stored === "system"
-        ? stored
-        : "system";
-    } catch {
-      return "system";
-    }
+    const stored = localStorage.getItem(STORAGE_KEY);
+    return stored === "light" || stored === "dark" || stored === "system"
+      ? stored
+      : "system";
   }
   function rotate(): Mode {
     const order: Mode[] = ["light", "dark", "system"];
-    const cur = currentMode();
-    const next = order[(order.indexOf(cur) + 1) % order.length];
-    try {
-      localStorage.setItem(STORAGE_KEY, next);
-    } catch {
-      // localStorage may be blocked (private mode, etc.) — we still
-      // dispatch the event so the UI updates for the current page.
-    }
-    // Notify the page-level listener (THEME_INIT).
+    const next = order[(order.indexOf(currentMode()) + 1) % order.length];
+    localStorage.setItem(STORAGE_KEY, next);
+    // Notify the page-level listener.
     window.dispatchEvent(new CustomEvent("theme:set", { detail: next }));
     return next;
   }
+  // A small tooltip label so the user knows what mode they'll get
+  // on the next click. We re-read current mode on focus/hover so it
+  // stays in sync.
   function updateLabel(btn: HTMLButtonElement) {
     btn.title = `Theme: ${currentMode()} (click to switch)`;
   }
-  document
-    .querySelectorAll<HTMLButtonElement>("[data-theme-toggle]")
-    .forEach((btn) => {
+  document.querySelectorAll<HTMLButtonElement>("[data-theme-toggle]").forEach((btn) => {
+    updateLabel(btn);
+    btn.addEventListener("click", () => {
+      rotate();
       updateLabel(btn);
-      btn.addEventListener("click", () => {
-        rotate();
-        updateLabel(btn);
-      });
-      btn.addEventListener("mouseenter", () => updateLabel(btn));
-      btn.addEventListener("focus", () => updateLabel(btn));
     });
+    btn.addEventListener("mouseenter", () => updateLabel(btn));
+    btn.addEventListener("focus", () => updateLabel(btn));
+  });
 </script>

package/src/lib/display.ts CHANGED Viewed

@@ -1,24 +1,15 @@
 /**
- * Display-name helpers for curation labels, statuses, lenses, and
- * sort options. Internal ids (e.g. "hot", "stale", "production-like")
- * stay stable for URL state and data files; this module owns the
- * mapping from id → user-facing string.
+ * Display-name helpers for curation labels, statuses, lenses, and sort
+ * options. Internal ids (e.g. "hot", "stale", "production-like") stay
+ * stable for URL state and data files; this module owns the mapping
+ * from id → user-facing string.
  *
- * Every export is dependency-free so it can be imported by both
+ * Every export here is dependency-free so it can be imported by both
  * server-rendered Astro components and any client-side script.
- *
- * Status ids accept the `HealthStatus` union from `@grove-dev/core`
- * plus a couple of curated composites (e.g. "needs-maintainer")
- * that appear in URL state.
  */
-import type {
-  AppLabel,
-  HealthStatus,
-} from "@grove-dev/core";
-// ── Label ids (the `curation.labels` array on a record) ──────────
-export type LabelId = AppLabel;
+// ── Label ids (the `labels` array on an item) ────────────────────────
+export type LabelId = "new" | "hot" | "mature" | "featured";
 export const LABEL_DISPLAY: Record<LabelId, string> = {
   new: "Recently added",
@@ -27,70 +18,58 @@ export const LABEL_DISPLAY: Record<LabelId, string> = {
   featured: "Featured",
 };
-/** Pretty-print a slug to Title Case. Used for arbitrary slugs. */
-export function prettySlug(slug: string | null | undefined): string {
-  if (!slug) return "";
-  return slug
-    .replace(/[-_]+/g, " ")
-    .replace(/\s+/g, " ")
-    .trim()
-    .split(" ")
-    .map((w) => (w ? w[0]!.toUpperCase() + w.slice(1) : ""))
-    .join(" ");
-}
 /** Returns a human-readable name for a label id, or null if unknown. */
 export function labelDisplay(id: string | null | undefined): string | null {
   if (!id) return null;
-  if (id in LABEL_DISPLAY) {
-    return LABEL_DISPLAY[id as LabelId];
-  }
-  return prettySlug(id);
+  return LABEL_DISPLAY[id as LabelId] ?? null;
 }
-// ── Status ids (the `health.status` field on a record) ───────────
+// ── Status ids (the `status` field on an item) ───────────────────────
 /**
- * Canonical status display map. Includes the curated
- * "needs-maintainer" composite that's emitted by the
- * `needs-maintainer` lens.
+ * Canonical status ids, including the curated "needs-maintainer"
+ * composite that's emitted by the `needs-maintainer` lens (it expands
+ * to "stale,quiet" in URL state but presents as one chip).
  */
 export const STATUS_DISPLAY: Record<string, string> = {
   active: "Active",
   mature: "Mature",
+  quiet: "Quiet",
   stale: "Not recently active",
   inactive: "Inactive",
+  "needs-maintainer": "Needs maintainer",
   archived: "Archived",
-  unknown: "Unknown",
   historical: "Historical",
   needs_review: "Needs review",
-  quiet: "Quiet",
   unavailable: "Unavailable",
-  "needs-maintainer": "Needs maintainer",
+  unknown: "Unknown",
 };
-export function statusDisplay(
-  s: HealthStatus | string | null | undefined,
-): string {
+export function statusDisplay(s: string | null | undefined): string {
   if (!s) return STATUS_DISPLAY.unknown;
-  return STATUS_DISPLAY[s] ?? prettySlug(s);
+  return STATUS_DISPLAY[s] ?? STATUS_DISPLAY.unknown;
 }
-// ── Lens ids (the curated tabs on /projects) ─────────────────────
+// ── Lens ids (the curated tabs on /items) ────────────────────────────
 export const LENS_DISPLAY: Record<string, string> = {
-  all: "All",
-  hot: "Trending",
+  all: "All items",
   new: "Recently added",
+  hot: "Trending",
   mature: "Established",
-  featured: "Featured",
-  "needs-review": "Needs review",
+  "good-to-learn": "Good to learn",
+  "production-like": "Production-like",
+  "beginner-friendly": "Beginner friendly",
+  "contribution-ready": "Contribution ready",
+  launches: "Launches",
+  "actively-developed": "Active",
+  "needs-maintainer": "Needs maintainer",
 };
 export function lensDisplay(id: string | null | undefined): string {
   if (!id) return LENS_DISPLAY.all;
-  return LENS_DISPLAY[id] ?? prettySlug(id);
+  return LENS_DISPLAY[id] ?? id;
 }
-// ── Sort ids (the /projects sort dropdown) ───────────────────────
+// ── Sort ids (the /items sort dropdown) ──────────────────────────────
 export const SORT_DISPLAY: Record<string, string> = {
   "recently-updated": "Recently updated",
   "most-starred": "Most starred",
@@ -101,18 +80,32 @@ export const SORT_DISPLAY: Record<string, string> = {
 export function sortDisplay(id: string | null | undefined): string {
   if (!id) return SORT_DISPLAY["recently-updated"];
-  return SORT_DISPLAY[id] ?? prettySlug(id);
+  return SORT_DISPLAY[id] ?? id;
+}
+export function prettySlug(value: string | null | undefined): string {
+  if (!value) return "";
+  return value
+    .split(/[-_]+/)
+    .filter(Boolean)
+    .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
+    .join(" ");
 }
-// ── Status option list (used by filter dropdowns) ───────────────
+// ── Status option list (used by filter dropdowns) ───────────────────
 // "needs-maintainer" is included even though it's a derived/composite
 // status — filter dropdowns and chip rendering need to offer it
-// alongside the raw HealthStatus values.
+// alongside the raw AppStatus values.
 export const STATUS_OPTIONS: string[] = [
   "active",
+  "mature",
   "quiet",
   "stale",
+  "inactive",
   "needs-maintainer",
   "archived",
+  "historical",
+  "needs_review",
+  "unavailable",
   "unknown",
 ];

package/src/lib/format.ts CHANGED Viewed

@@ -1,9 +1,8 @@
 /**
- * Shared formatting helpers.
+ * Shared formatting helpers used across components.
  *
- * Dependency-free — importable by both server-rendered Astro
- * components and any future client-side script. No `Intl`-heavy
- * calls that would explode the client bundle.
+ * Keep these dependency-free so they can be imported by both server-
+ * rendered Astro components and any future client-side scripts.
  */
 /**
@@ -19,7 +18,7 @@ export function compact(n: number): string {
 }
 /**
- * Format a star count compactly. Returns `null` when input is not a
+ * Format a star count compactly. Returns null when input is not a
  * finite number, so callers can render "—" without an extra guard.
  */
 export function formatStars(n: number | null | undefined): string | null {
@@ -32,9 +31,9 @@ export function formatStars(n: number | null | undefined): string | null {
  * Returns "—" for missing or invalid input, and "today" for future
  * dates (which can happen with bad upstream timestamps).
  */
-export function formatRelative(date: string | null | undefined): string {
-  if (!date) return "—";
-  const d = new Date(date);
+export function formatRelative(iso: string | null | undefined): string {
+  if (!iso) return "—";
+  const d = new Date(iso);
   if (Number.isNaN(d.valueOf())) return "—";
   const days = Math.floor((Date.now() - d.valueOf()) / (1000 * 60 * 60 * 24));
   if (days <= 0) return "today";
@@ -53,10 +52,10 @@ export function formatRelative(date: string | null | undefined): string {
  * Returns the original string for unparseable input, or "—" when
  * no value is provided.
  */
-export function formatDate(date: string | null | undefined): string {
-  if (!date) return "—";
-  const d = new Date(date);
-  if (Number.isNaN(d.valueOf())) return date;
+export function formatDate(iso: string | null | undefined): string {
+  if (!iso) return "—";
+  const d = new Date(iso);
+  if (Number.isNaN(d.valueOf())) return iso;
   return d.toLocaleDateString("en-US", {
     year: "numeric",
     month: "short",