druxt-site 0.14.2 → 0.14.4-dev.20260920043715

package/README.md

@@ -1,54 +1,96 @@
-# DruxtJS Site module
+<img src="./banner.svg" alt="DruxtSite: a decoupled Drupal site out of the box">
 
-[![CircleCI](https://circleci.com/gh/druxt/druxt-site.svg?style=svg)](https://circleci.com/gh/druxt/druxt-site)
-[![Known Vulnerabilities](https://snyk.io/test/github/druxt/druxt-site/badge.svg?targetFile=package.json)](https://snyk.io/test/github/druxt/druxt-site?targetFile=package.json)
-[![codecov](https://codecov.io/gh/druxt/druxt-site/branch/develop/graph/badge.svg)](https://codecov.io/gh/druxt/druxt-site)
+# DruxtSite
+
+[![CI](https://github.com/druxt/druxt.js/actions/workflows/ci.yml/badge.svg)](https://github.com/druxt/druxt.js/actions/workflows/ci.yml)
+[![Known Vulnerabilities](https://snyk.io/test/github/druxt/druxt.js/badge.svg?targetFile=package.json)](https://snyk.io/test/github/druxt/druxt.js?targetFile=package.json)
+[![codecov](https://codecov.io/gh/druxt/druxt.js/branch/develop/graph/badge.svg)](https://codecov.io/gh/druxt/druxt.js)
 [![npm](https://badgen.net/npm/v/druxt-site)](https://www.npmjs.com/package/druxt-site)
 
+> Out-of-the-box decoupled Drupal sites with DruxtSite, wiring layout, blocks, menus and content together from one Nuxt module.
 
-> Out of the box Decoupled Drupal sites with Druxt.
+DruxtSite is the whole framework in one module. Install it and you get
+routing, entities, blocks, menus, views and breadcrumbs preconfigured: the
+`DruxtSite` component renders your Drupal theme's regions and content using
+Drupal's own display configuration. Start here if you want a decoupled Drupal
+site rather than individual building blocks.
 
-## Links
+![Drupal Umami Parity demo](https://druxtjs.org/images/umami.png)
 
-- DruxtJS: https://druxtjs.org
-- Documentation: https://druxtjs.org/modules/site
-- Community Discord server: https://discord.druxtjs.org
+## Features
 
-## Install
+- **Router** with path alias and redirect support for Entity and Views pages.
+- **Vuex** based, on-demand JSON:API resource loading.
+- **Entity / Field** render system powered by Drupal display modes.
+- **Block** region and **Content block** component rendering.
+- **Views** and **Views blocks** via the [Drupal JSON:API Views module](https://www.drupal.org/project/jsonapi_views).
+- **Breadcrumb**, **Menus** and more.
+- **File Proxy** enabled by default, and support for API proxying.
 
-`$ npm install druxt-site`
+---
 
-## Usage
+## Installation
 
-1. Add module to `nuxt.config.js`
+1. Install the package:
 
-```js
-module.exports = {
-  modules: [
-    'druxt-site'
-  ],
-  druxt: {
-    baseUrl: 'https://demo-api.druxtjs.org'
-  }
-}
-```
+   ```sh
+   npm i druxt-site
+   ```
+
+2. Add the module to `nuxt.config.js`:
+
+   ```js
+   export default {
+     modules: ['druxt-site'],
+   };
+   ```
+
+### Options
+
+- `druxt.site.layout`
+
+  Type: `boolean`  
+  Default: `true`
+
+  Adds a default layout if no default layout has been provided.
+
+- `druxt.site.theme`
 
-2. Add the `DruxtSite` component to your layout:
+  Type: `string`
+
+  Sets the default theme to be used by the DruxtSite component. Theme can be overridden by the `theme` property on the component.  
+  If no value is provided, a fallback value will be determined from the JSON:API.
+
+---
+
+## Vue.js components
+
+### DruxtSite
+
+Renders all available block regions based on the specified theme.
 
 ```vue
-<template>
-  <DruxtSite :theme="theme" />
-</template>
+<DruxtSite :theme="theme" />
 ```
 
+- For more details, refer to the [DruxtSite API documentation](https://druxtjs.org/api/packages/site/components/DruxtSite).
+
+---
+
 ## Options
 
 ### Base Druxt options
 
 These options are available to all Druxt modules.
 
-| Option | Type | Required | Default | Description |
-| --- | --- | --- | --- | --- |
-| `axios` | `object` | No | `{}` | [Axios instance settings](https://github.com/axios/axios#axioscreateconfig). |
-| `baseUrl` | `string` | Yes | `null` | Base URL for the Drupal installation. |
-| `endpoint` | `string` | No | `/jsonapi` | JSON:API Endpoint of the Drupal installation. |
+| Option     | Type     | Required | Default    | Description                                                                  |
+| ---------- | -------- | -------- | ---------- | ---------------------------------------------------------------------------- |
+| `axios`    | `object` | No       | `{}`       | [Axios instance settings](https://github.com/axios/axios#axioscreateconfig). |
+| `baseUrl`  | `string` | Yes      | `null`     | Base URL for the Drupal installation.                                        |
+| `endpoint` | `string` | No       | `/jsonapi` | JSON:API Endpoint of the Drupal installation.                                |
+
+## Links
+
+- DruxtJS: https://druxtjs.org
+- Documentation: https://druxtjs.org/modules/site
+- Community Discord server: https://discord.druxtjs.org

package/banner.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 320" width="1280" height="320" role="img" aria-label="druxt-site: A decoupled Drupal site out of the box."><defs><linearGradient id="g" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#1f2937"/><stop offset="0.7" stop-color="#2f495e"/><stop offset="1" stop-color="#36566e"/></linearGradient></defs><rect width="1280" height="320" rx="16" fill="url(#g)"/><rect x="250" y="85" width="150" height="150" rx="32" fill="rgba(229,236,241,0.07)"/><g transform="translate(277,112) scale(4)" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5.5 4.5h13a2 2 0 0 1 2 2v11a2 2 0 0 1 -2 2h-13a2 2 0 0 1 -2 -2v-11a2 2 0 0 1 2 -2z" stroke="#7cc5f1"/><path d="M3.5 9h17M6.25 6.75h.01M8.75 6.75h.01" stroke="#7cc5f1"/><path d="M12 11.75l-2.6 4.75h5.2L12 11.75z" stroke="#68cb9f"/></g><text x="440" y="150" style="font-family:ui-sans-serif,system-ui,sans-serif" font-size="64" font-weight="700" letter-spacing="-1" fill="#eef2f6">Site</text><text x="614" y="150" style="font-family:ui-monospace,Menlo,Consolas,monospace" font-size="26" fill="#7cc5f1">druxt-site</text><text x="440" y="196" style="font-family:ui-sans-serif,system-ui,sans-serif" font-size="25" fill="rgba(229,236,241,0.75)">A decoupled Drupal site out of the box.</text><g transform="translate(440,236) scale(0.0994)"><path d="M139 330l-1-2c-2-4-2-8-1-13H29L189 31l67 121 22-16-67-121c-1-2-9-14-22-14-6 0-15 2-22 15L5 303c-1 3-8 16-2 27 4 6 10 12 24 12h136c-14 0-21-6-24-12z" fill="#3498DB"/><path d="M447 304L317 70c-2-2-9-15-22-15-6 0-15 3-22 15l-17 28v54l39-67 129 230h-49a23 23 0 0 1-2 14l-1 1c-6 11-21 12-23 12h76c3 0 17-1 24-12 3-5 5-14-2-26z" fill="#108775"/><path d="M376 330v-1l1-2c1-4 2-8 1-12l-4-12-102-178-15-27h-1l-15 27-102 178-4 12a24 24 0 0 0 2 15c4 6 10 12 24 12h190c3 0 18-1 25-12zM256 152l93 163H163l93-163z" fill="#E5ECF1"/></g><text x="492" y="260" style="font-family:ui-sans-serif,system-ui,sans-serif" font-size="17" font-weight="600" fill="rgba(229,236,241,0.85)">druxtjs.org</text></svg>

package/dist/components/DruxtSite.vue

@@ -11,7 +11,7 @@ import { mapActions } from 'vuex'
  * While Drupal provides placement configuration for blocks, it does not provide
  * any information on where each region should be placed.
  *
- * All regions are provided as scoped slots for the Druxt Wrapper component.
+ * Each region is provided as a scoped slot for the Druxt Wrapper component.
  *
  * @example @lang vue
  * <template>
@@ -33,7 +33,7 @@ import { mapActions } from 'vuex'
  *   mixins: [DruxtSiteMixin]
  * }
  *
- * @example <caption>DruxtSite with template injection</caption> @lang vue
+ * @example <caption>DruxtSite default slot (template injection)</caption> @lang vue
  * <DruxtSite>
  *   <template #default="{ props, regions, theme }">
  *     <!-- Do whatever you want here -->
@@ -60,6 +60,9 @@ export default {
      * Used to filter the available regions from the Drupal Blocks JSON:API
      * resources.
      *
+     * If not set, the theme from the `druxt.site.theme` module option is
+     * used, falling back to the first available theme.
+     *
      * @type {string}
      */
     theme: {
@@ -77,6 +80,10 @@ export default {
     /**
      * DruxtBlockRegion propsData for regions.
      *
+     * @param {object} vm - The component ViewModel.
+     * @param {string|undefined} vm.defaultTheme - The default Drupal theme machine name.
+     * @param {string[]} vm.regions - An array of unique region names.
+     * @param {string|undefined} vm.theme - Drupal theme ID.
      * @return {object}
      */
     props: ({ defaultTheme, regions, theme }) =>
@@ -88,6 +95,10 @@ export default {
 
     /**
      * An array of unique region names.
+     *
+     * @param {object} vm - The component ViewModel.
+     * @param {string[]} vm.model - The region names model value.
+     * @param {string[]} vm.value - The module component model value.
      * @return {string[]}
      */
     regions: ({ model, value }) => model || value || [],
@@ -111,6 +122,8 @@ export default {
      * Provides the available component naming options for the Druxt Wrapper.
      *
      * @param {object} context - The module component ViewModel.
+     * @param {string|undefined} context.defaultTheme - The default Drupal theme machine name.
+     * @param {string|undefined} context.theme - Drupal theme ID.
      * @returns {ComponentOptions}
      */
     componentOptions: ({ defaultTheme, theme }) => [[theme || defaultTheme], ['default']],
@@ -148,6 +161,10 @@ export default {
      * Provides propsData for the DruxtWrapper.
      *
      * @param {object} context - The module component ViewModel.
+     * @param {string|undefined} context.defaultTheme - The default Drupal theme machine name.
+     * @param {object} context.props - DruxtBlockRegion propsData for regions.
+     * @param {string[]} context.regions - An array of unique region names.
+     * @param {string|undefined} context.theme - Drupal theme ID.
      * @returns {PropsData}
      */
     propsData: ({ defaultTheme, props, regions, theme }) => ({ props, regions, theme: theme || defaultTheme }),
@@ -158,7 +175,7 @@ export default {
      * A scoped slot is provided for each block region available, as per the
      * specified theme.
      *
-     * Additionally, the `default` slot will render all regions, or the Nuxt
+     * The `default` slot will also render all regions, or the Nuxt
      * component when no block region data is available.
      *
      * @example <caption>DruxtSite**Theme**.vue</caption> @lang vue
@@ -170,6 +187,7 @@ export default {
      * </template>
      *
      * @return {ScopedSlots} The Scoped slots object.
+     * @param {Function} h - The Vue createElement function.
      */
     slots(h) {
       // If no regions, return Nuxt component.
@@ -203,7 +221,7 @@ export default {
 }
 
 /**
- * Provides the available naming options for the Wrapper component.
+ * Provides the available naming options for the wrapper component.
  *
  * @typedef {array[]} ComponentOptions
  *
@@ -225,7 +243,7 @@ export default {
  */
 
 /**
- * Provides propsData for use in the Wrapper component.
+ * Provides propsData for use in the wrapper component.
  *
  * @typedef {object} PropsData
  * @param {object} props - DruxtBlockRegion propsData for regions.
@@ -247,7 +265,7 @@ export default {
  */
 
 /**
- * Provides scoped slots for use in the Wrapper component.
+ * Provides scoped slots for use in the wrapper component.
  *
  * @typedef {object} ScopedSlots
  * @param {function} * - Slot per region.

package/dist/druxt-site.esm.js

@@ -30,6 +30,7 @@ async function DruxtSiteStorybook({ options, stories }) {
   stories.push(resolve(this.options.buildDir, "./stories/druxt-site.*.stories.js"));
 }
 
+const extendComponent = (component) => ({ ...component, isAsync: false });
 const DruxtSiteNuxtModule = async function(moduleOptions = {}) {
   const options = {
     baseUrl: moduleOptions.baseUrl,
@@ -47,7 +48,7 @@ const DruxtSiteNuxtModule = async function(moduleOptions = {}) {
   };
   this.options.druxt = options;
   this.nuxt.hook("components:dirs", (dirs) => {
-    dirs.push({ path: join(__dirname, "components") });
+    dirs.push({ path: join(__dirname, "components"), extendComponent });
   });
   const druxtModules = [
     "druxt",

package/dist/druxt-site.ssr.js

@@ -34,6 +34,7 @@ async function DruxtSiteStorybook({ options, stories }) {
   stories.push(path.resolve(this.options.buildDir, "./stories/druxt-site.*.stories.js"));
 }
 
+const extendComponent = (component) => ({ ...component, isAsync: false });
 const DruxtSiteNuxtModule = async function(moduleOptions = {}) {
   const options = {
     baseUrl: moduleOptions.baseUrl,
@@ -51,7 +52,7 @@ const DruxtSiteNuxtModule = async function(moduleOptions = {}) {
   };
   this.options.druxt = options;
   this.nuxt.hook("components:dirs", (dirs) => {
-    dirs.push({ path: path.join(__dirname, "components") });
+    dirs.push({ path: path.join(__dirname, "components"), extendComponent });
   });
   const druxtModules = [
     "druxt",

package/icon.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <rect stroke="#036397" x="3.5" y="4.5" width="17" height="15" rx="2" />
+  <path stroke="#036397" d="M3.5 9h17M6.25 6.75h.01M8.75 6.75h.01" />
+  <path stroke="#3b8070" d="M12 11.75l-2.6 4.75h5.2L12 11.75z" />
+</svg>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "druxt-site",
-  "version": "0.14.2",
+  "version": "0.14.4-dev.20260920043715",
   "description": "Out of the box Decoupled Drupal sites with Druxt.",
   "keywords": [
     "cms",
@@ -27,6 +27,7 @@
     "url": "git+https://github.com/druxt/druxt.js"
   },
   "license": "MIT",
+  "author": "Stuart Clark <stuart@druxtjs.org>",
   "exports": {
     ".": {
       "require": "./dist/druxt-site.ssr.js",
@@ -39,22 +40,23 @@
   "module": "dist/druxt-site.esm.js",
   "files": [
     "dist",
-    "templates"
+    "templates",
+    "icon.svg",
+    "banner.svg"
   ],
   "dependencies": {
-    "drupal-jsonapi-params": "^2.2.0",
-    "druxt": "^0.23.0",
-    "druxt-blocks": "^0.17.3",
-    "druxt-breadcrumb": "^0.17.2",
-    "druxt-entity": "^0.28.1",
-    "druxt-menu": "^0.19.2",
-    "druxt-router": "^0.30.0",
-    "druxt-schema": "^0.11.3",
-    "druxt-views": "^0.22.2",
-    "md5": "^2.3.0"
+    "drupal-jsonapi-params": "^2.3.2",
+    "druxt": "0.24.1-dev.20260920043715",
+    "druxt-blocks": "0.17.4-dev.20260920043715",
+    "druxt-breadcrumb": "0.17.3-dev.20260920043715",
+    "druxt-entity": "0.29.0-dev.20260920043715",
+    "druxt-menu": "0.21.1-dev.20260920043715",
+    "druxt-router": "0.31.1-dev.20260920043715",
+    "druxt-schema": "0.11.4-dev.20260920043715",
+    "druxt-views": "0.22.3-dev.20260920043715"
   },
   "optionalDependencies": {
-    "vue": "^2.7.14",
+    "vue": "^2.7.16",
     "vuex": "^3.6.2"
   },
   "publishConfig": {