@grove-dev/astro 0.1.4 → 0.2.2

package/src/components/RefinePanel.astro

@@ -0,0 +1,197 @@
+---
+/**
+ * RefinePanel — multi-select facet dropdowns.
+ *
+ * Renders a row of facet dropdowns (Stack, Platform, Category,
+ * License) plus a Sort dropdown, all using native <select> for
+ * server-render-only behavior. Selection auto-submits the form
+ * to the same list page with the chosen values merged into the URL.
+ *
+ * The form is a GET to the list page base, with each facet as a
+ * repeated key. Empty values are dropped, so the URL stays clean.
+ *
+ * Generic: takes a `facets` map of `{ value, label, count }[]` per
+ * dimension and an `initial` `AppsFilters` for preselecting the
+ * current URL state.
+ */
+
+import type { AppsFilters } from "../lib/search";
+import { SORT_OPTIONS } from "../lib/search";
+
+interface FacetValue {
+  value: string;
+  label?: string;
+  count?: number;
+}
+
+interface Facets {
+  stacks?: FacetValue[];
+  platforms?: FacetValue[];
+  categories?: FacetValue[];
+  labels?: FacetValue[];
+  licenses?: FacetValue[];
+}
+
+interface Props {
+  facets: Facets;
+  initial: AppsFilters;
+  pathPrefix?: string;
+  class?: string;
+  /** Hide specific facets. Default: all shown. */
+  hide?: Array<"stack" | "platform" | "category" | "license" | "sort">;
+}
+
+const {
+  facets,
+  initial,
+  pathPrefix = "/",
+  class: className = "",
+  hide = [],
+} = Astro.props;
+
+const baseAction = pathPrefix.replace(/\/$/, "") || "/";
+
+const initialStacks = new Set(initial.stacks ?? []);
+const initialPlatforms = new Set(initial.platforms ?? []);
+const initialCategories = new Set(initial.categories ?? []);
+const initialLicenses = new Set(initial.licenses ?? []);
+const initialSort = initial.sort ?? "";
+---
+
+<form
+  method="get"
+  action={baseAction}
+  class:list={[
+    "grove-refine-panel flex flex-wrap items-end gap-3",
+    className,
+  ]}
+  data-grove-refine-panel
+>
+  {initial.q && <input type="hidden" name="q" value={initial.q} />}
+  {initial.lens && <input type="hidden" name="lens" value={initial.lens} />}
+
+  {!hide.includes("stack") && (facets.stacks?.length ?? 0) > 0 && (
+    <label class="flex flex-col gap-1">
+      <span class="text-2xs font-medium uppercase tracking-wider text-ink-500 dark:text-ink-400">
+        Stack
+      </span>
+      <select
+        name="stack"
+        multiple
+        size="1"
+        onchange="this.form?.requestSubmit()"
+        class="grove-select min-w-[10rem] rounded-md border border-ink-200 bg-white py-1.5 pl-2 pr-7 text-sm focus:border-ink-900 focus:outline-none focus:ring-2 focus:ring-ink-900/10 dark:border-ink-800 dark:bg-ink-950 dark:text-ink-100"
+      >
+        {facets.stacks!.map((f) => (
+          <option
+            value={f.value}
+            selected={initialStacks.has(f.value)}
+          >
+            {f.label ?? f.value}
+            {typeof f.count === "number" ? ` (${f.count})` : ""}
+          </option>
+        ))}
+      </select>
+    </label>
+  )}
+
+  {!hide.includes("platform") && (facets.platforms?.length ?? 0) > 0 && (
+    <label class="flex flex-col gap-1">
+      <span class="text-2xs font-medium uppercase tracking-wider text-ink-500 dark:text-ink-400">
+        Platform
+      </span>
+      <select
+        name="platform"
+        multiple
+        size="1"
+        onchange="this.form?.requestSubmit()"
+        class="grove-select min-w-[10rem] rounded-md border border-ink-200 bg-white py-1.5 pl-2 pr-7 text-sm focus:border-ink-900 focus:outline-none focus:ring-2 focus:ring-ink-900/10 dark:border-ink-800 dark:bg-ink-950 dark:text-ink-100"
+      >
+        {facets.platforms!.map((f) => (
+          <option
+            value={f.value}
+            selected={initialPlatforms.has(f.value)}
+          >
+            {f.label ?? f.value}
+            {typeof f.count === "number" ? ` (${f.count})` : ""}
+          </option>
+        ))}
+      </select>
+    </label>
+  )}
+
+  {!hide.includes("category") && (facets.categories?.length ?? 0) > 0 && (
+    <label class="flex flex-col gap-1">
+      <span class="text-2xs font-medium uppercase tracking-wider text-ink-500 dark:text-ink-400">
+        Category
+      </span>
+      <select
+        name="category"
+        multiple
+        size="1"
+        onchange="this.form?.requestSubmit()"
+        class="grove-select min-w-[10rem] rounded-md border border-ink-200 bg-white py-1.5 pl-2 pr-7 text-sm focus:border-ink-900 focus:outline-none focus:ring-2 focus:ring-ink-900/10 dark:border-ink-800 dark:bg-ink-950 dark:text-ink-100"
+      >
+        {facets.categories!.map((f) => (
+          <option
+            value={f.value}
+            selected={initialCategories.has(f.value)}
+          >
+            {f.label ?? f.value}
+            {typeof f.count === "number" ? ` (${f.count})` : ""}
+          </option>
+        ))}
+      </select>
+    </label>
+  )}
+
+  {!hide.includes("license") && (facets.licenses?.length ?? 0) > 0 && (
+    <label class="flex flex-col gap-1">
+      <span class="text-2xs font-medium uppercase tracking-wider text-ink-500 dark:text-ink-400">
+        License
+      </span>
+      <select
+        name="license"
+        multiple
+        size="1"
+        onchange="this.form?.requestSubmit()"
+        class="grove-select min-w-[10rem] rounded-md border border-ink-200 bg-white py-1.5 pl-2 pr-7 text-sm focus:border-ink-900 focus:outline-none focus:ring-2 focus:ring-ink-900/10 dark:border-ink-800 dark:bg-ink-950 dark:text-ink-100"
+      >
+        {facets.licenses!.map((f) => (
+          <option
+            value={f.value}
+            selected={initialLicenses.has(f.value)}
+          >
+            {f.label ?? f.value}
+            {typeof f.count === "number" ? ` (${f.count})` : ""}
+          </option>
+        ))}
+      </select>
+    </label>
+  )}
+
+  {!hide.includes("sort") && (
+    <label class="flex flex-col gap-1">
+      <span class="text-2xs font-medium uppercase tracking-wider text-ink-500 dark:text-ink-400">
+        Sort
+      </span>
+      <select
+        name="sort"
+        onchange="this.form?.requestSubmit()"
+        class="grove-select min-w-[12rem] rounded-md border border-ink-200 bg-white py-1.5 pl-2 pr-7 text-sm focus:border-ink-900 focus:outline-none focus:ring-2 focus:ring-ink-900/10 dark:border-ink-800 dark:bg-ink-950 dark:text-ink-100"
+      >
+        {SORT_OPTIONS.map((o) => (
+          <option value={o.value} selected={initialSort === o.value}>
+            {o.label}
+          </option>
+        ))}
+      </select>
+    </label>
+  )}
+
+  <noscript>
+    <button type="submit" class="grove-btn grove-btn-outline">
+      Apply
+    </button>
+  </noscript>
+</form>

package/src/components/ScoreBars.astro

@@ -1,32 +1,102 @@
 ---
+/**
+ * ScoreBars — 4-bar score visualization.
+ *
+ * Renders a horizontal 4-cell bar per score dimension. Each cell
+ * fills based on the score tier (0..4) computed from a 0-100 value.
+ * The 5 dimensions are: activity, maturity, learning, contribution,
+ * docs. The "overall" bar is optional and rendered last as a
+ * composite when `showOverall` is true.
+ *
+ * Renders nothing when the record has no score block.
+ */
+
 import type { Score } from "@grove-dev/core";
-import { SCORE_LABELS, scoreTier } from "@grove-dev/ui";
+import { scoreTier, scoreTierLabel, SCORE_LABELS } from "../lib/scores";
 
 interface Props {
-  scores?: Score;
+  scores: Score | undefined | null;
+  /** Show the "overall" composite bar. Default true. */
   showOverall?: boolean;
+  /** Compact mode — no labels next to the bars. */
   compact?: boolean;
+  class?: string;
+}
+
+const {
+  scores,
+  showOverall = true,
+  compact = false,
+  class: className = "",
+} = Astro.props;
+
+const dimensions: (keyof Score)[] = showOverall
+  ? ["activity", "maturity", "learning", "contribution", "docs", "overall"]
+  : ["activity", "maturity", "learning", "contribution", "docs"];
+
+function dim(n: number | undefined): number {
+  if (typeof n !== "number") return 0;
+  return scoreTier(n);
 }
 
-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");
+function label(n: number | undefined): string {
+  if (typeof n !== "number") return "—";
+  return Math.round(n).toString();
+}
 ---
 
-<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>
+{scores && (
+  <div
+    class:list={["grove-score-bars flex flex-col gap-2", className]}
+    aria-label="Project scores"
+  >
+    {dimensions.map((d) => {
+      const n = scores[d];
+      const tier = dim(n);
+      return (
+        <div
+          class:list={[
+            "grove-score-row flex items-center gap-2",
+            compact ? "text-2xs" : "text-2xs",
+          ]}
+          title={`${SCORE_LABELS[d]}: ${label(n)} (${scoreTierLabel(typeof n === "number" ? n : 0)})`}
+        >
+          {!compact && (
+            <span class="w-20 flex-shrink-0 font-medium text-ink-700 dark:text-ink-300">
+              {SCORE_LABELS[d]}
+            </span>
+          )}
+          <span
+            class:list={[
+              "grove-score-cells flex gap-0.5",
+              compact ? "w-20" : "w-24",
+            ]}
+            role="img"
+            aria-label={`${SCORE_LABELS[d]}: ${label(n)}`}
+          >
+            {[0, 1, 2, 3, 4].map((i) => (
+              <span
+                class:list={[
+                  "grove-score-cell h-1.5 flex-1 rounded-sm",
+                  i < tier
+                    ? d === "overall"
+                      ? "bg-ink-900 dark:bg-ink-100"
+                      : "bg-ink-700 dark:bg-ink-300"
+                    : "bg-ink-100 dark:bg-ink-900",
+                ]}
+              ></span>
+            ))}
+          </span>
+          <span
+            class:list={[
+              "font-mono text-ink-500 dark:text-ink-400",
+              compact ? "ml-1" : "ml-2 w-7 text-right",
+            ]}
+          >
+            {label(n)}
+          </span>
+        </div>
+      );
+    })}
+  </div>
+)}

package/src/components/SmartLensTabs.astro

@@ -0,0 +1,71 @@
+---
+/**
+ * SmartLensTabs — curated single-select lens tabs.
+ *
+ * Renders the primary lenses (All / Trending / Recently added /
+ * Established / Featured / Needs review) as a horizontal tab bar.
+ * Clicking a tab navigates to the same list page with the `lens=`
+ * query param updated. Other filter params (q, stack, platform,
+ * category, sort) are preserved.
+ *
+ * The current selection is computed from `currentParams`, so the
+ * component is server-render-only — no client JS required.
+ *
+ * Generic: uses the `LENSES` registry from `lib/lenses.ts` and
+ * takes the list-page base via `pathPrefix`.
+ */
+
+import { LENSES, hrefForLens, isLensActive } from "../lib/lenses";
+import { lensDisplay } from "../lib/display";
+
+interface Props {
+  currentParams: URLSearchParams;
+  pathPrefix?: string;
+  class?: string;
+  /** Override the visible lens list (defaults to LENSES). */
+  lensIds?: string[];
+}
+
+const {
+  currentParams,
+  pathPrefix = "/",
+  class: className = "",
+  lensIds,
+} = Astro.props;
+
+// If `lensIds` is provided, filter LENSES to those ids in that order.
+const lenses =
+  lensIds && lensIds.length > 0
+    ? lensIds
+        .map((id) => LENSES.find((l) => l.id === id))
+        .filter((l): l is NonNullable<typeof l> => Boolean(l))
+    : LENSES;
+---
+
+<nav
+  class:list={[
+    "grove-lens-tabs flex flex-wrap items-center gap-1.5",
+    className,
+  ]}
+  aria-label="Curated views"
+>
+  {lenses.map((lens) => {
+    const active = isLensActive(lens.id, currentParams);
+    return (
+      <a
+        href={hrefForLens(lens.id, currentParams, pathPrefix)}
+        class:list={[
+          "grove-btn rounded-md px-3 py-1.5 text-2xs font-medium transition-colors",
+          active
+            ? "grove-btn-primary"
+            : "grove-btn-ghost border border-ink-200 dark:border-ink-800",
+        ]}
+        aria-current={active ? "page" : undefined}
+        data-event="lens_tab_click"
+        data-event-source="smart_lens_tabs"
+      >
+        {lensDisplay(lens.id)}
+      </a>
+    );
+  })}
+</nav>

package/src/components/StackGrid.astro

@@ -0,0 +1,132 @@
+---
+/**
+ * StackGrid — browse-by-stack grid for the home page.
+ *
+ * Renders a card per stack with name, blurb, status pill
+ * (live/expanding/planned), and a count. The href is the list
+ * page filtered to that stack, so consumers compose the URL via
+ * the `hrefFor` prop.
+ *
+ * Generic: no blueprint-specific terms. A "stack" here is just a
+ * slug + display name + status; consumers derive both from their
+ * own data.
+ */
+
+interface StackEntry {
+  name: string;
+  slug: string;
+  blurb?: string;
+  status?: "live" | "expanding" | "planned";
+  count?: number;
+}
+
+interface Props {
+  stacks: StackEntry[];
+  /** List page base. */
+  pathPrefix?: string;
+  /** Stack icon registry — maps slug → icon file name. Optional. */
+  iconAliases?: Record<string, string>;
+  /** Extra class. */
+  class?: string;
+  /** Hide the section eyebrow / header entirely. */
+  bare?: boolean;
+}
+
+const {
+  stacks,
+  pathPrefix = "/",
+  iconAliases,
+  class: className = "",
+  bare = false,
+} = Astro.props;
+
+function buildHref(slug: string): string {
+  const base = pathPrefix.replace(/\/$/, "");
+  return `${base}?stack=${encodeURIComponent(slug)}`;
+}
+
+function statusLabel(s: StackEntry["status"]): string | null {
+  switch (s) {
+    case "live":
+      return "Live";
+    case "expanding":
+      return "Expanding";
+    case "planned":
+      return "Planned";
+    default:
+      return null;
+  }
+}
+---
+
+<section
+  class:list={["grove-section", className]}
+  aria-labelledby={bare ? undefined : "grove-stackgrid-heading"}
+>
+  <div class="grove-container-wide mx-auto px-5 sm:px-7">
+    {!bare && (
+      <header class="mb-6 flex flex-col gap-2">
+        <h2
+          id="grove-stackgrid-heading"
+          class="m-0 text-[1.5rem] sm:text-[1.625rem] font-semibold tracking-tight text-ink-900 dark:text-ink-100"
+        >
+          Browse by stack
+        </h2>
+        <p class="m-0 max-w-[60ch] text-[0.9375rem] text-ink-500 dark:text-ink-400">
+          Every record is tagged with the technologies it depends on. Pick a
+          stack to see what's shipping in that world.
+        </p>
+      </header>
+    )}
+
+    <div class="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3">
+      {stacks.map((s) => (
+        <a
+          href={buildHref(s.slug)}
+          class="grove-card grove-card-hover group flex flex-col gap-1.5 p-4 no-underline"
+          data-event="stack_grid_click"
+          data-event-source="stack_grid"
+        >
+          <div class="flex items-baseline justify-between gap-2">
+            <h3 class="m-0 text-[0.9375rem] font-semibold tracking-tight text-ink-900 group-hover:underline dark:text-ink-100">
+              {s.name}
+            </h3>
+            {typeof s.count === "number" && (
+              <span class="font-mono text-2xs text-ink-500 dark:text-ink-400">
+                {s.count}
+              </span>
+            )}
+          </div>
+          {s.blurb && (
+            <p class="m-0 line-clamp-2 text-[0.8125rem] leading-snug text-ink-500 dark:text-ink-400">
+              {s.blurb}
+            </p>
+          )}
+          {statusLabel(s.status) && (
+            <span
+              class:list={[
+                "grove-badge mt-1 self-start",
+                s.status === "live"
+                  ? "grove-badge-new"
+                  : s.status === "expanding"
+                    ? "grove-badge-mature"
+                    : "grove-badge-stale",
+              ]}
+            >
+              {statusLabel(s.status)}
+            </span>
+          )}
+        </a>
+      ))}
+    </div>
+  </div>
+</section>
+
+<style>
+  .line-clamp-2 {
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+  }
+</style>

package/src/components/WhyThisExists.astro

@@ -0,0 +1,116 @@
+---
+/**
+ * WhyThisExists — the "what is this site for?" section.
+ *
+ * Renders 3 short, opinionated points (icon + title + body). The
+ * icon set is small and generic: "app" (window/grid glyph),
+ * "code" (angle brackets), "search" (magnifier). Defaults to
+ * the canonical "directory, source, search" trio.
+ *
+ * Generic: every point comes through props. No blueprint-specific
+ * copy. Consumers can pass `points` to swap the order or copy.
+ */
+
+interface WhyPoint {
+  title: string;
+  body: string;
+  icon: "app" | "code" | "search";
+}
+
+interface Props {
+  points?: WhyPoint[];
+  title?: string;
+  description?: string;
+  class?: string;
+}
+
+const {
+  points,
+  title = "Why this directory exists",
+  description = "A short note on the point of all this.",
+  class: className = "",
+} = Astro.props;
+
+const defaultPoints: WhyPoint[] = [
+  {
+    icon: "app",
+    title: "A curated starting point",
+    body: "Skip the rabbit holes. Every entry here is something a real developer reached for, vetted for quality and longevity.",
+  },
+  {
+    icon: "code",
+    title: "Real, runnable source",
+    body: "Every project links back to its source. Skim, fork, learn — no paywalls, no broken download links.",
+  },
+  {
+    icon: "search",
+    title: "Search that respects you",
+    body: "Filter by stack, platform, license, or status. No SEO spam, no affiliate farms. The directory is the product.",
+  },
+];
+
+const items = points && points.length > 0 ? points : defaultPoints;
+---
+
+<section
+  class:list={["grove-section", className]}
+  aria-labelledby="grove-why-heading"
+>
+  <div class="grove-container mx-auto px-5 sm:px-7">
+    <header class="mb-8 flex flex-col items-center gap-2 text-center">
+      <h2
+        id="grove-why-heading"
+        class="m-0 text-[1.5rem] sm:text-[1.625rem] font-semibold tracking-tight text-ink-900 dark:text-ink-100"
+      >
+        {title}
+      </h2>
+      {description && (
+        <p class="m-0 max-w-2xl text-[0.9375rem] text-ink-500 dark:text-ink-400">
+          {description}
+        </p>
+      )}
+    </header>
+
+    <ol
+      class="m-0 grid list-none grid-cols-1 gap-6 p-0 md:grid-cols-3"
+      aria-label="Why this directory"
+    >
+      {items.map((p, i) => (
+        <li class="flex flex-col items-center gap-2 text-center">
+          <span
+            aria-hidden="true"
+            class="inline-flex h-10 w-10 items-center justify-center rounded-full border border-ink-200 bg-white text-ink-700 dark:border-ink-800 dark:bg-ink-950 dark:text-ink-200"
+          >
+            {p.icon === "app" && (
+              <svg viewBox="0 0 16 16" width="16" height="16" fill="currentColor">
+                <path d="M1.75 3.5a.25.25 0 0 1 .25-.25h12a.25.25 0 0 1 .25.25v8a.25.25 0 0 1-.25.25h-12a.25.25 0 0 1-.25-.25v-8ZM2 4.75v6h12v-6H2ZM2.5 6.5h4v2.5h-4V6.5Z"></path>
+              </svg>
+            )}
+            {p.icon === "code" && (
+              <svg viewBox="0 0 16 16" width="16" height="16" fill="currentColor">
+                <path d="M4.72 3.22a.75.75 0 0 1 1.06 1.06L2.06 8l3.72 3.72a.75.75 0 1 1-1.06 1.06L.47 8.53a.75.75 0 0 1 0-1.06l4.25-4.25Zm6.56 0a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06-1.06L13.94 8l-3.72-3.72a.75.75 0 0 1 0-1.06Z"></path>
+              </svg>
+            )}
+            {p.icon === "search" && (
+              <svg viewBox="0 0 16 16" width="16" height="16" fill="currentColor">
+                <path d="M10.68 11.74a6 6 0 1 1 1.06-1.06l3.04 3.04a.75.75 0 1 1-1.06 1.06l-3.04-3.04ZM11.5 7a4.5 4.5 0 1 0-9 0 4.5 4.5 0 0 0 9 0Z"></path>
+              </svg>
+            )}
+          </span>
+          <span
+            aria-hidden="true"
+            class="font-mono text-2xs text-ink-400 dark:text-ink-500"
+          >
+            0{i + 1}
+          </span>
+          <h3 class="m-0 text-base font-semibold tracking-tight text-ink-900 dark:text-ink-100">
+            {p.title}
+          </h3>
+          <p class="m-0 max-w-xs text-[0.875rem] leading-relaxed text-ink-500 dark:text-ink-400">
+            {p.body}
+          </p>
+        </li>
+      ))}
+    </ol>
+  </div>
+</section>