@grove-dev/astro 0.2.14 → 0.2.18

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

@@ -13,6 +13,12 @@
  * `/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 } from "../../data/records";
@@ -21,6 +27,7 @@ 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 ExploreByCategory from "@grove-dev/astro/components/ExploreByCategory.astro";
 import ExploreByStack from "@grove-dev/astro/components/ExploreByStack.astro";
 import {
@@ -33,23 +40,19 @@ import {
   effectiveSort,
   filterRecords,
   filtersFromSearchParams,
-  paginate,
   searchParamsFromFilters,
   sortDisplay,
+  SORT_OPTIONS,
   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 } }));
+// This template ships with the `project-directory` blueprint, so the
+// only directory slug it ever needs is `projects`. While it ships
+// as the project directory, pre-generate the single path the build
+// actually needs. Swapping in a different blueprint is a one-config
+// change that flows through the static import at the top.
+export function getStaticPaths() {
+  return [{ params: { slug: "projects" } }];
 }
 
 const slug = Astro.params.slug as string;
@@ -62,36 +65,7 @@ const filtered = filterRecords(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}.`;
@@ -165,6 +139,7 @@ function hrefForRemove(key: keyof IndexFilters, value: string): string {
       <form
         method="get"
         action={`/${slug}`}
+        id="search-form"
         class="mt-6 flex flex-col gap-2 sm:flex-row"
         role="search"
       >
@@ -178,9 +153,10 @@ function hrefForRemove(key: keyof IndexFilters, value: string): string {
             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" />
+            <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 ?? ""}
@@ -188,7 +164,28 @@ function hrefForRemove(key: keyof IndexFilters, value: string): string {
             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} />}
+        <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="grove-btn grove-btn-primary">Search</button>
       </form>
 
@@ -266,9 +263,13 @@ function hrefForRemove(key: keyof IndexFilters, value: string): string {
       </div>
 
       <ul id="results-list" class="m-0 flex list-none flex-col gap-3 p-0">
-        {sorted.map((item) => (
+        {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}`} />
+              <IndexRow
+                record={item as Parameters<typeof IndexRow>[0]["record"]}
+                detailHref={`/${slug}/${item.slug}`}
+                eager={i < 2}
+              />
             </li>
         ))}
       </ul>
@@ -278,200 +279,29 @@ function hrefForRemove(key: keyof IndexFilters, value: string): string {
         </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>
+      <nav 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>
 
-  <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.recordSlug) ?? Number.MAX_SAFE_INTEGER) -
-              (order.get(b.dataset.recordSlug) ?? Number.MAX_SAFE_INTEGER);
-          })
-          .forEach(function (node) {
-            node.hidden = !visible.has(node.dataset.recordSlug);
-            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);
-        }
-      }
+  <section class="border-t border-ink-200 dark:border-ink-800">
+    <div class="grove-container-wide mx-auto 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={siteConfig.submitUrl ?? "/submit"}
+          class="grove-btn grove-btn-primary mt-2"
+        >
+          {`Submit ${itemLabel()}`}
+        </a>
 
-      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>
+      </div>
+    </div>
+  </section>
 </BaseLayout>