create-grist-widget 0.2.10 → 0.2.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-grist-widget",
-  "version": "0.2.10",
+  "version": "0.2.11",
   "description": "Scaffold a new Grist custom widget from the grist-widget-sdk Vite template",
   "license": "MIT",
   "type": "module",

package/template/src/components/template-landing.tsx

@@ -1,3 +1,5 @@
+import { useState } from "react"
+
 import { Button } from "@/components/ui/button"
 import { DEV_URL, formatDate, useVersions, versionUrl } from "@/lib/showcase-versions"
 
@@ -11,6 +13,43 @@ import { DEV_URL, formatDate, useVersions, versionUrl } from "@/lib/showcase-ver
 // for this repo's own showcase as for a real scaffolded widget that happens
 // to have something deployed at its own bare root; the only per-deploy
 // difference is which /v<version>/ dirs actually exist upstream.
+
+// A ready-to-paste instruction for an AI coding agent, not a human. Written
+// to work first-shot: it explains *why* to scaffold into a subdirectory
+// (create-grist-widget's CLI refuses a non-empty target -- and a repo
+// Claude Code is already connected to always has a .git folder) rather than
+// just saying "scaffold and push", which left room for the agent to try
+// (and fail) `npm create grist-widget .` in place.
+const CLAUDE_CODE_PROMPT = `Scaffold a new Grist custom widget here using \`npm create grist-widget\` (https://www.npmjs.com/package/create-grist-widget). This repo is an empty git clone already connected to GitHub, so scaffold into a new subdirectory first -- the CLI refuses a non-empty target directory, and this one already has a .git folder. Then push the scaffold's \`main\` and \`dev\` branches to this repository's own \`origin\` remote, so the bundled GitHub Pages deploy workflow runs. Report back the /latest/ and /v<version>/ GitHub Pages URLs once it's live.`
+
+function CopyableBlock({ text }: { text: string }) {
+  const [copied, setCopied] = useState(false)
+
+  function copy() {
+    navigator.clipboard.writeText(text).then(() => {
+      setCopied(true)
+      setTimeout(() => setCopied(false), 1500)
+    })
+  }
+
+  return (
+    <div className="relative">
+      <pre className="overflow-x-auto rounded-lg bg-muted p-4 pr-16 text-xs whitespace-pre-wrap">
+        <code>{text}</code>
+      </pre>
+      <Button
+        type="button"
+        variant="secondary"
+        size="sm"
+        className="absolute top-2 right-2"
+        onClick={copy}
+      >
+        {copied ? "Copied" : "Copy"}
+      </Button>
+    </div>
+  )
+}
+
 export function TemplateLanding() {
   const { versions, error } = useVersions()
 
@@ -21,7 +60,7 @@ export function TemplateLanding() {
           grist-widget-template
         </p>
         <h1 className="font-heading text-3xl font-semibold tracking-tight">
-          Build a Grist custom widget in minutes
+          Build your own Grist custom widget
         </h1>
         <p className="mx-auto mt-3 max-w-md text-sm text-muted-foreground">
           A React + TypeScript + Tailwind starting point for{" "}
@@ -34,12 +73,23 @@ export function TemplateLanding() {
         <h2 className="mb-3 font-heading text-base font-semibold">
           Using Claude Code?
         </h2>
-        <ol className="mb-4 list-inside list-decimal space-y-2 text-sm text-muted-foreground">
-          <li>Create a new, empty GitHub repo for the widget.</li>
+        <ol className="list-inside list-decimal space-y-3 text-sm text-muted-foreground">
+          <li>
+            Create a new, empty GitHub repo for the widget.
+            <div className="mt-2 ml-5">
+              <Button asChild>
+                <a href="https://github.com/new" target="_blank" rel="noreferrer">
+                  Create a new repository
+                </a>
+              </Button>
+            </div>
+          </li>
           <li>
             Install the{" "}
             <a
               href="https://github.com/apps/claude"
+              target="_blank"
+              rel="noreferrer"
               className="underline underline-offset-4 hover:text-foreground"
             >
               Claude GitHub App
@@ -47,11 +97,20 @@ export function TemplateLanding() {
             on that repo.
           </li>
           <li>
-            Start a Claude Code session connected to it and ask it to
-            scaffold and push.
+            Start a Claude Code session connected to it and paste this
+            prompt:
+            <div className="mt-2 ml-5">
+              <CopyableBlock text={CLAUDE_CODE_PROMPT} />
+            </div>
           </li>
         </ol>
-        <pre className="mb-4 overflow-x-auto rounded-lg bg-muted p-4 text-xs">
+      </div>
+
+      <details className="mb-10 rounded-lg border p-4 text-sm text-muted-foreground">
+        <summary className="cursor-pointer font-medium text-foreground">
+          Prefer to run it yourself?
+        </summary>
+        <pre className="mt-3 overflow-x-auto rounded-lg bg-muted p-4 text-xs">
           <code>{`npm create grist-widget my-widget
 cd my-widget
 
@@ -59,12 +118,7 @@ git remote add origin https://github.com/<owner>/<repo>.git
 git push -u origin main
 git push origin dev`}</code>
         </pre>
-        <Button asChild>
-          <a href="https://github.com/new" target="_blank" rel="noreferrer">
-            Create a new repository
-          </a>
-        </Button>
-      </div>
+      </details>
 
       <section>
         <div className="mb-3 flex items-center justify-between">