create-dispatch-app 0.0.6

package/bin.js

@@ -0,0 +1,47 @@
+#!/usr/bin/env node
+
+const fs = require("fs");
+const path = require("path");
+const { execSync } = require("child_process");
+
+const templateDir = path.join(__dirname, "template");
+const appName = process.argv[2];
+
+if (!appName) {
+  console.error("Usage: npx create-dispatch-app <app-name>");
+  process.exit(1);
+}
+
+const targetDir = path.resolve(process.cwd(), appName);
+
+if (fs.existsSync(targetDir)) {
+  console.error(`Error: Directory "${appName}" already exists.`);
+  process.exit(1);
+}
+
+function copyRecursive(src, dest) {
+  const stat = fs.statSync(src);
+  if (stat.isDirectory()) {
+    fs.mkdirSync(dest, { recursive: true });
+    for (const entry of fs.readdirSync(src)) {
+      copyRecursive(path.join(src, entry), path.join(dest, entry));
+    }
+  } else {
+    fs.mkdirSync(path.dirname(dest), { recursive: true });
+    fs.copyFileSync(src, dest);
+  }
+}
+
+console.log(`Creating ${appName}...`);
+copyRecursive(templateDir, targetDir);
+
+console.log("Installing dependencies...");
+execSync("npm install", { cwd: targetDir, stdio: "inherit" });
+
+console.log("");
+console.log("Done! Next steps:");
+console.log(`  cd ${appName}`);
+console.log("  cp .env.local.example .env.local");
+console.log("  Add your site key from Dispatch to .env.local");
+console.log("  npm run dev");
+console.log("");

package/package.json

@@ -0,0 +1,14 @@
+{
+  "name": "create-dispatch-app",
+  "version": "0.0.6",
+  "description": "Scaffold a Next.js app with Dispatch CMS",
+  "bin": {
+    "create-dispatch-app": "./bin.js"
+  },
+  "scripts": {},
+  "engines": {
+    "node": ">=20.9"
+  },
+  "keywords": ["dispatch", "cms", "next.js", "scaffold", "cli"],
+  "license": "MIT"
+}

package/template/.env.local.example

@@ -0,0 +1,3 @@
+# Get your site key from Dispatch (Sites → your site)
+# https://dispatch-cms.vercel.app
+NEXT_PUBLIC_DISPATCH_SITE_KEY=

package/template/README.md

@@ -0,0 +1,20 @@
+# Dispatch Blog
+
+A minimal Next.js blog powered by [Dispatch](https://dispatch-cms.vercel.app) CMS.
+
+## Setup
+
+1. **Get your site key** from [Dispatch](https://dispatch-cms.vercel.app): log in, open **Sites**, and create a site if needed. Copy the site key.
+
+2. **Configure env**
+   - Copy `.env.local.example` to `.env.local`
+   - Set `NEXT_PUBLIC_DISPATCH_SITE_KEY` to your site key
+
+3. **Run the app**
+   ```bash
+   npm run dev
+   ```
+
+4. Open [http://localhost:3000](http://localhost:3000). The homepage lists posts; each post has a page at `/blog/[slug]`.
+
+5. **Create and publish a post** in the Dispatch dashboard, then refresh the page. If the post does not appear, ensure it is published.

package/template/app/blog/[slug]/PostContent.tsx

@@ -0,0 +1,45 @@
+"use client";
+
+import Link from "next/link";
+import { usePost } from "@dispatchcms/react";
+import { TipTapContent } from "./TipTapContent";
+
+export function PostContent({ slug }: { slug: string }) {
+  const { post, isLoading, error } = usePost(slug);
+
+  if (isLoading) {
+    return (
+      <main className="min-h-screen p-8">
+        <p className="text-muted-foreground">Loading…</p>
+      </main>
+    );
+  }
+
+  if (error || !post) {
+    return (
+      <main className="min-h-screen p-8">
+        <p className="text-destructive">{error ?? "Post not found"}</p>
+        <Link href="/" className="mt-4 inline-block text-primary underline">
+          Back to blog
+        </Link>
+      </main>
+    );
+  }
+
+  return (
+    <main className="min-h-screen p-8">
+      <article className="mx-auto max-w-2xl">
+        <Link href="/" className="text-sm text-muted-foreground hover:underline">
+          ← Back to blog
+        </Link>
+        <h1 className="mt-4 text-3xl font-bold">{post.title}</h1>
+        {post.excerpt && (
+          <p className="mt-2 text-muted-foreground">{post.excerpt}</p>
+        )}
+        <div className="mt-6 prose prose-neutral dark:prose-invert">
+          <TipTapContent key={post.id} content={post.content} />
+        </div>
+      </article>
+    </main>
+  );
+}

package/template/app/blog/[slug]/TipTapContent.tsx

@@ -0,0 +1,28 @@
+"use client";
+
+import { useEditor, EditorContent } from "@tiptap/react";
+import StarterKit from "@tiptap/starter-kit";
+
+const defaultDoc = { type: "doc", content: [{ type: "paragraph" }] } as const;
+
+/**
+ * Renders TipTap (ProseMirror) JSON from Dispatch CMS using a read-only editor.
+ */
+export function TipTapContent({ content }: { content: unknown }) {
+  const initialContent =
+    content != null && typeof content === "object" ? content : defaultDoc;
+
+  const editor = useEditor({
+    extensions: [StarterKit],
+    content: initialContent as Record<string, unknown>,
+    editable: false,
+    editorProps: {
+      attributes: {
+        class: "prose prose-neutral dark:prose-invert max-w-none focus:outline-none",
+      },
+    },
+  });
+
+  if (!editor) return null;
+  return <EditorContent editor={editor} />;
+}

package/template/app/blog/[slug]/page.tsx

@@ -0,0 +1,10 @@
+import { PostContent } from "./PostContent";
+
+export default async function PostPage({
+  params,
+}: {
+  params: Promise<{ slug: string }>;
+}) {
+  const { slug } = await params;
+  return <PostContent slug={slug} />;
+}

package/template/app/globals.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

package/template/app/layout.tsx

@@ -0,0 +1,24 @@
+import type { Metadata } from "next";
+import { DispatchProvider } from "@dispatchcms/react";
+import "./globals.css";
+
+export const metadata: Metadata = {
+  title: "Next.js Blog with Dispatch",
+  description: "Minimal blog powered by Dispatch CMS",
+};
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const siteKey = process.env.NEXT_PUBLIC_DISPATCH_SITE_KEY ?? "";
+
+  return (
+    <html lang="en">
+      <body>
+        <DispatchProvider siteKey={siteKey}>{children}</DispatchProvider>
+      </body>
+    </html>
+  );
+}

package/template/app/page.tsx

@@ -0,0 +1,53 @@
+"use client";
+
+import Link from "next/link";
+import { usePosts } from "@dispatchcms/react";
+
+export default function HomePage() {
+  const { posts, isLoading, error } = usePosts();
+
+  if (isLoading) {
+    return (
+      <main className="min-h-screen p-8">
+        <p className="text-muted-foreground">Loading posts…</p>
+      </main>
+    );
+  }
+
+  if (error) {
+    return (
+      <main className="min-h-screen p-8">
+        <p className="text-destructive">{error}</p>
+      </main>
+    );
+  }
+
+  return (
+    <main className="min-h-screen p-8">
+      <div className="mx-auto max-w-2xl">
+        <h1 className="text-2xl font-bold">Blog</h1>
+        <ul className="mt-6 space-y-4">
+          {posts.length === 0 ? (
+            <li className="text-muted-foreground">No posts yet.</li>
+          ) : (
+            posts.map((post) => (
+              <li key={post.id}>
+                <Link
+                  href={`/blog/${post.slug}`}
+                  className="text-primary underline hover:no-underline"
+                >
+                  {post.title}
+                </Link>
+                {post.excerpt && (
+                  <p className="mt-1 text-sm text-muted-foreground line-clamp-2">
+                    {post.excerpt}
+                  </p>
+                )}
+              </li>
+            ))
+          )}
+        </ul>
+      </div>
+    </main>
+  );
+}

package/template/next-env.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />

package/template/next.config.ts

@@ -0,0 +1,5 @@
+import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = {};
+
+export default nextConfig;

package/template/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "my-dispatch-app",
+  "version": "0.0.1",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "@dispatchcms/react": "^0.0.5",
+    "@tiptap/react": "^2.10.3",
+    "@tiptap/starter-kit": "^2.10.3",
+    "next": "^16.0.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "devDependencies": {
+    "@types/node": "^22.10.1",
+    "@types/react": "^19.0.1",
+    "@types/react-dom": "^19.0.1",
+    "autoprefixer": "^10.4.20",
+    "postcss": "^8.4.49",
+    "tailwindcss": "^3.4.15",
+    "typescript": "^5.7.2"
+  }
+}

package/template/postcss.config.mjs

@@ -0,0 +1,8 @@
+/** @type {import('postcss-load-config').Config} */
+const config = {
+  plugins: {
+    tailwindcss: {},
+  },
+};
+
+export default config;

package/template/tailwind.config.ts

@@ -0,0 +1,12 @@
+import type { Config } from "tailwindcss";
+
+const config: Config = {
+  content: [
+    "./app/**/*.{js,ts,jsx,tsx,mdx}",
+    "./components/**/*.{js,ts,jsx,tsx,mdx}",
+  ],
+  theme: { extend: {} },
+  plugins: [],
+};
+
+export default config;

package/template/tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [{ "name": "next" }],
+    "paths": { "@/*": ["./*"] }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}