@grove-dev/astro 0.1.5 → 0.2.5

package/templates/default/src/pages/submit.astro

@@ -1,416 +1,127 @@
 ---
-import { siteConfig } from "../data/config";
-import BaseLayout from "../components/layout/BaseLayout.astro";
-import Container from "../components/layout/Container.astro";
-import { stacks } from "../data/stacks";
-import { categories } from "../data/categories";
-
-const platformOptions = [
-  { id: "ios", name: "iOS" },
-  { id: "android", name: "Android" },
-  { id: "web", name: "Web" },
-  { id: "macos", name: "macOS" },
-  { id: "windows", name: "Windows" },
-  { id: "linux", name: "Linux" },
-];
-
-const distributionOptions = [
-  { type: "app-store", label: "App Store", platform: "ios", placeholder: "https://apps.apple.com/..." },
-  { type: "play-store", label: "Play Store", platform: "android", placeholder: "https://play.google.com/store/apps/details?id=..." },
-  { type: "fdroid", label: "F-Droid", platform: "android", placeholder: "https://f-droid.org/packages/..." },
-  { type: "github-releases", label: "GitHub Releases", platform: "android", placeholder: "https://github.com/owner/repo/releases" },
-  { type: "apk", label: "APK download", platform: "android", placeholder: "https://example.com/app.apk" },
-  { type: "testflight", label: "TestFlight", platform: "ios", placeholder: "https://testflight.apple.com/join/..." },
-  { type: "website", label: "Website download", platform: "web", placeholder: "https://example.com/download" },
-];
-
-const title = "Submit App - ${siteConfig.name}";
-const description = "Submit an open-source app to ${siteConfig.name}.";
-// The submit page is a thin wrapper around a GitHub Issues form —
-// no content of its own. Keep it out of search results and out of
-// the sitemap.
+/**
+ * Submit page — text-based instructions for contributing a new
+ * record. No form: the openapps 19K form preview is overkill for
+ * the default template, and a static "open a PR / open an issue"
+ * workflow matches how the showcase actually accepts submissions.
+ */
+import siteConfig from "../../data/generated/site-config.json";
+import { indexSlug, itemLabel } from "../data/records";
+import BaseLayout from "@grove-dev/astro/layouts/BaseLayout.astro";
+import Container from "@grove-dev/astro/layouts/Container.astro";
+
+const title = `Submit a ${itemLabel()} — ${siteConfig.name}`;
+const description = `Submit a new ${itemLabel()} to ${siteConfig.name}.`;
 const noindex = true;
----
-
-<BaseLayout title={title} description={description} noindex={noindex}>
-      <Container>
-        <section class="py-10 sm:py-14">
-          <div class="max-w-3xl">
-            <p class="m-0 text-2xs font-semibold uppercase tracking-wider text-ink-500 dark:text-ink-400">
-              App submission
-            </p>
-            <h1 class="mt-2 text-[2rem] font-semibold tracking-tight text-ink-900 dark:text-ink-100">
-              Add an app from GitHub
-            </h1>
-          </div>
-
-          <div class="mt-8 grid grid-cols-1 gap-6 lg:grid-cols-[minmax(0,1fr)_minmax(360px,0.8fr)]">
-            <form id="submit-form" class="card p-5">
-              <div class="grid gap-5">
-                <label class="grid gap-1.5">
-                  <span class="text-2xs font-medium uppercase tracking-wider text-ink-500 dark:text-ink-400">GitHub URL</span>
-                  <div class="flex flex-col gap-2 sm:flex-row">
-                    <input
-                      id="repo-url"
-                      name="repoUrl"
-                      type="url"
-                      required
-                      placeholder="https://github.com/owner/repo"
-                      class="min-h-10 flex-1 rounded-md border border-ink-200 bg-white px-3 text-sm text-ink-900 outline-none focus:border-ink-500 dark:border-ink-800 dark:bg-ink-950 dark:text-ink-100"
-                    />
-                    <button id="fetch-repo" type="button" class="btn-primary min-h-10 justify-center">
-                      Fetch draft
-                    </button>
-                  </div>
-                </label>
-
-                <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
-                  <label class="grid gap-1.5">
-                    <span class="text-2xs font-medium uppercase tracking-wider text-ink-500 dark:text-ink-400">Name</span>
-                    <input id="app-name" type="text" class="field" />
-                  </label>
-                  <label class="grid gap-1.5">
-                    <span class="text-2xs font-medium uppercase tracking-wider text-ink-500 dark:text-ink-400">Slug</span>
-                    <input id="app-slug" type="text" class="field font-mono" />
-                  </label>
-                </div>
-
-                <label class="grid gap-1.5">
-                  <span class="text-2xs font-medium uppercase tracking-wider text-ink-500 dark:text-ink-400">Description</span>
-                  <textarea id="app-description" rows="3" class="field resize-y"></textarea>
-                </label>
-
-                <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
-                  <label class="grid gap-1.5">
-                    <span class="text-2xs font-medium uppercase tracking-wider text-ink-500 dark:text-ink-400">Category</span>
-                    <select id="app-category" class="field">
-                      {categories.map((category) => (
-                        <option value={category.slug}>{category.name}</option>
-                      ))}
-                    </select>
-                  </label>
-                  <label class="grid gap-1.5">
-                    <span class="text-2xs font-medium uppercase tracking-wider text-ink-500 dark:text-ink-400">Primary stack</span>
-                    <select id="primary-stack" class="field">
-                      {stacks.map((stack) => (
-                        <option value={stack.slug}>{stack.name}</option>
-                      ))}
-                    </select>
-                  </label>
-                </div>
-
-                <fieldset class="grid gap-2">
-                  <legend class="text-2xs font-medium uppercase tracking-wider text-ink-500 dark:text-ink-400">
-                    Platforms
-                  </legend>
-                  <div class="grid grid-cols-2 gap-2 sm:grid-cols-3">
-                    {platformOptions.map((platform) => (
-                      <label class="flex min-h-9 items-center gap-2 rounded-md border border-ink-200 px-2 text-sm dark:border-ink-800">
-                        <input type="checkbox" name="platform" value={platform.id} class="h-4 w-4" />
-                        <span>{platform.name}</span>
-                      </label>
-                    ))}
-                  </div>
-                </fieldset>
-
-                <label class="grid gap-1.5">
-                  <span class="text-2xs font-medium uppercase tracking-wider text-ink-500 dark:text-ink-400">Tags</span>
-                  <input id="app-tags" type="text" placeholder="self-hosted, photos, offline-first" class="field" />
-                </label>
-
-                <fieldset class="grid gap-2">
-                  <legend class="text-2xs font-medium uppercase tracking-wider text-ink-500 dark:text-ink-400">
-                    Download links
-                  </legend>
-                  <div class="grid gap-2">
-                    {distributionOptions.map((option) => (
-                      <label class="grid gap-1 rounded-md border border-ink-200 p-2 dark:border-ink-800">
-                        <span class="text-xs font-medium text-ink-700 dark:text-ink-200">{option.label}</span>
-                        <input
-                          type="url"
-                          data-distribution-type={option.type}
-                          data-distribution-label={option.label}
-                          data-distribution-platform={option.platform}
-                          placeholder={option.placeholder}
-                          class="field min-h-9 text-xs"
-                        />
-                      </label>
-                    ))}
-                  </div>
-                </fieldset>
-
-                <label class="grid gap-1.5">
-                  <span class="text-2xs font-medium uppercase tracking-wider text-ink-500 dark:text-ink-400">Best for</span>
-                  <textarea id="best-for" rows="3" class="field resize-y"></textarea>
-                </label>
-              </div>
-            </form>
-
-            <aside class="card flex min-h-[520px] flex-col p-5">
-              <div class="flex items-center justify-between gap-3">
-                <h2 class="m-0 text-base font-semibold text-ink-900 dark:text-ink-100">YAML draft</h2>
-                <a id="open-pr-link" href="#" target="_blank" rel="noopener noreferrer" class="btn-outline pointer-events-none opacity-50">
-                  Open PR draft
-                </a>
-              </div>
-              <pre class="mt-4 min-h-0 flex-1 overflow-auto rounded-md border border-ink-200 bg-ink-50 p-3 text-xs leading-relaxed text-ink-800 dark:border-ink-800 dark:bg-ink-900/60 dark:text-ink-200"><code id="yaml-preview">Paste a GitHub URL to generate a draft.</code></pre>
-              <p id="submit-status" class="mt-3 min-h-5 text-2xs text-ink-500 dark:text-ink-400" aria-live="polite" aria-atomic="true"></p>
-            </aside>
-          </div>
-        </section>
-      </Container>
-
-    <style>
-      @reference "../styles/global.css";
-
-      .field {
-        @apply min-h-10 rounded-md border border-ink-200 bg-white px-3 py-2 text-sm text-ink-900 outline-none focus:border-ink-500 dark:border-ink-800 dark:bg-ink-950 dark:text-ink-100;
-      }
-    </style>
+const slug = indexSlug();
 
-    <script>
-      // @ts-nocheck
-      const repoUrl = document.querySelector("#repo-url");
-      const fetchButton = document.querySelector("#fetch-repo");
-      const status = document.querySelector("#submit-status");
-      const preview = document.querySelector("#yaml-preview");
-      const openPrLink = document.querySelector("#open-pr-link");
-      const fields = {
-        name: document.querySelector("#app-name"),
-        slug: document.querySelector("#app-slug"),
-        description: document.querySelector("#app-description"),
-        category: document.querySelector("#app-category"),
-        primaryStack: document.querySelector("#primary-stack"),
-        tags: document.querySelector("#app-tags"),
-        bestFor: document.querySelector("#best-for"),
-      };
-
-      let repository = null;
-
-      function slugify(value) {
-        return String(value || "")
-          .toLowerCase()
-          .replace(/[^a-z0-9]+/g, "-")
-          .replace(/^-+|-+$/g, "");
-      }
-
-      function parseGithubUrl(value) {
-        const match = String(value).match(/github\.com\/([^/]+)\/([^/?#]+)/);
-        if (!match) return null;
-        return { owner: match[1], repo: match[2].replace(/\.git$/, "") };
-      }
-
-      function inferStack(repo) {
-        const language = String(repo.language || "").toLowerCase();
-        const topics = (repo.topics || []).map((topic) => String(topic).toLowerCase());
-        if (topics.includes("flutter") || language === "dart") return "flutter";
-        if (topics.includes("react-native")) return "react-native";
-        if (topics.includes("capacitor") || topics.includes("ionic")) return "capacitor";
-        if (language === "swift" || language === "objective-c") return "ios";
-        if (language === "kotlin" || language === "java") return "android";
-        // Unknown — return empty so the user has to pick. The previous
-        // default of "flutter" mis-tagged Java/Kotlin/Swift-only apps.
-        return "";
-      }
-
-      function inferPlatforms(repo, stack) {
-        const topics = (repo.topics || []).map((topic) => String(topic).toLowerCase());
-        const values = new Set();
-        for (const topic of topics) {
-          if (["ios", "android", "web", "macos", "windows", "linux"].includes(topic)) values.add(topic);
-        }
-        if (stack === "ios") values.add("ios");
-        if (stack === "android") values.add("android");
-        if (stack === "flutter" || stack === "react-native" || stack === "capacitor") {
-          values.add("ios");
-          values.add("android");
-        }
-        return [...values];
-      }
-
-      function setPlatforms(values) {
-        const selected = new Set(values);
-        document.querySelectorAll("input[name='platform']").forEach((input) => {
-          input.checked = selected.has(input.value);
-        });
-      }
-
-      function selectedPlatforms() {
-        return [...document.querySelectorAll("input[name='platform']:checked")].map((input) => input.value);
-      }
-
-      function distributionChannels() {
-        return [...document.querySelectorAll("[data-distribution-type]")]
-          .map((input) => ({
-            type: input.dataset.distributionType,
-            label: input.dataset.distributionLabel,
-            platform: input.dataset.distributionPlatform,
-            url: input.value.trim(),
-          }))
-          .filter((channel) => channel.url);
-      }
-
-      function listLines(values, indent) {
-        return values.map((value) => `${" ".repeat(indent)}- ${value}`).join("\n");
-      }
-
-      function yamlQuote(value) {
-        const safe = String(value ?? "").replace(/"/g, '\\"');
-        return `"${safe}"`;
-      }
-
-      function generateYaml() {
-        if (!repository) return "";
-        const parsed = parseGithubUrl(repoUrl.value);
-        if (!parsed) return "";
-        const slug = slugify(fields.slug.value || repository.name);
-        const tags = fields.tags.value.split(",").map((tag) => tag.trim()).filter(Boolean);
-        const bestFor = fields.bestFor.value.split("\n").map((line) => line.trim()).filter(Boolean);
-        const platforms = selectedPlatforms();
-        const distribution = distributionChannels();
-        const stack = fields.primaryStack.value;
-        const topics = repository.topics || [];
-        const technologies = [...new Set([stack, String(repository.language || "").toLowerCase(), ...topics])].filter(Boolean);
-        const now = new Date().toISOString();
-
-        return [
-          "schemaVersion: 1",
-          "",
-          `id: github:${repository.full_name}`,
-          `slug: ${slug}`,
-          "",
-          "source:",
-          "  provider: github",
-          `  owner: ${parsed.owner}`,
-          `  repo: ${parsed.repo}`,
-          `  url: ${repository.html_url}`,
-          "",
-          "app:",
-          `  name: ${yamlQuote(fields.name.value)}`,
-          `  description: ${yamlQuote(fields.description.value)}`,
-          `  category: ${fields.category.value}`,
-          "  projectType: production",
-          "  platforms:",
-          platforms.length ? listLines(platforms, 4) : "    - ios",
-          "  tags:",
-          tags.length ? listLines(tags, 4) : listLines(topics.slice(0, 5), 4),
-          ...(distribution.length
-            ? [
-                "  distribution:",
-                "    channels:",
-                ...distribution.map((channel) => [
-                  `      - type: ${channel.type}`,
-                  `        platform: ${channel.platform}`,
-                  `        label: ${yamlQuote(channel.label)}`,
-                  `        url: ${channel.url}`,
-                  "        verified: false",
-                ].join("\n")),
-              ]
-            : []),
-          "",
-          "stack:",
-          `  primary: ${stack}`,
-          "  technologies:",
-          ...technologies.slice(0, 10).map((id) => `    - id: ${id}\n      role: technology`),
-          "",
-          "github:",
-          "  repository:",
-          `    id: ${repository.id}`,
-          `    node_id: ${repository.node_id}`,
-          `    name: ${repository.name}`,
-          `    full_name: ${repository.full_name}`,
-          `    html_url: ${repository.html_url}`,
-          `    clone_url: ${repository.clone_url}`,
-          `    ssh_url: ${repository.ssh_url}`,
-          `    homepage: ${repository.homepage ? yamlQuote(repository.homepage) : "null"}`,
-          `    description: ${repository.description ? yamlQuote(repository.description) : "null"}`,
-          `    fork: ${Boolean(repository.fork)}`,
-          `    archived: ${Boolean(repository.archived)}`,
-          `    disabled: ${Boolean(repository.disabled)}`,
-          `    private: ${Boolean(repository.private)}`,
-          `    is_template: ${Boolean(repository.is_template)}`,
-          `    visibility: ${repository.visibility || "public"}`,
-          `    default_branch: ${repository.default_branch}`,
-          `    language: ${repository.language ? yamlQuote(repository.language) : "null"}`,
-          "    topics:",
-          topics.length ? listLines(topics, 6) : "      []",
-          "    license:",
-          `      key: ${repository.license?.key || "unknown"}`,
-          `      name: ${repository.license?.name ? yamlQuote(repository.license.name) : "null"}`,
-          `      spdx_id: ${repository.license?.spdx_id || "NOASSERTION"}`,
-          `    stargazers_count: ${repository.stargazers_count || 0}`,
-          `    watchers_count: ${repository.watchers_count || 0}`,
-          `    forks_count: ${repository.forks_count || 0}`,
-          `    open_issues_count: ${repository.open_issues_count || 0}`,
-          `    subscribers_count: ${repository.subscribers_count || 0}`,
-          `    size: ${repository.size || 0}`,
-          `    created_at: ${repository.created_at}`,
-          `    updated_at: ${repository.updated_at}`,
-          `    pushed_at: ${repository.pushed_at}`,
-          "  sync:",
-          `    syncedAt: ${now}`,
-          "    apiVersion: rest-v3",
-          "    source: submit-page",
-          "",
-          "curation:",
-          "  reviewed: false",
-          "  reviewedBy: null",
-          "  reviewedAt: null",
-          "  bestFor:",
-          bestFor.length ? listLines(bestFor, 4) : "    []",
-          "  caveats:",
-          "    []",
-          "",
-        ].join("\n");
-      }
-
-      function refreshYaml() {
-        const yaml = generateYaml();
-        preview.textContent = yaml || "Paste a GitHub URL to generate a draft.";
-        if (!yaml || !repository) {
-          openPrLink.href = "#";
-          openPrLink.classList.add("pointer-events-none", "opacity-50");
-          return;
-        }
-        const slug = slugify(fields.slug.value || repository.name);
-        const params = new URLSearchParams({
-          filename: `data/apps/${slug}.yml`,
-          value: yaml,
-        });
-        openPrLink.href = `https://github.com/tortuvshin/open-apps/new/main?${params.toString()}`;
-        openPrLink.classList.remove("pointer-events-none", "opacity-50");
-      }
-
-      fetchButton.addEventListener("click", async () => {
-        const parsed = parseGithubUrl(repoUrl.value);
-        if (!parsed) {
-          status.textContent = "Enter a valid GitHub repository URL.";
-          return;
-        }
-        fetchButton.disabled = true;
-        status.textContent = "Fetching GitHub metadata...";
-        try {
-          const response = await fetch(`https://api.github.com/repos/${parsed.owner}/${parsed.repo}`, {
-            headers: { Accept: "application/vnd.github+json" },
-          });
-          if (!response.ok) throw new Error(`GitHub returned ${response.status}`);
-          repository = await response.json();
-          const stack = inferStack(repository);
-          fields.name.value = repository.name || parsed.repo;
-          fields.slug.value = slugify(repository.name || parsed.repo);
-          fields.description.value = repository.description || "";
-          fields.primaryStack.value = stack;
-          fields.tags.value = (repository.topics || []).slice(0, 8).join(", ");
-          setPlatforms(inferPlatforms(repository, stack));
-          status.textContent = "Draft generated.";
-          refreshYaml();
-        } catch (error) {
-          status.textContent = error.message;
-        } finally {
-          fetchButton.disabled = false;
-        }
-      });
+const repoPath = (siteConfig.repoUrl ?? "").replace(/^https?:\/\/github\.com\//, "");
+const issueUrl = repoPath
+  ? `https://github.com/${repoPath}/issues/new?template=record_submission.md`
+  : "https://github.com/tortuvshin/grove/issues/new";
+---
 
-      document.querySelector("#submit-form").addEventListener("input", refreshYaml);
-    </script>
+<BaseLayout
+  title={title}
+  description={description}
+  site={siteConfig}
+  noindex={noindex}
+>
+  <Container>
+    <article class="py-12 sm:py-16">
+      <span class="text-2xs font-medium uppercase tracking-wider text-ink-500 dark:text-ink-400">
+        Submit
+      </span>
+      <h1 class="mt-1 text-[1.75rem] sm:text-[2rem] font-semibold tracking-tight text-ink-900 dark:text-ink-100 m-0">
+        Submit a {itemLabel()}
+      </h1>
+      <p class="mt-4 max-w-[62ch] text-sm text-ink-700 dark:text-ink-200 m-0">
+        {siteConfig.name} is a community knowledge site. Adding a new{" "}
+        {itemLabel()} is a two-step process — open a submission issue,
+        then open a pull request that adds a new YAML file under{" "}
+        <code class="font-mono text-ink-900 dark:text-ink-100">data/records/</code>.
+      </p>
+
+      <div class="mt-6 flex flex-wrap gap-2">
+        <a
+          href={issueUrl}
+          target="_blank"
+          rel="noopener noreferrer"
+          class="grove-btn grove-btn-primary"
+        >
+          Open a submission issue ↗
+        </a>
+        {repoPath && (
+          <a
+            href={`https://github.com/${repoPath}/blob/main/.github/ISSUE_TEMPLATE/record_submission.md`}
+            target="_blank"
+            rel="noopener noreferrer"
+            class="grove-btn grove-btn-outline"
+          >
+            See the issue template
+          </a>
+        )}
+      </div>
+
+      <section class="mt-12 max-w-[68ch">
+        <h2 class="m-0 text-lg font-semibold tracking-tight text-ink-900 dark:text-ink-100">
+          Manual record (alternative to the issue form)
+        </h2>
+        <p class="mt-2 text-sm text-ink-700 dark:text-ink-200 m-0">
+          Prefer to write a record by hand? Here's the minimum shape for a{" "}
+          <code class="font-mono">{siteConfig.blueprint}</code> record.
+          The schema is validated automatically on every PR.
+        </p>
+        {siteConfig.blueprint === "project-directory" && (
+          <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>{`kind: project
+slug: my-project
+name: My Project
+description: One-line description of what this project does
+category: tools
+tags:
+  - open-source
+links:
+  github: https://github.com/owner/repo
+  website: https://example.com`}</code></pre>
+        )}
+        {siteConfig.blueprint === "resource-hub" && (
+          <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>{`kind: resource
+slug: my-resource
+title: My Resource
+description: One-line description of what this resource is
+category: guides
+type: guide
+topic: coding-agents
+tags:
+  - ai
+links:
+  source: https://example.com`}</code></pre>
+        )}
+        {siteConfig.blueprint === "ecosystem-map" && (
+          <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>{`kind: entity
+slug: my-entity
+name: My Organization
+description: One-line description of what this organization does
+category: education
+type: company
+tags:
+  - technology
+links:
+  website: https://example.com`}</code></pre>
+        )}
+      </section>
+
+      <section class="mt-12 max-w-[68ch">
+        <h2 class="m-0 text-lg font-semibold tracking-tight text-ink-900 dark:text-ink-100">
+          What happens after you submit
+        </h2>
+        <ol class="mt-3 m-0 flex list-decimal flex-col gap-2 pl-5 text-sm text-ink-700 dark:text-ink-200">
+          <li>A maintainer reviews the issue and tags it as <code class="font-mono">accepted</code> or <code class="font-mono">needs-info</code>.</li>
+          <li>You open a PR with the new <code class="font-mono">data/records/&lt;slug&gt;.yml</code> file.</li>
+          <li>CI runs <code class="font-mono">grove validate</code> and previews the site with your record.</li>
+          <li>A maintainer merges. The next <code class="font-mono">grove build</code> deploys it.</li>
+        </ol>
+      </section>
+    </article>
+  </Container>
 </BaseLayout>

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

@@ -1,84 +1,58 @@
 @import "tailwindcss";
-@config "../../tailwind.config.mjs";
+
+/*
+ * Grove V1 design tokens. Theme is overridable from `grove.config.ts`
+ * 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.
+ */
+@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;
+}
 
 @layer base {
   :root {
+    --grove-color-primary: var(--color-grove-primary);
+    --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 {
-    @apply bg-white text-ink-900 dark:bg-ink-950 dark:text-ink-100 font-sans text-[15px] leading-relaxed;
-  }
-  a {
-    @apply text-ink-900 dark:text-ink-100;
+    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;
   }
-  /* Subtle selection */
-  ::selection {
-    @apply bg-ink-200 text-ink-900 dark:bg-ink-800 dark:text-ink-100;
-  }
-  /* Slim, neutral scrollbar */
-  * {
-    scrollbar-width: thin;
-    scrollbar-color: theme('colors.ink.300') transparent;
-  }
-  *::-webkit-scrollbar {
-    width: 8px;
-    height: 8px;
-  }
-  *::-webkit-scrollbar-thumb {
-    @apply bg-ink-200 dark:bg-ink-800 rounded;
-  }
-}
 
-@layer components {
-  /* Section spacing — consistent vertical rhythm */
-  .section {
-    @apply py-12 sm:py-16;
-  }
-  .section-tight {
-    @apply py-10 sm:py-12;
-  }
-  /* Subtle card border + hover lift, used everywhere */
-  .card {
-    @apply rounded-lg border border-ink-200 dark:border-ink-800 bg-white dark:bg-ink-950 transition-[border-color,box-shadow,background-color] duration-150;
-  }
-  .card-hover {
-    @apply hover:border-ink-300 dark:hover:border-ink-700 hover:bg-ink-50/60 dark:hover:bg-ink-900/40 hover:shadow-[0_1px_2px_rgba(0,0,0,0.04),0_4px_12px_-2px_rgba(0,0,0,0.06)] dark:hover:shadow-[0_1px_2px_rgba(0,0,0,0.4),0_4px_12px_-2px_rgba(0,0,0,0.3)];
-  }
-  /* Pill badge — small, neutral */
-  .badge {
-    @apply inline-flex items-center gap-1 rounded border border-ink-200 dark:border-ink-800 bg-ink-50 dark:bg-ink-900/60 px-1.5 py-0.5 text-2xs font-medium text-ink-700 dark:text-ink-300;
-  }
-  .badge-accent {
-    @apply border-ink-900 dark:border-ink-100 bg-ink-900 dark:bg-ink-100 text-white dark:text-ink-900;
-  }
-  .badge-new {
-    @apply border-emerald-300/60 dark:border-emerald-800/60 bg-emerald-50 dark:bg-emerald-950/40 text-emerald-800 dark:text-emerald-300;
-  }
-  .badge-hot {
-    @apply border-orange-300/60 dark:border-orange-800/60 bg-orange-50 dark:bg-orange-950/40 text-orange-800 dark:text-orange-300;
-  }
-  .badge-mature {
-    @apply border-blue-300/60 dark:border-blue-800/60 bg-blue-50 dark:bg-blue-950/40 text-blue-800 dark:text-blue-300;
-  }
-  .badge-stale {
-    @apply border-amber-300/60 dark:border-amber-800/60 bg-amber-50 dark:bg-amber-950/40 text-amber-800 dark:text-amber-300;
-  }
-  /* Outline button */
-  .btn {
-    @apply inline-flex items-center justify-center gap-1.5 rounded-md border px-3 py-1.5 text-sm font-medium transition-colors;
-  }
-  .btn-ghost {
-    @apply inline-flex items-center justify-center gap-1.5 rounded-md border px-3 py-1.5 text-sm font-medium transition-colors border-transparent text-ink-700 dark:text-ink-300 hover:bg-ink-100 dark:hover:bg-ink-900;
-  }
-  .btn-outline {
-    @apply inline-flex items-center justify-center gap-1.5 rounded-md border px-3 py-1.5 text-sm font-medium transition-colors border-ink-200 dark:border-ink-800 bg-white dark:bg-ink-950 text-ink-900 dark:text-ink-100 hover:border-ink-300 dark:hover:border-ink-700 hover:bg-ink-50 dark:hover:bg-ink-900/40;
-  }
-  .btn-primary {
-    @apply inline-flex items-center justify-center gap-1.5 rounded-md border px-3 py-1.5 text-sm font-medium transition-colors border-ink-900 dark:border-ink-100 bg-ink-900 dark:bg-ink-100 text-white dark:text-ink-900 hover:bg-ink-800 dark:hover:bg-white;
+  body.dark {
+    background: var(--color-ink-950);
+    color: var(--color-ink-100);
   }
 }