Merge branch 'main' into pro-8255-manager-locale-switcher

* main:
  enforce empty state font (#5113)
  sticky controls (#5106)
  Layout widget icon (#5112)
  Feature layout widget (#5031)
  PRO-8435: log what widget type was missing (#5110)
  fix changelog (#5108)
  take aspect ratio into account to calculate min size constrain (#5087)
  PRO-8343: render-areas=inline support when using an external frontend (#5092)

Author: haroun

.npmrc

@@ -0,0 +1 @@
+public-hoist-pattern[]=*

CHANGELOG.md

@@ -5,12 +5,21 @@
 ### Adds
 
 * Add locale picker in the page and piece manager modals.
-
-### Fixes
+* Support for the `render-areas` query parameter in the REST API when using Astro as an external frontend, provided the Astro project has the corresponding route. This allows section template library previews to work in Astro projects. For ease of migration, if Astro cannot satisfy the request, ApostropheCMS will also attempt to render the widget natively.
+* Made `self.apos.externalFrontKey` available, simplifying API calls back to Astro.
+* Layout widget for dynamic grid layouts.
+* `widgetOperations` support for `placement: 'breadcrumb'` to add operations to the breadcrumb menu of widgets. Extend the widget operations configuration to support various features when in the breadcrumb menu.
+* Area template (Nunjucks) support for `aposStyle`, `aposClassName`, `aposParentOptions` and `aposAttrs` contextual named variables (`with {}` syntax).
 
 ### Changes
 
-* Refactors complex logic from `AposSchema` that handle data updates to simplifies it.
+* Refactored complex logic regarding data updates in `AposSchema`.
+* Cleaned up `annotateAreaForExternalFront` logic and added context so developers understand the reason if it fails due to a widget type with no matching module in the project.
+
+### Fixes
+
+* The `render-areas` query parameter now works correctly with areas nested in array items.
+* Fix min size calculation for image widgets configured with an aspect ratio.
 
 ## 4.22.0 (2025-10-01)
 

defaults.js

@@ -41,6 +41,8 @@ module.exports = {
     '@apostrophecms/search': {},
     '@apostrophecms/any-page-type': {},
     '@apostrophecms/area': {},
+    '@apostrophecms/layout-widget': {},
+    '@apostrophecms/layout-column-widget': {},
     '@apostrophecms/rich-text-widget': {},
     '@apostrophecms/html-widget': {},
     '@apostrophecms/color-field': {},

lib/image.js

@@ -0,0 +1,48 @@
+function computeMinSizes([ minWidth, minHeight ], aspectRatio) {
+  const aspectRatioFloat = Array.isArray(aspectRatio)
+    ? aspectRatio[0] / aspectRatio[1]
+    : aspectRatio;
+
+  if (!aspectRatioFloat) {
+    return {
+      minWidth,
+      minHeight
+    };
+  }
+
+  // If ratio wants a square,
+  // we simply take the higher min size
+  if (aspectRatioFloat === 1) {
+    const higherValue = Math.max(minWidth, minHeight);
+
+    return {
+      minWidth: higherValue,
+      minHeight: higherValue
+    };
+  }
+
+  const diff = minWidth / minHeight - aspectRatioFloat;
+
+  if (diff > 0) {
+    return {
+      minWidth,
+      minHeight: minWidth / aspectRatioFloat
+    };
+  }
+
+  if (diff < 0) {
+    return {
+      minWidth: minHeight * aspectRatioFloat,
+      minHeight
+    };
+  }
+
+  return {
+    minWidth,
+    minHeight
+  };
+};
+
+module.exports = {
+  computeMinSizes
+};

modules/@apostrophecms/area/index.js

@@ -1,5 +1,6 @@
 const _ = require('lodash');
 const { stripIndent } = require('common-tags');
+const cheerio = require('cheerio');
 
 // An area is a series of zero or more widgets, in which users can add
 // and remove widgets and drag them to reorder them. This module implements
@@ -270,7 +271,9 @@ module.exports = {
           self.missingWidgetTypes = {};
         }
         if (!self.missingWidgetTypes[name]) {
-          self.apos.util.error('WARNING: widget type ' + name + ' exists in content but is not configured');
+          self.apos.util.error(`WARNING: widget type ${name} exists in your database but is not configured.\n` +
+            `You probably do not have a ${name}-widget module in your project.`
+          );
           self.missingWidgetTypes[name] = true;
         }
       },
@@ -292,6 +295,10 @@ module.exports = {
       // If `inline` is true then the rendering of each widget is attached
       // to the widget as a `_rendered` property, bypassing normal full-area
       // HTML responses, and the return value of this method is `null`.
+      //
+      // If an external front key is configured, ApostropheCMS will attempt
+      // to render the widget via Astro before attempting to render it
+      // natively.
       async renderArea(req, area, _with, { inline = false } = {}) {
         if (!area._id) {
           throw new Error('All areas must have an _id property in A3.x. Area details:\n\n' + JSON.stringify(area));
@@ -337,27 +344,86 @@ module.exports = {
           // just use the helpers
           self.apos.attachment.all(area, { annotate: true });
         }
-        if (inline) {
-          for (const item of area.items) {
-            item._rendered = await self.renderWidget(
-              req,
-              item.type,
-              item,
-              widgets[item.type]
-            );
+
+        let externalError = null;
+        if (!self.apos.externalFrontKey) {
+          return renderNatively();
+        }
+
+        try {
+          return await renderViaExternalFront();
+        } catch (e) {
+          externalError = e;
+        }
+        try {
+          return await renderNatively();
+        } catch (e) {
+          throw new Error('Could not render area for API, neither via the external frontend nor natively.\n\n' +
+            'Check your Astro server logs as well.\n\n' +
+            niceError(externalError) + '\n\n' +
+            niceError(e)
+          );
+        }
+
+        async function renderViaExternalFront() {
+          if (!self.apos.baseUrl && self.apos.externalFrontKey) {
+            throw new Error('APOS_BASE_URL and APOS_EXTERNAL_FRONT_KEY must both be set in order to render\nvia the external frontend');
+          }
+          // Astro can render components or return JSON but not both, at least not without
+          // using its experimental container API which would potentially not have
+          // the same configuration as the main Astro project. So we let Astro be Astro,
+          // then we pull out the individual renderings with Cheerio. -Tom
+          const response = await fetch(`${self.apos.baseUrl}/api/apos-external-front/render-area`, {
+            method: 'POST',
+            headers: {
+              'apos-external-front-key': self.apos.externalFrontKey
+            },
+            body: JSON.stringify({
+              area
+            })
+          });
+          if (response.status >= 400) {
+            throw response;
+          }
+          const html = await response.text();
+          const $ = cheerio.load(`<div id="root">${html}</div>`);
+          if (inline) {
+            for (let i = 0; (i < area.items.length); i++) {
+              area.items[i]._rendered = $(`#root [data-widget-id="${area.items[i]._id}"]`).html() || '';
+            }
+            return null;
+          } else {
+            const $children = $('#root [data-widget-id]');
+            return $children.map(function() {
+              return $(this).html();
+            }).join('\n');
+          }
+        }
+
+        async function renderNatively() {
+          if (inline) {
+            for (const item of area.items) {
+              item._rendered = await self.renderWidget(
+                req,
+                item.type,
+                item,
+                widgets[item.type]
+              );
+            }
+            return null;
+          } else {
+            return self.render(req, 'area', {
+              // TODO filter area to exclude big relationship objects, but
+              // not so sloppy this time please
+              area,
+              field,
+              options,
+              choices,
+              _with,
+              canEdit
+            });
           }
-          return null;
         }
-        return self.render(req, 'area', {
-          // TODO filter area to exclude big relationship objects, but
-          // not so sloppy this time please
-          area,
-          field,
-          options,
-          choices,
-          _with,
-          canEdit
-        });
       },
       // Replace documents' area objects with rendered HTML for each area.
       // This is used by GET requests including the `render-areas` query
@@ -373,6 +439,10 @@ module.exports = {
         let index = 0;
         // Loop over the docs in the array passed in.
         for (const doc of within) {
+          if (self.apos.externalFrontKey) {
+            self.apos.template.annotateDocForExternalFront(doc);
+          }
+
           const rendered = [];
 
           const areasToRender = {};
@@ -409,8 +479,8 @@ module.exports = {
           index++;
         }
 
-        async function render(area, path, context, opts) {
-          const preppedArea = self.prepForRender(area, context, path);
+        async function render(area, path, context) {
+          const preppedArea = self.prepForRender(area, context, path.split('.').at(-1));
 
           const areaRendered = await self.apos.area.renderArea(
             req,
@@ -903,3 +973,9 @@ module.exports = {
     };
   }
 };
+
+function niceError(e) {
+  // Node.js includes the error message in the stack property, it's
+  // actually a complete rendering plus the stack 🤷
+  return e.stack;
+}

modules/@apostrophecms/area/ui/apos/apps/AposAreas.js

@@ -3,8 +3,6 @@ import createApp from 'Modules/@apostrophecms/ui/lib/vue';
 
 export default function() {
 
-  const component = apos.vueComponents.AposAreaEditor;
-
   let widgetsRendering = 0;
 
   apos.area.widgetOptions = [];
@@ -66,13 +64,25 @@ export default function() {
   }
 
   function createAreaApp(el) {
-    const options = JSON.parse(el.getAttribute('data-options'));
-    const data = JSON.parse(el.getAttribute('data'));
+    const options = JSON.parse(el.getAttribute('data-options')) || {};
+    const data = JSON.parse(el.getAttribute('data')) || {};
     const fieldId = el.getAttribute('data-field-id');
+    const moduleName = el.getAttribute('data-module');
     const choices = JSON.parse(el.getAttribute('data-choices'));
     const renderings = {};
     const _docId = data._docId;
 
+    const parentOptionsStr = el.getAttribute('data-parent-options');
+    const parentOptions = parentOptionsStr ? JSON.parse(parentOptionsStr) : null;
+
+    let componentName = options.editorComponent || 'AposAreaEditor';
+    if (!apos.vueComponents[componentName]) {
+      // eslint-disable-next-line no-console
+      console.error(`Area Editor component "${componentName}" not found. Switching to default.`);
+      componentName = 'AposAreaEditor';
+    }
+    const component = apos.vueComponents[componentName];
+
     for (const widgetEl of el.querySelectorAll('[data-apos-widget]')) {
       const _id = widgetEl.getAttribute('data-apos-widget');
       const item = data.items.find(item => _id === item._id);
@@ -109,6 +119,8 @@ export default function() {
         choices,
         docId: _docId,
         fieldId,
+        moduleName,
+        parentOptions,
         renderings
       });