apostrophe 4.27.1 → 4.28.0

package/modules/@apostrophecms/styles/lib/apiRoutes.js

@@ -2,12 +2,32 @@ module.exports = self => {
   return {
     get: {
       // This route serves the existing styles stylesheet,
-      // constructed from the global object
-      // We do it this way so the browser can cache the styles as often as possible
+      // constructed from the global object.
+      // We do it this way so the browser can cache the styles as often as possible.
+      //
+      // The locale-qualified alias (`stylesheet/locale/:locale/:mode`)
+      // produces a distinct path per locale so that static-build
+      // tools that key on the URL path (e.g. Astro) don't
+      // overwrite one locale's stylesheet with another's.
       stylesheet(req) {
-        req.res.setHeader('Content-Type', 'text/css');
-        req.res.setHeader('Cache-Control', 'public, max-age=31557600');
-        return req.data.global.stylesStylesheet;
+        return self.serveStylesheet(req);
+      },
+      'stylesheet/locale/:locale/:mode': async function(req) {
+        const { locale, mode } = req.params;
+        if (!locale || !self.apos.i18n.isValidLocale(locale)) {
+          throw self.apos.error('invalid');
+        }
+        const validModes = [ 'published', 'draft' ];
+        const safeMode = validModes.includes(mode) ? mode : 'published';
+        if (safeMode === 'draft' && !self.apos.permission.can(req, 'view-draft')) {
+          throw self.apos.error('forbidden');
+        }
+        req.locale = locale;
+        req.mode = safeMode;
+        // Force re-fetch global for the correct locale
+        delete req.data.global;
+        await self.apos.global.addGlobalToData(req);
+        return self.serveStylesheet(req);
       }
     },
     post: {

package/modules/@apostrophecms/styles/lib/handlers.js

@@ -45,6 +45,25 @@ node app @apostrophecms-pro/palette:migrate-to-styles
         }
         self.apos.template.addBodyClass(req, classes.join(' '));
       }
+    },
+    '@apostrophecms/url:getAllUrlMetadata': {
+      // Provide a literal content entry so static builds
+      // can include the dynamically generated stylesheet.
+      // Uses the locale-path URL so each locale produces a
+      // distinct path for static-build tools.
+      // The URL must be relative and prefix-free — the
+      // consumer prepends the prefix when fetching.
+      addStylesheetUrl(req, results) {
+        if (!req.data.global?.stylesStylesheet) {
+          return;
+        }
+        results.push({
+          url: self.getStylesheetUrl(req, { relative: true }),
+          contentType: 'text/css',
+          i18nId: '@apostrophecms/styles:stylesheet',
+          sitemap: false
+        });
+      }
     }
   };
 };

package/modules/@apostrophecms/styles/lib/methods.js

@@ -82,6 +82,27 @@ module.exports = (self, options) => {
 
       return expanded;
     },
+    // Returns the locale-qualified stylesheet URL for the given
+    // request. The path encodes the locale so that static-build
+    // tools produce a distinct file per locale.
+    //
+    // Options:
+    //   `relative` - if true, return a prefix-free path suitable
+    //   for route-relative contexts (e.g. `getAllUrlMetadata`).
+    //   Defaults to `false`, which prepends `apos.prefix` so the
+    //   URL works in rendered HTML (`<link>` tags, etc.).
+    getStylesheetUrl(req, { relative = false } = {}) {
+      const prefix = relative ? '' : (self.apos.prefix || '');
+      const version = req.data.global?.stylesStylesheetVersion;
+      return `${prefix}${self.action}/stylesheet/locale/${req.locale}/${req.mode}${version ? `?version=${version}` : ''}`;
+    },
+    // Shared implementation for the stylesheet API routes.
+    // Sets cache headers and returns the raw CSS string.
+    serveStylesheet(req) {
+      req.res.setHeader('Content-Type', 'text/css');
+      req.res.setHeader('Cache-Control', 'public, max-age=31557600');
+      return req.data.global?.stylesStylesheet || '';
+    },
     stylesheet(req) {
       // Stylesheet node should be created only for logged in users.
       if (!req.data.global) {
@@ -94,7 +115,7 @@ module.exports = (self, options) => {
       // and similar features from those who should just get the link tag
       const hasLink = !self.apos.permission.can(req, 'view-draft');
       if (req.data.global.stylesStylesheet && hasLink) {
-        const href = `${self.action}/stylesheet?version=${req.data.global.stylesStylesheetVersion}&aposLocale=${req.locale}:${req.mode}`;
+        const href = self.getStylesheetUrl(req);
         nodes.push({
           name: 'link',
           attrs: {
@@ -103,17 +124,19 @@ module.exports = (self, options) => {
           }
         });
       }
-      nodes.push({
-        name: 'style',
-        attrs: {
-          id: 'apos-styles-stylesheet'
-        },
-        body: [
-          {
-            text: req.data.global.stylesStylesheet || ''
-          }
-        ]
-      });
+      if (!hasLink) {
+        nodes.push({
+          name: 'style',
+          attrs: {
+            id: 'apos-styles-stylesheet'
+          },
+          body: [
+            {
+              raw: req.data.global.stylesStylesheet || ''
+            }
+          ]
+        });
+      }
       return nodes;
     },
     ui(req) {

package/modules/@apostrophecms/styles/ui/apos/components/TheAposStyles.vue

@@ -431,6 +431,7 @@ export default {
       );
     },
     async setStyleMarkup({ css, classes }) {
+      const stylesheetEl = document.querySelector('#apos-styles-stylesheet');
       this.setBodyClasses(classes);
       if (apos.adminBar.breakpointPreviewMode?.enable) {
         const processed = breakpointPreviewTransformer(css, {
@@ -438,11 +439,15 @@ export default {
           debug: apos.adminBar.breakpointPreviewMode?.debug === true,
           transform: apos.adminBar.breakpointPreviewMode?.transform || null
         });
-        document.querySelector('#apos-styles-stylesheet').textContent = processed;
+        if (stylesheetEl) {
+          stylesheetEl.textContent = processed;
+        }
         return;
       }
 
-      document.querySelector('#apos-styles-stylesheet').textContent = css;
+      if (stylesheetEl) {
+        stylesheetEl.textContent = css;
+      }
     },
     setBodyClasses(classes) {
       const previousClasses = document.body

package/modules/@apostrophecms/task/index.js

@@ -300,7 +300,15 @@ module.exports = {
         };
         addCloneMethod(req);
         req.res.__ = req.__;
-        const { role: _role, ...properties } = options || {};
+        const {
+          role: _role, staticBuild: _staticBuild, ...properties
+        } = options || {};
+
+        // When staticBuild is requested, configure the req object
+        // with the same properties that Express middlewares
+        if (_staticBuild) {
+          self.apos.modules['@apostrophecms/express'].applyStaticBuildHeaders(req);
+        }
 
         Object.assign(req, properties);
         self.apos.i18n.setPrefixUrls(req);

package/modules/@apostrophecms/template/views/outerLayoutBase.html

@@ -1,6 +1,9 @@
 <!DOCTYPE html>
 <html lang="{% block locale %}{{ data.locale }}{% endblock %}" dir="{% block direction %}{{ data.i18n.direction or 'ltr' }}{% endblock %}" {% block extraHtml %}{% endblock %}>
   <head>
+    {% block encoding %}
+      <meta charset="utf-8">
+    {% endblock %}
     {% block startHead %}
     {% endblock %}
     {% component '@apostrophecms/template:inject' with { where: 'head', end: 'prepend', when: 'hmr' } %}

package/modules/@apostrophecms/ui/index.js

@@ -9,6 +9,7 @@ module.exports = {
   },
   init(self) {
     self.enableBrowserData();
+    self.uiDebug = self.options.debug ?? process.env.NODE_ENV !== 'production';
   },
   methods(self) {
     return {
@@ -23,6 +24,7 @@ module.exports = {
           theme.primary = req.data.user.aposThemePrimary;
         }
         return {
+          debug: self.uiDebug,
           theme,
           widgetMargin: self.options.widgetMargin
         };

package/modules/@apostrophecms/ui/ui/apos/components/AposButtonGroup.vue

@@ -48,7 +48,7 @@ export default {
 <style lang="scss" scoped>
   .apos-button-group {
     background-color: var(--a-background-primary);
-    border-radius: var(--a-border-radius);
+    border-radius: var(--a-border-radius-large);
     display: inline-flex;
   }
 

package/modules/@apostrophecms/ui/ui/apos/components/AposContextMenu.vue

@@ -86,6 +86,7 @@
             :active-item="activeItem"
             :is-open="isOpen"
             :has-tip="hasTip"
+            :ignore-unfocus="ignoreUnfocus"
             @item-clicked="menuItemClicked"
             @set-arrow="setArrow"
           >
@@ -210,6 +211,10 @@ const props = defineProps({
   teleportContent: {
     type: Boolean,
     default: false
+  },
+  ignoreUnfocus: {
+    type: Boolean,
+    default: false
   }
 });
 

package/modules/@apostrophecms/ui/ui/apos/components/AposContextMenuDialog.vue

@@ -3,6 +3,7 @@
     class="apos-primary-scrollbar apos-context-menu__dialog"
     :class="classes"
     role="dialog"
+    :data-apos-ignore-unfocus="props.ignoreUnfocus"
   >
     <AposContextMenuTip
       v-if="hasTip"
@@ -37,6 +38,10 @@
 import { computed } from 'vue';
 
 const props = defineProps({
+  ignoreUnfocus: {
+    type: Boolean,
+    default: false
+  },
   menuPlacement: {
     type: String,
     required: true

package/modules/@apostrophecms/ui/ui/apos/lib/vue.js

@@ -6,6 +6,8 @@ import VueAposI18Next from './i18next';
 
 const pinia = createPinia();
 
+export { pinia };
+
 export default (appConfig, props = {}) => {
   const app = createApp(appConfig, props);
 

package/modules/@apostrophecms/ui/ui/apos/stores/widget.js

@@ -49,13 +49,18 @@ export const useWidgetStore = defineStore('widget', () => {
 
     const headerHeight = window.apos.adminBar.height;
     const bufferSpace = 40;
-    const targetTop = $el.getBoundingClientRect().top;
-    const scrollPos = targetTop - headerHeight - bufferSpace;
-
-    window.scrollBy({
-      top: scrollPos,
-      behavior: 'smooth'
-    });
+    const rect = $el.getBoundingClientRect();
+    const visibleTop = headerHeight + bufferSpace;
+    const visibleBottom = window.innerHeight - bufferSpace;
+    const isInView = rect.top >= visibleTop && rect.bottom <= visibleBottom;
+
+    if (!isInView) {
+      const scrollPos = rect.top - headerHeight - bufferSpace;
+      window.scrollBy({
+        top: scrollPos,
+        behavior: 'smooth'
+      });
+    }
 
     $el.focus({
       preventScroll: true