create-kide-app 0.0.32 → 0.0.33

package/index.js

@@ -384,10 +384,7 @@ async function main() {
         if (databaseId) {
           const wranglerPath = path.join(projectDir, "wrangler.toml");
           let wranglerContent = readFileSync(wranglerPath, "utf-8");
-          wranglerContent = wranglerContent.replace(
-            /database_id = "" #[^\n]*/,
-            `database_id = "${databaseId}"`,
-          );
+          wranglerContent = wranglerContent.replace(/database_id = "" #[^\n]*/, `database_id = "${databaseId}"`);
           writeFileSync(wranglerPath, wranglerContent);
         }
 
@@ -466,16 +463,27 @@ async function main() {
     }
   } else {
     if (cf.deployed && cf.url) {
-      p.note([`Live at: ${cf.url}`, `Admin:   ${cf.url}/admin`, "", `cd ${projectName}`, "", "Local development:", `  ${pm.run} dev`, "", "Redeploy:", "  pnpm run deploy"].join("\n"), "🎉 Your Kide CMS is live");
+      p.note(
+        [
+          `Live at: ${cf.url}`,
+          `Admin:   ${cf.url}/admin`,
+          "",
+          `cd ${projectName}`,
+          "",
+          "Local development:",
+          `  ${pm.run} dev`,
+          "",
+          "Redeploy:",
+          "  pnpm run deploy",
+        ].join("\n"),
+        "🎉 Your Kide CMS is live",
+      );
       p.outro("Project created!");
     } else {
       const lines = [`cd ${projectName}`];
       const remaining = [];
       if (!cf.d1Created) {
-        remaining.push(
-          `  ${pm.dlx} wrangler d1 create ${projectName}-db`,
-          "  # Copy the database_id to wrangler.toml",
-        );
+        remaining.push(`  ${pm.dlx} wrangler d1 create ${projectName}-db`, "  # Copy the database_id to wrangler.toml");
       }
       if (!cf.r2Created) {
         remaining.push(`  ${pm.dlx} wrangler r2 bucket create ${projectName}-assets`);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-kide-app",
-  "version": "0.0.32",
+  "version": "0.0.33",
   "description": "Scaffold a new Kide CMS project",
   "author": "Matti Hernesniemi",
   "license": "MIT",

package/templates/base/CLAUDE.md

@@ -0,0 +1,76 @@
+# Kide CMS
+
+Code-first CMS built inside Astro 6.
+
+## Structure
+
+```
+src/cms/cms.config.ts        # Collection definitions (source of truth)
+src/cms/collections/         # Individual collection files
+src/cms/adapters/            # Database, storage, email adapters
+src/cms/internals/           # Runtime, generator, seed scripts
+src/cms/.generated/          # Auto-generated — never edit
+src/components/              # Astro/React components
+src/layouts/                 # Page layouts
+src/pages/                   # Routes
+src/styles/admin.css         # Admin theme overrides (shadcn variables)
+src/styles/public.css        # Public site styles (plain Tailwind)
+```
+
+## Commands
+
+```bash
+pnpm dev              # start dev server (auto-generates schema + pushes DB)
+pnpm build            # production build
+pnpm cms:generate     # regenerate .generated/ from cms.config.ts
+pnpm cms:seed         # seed database with demo content (if configured)
+```
+
+## Rules
+
+- Never edit files in `src/cms/.generated/` — they are overwritten on every generation.
+- Always query content through the typed local API: `cms.posts.find()`, `cms.pages.findOne()`, etc. Never bypass it with raw DB queries.
+- DB columns use `snake_case`, TypeScript fields use `camelCase`. System fields are prefixed with `_`.
+- Rich text is stored as JSON AST, never HTML or Markdown.
+- Admin styles use shadcn CSS variables. Public site uses plain Tailwind colors — no shared styles between admin and public.
+- Use the `cn()` utility from `@kidecms/core/admin/lib/utils` for conditional class names in admin components.
+- `labelField` on collections controls display name in the admin (fallback: title, name, or first text field).
+
+## Stack
+
+Astro 6, React 19, Drizzle ORM, Zod, Tiptap, shadcn/ui, Tailwind CSS v4
+
+## Field Types
+
+Defined in collection files via `fields.*`. All fields share base options: `label`, `description`, `required`, `defaultValue`, `indexed`, `unique`, `translatable`, `condition`, `admin`, `access`.
+
+| Field      | Type-specific options                                                           |
+| ---------- | ------------------------------------------------------------------------------- |
+| `text`     | `maxLength?: number`                                                            |
+| `slug`     | `from?: string` — field to auto-generate slug from                              |
+| `email`    | _(base only)_                                                                   |
+| `number`   | _(base only)_                                                                   |
+| `boolean`  | _(base only)_                                                                   |
+| `date`     | _(base only)_                                                                   |
+| `select`   | `options: string[]` **(required)**                                              |
+| `richText` | _(base only)_ — stored as JSON AST `{ type: "root", children: RichTextNode[] }` |
+| `image`    | _(base only)_ — stores asset reference                                          |
+| `relation` | `collection: string` **(required)**, `hasMany?: boolean`                        |
+| `array`    | `of: FieldConfig` **(required)** — field config for each item                   |
+| `json`     | `schema?: string`                                                               |
+| `blocks`   | `types: Record<string, Record<string, FieldConfig>>` **(required)**             |
+
+`admin` sub-options: `component`, `placeholder`, `position` (`"content"` | `"sidebar"`), `rows`, `help`, `hidden`.
+
+`condition`: `{ field: string; value: string | string[] | boolean }` — show/hide field based on another field's value.
+
+`access`: `{ read?, update? }` — functions receiving `{ user, doc, operation, collection }`, return `boolean`.
+
+## Live Preview
+
+The CMS auto-injects a preview script on every page. To make fields update in real time:
+
+1. Add `?preview` to the page URL.
+2. Add `data-cms="{fieldName}"` attributes to elements that display field values.
+
+For rich text and blocks fields, the preview system uses server-side rendering via `/api/cms/preview/render` (dev only). Simple text fields update via `textContent` directly.

package/templates/demo/src/components/blocks/Hero.astro

@@ -3,12 +3,15 @@ const { eyebrow, heading, body, ctaLabel, ctaHref } = Astro.props;
 ---
 
 <section class="text-center">
-  {eyebrow && <p class="mb-2 text-xs font-semibold uppercase tracking-wide text-teal-700">{eyebrow}</p>}
+  {eyebrow && <p class="mb-2 text-xs font-semibold tracking-wide text-teal-700 uppercase">{eyebrow}</p>}
   <h1 class="mb-3 text-3xl font-semibold">{heading}</h1>
   {body && <p class="mb-4 text-gray-500">{body}</p>}
   {
     ctaLabel && ctaHref && (
-      <a href={String(ctaHref)} class="mt-4 inline-block rounded-md bg-teal-700 px-4 py-2 text-sm text-white no-underline">
+      <a
+        href={String(ctaHref)}
+        class="mt-4 inline-block rounded-md bg-teal-700 px-4 py-2 text-sm text-white no-underline"
+      >
         {ctaLabel}
       </a>
     )

package/templates/demo/src/layouts/PublicLayout.astro

@@ -49,6 +49,5 @@ const menuItems: MenuItem[] = menu?.items ? (Array.isArray(menu.items) ? menu.it
       </a>
     </header>
     <slot />
-    <script src="@/scripts/preview.ts"></script>
   </body>
 </html>

package/templates/demo/src/scripts/preview.ts

@@ -1,35 +0,0 @@
-if (new URLSearchParams(location.search).has("preview")) {
-  const ch = new BroadcastChannel("cms-preview");
-  let pending = 0;
-
-  ch.onmessage = (e: MessageEvent) => {
-    const d = e.data;
-
-    if (d.type === "reload") {
-      location.reload();
-      return;
-    }
-
-    const els = document.querySelectorAll<HTMLElement>(`[data-cms="${d.field}"]`);
-    if (!els.length) return;
-
-    if (d.render) {
-      const id = ++pending;
-      fetch("/api/cms/preview/render", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ type: d.render, data: d.value }),
-      })
-        .then((r) => (r.ok ? r.text() : null))
-        .then((html) => {
-          // Endpoint may not exist in production builds (only dev) — silently skip
-          if (html != null && id === pending) els.forEach((el) => (el.innerHTML = html));
-        })
-        .catch(() => {});
-    } else if (d.html != null) {
-      els.forEach((el) => (el.innerHTML = d.html));
-    } else {
-      els.forEach((el) => (el.textContent = d.value));
-    }
-  };
-}