@cmssy/cli 12.14.1 → 13.0.0

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

@@ -5,11 +5,13 @@ import {
   type CmssyLayoutGroup,
 } from "@cmssy/react";
 import { CmssyLazyLayout } from "@cmssy/react/client";
+import type { CmssyRegion } from "@cmssy/astro";
+import type { layout } from "../cmssy.config";
 import { blocks } from "./blocks";
 
 export interface LayoutSlotProps {
   groups: CmssyLayoutGroup[];
-  position: "header" | "footer";
+  position: CmssyRegion<typeof layout>;
   locale: string;
   defaultLocale: string;
   enabledLocales: string[];
@@ -63,6 +65,8 @@ export default function LayoutSlot({
             locale={locale}
             defaultLocale={defaultLocale}
             context={context}
+            resolvedContent={resolvedContent?.[block.id]}
+            data={data?.[block.id]}
           />
         ))}
     </>

package/assets/init/astro/src/cmssy.config.ts

@@ -1,7 +1,15 @@
-import { defineCmssyConfig } from "@cmssy/astro";
+import { defineCmssyConfig, defineCmssyLayout } from "@cmssy/astro";
+
+export const layout = defineCmssyLayout({
+  regions: [
+    { id: "header", label: "Header" },
+    { id: "footer", label: "Footer" },
+  ],
+});
 
 export const cmssy = defineCmssyConfig({
   org: process.env.CMSSY_ORG_SLUG,
   workspaceSlug: process.env.CMSSY_WORKSPACE_SLUG,
   draftSecret: process.env.CMSSY_DRAFT_SECRET,
+  layout,
 });

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

@@ -1,6 +1,9 @@
 ---
 import { loadCmssyPage } from "@cmssy/astro";
-import { resolveEditorBlockData } from "@cmssy/react";
+import {
+  resolveEditorBlockData,
+  resolveEditorLayoutBlockData,
+} from "@cmssy/react";
 import { cmssy } from "../cmssy.config";
 import { blocks } from "../cmssy/blocks";
 import { Blocks } from "../components/Blocks";
@@ -27,6 +30,19 @@ const { data: blockData, content: blockContent } = await resolveEditorBlockData(
   enabledLocales,
   config: cmssy,
 });
+
+const layoutSlot = {
+  groups: layouts,
+  blocks,
+  locale,
+  defaultLocale,
+  enabledLocales,
+  config: cmssy,
+};
+const [header, footer] = await Promise.all([
+  resolveEditorLayoutBlockData({ ...layoutSlot, position: "header" }),
+  resolveEditorLayoutBlockData({ ...layoutSlot, position: "footer" }),
+]);
 ---
 
 <html lang={locale}>
@@ -41,6 +57,8 @@ const { data: blockData, content: blockContent } = await resolveEditorBlockData(
       locale={locale}
       defaultLocale={defaultLocale}
       enabledLocales={enabledLocales}
+      data={header.data}
+      resolvedContent={header.content}
     />
     {
       page ? (
@@ -62,6 +80,8 @@ const { data: blockData, content: blockContent } = await resolveEditorBlockData(
       locale={locale}
       defaultLocale={defaultLocale}
       enabledLocales={enabledLocales}
+      data={footer.data}
+      resolvedContent={footer.content}
     />
   </body>
 </html>

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

@@ -7,8 +7,15 @@ import LayoutSlot from "../../cmssy/layout-slot";
 
 export const prerender = false;
 
-const { page, layouts, locale, defaultLocale, enabledLocales, editorData } =
-  await loadCmssyPage(cmssy, Astro.request, Astro.url, { blocks });
+const {
+  page,
+  layouts,
+  locale,
+  defaultLocale,
+  enabledLocales,
+  editorData,
+  layoutRegions,
+} = await loadCmssyPage(cmssy, Astro.request, Astro.url, { blocks });
 const editorOrigin = resolveEditorOrigin(cmssy.editorOrigin);
 ---
 
@@ -35,7 +42,7 @@ const editorOrigin = resolveEditorOrigin(cmssy.editorOrigin);
       locale={locale}
       defaultLocale={defaultLocale}
       enabledLocales={enabledLocales}
-      edit={{ editorOrigin }}
+      edit={{ editorOrigin, layoutRegions }}
     />
     <LayoutSlot
       client:load

package/assets/init/next/app/[[...path]]/page.tsx

@@ -1,5 +1,6 @@
 import { createCmssyPage, CmssyLayoutSlot } from "@cmssy/next/server";
-import { cmssy } from "@/cmssy.config";
+import type { CmssyRegion } from "@cmssy/next";
+import { cmssy, type layout } from "@/cmssy.config";
 import { blocks } from "@/cmssy/blocks";
 import { CmssyEditor } from "@/cmssy/editor";
 import { EditableLayout } from "@/cmssy/editable-layout";
@@ -21,7 +22,7 @@ const CmssyPage = createCmssyPage(cmssy, blocks, { editor: CmssyEditor });
 
 export default async function Page(props: PageProps) {
   const { path } = await props.params;
-  const slot = (position: "header" | "footer") => (
+  const slot = (position: CmssyRegion<typeof layout>) => (
     <CmssyLayoutSlot
       config={cmssy}
       blocks={blocks}

package/assets/init/next/app/cmssy-edit/[[...path]]/page.tsx

@@ -3,7 +3,8 @@ import {
   CmssyLayoutSlot,
   isCmssyEditMode,
 } from "@cmssy/next/server";
-import { cmssy } from "@/cmssy.config";
+import type { CmssyRegion } from "@cmssy/next";
+import { cmssy, type layout } from "@/cmssy.config";
 import { blocks } from "@/cmssy/blocks";
 import { CmssyEditor } from "@/cmssy/editor";
 import { EditableLayout } from "@/cmssy/editable-layout";
@@ -24,7 +25,7 @@ export default async function EditPage(props: PageProps) {
 
   const editMode = await isCmssyEditMode();
 
-  const slot = (position: "header" | "footer") => (
+  const slot = (position: CmssyRegion<typeof layout>) => (
     <CmssyLayoutSlot
       config={cmssy}
       blocks={blocks}

package/assets/init/next/cmssy.config.ts

@@ -1,7 +1,15 @@
-import { defineCmssyConfig } from "@cmssy/next";
+import { defineCmssyConfig, defineCmssyLayout } from "@cmssy/next";
+
+export const layout = defineCmssyLayout({
+  regions: [
+    { id: "header", label: "Header" },
+    { id: "footer", label: "Footer" },
+  ],
+});
 
 export const cmssy = defineCmssyConfig({
   org: process.env.CMSSY_ORG_SLUG,
   workspaceSlug: process.env.CMSSY_WORKSPACE_SLUG,
   draftSecret: process.env.CMSSY_DRAFT_SECRET,
+  layout,
 });

package/assets/init/remix/app/cmssy/editor.tsx

@@ -1,4 +1,4 @@
-import { CmssyLazyEditor } from "@cmssy/react/client";
+import { CmssyLazyEditor, type EditBridgeConfig } from "@cmssy/react/client";
 import type { CmssyPageData } from "@cmssy/core";
 
 export function CmssyEditor(props: {
@@ -6,7 +6,7 @@ export function CmssyEditor(props: {
   locale: string;
   defaultLocale: string;
   enabledLocales: string[];
-  edit: { editorOrigin: string | string[] };
+  edit: EditBridgeConfig;
 }) {
   return <CmssyLazyEditor {...props} load={() => import("./blocks")} />;
 }

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

@@ -5,11 +5,13 @@ import {
   type CmssyLayoutGroup,
 } from "@cmssy/react";
 import { CmssyLazyLayout } from "@cmssy/react/client";
+import type { CmssyRegion } from "@cmssy/remix";
+import type { layout } from "../../cmssy.config";
 import { blocks } from "./blocks";
 
 export interface LayoutSlotProps {
   groups: CmssyLayoutGroup[];
-  position: "header" | "footer";
+  position: CmssyRegion<typeof layout>;
   locale: string;
   defaultLocale: string;
   enabledLocales: string[];
@@ -63,6 +65,8 @@ export function LayoutSlot({
             locale={locale}
             defaultLocale={defaultLocale}
             context={context}
+            resolvedContent={resolvedContent?.[block.id]}
+            data={data?.[block.id]}
           />
         ))}
     </>

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

@@ -3,10 +3,16 @@ import {
   buildBlockContext,
   buildBlockMap,
   resolveEditorBlockData,
+  resolveEditorLayoutBlockData,
   type EditorBlockData,
+  type ResolveLayoutBlockDataOptions,
 } from "@cmssy/react";
-import { createCmssyHeaders, createCmssyLoader } from "@cmssy/remix";
-import { cmssy } from "../../cmssy.config";
+import {
+  createCmssyHeaders,
+  createCmssyLoader,
+  type CmssyRegion,
+} from "@cmssy/remix";
+import { cmssy, type layout } from "../../cmssy.config";
 import { blocks } from "../cmssy/blocks";
 import { CmssyEditor } from "../cmssy/editor";
 import { LayoutSlot } from "../cmssy/layout-slot";
@@ -14,6 +20,16 @@ import type { Route } from "./+types/page";
 
 const cmssyLoader = createCmssyLoader(cmssy, { blocks });
 
+type Position = CmssyRegion<typeof layout>;
+
+async function resolveSlot(
+  options: Omit<ResolveLayoutBlockDataOptions, "position">,
+  position: Position,
+) {
+  const resolved = await resolveEditorLayoutBlockData({ ...options, position });
+  return { data: resolved.data, resolvedContent: resolved.content };
+}
+
 export async function loader(args: Route.LoaderArgs) {
   const data = await cmssyLoader(args);
   const resolved: EditorBlockData = data.isEdit
@@ -27,7 +43,27 @@ export async function loader(args: Route.LoaderArgs) {
         config: cmssy,
       });
 
-  return { ...data, blockData: resolved.data, blockContent: resolved.content };
+  const slotOptions = {
+    groups: data.layouts,
+    blocks,
+    locale: data.locale,
+    defaultLocale: data.defaultLocale,
+    enabledLocales: data.enabledLocales,
+    config: cmssy,
+  };
+  const [header, footer] = data.isEdit
+    ? [data.editorData?.header, data.editorData?.footer]
+    : await Promise.all([
+        resolveSlot(slotOptions, "header"),
+        resolveSlot(slotOptions, "footer"),
+      ]);
+
+  return {
+    ...data,
+    blockData: resolved.data,
+    blockContent: resolved.content,
+    layoutData: { header, footer },
+  };
 }
 
 export const headers = createCmssyHeaders(cmssy);
@@ -41,8 +77,9 @@ export default function CmssyPage({ loaderData }: Route.ComponentProps) {
     enabledLocales,
     isEdit,
     editorOrigin,
+    layoutRegions,
     diagnostics,
-    editorData,
+    layoutData,
     blockData,
     blockContent,
   } = loaderData;
@@ -51,7 +88,7 @@ export default function CmssyPage({ loaderData }: Route.ComponentProps) {
     return <div dangerouslySetInnerHTML={{ __html: diagnostics }} />;
   }
 
-  const slot = (position: "header" | "footer") => (
+  const slot = (position: Position) => (
     <LayoutSlot
       groups={layouts}
       position={position}
@@ -59,8 +96,8 @@ export default function CmssyPage({ loaderData }: Route.ComponentProps) {
       defaultLocale={defaultLocale}
       enabledLocales={enabledLocales}
       edit={isEdit ? { editorOrigin } : undefined}
-      data={editorData?.[position]?.data}
-      resolvedContent={editorData?.[position]?.resolvedContent}
+      data={layoutData[position]?.data}
+      resolvedContent={layoutData[position]?.resolvedContent}
     />
   );
 
@@ -73,7 +110,7 @@ export default function CmssyPage({ loaderData }: Route.ComponentProps) {
           locale={locale}
           defaultLocale={defaultLocale}
           enabledLocales={enabledLocales}
-          edit={{ editorOrigin }}
+          edit={{ editorOrigin, layoutRegions }}
         />
         {slot("footer")}
       </>

package/assets/init/remix/cmssy.config.ts

@@ -1,7 +1,15 @@
-import { defineCmssyConfig } from "@cmssy/remix";
+import { defineCmssyConfig, defineCmssyLayout } from "@cmssy/remix";
+
+export const layout = defineCmssyLayout({
+  regions: [
+    { id: "header", label: "Header" },
+    { id: "footer", label: "Footer" },
+  ],
+});
 
 export const cmssy = defineCmssyConfig({
   org: process.env.CMSSY_ORG_SLUG,
   workspaceSlug: process.env.CMSSY_WORKSPACE_SLUG,
   draftSecret: process.env.CMSSY_DRAFT_SECRET,
+  layout,
 });

package/package.json

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