@grove-dev/astro 0.3.1 → 0.3.4

package/templates/default/src/pages/[slug]/index.astro

@@ -1,482 +0,0 @@
----
-/**
- * List page — the discovery / browse page.
- *
- * Mirrors the openapps list structure:
- *   - SmartLensTabs (All / Trending / Recently added / Established / Featured)
- *   - RefinePanel  (Stack / Platform / Category / License / Sort)
- *   - RecordSection rows (full record cards; the `ItemSection` V0
- *     name was renamed to `RecordSection` in V1)
- *
- * Generic: the URL slug (e.g. `/projects/`, `/resources/`,
- * `/entities/`) is derived from the blueprint via `getStaticPaths`,
- * so the same page works for every blueprint without per-blueprint
- * forks.
- *
- * Navigation model: full-page render. The form posts via `method="get"`
- * so the browser navigates to `?q=...&sort=...&stack=...`, and the
- * server re-runs `filterRecords` / `applySort` / `paginate` from
- * those query params. No client-side filter shim, no duplicated
- * logic. The URL stays the single source of truth for filter state.
- */
-import siteConfig from "../../../data/generated/site-config.json";
-import {
-  items,
-  itemLabel,
-  itemLabelPlural,
-  taxonomy,
-  taxonomyLabel,
-} from "../../data/records";
-import type { IndexFilters } from "@grove-dev/astro";
-import BaseLayout from "@grove-dev/astro/layouts/BaseLayout.astro";
-import SmartLensTabs from "@grove-dev/astro/components/SmartLensTabs.astro";
-import RefinePanel from "@grove-dev/astro/components/RefinePanel.astro";
-import IndexRow from "@grove-dev/astro/components/IndexRow.astro";
-import Pagination from "@grove-dev/astro/components/Pagination.astro";
-import {
-  activeFilterChips,
-  applySort,
-  buildFacets,
-  effectivePage,
-  effectiveSort,
-  filterRecords,
-  filtersFromSearchParams,
-  searchParamsFromFilters,
-  sortDisplay,
-  SORT_OPTIONS,
-  totalPages,
-} from "@grove-dev/astro";
-
-export function getStaticPaths() {
-  const routeSlug = siteConfig.blueprintConfig?.routeSlug ?? "projects";
-  return [{ params: { slug: routeSlug } }];
-}
-
-const slug = Astro.params.slug as string;
-const total = items.length;
-const filters = filtersFromSearchParams(Astro.url.searchParams);
-function labelFacetsWithTaxonomy(facets: ReturnType<typeof buildFacets>) {
-  return {
-    ...facets,
-    stacks: facets.stacks.map((option) => ({
-      ...option,
-      label: taxonomyLabel("stacks", option.value),
-    })),
-    platforms: facets.platforms.map((option) => ({
-      ...option,
-      label: taxonomyLabel("platforms", option.value),
-    })),
-    categories: facets.categories.map((option) => ({
-      ...option,
-      label: taxonomyLabel("categories", option.value),
-    })),
-  };
-}
-const facets = labelFacetsWithTaxonomy(buildFacets(items));
-const sort = effectiveSort(filters);
-const requestedPage = effectivePage(filters);
-const filtered = filterRecords(items, filters);
-const sorted = applySort(filtered, sort);
-const pages = totalPages(sorted.length);
-const page = Math.min(requestedPage, pages);
-const chips = activeFilterChips(filters);
-const clientItemsJson = JSON.stringify(items).replace(/</g, "\\u003c");
-
-const title = `Browse ${slug} — ${siteConfig.name}`;
-const description = `A searchable directory of ${itemLabelPlural()} for ${siteConfig.name}.`;
-
-function hrefForPage(target: number): string {
-  const next: IndexFilters = { ...filters, page: target };
-  const query = searchParamsFromFilters(next).toString();
-  return query ? `/${slug}?${query}` : `/${slug}`;
-}
-
-function hrefForRemove(key: keyof IndexFilters, value: string): string {
-  const params = new URLSearchParams();
-  const urlKey: Partial<Record<keyof IndexFilters, string>> = {
-    stacks: "stack",
-    platforms: "platform",
-    categories: "category",
-    labels: "label",
-    licenses: "license",
-    statuses: "status",
-    lens: "lens",
-    q: "q",
-  };
-  const target = urlKey[key];
-  if (target === "status") {
-    const next = (params.get("status") ?? "")
-      .split(",")
-      .filter(Boolean)
-      .filter((entry) => entry !== value);
-    params.delete("status");
-    if (next.length) params.set("status", next.join(","));
-  } else if (target) {
-    const values = params.getAll(target).filter((entry) => entry !== value);
-    params.delete(target);
-    for (const entry of values) params.append(target, entry);
-  }
-  const query = params.toString();
-  return query ? `/${slug}?${query}` : `/${slug}`;
-}
----
-
-<BaseLayout
-  title={title}
-  description={description}
-  site={siteConfig}
-  submitHref="/submit"
-  submitLabel={`Submit ${itemLabel()}`}
->
-  <section class="border-b border-ink-200 bg-white dark:border-ink-800 dark:bg-ink-950">
-    <div class="mx-auto w-full max-w-wide px-5 pt-10 sm:px-7 sm:pt-12">
-      <span class="text-2xs font-medium uppercase tracking-wider text-ink-500 dark:text-ink-400">
-        {slug}
-      </span>
-      <h1 class="m-0 mt-1 text-[1.875rem] sm:text-[2.125rem] font-semibold tracking-tight text-ink-900 dark:text-ink-100">
-        Browse {slug}
-      </h1>
-      <p class="m-0 mt-2 max-w-[64ch] text-[0.9375rem] text-ink-500 dark:text-ink-400">
-        Search, filter, and explore {total} {itemLabel()}{total === 1 ? "" : "s"} in this directory.
-      </p>
-
-      <form
-        method="get"
-        action={`/${slug}`}
-        id="search-form"
-        class="mt-6 flex flex-col gap-2 sm:flex-row"
-        role="search"
-      >
-        <label class="relative flex-1">
-          <span class="sr-only">{`Search ${itemLabelPlural()}`}</span>
-          <svg
-            viewBox="0 0 16 16"
-            width="16"
-            height="16"
-            aria-hidden="true"
-            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 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.5 4.5 0 1 0-9 0 4.5 4.5 0 0 0 9 0Z" />
-          </svg>
-          <input
-            id="search-input"
-            type="search"
-            name="q"
-            value={filters.q ?? ""}
-            placeholder={`Search ${itemLabelPlural()}, stacks, categories, platforms, licenses...`}
-            class="h-10 w-full rounded-md border border-ink-200 bg-white py-2 pl-9 pr-3 text-sm 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"
-          />
-        </label>
-        <label class="relative">
-          <span class="sr-only">{`Sort ${itemLabelPlural()}`}</span>
-          <select
-            id="sort-select"
-            name="sort"
-            class="h-10 cursor-pointer appearance-none rounded-md border border-ink-200 bg-white py-1.5 pl-3 pr-8 text-sm font-medium text-ink-700 transition-colors hover:border-ink-300 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-300 dark:hover:border-ink-700 dark:focus:border-ink-100 dark:focus:ring-ink-100/15"
-          >
-            {SORT_OPTIONS.map((o) => (
-              <option value={o.value} selected={o.value === sort}>{o.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>
-        <button type="submit" class="inline-flex h-8 cursor-pointer items-center justify-center gap-1.5 rounded-[var(--radius)] border border-transparent px-3 text-sm font-medium leading-none no-underline outline-none transition-colors focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/35 bg-primary text-primary-foreground hover:bg-primary/90">Search</button>
-      </form>
-
-      <div class="mt-4">
-        <SmartLensTabs
-          currentParams={Astro.url.searchParams}
-          pathPrefix={`/${slug}`}
-          lensIds={["all", "new", "hot", "mature", "production-like", "good-to-learn"]}
-        />
-      </div>
-
-      <div class="mt-3 pb-6">
-        <RefinePanel
-          facets={facets}
-          initial={filters}
-          pathPrefix={`/${slug}`}
-        />
-      </div>
-    </div>
-  </section>
-
-  <section class="py-10 sm:py-12">
-    <div class="mx-auto w-full max-w-wide px-5 sm:px-7">
-      <header class="mb-6">
-        <h2 class="m-0 text-[1.5rem] sm:text-[1.625rem] font-semibold tracking-tight text-ink-900 dark:text-ink-100">
-          {`All ${itemLabelPlural()}`}
-        </h2>
-        <p class="m-0 mt-1 max-w-[60ch] text-[0.9375rem] text-ink-500 dark:text-ink-400">
-          {`Every ${itemLabel()} in the directory.`}
-        </p>
-      </header>
-      <div class="mb-5 flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
-        <p class="m-0 text-2xs text-ink-500 dark:text-ink-400">
-          <span id="results-count" class="font-mono text-ink-900 dark:text-ink-100">
-            {sorted.length} {sorted.length === 1 ? itemLabel() : itemLabelPlural()}
-          </span>
-          <span id="results-sort">{` · sorted by ${sortDisplay(sort)}`}</span>
-          <span id="results-page">{pages > 1 ? ` · page ${page} of ${pages}` : ""}</span>
-        </p>
-        <div
-          id="active-filters"
-          class:list={["flex flex-wrap items-center gap-1.5", chips.length === 0 && "hidden"]}
-          aria-label="Active filters"
-        >
-          {chips.length > 0 && (
-            <>
-            {chips.map((chip) => (
-              <a
-                href={hrefForRemove(chip.key, chip.value)}
-                class="inline-flex min-h-5 items-center justify-center gap-1 rounded-full border border-transparent bg-secondary px-2 py-0.5 align-middle text-xs font-medium leading-none text-secondary-foreground transition-colors hover:border-ink-400"
-              >
-                {chip.label} <span aria-hidden="true">x</span>
-              </a>
-            ))}
-            <a href={`/${slug}`} class="text-2xs font-medium text-ink-500 hover:text-ink-900">
-              Clear all
-            </a>
-            </>
-          )}
-        </div>
-      </div>
-
-      <ul id="results-list" class="m-0 flex list-none flex-col gap-3 p-0">
-        {sorted.map((item, i) => (
-            <li class="m-0 p-0" data-record-slug={item.slug}>
-              <IndexRow
-                record={item as Parameters<typeof IndexRow>[0]["record"]}
-                detailHref={`/${slug}/${item.slug}`}
-                eager={i < 2}
-              />
-            </li>
-        ))}
-      </ul>
-      <div id="empty-state" class:list={["py-12 text-center", sorted.length > 0 && "hidden"]}>
-        <p class="m-0 text-sm font-medium text-ink-700 dark:text-ink-200">
-          {`No ${itemLabel()}s match these filters.`}
-        </p>
-        <a href={`/${slug}`} class="inline-flex h-8 cursor-pointer items-center justify-center gap-1.5 rounded-[var(--radius)] border border-transparent px-3 text-sm font-medium leading-none no-underline outline-none transition-colors focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/35 border-border bg-secondary text-foreground hover:bg-accent mt-4">Clear filters</a>
-      </div>
-      <nav id="results-pagination" class="mt-8 flex flex-wrap items-center justify-center gap-1.5" aria-label="Pagination">
-        <Pagination current={page} total={pages} hrefFor={hrefForPage} />
-      </nav>
-    </div>
-  </section>
-
-  <section class="border-t border-ink-200 dark:border-ink-800">
-    <div class="mx-auto w-full max-w-wide px-5 sm:px-7">
-      <div class="flex flex-col items-center gap-3 py-12 text-center">
-        <h2 class="m-0 text-xl font-semibold tracking-tight text-ink-900 dark:text-ink-100">
-          {`Know a real ${itemLabel()} that belongs here?`}
-        </h2>
-        <p class="m-0 max-w-2xl text-sm text-ink-500 dark:text-ink-400">
-          {`Open a pull request with a YAML file. We review every submission against the bar — no marketing, no tutorials.`}
-        </p>
-        <a
-          href="/submit"
-          class="inline-flex h-8 cursor-pointer items-center justify-center gap-1.5 rounded-[var(--radius)] border border-transparent px-3 text-sm font-medium leading-none no-underline outline-none transition-colors focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/35 bg-primary text-primary-foreground hover:bg-primary/90 mt-2"
-        >
-          {`Submit ${itemLabel()}`}
-        </a>
-
-      </div>
-    </div>
-  </section>
-
-  <script is:inline id="grove-index-data" type="application/json" set:html={clientItemsJson}></script>
-  <script
-    is:inline
-    define:vars={{
-      slug,
-      singular: itemLabel(),
-      plural: itemLabelPlural(),
-      taxonomy,
-    }}
-  >
-    (() => {
-      const PAGE_SIZE = 20;
-      const source = document.querySelector("#grove-index-data");
-      const list = document.querySelector("#results-list");
-      if (!source || !list) return;
-
-      const items = JSON.parse(source.textContent || "[]");
-      const nodes = new Map(
-        [...list.querySelectorAll("[data-record-slug]")].map((node) => [
-          node.dataset.recordSlug,
-          node,
-        ]),
-      );
-      const params = new URLSearchParams(location.search);
-      const values = (key) => params.getAll(key).filter(Boolean);
-      const q = (params.get("q") || "").trim().toLowerCase();
-      const stacks = values("stack");
-      const platforms = values("platform");
-      const categories = values("category");
-      const labels = values("label");
-      const licenses = values("license");
-      const statuses = values("status").flatMap((value) => value.split(",")).filter(Boolean);
-      const lens = params.get("lens") || "";
-      const sort = params.get("sort") || "recently-updated";
-      const requestedPage = Math.max(1, Number.parseInt(params.get("page") || "1", 10) || 1);
-
-      const nameOf = (record) => record.kind === "resource" ? record.title : record.name;
-      const projectValues = (record) => record.kind === "project"
-        ? [record.stack, ...(record.stacks || [])].filter(Boolean)
-        : [];
-      const matchesAny = (actual, expected) =>
-        expected.length === 0 || actual.some((value) => expected.includes(value));
-      const matches = (record) => {
-        if (q) {
-          const repo = record.kind === "project"
-            ? record.repoUrl || record.links?.github || ""
-            : record.links?.github || "";
-          const owner = /github\.com\/([^/]+)\//.exec(repo)?.[1] || "";
-          const projectFields = record.kind === "project"
-            ? [
-                record.stack,
-                ...(record.stacks || []),
-                ...(record.platforms || []),
-                record.projectType,
-                ...(record.bestFor || []),
-                ...(record.whyListed || []),
-                record.github?.license,
-                record.health?.status,
-              ]
-            : [];
-          const haystack = [
-            nameOf(record),
-            owner,
-            record.description,
-            record.category,
-            ...(record.tags || []),
-            ...projectFields,
-          ].filter(Boolean).join(" ").toLowerCase();
-          if (!haystack.includes(q)) return false;
-        }
-        if (!matchesAny(projectValues(record), stacks)) return false;
-        if (!matchesAny(record.kind === "project" ? record.platforms || [] : [], platforms)) return false;
-        if (categories.length && !categories.includes(record.category)) return false;
-        if (!matchesAny(record.curation?.labels || [], labels)) return false;
-        if (licenses.length && !licenses.includes(record.kind === "project" ? record.github?.license : "")) return false;
-        if (statuses.length && !statuses.includes(record.kind === "project" ? record.health?.status : "")) return false;
-        if (lens && !(record.curation?.lenses || []).includes(lens)) return false;
-        return true;
-      };
-      const time = (value) => value ? new Date(value).valueOf() || 0 : 0;
-      const stars = (record) => record.kind === "project" ? record.github?.stars || 0 : 0;
-      const compare = {
-        "most-starred": (a, b) => stars(b) - stars(a),
-        "recently-updated": (a, b) =>
-          time(b.kind === "project" ? b.github?.pushedAt : b.publishedAt) -
-          time(a.kind === "project" ? a.github?.pushedAt : a.publishedAt),
-        "recently-added": (a, b) =>
-          time(b.curation?.reviewedAt) - time(a.curation?.reviewedAt),
-        "best-overall": (a, b) =>
-          Number(Boolean(b.curation?.reviewed)) - Number(Boolean(a.curation?.reviewed)) ||
-          stars(b) - stars(a),
-        "alphabetical": (a, b) => String(nameOf(a)).localeCompare(String(nameOf(b))),
-      }[sort];
-
-      function applyClientFilters() {
-        const filtered = items.filter(matches);
-        if (compare) filtered.sort(compare);
-        const pageCount = Math.max(1, Math.ceil(filtered.length / PAGE_SIZE));
-        const page = Math.min(requestedPage, pageCount);
-        const visible = new Set(
-          filtered
-            .slice((page - 1) * PAGE_SIZE, page * PAGE_SIZE)
-            .map((record) => record.slug),
-        );
-
-        for (const record of filtered) {
-          const node = nodes.get(record.slug);
-          if (node) list.append(node);
-        }
-        for (const [recordSlug, node] of nodes) {
-          node.hidden = !visible.has(recordSlug);
-        }
-
-        const count = document.querySelector("#results-count");
-        const pageLabel = document.querySelector("#results-page");
-        const empty = document.querySelector("#empty-state");
-        if (count) count.textContent = `${filtered.length} ${filtered.length === 1 ? singular : plural}`;
-        if (pageLabel) pageLabel.textContent = pageCount > 1 ? ` · page ${page} of ${pageCount}` : "";
-        if (empty) empty.classList.toggle("hidden", filtered.length > 0);
-
-        const pagination = document.querySelector("#results-pagination");
-        if (pagination) {
-          pagination.innerHTML = "";
-          if (pageCount > 1) {
-            for (let target = 1; target <= pageCount; target += 1) {
-              const next = new URLSearchParams(params);
-              if (target === 1) next.delete("page");
-              else next.set("page", String(target));
-              const link = document.createElement("a");
-              link.href = `/${slug}${next.size ? `?${next}` : ""}`;
-              link.textContent = String(target);
-              link.setAttribute("aria-label", `Page ${target}`);
-              if (target === page) link.setAttribute("aria-current", "page");
-              link.className = "inline-flex h-8 min-w-8 items-center justify-center rounded-md border border-border px-2 text-sm";
-              pagination.append(link);
-            }
-          }
-        }
-      }
-
-      const searchInput = document.querySelector("#search-input");
-      if (searchInput) searchInput.value = params.get("q") || "";
-      document.querySelectorAll('select[name="sort"]').forEach((select) => {
-        select.value = sort;
-      });
-      const filterKeys = {
-        stacks: "stack",
-        platforms: "platform",
-        categories: "category",
-        licenses: "license",
-      };
-      const filterLabels = {
-        stacks: "Stack",
-        platforms: "Platform",
-        categories: "Category",
-        licenses: "License",
-      };
-      const taxonomyKinds = {
-        stacks: "stacks",
-        platforms: "platforms",
-        categories: "categories",
-      };
-      const taxonomyName = (groupKey, value) =>
-        (taxonomy[taxonomyKinds[groupKey]] || []).find((entry) => entry.id === value)?.name ??
-        value;
-      document.querySelectorAll(".grove-filter").forEach((group) => {
-        const selected = values(filterKeys[group.dataset.filterGroupKey]);
-        group.querySelectorAll(".grove-filter-input").forEach((input) => {
-          input.checked = selected.includes(input.dataset.filterValue);
-        });
-        const trigger = group.querySelector(".grove-filter-trigger span");
-        if (trigger && selected.length) {
-          const label = filterLabels[group.dataset.filterGroupKey];
-          trigger.textContent = `${label}: ${
-            selected.length === 1
-              ? taxonomyName(group.dataset.filterGroupKey, selected[0])
-              : `${selected.length} selected`
-          }`;
-        }
-      });
-
-      applyClientFilters();
-    })();
-  </script>
-</BaseLayout>

package/templates/default/src/pages/about.astro

@@ -1,189 +0,0 @@
----
-/**
- * About page — generic.
- *
- * Mirrors the openapps section structure: breadcrumb, header with
- * two-line intro, then a stack of cards (Why, Value, Data, Generic)
- * followed by a CTA row. The copy is generic — references "directory",
- * "record", "framework" — so it works for any blueprint.
- *
- * Side-by-side comparison with the older "Why" copy:
- *   - Old: "A directory of real open-source apps. Started from
- *          the Open Source Flutter Apps collection…"
- *   - New: "A growing community knowledge site. A curated, health-
- *          aware developer directory…"
- *
- * The Tailwind card and button utilities match the
- * rest of the framework, and the data fields it references
- * (`siteConfig.tagline`, `siteConfig.repoUrl`) all flow from the
- * site config — no hardcoded brand or copy.
- */
-import BaseLayout from "@grove-dev/astro/layouts/BaseLayout.astro";
-import Container from "@grove-dev/astro/layouts/Container.astro";
-import siteConfig from "../../data/generated/site-config.json";
-import { getPageContentHtml, indexSlug, itemLabel } from "../data/records";
-
-const githubUrl = siteConfig.repoUrl;
-const title = `About — ${siteConfig.name}`;
-const description = `${siteConfig.tagline} Built with Grove.`;
-const slug = indexSlug();
-const item = itemLabel();
-const pageContentHtml = getPageContentHtml("about");
----
-
-<BaseLayout title={title} description={description} site={siteConfig}>
-  <Container size="narrow">
-    <article class="py-12 sm:py-16">
-      <nav class="text-2xs text-ink-500 dark:text-ink-400" aria-label="Breadcrumb">
-        <a href="/" class="hover:text-ink-900 dark:hover:text-ink-100">Home</a>
-        <span class="mx-1.5 text-ink-300 dark:text-ink-700">/</span>
-        <span class="text-ink-700 dark:text-ink-300">About</span>
-      </nav>
-
-      {pageContentHtml ? (
-        <section class="grove-prose mt-8" set:html={pageContentHtml} />
-      ) : (
-      <>
-      <header class="mt-5">
-        <span class="text-2xs font-medium uppercase tracking-wider text-ink-500 dark:text-ink-400">
-          About
-        </span>
-        <h1 class="mt-1 m-0 text-[1.75rem] sm:text-[2.25rem] font-semibold tracking-[-0.02em] leading-[1.1] text-ink-900 dark:text-ink-100">
-          A growing community knowledge site.
-        </h1>
-        <p class="mt-4 m-0 text-[1rem] sm:text-[1.0625rem] leading-relaxed text-ink-700 dark:text-ink-200 max-w-[62ch]">
-          {siteConfig.name} is a curated, health-aware developer directory —
-          built so you can find, compare, run, study, and contribute to
-          open-source {item}s.
-        </p>
-        <p class="mt-3 m-0 text-[0.9375rem] leading-relaxed text-ink-500 dark:text-ink-400 max-w-[62ch]">
-          A growing list, forked from the original. Same shape, same
-          spirit, fresh data.
-        </p>
-      </header>
-
-      <section class="rounded-[calc(var(--radius)+0.25rem)] border-0 bg-muted shadow-none transition-colors mt-8 p-5 sm:p-6">
-        <span class="text-2xs font-medium uppercase tracking-wider text-ink-500 dark:text-ink-400">
-          Why
-        </span>
-        <h2 class="mt-1 m-0 text-[1.125rem] sm:text-[1.25rem] font-semibold tracking-tight text-ink-900 dark:text-ink-100">
-          A curated starting point
-        </h2>
-        <p class="mt-3 m-0 text-[0.9375rem] leading-relaxed text-ink-700 dark:text-ink-200">
-          GitHub search and README lists optimize for the repository
-          name and description. They rarely tell you whether a project
-          is a real {item} or a demo, which stack it uses beyond the
-          headline, how active it really is, or whether it has a clear
-          license.
-        </p>
-        <p class="mt-3 m-0 text-[0.9375rem] leading-relaxed text-ink-700 dark:text-ink-200">
-          {siteConfig.name} turns that flat list into a structured,
-          health-aware index. Each entry carries the metadata a developer
-          actually needs to decide whether to open the repo.
-        </p>
-      </section>
-
-      <section class="rounded-[calc(var(--radius)+0.25rem)] border-0 bg-muted shadow-none transition-colors mt-4 p-5 sm:p-6">
-        <span class="text-2xs font-medium uppercase tracking-wider text-ink-500 dark:text-ink-400">
-          Why real {item}s
-        </span>
-        <h2 class="mt-1 m-0 text-[1.125rem] sm:text-[1.25rem] font-semibold tracking-tight text-ink-900 dark:text-ink-100">
-          Real, runnable source
-        </h2>
-        <p class="mt-3 m-0 text-[0.9375rem] leading-relaxed text-ink-700 dark:text-ink-200">
-          Every {item} links back to its source. Skim, fork, learn — no
-          paywalls, no broken download links.
-        </p>
-        <p class="mt-3 m-0 text-[0.9375rem] leading-relaxed text-ink-700 dark:text-ink-200">
-          The directory is hand-curated — no SEO spam, no affiliate
-          farms, no broken links.
-        </p>
-      </section>
-
-      <section class="rounded-[calc(var(--radius)+0.25rem)] border-0 bg-muted shadow-none transition-colors mt-4 p-5 sm:p-6">
-        <span class="text-2xs font-medium uppercase tracking-wider text-ink-500 dark:text-ink-400">
-          What you get
-        </span>
-        <h2 class="mt-1 m-0 text-[1.125rem] sm:text-[1.25rem] font-semibold tracking-tight text-ink-900 dark:text-ink-100">
-          What every page gives you
-        </h2>
-        <ul class="m-0 mt-3 list-none space-y-1.5 p-0 text-[0.9375rem] text-ink-700 dark:text-ink-200">
-          <li class="flex items-baseline gap-2">
-            <span aria-hidden="true" class="text-ink-400 dark:text-ink-500">—</span>
-            <span>Stack, category, and architecture at a glance</span>
-          </li>
-          <li class="flex items-baseline gap-2">
-            <span aria-hidden="true" class="text-ink-400 dark:text-ink-500">—</span>
-            <span>Supported platforms and license</span>
-          </li>
-          <li class="flex items-baseline gap-2">
-            <span aria-hidden="true" class="text-ink-400 dark:text-ink-500">—</span>
-            <span>Activity and status — last commit, monthly history, health signals</span>
-          </li>
-          <li class="flex items-baseline gap-2">
-            <span aria-hidden="true" class="text-ink-400 dark:text-ink-500">—</span>
-            <span>License, stars, and curation tier</span>
-          </li>
-          <li class="flex items-baseline gap-2">
-            <span aria-hidden="true" class="text-ink-400 dark:text-ink-500">—</span>
-            <span>Curated notes: best for, why listed, caveats</span>
-          </li>
-          <li class="flex items-baseline gap-2">
-            <span aria-hidden="true" class="text-ink-400 dark:text-ink-500">—</span>
-            <span>Filters that respect you — search by stack, platform, license, or status</span>
-          </li>
-        </ul>
-      </section>
-
-      <section class="rounded-[calc(var(--radius)+0.25rem)] border-0 bg-muted shadow-none transition-colors mt-4 p-5 sm:p-6">
-        <span class="text-2xs font-medium uppercase tracking-wider text-ink-500 dark:text-ink-400">
-          Generic by design
-        </span>
-        <h2 class="mt-1 m-0 text-[1.125rem] sm:text-[1.25rem] font-semibold tracking-tight text-ink-900 dark:text-ink-100">
-          Generic by design
-        </h2>
-        <p class="mt-3 m-0 text-[0.9375rem] leading-relaxed text-ink-700 dark:text-ink-200">
-          The framework supports three blueprints: project-directory,
-          resource-hub, and ecosystem-map. Each can be configured
-          without touching the components — pages, schema, and
-          routes all derive from <code class="font-mono">grove.config.ts</code>.
-        </p>
-      </section>
-
-      <section class="rounded-[calc(var(--radius)+0.25rem)] border-0 bg-muted shadow-none transition-colors mt-4 p-5 sm:p-6">
-        <span class="text-2xs font-medium uppercase tracking-wider text-ink-500 dark:text-ink-400">
-          Free to fork, free to extend
-        </span>
-        <h2 class="mt-1 m-0 text-[1.125rem] sm:text-[1.25rem] font-semibold tracking-tight text-ink-900 dark:text-ink-100">
-          Free to fork, free to extend
-        </h2>
-        <p class="mt-3 m-0 text-[0.9375rem] leading-relaxed text-ink-700 dark:text-ink-200">
-          The full data lives in this repository as plain YAML. The
-          static output is plain HTML. No database, no JavaScript
-          framework, no CDN with sticky sessions.
-        </p>
-        <p class="mt-3 m-0 text-[0.9375rem] leading-relaxed text-ink-700 dark:text-ink-200">
-          Anyone can suggest a new {item}, fix a typo, or improve the
-          metadata through a pull request.
-        </p>
-      </section>
-
-      <section class="mt-8 flex flex-wrap items-center gap-3">
-        <a href={`/${slug}`} class="inline-flex h-8 cursor-pointer items-center justify-center gap-1.5 rounded-[var(--radius)] border border-transparent px-3 text-sm font-medium leading-none no-underline outline-none transition-colors focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/35 bg-primary text-primary-foreground hover:bg-primary/90">Browse the directory</a>
-        {githubUrl && (
-          <a
-            href={githubUrl}
-            target="_blank"
-            rel="noopener noreferrer"
-            class="inline-flex h-8 cursor-pointer items-center justify-center gap-1.5 rounded-[var(--radius)] border border-transparent px-3 text-sm font-medium leading-none no-underline outline-none transition-colors focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/35 border-border bg-secondary text-foreground hover:bg-accent"
-          >
-            View on GitHub
-          </a>
-        )}
-        <a href="/submit" class="inline-flex h-8 cursor-pointer items-center justify-center gap-1.5 rounded-[var(--radius)] border border-transparent px-3 text-sm font-medium leading-none no-underline outline-none transition-colors focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/35 bg-transparent text-foreground hover:bg-accent hover:text-accent-foreground">Submit a {item} →</a>
-      </section>
-      </>
-      )}
-    </article>
-  </Container>
-</BaseLayout>