@cmssy/cli 10.6.1 → 10.8.0

package/assets/init/astro/src/cmssy/layout-slot.tsx

@@ -0,0 +1,75 @@
+import {
+  CmssyBlock,
+  buildBlockContext,
+  buildBlockMap,
+  type CmssyLayoutGroup,
+} from "@cmssy/react";
+import { CmssyLazyLayout } from "@cmssy/react/client";
+import { blocks } from "./blocks";
+
+export interface LayoutSlotProps {
+  groups: CmssyLayoutGroup[];
+  position: "header" | "footer";
+  locale: string;
+  defaultLocale: string;
+  enabledLocales: string[];
+  /** Set on a VERIFIED editor request; the loader reports it as `isEdit`. */
+  edit?: { editorOrigin: string | string[] };
+}
+
+/**
+ * The header and footer, which are layout blocks rather than markup you own.
+ *
+ * A React island: Astro renders it on the server for visitors (no client JS),
+ * and with `client:load` on the edit route, where the bridge needs the browser.
+ *
+ * Two renders, one per mode, and the difference is the point: server-rendered
+ * for visitors, and through the edit bridge for the editor. A header still
+ * server-rendered in edit mode is one the editor can select and cannot fill.
+ */
+export default function LayoutSlot({
+  groups,
+  position,
+  locale,
+  defaultLocale,
+  enabledLocales,
+  edit,
+}: LayoutSlotProps) {
+  if (edit) {
+    return (
+      <CmssyLazyLayout
+        groups={groups}
+        position={position}
+        locale={locale}
+        defaultLocale={defaultLocale}
+        enabledLocales={enabledLocales}
+        edit={edit}
+        load={() => import("./blocks")}
+      />
+    );
+  }
+
+  const group = groups.find((candidate) => candidate.position === position);
+  if (!group) return null;
+
+  const blockMap = buildBlockMap(blocks);
+  const context = buildBlockContext(locale, defaultLocale, enabledLocales);
+
+  return (
+    <>
+      {[...group.blocks]
+        .filter((block) => block.isActive !== false)
+        .sort((a, b) => (a.order ?? 0) - (b.order ?? 0))
+        .map((block) => (
+          <CmssyBlock
+            key={block.id}
+            block={block}
+            blockMap={blockMap}
+            locale={locale}
+            defaultLocale={defaultLocale}
+            context={context}
+          />
+        ))}
+    </>
+  );
+}

package/assets/init/astro/src/pages/[...path].astro

@@ -2,10 +2,11 @@
 import { loadCmssyPage } from "@cmssy/astro";
 import { cmssy } from "../cmssy.config";
 import { Blocks } from "../components/Blocks";
+import LayoutSlot from "../cmssy/layout-slot";
 
 export const prerender = false;
 
-const { page, locale, defaultLocale, enabledLocales } = await loadCmssyPage(
+const { page, layouts, locale, defaultLocale, enabledLocales } = await loadCmssyPage(
   cmssy,
   Astro.request,
   Astro.url,
@@ -22,6 +23,13 @@ if (!page) {
     <title>{page?.seoTitle?.[locale] ?? page?.displayName?.[locale] ?? "cmssy on Astro"}</title>
   </head>
   <body>
+    <LayoutSlot
+      groups={layouts}
+      position="header"
+      locale={locale}
+      defaultLocale={defaultLocale}
+      enabledLocales={enabledLocales}
+    />
     {
       page ? (
         <Blocks
@@ -34,5 +42,12 @@ if (!page) {
         <main><h1>Not found</h1></main>
       )
     }
+    <LayoutSlot
+      groups={layouts}
+      position="footer"
+      locale={locale}
+      defaultLocale={defaultLocale}
+      enabledLocales={enabledLocales}
+    />
   </body>
 </html>

package/assets/init/astro/src/pages/cmssy-edit/[...path].astro

@@ -2,12 +2,13 @@
 import { loadCmssyPage } from "@cmssy/astro";
 import { cmssy } from "../../cmssy.config";
 import CmssyEditor from "../../cmssy/editor";
+import LayoutSlot from "../../cmssy/layout-slot";
 
 // The editor iframe lands here (the middleware rewrites verified requests). It
 // must be dynamic: a prerendered page never sees the query string.
 export const prerender = false;
 
-const { page, locale, defaultLocale, enabledLocales } = await loadCmssyPage(
+const { page, layouts, locale, defaultLocale, enabledLocales } = await loadCmssyPage(
   cmssy,
   Astro.request,
   Astro.url,
@@ -21,6 +22,15 @@ const editorOrigin = cmssy.editorOrigin ?? "*";
     <title>cmssy editor</title>
   </head>
   <body>
+    <LayoutSlot
+      client:load
+      groups={layouts}
+      position="header"
+      locale={locale}
+      defaultLocale={defaultLocale}
+      enabledLocales={enabledLocales}
+      edit={{ editorOrigin }}
+    />
     <CmssyEditor
       client:load
       page={page}
@@ -29,5 +39,14 @@ const editorOrigin = cmssy.editorOrigin ?? "*";
       enabledLocales={enabledLocales}
       edit={{ editorOrigin }}
     />
+    <LayoutSlot
+      client:load
+      groups={layouts}
+      position="footer"
+      locale={locale}
+      defaultLocale={defaultLocale}
+      enabledLocales={enabledLocales}
+      edit={{ editorOrigin }}
+    />
   </body>
 </html>

package/assets/init/remix/app/cmssy/layout-slot.tsx

@@ -0,0 +1,72 @@
+import {
+  CmssyBlock,
+  buildBlockContext,
+  buildBlockMap,
+  type CmssyLayoutGroup,
+} from "@cmssy/react";
+import { CmssyLazyLayout } from "@cmssy/react/client";
+import { blocks } from "./blocks";
+
+export interface LayoutSlotProps {
+  groups: CmssyLayoutGroup[];
+  position: "header" | "footer";
+  locale: string;
+  defaultLocale: string;
+  enabledLocales: string[];
+  /** Set on a VERIFIED editor request; the loader reports it as `isEdit`. */
+  edit?: { editorOrigin: string | string[] };
+}
+
+/**
+ * The header and footer, which are layout blocks rather than markup you own.
+ *
+ * Two renders, one per mode, and the difference is the point: server-rendered
+ * for visitors, and through the edit bridge for the editor. A header still
+ * server-rendered in edit mode is one the editor can select and cannot fill.
+ */
+export function LayoutSlot({
+  groups,
+  position,
+  locale,
+  defaultLocale,
+  enabledLocales,
+  edit,
+}: LayoutSlotProps) {
+  if (edit) {
+    return (
+      <CmssyLazyLayout
+        groups={groups}
+        position={position}
+        locale={locale}
+        defaultLocale={defaultLocale}
+        enabledLocales={enabledLocales}
+        edit={edit}
+        load={() => import("./blocks")}
+      />
+    );
+  }
+
+  const group = groups.find((candidate) => candidate.position === position);
+  if (!group) return null;
+
+  const blockMap = buildBlockMap(blocks);
+  const context = buildBlockContext(locale, defaultLocale, enabledLocales);
+
+  return (
+    <>
+      {[...group.blocks]
+        .filter((block) => block.isActive !== false)
+        .sort((a, b) => (a.order ?? 0) - (b.order ?? 0))
+        .map((block) => (
+          <CmssyBlock
+            key={block.id}
+            block={block}
+            blockMap={blockMap}
+            locale={locale}
+            defaultLocale={defaultLocale}
+            context={context}
+          />
+        ))}
+    </>
+  );
+}

package/assets/init/remix/app/routes/page.tsx

@@ -3,6 +3,7 @@ import { createCmssyHeaders, createCmssyLoader } from "@cmssy/remix";
 import { cmssy } from "../../cmssy.config";
 import { blocks } from "../cmssy/blocks";
 import { CmssyEditor } from "../cmssy/editor";
+import { LayoutSlot } from "../cmssy/layout-slot";
 import type { Route } from "./+types/page";
 
 export const loader = createCmssyLoader(cmssy);
@@ -14,6 +15,7 @@ export const headers = createCmssyHeaders(cmssy);
 export default function CmssyPage({ loaderData }: Route.ComponentProps) {
   const {
     page,
+    layouts,
     locale,
     defaultLocale,
     enabledLocales,
@@ -28,40 +30,63 @@ export default function CmssyPage({ loaderData }: Route.ComponentProps) {
 
   // A verified editor request renders the same page through the edit bridge.
   // No separate route: a React Router page always sees its query string.
+  const slot = (position: "header" | "footer") => (
+    <LayoutSlot
+      groups={layouts}
+      position={position}
+      locale={locale}
+      defaultLocale={defaultLocale}
+      enabledLocales={enabledLocales}
+      edit={isEdit ? { editorOrigin } : undefined}
+    />
+  );
+
   if (isEdit) {
     return (
-      <CmssyEditor
-        page={page}
-        locale={locale}
-        defaultLocale={defaultLocale}
-        enabledLocales={enabledLocales}
-        edit={{ editorOrigin }}
-      />
+      <>
+        {slot("header")}
+        <CmssyEditor
+          page={page}
+          locale={locale}
+          defaultLocale={defaultLocale}
+          enabledLocales={enabledLocales}
+          edit={{ editorOrigin }}
+        />
+        {slot("footer")}
+      </>
     );
   }
 
   if (!page)
     return (
-      <main>
-        <h1>Not found</h1>
-      </main>
+      <>
+        {slot("header")}
+        <main>
+          <h1>Not found</h1>
+        </main>
+        {slot("footer")}
+      </>
     );
 
   const blockMap = buildBlockMap(blocks);
   const context = buildBlockContext(locale, defaultLocale, enabledLocales);
 
   return (
-    <main>
-      {(page.blocks ?? []).map((block) => (
-        <CmssyBlock
-          key={block.id}
-          block={block}
-          blockMap={blockMap}
-          locale={locale}
-          defaultLocale={defaultLocale}
-          context={context}
-        />
-      ))}
-    </main>
+    <>
+      {slot("header")}
+      <main>
+        {(page.blocks ?? []).map((block) => (
+          <CmssyBlock
+            key={block.id}
+            block={block}
+            blockMap={blockMap}
+            locale={locale}
+            defaultLocale={defaultLocale}
+            context={context}
+          />
+        ))}
+      </main>
+      {slot("footer")}
+    </>
   );
 }

package/dist/index.js

@@ -187,6 +187,7 @@ var FRAMEWORKS = [
       "src/middleware.ts",
       "src/cmssy/blocks.ts",
       "src/cmssy/editor.tsx",
+      "src/cmssy/layout-slot.tsx",
       "src/cmssy/hero.tsx",
       "src/components/Blocks.tsx",
       "src/pages/[...path].astro",
@@ -204,6 +205,7 @@ var FRAMEWORKS = [
       "app/routes.ts",
       "app/cmssy/blocks.ts",
       "app/cmssy/editor.tsx",
+      "app/cmssy/layout-slot.tsx",
       "app/cmssy/hero.tsx",
       "app/routes/page.tsx"
     ]
@@ -1244,6 +1246,22 @@ async function request(deps, endpoint, query, variables) {
   if (!body.data) throw new CliError("the delivery API returned no data");
   return body.data;
 }
+function describeDrift(previous, next) {
+  const declared = (source, pattern) => new Set([...source.matchAll(pattern)].map((match) => match[1] ?? ""));
+  const body = (source) => source.split("/** Every model in the")[0] ?? source;
+  const models = /export interface (\w+)Data/g;
+  const fields = /^\s{2}(\w+)\??:/gm;
+  const lines = [];
+  const report = (label, before, after) => {
+    const added = [...after].filter((name) => !before.has(name));
+    const removed = [...before].filter((name) => !after.has(name));
+    if (added.length) lines.push(`+ ${label}: ${added.join(", ")}`);
+    if (removed.length) lines.push(`- ${label}: ${removed.join(", ")}`);
+  };
+  report("models", declared(previous, models), declared(next, models));
+  report("fields", declared(body(previous), fields), declared(body(next), fields));
+  return lines.length ? lines : ["the generated output differs"];
+}
 function resolve3(value, fromEnv, variable) {
   const resolved = value?.trim() || fromEnv?.trim();
   if (!resolved) {
@@ -1295,6 +1313,16 @@ async function runTypes(options, deps) {
       deps.log(`cmssy: ${shown} is up to date`);
       return 0;
     }
+    if (options.check) {
+      deps.log(
+        previous === null ? `cmssy: ${shown} is missing - run \`cmssy types\` and commit it` : `cmssy: ${shown} is out of date with the "${workspace}" workspace`
+      );
+      if (previous !== null) {
+        for (const line of describeDrift(previous, source)) deps.log(`  ${line}`);
+      }
+      deps.log("  run `cmssy types` and commit the result");
+      return 1;
+    }
     mkdirSync3(dirname3(outPath), { recursive: true });
     writeFileSync4(outPath, source);
     const fieldCount = models.reduce(
@@ -1324,7 +1352,7 @@ var USAGE = [
   "  cmssy init [--dir <path>] [--force]",
   "  cmssy add block <name> [--dir <path>]",
   "  cmssy link [--token <cs_...>] [--workspace <slug>] [--preview-url <url>]",
-  "  cmssy types [--out <path>] [--org <slug>] [--workspace <slug>]"
+  "  cmssy types [--out <path>] [--check] [--org <slug>] [--workspace <slug>]"
 ].join("\n");
 function flagValue(args, name) {
   const index = args.findIndex((arg) => arg === name);
@@ -1387,7 +1415,8 @@ async function main() {
       {
         out: flagValue(args, "--out"),
         org: flagValue(args, "--org"),
-        workspace: flagValue(args, "--workspace")
+        workspace: flagValue(args, "--workspace"),
+        check: hasFlag(args, "--check")
       },
       {
         cwd: process.cwd(),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cmssy/cli",
-  "version": "10.6.1",
+  "version": "10.8.0",
   "description": "The cmssy CLI: `cmssy init` wires cmssy into an existing Next.js, Astro or React Router app; `cmssy link` connects it to a workspace and verifies the editor wiring.",
   "keywords": [
     "cmssy",
@@ -27,7 +27,7 @@
     "assets"
   ],
   "dependencies": {
-    "@cmssy/core": "10.6.1"
+    "@cmssy/core": "10.8.0"
   },
   "devDependencies": {
     "@types/node": "^20.0.0",