@grove-dev/astro 0.1.0

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

@@ -0,0 +1,416 @@
+---
+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.
+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>
+
+    <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;
+        }
+      });
+
+      document.querySelector("#submit-form").addEventListener("input", refreshYaml);
+    </script>
+</BaseLayout>

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

@@ -0,0 +1,84 @@
+@import "tailwindcss";
+@config "../../tailwind.config.mjs";
+
+@layer base {
+  :root {
+    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;
+  }
+  /* 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;
+  }
+}

package/templates/default/tailwind.config.mjs

@@ -0,0 +1,130 @@
+/** @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: [],
+};