@grove-dev/astro 0.2.10 → 0.2.14

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

@@ -1,127 +1,289 @@
 ---
-/**
- * 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 { fullItems, 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;
-const slug = indexSlug();
+const singular = itemLabel();
+const title = `Submit ${singular} - ${siteConfig.name}`;
+const description = `Submit a new ${singular} to ${siteConfig.name}.`;
+const repoUrl = siteConfig.repoUrl ?? "https://github.com/tortuvshin/grove";
 
-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";
+const values = (key: "category" | "stack") =>
+  [...new Set(fullItems.map((item) => String(item[key] ?? "")).filter(Boolean))]
+    .sort((a, b) => a.localeCompare(b));
+const categories = values("category");
+const stacks = values("stack");
+const existingSlugs = fullItems.map((item) => item.slug).filter(Boolean);
+const existingFullNames = fullItems
+  .map((item) => {
+    const url = String(item.repoUrl ?? item.links?.github ?? "");
+    const match = url.match(/github\.com\/([^/]+)\/([^/?#]+)/i);
+    return match ? `${match[1]}/${match[2].replace(/\.git$/, "")}`.toLowerCase() : null;
+  })
+  .filter(Boolean);
+
+const platformOptions = ["iOS", "Android", "Web", "macOS", "Windows", "Linux"];
+const goodSubmissions = [
+  `A real, usable ${singular}, not a tutorial or one-screen demo`,
+  "A public repository with a clear open-source license",
+  "Enough documentation to understand, run, or contribute",
+  "Recent maintenance, releases, or meaningful project history",
+];
+const pleaseAvoid = [
+  "Snippets, exercises, abandoned experiments, or duplicate entries",
+  "Private repositories or projects without source",
+  "Marketing pages with no usable project behind them",
+  "Records with no license or verifiable repository",
+];
 ---
 
-<BaseLayout
-  title={title}
-  description={description}
-  site={siteConfig}
-  noindex={noindex}
->
+<BaseLayout title={title} description={description} site={siteConfig} 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>
-        )}
+    <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">
+          {singular} submission
+        </p>
+        <h1 class="mt-2 text-[2rem] font-semibold tracking-tight text-ink-900 dark:text-ink-100">
+          Add {singular === "app" ? "an" : "a"} {singular} to the directory
+        </h1>
+        <p class="m-0 mt-3 max-w-[60ch] text-[0.9375rem] leading-relaxed text-ink-500 dark:text-ink-400">
+          Paste a GitHub URL to pull in the basics, edit the generated draft,
+          then open a pull request. The data stays in this repository.
+        </p>
       </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>
+      <ol class="mt-6 grid grid-cols-1 gap-2 text-2xs sm:grid-cols-3 sm:gap-3" aria-label="Submission steps">
+        {[
+          ["1", "Paste a GitHub URL", "We'll pull the metadata automatically."],
+          ["2", "Edit the draft", "Fix the category, stack, platforms, and notes."],
+          ["3", "Open a pull request", "Reviewers will validate and merge the record."],
+        ].map(([number, heading, copy]) => (
+          <li class="card flex items-start gap-2 p-3">
+            <span class="mt-0.5 inline-flex h-5 w-5 shrink-0 items-center justify-center rounded-full border border-ink-300 font-mono font-semibold text-ink-700 dark:border-ink-700 dark:text-ink-300">{number}</span>
+            <div>
+              <div class="font-medium text-ink-900 dark:text-ink-100">{heading}</div>
+              <div class="text-ink-500 dark:text-ink-400">{copy}</div>
+            </div>
+          </li>
+        ))}
+      </ol>
+
+      <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="label">GitHub URL</span>
+              <div class="flex flex-col gap-2 sm:flex-row">
+                <input id="repo-url" type="url" required placeholder="https://github.com/owner/repo" class="field flex-1" />
+                <button id="fetch-repo" type="button" class="btn-primary min-h-10 justify-center">Generate draft</button>
+              </div>
+              <span class="help">The repository must be public. We never write to it.</span>
+            </label>
+
+            <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
+              <label class="grid gap-1.5"><span class="label">Name</span><input id="item-name" type="text" class="field" /></label>
+              <label class="grid gap-1.5"><span class="label">Slug</span><input id="item-slug" type="text" class="field font-mono" /><span class="help">URL fragment, auto-filled from the repository name.</span></label>
+            </div>
+
+            <label class="grid gap-1.5">
+              <span class="label">Description</span>
+              <textarea id="item-description" rows="3" class="field resize-y"></textarea>
+              <span class="help">One or two sentences in plain language.</span>
+            </label>
+
+            <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
+              <label class="grid gap-1.5">
+                <span class="label">Category</span>
+                <input id="item-category" list="category-options" class="field" />
+                <datalist id="category-options">{categories.map((value) => <option value={value} />)}</datalist>
+              </label>
+              <label class="grid gap-1.5">
+                <span class="label">Primary stack</span>
+                <input id="primary-stack" list="stack-options" class="field" />
+                <datalist id="stack-options">{stacks.map((value) => <option value={value} />)}</datalist>
+              </label>
+            </div>
+
+            <fieldset class="grid gap-2">
+              <legend class="label">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.toLowerCase()} class="h-4 w-4" />
+                    <span>{platform}</span>
+                  </label>
+                ))}
+              </div>
+            </fieldset>
+
+            <label class="grid gap-1.5"><span class="label">Tags</span><input id="item-tags" type="text" placeholder="self-hosted, developer-tools, offline-first" class="field" /></label>
+            <label class="grid gap-1.5"><span class="label">Website</span><input id="item-website" type="url" placeholder="https://example.com" class="field" /></label>
+            <label class="grid gap-1.5"><span class="label">Best for</span><textarea id="best-for" rows="3" class="field resize-y" placeholder="One use case per line"></textarea></label>
+          </div>
+        </form>
+
+        <aside class="flex flex-col gap-4">
+          <div class="card p-5">
+            <h2 class="m-0 text-[0.9375rem] font-semibold text-ink-900 dark:text-ink-100">Submission criteria</h2>
+            <p class="m-0 mt-1 text-2xs text-ink-500 dark:text-ink-400">Use this checklist before opening the draft.</p>
+            <div class="mt-4 grid grid-cols-1 gap-4 text-2xs sm:grid-cols-2 lg:grid-cols-1 xl:grid-cols-2">
+              <div>
+                <div class="font-semibold uppercase tracking-wider text-emerald-700 dark:text-emerald-400">Good submissions</div>
+                <ul class="m-0 mt-2 list-none space-y-1 p-0 text-ink-700 dark:text-ink-200">{goodSubmissions.map((item) => <li class="flex gap-2"><span class="text-emerald-600">✓</span><span>{item}</span></li>)}</ul>
+              </div>
+              <div>
+                <div class="font-semibold uppercase tracking-wider text-amber-700 dark:text-amber-400">Please avoid</div>
+                <ul class="m-0 mt-2 list-none space-y-1 p-0 text-ink-700 dark:text-ink-200">{pleaseAvoid.map((item) => <li class="flex gap-2"><span class="text-amber-600">·</span><span>{item}</span></li>)}</ul>
+              </div>
+            </div>
+          </div>
+
+          <div class="card flex min-h-[420px] flex-col p-5">
+            <div class="flex flex-wrap items-center justify-between gap-3">
+              <h2 class="m-0 text-base font-semibold text-ink-900 dark:text-ink-100">YAML draft</h2>
+              <div class="flex items-center gap-2">
+                <button id="copy-yaml" type="button" class="btn-outline pointer-events-none opacity-50" disabled>Copy YAML</button>
+                <a id="open-pr-link" href="#" target="_blank" rel="noopener noreferrer" class="btn-outline pointer-events-none opacity-50">Open PR draft</a>
+              </div>
+            </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"></p>
+          </div>
+        </aside>
+      </div>
+    </section>
   </Container>
+
+  <style>
+    .field { min-height: 2.5rem; border-radius: .375rem; border: 1px solid var(--color-ink-200); background: white; padding: .5rem .75rem; color: var(--color-ink-900); font-size: .875rem; outline: none; }
+    .field:focus { border-color: var(--color-ink-500); }
+    :global(.dark) .field { border-color: var(--color-ink-800); background: var(--color-ink-950); color: var(--color-ink-100); }
+    .label { font-size: var(--text-2xs); font-weight: 500; text-transform: uppercase; letter-spacing: .05em; color: var(--color-ink-500); }
+    .help { font-size: var(--text-2xs); color: var(--color-ink-500); }
+  </style>
+
+  <script is:inline define:vars={{ existingSlugs, existingFullNames, repoUrl }}>
+    // @ts-nocheck
+    const $ = (selector) => document.querySelector(selector);
+    const inputs = {
+      repo: $("#repo-url"), name: $("#item-name"), slug: $("#item-slug"),
+      description: $("#item-description"), category: $("#item-category"),
+      stack: $("#primary-stack"), tags: $("#item-tags"),
+      website: $("#item-website"), bestFor: $("#best-for"),
+    };
+    const fetchButton = $("#fetch-repo");
+    const preview = $("#yaml-preview");
+    const status = $("#submit-status");
+    const copyButton = $("#copy-yaml");
+    const openPrLink = $("#open-pr-link");
+    const slugSet = new Set(existingSlugs);
+    const repoSet = new Set(existingFullNames);
+    let repository = null;
+
+    const slugify = (value) => String(value || "").toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "");
+    const parseRepo = (value) => {
+      const match = String(value).match(/github\.com\/([^/]+)\/([^/?#]+)/);
+      return match ? { owner: match[1], repo: match[2].replace(/\.git$/, "") } : null;
+    };
+    const quote = (value) => `"${String(value ?? "").replace(/\\/g, "\\\\").replace(/"/g, '\\"')}"`;
+    const lines = (values, indent = 2) => values.map((value) => `${" ".repeat(indent)}- ${value}`).join("\n");
+    const selectedPlatforms = () => [...document.querySelectorAll("input[name=platform]:checked")].map((input) => input.value);
+    const setStatus = (text, tone = "muted") => {
+      status.textContent = text;
+      status.className = `mt-3 min-h-5 text-2xs ${tone === "error" ? "text-red-600 dark:text-red-400" : tone === "warn" ? "text-amber-700 dark:text-amber-400" : tone === "success" ? "text-emerald-700 dark:text-emerald-400" : "text-ink-500 dark:text-ink-400"}`;
+    };
+    const 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 (language === "typescript" || language === "javascript") return "TypeScript";
+      return repo.language || "";
+    };
+    const generateYaml = () => {
+      if (!repository) return "";
+      const parsed = parseRepo(inputs.repo.value);
+      if (!parsed) return "";
+      const tags = inputs.tags.value.split(",").map((tag) => tag.trim()).filter(Boolean);
+      const platforms = selectedPlatforms();
+      const bestFor = inputs.bestFor.value.split("\n").map((item) => item.trim()).filter(Boolean);
+      return [
+        "kind: project",
+        `slug: ${slugify(inputs.slug.value || repository.name)}`,
+        `name: ${quote(inputs.name.value)}`,
+        `description: ${quote(inputs.description.value)}`,
+        `category: ${inputs.category.value || "other"}`,
+        "projectType: real-app",
+        `stack: ${quote(inputs.stack.value)}`,
+        "platforms:", platforms.length ? lines(platforms) : "  []",
+        "tags:", tags.length ? lines(tags) : "  []",
+        `repoUrl: ${repository.html_url}`,
+        "links:",
+        `  github: ${repository.html_url}`,
+        ...(inputs.website.value ? [`  website: ${inputs.website.value}`] : []),
+        "bestFor:", bestFor.length ? lines(bestFor) : "  []",
+        "source:",
+        "  type: github",
+        `  owner: ${parsed.owner}`,
+        `  repo: ${parsed.repo}`,
+        "curation:",
+        "  reviewed: false",
+        "  labels: []",
+        "  lenses: []",
+        "",
+      ].join("\n");
+    };
+    const refresh = () => {
+      const yaml = generateYaml();
+      preview.textContent = yaml || "Paste a GitHub URL to generate a draft.";
+      if (!yaml) return;
+      const params = new URLSearchParams({ filename: `data/records/${slugify(inputs.slug.value)}.yml`, value: yaml });
+      openPrLink.href = `${repoUrl}/new/main?${params}`;
+      openPrLink.classList.remove("pointer-events-none", "opacity-50");
+      copyButton.disabled = false;
+      copyButton.classList.remove("pointer-events-none", "opacity-50");
+    };
+
+    fetchButton.addEventListener("click", async () => {
+      const parsed = parseRepo(inputs.repo.value);
+      if (!parsed) return setStatus("Enter a valid GitHub repository URL.", "error");
+      const fullName = `${parsed.owner}/${parsed.repo}`.toLowerCase();
+      if (repoSet.has(fullName)) setStatus("This repository is already listed. The draft can update its record.", "warn");
+      fetchButton.disabled = true;
+      setStatus("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.status === 404) throw new Error("Repository not found or not public.");
+        if (response.status === 403) throw new Error("GitHub rate limit reached. Try again shortly.");
+        if (!response.ok) throw new Error(`GitHub returned ${response.status}.`);
+        repository = await response.json();
+        if (repository.private) throw new Error("Private repositories cannot be submitted.");
+        inputs.name.value = repository.name || parsed.repo;
+        inputs.slug.value = slugify(repository.name || parsed.repo);
+        inputs.description.value = repository.description || "";
+        inputs.stack.value = inferStack(repository);
+        inputs.tags.value = (repository.topics || []).slice(0, 8).join(", ");
+        inputs.website.value = repository.homepage || "";
+        const duplicate = slugSet.has(inputs.slug.value);
+        setStatus(duplicate ? "That slug already exists. Choose another or update the existing record." : "Draft generated. Edit any field and the YAML will refresh.", duplicate ? "warn" : "success");
+        refresh();
+      } catch (error) {
+        repository = null;
+        setStatus(error.message || "Unable to fetch repository metadata.", "error");
+      } finally {
+        fetchButton.disabled = false;
+      }
+    });
+    $("#submit-form").addEventListener("input", refresh);
+    copyButton.addEventListener("click", async () => {
+      try {
+        await navigator.clipboard.writeText(preview.textContent || "");
+        setStatus("Copied YAML to clipboard.", "success");
+      } catch {
+        setStatus("Couldn't copy automatically. Select the YAML and copy it.", "error");
+      }
+    });
+  </script>
 </BaseLayout>

package/templates/default/wrangler.jsonc

@@ -0,0 +1,28 @@
+{
+  // SPDX-License-Identifier: MIT
+  //
+  // Cloudflare Pages configuration for the Grove Astro template.
+  //
+  // `name` is the Pages project name (`grove-site` by default —
+  // rename to match your Cloudflare account, or override via
+  // `wrangler pages deploy --project-name <name>`).
+  //
+  // `compatibility_date` pins the runtime API surface. Bump it
+  // when you want to opt into newer Pages features; older dates
+  // are fine for stable behavior.
+  //
+  // `pages_build_output_dir` is the directory that `astro build`
+  // writes to. Astro 6's default is `./dist`, which matches.
+  //
+  // The deploy workflow in `.github/workflows/build.yml` runs
+  //   pnpm run build
+  //   npx wrangler pages deploy dist --project-name <name>
+  // after this file is committed.
+  "$schema": "node_modules/wrangler/config-schema.json",
+  "name": "grove-site",
+  "compatibility_date": "2026-06-07",
+  "pages_build_output_dir": "./dist",
+  "observability": {
+    "enabled": true
+  }
+}

package/LICENSE

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2026 Turtuvshin Byambaa
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.