create-grist-widget 0.2.5 → 0.2.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-grist-widget",
-  "version": "0.2.5",
+  "version": "0.2.7",
   "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

@@ -0,0 +1,151 @@
+import { useEffect, useState } from "react"
+
+import { Button } from "@/components/ui/button"
+
+// Shown instead of the widget tree when this page is opened directly in a
+// browser tab (not embedded in a Grist iframe) -- i.e. exactly the situation
+// anyone visiting a deployed /latest/, /v<version>/, or /dev/ URL directly is
+// in, whether that's this monorepo's own showcase deploy or a real scaffolded
+// widget someone hasn't customized yet. Same component either way; the only
+// per-deploy difference is which /v<version>/ dirs actually exist upstream,
+// which is why the version list is fetched from a fixed absolute URL rather
+// than a path relative to wherever this happens to be deployed.
+const VERSIONS_URL =
+  "https://arthurblanchon.github.io/grist-widget-sdk/template/versions.json"
+
+type ReleasedVersion = {
+  version: string
+  publishedAt: string
+}
+
+function useVersions() {
+  const [versions, setVersions] = useState<ReleasedVersion[] | null>(null)
+  const [error, setError] = useState(false)
+
+  useEffect(() => {
+    let cancelled = false
+    fetch(VERSIONS_URL, { cache: "no-store" })
+      .then((res) => (res.ok ? res.json() : Promise.reject(res)))
+      .then((data: ReleasedVersion[]) => {
+        if (!cancelled) setVersions(data)
+      })
+      .catch(() => {
+        if (!cancelled) setError(true)
+      })
+    return () => {
+      cancelled = true
+    }
+  }, [])
+
+  return { versions, error }
+}
+
+function formatDate(iso: string) {
+  return new Date(iso).toLocaleDateString(undefined, {
+    year: "numeric",
+    month: "short",
+    day: "numeric",
+  })
+}
+
+export function TemplateLanding() {
+  const { versions, error } = useVersions()
+
+  return (
+    <div className="mx-auto max-w-2xl px-6 py-16">
+      <header className="mb-10 text-center">
+        <p className="mb-2 text-sm font-medium text-muted-foreground">
+          grist-widget-template
+        </p>
+        <h1 className="font-heading text-3xl font-semibold tracking-tight">
+          Grist isn't loaded here
+        </h1>
+        <p className="mx-auto mt-3 max-w-md text-sm text-muted-foreground">
+          This page only renders inside a Grist custom widget iframe. Paste
+          its URL into Grist's custom widget field, or read on to scaffold
+          your own copy.
+        </p>
+      </header>
+
+      <div className="mb-10 rounded-lg border p-4">
+        <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>
+          <li>
+            Install the{" "}
+            <a
+              href="https://github.com/apps/claude"
+              className="underline underline-offset-4 hover:text-foreground"
+            >
+              Claude GitHub App
+            </a>{" "}
+            on that repo.
+          </li>
+          <li>
+            Start a Claude Code session connected to it and ask it to
+            scaffold and push.
+          </li>
+        </ol>
+        <pre className="mb-4 overflow-x-auto rounded-lg bg-muted p-4 text-xs">
+          <code>{`npm create grist-widget my-widget
+cd my-widget
+
+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>
+
+      <section>
+        <h2 className="mb-3 font-heading text-base font-semibold">
+          Released template versions
+        </h2>
+        {error ? (
+          <p className="text-sm text-muted-foreground">
+            Couldn't load the version list.
+          </p>
+        ) : versions === null ? (
+          <p className="text-sm text-muted-foreground">Loading…</p>
+        ) : versions.length === 0 ? (
+          <p className="text-sm text-muted-foreground">
+            No versions published yet.
+          </p>
+        ) : (
+          <ul className="divide-y divide-border rounded-lg border">
+            {versions.map((v, i) => (
+              <li
+                key={v.version}
+                className="flex items-center justify-between px-4 py-3"
+              >
+                <div className="flex items-center gap-2">
+                  <span className="font-mono text-sm">v{v.version}</span>
+                  {i === 0 && (
+                    <span className="rounded-full bg-primary px-2 py-0.5 text-xs text-primary-foreground">
+                      latest
+                    </span>
+                  )}
+                  <span className="text-xs text-muted-foreground">
+                    {formatDate(v.publishedAt)}
+                  </span>
+                </div>
+                <a
+                  href={`https://arthurblanchon.github.io/grist-widget-sdk/template/v${v.version}/`}
+                  className="text-sm underline underline-offset-4 hover:text-foreground"
+                >
+                  Preview
+                </a>
+              </li>
+            ))}
+          </ul>
+        )}
+      </section>
+    </div>
+  )
+}

package/template/src/main.tsx

@@ -3,24 +3,40 @@ import { createRoot } from "react-dom/client"
 import { GristBoundary, GristWidgetProvider } from "grist-widget-sdk"
 
 import { GristSdkAlerts } from "@/components/grist-sdk-alerts"
+import { TemplateLanding } from "@/components/template-landing"
 import { ThemeProvider } from "@/components/theme-provider.tsx"
 import "./index.css"
 import App, { GRIST_OPTIONS } from "./App.tsx"
 
+// A Grist custom widget only ever runs embedded in Grist's own iframe.
+// Opened directly in a browser tab (window.self === window.top), there's no
+// Grist to connect to -- show the template's own landing content instead of
+// mounting the widget tree at all. Same for a real scaffolded widget nobody
+// has customized yet as for this repo's own showcase deploy of the
+// unmodified template; nothing here is monorepo-specific except the fixed
+// URL TemplateLanding fetches its version list from.
+const isEmbedded = window.self !== window.top
+
 createRoot(document.getElementById("root")!).render(
   <StrictMode>
     <ThemeProvider>
-      <GristWidgetProvider options={GRIST_OPTIONS}>
-        <GristBoundary
-          gate={GRIST_OPTIONS.columns?.length ? "canRender" : "ready"}
-        >
-          <div className="min-h-full w-full bg-background text-foreground">
-            <GristSdkAlerts>
-              <App />
-            </GristSdkAlerts>
-          </div>
-        </GristBoundary>
-      </GristWidgetProvider>
+      {isEmbedded ? (
+        <GristWidgetProvider options={GRIST_OPTIONS}>
+          <GristBoundary
+            gate={GRIST_OPTIONS.columns?.length ? "canRender" : "ready"}
+          >
+            <div className="min-h-full w-full bg-background text-foreground">
+              <GristSdkAlerts>
+                <App />
+              </GristSdkAlerts>
+            </div>
+          </GristBoundary>
+        </GristWidgetProvider>
+      ) : (
+        <div className="min-h-full w-full bg-background text-foreground">
+          <TemplateLanding />
+        </div>
+      )}
     </ThemeProvider>
   </StrictMode>
 )