@grove-dev/astro 0.1.5 → 0.2.2

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

@@ -0,0 +1,480 @@
+---
+/**
+ * Detail page — one record at a time.
+ *
+ * Layout (top to bottom):
+ *   1. Breadcrumb                    — back to /projects (or blueprint slug)
+ *   2. AppCard-style header          — logo + name + owner + description + CTAs
+ *   3. ScoreBars                     — 5-dimension + overall score block
+ *   4. BestFor / WhyListed / Caveats — 3-column curation grid
+ *   5. GitHub signals dl             — stars, forks, pushed, license, language
+ *   6. Stack + Platform chips        — Icon (with fallback to text)
+ *   7. Distribution channels         — npm/crates/docker/etc. (when present)
+ *   8. Content markdown              — `record.content` (rendered as raw HTML
+ *                                      body) when present
+ *   9. JSON-LD SoftwareSourceCode    — for SEO + AI crawlers
+ *
+ * The page is generic across the 3 record kinds (project / resource
+ * / entity) — non-project fields simply render nothing.
+ */
+import siteConfig from "../../../data/generated/site-config.json";
+import { fullRecords, projectBySlug, resourceBySlug, entityBySlug, indexSlug } from "../../data/records";
+import BaseLayout from "@grove-dev/astro/layouts/BaseLayout.astro";
+import Icon from "@grove-dev/astro/components/Icon.astro";
+import ScoreBars from "@grove-dev/astro/components/ScoreBars.astro";
+import { getOwnerAndRepoFromRepoUrl, getOwnerAvatarUrl } from "@grove-dev/astro";
+import { formatRelative, formatStars } from "@grove-dev/astro";
+import { statusDisplay, prettySlug, labelDisplay } from "@grove-dev/astro";
+import { readFileSync, existsSync } from "node:fs";
+import { fileURLToPath } from "node:url";
+import { dirname, resolve } from "node:path";
+import type { ProjectRecord } from "@grove-dev/core";
+
+export function getStaticPaths() {
+  return fullRecords.map((record) => ({
+    params: { slug: record.slug },
+  }));
+}
+
+const slug = indexSlug();
+const recordSlug = Astro.params.slug ?? "";
+const project = projectBySlug(recordSlug);
+const resource = resourceBySlug(recordSlug);
+const entity = entityBySlug(recordSlug);
+const record = project ?? resource ?? entity;
+
+if (!record) {
+  return Astro.redirect(`/${slug}`);
+}
+
+const isProject = record.kind === "project";
+const proj: ProjectRecord | null = project;
+
+const name =
+  record.kind === "resource" ? (record as { title: string }).title : (record as { name: string }).name;
+
+const title = `${name} — ${siteConfig.name}`;
+const description = record.description ?? `${name} on ${siteConfig.name}`;
+
+const repoUrl = proj?.repoUrl ?? (record.links as { github?: string } | undefined)?.github ?? "";
+const homepageUrl = record.links?.website ?? "";
+const logoUrl = proj?.logoUrl;
+const stacks = proj?.stacks ?? (proj?.stack ? [proj.stack] : []);
+const platforms = proj?.platforms ?? [];
+const github = proj?.github?.repository;
+const stars = github?.stargazers_count ?? 0;
+const forks = github?.forks_count ?? 0;
+const language = github?.language ?? null;
+const licenseSpdx = github?.license?.spdx_id ?? null;
+const pushedAt = github?.pushed_at ?? null;
+const starsLabel = formatStars(stars);
+const pushedLabel = formatRelative(pushedAt);
+
+const ownerRepo = repoUrl ? getOwnerAndRepoFromRepoUrl(repoUrl) : null;
+const avatarSrc = logoUrl ?? (ownerRepo ? getOwnerAvatarUrl(ownerRepo.owner, 80) : null);
+const initials = (name || "").replace(/[^a-z0-9]/gi, "").slice(0, 2).toUpperCase();
+
+const bestFor = proj?.bestFor ?? [];
+const whyListed = proj?.whyListed ?? [];
+const caveats = proj?.caveats ?? [];
+const distribution = proj?.distribution?.channels ?? [];
+const scores = proj?.scores ?? null;
+const curationLabels = record.curation?.labels ?? [];
+const tags = record.tags ?? [];
+const healthStatus = proj?.health?.status;
+const healthLabel = healthStatus ? statusDisplay(healthStatus) : null;
+
+// ── Optional content markdown (record.content is a path under
+// content/records/<slug>.md) ────────────────────────────────────
+let contentHtml: string | null = null;
+if (isProject && proj?.content) {
+  const here = dirname(fileURLToPath(import.meta.url));
+  const candidates = [
+    resolve(here, "..", "..", "..", proj.content),
+    resolve(process.cwd(), proj.content),
+  ];
+  const contentPath = candidates.find((p) => existsSync(p));
+  if (contentPath) {
+    try {
+      // Cheap markdown → HTML using a minimal renderer would be
+      // nice, but we don't want to pull another dep into the
+      // template. Render the file as a <pre> for now so the body
+      // still surfaces on the page. Consumers can replace this
+      // with a real markdown pipeline (`marked`, `remark`, ...)
+      // by overriding the `[slug].astro` page.
+      const text = readFileSync(contentPath, "utf8");
+      contentHtml = text
+        .replace(/&/g, "&amp;")
+        .replace(/</g, "&lt;")
+        .replace(/>/g, "&gt;");
+    } catch {
+      contentHtml = null;
+    }
+  }
+}
+
+// ── JSON-LD (SoftwareSourceCode) for project-kind records ──────
+let jsonLd: Record<string, unknown> | null = null;
+if (isProject && proj) {
+  jsonLd = {
+    "@context": "https://schema.org",
+    "@type": "SoftwareSourceCode",
+    name,
+    description: record.description ?? undefined,
+    url: repoUrl || homepageUrl || undefined,
+    codeRepository: repoUrl || undefined,
+    programmingLanguage: language ?? undefined,
+    license: licenseSpdx ?? undefined,
+    author: ownerRepo
+      ? { "@type": "Organization", name: ownerRepo.owner, url: `https://github.com/${ownerRepo.owner}` }
+      : undefined,
+  };
+}
+---
+
+<BaseLayout
+  title={title}
+  description={description}
+  site={siteConfig}
+  type="article"
+  jsonLd={jsonLd ?? undefined}
+  submitHref="/submit"
+  submitLabel={`Submit ${name}`}
+>
+  <article class="grove-section">
+    <div class="grove-container-wide mx-auto px-5 sm:px-7">
+      <nav class="mb-6 text-2xs text-ink-500 dark:text-ink-400" aria-label="Breadcrumb">
+        <a href={`/${slug}`} class="hover:text-ink-900 dark:hover:text-ink-100 capitalize">
+          {slug}
+        </a>
+        <span class="mx-1.5 text-ink-300 dark:text-ink-700">/</span>
+        <span class="text-ink-700 dark:text-ink-300">{name}</span>
+      </nav>
+
+      {/* ── AppCard-style header ──────────────────────────────── */}
+      <header class="grove-card flex flex-col gap-5 p-6 sm:flex-row sm:items-start">
+        <div class="flex-shrink-0">
+          {avatarSrc ? (
+            <img
+              src={avatarSrc}
+              alt=""
+              width="64"
+              height="64"
+              loading="lazy"
+              decoding="async"
+              class="h-16 w-16 rounded-lg border border-ink-200 object-contain bg-white p-1 dark:border-ink-800 dark:bg-ink-950"
+            />
+          ) : (
+            <span
+              aria-hidden="true"
+              class="inline-flex h-16 w-16 items-center justify-center rounded-lg border border-ink-200 bg-ink-50 text-2xl font-semibold text-ink-700 dark:border-ink-800 dark:bg-ink-900 dark:text-ink-200"
+            >
+              {initials || "·"}
+            </span>
+          )}
+        </div>
+
+        <div class="min-w-0 flex-1">
+          <div class="flex flex-wrap items-center gap-2">
+            <span class="rounded-full border border-ink-200 px-2 py-0.5 text-2xs font-medium uppercase tracking-wider text-ink-700 dark:border-ink-800 dark:text-ink-300">
+              {record.kind}
+            </span>
+            {record.category && (
+              <span class="rounded-full border border-ink-200 px-2 py-0.5 text-2xs font-medium text-ink-700 dark:border-ink-800 dark:text-ink-300">
+                {record.category}
+              </span>
+            )}
+            {curationLabels.map((l) => (
+              <span class="grove-badge grove-badge-{l}" title={`Curated: ${labelDisplay(l) ?? l}`}>
+                {labelDisplay(l) ?? prettySlug(l)}
+              </span>
+            ))}
+            {healthLabel && (
+              <span class="grove-badge grove-badge-stale">{healthLabel}</span>
+            )}
+          </div>
+
+          <h1 class="m-0 mt-2 text-[1.75rem] sm:text-[2rem] font-semibold tracking-tight text-ink-900 dark:text-ink-100">
+            {name}
+          </h1>
+
+          {ownerRepo && (
+            <p class="m-0 mt-1 text-sm text-ink-500 dark:text-ink-400">
+              <a
+                href={`https://github.com/${ownerRepo.owner}`}
+                target="_blank"
+                rel="noopener noreferrer"
+                class="text-inherit no-underline hover:text-ink-900 dark:hover:text-ink-100"
+              >
+                @{ownerRepo.owner}
+              </a>
+              <span class="mx-1 text-ink-300 dark:text-ink-700">/</span>
+              <a
+                href={repoUrl}
+                target="_blank"
+                rel="noopener noreferrer"
+                class="text-inherit no-underline hover:text-ink-900 dark:hover:text-ink-100"
+              >
+                {ownerRepo.repo}
+              </a>
+            </p>
+          )}
+
+          {record.description && (
+            <p class="m-0 mt-3 max-w-[68ch] text-base leading-relaxed text-ink-700 dark:text-ink-200">
+              {record.description}
+            </p>
+          )}
+
+          <div class="mt-5 flex flex-wrap gap-2">
+            {repoUrl && (
+              <a
+                href={repoUrl}
+                target="_blank"
+                rel="noopener noreferrer"
+                class="grove-btn grove-btn-primary"
+              >
+                View on GitHub →
+              </a>
+            )}
+            {homepageUrl && (
+              <a
+                href={homepageUrl}
+                target="_blank"
+                rel="noopener noreferrer"
+                class="grove-btn grove-btn-outline"
+              >
+                Homepage
+              </a>
+            )}
+          </div>
+        </div>
+      </header>
+
+      {/* ── Score bars ───────────────────────────────────────── */}
+      {proj && (
+        <section class="mt-8 grove-card p-6" aria-labelledby="scores-heading">
+          <h2 id="scores-heading" class="m-0 text-lg font-semibold tracking-tight text-ink-900 dark:text-ink-100">
+            Scores
+          </h2>
+          <p class="m-0 mt-1 text-sm text-ink-500 dark:text-ink-400">
+            A five-dimension read of how likely this project is to satisfy a curious developer.
+          </p>
+          <div class="mt-4">
+            <ScoreBars scores={scores} />
+          </div>
+        </section>
+      )}
+
+      {/* ── BestFor / WhyListed / Caveats grid ──────────────── */}
+      {isProject && (bestFor.length > 0 || whyListed.length > 0 || caveats.length > 0) && (
+        <section class="mt-8 grid grid-cols-1 gap-4 md:grid-cols-3" aria-label="Curation notes">
+          {bestFor.length > 0 && (
+            <div class="grove-card p-5">
+              <h3 class="m-0 text-sm font-semibold uppercase tracking-wider text-ink-500 dark:text-ink-400">
+                Best for
+              </h3>
+              <ul class="mt-3 m-0 flex list-none flex-col gap-1.5 p-0">
+                {bestFor.map((b) => (
+                  <li class="text-sm text-ink-700 dark:text-ink-200">— {b}</li>
+                ))}
+              </ul>
+            </div>
+          )}
+          {whyListed.length > 0 && (
+            <div class="grove-card p-5">
+              <h3 class="m-0 text-sm font-semibold uppercase tracking-wider text-ink-500 dark:text-ink-400">
+                Why listed
+              </h3>
+              <ul class="mt-3 m-0 flex list-none flex-col gap-1.5 p-0">
+                {whyListed.map((w) => (
+                  <li class="text-sm text-ink-700 dark:text-ink-200">— {w}</li>
+                ))}
+              </ul>
+            </div>
+          )}
+          {caveats.length > 0 && (
+            <div class="grove-card p-5">
+              <h3 class="m-0 text-sm font-semibold uppercase tracking-wider text-ink-500 dark:text-ink-400">
+                Caveats
+              </h3>
+              <ul class="mt-3 m-0 flex list-none flex-col gap-1.5 p-0">
+                {caveats.map((c) => (
+                  <li class="text-sm text-ink-700 dark:text-ink-200">— {c}</li>
+                ))}
+              </ul>
+            </div>
+          )}
+        </section>
+      )}
+
+      {/* ── GitHub signals dl ────────────────────────────────── */}
+      {isProject && github && (
+        <section class="mt-8 grove-card p-6" aria-labelledby="signals-heading">
+          <h2 id="signals-heading" class="m-0 text-lg font-semibold tracking-tight text-ink-900 dark:text-ink-100">
+            GitHub signals
+          </h2>
+          <dl
+            class="mt-4 grid grid-cols-2 gap-x-6 gap-y-3 text-sm sm:grid-cols-3"
+            aria-label="Repository signals"
+          >
+            <div>
+              <dt class="text-2xs font-medium uppercase tracking-wider text-ink-500 dark:text-ink-400">
+                Stars
+              </dt>
+              <dd class="m-0 mt-0.5 font-mono text-ink-900 dark:text-ink-100">
+                {starsLabel ?? "—"}
+              </dd>
+            </div>
+            <div>
+              <dt class="text-2xs font-medium uppercase tracking-wider text-ink-500 dark:text-ink-400">
+                Forks
+              </dt>
+              <dd class="m-0 mt-0.5 font-mono text-ink-900 dark:text-ink-100">
+                {forks}
+              </dd>
+            </div>
+            <div>
+              <dt class="text-2xs font-medium uppercase tracking-wider text-ink-500 dark:text-ink-400">
+                Last push
+              </dt>
+              <dd class="m-0 mt-0.5 font-mono text-ink-900 dark:text-ink-100">
+                {pushedLabel}
+              </dd>
+            </div>
+            {language && (
+              <div>
+                <dt class="text-2xs font-medium uppercase tracking-wider text-ink-500 dark:text-ink-400">
+                  Language
+                </dt>
+                <dd class="m-0 mt-0.5 text-ink-900 dark:text-ink-100">{language}</dd>
+              </div>
+            )}
+            {licenseSpdx && (
+              <div>
+                <dt class="text-2xs font-medium uppercase tracking-wider text-ink-500 dark:text-ink-400">
+                  License
+                </dt>
+                <dd class="m-0 mt-0.5 text-ink-900 dark:text-ink-100">{licenseSpdx}</dd>
+              </div>
+            )}
+            {pushedAt && (
+              <div>
+                <dt class="text-2xs font-medium uppercase tracking-wider text-ink-500 dark:text-ink-400">
+                  Updated
+                </dt>
+                <dd class="m-0 mt-0.5 font-mono text-ink-900 dark:text-ink-100">
+                  {pushedAt.slice(0, 10)}
+                </dd>
+              </div>
+            )}
+          </dl>
+        </section>
+      )}
+
+      {/* ── Stack + Platform chips ───────────────────────────── */}
+      {isProject && (stacks.length > 0 || platforms.length > 0) && (
+        <section class="mt-8" aria-labelledby="stacks-heading">
+          <h2 id="stacks-heading" class="m-0 text-lg font-semibold tracking-tight text-ink-900 dark:text-ink-100">
+            Stack & platforms
+          </h2>
+          <div class="mt-4 flex flex-col gap-3">
+            {stacks.length > 0 && (
+              <div class="flex flex-wrap items-center gap-2">
+                <span class="text-2xs font-medium uppercase tracking-wider text-ink-500 dark:text-ink-400">
+                  Stack
+                </span>
+                {stacks.map((s) => (
+                  <span class="grove-badge inline-flex items-center gap-1.5">
+                    <Icon name={s} category="stack" size={14} />
+                    {s}
+                  </span>
+                ))}
+              </div>
+            )}
+            {platforms.length > 0 && (
+              <div class="flex flex-wrap items-center gap-2">
+                <span class="text-2xs font-medium uppercase tracking-wider text-ink-500 dark:text-ink-400">
+                  Platform
+                </span>
+                {platforms.map((p) => (
+                  <span class="grove-badge inline-flex items-center gap-1.5">
+                    <Icon name={p} category="platform" size={14} />
+                    {p}
+                  </span>
+                ))}
+              </div>
+            )}
+          </div>
+        </section>
+      )}
+
+      {/* ── Tags ─────────────────────────────────────────────── */}
+      {tags.length > 0 && (
+        <section class="mt-8" aria-labelledby="tags-heading">
+          <h2 id="tags-heading" class="m-0 text-lg font-semibold tracking-tight text-ink-900 dark:text-ink-100">
+            Tags
+          </h2>
+          <ul class="mt-4 m-0 flex list-none flex-wrap gap-1.5 p-0">
+            {tags.map((t) => (
+              <li>
+                <a
+                  href={`/${slug}?q=${encodeURIComponent(t)}`}
+                  class="grove-badge inline-flex items-center gap-1.5"
+                >
+                  {t}
+                </a>
+              </li>
+            ))}
+          </ul>
+        </section>
+      )}
+
+      {/* ── Distribution channels ────────────────────────────── */}
+      {distribution.length > 0 && (
+        <section class="mt-8" aria-labelledby="dist-heading">
+          <h2 id="dist-heading" class="m-0 text-lg font-semibold tracking-tight text-ink-900 dark:text-ink-100">
+            Distribution channels
+          </h2>
+          <ul class="mt-4 m-0 flex list-none flex-col gap-2 p-0">
+            {distribution.map((c) => (
+              <li class="grove-card flex flex-wrap items-baseline justify-between gap-2 p-3">
+                <div class="flex flex-col">
+                  <span class="text-sm font-semibold text-ink-900 dark:text-ink-100">
+                    {c.label ?? c.type}
+                    {c.verified && (
+                      <span class="ml-2 grove-badge grove-badge-new">Verified</span>
+                    )}
+                  </span>
+                  {c.notes && (
+                    <span class="text-xs text-ink-500 dark:text-ink-400">{c.notes}</span>
+                  )}
+                </div>
+                <a
+                  href={c.url}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  class="grove-btn grove-btn-outline"
+                >
+                  {c.platform ?? c.type} →
+                </a>
+              </li>
+            ))}
+          </ul>
+        </section>
+      )}
+
+      {/* ── Content markdown (record.content → <pre> for now) ── */}
+      {contentHtml && (
+        <section class="mt-8" aria-labelledby="content-heading">
+          <h2 id="content-heading" class="m-0 text-lg font-semibold tracking-tight text-ink-900 dark:text-ink-100">
+            Notes
+          </h2>
+          <pre
+            class="mt-4 overflow-x-auto rounded-md border border-ink-200 bg-ink-50 p-4 text-xs leading-relaxed text-ink-800 dark:border-ink-800 dark:bg-ink-900/60 dark:text-ink-200"
+          ><code>{contentHtml}</code></pre>
+        </section>
+      )}
+    </div>
+  </article>
+</BaseLayout>

package/templates/default/src/pages/projects/index.astro

@@ -0,0 +1,193 @@
+---
+/**
+ * List page — the discovery / browse page.
+ *
+ * Renders the full filter / search / sort machinery:
+ *   - SmartLensTabs (All / Trending / Recently added / Established / Featured / Needs review)
+ *   - RefinePanel  (Stack / Platform / Category / License / Sort multi-selects)
+ *   - AppsIndexRow list (compact table-row per record)
+ *   - AppsPagination (windowed page list)
+ *   - ExploreByCategory / ExploreByStack (compact pill lists)
+ *
+ * Pure server-rendered: every interaction is a GET to the same URL
+ * with a different query string. No client-side filter script — the
+ * page rebuilds on every request because Astro's default output is
+ * static (all pages are baked at build time and revalidated by the
+ * deploy target).
+ */
+import siteConfig from "../../../data/generated/site-config.json";
+import { records, indexSlug, itemLabel } from "../../data/records";
+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 AppsPagination from "@grove-dev/astro/components/AppsPagination.astro";
+import ExploreByCategory from "@grove-dev/astro/components/ExploreByCategory.astro";
+import ExploreByStack from "@grove-dev/astro/components/ExploreByStack.astro";
+import {
+  filtersFromSearchParams,
+  filterApps,
+  applySort,
+  paginate,
+  totalPages,
+  effectivePage,
+  buildFacets,
+  PAGE_SIZE,
+  pipeline,
+} from "@grove-dev/astro";
+
+const slug = indexSlug();
+const total = records.length;
+
+const title = `Browse ${slug} — ${siteConfig.name}`;
+const description = `A searchable directory of ${slug} for ${siteConfig.name}.`;
+
+// ── URL → filters ───────────────────────────────────────────────
+const filters = filtersFromSearchParams(Astro.url.searchParams);
+
+// ── Facet map (built from the FULL record set, not the filtered
+// one, so users can see all available options even when none of
+// them are active) ───────────────────────────────────────────────
+const facets = buildFacets(records);
+
+// ── Lens → filter → sort pipeline (matches the openapps list) ──
+const filtered = pipeline(records, filters);
+
+// ── Pagination ───────────────────────────────────────────────────
+const page = effectivePage(filters);
+const pages = totalPages(filtered.length, PAGE_SIZE);
+const pageItems = paginate(filtered, page, PAGE_SIZE);
+
+// ── "Explore" facet pills (top 12 categories / stacks by count) ─
+const categoryEntries = facets.categories.slice(0, 12).map((f) => ({
+  name: f.value,
+  slug: f.value,
+  count: f.count,
+}));
+const stackEntries = facets.stacks.slice(0, 18).map((f) => ({
+  name: f.value,
+  slug: f.value,
+  count: f.count,
+}));
+
+function hrefForPage(p: number): string {
+  const sp = new URLSearchParams(Astro.url.searchParams);
+  if (p <= 1) sp.delete("page");
+  else sp.set("page", String(p));
+  const qs = sp.toString();
+  return qs ? `/${slug}?${qs}` : `/${slug}`;
+}
+---
+
+<BaseLayout
+  title={title}
+  description={description}
+  site={siteConfig}
+  submitHref="/submit"
+  submitLabel={`Submit ${itemLabel()}`}
+>
+  <section class="grove-section-tight border-b border-ink-200 dark:border-ink-800">
+    <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>
+
+      <div class="mt-6">
+        <SmartLensTabs
+          currentParams={Astro.url.searchParams}
+          pathPrefix={`/${slug}`}
+        />
+      </div>
+
+      <div class="mt-5">
+        <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">
+      <div class="mb-4 flex flex-wrap items-baseline justify-between gap-2">
+        <p class="m-0 text-2xs text-ink-500 dark:text-ink-400">
+          Showing
+          <span class="ml-1 font-mono text-ink-900 dark:text-ink-100">
+            {filtered.length === 0 ? 0 : (page - 1) * PAGE_SIZE + 1}
+          </span>
+          –
+          <span class="font-mono text-ink-900 dark:text-ink-100">
+            {Math.min(page * PAGE_SIZE, filtered.length)}
+          </span>
+          of
+          <span class="ml-1 font-mono text-ink-900 dark:text-ink-100">
+            {filtered.length}
+          </span>
+          {itemLabel()}{filtered.length === 1 ? "" : "s"}
+        </p>
+        {pages > 1 && (
+          <AppsPagination
+            current={page}
+            total={pages}
+            hrefFor={hrefForPage}
+          />
+        )}
+      </div>
+
+      {pageItems.length === 0 ? (
+        <div class="flex flex-col items-center gap-2 py-16 text-center">
+          <p class="m-0 text-[0.9375rem] font-medium text-ink-700 dark:text-ink-200">
+            No {itemLabel()}s match these filters.
+          </p>
+          <a
+            href={`/${slug}`}
+            class="mt-3 text-sm text-ink-500 hover:text-ink-900 dark:hover:text-ink-100"
+          >
+            Clear all filters
+          </a>
+        </div>
+      ) : (
+        <div class="flex flex-col gap-3">
+          {pageItems.map((record) => (
+            <AppsIndexRow
+              record={record}
+              detailHref={`/${slug}/${record.slug}`}
+            />
+          ))}
+        </div>
+      )}
+
+      {pages > 1 && (
+        <div class="mt-6 flex justify-center">
+          <AppsPagination
+            current={page}
+            total={pages}
+            hrefFor={hrefForPage}
+          />
+        </div>
+      )}
+    </div>
+  </section>
+</BaseLayout>