@grove-dev/astro 0.1.5 → 0.2.2

package/src/components/ExploreByCategory.astro

@@ -0,0 +1,67 @@
+---
+/**
+ * ExploreByCategory — compact, count-only browse-by-category row.
+ *
+ * Light sibling of CategoryGrid. Pill-style links with a count.
+ * Generic: takes `{ name, slug, count }` entries.
+ */
+
+interface CategoryEntry {
+  name: string;
+  slug: string;
+  count?: number;
+}
+
+interface Props {
+  categories: CategoryEntry[];
+  pathPrefix?: string;
+  title?: string;
+  description?: string;
+  class?: string;
+}
+
+const {
+  categories,
+  pathPrefix = "/",
+  title = "Explore by category",
+  description,
+  class: className = "",
+} = Astro.props;
+
+function buildHref(slug: string): string {
+  const base = pathPrefix.replace(/\/$/, "");
+  return `${base}?category=${encodeURIComponent(slug)}`;
+}
+---
+
+<section class:list={["grove-section-tight", className]}>
+  <div class="grove-container-wide mx-auto px-5 sm:px-7">
+    <header class="mb-3 flex flex-col gap-1">
+      <h2 class="m-0 text-[1.125rem] font-semibold tracking-tight text-ink-900 dark:text-ink-100">
+        {title}
+      </h2>
+      {description && (
+        <p class="m-0 text-[0.8125rem] text-ink-500 dark:text-ink-400">
+          {description}
+        </p>
+      )}
+    </header>
+    <ul class="m-0 flex list-none flex-wrap gap-2 p-0">
+      {categories.map((c) => (
+        <li>
+          <a
+            href={buildHref(c.slug)}
+            class="grove-badge inline-flex items-center gap-1.5 transition-colors hover:border-ink-400 dark:hover:border-ink-600"
+            data-event="explore_category_click"
+            data-event-source="explore_category"
+          >
+            <span>{c.name}</span>
+            {typeof c.count === "number" && (
+              <span class="font-mono text-ink-400">{c.count}</span>
+            )}
+          </a>
+        </li>
+      ))}
+    </ul>
+  </div>
+</section>

package/src/components/ExploreByStack.astro

@@ -0,0 +1,72 @@
+---
+/**
+ * ExploreByStack — compact, count-only browse-by-stack row.
+ *
+ * The "explore" companion to StackGrid. Renders a single dense row
+ * of pill links (one per stack) with a count next to each. No
+ * cards, no blurbs — meant for the section that fits below the
+ * primary lens grid.
+ *
+ * Generic: takes a list of `{ name, slug, count }` entries. No
+ * blueprint-specific terms.
+ */
+
+interface StackEntry {
+  name: string;
+  slug: string;
+  count?: number;
+}
+
+interface Props {
+  stacks: StackEntry[];
+  pathPrefix?: string;
+  title?: string;
+  description?: string;
+  class?: string;
+}
+
+const {
+  stacks,
+  pathPrefix = "/",
+  title = "Explore by stack",
+  description,
+  class: className = "",
+} = Astro.props;
+
+function buildHref(slug: string): string {
+  const base = pathPrefix.replace(/\/$/, "");
+  return `${base}?stack=${encodeURIComponent(slug)}`;
+}
+---
+
+<section class:list={["grove-section-tight", className]}>
+  <div class="grove-container-wide mx-auto px-5 sm:px-7">
+    <header class="mb-3 flex flex-col gap-1">
+      <h2 class="m-0 text-[1.125rem] font-semibold tracking-tight text-ink-900 dark:text-ink-100">
+        {title}
+      </h2>
+      {description && (
+        <p class="m-0 text-[0.8125rem] text-ink-500 dark:text-ink-400">
+          {description}
+        </p>
+      )}
+    </header>
+    <ul class="m-0 flex list-none flex-wrap gap-2 p-0">
+      {stacks.map((s) => (
+        <li>
+          <a
+            href={buildHref(s.slug)}
+            class="grove-badge inline-flex items-center gap-1.5 transition-colors hover:border-ink-400 dark:hover:border-ink-600"
+            data-event="explore_stack_click"
+            data-event-source="explore_stack"
+          >
+            <span>{s.name}</span>
+            {typeof s.count === "number" && (
+              <span class="font-mono text-ink-400">{s.count}</span>
+            )}
+          </a>
+        </li>
+      ))}
+    </ul>
+  </div>
+</section>

package/src/components/Hero.astro

@@ -0,0 +1,246 @@
+---
+/**
+ * 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.
+ *
+ * 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.
+ */
+
+interface CTA {
+  label: string;
+  href: string;
+  variant?: "primary" | "outline" | "ghost";
+  external?: boolean;
+}
+
+interface HeroStats {
+  apps?: number;
+  categories?: number;
+  stacks?: number;
+  contributors?: number;
+  stars?: number;
+}
+
+interface Props {
+  /** Site/brand name — rendered as the heading. */
+  name: string;
+  /** Short tagline displayed under the heading. */
+  tagline: string;
+  /** Longer description, rendered below the tagline. */
+  description?: string;
+  /** Trust stats row. */
+  stats?: HeroStats;
+  /** Placeholder for the search input. */
+  searchPlaceholder?: string;
+  /** Form action — the list page URL (e.g. "/projects"). */
+  searchHref?: string;
+  /** Optional CTAs rendered next to the search form. */
+  ctas?: CTA[];
+  /** Extra class for the outer <section>. */
+  class?: string;
+  /** Eyebrow text rendered above the title. */
+  eyebrow?: string;
+}
+
+const {
+  name,
+  tagline,
+  description,
+  stats = {},
+  searchPlaceholder = "Search the directory...",
+  searchHref = "/",
+  ctas = [],
+  class: className = "",
+  eyebrow,
+} = 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();
+}
+
+const hasStats =
+  stats.apps !== undefined ||
+  stats.categories !== undefined ||
+  stats.stacks !== undefined ||
+  stats.contributors !== undefined ||
+  stats.stars !== undefined;
+---
+
+<section
+  class:list={[
+    "grove-hero 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"
+  ></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">
+          {eyebrow}
+        </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>
+      )}
+
+      <form
+        class="mt-8 flex flex-col gap-2 sm:flex-row sm:items-center"
+        role="search"
+        action={searchHref}
+        method="get"
+        data-grove-hero-search
+      >
+        <label class="relative flex-1">
+          <span class="sr-only">Search</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"
+            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>
+          <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"
+          />
+        </label>
+        <button type="submit" class="grove-btn grove-btn-primary">
+          Search
+        </button>
+      </form>
+
+      {ctas.length > 0 && (
+        <div class="mt-4 flex flex-wrap items-center gap-2">
+          {ctas.map((cta) => (
+            <a
+              href={cta.href}
+              class:list={[
+                "grove-btn",
+                cta.variant === "primary"
+                  ? "grove-btn-primary"
+                  : cta.variant === "ghost"
+                    ? "grove-btn-ghost"
+                    : "grove-btn-outline",
+              ]}
+              {...(cta.external
+                ? { target: "_blank", rel: "noopener noreferrer" }
+                : {})}
+              data-event="hero_cta_click"
+              data-event-source="hero"
+            >
+              {cta.label}
+            </a>
+          ))}
+        </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>
+      )}
+    </div>
+  </div>
+</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

@@ -0,0 +1,223 @@
+---
+/**
+ * Icon — brand icon registry.
+ *
+ * Renders an `<img src="/icons/{stacks|platforms|brands}/{name}.svg" />`
+ * for a given registry name. The Astro integration ships the default
+ * `public/icons/{stacks,platforms}/` assets inside the `default`
+ * template's `public/` directory; consumers can ship their own SVGs
+ * under the same path (or override the `base` prop) without forking
+ * this component.
+ *
+ * The component is **generic** — it does not import any consumer-side
+ * `siteConfig`, `app`, 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.
+ *
+ * `category` selects the subfolder:
+ *
+ *   - "stack"     → `/icons/stacks/{name}.svg`
+ *   - "platform"  → `/icons/platforms/{name}.svg`
+ *   - "brand"     → `/icons/brands/{name}.svg`   (consumer-supplied)
+ *
+ * Theme-aware: when the consumer sets `mode: "auto"` the component
+ * looks for `{name}-light.svg` and `{name}-dark.svg` siblings in
+ * addition to the default `{name}.svg` and switches the `src` based
+ * on the resolved theme via the inline `data-grove-icon` script.
+ * For static (non-themed) icons this is a no-op — set `mode: "static"`
+ * (the default) to keep the markup simple and avoid hydration cost.
+ *
+ * Aliases: a tiny `aliases` map (e.g. `rn → react-native`) lets the
+ * registry accept multiple ids for the same asset without a renames
+ * pass. The lookup falls through the aliases map before failing over
+ * to the initials placeholder.
+ */
+import { getOwnerAndRepoFromRepoUrl } from "../lib/repo";
+
+export type IconCategory = "stack" | "platform" | "brand";
+export type IconMode = "static" | "auto";
+
+interface Props {
+  /**
+   * Registry id. Resolved through `aliases` first, then matched
+   * against the SVG file name (case-insensitive, slug-normalized).
+   */
+  name: string;
+  /** Subfolder under `/icons/`. */
+  category: IconCategory;
+  /** Pixel size (square). Defaults to 16. */
+  size?: number;
+  /** Extra class for the outer wrapper. */
+  class?: string;
+  /** Tooltip / aria-label. */
+  title?: string;
+  /**
+   * Static (single SVG) or auto (light/dark variants via inline
+   * script). Default "static".
+   */
+  mode?: IconMode;
+  /**
+   * Optional id → id remap. Lookup goes `name → aliases[name] →
+   * {name}.svg` (case-insensitive).
+   */
+  aliases?: Record<string, string>;
+  /**
+   * Initials to render when the icon file is missing. Defaults to
+   * the first 1–2 characters of `name`.
+   */
+  fallbackInitials?: string;
+  /**
+   * Base path for icon files. Defaults to `/icons` (matches the
+   * default template's `public/icons/`).
+   */
+  base?: string;
+}
+
+const {
+  name,
+  category,
+  size = 16,
+  class: className = "",
+  title,
+  mode = "static",
+  aliases,
+  fallbackInitials,
+  base = "/icons",
+} = Astro.props;
+
+// Normalize: lowercase + replace spaces/underscores with dashes.
+function slugify(s: string): string {
+  return s.toLowerCase().trim().replace(/[\s_]+/g, "-");
+}
+
+// Resolve `name` through the aliases map.
+function resolveName(raw: string): string {
+  if (!raw) return "";
+  if (aliases) {
+    const lower = raw.toLowerCase();
+    for (const [k, v] of Object.entries(aliases)) {
+      if (k.toLowerCase() === lower) return slugify(v);
+    }
+  }
+  return slugify(raw);
+}
+
+const resolved = resolveName(name);
+const folder =
+  category === "stack" ? "stacks" : category === "platform" ? "platforms" : "brands";
+const baseUrl = `${base.replace(/\/$/, "")}/${folder}/${resolved}`;
+
+// Static: just point at the canonical svg.
+const staticSrc = `${baseUrl}.svg`;
+
+// Initials fallback: first 1–2 alphanumerics, uppercased.
+const init = (fallbackInitials ?? name ?? "")
+  .replace(/[^a-z0-9]/gi, "")
+  .slice(0, 2)
+  .toUpperCase();
+const showFallback = !resolved;
+
+// Build aria-label.
+const ariaLabel = title ?? name;
+const a11y: Record<string, string> = title
+  ? { "aria-label": ariaLabel, role: "img" }
+  : { "aria-hidden": "true", "focusable": "false" };
+---
+
+{
+  showFallback ? (
+    <span
+      class:list={["grove-icon grove-icon-fallback", className]}
+      style={`width:${size}px;height:${size}px;font-size:${Math.max(10, size - 6)}px;`}
+      {...a11y}
+    >
+      {init || "·"}
+    </span>
+  ) : mode === "auto" ? (
+    <img
+      src={staticSrc}
+      data-grove-icon
+      data-grove-icon-light={`${baseUrl}-light.svg`}
+      data-grove-icon-dark={`${baseUrl}-dark.svg`}
+      data-grove-icon-fallback={staticSrc}
+      width={size}
+      height={size}
+      alt=""
+      class:list={["grove-icon grove-icon-themed", className]}
+      {...a11y}
+    />
+  ) : (
+    <img
+      src={staticSrc}
+      width={size}
+      height={size}
+      alt=""
+      class:list={["grove-icon", className]}
+      loading="lazy"
+      decoding="async"
+      {...a11y}
+    />
+  )
+}
+
+<style>
+  .grove-icon {
+    display: inline-block;
+    vertical-align: middle;
+    flex-shrink: 0;
+  }
+  .grove-icon-themed {
+    /* Theme-aware: dark/light variants selected by the inline script
+       below based on `data-resolved-theme` set by BaseLayout's
+       THEME_INIT. Default to the light variant so the markup looks
+       correct even before the script runs. */
+  }
+  .grove-icon-fallback {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 0.25rem;
+    background: var(--color-ink-100, #f4f4f5);
+    color: var(--color-ink-700, #3f3f46);
+    font-weight: 600;
+    line-height: 1;
+    text-transform: uppercase;
+    user-select: none;
+  }
+  :global(.dark) .grove-icon-fallback {
+    background: var(--color-ink-800, #27272a);
+    color: var(--color-ink-200, #e4e4e7);
+  }
+</style>
+
+{mode === "auto" && (
+  <script is:inline>
+    // Theme-aware icon swap. Runs after THEME_INIT (BaseLayout) so
+    // `data-resolved-theme` is already populated. Idempotent — the
+    // MutationObserver picks up theme changes from ThemeToggle.
+    (function () {
+      function swap() {
+        var theme =
+          document.documentElement.dataset.resolvedTheme || "light";
+        var nodes = document.querySelectorAll(
+          "img[data-grove-icon]:not([data-grove-icon-bound])",
+        );
+        for (var i = 0; i < nodes.length; i++) {
+          var img = nodes[i];
+          img.setAttribute("data-grove-icon-bound", "1");
+          var next =
+            theme === "dark"
+              ? img.getAttribute("data-grove-icon-dark")
+              : img.getAttribute("data-grove-icon-light");
+          if (next) img.src = next;
+        }
+      }
+      swap();
+      new MutationObserver(swap).observe(document.documentElement, {
+        attributes: true,
+        attributeFilter: ["data-resolved-theme"],
+      });
+    })();
+  </script>
+)}