@grove-dev/astro 0.1.5 → 0.2.2

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

@@ -1,709 +0,0 @@
----
-import { siteConfig } from "../../data/config";
-import BaseLayout from "../../components/layout/BaseLayout.astro";
-import type { OpenSourceApp } from "../../data/types";
-import { apps } from "../../data/apps";
-import Container from "../../components/layout/Container.astro";
-import Icon from "../../components/icons/Icon.astro";
-import { getOwnerAndRepoFromRepoUrl, getOwnerAvatarUrl } from "../../lib/repo";
-import { formatDate, formatStars } from "../../lib/format";
-import { SCORE_DIMENSIONS, SCORE_LABELS, scoreTier, scoreLabel, SCORE_REASONING } from "../../lib/scores";
-import { stats } from "../../data/stats";
-
-export function getStaticPaths() {
-  return apps.map((app) => ({
-    params: { slug: app.slug },
-    props: { app },
-  }));
-}
-
-interface Props {
-  app: OpenSourceApp;
-}
-
-const { app } = Astro.props;
-
-const { owner, repo } = getOwnerAndRepoFromRepoUrl(app.repoUrl);
-
-// Initials placeholder fallback
-const initials = app.name
-  .split(/\s+/)
-  .map((w) => w[0])
-  .filter(Boolean)
-  .slice(0, 2)
-  .join("")
-  .toUpperCase();
-
-// Owner avatar URL — prefer the curated logoUrl if set, fall back to
-// the GitHub owner avatar (matches the AppCard pattern on the home page).
-const ownerAvatar = app.logoUrl ?? getOwnerAvatarUrl(owner, 160);
-
-// Label for the primary label badge (new / hot / mature / stale).
-// Stale apps override the "mature" label — see AppCard.astro for
-// the same logic; both call sites must stay in sync.
-const isStale = app.status === "stale";
-const primaryLabel = isStale
-  ? "stale"
-  : app.labels?.find((l) => l === "new" || l === "hot" || l === "mature") ??
-    app.labels?.[0];
-
-const labelClass = primaryLabel === "new"
-  ? "badge-new"
-  : primaryLabel === "hot"
-    ? "badge-hot"
-    : primaryLabel === "mature"
-      ? "badge-mature"
-      : primaryLabel === "stale"
-        ? "badge-stale"
-        : "";
-
-// All stacks (primary + secondary) for chips
-const allStacks = [app.stack, ...(app.stacks ?? [])].filter(Boolean);
-
-// Curation display state
-const hasScores = app.scores && Object.values(app.scores).some((v) => typeof v === "number");
-const hasCuration =
-  (app.bestFor && app.bestFor.length > 0) ||
-  (app.whyListed && app.whyListed.length > 0) ||
-  (app.caveats && app.caveats.length > 0);
-
-const starsLabel = formatStars(app.stars);
-
-const repoMeta = app.github?.repository;
-const repoHealth = app.health;
-const rawMonthly = app.github?.activity?.monthlyCommits ?? [];
-const monthlyCommits = rawMonthly.map((item) =>
-  typeof item === "number" ? { month: "", commits: item } : item,
-);
-const maxMonthlyCommits = Math.max(1, ...monthlyCommits.map((item) => item.commits ?? 0));
-const languages = app.github?.languages
-  ? Object.entries(app.github.languages)
-      .sort((a, b) => b[1] - a[1])
-      .slice(0, 5)
-  : [];
-const totalLanguageBytes = Math.max(1, languages.reduce((sum, [, bytes]) => sum + bytes, 0));
-const files = app.github?.files ?? {};
-const contributionSignals = [
-  { label: "README", ok: files.readme },
-  { label: "Contributing", ok: files.contributing },
-  { label: "Security", ok: files.security },
-  { label: "Issue templates", ok: files.issueTemplates },
-  { label: "PR template", ok: files.pullRequestTemplate },
-].filter((signal) => signal.ok !== undefined);
-const latestRelease = app.github?.latestRelease;
-const latestReleaseAt =
-  typeof latestRelease?.published_at === "string"
-    ? latestRelease.published_at
-    : undefined;
-const contributorsKnown = app.github?.activity?.contributorsKnown;
-const totalCommitsKnown = app.github?.activity?.totalCommitsKnown;
-const distributionChannels = app.distribution?.channels ?? [];
-const distributionLabel = (type: string) => ({
-  "app-store": "App Store",
-  "play-store": "Play Store",
-  fdroid: "F-Droid",
-  "github-releases": "GitHub Releases",
-  apk: "APK",
-  testflight: "TestFlight",
-  website: "Website",
-  snapcraft: "Snapcraft",
-  flathub: "Flathub",
-  "microsoft-store": "Microsoft Store",
-  other: "Download",
-}[type] ?? "Download");
-
-const title = `${app.name} — ${siteConfig.name}`;
-const description = `${app.name} — ${app.description}`;
-
-// JSON-LD structured data for this app. Uses schema.org's
-// SoftwareSourceCode type — that's the right fit for a source
-// repository, more so than the generic SoftwareApplication. Helps
-// Google show rich results (programming language, license, last
-// commit date) on app detail pages.
-const jsonLd: Record<string, unknown> = {
-  "@context": "https://schema.org",
-  "@type": "SoftwareSourceCode",
-  name: app.name,
-  headline: app.name,
-  description: app.description,
-  url: app.repoUrl,
-  codeRepository: app.repoUrl,
-  ...(app.homepageUrl ? { sameAs: [app.repoUrl, app.homepageUrl] } : { sameAs: [app.repoUrl] }),
-  ...(app.stack ? { programmingLanguage: app.stack } : {}),
-  ...(app.license ? { license: app.license } : {}),
-  ...(app.category ? { applicationCategory: app.category } : {}),
-  ...(app.platforms && app.platforms.length > 0
-    ? { operatingSystem: app.platforms.join(", ") }
-    : {}),
-  ...(app.tags && app.tags.length > 0 ? { keywords: app.tags.join(", ") } : {}),
-  ...(app.addedAt ? { dateCreated: app.addedAt } : {}),
-  ...(app.lastCommitAt ? { dateModified: app.lastCommitAt } : {}),
-  ...(app.github?.repository?.stargazers_count !== undefined
-    ? { interactionStatistic: {
-        "@type": "InteractionCounter",
-        interactionType: { "@type": "LikeAction" },
-        userInteractionCount: app.github.repository.stargazers_count,
-      } }
-    : {}),
-  author: { "@type": "Organization", name: owner ?? app.name, url: app.repoUrl },
-  isAccessibleForFree: true,
-};
----
-
-<BaseLayout title={title} description={description} jsonLd={jsonLd}>
-      <Container>
-        <article class="pt-10 sm:pt-14">
-          {/* Breadcrumb */}
-          <nav class="text-2xs text-ink-500 dark:text-ink-400" aria-label="Breadcrumb">
-            <a href="/apps" class="hover:text-ink-900 dark:hover:text-ink-100">Apps</a>
-            <span class="mx-1.5 text-ink-300 dark:text-ink-700">/</span>
-            <span class="text-ink-700 dark:text-ink-300">{app.name}</span>
-          </nav>
-
-          {/* Header */}
-          <header class="mt-5 flex flex-col gap-5 sm:flex-row sm:items-start sm:justify-between">
-            <div class="flex items-start gap-4">
-              {ownerAvatar ? (
-                <img
-                  src={ownerAvatar}
-                  alt={`${owner} avatar`}
-                  width="64"
-                  height="64"
-                  class="h-16 w-16 shrink-0 rounded-lg border border-ink-200 bg-white object-cover dark:border-ink-800 dark:bg-ink-900"
-                />
-              ) : (
-                <span
-                  aria-hidden="true"
-                  class="flex h-16 w-16 shrink-0 items-center justify-center rounded-lg border border-ink-200 bg-ink-50 text-base font-semibold text-ink-700 dark:border-ink-800 dark:bg-ink-900/60 dark:text-ink-300"
-                >
-                  {initials}
-                </span>
-              )}
-              <div class="flex min-w-0 flex-col gap-1">
-                <h1 class="m-0 text-[1.75rem] sm:text-[2rem] font-semibold tracking-[-0.02em] leading-[1.1] text-ink-900 dark:text-ink-100">
-                  {app.name}
-                </h1>
-                <div class="flex flex-wrap items-center gap-x-2 gap-y-1 text-2xs text-ink-500 dark:text-ink-400">
-                  {owner && (
-                    <a
-                      href={app.repoUrl}
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      class="font-mono hover:text-ink-900 dark:hover:text-ink-100"
-                    >
-                      @{owner}{repo ? <span class="text-ink-400 dark:text-ink-500">/{repo}</span> : ""}
-                    </a>
-                  )}
-                  <span class="text-ink-300 dark:text-ink-700">·</span>
-                  <span>{app.category}</span>
-                  {app.status && (
-                    <>
-                      <span class="text-ink-300 dark:text-ink-700">·</span>
-                      <span class="capitalize">{app.status}</span>
-                    </>
-                  )}
-                </div>
-              </div>
-            </div>
-
-            <div class="flex shrink-0 flex-wrap items-center gap-2 sm:flex-col sm:items-end sm:gap-2">
-              {primaryLabel && (
-                <span class={`badge ${labelClass} text-[10px] leading-none`}>
-                  {primaryLabel}
-                </span>
-              )}
-              <a
-                href={app.repoUrl}
-                target="_blank"
-                rel="noopener noreferrer"
-                class="btn-primary"
-              >
-                <svg viewBox="0 0 16 16" width="14" height="14" aria-hidden="true" fill="currentColor">
-                  <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38v-1.33c-2.22.48-2.69-1.07-2.69-1.07-.36-.92-.89-1.17-.89-1.17-.73-.5.05-.49.05-.49.8.06 1.23.83 1.23.83.72 1.22 1.87.87 2.33.67.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48v2.19c0 .21.15.46.55.38A8 8 0 0 0 8 0Z" />
-                </svg>
-                View on GitHub
-              </a>
-              {app.homepageUrl && (
-                <a
-                  href={app.homepageUrl}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  class="btn-outline"
-                >
-                  Homepage
-                  <span aria-hidden="true">↗</span>
-                </a>
-              )}
-            </div>
-          </header>
-
-          {distributionChannels.length > 0 && (
-            <section class="mt-6 flex flex-wrap items-center gap-2">
-              <span class="text-2xs font-medium uppercase tracking-wider text-ink-500 dark:text-ink-400">
-                Download
-              </span>
-              {distributionChannels.map((channel) => (
-                <a
-                  href={channel.url}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  class="btn-outline"
-                  title={channel.notes}
-                >
-                  {channel.label ?? distributionLabel(channel.type)}
-                  {channel.platform && (
-                    <span class="text-ink-400 dark:text-ink-500">· {channel.platform}</span>
-                  )}
-                </a>
-              ))}
-            </section>
-          )}
-
-          {/* Description */}
-          <p class="mt-6 max-w-[68ch] text-[0.9375rem] sm:text-base leading-relaxed text-ink-700 dark:text-ink-200 m-0">
-            {app.description}
-          </p>
-
-          {/* Metadata grid */}
-          <dl class="mt-8 grid grid-cols-1 gap-px overflow-hidden rounded-lg border border-ink-200 bg-ink-200 text-2xs sm:grid-cols-2 lg:grid-cols-4 dark:border-ink-800 dark:bg-ink-800">
-            <div class="flex flex-col gap-1 bg-white p-4 dark:bg-ink-950">
-              <dt class="font-medium uppercase tracking-wider text-ink-500 dark:text-ink-400">Primary stack</dt>
-              <dd class="text-ink-900 dark:text-ink-100">
-                <span class="chip chip-stack">
-                  <Icon name={app.stack} category="stack" size={11} />
-                  <span>{app.stack}</span>
-                </span>
-              </dd>
-            </div>
-            <div class="flex flex-col gap-1 bg-white p-4 dark:bg-ink-950">
-              <dt class="font-medium uppercase tracking-wider text-ink-500 dark:text-ink-400">Platforms</dt>
-              <dd class="flex flex-wrap gap-1 text-ink-900 dark:text-ink-100">
-                {app.platforms.map((p) => (
-                  <span class="chip">
-                    <Icon name={p} category="platform" size={11} />
-                    <span>{p}</span>
-                  </span>
-                ))}
-              </dd>
-            </div>
-            <div class="flex flex-col gap-1 bg-white p-4 dark:bg-ink-950">
-              <dt class="font-medium uppercase tracking-wider text-ink-500 dark:text-ink-400">License</dt>
-              <dd class="font-mono text-ink-900 dark:text-ink-100">{app.license ?? "—"}</dd>
-            </div>
-            <div class="flex flex-col gap-1 bg-white p-4 dark:bg-ink-950">
-              <dt class="font-medium uppercase tracking-wider text-ink-500 dark:text-ink-400">Stars</dt>
-              <dd class="font-mono text-ink-900 dark:text-ink-100">
-                {starsLabel ?? "—"}
-              </dd>
-            </div>
-            {allStacks.length > 1 && (
-              <div class="flex flex-col gap-1 bg-white p-4 sm:col-span-2 dark:bg-ink-950">
-                <dt class="font-medium uppercase tracking-wider text-ink-500 dark:text-ink-400">Also uses</dt>
-                <dd class="flex flex-wrap gap-1 text-ink-900 dark:text-ink-100">
-                  {app.stacks?.map((s) => (
-                    <span class="chip chip-stack">
-                      <Icon name={s} category="stack" size={11} />
-                      <span>{s}</span>
-                    </span>
-                  ))}
-                </dd>
-              </div>
-            )}
-            {app.addedAt && (
-              <div class="flex flex-col gap-1 bg-white p-4 dark:bg-ink-950">
-                <dt class="font-medium uppercase tracking-wider text-ink-500 dark:text-ink-400">Added</dt>
-                <dd class="font-mono text-ink-900 dark:text-ink-100">{formatDate(app.addedAt)}</dd>
-              </div>
-            )}
-            {app.lastCommitAt && (
-              <div class="flex flex-col gap-1 bg-white p-4 dark:bg-ink-950">
-                <dt class="font-medium uppercase tracking-wider text-ink-500 dark:text-ink-400">Last commit</dt>
-                <dd class="font-mono text-ink-900 dark:text-ink-100">{formatDate(app.lastCommitAt)}</dd>
-              </div>
-            )}
-          </dl>
-
-          {/* Decision signals */}
-          <section class="mt-8 grid grid-cols-1 gap-4 lg:grid-cols-3">
-            <div class="card p-5">
-              <h2 class="m-0 text-[1rem] font-semibold tracking-tight text-ink-900 dark:text-ink-100">
-                Repository health
-              </h2>
-              <dl class="mt-4 grid gap-3 text-sm">
-                <div class="flex items-center justify-between gap-3">
-                  <dt class="text-ink-500 dark:text-ink-400">Status</dt>
-                  <dd class="font-medium capitalize text-ink-900 dark:text-ink-100">
-                    {repoHealth?.status ?? app.status ?? "unknown"}
-                  </dd>
-                </div>
-                <div class="flex items-center justify-between gap-3">
-                  <dt class="text-ink-500 dark:text-ink-400">Tier</dt>
-                  <dd class="font-medium capitalize text-ink-900 dark:text-ink-100">
-                    {repoHealth?.tier ?? app.tier ?? "listed"}
-                  </dd>
-                </div>
-                <div class="flex items-center justify-between gap-3">
-                  <dt class="text-ink-500 dark:text-ink-400">Forks</dt>
-                  <dd class="font-mono text-ink-900 dark:text-ink-100">
-                    {repoMeta?.forks_count ?? "—"}
-                  </dd>
-                </div>
-                <div class="flex items-center justify-between gap-3">
-                  <dt class="text-ink-500 dark:text-ink-400">Contributors</dt>
-                  <dd class="font-mono text-ink-900 dark:text-ink-100">
-                    {contributorsKnown ?? "—"}
-                  </dd>
-                </div>
-                <div class="flex items-center justify-between gap-3">
-                  <dt class="text-ink-500 dark:text-ink-400">Commits known</dt>
-                  <dd class="font-mono text-ink-900 dark:text-ink-100">
-                    {totalCommitsKnown ?? "—"}
-                  </dd>
-                </div>
-                <div class="flex items-center justify-between gap-3">
-                  <dt class="text-ink-500 dark:text-ink-400">Open issues</dt>
-                  <dd class="font-mono text-ink-900 dark:text-ink-100">
-                    {repoMeta?.open_issues_count ?? "—"}
-                  </dd>
-                </div>
-                {latestReleaseAt && (
-                  <div class="flex items-center justify-between gap-3">
-                    <dt class="text-ink-500 dark:text-ink-400">Latest release</dt>
-                    <dd class="font-mono text-ink-900 dark:text-ink-100">
-                      {formatDate(latestReleaseAt)}
-                    </dd>
-                  </div>
-                )}
-              </dl>
-            </div>
-
-            <div class="card p-5">
-              <h2 class="m-0 text-[1rem] font-semibold tracking-tight text-ink-900 dark:text-ink-100">
-                Activity
-              </h2>
-              {monthlyCommits.length > 0 ? (
-                <figure class="mt-4 m-0">
-                  <div
-                    class="flex h-28 items-end gap-1.5"
-                    role="img"
-                    aria-label={`Monthly commits over the last ${monthlyCommits.length} months. Peak: ${maxMonthlyCommits} commits.`}
-                  >
-                    {monthlyCommits.map((item) => (
-                      <div class="flex min-w-0 flex-1 flex-col items-center gap-1">
-                        <div
-                          class="w-full rounded-sm bg-ink-700 dark:bg-ink-200"
-                          style={`height: ${Math.max(8, Math.round(((item.commits ?? 0) / maxMonthlyCommits) * 96))}px`}
-                          title={`${item.month || "month"}: ${item.commits ?? 0} commits`}
-                        />
-                        <span class="max-w-full truncate text-[10px] text-ink-500 dark:text-ink-400">
-                          {item.month ? item.month.slice(5) : item.commits}
-                        </span>
-                      </div>
-                    ))}
-                  </div>
-                  {/* Visually-hidden data table so screen readers can read
-                      the same values sighted users see in the bars. */}
-                  <figcaption class="sr-only">
-                    <table>
-                      <caption>Monthly commit count over the last {monthlyCommits.length} months</caption>
-                      <thead>
-                        <tr><th scope="col">Month</th><th scope="col">Commits</th></tr>
-                      </thead>
-                      <tbody>
-                        {monthlyCommits.map((item) => (
-                          <tr>
-                            <th scope="row">{item.month || "Unknown"}</th>
-                            <td>{item.commits ?? 0}</td>
-                          </tr>
-                        ))}
-                      </tbody>
-                    </table>
-                  </figcaption>
-                </figure>
-              ) : (
-                <div class="mt-4 space-y-1.5">
-                  <p class="m-0 text-sm text-ink-500 dark:text-ink-400">
-                    Monthly commit history is not yet populated for this app.
-                  </p>
-                  <p class="m-0 text-2xs text-ink-400 dark:text-ink-500">
-                    Activity data refreshes daily via
-                    <a
-                      href={`${stats.originalRepo}/blob/main/.github/workflows/sync-github-metadata.yml`}
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      class="text-ink-700 hover:text-ink-900 dark:text-ink-300 dark:hover:text-ink-100"
-                    >sync-github-metadata</a
-                    >. Last commit and stars are already in sync.
-                  </p>
-                </div>
-              )}
-            </div>
-
-            <div class="card p-5">
-              <h2 class="m-0 text-[1rem] font-semibold tracking-tight text-ink-900 dark:text-ink-100">
-                Contribution readiness
-              </h2>
-              {contributionSignals.length > 0 ? (
-                <ul class="mt-4 m-0 grid list-none gap-2 p-0 text-sm">
-                  {contributionSignals.map((signal) => (
-                    <li class="flex items-center justify-between gap-3">
-                      <span class="text-ink-700 dark:text-ink-200">{signal.label}</span>
-                      <span class={signal.ok ? "text-emerald-700 dark:text-emerald-400" : "text-ink-400 dark:text-ink-600"}>
-                        {signal.ok ? "Found" : "Missing"}
-                      </span>
-                    </li>
-                  ))}
-                </ul>
-              ) : (
-                <p class="mt-4 m-0 text-sm text-ink-500 dark:text-ink-400">
-                  Contribution files have not been synced yet.
-                </p>
-              )}
-            </div>
-          </section>
-
-          {languages.length > 0 && (
-            <section class="mt-4 card p-5">
-              <h2 class="m-0 text-[1rem] font-semibold tracking-tight text-ink-900 dark:text-ink-100">
-                Language mix
-              </h2>
-              <dl class="mt-4 grid gap-2 text-sm">
-                {languages.map(([language, bytes]) => {
-                  const pct = Math.round((bytes / totalLanguageBytes) * 100);
-                  return (
-                    <div class="grid grid-cols-[8rem_minmax(0,1fr)_3rem] items-center gap-3">
-                      <dt class="truncate text-ink-700 dark:text-ink-200">{language}</dt>
-                      <dd class="h-2 overflow-hidden rounded-sm bg-ink-200 dark:bg-ink-800">
-                        <div class="h-full bg-ink-700 dark:bg-ink-200" style={`width: ${pct}%`} />
-                      </dd>
-                      <dd class="text-right font-mono text-2xs text-ink-500 dark:text-ink-400">{pct}%</dd>
-                    </div>
-                  );
-                })}
-              </dl>
-            </section>
-          )}
-
-          {/* Curation block — scores + Best for / Why listed / Caveats */}
-          {(hasScores || hasCuration) && (
-            <section class="mt-8 grid grid-cols-1 gap-4 lg:grid-cols-5">
-              {hasScores && (
-                <div class="card p-5 lg:col-span-3">
-                  <header class="mb-4 flex items-baseline justify-between gap-2">
-                    <h2 class="m-0 text-[1rem] font-semibold tracking-tight text-ink-900 dark:text-ink-100">
-                      Scores
-                    </h2>
-                    {app.curation?.reviewed ? (
-                      <span class="inline-flex items-center gap-1 rounded border border-emerald-300/60 bg-emerald-50 px-1.5 py-0.5 text-[10px] font-medium text-emerald-800 dark:border-emerald-800/60 dark:bg-emerald-950/40 dark:text-emerald-300">
-                        Curator reviewed
-                      </span>
-                    ) : app.curation?.by ? (
-                      <span class="text-2xs text-ink-500 dark:text-ink-400">
-                        Auto-curated · {app.curation.by}
-                      </span>
-                    ) : (
-                      <span class="text-2xs text-ink-500 dark:text-ink-400">
-                        Auto-curated
-                      </span>
-                    )}
-                  </header>
-                  <dl class="flex flex-col gap-2.5 text-sm">
-                    {SCORE_DIMENSIONS.map((dim) => {
-                      const v = app.scores![dim];
-                      const tier = typeof v === "number" ? scoreTier(v) : 0;
-                      const isOverall = dim === "overall";
-                      return (
-                        <div class="flex items-center gap-3">
-                          <dt
-                            class={`w-24 shrink-0 ${
-                              isOverall
-                                ? "font-semibold text-ink-900 dark:text-ink-100"
-                                : "text-ink-700 dark:text-ink-200"
-                            }`}
-                          >
-                            {SCORE_LABELS[dim]}
-                          </dt>
-                          <dd
-                            class="flex h-2 flex-1 gap-px"
-                            aria-label={`${SCORE_LABELS[dim]} ${scoreLabel(v)} of 100`}
-                          >
-                            {[0, 1, 2, 3].map((i) => (
-                              <div
-                                class={`flex-1 rounded-sm ${
-                                  i < tier
-                                    ? isOverall
-                                      ? "bg-ink-700 dark:bg-ink-200"
-                                      : "bg-ink-500 dark:bg-ink-400"
-                                    : "bg-ink-200 dark:bg-ink-800"
-                                }`}
-                              />
-                            ))}
-                          </dd>
-                          <dd
-                            class={`w-7 shrink-0 text-right font-mono tabular-nums ${
-                              isOverall
-                                ? "font-semibold text-ink-900 dark:text-ink-100"
-                                : "text-ink-700 dark:text-ink-300"
-                            }`}
-                          >
-                            {scoreLabel(v)}
-                          </dd>
-                        </div>
-                      );
-                    })}
-                  </dl>
-                  <dl class="mt-5 flex flex-col gap-1.5 border-t border-ink-200 pt-4 text-2xs dark:border-ink-800">
-                    {SCORE_DIMENSIONS.map((dim) => (
-                      <div class="flex items-baseline gap-2">
-                        <dt class="w-24 shrink-0 font-medium text-ink-500 dark:text-ink-400">
-                          {SCORE_LABELS[dim]}
-                        </dt>
-                        <dd class="text-ink-600 dark:text-ink-300">
-                          {SCORE_REASONING[dim]}
-                        </dd>
-                      </div>
-                    ))}
-                  </dl>
-                </div>
-              )}
-
-              {hasCuration && (
-                <div class="card p-5 lg:col-span-2">
-                  <h2 class="m-0 text-[1rem] font-semibold tracking-tight text-ink-900 dark:text-ink-100">
-                    Curation
-                  </h2>
-                  <div class="mt-4 flex flex-col gap-4 text-sm">
-                    {app.bestFor && app.bestFor.length > 0 && (
-                      <div>
-                        <div class="text-2xs font-semibold uppercase tracking-wider text-ink-500 dark:text-ink-400">
-                          Best for
-                        </div>
-                        <ul class="mt-1.5 m-0 list-none space-y-1 p-0 text-ink-700 dark:text-ink-200">
-                          {app.bestFor.map((s) => (
-                            <li class="flex items-baseline gap-2">
-                              <span class="text-ink-400 dark:text-ink-500" aria-hidden="true">·</span>
-                              <span>{s}</span>
-                            </li>
-                          ))}
-                        </ul>
-                      </div>
-                    )}
-                    {app.whyListed && app.whyListed.length > 0 && (
-                      <div>
-                        <div class="text-2xs font-semibold uppercase tracking-wider text-ink-500 dark:text-ink-400">
-                          Why listed
-                        </div>
-                        <ul class="mt-1.5 m-0 list-none space-y-1 p-0 text-ink-700 dark:text-ink-200">
-                          {app.whyListed.map((s) => (
-                            <li class="flex items-baseline gap-2">
-                              <span class="text-ink-400 dark:text-ink-500" aria-hidden="true">·</span>
-                              <span>{s}</span>
-                            </li>
-                          ))}
-                        </ul>
-                      </div>
-                    )}
-                    {app.caveats && app.caveats.length > 0 && (
-                      <div>
-                        <div class="text-2xs font-semibold uppercase tracking-wider text-amber-700 dark:text-amber-400">
-                          Caveats
-                        </div>
-                        <ul class="mt-1.5 m-0 list-none space-y-1 p-0 text-ink-700 dark:text-ink-200">
-                          {app.caveats.map((s) => (
-                            <li class="flex items-baseline gap-2">
-                              <span class="text-amber-500 dark:text-amber-400" aria-hidden="true">·</span>
-                              <span>{s}</span>
-                            </li>
-                          ))}
-                        </ul>
-                      </div>
-                    )}
-                  </div>
-                </div>
-              )}
-            </section>
-          )}
-
-          {/* Project shape — secondary curation metadata */}
-          {(app.projectType || app.stateManagement || app.backend || app.architecture || app.difficulty || app.codebaseSize) && (
-            <section class="mt-4 card p-5">
-              <h2 class="m-0 text-[1rem] font-semibold tracking-tight text-ink-900 dark:text-ink-100">
-                Project shape
-              </h2>
-              <dl class="mt-4 grid grid-cols-1 gap-x-6 gap-y-3 text-sm sm:grid-cols-2 lg:grid-cols-3">
-                {app.projectType && (
-                  <div>
-                    <dt class="text-2xs font-medium uppercase tracking-wider text-ink-500 dark:text-ink-400">Type</dt>
-                    <dd class="mt-0.5 text-ink-700 dark:text-ink-200">
-                      {app.projectType === "real-app" ? "Real app" :
-                       app.projectType === "production" ? "Production" :
-                       app.projectType === "reference" ? "Reference" :
-                       app.projectType === "demo" ? "Demo" :
-                       app.projectType === "template" ? "Template" : app.projectType}
-                    </dd>
-                  </div>
-                )}
-                {app.stateManagement && (
-                  <div>
-                    <dt class="text-2xs font-medium uppercase tracking-wider text-ink-500 dark:text-ink-400">State management</dt>
-                    <dd class="mt-0.5 text-ink-700 dark:text-ink-200">{app.stateManagement}</dd>
-                  </div>
-                )}
-                {app.backend && (
-                  <div>
-                    <dt class="text-2xs font-medium uppercase tracking-wider text-ink-500 dark:text-ink-400">Backend</dt>
-                    <dd class="mt-0.5 text-ink-700 dark:text-ink-200">{app.backend}</dd>
-                  </div>
-                )}
-                {app.architecture && (
-                  <div>
-                    <dt class="text-2xs font-medium uppercase tracking-wider text-ink-500 dark:text-ink-400">Architecture</dt>
-                    <dd class="mt-0.5 text-ink-700 dark:text-ink-200">{app.architecture}</dd>
-                  </div>
-                )}
-                {app.difficulty && (
-                  <div>
-                    <dt class="text-2xs font-medium uppercase tracking-wider text-ink-500 dark:text-ink-400">Difficulty</dt>
-                    <dd class="mt-0.5 capitalize text-ink-700 dark:text-ink-200">{app.difficulty}</dd>
-                  </div>
-                )}
-                {app.codebaseSize && (
-                  <div>
-                    <dt class="text-2xs font-medium uppercase tracking-wider text-ink-500 dark:text-ink-400">Codebase size</dt>
-                    <dd class="mt-0.5 capitalize text-ink-700 dark:text-ink-200">{app.codebaseSize}</dd>
-                  </div>
-                )}
-              </dl>
-            </section>
-          )}
-
-          {/* Tags */}
-          {app.tags && app.tags.length > 0 && (
-            <div class="mt-4 flex flex-wrap items-center gap-1.5">
-              <span class="text-2xs font-medium uppercase tracking-wider text-ink-500 dark:text-ink-400">Tags</span>
-              {app.tags.map((t) => (
-                <a
-                  href={`/apps?q=${encodeURIComponent(t)}`}
-                  class="chip hover:border-ink-300 dark:hover:border-ink-700"
-                >
-                  {t}
-                </a>
-              ))}
-            </div>
-          )}
-
-          {/* Related section removed — this is a code reference, not an
-              e-commerce page. Use the Apps list to find more by stack. */}
-        </article>
-      </Container>
-    <style>
-      @reference "../../styles/global.css";
-
-      .chip {
-        @apply inline-flex items-center gap-1 rounded-md border border-ink-200 bg-white px-1.5 py-0.5 text-2xs font-medium text-ink-700 transition-colors dark:border-ink-800 dark:bg-ink-950 dark:text-ink-300;
-      }
-      .chip-stack {
-        @apply bg-ink-50 dark:bg-ink-900/60;
-      }
-    </style>
-</BaseLayout>