@grove-dev/astro 0.1.5 → 0.2.5

package/templates/default/src/components/ScoreBars.astro

@@ -1,72 +0,0 @@
----
-import { SCORE_DIMENSIONS, SCORE_LABELS, scoreTier, scoreLabel } from "../lib/scores";
-import type { AppScores } from "../data/types";
-
-interface Props {
-  scores?: AppScores;
-  /** Show the "Overall" dimension too (default true). */
-  showOverall?: boolean;
-  /** Compact mode: hide value text, bar only. */
-  compact?: boolean;
-  class?: string;
-}
-
-const { scores, showOverall = true, compact = false, class: className = "" } = Astro.props;
-const dims = showOverall ? SCORE_DIMENSIONS : SCORE_DIMENSIONS.filter((d) => d !== "overall");
-const hasAny = scores && Object.values(scores).some((v) => typeof v === "number");
----
-
-<dl
-  class={`flex flex-wrap items-center gap-x-3 gap-y-1.5 text-2xs ${className}`}
-  aria-label="App scores"
->
-  {!hasAny && (
-    <span class="text-ink-400 dark:text-ink-500">Scores not yet curated</span>
-  )}
-  {hasAny &&
-    dims.map((dim) => {
-      const v = scores![dim];
-      const tier = typeof v === "number" ? scoreTier(v) : 0;
-      const isOverall = dim === "overall";
-      return (
-        <div class="inline-flex items-center gap-1.5">
-          <dt
-            class={`${
-              isOverall
-                ? "font-semibold text-ink-700 dark:text-ink-200"
-                : "text-ink-500 dark:text-ink-400"
-            }`}
-          >
-            {SCORE_LABELS[dim]}
-          </dt>
-          {!compact && (
-            <dd
-              class={`font-mono ${
-                isOverall
-                  ? "text-ink-900 dark:text-ink-100"
-                  : "text-ink-700 dark:text-ink-300"
-              }`}
-            >
-              {scoreLabel(v)}
-            </dd>
-          )}
-          <dd
-            class="flex h-1.5 w-10 gap-px"
-            aria-label={`${SCORE_LABELS[dim]} ${scoreLabel(v)} of 100`}
-          >
-            {[0, 1, 2, 3].map((i) => (
-              <div
-                class={`flex-1 rounded-sm ${
-                  i < tier
-                    ? isOverall
-                      ? "bg-ink-700 dark:bg-ink-200"
-                      : "bg-ink-500 dark:bg-ink-400"
-                    : "bg-ink-200 dark:bg-ink-800"
-                }`}
-              />
-            ))}
-          </dd>
-        </div>
-      );
-    })}
-</dl>

package/templates/default/src/components/SmartLensTabs.astro

@@ -1,65 +0,0 @@
----
-import { LENSES, PRIMARY_LENSES, isLensActive, type LensId } from "../lib/lenses";
-
-interface Props {
-  currentParams: URLSearchParams;
-  class?: string;
-}
-
-const { currentParams, class: className = "" } = Astro.props;
-
-// Render only the 6 primary lenses, in declared order.
-const tabs = PRIMARY_LENSES.map((id) => LENSES.find((l) => l.id === id)!).filter(Boolean);
-
-// Build href for a lens: merge lens's params on top of current search.
-function hrefFor(lensId: LensId): string {
-  const sp = new URLSearchParams(currentParams);
-  // Clear any existing lens
-  sp.delete("lens");
-  if (lensId !== "all") {
-    const def = LENSES.find((l) => l.id === lensId);
-    if (def) {
-      for (const [k, v] of Object.entries(def.toParams())) {
-        if (Array.isArray(v)) {
-          sp.delete(k);
-          for (const item of v) sp.append(k, item);
-        } else {
-          sp.set(k, v);
-        }
-      }
-    }
-  }
-  const qs = sp.toString();
-  return qs ? `/apps?${qs}` : "/apps";
-}
----
-
-<nav
-  class={`overflow-x-auto ${className}`}
-  aria-label="Curated lenses"
->
-  <ul class="m-0 flex list-none items-center gap-1 p-0 whitespace-nowrap">
-    {
-      tabs.map((lens) => {
-        const isActive = isLensActive(lens.id, currentParams);
-        return (
-          <li>
-            <a
-              href={hrefFor(lens.id)}
-              data-lens-id={lens.id}
-              class={`lens-tab inline-flex items-center gap-1.5 rounded-md border px-2.5 py-1 text-2xs font-medium transition-colors ${
-                isActive
-                  ? "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-current={isActive ? "page" : undefined}
-              title={lens.description}
-            >
-              {lens.label}
-            </a>
-          </li>
-        );
-      })
-    }
-  </ul>
-</nav>

package/templates/default/src/components/StackGrid.astro

@@ -1,95 +0,0 @@
----
-import type { Stack } from "../data/stacks";
-import SectionHeader from "./layout/SectionHeader.astro";
-import Container from "./layout/Container.astro";
-import Icon from "./icons/Icon.astro";
-import { countByStack } from "../lib/taxonomy-counts";
-
-interface Props {
-  stacks: Stack[];
-}
-
-const { stacks } = Astro.props;
-const counts = countByStack();
-
-const statusLabel: Record<Stack["status"], string> = {
-  live: "Available now",
-  expanding: "Expanding",
-  planned: "Planned",
-};
-
-const statusBadge: Record<Stack["status"], string> = {
-  live: "border-emerald-300/60 bg-emerald-50 text-emerald-800 dark:border-emerald-800/60 dark:bg-emerald-950/40 dark:text-emerald-300",
-  expanding: "border-ink-200 bg-ink-50 text-ink-700 dark:border-ink-800 dark:bg-ink-900/60 dark:text-ink-300",
-  planned: "border-ink-200 bg-white text-ink-500 dark:border-ink-800 dark:bg-ink-950 dark:text-ink-500",
-};
-
-// Decorative count for each stack. We render it as a small "n apps" pill
-// for live stacks and as a "0 apps" / "Planned" pill for the rest so the
-// UI is honest about coverage — no fake numbers, no "Available now"
-// stacks that secretly have zero apps.
-const enriched = stacks
-  .map((s) => ({ ...s, count: counts.get(s.slug) ?? 0 }))
-  .sort((a, b) => b.count - a.count);
----
-
-<section
-  id="stacks"
-  class="section scroll-mt-20 border-b border-ink-200 dark:border-ink-800"
->
-  <Container>
-    <SectionHeader
-      eyebrow="Stacks"
-      title="Browse by stack"
-      description="Pick a stack to see real apps built with it."
-    />
-
-    <div class="grid grid-cols-1 gap-2 sm:grid-cols-2 lg:grid-cols-3">
-      {
-        enriched.map((stack) => (
-          <a
-            href={`/apps?stack=${encodeURIComponent(stack.name)}`}
-            class="card card-hover group flex h-full items-center gap-3 p-3.5 no-underline"
-          >
-            {/* Compact stack icon — supports the card without dominating it */}
-            <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={stack.name}
-                category="stack"
-                size={18}
-                class="h-[18px] w-[18px]"
-              />
-            </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">
-                  {stack.name}
-                </h3>
-                <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"
-                  title={`${stack.count} apps in this stack`}
-                >
-                  {stack.count} apps
-                </span>
-              </div>
-              <p class="m-0 truncate text-2xs text-ink-500 dark:text-ink-400">
-                {stack.blurb}
-              </p>
-            </div>
-
-            <span
-              class={`shrink-0 inline-flex items-center rounded-md border px-1.5 py-0.5 text-[10px] font-medium uppercase tracking-wider ${statusBadge[stack.status]}`}
-              aria-label={`Status: ${statusLabel[stack.status]}`}
-            >
-              {statusLabel[stack.status]}
-            </span>
-          </a>
-        ))
-      }
-    </div>
-  </Container>
-</section>

package/templates/default/src/components/WhyThisExists.astro

@@ -1,81 +0,0 @@
----
-import Container from "./layout/Container.astro";
-
-const points = [
-  {
-    title: "Real apps",
-    body: "Not SDKs, templates, or tiny demos. Focused on complete applications you can actually run.",
-    icon: "app",
-  },
-  {
-    title: "Codebase context",
-    body: "Stack, platform, license, activity, maturity, and contribution signals — one card per app.",
-    icon: "code",
-  },
-  {
-    title: "Searchable discovery",
-    body: "Browse by category, stack, platform, stars, recency, and status — not a flat README list.",
-    icon: "search",
-  },
-];
----
-
-<section id="about" class="section scroll-mt-20 border-b border-ink-200 dark:border-ink-800">
-  <Container>
-    <div class="flex flex-col gap-2">
-      <span
-        class="text-2xs font-medium uppercase tracking-wider text-ink-500 dark:text-ink-400"
-        >Why this exists</span
-      >
-      <h2
-        class="text-[1.5rem] sm:text-[1.75rem] font-semibold tracking-tight text-ink-900 dark:text-ink-100 m-0 max-w-[40ch]"
-      >
-        Most open-source app discovery is fragmented.
-      </h2>
-      <p
-        class="text-[0.9375rem] leading-relaxed text-ink-500 dark:text-ink-400 m-0 max-w-[64ch]"
-      >
-        GitHub search shows repositories, not always usable products. Awesome
-        lists are helpful, but they tend to become long static README files.
-        This project focuses on real applications: projects with source code,
-        product context, stack information, activity signals, and enough
-        structure to help developers learn, compare, and contribute.
-      </p>
-    </div>
-
-    <ul
-      class="mt-7 grid list-none grid-cols-1 gap-3 p-0 m-0 sm:grid-cols-3"
-    >
-      {
-        points.map((p) => (
-          <li class="card p-4">
-            <div
-              class="mb-3 flex h-8 w-8 items-center justify-center rounded-md border border-ink-200 bg-white text-ink-700 dark:border-ink-800 dark:bg-ink-950 dark:text-ink-300"
-              aria-hidden="true"
-            >
-              {p.icon === "app" ? (
-                <svg viewBox="0 0 16 16" width="16" height="16" fill="currentColor">
-                  <path d="M3 2.75A2.25 2.25 0 0 1 5.25.5h5.5A2.25 2.25 0 0 1 13 2.75v10.5A2.25 2.25 0 0 1 10.75 15.5h-5.5A2.25 2.25 0 0 1 3 13.25V2.75ZM5.25 2a.75.75 0 0 0-.75.75v10.5c0 .414.336.75.75.75h5.5a.75.75 0 0 0 .75-.75V2.75a.75.75 0 0 0-.75-.75h-5.5Z"/>
-                </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 1 1 1.06-1.06l4.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.66-3.72Z"/>
-                </svg>
-              ) : (
-                <svg viewBox="0 0 16 16" width="16" height="16" fill="currentColor">
-                  <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"/>
-                </svg>
-              )}
-            </div>
-            <h3 class="m-0 text-[0.9375rem] font-semibold text-ink-900 dark:text-ink-100">
-              {p.title}
-            </h3>
-            <p class="mt-1.5 m-0 text-[0.8125rem] leading-relaxed text-ink-500 dark:text-ink-400">
-              {p.body}
-            </p>
-          </li>
-        ))
-      }
-    </ul>
-  </Container>
-</section>

package/templates/default/src/components/icons/Icon.astro

@@ -1,148 +0,0 @@
----
-// Brand icon registry.
-//
-// Strategy: icons live as static SVGs in `public/icons/`. The fetch
-// script (`scripts/fetch-icons.mjs`) downloads the well-known
-// brand icons from the public `xandemon/developer-icons` repo on
-// prebuild. Missing icons (windows, web, desktop, chromeos,
-// embedded, ionic, capacitor) are hand-rolled in `public/icons/`.
-//
-// Theme-aware variants: some icons (Apple for iOS / macOS) ship
-// in light and dark silhouettes and need to be swapped with
-// the page's color scheme. The Icon component renders BOTH img
-// tags and uses Tailwind's `dark:hidden` / `hidden dark:block` to
-// show only the right one.
-//
-// Usage:
-//   <Icon name="Flutter" category="stack"   size={12} />
-//   <Icon name="iOS"      category="platform" size={12} />
-//
-// Falls back to a small generic dot if no icon is found so the chip
-// still has visual weight.
-
-interface Props {
-  /** Friendly name, e.g. "Flutter", "React Native", "iOS", "Web". */
-  name: string;
-  /** "stack" or "platform" — controls where we look in /icons/. */
-  category?: "stack" | "platform";
-  size?: number;
-  class?: string;
-  title?: string;
-}
-
-const { name, category = "stack", size = 12, class: className = "", title } = Astro.props;
-
-function slugify(s: string): string {
-  return s
-    .toLowerCase()
-    .trim()
-    .replace(/\+/g, "plus")
-    .replace(/\./g, "")
-    .replace(/[\s/]+/g, "-")
-    .replace(/-+/g, "-")
-    .replace(/^-|-$/g, "")
-    .replace(/[^a-z0-9-]/g, "");
-}
-
-// Friendly name → icon filename. Add a new alias when a chip needs
-// to render an icon that lives under a different filename.
-const ALIASES: Record<string, string> = {
-  // stacks
-  react: "react",
-  "react-native": "react-native",
-  "node-js": "nodejs",
-  nodejs: "nodejs",
-  "node.js": "nodejs",
-  mongodb: "mongodb",
-  tensorflow: "tensorflow",
-  ionic: "ionic",
-  "ionic-capacitor": "ionic",
-  ionicframework: "ionic",
-  capacitor: "capacitor",  // distinct from ionic — proper Capacitor brand mark
-  "kotlin-multiplatform": "kotlin",
-  kmp: "kotlin",
-  // platforms
-  ios: "ios",
-  ipados: "ios",
-  macos: "macos",
-  osx: "macos",
-  "mac-os": "macos",
-  web: "web",
-  chromeos: "chromeos",
-  "chrome-os": "chromeos",
-  windows: "windows",
-  win: "windows",
-  desktop: "desktop",
-  embedded: "embedded",
-};
-
-// These icons have explicit light + dark variants. We render both
-// and let CSS swap based on the `.dark` class on <html>.
-const THEME_AWARE = new Set([
-  "ios",         // maps to apple-dark (light) + apple-light (dark)
-  "macos",       // maps to apple-light (light) + apple-dark (dark)
-]);
-
-const slug = slugify(name);
-const resolved = ALIASES[slug] ?? slug;
-const baseDir = category === "platform" ? "platforms" : "stacks";
-const url = (file: string) => `/icons/${baseDir}/${file}.svg`;
-
-const isThemeAware = THEME_AWARE.has(resolved);
-
-// Map theme-aware platform → { light: file, dark: file }
-const THEME_PAIRS: Record<string, { light: string; dark: string }> = {
-  ios:   { light: "apple-dark",  dark: "apple-light" },
-  macos: { light: "apple-light", dark: "apple-dark"  },
-};
----
-
-{
-  isThemeAware ? (
-    <>
-      {/* Light theme → light variant */}
-      <img
-        src={url(THEME_PAIRS[resolved].light)}
-        alt=""
-        width={size}
-        height={size}
-        loading="lazy"
-        decoding="async"
-        aria-hidden={title ? undefined : "true"}
-        class={`inline-block shrink-0 object-contain select-none dark:hidden ${className}`}
-        style={`width:${size}px;height:${size}px;`}
-      />
-      {/* Dark theme → dark variant */}
-      <img
-        src={url(THEME_PAIRS[resolved].dark)}
-        alt=""
-        width={size}
-        height={size}
-        loading="lazy"
-        decoding="async"
-        aria-hidden={title ? undefined : "true"}
-        class={`inline-block shrink-0 object-contain select-none hidden dark:inline-block ${className}`}
-        style={`width:${size}px;height:${size}px;`}
-      />
-    </>
-  ) : resolved ? (
-    <img
-      src={url(resolved)}
-      alt=""
-      width={size}
-      height={size}
-      loading="lazy"
-      decoding="async"
-      aria-hidden={title ? undefined : "true"}
-      class={`inline-block shrink-0 object-contain select-none ${className}`}
-      style={`width:${size}px;height:${size}px;`}
-    />
-  ) : (
-    <span
-      aria-hidden="true"
-      class={`inline-block shrink-0 rounded-full bg-current opacity-40 ${className}`}
-      style={`width:${size}px;height:${size}px;`}
-    />
-  )
-}
-{title && <span class="sr-only">{title}</span>}

package/templates/default/src/components/layout/SectionHeader.astro

@@ -1,42 +0,0 @@
----
-interface Props {
-  eyebrow?: string;
-  title: string;
-  description?: string;
-  align?: "left" | "center";
-  level?: 2 | 3;
-}
-
-const { eyebrow, title, description, align = "left", level = 2 } = Astro.props;
-const Heading = `h${level}` as "h2" | "h3";
----
-
-<header
-  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>
-    )
-  }
-  <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/templates/default/src/components/layout/ThemeToggle.astro

@@ -1,97 +0,0 @@
----
-// A three-position theme switcher: light / dark / system.
-//
-// State is persisted in `localStorage` under the key "open-apps-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;
-}
-
-const { class: className = "" } = Astro.props;
----
-
-<button
-  type="button"
-  id="theme-toggle"
-  data-theme-toggle
-  aria-label="Toggle theme"
-  title="Toggle theme"
-  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="h-4 w-4 hidden dark:block"
-    viewBox="0 0 24 24"
-    fill="none"
-    stroke="currentColor"
-    stroke-width="1.8"
-    stroke-linecap="round"
-    stroke-linejoin="round"
-    aria-hidden="true"
-  >
-    <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="h-4 w-4 block dark:hidden"
-    viewBox="0 0 24 24"
-    fill="none"
-    stroke="currentColor"
-    stroke-width="1.8"
-    stroke-linecap="round"
-    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"/>
-  </svg>
-</button>
-
-<script>
-  // The toggle button simply rotates between the three modes on
-  // click. The actual class application lives in the page-level
-  // THEME_INIT script so behaviour stays consistent.
-  const STORAGE_KEY = "open-apps-theme";
-  type Mode = "light" | "dark" | "system";
-
-  function currentMode(): Mode {
-    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 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) => {
-    updateLabel(btn);
-    btn.addEventListener("click", () => {
-      rotate();
-      updateLabel(btn);
-    });
-    btn.addEventListener("mouseenter", () => updateLabel(btn));
-    btn.addEventListener("focus", () => updateLabel(btn));
-  });
-</script>