@grove-dev/astro 0.2.10 → 0.2.13

package/src/components/RecordSection.astro

@@ -1,23 +1,30 @@
 ---
 /**
- * RecordSection — a titled "lens" of records on the home page.
+ * RecordSection — generic lens-style section wrapper for the
+ * home page.
  *
  * Renders a SectionHeader + a 3-column grid of `ItemCard`s, with an
- * optional "View all" link in the header. Generic: passes the
- * record list + per-record href through to `ItemCard`.
+ * optional "View all" link in the header. Generic: takes any
+ * `IndexRecord[]` (the slim list-page shape, discriminated union
+ * over `kind`).
  *
- * The component is the workhorse of the home page — featured, hot,
- * new, mature, "by category", "by stack" — all of them are just a
- * `RecordSection` with a different `id` + `title` + sliced list.
+ * Two equivalent APIs are supported so the same template works
+ * against both the workspace source and the published
+ * `@grove-dev/astro@0.2.10` package:
  *
- * V1: items are `IndexProjectRecord`s (the slim list-page shape).
- * Other blueprints (`resource-hub`, `ecosystem-map`) can pass their
- * own `IndexResourceRecord` / `IndexEntityRecord` arrays; the
- * component does not branch on the kind.
+ *   - **`hrefFor(record)`** callback — V1 published API. Caller
+ *     passes a function that returns the detail-page URL for
+ *     each item.
+ *   - **`pathPrefix` string** — convenience API for the common
+ *     case `${pathPrefix}/${item.slug}`. Mutually exclusive with
+ *     `hrefFor`; if both are provided, `hrefFor` wins.
+ *
+ * Empty-state copy is rendered when the list has no items, so the
+ * homepage never collapses to a blank section.
  */
-
-import type { IndexProjectRecord } from "@grove-dev/core";
+import type { IndexRecord } from "@grove-dev/core";
 import ItemCard from "./ItemCard.astro";
+import Container from "../layouts/Container.astro";
 import SectionHeader from "../layouts/SectionHeader.astro";
 
 interface Props {
@@ -25,9 +32,11 @@ interface Props {
   id: string;
   title: string;
   description?: string;
-  items: IndexProjectRecord[];
-  /** Detail page href builder. */
-  hrefFor: (record: IndexProjectRecord) => string;
+  items: IndexRecord[];
+  /** Detail-page href builder (V1 published API). */
+  hrefFor?: (record: IndexRecord) => string;
+  /** Detail-page URL prefix (convenience API). */
+  pathPrefix?: string;
   /** Optional "View all" link rendered in the header. */
   viewAllHref?: string;
   viewAllLabel?: string;
@@ -45,44 +54,70 @@ const {
   description,
   items,
   hrefFor,
+  pathPrefix = "/items",
   viewAllHref,
   viewAllLabel = "View all",
   eyebrow,
   emptyLabel = "No records yet.",
   class: className = "",
 } = Astro.props;
+
+const visible = items.slice(0, 6);
 ---
 
 <section
   id={id}
-  class:list={["grove-section", className]}
-  aria-labelledby={`${id}-heading`}
+  class={`grove-section scroll-mt-20 ${className}`}
 >
-  <div class="grove-container-wide mx-auto px-5 sm:px-7">
-    <SectionHeader
-      eyebrow={eyebrow}
-      title={title}
-      description={description}
-    >
+  <Container>
+    <div class="mb-6 flex flex-wrap items-end justify-between gap-3">
+      <SectionHeader
+        eyebrow={eyebrow}
+        title={title}
+        description={description}
+      />
       {viewAllHref && (
         <a
-          slot="actions"
           href={viewAllHref}
-          class="text-sm font-medium text-ink-500 hover:text-ink-900 dark:text-ink-400 dark:hover:text-ink-100"
+          class="hidden shrink-0 pb-2 text-2xs font-medium text-ink-500 transition-colors hover:text-ink-900 sm:inline dark:text-ink-400 dark:hover:text-ink-100"
         >
           {viewAllLabel} →
         </a>
       )}
-    </SectionHeader>
+    </div>
 
-    {items.length === 0 ? (
-      <p class="m-0 text-sm text-ink-500 dark:text-ink-400">{emptyLabel}</p>
+    {visible.length === 0 ? (
+      <p class="m-0 text-sm text-ink-500 dark:text-ink-400">
+        {emptyLabel}
+      </p>
     ) : (
-      <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
-        {items.map((record) => (
-          <ItemCard record={record} href={hrefFor(record)} />
-        ))}
+      <div
+        class="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3"
+      >
+        {visible.map((item) => {
+          // Resolve href: caller-supplied `hrefFor` callback wins;
+          // otherwise fall back to `${pathPrefix}/${slug}`. The href
+          // is what each card actually navigates to — getting it
+          // right is the difference between a working home page
+          // and a 404-storm of `/items/<slug>` links.
+          const base = pathPrefix.replace(/\/$/, "");
+          const fallbackHref = `${base}/${item.slug}`;
+          const finalHref =
+            typeof hrefFor === "function" ? hrefFor(item) : fallbackHref;
+          return (
+            <ItemCard record={item} href={finalHref} />
+          );
+        })}
       </div>
     )}
-  </div>
+
+    {viewAllHref && (
+      <div class="mt-4 sm:hidden">
+        <a
+          href={viewAllHref}
+          class="text-2xs font-medium text-ink-500 transition-colors hover:text-ink-900 dark:text-ink-400 dark:hover:text-ink-100"
+          >{viewAllLabel} →</a>
+        </div>
+    )}
+  </Container>
 </section>

package/src/components/RefinePanel.astro

@@ -11,12 +11,13 @@
  * 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
+ * dimension and an `initial` `ItemsFilters` for preselecting the
  * current URL state.
  */
 
-import type { AppsFilters } from "../lib/search";
+import type { ItemsFilters } from "../lib/search";
 import { SORT_OPTIONS } from "../lib/search";
+import FilterGroupMenu from "./FilterGroupMenu.astro";
 
 interface FacetValue {
   value: string;
@@ -34,7 +35,7 @@ interface Facets {
 
 interface Props {
   facets: Facets;
-  initial: AppsFilters;
+  initial: ItemsFilters;
   pathPrefix?: string;
   class?: string;
   /** Hide specific facets. Default: all shown. */
@@ -49,149 +50,122 @@ const {
   hide = [],
 } = Astro.props;
 
-const baseAction = pathPrefix.replace(/\/$/, "") || "/";
+interface FilterGroup {
+  label: string;
+  filterKey: "stacks" | "platforms" | "categories" | "licenses";
+  options: FacetValue[];
+  initial: string[];
+  single?: boolean;
+}
 
-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 ?? "";
----
+interface RenderedFilterGroup extends FilterGroup {
+  active: boolean;
+  popoverId: string;
+  trigger: string;
+}
 
-<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} />}
+const baseGroups: FilterGroup[] = [
+  { label: "Stack", filterKey: "stacks", options: facets.stacks ?? [], initial: initial.stacks ?? [] },
+  { label: "Platform", filterKey: "platforms", options: facets.platforms ?? [], initial: initial.platforms ?? [] },
+  { label: "Category", filterKey: "categories", options: facets.categories ?? [], initial: initial.categories ?? [] },
+  { label: "License", filterKey: "licenses", options: facets.licenses ?? [], initial: initial.licenses ?? [], single: true },
+];
 
-  {!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>
-  )}
+function pretty(value: string): string {
+  return value
+    .split(/[-_]/)
+    .map((part) => part ? part[0].toUpperCase() + part.slice(1) : part)
+    .join(" ");
+}
 
-  {!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>
-  )}
+function triggerLabel(group: FilterGroup): string {
+  if (group.initial.length === 0) return `${group.label}: Any`;
+  if (group.initial.length === 1) return `${group.label}: ${pretty(group.initial[0])}`;
+  return `${group.label}: ${group.initial.length} selected`;
+}
 
-  {!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>
-  )}
+const groups: RenderedFilterGroup[] = baseGroups
+  .filter((group) => {
+    const singular = group.filterKey.slice(0, -1) as "stack" | "platform" | "category" | "license";
+    return !hide.includes(singular) && group.options.length > 0;
+  })
+  .map((group) => ({
+    ...group,
+    active: group.initial.length > 0,
+    popoverId: `filter-popover-${group.filterKey}`,
+    trigger: triggerLabel(group),
+  }));
+---
 
-  {!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>
-  )}
+<section class={className}>
+  <div class="flex flex-wrap items-center gap-2" role="toolbar" aria-label="Filter items">
+    {groups.map((group) => <FilterGroupMenu {...group} />)}
 
-  {!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>
-  )}
+    {!hide.includes("sort") && (
+      <label class="relative">
+        <span class="sr-only">Sort items</span>
+        <select name="sort" class="h-9 cursor-pointer appearance-none rounded-md border border-ink-200 bg-white py-1.5 pl-3 pr-8 text-[0.8125rem] font-medium text-ink-700 dark:border-ink-800 dark:bg-ink-950 dark:text-ink-300">
+          {SORT_OPTIONS.map((option) => <option value={option.value} selected={(initial.sort ?? "recently-updated") === option.value}>{option.label}</option>)}
+        </select>
+        <svg viewBox="0 0 16 16" width="11" height="11" aria-hidden="true" class="pointer-events-none absolute right-2.5 top-1/2 -translate-y-1/2 text-ink-400" fill="currentColor">
+          <path d="M4.22 6.22a.75.75 0 0 1 1.06 0L8 8.94l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L4.22 7.28a.75.75 0 0 1 0-1.06Z"/>
+        </svg>
+      </label>
+    )}
+  </div>
+</section>
 
-  <noscript>
-    <button type="submit" class="grove-btn grove-btn-outline">
-      Apply
-    </button>
-  </noscript>
-</form>
+<script is:inline define:vars={{ pathPrefix }}>
+  (() => {
+    const groups = document.querySelectorAll(".grove-filter");
+    const keys = { stacks: "stack", platforms: "platform", categories: "category", licenses: "license" };
+    function closeAll(except) {
+      groups.forEach((group) => {
+        if (group === except) return;
+        const popover = group.querySelector(".grove-filter-popover");
+        const trigger = group.querySelector(".grove-filter-trigger");
+        if (popover && trigger) {
+          popover.hidden = true;
+          popover.classList.add("hidden");
+          trigger.setAttribute("aria-expanded", "false");
+        }
+      });
+    }
+    function navigate(group, values) {
+      const params = new URLSearchParams(location.search);
+      const key = keys[group.dataset.filterGroupKey];
+      params.delete(key);
+      params.delete("page");
+      values.forEach((value) => params.append(key, value));
+      location.assign(params.toString() ? `${pathPrefix}?${params}` : pathPrefix);
+    }
+    groups.forEach((group) => {
+      const trigger = group.querySelector(".grove-filter-trigger");
+      const popover = group.querySelector(".grove-filter-popover");
+      trigger?.addEventListener("click", (event) => {
+        event.stopPropagation();
+        const opening = trigger.getAttribute("aria-expanded") !== "true";
+        closeAll(opening ? group : undefined);
+        popover.hidden = !opening;
+        popover.classList.toggle("hidden", !opening);
+        trigger.setAttribute("aria-expanded", String(opening));
+      });
+      group.querySelector(".grove-filter-apply")?.addEventListener("click", () => {
+        navigate(group, [...group.querySelectorAll(".grove-filter-input:checked")].map((input) => input.dataset.filterValue));
+      });
+      group.querySelector(".grove-filter-clear")?.addEventListener("click", () => navigate(group, []));
+      if (group.dataset.filterSingle === "true") {
+        group.querySelectorAll(".grove-filter-input").forEach((input) => input.addEventListener("change", () => navigate(group, [input.dataset.filterValue])));
+      }
+      popover?.addEventListener("click", (event) => event.stopPropagation());
+    });
+    document.addEventListener("click", () => closeAll());
+    document.addEventListener("keydown", (event) => { if (event.key === "Escape") closeAll(); });
+    document.querySelector('select[name="sort"]')?.addEventListener("change", (event) => {
+      const params = new URLSearchParams(location.search);
+      params.set("sort", event.target.value);
+      params.delete("page");
+      location.assign(params.toString() ? `${pathPrefix}?${params}` : pathPrefix);
+    });
+  })();
+</script>

package/src/components/StackGrid.astro

@@ -1,4 +1,5 @@
 ---
+import Icon from "./Icon.astro";
 /**
  * StackGrid — browse-by-stack grid for the home page.
  *
@@ -30,6 +31,7 @@ interface Props {
   class?: string;
   /** Hide the section eyebrow / header entirely. */
   bare?: boolean;
+  itemLabelPlural?: string;
 }
 
 const {
@@ -38,6 +40,7 @@ const {
   iconAliases,
   class: className = "",
   bare = false,
+  itemLabelPlural = "items",
 } = Astro.props;
 
 function buildHref(slug: string): string {
@@ -48,7 +51,7 @@ function buildHref(slug: string): string {
 function statusLabel(s: StackEntry["status"]): string | null {
   switch (s) {
     case "live":
-      return "Live";
+      return "Available now";
     case "expanding":
       return "Expanding";
     case "planned":
@@ -60,52 +63,57 @@ function statusLabel(s: StackEntry["status"]): string | null {
 ---
 
 <section
-  class:list={["grove-section", className]}
+  id="stacks"
+  class:list={["grove-section scroll-mt-20 border-b border-ink-200 dark:border-ink-800", className]}
   aria-labelledby={bare ? undefined : "grove-stackgrid-heading"}
 >
-  <div class="grove-container-wide mx-auto px-5 sm:px-7">
+  <div class="grove-container mx-auto px-5 sm:px-7">
     {!bare && (
-      <header class="mb-6 flex flex-col gap-2">
+      <header class="mb-6">
+        <span class="text-2xs font-medium uppercase tracking-wider text-ink-500 dark:text-ink-400">
+          Stacks
+        </span>
         <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"
+          class="m-0 mt-1 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.
+          Pick a stack to see real {itemLabelPlural} built with it.
         </p>
       </header>
     )}
 
-    <div class="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3">
+    <div class="grid grid-cols-1 gap-2 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"
+          class="card card-hover group flex h-full items-center gap-3 p-3.5 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 class="flex h-9 w-9 shrink-0 items-center justify-center rounded-md border border-ink-200 bg-white dark:border-ink-800 dark:bg-ink-950" aria-hidden="true">
+            <Icon name={iconAliases?.[s.slug] ?? s.name} category="stack" size={18} />
+          </div>
+
+          <div class="flex min-w-0 flex-1 flex-col gap-0.5">
+            <div class="flex items-center gap-2">
+              <h3 class="m-0 text-[0.875rem] font-semibold tracking-tight text-ink-900 group-hover:underline dark:text-ink-100">
+                {s.name}
+              </h3>
+              {typeof s.count === "number" && (
+                <span class="inline-flex items-center rounded-md border border-ink-200 bg-ink-50 px-1.5 py-0.5 font-mono text-[10px] font-medium text-ink-600 dark:border-ink-800 dark:bg-ink-900/60 dark:text-ink-400">
+                  {s.count} {itemLabelPlural}
+                </span>
+              )}
+            </div>
+            {s.blurb && <p class="m-0 truncate text-2xs text-ink-500 dark:text-ink-400">{s.blurb}</p>}
           </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",
+                "shrink-0 inline-flex items-center rounded-md border px-1.5 py-0.5 text-[10px] font-medium uppercase tracking-wider",
                 s.status === "live"
                   ? "grove-badge-new"
                   : s.status === "expanding"