@cmssy/cli 10.7.0 → 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"
     ]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cmssy/cli",
-  "version": "10.7.0",
+  "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.7.0"
+    "@cmssy/core": "10.8.0"
   },
   "devDependencies": {
     "@types/node": "^20.0.0",