@grove-dev/astro 0.2.16 → 0.2.19

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

@@ -7,12 +7,17 @@
  *   - RefinePanel  (Stack / Platform / Category / License / Sort)
  *   - RecordSection rows (full record cards; the `ItemSection` V0
  *     name was renamed to `RecordSection` in V1)
- *   - 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.
+ *
+ * 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";
@@ -22,36 +27,27 @@ 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 {
   activeFilterChips,
   applySort,
   buildFacets,
-  countByCategory,
-  countByStack,
   effectivePage,
   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;
@@ -64,50 +60,11 @@ 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}.`;
 
-// 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: IndexFilters = { ...filters, page: target };
   const query = searchParamsFromFilters(next).toString();
@@ -235,20 +192,6 @@ function hrefForRemove(key: keyof IndexFilters, value: string): string {
     </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">
@@ -291,9 +234,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>
@@ -324,231 +271,8 @@ function hrefForRemove(key: keyof IndexFilters, value: string): string {
         >
           {`Submit ${itemLabel()}`}
         </a>
+
       </div>
     </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;
-
-      // Sort dropdown: navigate on change so the server re-renders
-      // the sorted list (URL is the source of truth for filters/sort).
-      var sortSelect = document.getElementById("sort-select");
-      if (sortSelect) {
-        sortSelect.addEventListener("change", function () {
-          var params = new URLSearchParams(location.search);
-          if (sortSelect.value && sortSelect.value !== "recently-updated") {
-            params.set("sort", sortSelect.value);
-          } else {
-            params.delete("sort");
-          }
-          params.delete("page");
-          var qs = params.toString();
-          location.assign(qs ? "?" + qs : location.pathname);
-        });
-      }
-
-      // Search: 250ms debounce; pressing Enter still submits
-      // immediately via the form's normal submit handler.
-      var searchInput = document.getElementById("search-input");
-      var searchForm = document.getElementById("search-form");
-      if (searchInput && searchForm) {
-        var debounceTimer = null;
-        var submit = function () {
-          var params = new URLSearchParams(location.search);
-          var term = searchInput.value.trim();
-          if (term) params.set("q", term);
-          else params.delete("q");
-          params.delete("page");
-          var qs = params.toString();
-          location.assign(qs ? "?" + qs : location.pathname);
-        };
-        searchInput.addEventListener("input", function () {
-          if (debounceTimer) window.clearTimeout(debounceTimer);
-          debounceTimer = window.setTimeout(submit, 250);
-        });
-        searchForm.addEventListener("submit", function (event) {
-          event.preventDefault();
-          if (debounceTimer) window.clearTimeout(debounceTimer);
-          submit();
-        });
-      }
-
-      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);
-          });
-        });
-
-        // Pagination is server-rendered (see <Pagination /> in the
-        // template) so the static HTML contains the page-number
-        // links for SEO. No client-side rendering loop here.
-
-        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>

package/templates/default/src/styles/global.css

@@ -5,26 +5,22 @@
  * at scaffold time; we expose the same names as CSS variables so
  * consumers can layer their own brand colors in without forking.
  *
- * The `ink-*` color scale is preserved from the V0 template because
- * the page-level classes (`text-ink-900`, `bg-ink-50`, ...) still
- * reference it. New pages should prefer the default Tailwind
- * `gray-*` / `slate-*` palettes; the ink scale exists for
- * back-compat with the V1 minimal template.
+ * The package owns the Starlight-aligned palette, semantic theme tokens,
+ * font stacks, and light/dark base styles. This consumer sheet contains
+ * only scaffold-level overrides so those foundations cannot drift when
+ * the package theme changes.
+ *
+ * NOTE: do NOT add `@custom-variant dark` here. `@grove-dev/astro`'s
+ * `styles.css` already declares the `.dark`-class variant, and
+ * Tailwind v4 only honors one definition per build — adding a
+ * second one in this consumer file has been observed to confuse
+ * the variant resolution and produce utilities that key off
+ * `prefers-color-scheme` instead of the `.dark` class on <html>.
+ * The net effect: `<html class="dark">` is set but the page stays
+ * in light mode because the `dark:` utilities never match.
  */
 @theme {
-  --color-ink-50: #fafafa;
-  --color-ink-100: #f4f4f5;
-  --color-ink-200: #e4e4e7;
-  --color-ink-300: #d4d4d8;
-  --color-ink-400: #a1a1aa;
-  --color-ink-500: #71717a;
-  --color-ink-600: #52525b;
-  --color-ink-700: #3f3f46;
-  --color-ink-800: #27272a;
-  --color-ink-900: #18181b;
-  --color-ink-950: #09090b;
-
-  --color-grove-primary: #16a34a;
+  --color-grove-primary: var(--color-foreground);
 }
 
 @layer base {
@@ -33,26 +29,5 @@
     --grove-radius: 0.5rem;
     --grove-container-width: 72rem;
 
-    color-scheme: light dark;
-  }
-
-  html {
-    -webkit-text-size-adjust: 100%;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-  }
-
-  body {
-    background: #ffffff;
-    color: var(--color-ink-900);
-    font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
-      "Helvetica Neue", Arial, sans-serif;
-    font-size: 15px;
-    line-height: 1.55;
-  }
-
-  body.dark {
-    background: var(--color-ink-950);
-    color: var(--color-ink-100);
   }
 }

package/templates/default/tailwind.config.mjs

@@ -1,130 +0,0 @@
-/** @type {import('tailwindcss').Config} */
-export default {
-  content: ['./src/**/*.{astro,html,js,jsx,ts,tsx,md,mdx}'],
-  // Use a `.dark` class on <html> (toggled by the theme script in
-  // the document head) rather than the OS media query, so a manual
-  // theme switcher can override the user's system preference.
-  darkMode: 'class',
-  theme: {
-    // Disable default palette so we only ship our own neutral / accent
-    // tokens. Keeps the bundle small and forces a unified look.
-    colors: {
-      transparent: 'transparent',
-      current: 'currentColor',
-      white: '#ffffff',
-      black: '#000000',
-      ink: {
-        50: '#fafafa',
-        100: '#f4f4f5',
-        200: '#e4e4e7',
-        300: '#d4d4d8',
-        400: '#a1a1aa',
-        500: '#71717a',
-        600: '#52525b',
-        700: '#3f3f46',
-        800: '#27272a',
-        900: '#18181b',
-        950: '#09090b',
-      },
-      accent: {
-        DEFAULT: '#1f6feb',
-        muted: '#388bfd1a',
-      },
-      emerald: {
-        50: '#ecfdf5',
-        300: '#6ee7b7',
-        400: '#34d399',
-        700: '#047857',
-        800: '#065f46',
-        950: '#022c22',
-      },
-      orange: {
-        50: '#fff7ed',
-        300: '#fdba74',
-        400: '#fb923c',
-        700: '#c2410c',
-        800: '#9a3412',
-        950: '#431407',
-      },
-      blue: {
-        50: '#eff6ff',
-        300: '#93c5fd',
-        400: '#60a5fa',
-        700: '#1d4ed8',
-        800: '#1e40af',
-        950: '#172554',
-      },
-      amber: {
-        50: '#fffbeb',
-        300: '#fcd34d',
-        400: '#fbbf24',
-        700: '#b45309',
-        800: '#92400e',
-        950: '#451a03',
-      },
-    },
-    extend: {
-      fontFamily: {
-        sans: [
-          'ui-sans-serif',
-          'system-ui',
-          '-apple-system',
-          'BlinkMacSystemFont',
-          '"Segoe UI"',
-          'Roboto',
-          '"Helvetica Neue"',
-          'Arial',
-          'sans-serif',
-        ],
-        mono: [
-          'ui-monospace',
-          'SFMono-Regular',
-          'Menlo',
-          'Monaco',
-          'Consolas',
-          '"Liberation Mono"',
-          '"Courier New"',
-          'monospace',
-        ],
-      },
-      fontSize: {
-        '2xs': ['0.6875rem', { lineHeight: '1rem' }],
-      },
-      maxWidth: {
-        container: '1140px',
-        wide: '1400px',
-        narrow: '720px',
-      },
-      borderRadius: {
-        DEFAULT: '0.375rem',
-        lg: '0.5rem',
-        xl: '0.75rem',
-      },
-      keyframes: {
-        'fade-in-up': {
-          '0%': { opacity: '0', transform: 'translateY(8px)' },
-          '100%': { opacity: '1', transform: 'translateY(0)' },
-        },
-        'fade-in': {
-          '0%': { opacity: '0' },
-          '100%': { opacity: '1' },
-        },
-        'gradient-shift': {
-          '0%, 100%': { 'background-position': '0% 50%' },
-          '50%': { 'background-position': '100% 50%' },
-        },
-        'subtle-bob': {
-          '0%, 100%': { transform: 'translateY(0)' },
-          '50%': { transform: 'translateY(-2px)' },
-        },
-      },
-      animation: {
-        'fade-in-up': 'fade-in-up 0.6s ease-out both',
-        'fade-in': 'fade-in 0.8s ease-out both',
-        'gradient-shift': 'gradient-shift 8s ease-in-out infinite',
-        'subtle-bob': 'subtle-bob 3s ease-in-out infinite',
-      },
-    },
-  },
-  plugins: [],
-};