From 4d60501bbe0f293b4bf164eb864cd7a464bf4ae2 Mon Sep 17 00:00:00 2001 From: Miro Yovchev <2827783+myovchev@users.noreply.github.com> Date: Mon, 8 Sep 2025 22:26:42 +0300 Subject: [PATCH 1/8] Layout preview --- modules/@apostrophecms/asset/index.js | 2 +- modules/asset/ui/src/scss/_layout.scss | 4 ++-- modules/default-page/index.js | 6 +++--- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/modules/@apostrophecms/asset/index.js b/modules/@apostrophecms/asset/index.js index 17c976ba..9d9a4f2a 100644 --- a/modules/@apostrophecms/asset/index.js +++ b/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 } }; diff --git a/modules/asset/ui/src/scss/_layout.scss b/modules/asset/ui/src/scss/_layout.scss index 95d9e685..237c2553 100644 --- a/modules/asset/ui/src/scss/_layout.scss +++ b/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; } diff --git a/modules/default-page/index.js b/modules/default-page/index.js index abb52d41..19169ff8 100644 --- a/modules/default-page/index.js +++ b/modules/default-page/index.js @@ -9,9 +9,9 @@ export default { type: 'area', options: { widgets: { - '@apostrophecms/rich-text': {}, - '@apostrophecms/image': {}, - '@apostrophecms/video': {} + '@apostrophecms/layout': { + gap: '2rem' + } } } } From f4a206bbc721fc3a525fbf3243ddd3ac1c8f56e0 Mon Sep 17 00:00:00 2001 From: Miro Yovchev <2827783+myovchev@users.noreply.github.com> Date: Mon, 8 Sep 2025 22:50:07 +0300 Subject: [PATCH 2/8] Feature branch dep --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 53cfd904..8826ddde 100644 --- a/package.json +++ b/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": { From 4814f988d8b09638f6c2058d103eb35ae6066f9e Mon Sep 17 00:00:00 2001 From: Miro Yovchev <2827783+myovchev@users.noreply.github.com> Date: Wed, 10 Sep 2025 15:04:34 +0300 Subject: [PATCH 3/8] Add custom layout examples --- app.js | 4 ++- modules/@apostrophecms/image-widget/index.js | 15 +++++++++++ .../@apostrophecms/rich-text-widget/index.js | 15 +++++++++++ modules/another-column-widget/index.js | 17 +++++++++++++ modules/another-layout-widget/index.js | 25 +++++++++++++++++++ modules/default-page/index.js | 5 ++++ 6 files changed, 80 insertions(+), 1 deletion(-) create mode 100644 modules/@apostrophecms/image-widget/index.js create mode 100644 modules/@apostrophecms/rich-text-widget/index.js create mode 100644 modules/another-column-widget/index.js create mode 100644 modules/another-layout-widget/index.js diff --git a/app.js b/app.js index 9586c13c..d45f499b 100644 --- a/app.js +++ b/app.js @@ -34,6 +34,8 @@ 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': {} } }); diff --git a/modules/@apostrophecms/image-widget/index.js b/modules/@apostrophecms/image-widget/index.js new file mode 100644 index 00000000..1f53d187 --- /dev/null +++ b/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' + } + } + }; + } +}; diff --git a/modules/@apostrophecms/rich-text-widget/index.js b/modules/@apostrophecms/rich-text-widget/index.js new file mode 100644 index 00000000..b45e9b2c --- /dev/null +++ b/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' + } + } + }; + } +}; diff --git a/modules/another-column-widget/index.js b/modules/another-column-widget/index.js new file mode 100644 index 00000000..d5234cf0 --- /dev/null +++ b/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': {} + } + } + } + } + } +}; diff --git a/modules/another-layout-widget/index.js b/modules/another-layout-widget/index.js new file mode 100644 index 00000000..a8b4642c --- /dev/null +++ b/modules/another-layout-widget/index.js @@ -0,0 +1,25 @@ +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': {}, + '@apostrophecms/layout-meta': {} + } + } + } + } + } +}; diff --git a/modules/default-page/index.js b/modules/default-page/index.js index 19169ff8..93b41adf 100644 --- a/modules/default-page/index.js +++ b/modules/default-page/index.js @@ -9,8 +9,13 @@ export default { type: 'area', options: { widgets: { + // A standard layout widget '@apostrophecms/layout': { gap: '2rem' + }, + // A custom layout widget, with custom options and columns + 'another-layout': { + gap: '1rem' } } } From afc4b779cb393f605342f470e54ff33071bd21b9 Mon Sep 17 00:00:00 2001 From: Miro Yovchev <2827783+myovchev@users.noreply.github.com> Date: Thu, 11 Sep 2025 12:45:44 +0300 Subject: [PATCH 4/8] Disable additional BC operations --- modules/@apostrophecms/i18n/index.js | 26 +++++++++++++++++++ modules/@apostrophecms/image-widget/index.js | 16 ++++++------ .../@apostrophecms/rich-text-widget/index.js | 16 ++++++------ 3 files changed, 42 insertions(+), 16 deletions(-) create mode 100644 modules/@apostrophecms/i18n/index.js diff --git a/modules/@apostrophecms/i18n/index.js b/modules/@apostrophecms/i18n/index.js new file mode 100644 index 00000000..2b337905 --- /dev/null +++ b/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' + // } +}; diff --git a/modules/@apostrophecms/image-widget/index.js b/modules/@apostrophecms/image-widget/index.js index 1f53d187..c3293a7c 100644 --- a/modules/@apostrophecms/image-widget/index.js +++ b/modules/@apostrophecms/image-widget/index.js @@ -2,14 +2,14 @@ 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' - } - } + // add: { + // editCustom: { + // placement: 'breadcrumb', + // action: 'edit', + // icon: 'cog-icon', + // tooltip: 'apostrophe:edit' + // } + // } }; } }; diff --git a/modules/@apostrophecms/rich-text-widget/index.js b/modules/@apostrophecms/rich-text-widget/index.js index b45e9b2c..e2f65ec1 100644 --- a/modules/@apostrophecms/rich-text-widget/index.js +++ b/modules/@apostrophecms/rich-text-widget/index.js @@ -2,14 +2,14 @@ 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' - } - } + // add: { + // deleteCustom: { + // placement: 'breadcrumb', + // action: 'remove', + // icon: 'delete-icon', + // tooltip: 'apostrophe:delete' + // } + // } }; } }; From 1d7ba2e3bd459219bbc30270ab0758f323a61e86 Mon Sep 17 00:00:00 2001 From: Miro Yovchev <2827783+myovchev@users.noreply.github.com> Date: Wed, 8 Oct 2025 19:10:34 +0300 Subject: [PATCH 5/8] Meta is not available anymore --- modules/another-layout-widget/index.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/modules/another-layout-widget/index.js b/modules/another-layout-widget/index.js index a8b4642c..7678eff3 100644 --- a/modules/another-layout-widget/index.js +++ b/modules/another-layout-widget/index.js @@ -15,8 +15,7 @@ export default { // The "special" options for the area will be auto applied. options: { widgets: { - 'another-column': {}, - '@apostrophecms/layout-meta': {} + 'another-column': {} } } } From 2f31fdc173a97b8908fb9aef5ce385c5c3bfef65 Mon Sep 17 00:00:00 2001 From: Thomas Boutell Date: Fri, 17 Oct 2025 12:13:22 -0400 Subject: [PATCH 6/8] nested layout --- app.js | 4 +++- modules/@apostrophecms/column-widget/index.js | 17 +++++++++++++ modules/nested-column-widget/index.js | 17 +++++++++++++ modules/nested-layout-widget/index.js | 24 +++++++++++++++++++ 4 files changed, 61 insertions(+), 1 deletion(-) create mode 100644 modules/@apostrophecms/column-widget/index.js create mode 100644 modules/nested-column-widget/index.js create mode 100644 modules/nested-layout-widget/index.js diff --git a/app.js b/app.js index d45f499b..93187529 100644 --- a/app.js +++ b/app.js @@ -36,6 +36,8 @@ apostrophe({ // The project's first custom page type. 'default-page': {}, 'another-layout-widget': {}, - 'another-column-widget': {} + 'another-column-widget': {}, + 'nested-layout-widget': {}, + 'nested-column-widget': {} } }); diff --git a/modules/@apostrophecms/column-widget/index.js b/modules/@apostrophecms/column-widget/index.js new file mode 100644 index 00000000..c34b875e --- /dev/null +++ b/modules/@apostrophecms/column-widget/index.js @@ -0,0 +1,17 @@ +export default { + fields: { + add: { + columns: { + type: 'area', + // The "special" options for the area will be auto applied. + options: { + widgets: { + '@apostrophecms/rich-text': {}, + '@apostrophecms/image': {}, + '@apostrophecms/video': {} + } + } + } + } + } +}; diff --git a/modules/nested-column-widget/index.js b/modules/nested-column-widget/index.js new file mode 100644 index 00000000..da95feb4 --- /dev/null +++ b/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': {} + } + } + } + } + } +}; diff --git a/modules/nested-layout-widget/index.js b/modules/nested-layout-widget/index.js new file mode 100644 index 00000000..a2d54b4c --- /dev/null +++ b/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: '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: { + 'nested-column': {} + } + } + } + } + } +}; From 4ab5d5939d573489866baca0e3c5712d5327fc1f Mon Sep 17 00:00:00 2001 From: Thomas Boutell Date: Fri, 17 Oct 2025 12:30:32 -0400 Subject: [PATCH 7/8] nested layouts, for testing --- .../{column-widget => layout-column-widget}/index.js | 11 ++++++++--- modules/nested-layout-widget/index.js | 4 ++-- 2 files changed, 10 insertions(+), 5 deletions(-) rename modules/@apostrophecms/{column-widget => layout-column-widget}/index.js (54%) diff --git a/modules/@apostrophecms/column-widget/index.js b/modules/@apostrophecms/layout-column-widget/index.js similarity index 54% rename from modules/@apostrophecms/column-widget/index.js rename to modules/@apostrophecms/layout-column-widget/index.js index c34b875e..5096871b 100644 --- a/modules/@apostrophecms/column-widget/index.js +++ b/modules/@apostrophecms/layout-column-widget/index.js @@ -1,17 +1,22 @@ +console.log('I AM HERE'); + export default { fields: { add: { - columns: { + content: { type: 'area', - // The "special" options for the area will be auto applied. options: { widgets: { '@apostrophecms/rich-text': {}, '@apostrophecms/image': {}, - '@apostrophecms/video': {} + '@apostrophecms/video': {}, + 'nested-layout': {} } } } } + }, + init(self) { + console.log(JSON.stringify(self.schema, null, 2)); } }; diff --git a/modules/nested-layout-widget/index.js b/modules/nested-layout-widget/index.js index a2d54b4c..25363dc6 100644 --- a/modules/nested-layout-widget/index.js +++ b/modules/nested-layout-widget/index.js @@ -3,8 +3,8 @@ export default { // for custom layout with custom columns. extend: '@apostrophecms/layout-widget', options: { - label: 'Another Layout', - columns: 9, + label: 'Nested Layout', + columns: 6, minSpan: 2, defaultSpan: 3 }, From a925497e4633c91f4c8f23be213713de7ad89174 Mon Sep 17 00:00:00 2001 From: Thomas Boutell Date: Fri, 17 Oct 2025 12:39:01 -0400 Subject: [PATCH 8/8] cleanup --- modules/@apostrophecms/layout-column-widget/index.js | 5 ----- 1 file changed, 5 deletions(-) diff --git a/modules/@apostrophecms/layout-column-widget/index.js b/modules/@apostrophecms/layout-column-widget/index.js index 5096871b..ae70c165 100644 --- a/modules/@apostrophecms/layout-column-widget/index.js +++ b/modules/@apostrophecms/layout-column-widget/index.js @@ -1,5 +1,3 @@ -console.log('I AM HERE'); - export default { fields: { add: { @@ -15,8 +13,5 @@ export default { } } } - }, - init(self) { - console.log(JSON.stringify(self.schema, null, 2)); } };