Nested layout

app.js

@@ -34,6 +34,10 @@ apostrophe({
     // use vite for asset bundling and hot module reloading
     '@apostrophecms/vite': {},
     // The project's first custom page type.
-    'default-page': {}
+    'default-page': {},
+    'another-layout-widget': {},
+    'another-column-widget': {},
+    'nested-layout-widget': {},
+    'nested-column-widget': {}
   }
 });

modules/@apostrophecms/asset/index.js

@@ -3,7 +3,7 @@ export default {
   options: {
     // Change to `apos` for admin UI HMR
     // `public` is the default and provides HMR for project UI code
-    hmr: 'public',
+    hmr: 'apos',
     refreshOnRestart: true
   }
 };

modules/@apostrophecms/i18n/index.js

@@ -0,0 +1,26 @@
+export default {
+  // options: {
+  //   defaultLocale: 'en',
+  //   locales: {
+  //     en: {
+  //       label: 'English',
+  //       prefix: '/en'
+  //     },
+  //     fr: {
+  //       label: 'French',
+  //       prefix: '/fr'
+  //     }
+  //   },
+  //   adminLocales: [
+  //     {
+  //       label: 'English',
+  //       value: 'en'
+  //     },
+  //     {
+  //       label: 'French',
+  //       value: 'fr'
+  //     }
+  //   ],
+  //   defaultAdminLocale: 'en'
+  // }
+};

modules/@apostrophecms/image-widget/index.js

@@ -0,0 +1,15 @@
+export default {
+  // Showcase standard widget actions in the breadcrumb
+  widgetOperations(self, options) {
+    return {
+      // add: {
+      //   editCustom: {
+      //     placement: 'breadcrumb',
+      //     action: 'edit',
+      //     icon: 'cog-icon',
+      //     tooltip: 'apostrophe:edit'
+      //   }
+      // }
+    };
+  }
+};

modules/@apostrophecms/layout-column-widget/index.js

@@ -0,0 +1,17 @@
+export default {
+  fields: {
+    add: {
+      content: {
+        type: 'area',
+        options: {
+          widgets: {
+            '@apostrophecms/rich-text': {},
+            '@apostrophecms/image': {},
+            '@apostrophecms/video': {},
+            'nested-layout': {}
+          }
+        }
+      }
+    }
+  }
+};

modules/@apostrophecms/rich-text-widget/index.js

@@ -0,0 +1,15 @@
+export default {
+  // Showcase the standard widget actions in the breadcrumb
+  widgetOperations(self, options) {
+    return {
+      // add: {
+      //   deleteCustom: {
+      //     placement: 'breadcrumb',
+      //     action: 'remove',
+      //     icon: 'delete-icon',
+      //     tooltip: 'apostrophe:delete'
+      //   }
+      // }
+    };
+  }
+};

modules/another-column-widget/index.js

@@ -0,0 +1,17 @@
+export default {
+  // Showcase extended layout column widget with custom content area
+  extend: '@apostrophecms/layout-column-widget',
+  fields: {
+    add: {
+      content: {
+        type: 'area',
+        options: {
+          widgets: {
+            '@apostrophecms/image': {},
+            '@apostrophecms/video': {}
+          }
+        }
+      }
+    }
+  }
+};

modules/another-layout-widget/index.js

@@ -0,0 +1,24 @@
+export default {
+  // Showcase advanced extend tecnique for layout widget,
+  // for custom layout with custom columns.
+  extend: '@apostrophecms/layout-widget',
+  options: {
+    label: 'Another Layout',
+    columns: 9,
+    minSpan: 2,
+    defaultSpan: 3
+  },
+  fields: {
+    add: {
+      columns: {
+        type: 'area',
+        // The "special" options for the area will be auto applied.
+        options: {
+          widgets: {
+            'another-column': {}
+          }
+        }
+      }
+    }
+  }
+};

modules/asset/ui/src/scss/_layout.scss

@@ -22,7 +22,7 @@ body {
 main,
 .bp-footer {
   width: 100%;
-  max-width: 800px;
+  max-width: 1200px;
   margin-left: auto;
   margin-right: auto;
 }
@@ -67,7 +67,7 @@ main,
 }
 
 .bp-content {
-  max-width: 600px;
+  max-width: 1200px;
   margin-left: auto;
   margin-right: auto;
 }

modules/default-page/index.js

@@ -9,9 +9,14 @@ export default {
         type: 'area',
         options: {
           widgets: {
-            '@apostrophecms/rich-text': {},
-            '@apostrophecms/image': {},
-            '@apostrophecms/video': {}
+            // A standard layout widget
+            '@apostrophecms/layout': {
+              gap: '2rem'
+            },
+            // A custom layout widget, with custom options and columns
+            'another-layout': {
+              gap: '1rem'
+            }
           }
         }
       }

modules/nested-column-widget/index.js

@@ -0,0 +1,17 @@
+export default {
+  extend: '@apostrophecms/layout-column-widget',
+  fields: {
+    add: {
+      content: {
+        type: 'area',
+        options: {
+          widgets: {
+            '@apostrophecms/rich-text': {},
+            '@apostrophecms/image': {},
+            '@apostrophecms/video': {}
+          }
+        }
+      }
+    }
+  }
+};

modules/nested-layout-widget/index.js

@@ -0,0 +1,24 @@
+export default {
+  // Showcase advanced extend tecnique for layout widget,
+  // for custom layout with custom columns.
+  extend: '@apostrophecms/layout-widget',
+  options: {
+    label: 'Nested Layout',
+    columns: 6,
+    minSpan: 2,
+    defaultSpan: 3
+  },
+  fields: {
+    add: {
+      columns: {
+        type: 'area',
+        // The "special" options for the area will be auto applied.
+        options: {
+          widgets: {
+            'nested-column': {}
+          }
+        }
+      }
+    }
+  }
+};

package.json

@@ -40,7 +40,7 @@
   "license": "MIT",
   "dependencies": {
     "@apostrophecms/vite": "^1.0.0",
-    "apostrophe": "^4.9.0",
+    "apostrophe": "github:apostrophecms/apostrophe#feature-layout-widget",
     "normalize.css": "^8.0.1"
   },
   "devDependencies": {