@grove-dev/astro 0.2.6 → 0.2.13

package/src/components/ExploreByStack.astro

@@ -15,6 +15,7 @@ interface StackEntry {
   name: string;
   slug: string;
   count?: number;
+  status?: "live" | "expanding" | "planned";
 }
 
 interface Props {
@@ -64,6 +65,11 @@ function buildHref(slug: string): string {
             {typeof s.count === "number" && (
               <span class="font-mono text-ink-400">{s.count}</span>
             )}
+            {s.status && s.status !== "live" && (
+              <span class="text-[10px] uppercase tracking-wide text-ink-400">
+                {s.status}
+              </span>
+            )}
           </a>
         </li>
       ))}

package/src/components/FilterGroupMenu.astro

@@ -0,0 +1,49 @@
+---
+import FilterOptions from "./FilterOptions.astro";
+
+interface FacetValue {
+  value: string;
+  label?: string;
+  count?: number;
+}
+
+interface Props {
+  label: string;
+  filterKey: string;
+  options: FacetValue[];
+  initial: string[];
+  single?: boolean;
+  active: boolean;
+  popoverId: string;
+  trigger: string;
+}
+
+const group = Astro.props;
+---
+
+<div class="grove-filter relative" data-filter-group-key={group.filterKey} data-filter-single={group.single ? "true" : "false"}>
+  <button
+    type="button"
+    class:list={[
+      "grove-filter-trigger inline-flex h-9 items-center gap-1.5 rounded-md border px-3 text-[0.8125rem] font-medium transition-colors",
+      group.active
+        ? "border-ink-900 bg-ink-900 text-white dark:border-ink-100 dark:bg-ink-100 dark:text-ink-900"
+        : "border-ink-200 bg-white text-ink-700 hover:border-ink-300 hover:bg-ink-50 dark:border-ink-800 dark:bg-ink-950 dark:text-ink-300 dark:hover:border-ink-700 dark:hover:bg-ink-900/60",
+    ]}
+    aria-haspopup="listbox"
+    aria-expanded="false"
+    aria-controls={group.popoverId}
+  >
+    <span>{group.trigger}</span>
+    <svg viewBox="0 0 16 16" width="11" height="11" aria-hidden="true" fill="currentColor" class="opacity-70">
+      <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>
+  </button>
+  <div id={group.popoverId} class="grove-filter-popover absolute left-0 top-full z-40 mt-1 hidden w-72 max-w-[calc(100vw-2rem)] rounded-lg border border-ink-200 bg-white p-1.5 shadow-lg dark:border-ink-800 dark:bg-ink-950" role="listbox" hidden>
+    <FilterOptions filterKey={group.filterKey} options={group.options} initial={group.initial} single={group.single} />
+    <div class="mt-1 flex items-center justify-between border-t border-ink-100 px-2 pt-1.5 dark:border-ink-900">
+      <button type="button" class="grove-filter-clear text-2xs font-medium text-ink-500 hover:text-ink-900 dark:text-ink-400 dark:hover:text-ink-100" hidden={!group.active}>Clear {group.label.toLowerCase()}</button>
+      <button type="button" class="grove-filter-apply ml-auto rounded-md bg-ink-900 px-2.5 py-1 text-2xs font-medium text-white dark:bg-ink-100 dark:text-ink-900">Apply</button>
+    </div>
+  </div>
+</div>

package/src/components/FilterOptions.astro

@@ -0,0 +1,44 @@
+---
+interface FacetValue {
+  value: string;
+  label?: string;
+  count?: number;
+}
+
+interface Props {
+  filterKey: string;
+  options: FacetValue[];
+  initial: string[];
+  single?: boolean;
+}
+
+const { filterKey, options, initial, single = false } = Astro.props;
+
+function pretty(value: string): string {
+  return value
+    .split(/[-_]/)
+    .map((part) => part ? part[0].toUpperCase() + part.slice(1) : part)
+    .join(" ");
+}
+---
+
+<ul class="m-0 flex max-h-72 list-none flex-col gap-0.5 overflow-y-auto p-0">
+  {options.map((option) => (
+    <li>
+      <label class="flex cursor-pointer items-center justify-between gap-3 rounded-md px-2 py-1.5 text-[0.8125rem] text-ink-700 transition-colors hover:bg-ink-50 dark:text-ink-300 dark:hover:bg-ink-900/60">
+        <span class="flex min-w-0 items-center gap-2">
+          <input
+            type={single ? "radio" : "checkbox"}
+            name={single ? filterKey : undefined}
+            class="grove-filter-input h-3.5 w-3.5 shrink-0 cursor-pointer accent-ink-900 dark:accent-ink-100"
+            data-filter-key={filterKey}
+            data-filter-value={option.value}
+            checked={initial.includes(option.value)}
+          />
+          <span class="truncate">{option.label ?? pretty(option.value)}</span>
+        </span>
+        <span class="font-mono text-2xs tabular-nums text-ink-500 dark:text-ink-400">{option.count ?? 0}</span>
+      </label>
+    </li>
+  ))}
+</ul>

package/src/components/Hero.astro

@@ -2,17 +2,19 @@
 /**
  * Hero — the home page banner.
  *
- * Renders: trust stats (apps, categories, stacks, contributors, stars),
- * a search form, an animated gradient backdrop, and up to 2 CTAs.
+ * Mirrors the openapps layout: trust-stats row across the top,
+ * big two-line headline with a gradient accent on the second
+ * line, descriptive paragraph, search form with a Filters
+ * shortcut, quick-filter chips, and up to 3 CTAs.
  *
- * The search form is a static GET form pointing at `searchHref` (the
- * list page) with a `q` query param. JS enhancement is a consumer
- * concern (e.g. the showcase wires the home hero's input into the
- * list page filter via a custom event).
- *
- * Generic: every value comes through props — site name, tagline,
- * stats, search target. No siteConfig import.
+ * Generic: every value comes through props (or `siteConfig` for
+ * the trust stats). The label next to the count is blueprint-
+ * driven via `itemsLabel` — so a project-directory renders
+ * "apps indexed", a resource-hub renders "resources indexed",
+ * an ecosystem-map renders "entities indexed".
  */
+import Container from "../layouts/Container.astro";
+import { compact } from "../lib/format";
 
 interface CTA {
   label: string;
@@ -21,33 +23,43 @@ interface CTA {
   external?: boolean;
 }
 
-interface HeroStats {
-  apps?: number;
-  categories?: number;
-  stacks?: number;
-  contributors?: number;
-  stars?: number;
-}
-
 interface Props {
-  /** Site/brand name — rendered as the heading. */
+  /** Site/brand name. */
   name: string;
-  /** Short tagline displayed under the heading. */
+  /** Short tagline — usually pulled from siteConfig.tagline. */
   tagline: string;
-  /** Longer description, rendered below the tagline. */
+  /** Longer descriptive paragraph. */
   description?: string;
-  /** Trust stats row. */
-  stats?: HeroStats;
-  /** Placeholder for the search input. */
-  searchPlaceholder?: string;
-  /** Form action — the list page URL (e.g. "/projects"). */
+  /** Trust stats: items count, categories, stacks, contributors, stars. */
+  stats?: {
+    totalApps?: number;
+    totalCategories?: number;
+    totalStacks?: number;
+    totalOwners?: number;
+    totalStars?: number;
+    originalRepo?: string;
+  };
+  /** Search form target — the list page. */
   searchHref?: string;
-  /** Optional CTAs rendered next to the search form. */
+  /** Search input placeholder. */
+  searchPlaceholder?: string;
+  /**
+   * Plural noun for the primary count (e.g. "apps", "resources",
+   * "entities"). Used in the trust-stats label and CTA copy.
+   */
+  itemsLabel?: string;
+  /** Singular noun for the Submit / Browse copy. */
+  itemLabel?: string;
+  /** Quick filter chips under the search bar. */
+  quickFilters?: Array<{ label: string; href: string }>;
+  /** CTAs rendered below the form. */
   ctas?: CTA[];
-  /** Extra class for the outer <section>. */
+  /** Extra class. */
   class?: string;
   /** Eyebrow text rendered above the title. */
   eyebrow?: string;
+  /** Optional badge content rendered next to the eyebrow. */
+  eyebrowBadge?: string;
 }
 
 const {
@@ -55,98 +67,191 @@ const {
   tagline,
   description,
   stats = {},
-  searchPlaceholder = "Search the directory...",
   searchHref = "/",
+  searchPlaceholder = "Search the directory...",
+  itemsLabel = "items",
+  itemLabel,
+  quickFilters = [],
   ctas = [],
   class: className = "",
-  eyebrow,
+  eyebrow = "A directory of curated knowledge",
+  eyebrowBadge,
 } = Astro.props;
 
-function fmt(n: number | undefined): string {
-  if (typeof n !== "number" || !Number.isFinite(n)) return "—";
-  if (n >= 1000) {
-    const k = n / 1000;
-    return (k >= 10 ? Math.round(k).toString() : k.toFixed(1)) + "k";
-  }
-  return n.toString();
-}
+// Singular for the Submit-style CTA copy. Defaults to the lowercased
+// items label so "apps" → "app" without an extra prop.
+const singular = (itemLabel ?? itemsLabel.replace(/s$/, "")).toLowerCase();
 
-const hasStats =
-  stats.apps !== undefined ||
-  stats.categories !== undefined ||
-  stats.stacks !== undefined ||
-  stats.contributors !== undefined ||
-  stats.stars !== undefined;
+const githubUrl = stats.originalRepo;
+
+const trustStats: { value: string; label: string }[] = [
+  ...(stats.totalApps !== undefined
+    ? [{ value: compact(stats.totalApps) ?? "0", label: `${itemsLabel} indexed` }]
+    : []),
+  ...(stats.totalCategories !== undefined
+    ? [{ value: String(stats.totalCategories), label: "categories" }]
+    : []),
+  ...(stats.totalStacks !== undefined
+    ? [{ value: String(stats.totalStacks), label: "stacks" }]
+    : []),
+  ...(stats.totalOwners !== undefined
+    ? [{ value: compact(stats.totalOwners) ?? "0", label: "contributors" }]
+    : []),
+  ...(stats.totalStars !== undefined
+    ? [{ value: compact(stats.totalStars) ?? "0", label: "GitHub stars" }]
+    : []),
+];
 ---
 
 <section
   class:list={[
-    "grove-hero relative overflow-hidden border-b border-ink-200 dark:border-ink-800",
+    "relative overflow-hidden border-b border-ink-200 dark:border-ink-800",
     className,
   ]}
-  aria-labelledby="grove-hero-heading"
 >
   <div
     aria-hidden="true"
-    class="grove-hero__gradient pointer-events-none absolute inset-0 -z-10"
+    class="pointer-events-none absolute inset-0 opacity-60 dark:opacity-40"
+    style="
+      background-image:
+        radial-gradient(60% 50% at 15% 20%, rgba(31, 111, 235, 0.12), transparent 60%),
+        radial-gradient(50% 40% at 85% 10%, rgba(110, 231, 183, 0.10), transparent 60%),
+        radial-gradient(40% 40% at 50% 90%, rgba(251, 146, 60, 0.08), transparent 60%);
+    "
   ></div>
 
-  <div class="grove-container-wide mx-auto px-5 py-16 sm:px-7 sm:py-20">
-    <div class="max-w-3xl">
-      {eyebrow && (
-        <span class="text-2xs font-medium uppercase tracking-wider text-ink-500 dark:text-ink-400">
+  <Container>
+    <div class="relative py-14 sm:py-20">
+      <div class="max-w-3xl">
+        <span
+          class="inline-flex animate-fade-in items-center gap-2 text-2xs font-medium text-ink-500 dark:text-ink-400"
+        >
+          <span
+            aria-hidden="true"
+            class="inline-block h-1.5 w-1.5 animate-pulse rounded-full bg-emerald-500"
+          ></span>
           {eyebrow}
+          {eyebrowBadge && (
+            <span
+              class="inline-flex items-center rounded-full border border-amber-300 bg-amber-50 px-1.5 py-0.5 text-[10px] font-semibold uppercase tracking-wider text-amber-700 dark:border-amber-700/50 dark:bg-amber-900/20 dark:text-amber-300"
+              aria-label={eyebrowBadge}
+            >
+              {eyebrowBadge}
+            </span>
+          )}
         </span>
-      )}
-      <h1
-        id="grove-hero-heading"
-        class="m-0 mt-2 text-[2.25rem] font-semibold leading-[1.05] tracking-tight text-ink-900 sm:text-[3rem] dark:text-ink-100"
-      >
-        {name}
-      </h1>
-      <p class="m-0 mt-4 max-w-2xl text-lg leading-relaxed text-ink-700 dark:text-ink-200">
-        {tagline}
-      </p>
-      {description && (
-        <p class="m-0 mt-2 max-w-2xl text-[0.9375rem] leading-relaxed text-ink-500 dark:text-ink-400">
-          {description}
-        </p>
+
+        <h1
+          class="mt-3 animate-fade-in-up text-[2.25rem] sm:text-[2.75rem] md:text-[3rem] font-semibold tracking-[-0.02em] leading-[1.05] text-ink-900 dark:text-ink-100 m-0"
+          style="animation-delay: 0.05s;"
+        >
+          {name}<br class="hidden sm:block" />
+          <span
+            class="bg-gradient-to-r from-ink-900 via-ink-700 to-ink-900 bg-clip-text text-transparent dark:from-ink-100 dark:via-ink-300 dark:to-ink-100"
+            style="background-size: 200% 200%; animation: fade-in-up 0.7s ease-out 0.1s both, gradient-shift 8s ease-in-out 1s infinite;"
+          >
+            {tagline}
+          </span>
+        </h1>
+
+        {description && (
+          <p
+            class="mt-4 animate-fade-in-up text-[0.9375rem] sm:text-[1rem] leading-relaxed text-ink-500 dark:text-ink-400 m-0 max-w-[64ch]"
+            style="animation-delay: 0.15s;"
+          >
+            {description}
+          </p>
+        )}
+      </div>
+
+      {/* Trust stats row */}
+      {trustStats.length > 0 && (
+        <dl
+          class="mt-7 grid grid-cols-2 gap-x-4 gap-y-3 sm:grid-cols-4"
+          aria-label="Directory at a glance"
+        >
+          {trustStats.map((s) => (
+            <div class="flex flex-col gap-0.5">
+              <dt class="sr-only">{s.label}</dt>
+              <dd class="m-0 font-mono text-[1.25rem] font-semibold tracking-tight text-ink-900 dark:text-ink-100">
+                {s.value}
+              </dd>
+              <dd class="m-0 text-2xs uppercase tracking-wider text-ink-500 dark:text-ink-400">
+                {s.label}
+              </dd>
+            </div>
+          ))}
+        </dl>
       )}
 
+      {/* Search + filters */}
       <form
-        class="mt-8 flex flex-col gap-2 sm:flex-row sm:items-center"
+        class="mt-7 flex flex-col gap-2 sm:flex-row sm:items-stretch"
         role="search"
         action={searchHref}
         method="get"
-        data-grove-hero-search
       >
         <label class="relative flex-1">
-          <span class="sr-only">Search</span>
+          <span class="sr-only">Search {itemsLabel}, stacks, categories, licenses</span>
           <svg
-            aria-hidden="true"
             viewBox="0 0 16 16"
-            width="14"
-            height="14"
-            class="pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-ink-400"
+            width="16"
+            height="16"
+            aria-hidden="true"
+            class="pointer-events-none absolute left-3.5 top-1/2 -translate-y-1/2 text-ink-400"
             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>
+            <path
+              d="M10.68 11.74a6 6 0 0 1-7.922-8.982 6 6 0 0 1 8.982 7.922l3.04 3.04a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215ZM11.5 7a4.499 4.499 0 1 0-8.997 0A4.499 4.499 0 0 0 11.5 7Z"
+            ></path>
           </svg>
           <input
             type="search"
             name="q"
             placeholder={searchPlaceholder}
-            autocomplete="off"
-            class="w-full rounded-md border border-ink-200 bg-white py-2.5 pl-9 pr-3 text-sm placeholder:text-ink-400 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"
+            class="h-10 w-full rounded-md border border-ink-200 bg-white pl-10 pr-3 text-[0.9375rem] text-ink-900 placeholder:text-ink-400 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 dark:placeholder:text-ink-500 dark:focus:border-ink-100 dark:focus:ring-ink-100/15"
           />
         </label>
-        <button type="submit" class="grove-btn grove-btn-primary">
+        <a
+          href={searchHref}
+          class="inline-flex h-10 items-center justify-center gap-1.5 rounded-md border border-ink-200 bg-white px-3 text-[0.875rem] font-medium text-ink-700 transition-colors hover:border-ink-300 hover:bg-ink-50 dark:border-ink-800 dark:bg-ink-950 dark:text-ink-300 dark:hover:border-ink-700 dark:hover:bg-ink-900/40"
+          aria-label={`Browse all ${itemsLabel} with filters`}
+        >
+          <svg viewBox="0 0 16 16" width="13" height="13" aria-hidden="true" fill="currentColor">
+            <path d="M.75 3h14.5a.75.75 0 0 1 .55 1.26l-5.55 6.1v4.39a.75.75 0 0 1-1.2.6l-2.5-1.87a.75.75 0 0 1-.3-.6v-2.52L.2 4.26A.75.75 0 0 1 .75 3Z"/>
+          </svg>
+          <span>Filters</span>
+        </a>
+        <button
+          type="submit"
+          class="grove-btn grove-btn-primary h-10 px-4 sm:px-5"
+        >
           Search
         </button>
       </form>
 
+      {quickFilters.length > 0 && (
+        <p
+          class="mt-2 text-2xs text-ink-500 dark:text-ink-400 m-0"
+          aria-hidden="true"
+        >
+          Try{" "}
+          {quickFilters.map((f, i) => (
+            <>
+              <a
+                href={f.href}
+                class="font-mono text-ink-700 underline-offset-2 hover:underline dark:text-ink-300"
+              >
+                {f.label}
+              </a>
+              {i < quickFilters.length - 1 && <span class="mx-1">·</span>}
+            </>
+          ))}
+        </p>
+      )}
+
       {ctas.length > 0 && (
-        <div class="mt-4 flex flex-wrap items-center gap-2">
+        <div class="mt-5 flex flex-wrap items-center gap-2">
           {ctas.map((cta) => (
             <a
               href={cta.href}
@@ -170,77 +275,23 @@ const hasStats =
         </div>
       )}
 
-      {hasStats && (
-        <dl
-          class="mt-10 flex flex-wrap items-center gap-x-6 gap-y-3 text-2xs text-ink-500 dark:text-ink-400"
-          aria-label="Directory statistics"
-        >
-          {stats.apps !== undefined && (
-            <div class="flex items-baseline gap-1.5">
-              <dd class="m-0 font-mono text-base font-semibold text-ink-900 dark:text-ink-100">
-                {fmt(stats.apps)}
-              </dd>
-              <dt>apps</dt>
-            </div>
-          )}
-          {stats.categories !== undefined && (
-            <div class="flex items-baseline gap-1.5">
-              <dd class="m-0 font-mono text-base font-semibold text-ink-900 dark:text-ink-100">
-                {fmt(stats.categories)}
-              </dd>
-              <dt>categories</dt>
-            </div>
-          )}
-          {stats.stacks !== undefined && (
-            <div class="flex items-baseline gap-1.5">
-              <dd class="m-0 font-mono text-base font-semibold text-ink-900 dark:text-ink-100">
-                {fmt(stats.stacks)}
-              </dd>
-              <dt>stacks</dt>
-            </div>
-          )}
-          {stats.contributors !== undefined && (
-            <div class="flex items-baseline gap-1.5">
-              <dd class="m-0 font-mono text-base font-semibold text-ink-900 dark:text-ink-100">
-                {fmt(stats.contributors)}
-              </dd>
-              <dt>contributors</dt>
-            </div>
-          )}
-          {stats.stars !== undefined && (
-            <div class="flex items-baseline gap-1.5">
-              <dd class="m-0 font-mono text-base font-semibold text-ink-900 dark:text-ink-100">
-                {fmt(stats.stars)}
-              </dd>
-              <dt>total stars</dt>
-            </div>
-          )}
-        </dl>
+      {/* Help debug the type system when callers forget to pass ctas. */}
+      {ctas.length === 0 && githubUrl && (
+        <div class="mt-5 flex flex-wrap items-center gap-2">
+          <a href={searchHref} class="grove-btn grove-btn-primary">
+            Browse {itemsLabel}
+          </a>
+          <a
+            href={`${githubUrl}/blob/main/CONTRIBUTING.md`}
+            target="_blank"
+            rel="noopener noreferrer"
+            class="grove-btn grove-btn-outline"
+          >
+            Submit via GitHub
+          </a>
+        </div>
       )}
+      {singular /* suppress unused warning on the singular variable */ ? null : null}
     </div>
-  </div>
+  </Container>
 </section>
-
-<style>
-  .grove-hero__gradient {
-    background: linear-gradient(
-      120deg,
-      rgba(31, 111, 235, 0.08) 0%,
-      rgba(110, 231, 183, 0.06) 35%,
-      rgba(253, 186, 116, 0.06) 65%,
-      rgba(147, 197, 253, 0.08) 100%
-    );
-    background-size: 200% 200%;
-    animation: var(--animate-gradient-shift, gradient-shift 8s ease-in-out infinite);
-  }
-  :global(.dark) .grove-hero__gradient {
-    background: linear-gradient(
-      120deg,
-      rgba(31, 111, 235, 0.18) 0%,
-      rgba(6, 95, 70, 0.12) 35%,
-      rgba(67, 20, 7, 0.12) 65%,
-      rgba(30, 64, 175, 0.18) 100%
-    );
-    background-size: 200% 200%;
-  }
-</style>

package/src/components/Icon.astro

@@ -10,7 +10,7 @@
  * this component.
  *
  * The component is **generic** — it does not import any consumer-side
- * `siteConfig`, `app`, or blueprint-specific module. Every consumer
+ * `siteConfig`, `item`, or blueprint-specific module. Every consumer
  * supplies its own icon list (and optionally an `aliases` map for
  * friendly ids) via props, and any `name` not in the registry
  * falls back to the initials placeholder.
@@ -104,8 +104,14 @@ function resolveName(raw: string): string {
 }
 
 const resolved = resolveName(name);
+const platformStackIcons = new Set(["docker"]);
+const textOnlyPlatforms = new Set(["self-host", "self-hosted"]);
 const folder =
-  category === "stack" ? "stacks" : category === "platform" ? "platforms" : "brands";
+  category === "stack" || (category === "platform" && platformStackIcons.has(resolved))
+    ? "stacks"
+    : category === "platform"
+      ? "platforms"
+      : "brands";
 const baseUrl = `${base.replace(/\/$/, "")}/${folder}/${resolved}`;
 
 // Static: just point at the canonical svg.
@@ -116,7 +122,8 @@ const init = (fallbackInitials ?? name ?? "")
   .replace(/[^a-z0-9]/gi, "")
   .slice(0, 2)
   .toUpperCase();
-const showFallback = !resolved;
+const showFallback =
+  !resolved || (category === "platform" && textOnlyPlatforms.has(resolved));
 
 // Build aria-label.
 const ariaLabel = title ?? name;