@grove-dev/astro 0.2.6 → 0.2.13

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

@@ -0,0 +1,476 @@
+---
+/**
+ * List page — the discovery / browse page.
+ *
+ * Mirrors the openapps list structure:
+ *   - SmartLensTabs (All / Trending / Recently added / Established / Featured)
+ *   - RefinePanel  (Stack / Platform / Category / License / Sort)
+ *   - ItemSection rows (full record cards via RecordSection)
+ *   - ExploreByCategory / ExploreByStack (compact pill lists)
+ *
+ * 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.
+ */
+import siteConfig from "../../../data/generated/site-config.json";
+import { items, itemLabel, itemLabelPlural } from "../../data/records";
+import type { AppsFilters } 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 AppsIndexRow from "@grove-dev/astro/components/AppsIndexRow.astro";
+import ExploreByCategory from "@grove-dev/astro/components/ExploreByCategory.astro";
+import ExploreByStack from "@grove-dev/astro/components/ExploreByStack.astro";
+import {
+  activeFilterChips,
+  applySort,
+  buildFacets,
+  countByCategory,
+  countByStack,
+  effectivePage,
+  effectiveSort,
+  filterApps,
+  filtersFromSearchParams,
+  paginate,
+  searchParamsFromFilters,
+  sortDisplay,
+  totalPages,
+} from "@grove-dev/astro";
+
+export async function getStaticPaths() {
+  let activeSlug = "projects";
+  try {
+    const raw = await import("../../../data/generated/site-config.json");
+    activeSlug = raw.default?.blueprintConfig?.routeSlug ?? "projects";
+  } catch {
+    /* not present */
+  }
+  const all = ["projects", "resources", "entities"];
+  if (!all.includes(activeSlug)) all.push(activeSlug);
+  return all.map((slug) => ({ params: { slug } }));
+}
+
+const slug = Astro.params.slug as string;
+const total = items.length;
+const filters = filtersFromSearchParams(Astro.url.searchParams);
+const facets = buildFacets(items);
+const sort = effectiveSort(filters);
+const requestedPage = effectivePage(filters);
+const filtered = filterApps(items, filters);
+const sorted = applySort(filtered, sort);
+const pages = totalPages(sorted.length);
+const page = Math.min(requestedPage, pages);
+const visibleItems = paginate(sorted, page);
+const chips = activeFilterChips(filters);
+const clientItems = items.map((item) => ({
+  slug: item.slug,
+  name: item.kind === "resource" ? item.title : item.name,
+  description: item.description,
+  category: item.category,
+  tags: item.tags,
+  labels: item.curation?.labels ?? [],
+  lenses: item.curation?.lenses ?? [],
+  reviewed: Boolean(item.curation?.reviewed),
+  addedAt: item.curation?.reviewedAt ?? "",
+  stacks: item.kind === "project" ? [item.stack, ...item.stacks].filter(Boolean) : [],
+  platforms: item.kind === "project" ? item.platforms : [],
+  license: item.kind === "project" ? item.github?.license ?? "" : "",
+  status: item.kind === "project" ? item.health?.status ?? "" : "",
+  stars: item.kind === "project" ? item.github?.stars ?? 0 : 0,
+  updatedAt:
+    item.kind === "project"
+      ? item.github?.pushedAt ?? ""
+      : item.kind === "resource"
+        ? item.publishedAt ?? ""
+        : "",
+  extra:
+    item.kind === "project"
+      ? [item.repoUrl, item.projectType, item.difficulty, item.codebaseSize, ...item.bestFor, ...item.whyListed]
+      : item.kind === "resource"
+        ? [item.type, item.topic, item.author ?? ""]
+        : [item.type, item.location ?? "", item.parent ?? ""],
+}));
+
+const title = `Browse ${slug} — ${siteConfig.name}`;
+const description = `A searchable directory of ${itemLabelPlural()} for ${siteConfig.name}.`;
+
+// Compute the top categories and stacks for the explore pills
+const categoryEntries = [...countByCategory(items as Parameters<typeof countByCategory>[0]).entries()]
+  .sort((a, b) => b[1] - a[1] || a[0].localeCompare(b[0]))
+  .slice(0, 12)
+  .map(([name, count]) => ({ name, slug: name, count }));
+const stackEntries = [...countByStack(items as Parameters<typeof countByStack>[0]).entries()]
+  .sort((a, b) => b[1] - a[1] || a[0].localeCompare(b[0]))
+  .slice(0, 18)
+  .map(([name, count]) => ({ name, slug: name, count }));
+
+function hrefForPage(target: number): string {
+  const next: AppsFilters = { ...filters, page: target };
+  const query = searchParamsFromFilters(next).toString();
+  return query ? `/${slug}?${query}` : `/${slug}`;
+}
+
+function hrefForRemove(key: keyof AppsFilters, value: string): string {
+  const params = new URLSearchParams(Astro.url.searchParams);
+  params.delete("page");
+  const urlKey: Partial<Record<keyof AppsFilters, 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="grove-container-wide mx-auto 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}`}
+        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.75.75 0 0 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" />
+          </svg>
+          <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>
+        {filters.sort && <input type="hidden" name="sort" value={filters.sort} />}
+        <button type="submit" class="grove-btn grove-btn-primary">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>
+
+  {categoryEntries.length > 0 && (
+    <ExploreByCategory
+      categories={categoryEntries}
+      pathPrefix={`/${slug}`}
+    />
+  )}
+
+  {stackEntries.length > 0 && (
+    <ExploreByStack
+      stacks={stackEntries}
+      pathPrefix={`/${slug}`}
+    />
+  )}
+
+  <section class="grove-section-tight">
+    <div class="grove-container-wide mx-auto 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="grove-badge 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) => (
+            <li class="m-0 p-0" data-item-slug={item.slug}>
+              <AppsIndexRow record={item as Parameters<typeof AppsIndexRow>[0]["record"]} detailHref={`/${slug}/${item.slug}`} />
+            </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="grove-btn grove-btn-outline mt-4">Clear filters</a>
+      </div>
+      <nav id="client-pagination" class="mt-8 flex flex-wrap items-center justify-center gap-1.5" aria-label="Pagination"></nav>
+    </div>
+  </section>
+
+  <script is:inline define:vars={{ clientItems, slug, itemSingular: itemLabel(), itemPlural: itemLabelPlural() }}>
+    (function () {
+      var PAGE_SIZE = 20;
+      var list = document.getElementById("results-list");
+      if (!list) return;
+
+      function values(params, key) {
+        return params.getAll(key).filter(Boolean);
+      }
+
+      function display(value) {
+        return String(value || "")
+          .split(/[-_]+/)
+          .filter(Boolean)
+          .map(function (part) { return part.charAt(0).toUpperCase() + part.slice(1); })
+          .join(" ");
+      }
+
+      function sortLabel(value) {
+        return {
+          "recently-updated": "Recently updated",
+          "most-starred": "Most starred",
+          "recently-added": "Recently added",
+          "best-overall": "Best overall",
+          alphabetical: "Alphabetical",
+        }[value] || "Recently updated";
+      }
+
+      function pageHref(params, page) {
+        var next = new URLSearchParams(params);
+        if (page <= 1) next.delete("page");
+        else next.set("page", String(page));
+        var query = next.toString();
+        return query ? "/" + slug + "?" + query : "/" + slug;
+      }
+
+      function apply() {
+        var params = new URLSearchParams(location.search);
+        var query = (params.get("q") || "").trim().toLowerCase();
+        var stacks = values(params, "stack");
+        var platforms = values(params, "platform");
+        var categories = values(params, "category");
+        var labels = values(params, "label");
+        var licenses = values(params, "license");
+        var statuses = (params.get("status") || "").split(",").filter(Boolean);
+        var lens = params.get("lens") || "";
+        var sort = params.get("sort") || "recently-updated";
+        var page = Math.max(1, Number(params.get("page")) || 1);
+
+        var filtered = clientItems.filter(function (item) {
+          var haystack = [
+            item.name,
+            item.description,
+            item.category,
+            item.tags,
+            item.stacks,
+            item.platforms,
+            item.license,
+            item.status,
+            item.extra,
+          ].flat(3).join(" ").toLowerCase();
+          if (query && !haystack.includes(query)) return false;
+          if (stacks.length && !item.stacks.some(function (value) { return stacks.includes(value); })) return false;
+          if (platforms.length && !item.platforms.some(function (value) { return platforms.includes(value); })) return false;
+          if (categories.length && !categories.includes(item.category)) return false;
+          if (labels.length && !item.labels.some(function (value) { return labels.includes(value); })) return false;
+          if (licenses.length && !licenses.includes(item.license)) return false;
+          if (statuses.length && !statuses.includes(item.status)) return false;
+          if (lens && !item.lenses.includes(lens)) return false;
+          return true;
+        });
+
+        filtered.sort(function (a, b) {
+          if (sort === "most-starred") return b.stars - a.stars;
+          if (sort === "recently-added") return Date.parse(b.addedAt || 0) - Date.parse(a.addedAt || 0);
+          if (sort === "best-overall") return Number(b.reviewed) - Number(a.reviewed) || b.stars - a.stars;
+          if (sort === "alphabetical") return a.name.localeCompare(b.name);
+          return Date.parse(b.updatedAt || 0) - Date.parse(a.updatedAt || 0);
+        });
+
+        var totalPages = Math.max(1, Math.ceil(filtered.length / PAGE_SIZE));
+        page = Math.min(page, totalPages);
+        var visible = new Set(
+          filtered.slice((page - 1) * PAGE_SIZE, page * PAGE_SIZE).map(function (item) { return item.slug; }),
+        );
+        var order = new Map(filtered.map(function (item, index) { return [item.slug, index]; }));
+        Array.from(list.children)
+          .sort(function (a, b) {
+            return (order.get(a.dataset.itemSlug) ?? Number.MAX_SAFE_INTEGER) -
+              (order.get(b.dataset.itemSlug) ?? Number.MAX_SAFE_INTEGER);
+          })
+          .forEach(function (node) {
+            node.hidden = !visible.has(node.dataset.itemSlug);
+            list.appendChild(node);
+          });
+
+        var count = document.getElementById("results-count");
+        if (count) count.textContent = filtered.length + " " + (filtered.length === 1 ? itemSingular : itemPlural);
+        var sortText = document.getElementById("results-sort");
+        if (sortText) sortText.textContent = " · sorted by " + sortLabel(sort);
+        var pageText = document.getElementById("results-page");
+        if (pageText) pageText.textContent = totalPages > 1 ? " · page " + page + " of " + totalPages : "";
+        document.getElementById("empty-state")?.classList.toggle("hidden", filtered.length > 0);
+
+        var search = document.querySelector('input[name="q"]');
+        if (search) search.value = params.get("q") || "";
+        document.querySelectorAll("select").forEach(function (select) {
+          var selected = values(params, select.name);
+          if (select.name === "sort") selected = [sort];
+          Array.from(select.options).forEach(function (option) {
+            option.selected = selected.includes(option.value);
+          });
+        });
+
+        var pager = document.getElementById("client-pagination");
+        if (pager) {
+          pager.innerHTML = "";
+          if (totalPages > 1) {
+            for (var number = 1; number <= totalPages; number += 1) {
+              var link = document.createElement("a");
+              link.href = pageHref(params, number);
+              link.textContent = String(number);
+              link.className = "grove-btn min-w-9 px-2 py-1.5 text-2xs " +
+                (number === page ? "grove-btn-primary" : "grove-btn-outline");
+              if (number === page) link.setAttribute("aria-current", "page");
+              pager.appendChild(link);
+            }
+          }
+        }
+
+        var chipHost = document.getElementById("active-filters");
+        if (chipHost) {
+          chipHost.innerHTML = "";
+          var specs = [
+            ["q", params.get("q") ? "“" + params.get("q") + "”" : ""],
+            ...stacks.map(function (v) { return ["stack", "Stack: " + v]; }),
+            ...platforms.map(function (v) { return ["platform", "Platform: " + v]; }),
+            ...categories.map(function (v) { return ["category", "Category: " + v]; }),
+            ...labels.map(function (v) { return ["label", display(v)]; }),
+            ...licenses.map(function (v) { return ["license", "License: " + v]; }),
+            ...(lens ? [["lens", display(lens)]] : []),
+            ...statuses.map(function (v) { return ["status", display(v)]; }),
+          ].filter(function (entry) { return entry[1]; });
+          specs.forEach(function (entry) {
+            var key = entry[0];
+            var chip = document.createElement("a");
+            var next = new URLSearchParams(params);
+            if (key === "status") {
+              var remaining = statuses.filter(function (value) { return display(value) !== entry[1]; });
+              next.delete("status");
+              if (remaining.length) next.set("status", remaining.join(","));
+            } else {
+              next.delete(key);
+            }
+            next.delete("page");
+            chip.href = next.toString() ? "/" + slug + "?" + next : "/" + slug;
+            chip.className = "grove-badge transition-colors hover:border-ink-400";
+            chip.textContent = entry[1] + " x";
+            chipHost.appendChild(chip);
+          });
+          if (specs.length) {
+            var clear = document.createElement("a");
+            clear.href = "/" + slug;
+            clear.className = "text-2xs font-medium text-ink-500 hover:text-ink-900";
+            clear.textContent = "Clear all";
+            chipHost.appendChild(clear);
+          }
+          chipHost.classList.toggle("hidden", specs.length === 0);
+        }
+      }
+
+      document.querySelectorAll("form").forEach(function (form) {
+        form.addEventListener("submit", function (event) {
+          if (!form.closest("main")) return;
+          event.preventDefault();
+          var params = new URLSearchParams(location.search);
+          form.querySelectorAll("input, select").forEach(function (field) {
+            if (!field.name) return;
+            params.delete(field.name);
+            if (field instanceof HTMLSelectElement && field.multiple) {
+              Array.from(field.selectedOptions).forEach(function (option) { params.append(field.name, option.value); });
+            } else if (field.value) {
+              params.set(field.name, field.value);
+            }
+          });
+          params.delete("page");
+          location.assign(params.toString() ? "?" + params : location.pathname);
+        });
+      });
+      apply();
+    })();
+  </script>
+</BaseLayout>