druxt-site 0.8.0 → 0.10.1

package/CHANGELOG.md

@@ -1,5 +1,70 @@
 # druxt-site
 
+## 0.10.1
+
+### Patch Changes
+
+- Updated dependencies [9161b38]
+  - druxt-router@0.24.0
+  - druxt-blocks@0.14.1
+  - druxt-breadcrumb@0.13.1
+  - druxt-entity@0.21.2
+  - druxt-views@0.16.1
+
+## 0.10.0
+
+### Minor Changes
+
+- 77ab204: Replaced File Proxy with Druxt proxy
+- e7b1533: Refactored DruxtModule fetch hooks
+
+### Patch Changes
+
+- Updated dependencies [025315a]
+  - druxt-entity@0.21.0
+  - druxt-views@0.16.0
+  - druxt-schema@0.9.0
+  - druxt-blocks@0.14.0
+  - druxt-breadcrumb@0.13.0
+  - druxt@0.13.0
+  - druxt-menu@0.15.0
+  - druxt-router@0.23.0
+
+## 0.9.1
+
+### Patch Changes
+
+- Updated dependencies [4504a2f]
+  - druxt@0.12.0
+  - druxt-router@0.22.0
+  - druxt-menu@0.14.1
+  - druxt-entity@0.20.0
+  - druxt-views@0.15.0
+  - druxt-blocks@0.13.1
+  - druxt-breadcrumb@0.12.1
+  - druxt-schema@0.8.1
+
+## 0.9.0
+
+### Minor Changes
+
+- 8d28c18: Updated storybook integration
+- 97d24d5: Added default theme option and fallback to DruxtSite component
+- 97d24d5: Added default layout
+
+### Patch Changes
+
+- dae345e: Fixed default @nuxtjs/proxy settings
+- Updated dependencies [9d905e8]
+  - druxt-router@0.21.0
+  - druxt-views@0.14.0
+  - druxt-breadcrumb@0.12.0
+  - druxt-blocks@0.13.0
+  - druxt-entity@0.19.0
+  - druxt-menu@0.14.0
+  - druxt-schema@0.8.0
+  - druxt@0.11.0
+
 ## 0.8.0
 
 ### Minor Changes

package/README.md

@@ -11,7 +11,7 @@
 ## Links
 
 - DruxtJS: https://druxtjs.org
-- Documentation: https://site.druxtjs.org
+- Documentation: https://druxtjs.org/modules/site
 - Community Discord server: https://discord.druxtjs.org
 
 ## Install

package/dist/components/DruxtSite.stories.mjs

@@ -0,0 +1,15 @@
+import DruxtSite from './DruxtSite.vue'
+
+export default {
+  title: 'Druxt/Site/DruxtSite',
+  component: DruxtSite
+}
+
+const Template = (args, { argTypes }) => ({
+  components: { DruxtSite },
+  props: Object.keys(argTypes),
+  template: `<DruxtSite v-bind="$props" />`
+})
+
+export const Default = Template.bind({})
+Default.storyName = 'DruxtSite'

package/dist/components/DruxtSite.vue

@@ -55,31 +55,13 @@ export default {
      */
     theme: {
       type: String,
-      required: true
+      default: undefined,
     }
   },
 
-  /**
-   * Nuxt.js fetch method.
-   *
-   * Fetches theme filtered region names from the Block JSON:API resources to be
-   * used to render the `<DruxtBlockRegion />`'s.
-   */
-  async fetch() {
-    // Fetch all available regions.
-    if (!this.value) {
-      const type = 'block--block'
-      this.model = await this.getCollection({
-        type,
-        query: new DrupalJsonApiParams()
-          .addFilter('theme', this.theme)
-          .addFields(type, ['region']),
-      }).then((resources) => resources.data.map((resource) => resource.attributes.region).filter((v, i, s) => s.indexOf(v) === i))
-    }
-
-    // Call DruxtModule fetch hook.
-    await DruxtModule.fetch.call(this)
-  },
+  data: ({ $druxt }) => ({
+    defaultTheme: ($druxt.settings.site || {}).theme,
+  }),
 
   /**
    * Vue.js Computed properties.
@@ -90,11 +72,11 @@ export default {
      *
      * @return {object}
      */
-    props: ({ regions, theme }) =>
+    props: ({ defaultTheme, regions, theme }) =>
       Object.fromEntries(regions.map((region) => [region, {
         key: region,
         name: region,
-        theme,
+        theme: theme || defaultTheme,
       }])),
 
     /**
@@ -118,7 +100,36 @@ export default {
      * @param {object} context - The module component ViewModel.
      * @returns {ComponentOptions}
      */
-    componentOptions: ({ theme }) => [[theme], ['default']],
+    componentOptions: ({ defaultTheme, theme }) => [[theme || defaultTheme], ['default']],
+
+    /**
+     * Fetches theme filtered region names from the Block JSON:API resources to
+     * be used to render the `<DruxtBlockRegion />`'s.
+     */
+    async fetchConfig() {
+      const type = 'block--block'
+
+      // If no default theme is provided, get the first available valid theme.
+      if (!this.defaultTheme) {
+        this.defaultTheme = await this.getCollection({
+          type,
+          query: new DrupalJsonApiParams()
+            .addFields(type, ['theme'])
+            .addFilter('plugin', 'system_main_block')
+            .addPageLimit(1)
+        }).then((resources) => resources.data[0].attributes.theme)
+      }
+
+      // Fetch all available regions.
+      if (!this.value) {
+        this.model = await this.getCollection({
+          type,
+          query: new DrupalJsonApiParams()
+            .addFilter('theme', this.theme || this.defaultTheme)
+            .addFields(type, ['region']),
+        }).then((resources) => resources.data.map((resource) => resource.attributes.region).filter((v, i, s) => s.indexOf(v) === i))
+      }
+    },
 
     /**
      * Provides propsData for the DruxtWrapper.
@@ -126,7 +137,7 @@ export default {
      * @param {object} context - The module component ViewModel.
      * @returns {PropsData}
      */
-    propsData: ({ props, regions, theme }) => ({ props, regions, theme }),
+    propsData: ({ defaultTheme, props, regions, theme }) => ({ props, regions, theme: theme || defaultTheme }),
 
     /**
      * Provides the scoped slots object for the Module render function.

package/dist/druxt-site.esm.js

@@ -1,36 +1,73 @@
-import { join } from 'path';
+import { existsSync } from 'fs';
+import { resolve, join } from 'path';
+import { DrupalJsonApiParams } from 'drupal-jsonapi-params';
+import { DruxtClient } from 'druxt';
 
-const DruxtSiteNuxtModule = function() {
-  if (typeof this.options === "undefined" || !this.options.druxt) {
-    throw new TypeError("Druxt settings missing.");
-  }
+const titleFn = (parts) => parts.map((part) => part.charAt(0).toUpperCase() + part.slice(1).replace(/_/g, " ")).join("/");
+async function DruxtSiteStorybook({ options, stories }) {
+  const { addTemplate } = this;
+  const druxt = new DruxtClient(options.baseUrl, { ...options, proxy: { api: false } });
+  const type = "block--block";
+  const query = new DrupalJsonApiParams().addFields(type, ["theme"]);
+  const resources = (await druxt.getCollectionAll(type, query)).map((collection) => collection.data).flat();
+  const themes = [...new Set(resources.map((o) => o.attributes.theme))].sort();
+  const siteStories = themes.map((theme) => {
+    addTemplate({
+      src: resolve(__dirname, "../templates/druxt-site.stories.js"),
+      fileName: `stories/druxt-site.${theme}.stories.js`,
+      options: {
+        theme,
+        title: titleFn(["Druxt", "Site", "Themes", theme])
+      }
+    });
+    return resolve(this.options.buildDir, `./stories/druxt-site.${theme}.stories.js`);
+  });
+  stories.push.apply(stories, siteStories);
+}
+
+const DruxtSiteNuxtModule = async function(moduleOptions = {}) {
+  const options = {
+    baseUrl: moduleOptions.baseUrl,
+    ...(this.options || {}).druxt || {},
+    menu: {
+      jsonApiMenuItems: true,
+      ...((this.options || {}).druxt || {}).menu
+    },
+    proxy: {
+      api: false,
+      files: true,
+      ...((this.options || {}).druxt || {}).proxy
+    },
+    site: {
+      layout: true,
+      ...((this.options || {}).druxt || {}).site,
+      ...moduleOptions
+    }
+  };
+  this.options.druxt = options;
   this.nuxt.hook("components:dirs", (dirs) => {
     dirs.push({ path: join(__dirname, "components") });
   });
-  const modules = [
-    "@nuxtjs/proxy",
+  const druxtModules = [
     "druxt",
     "druxt-blocks",
     "druxt-breadcrumb",
     "druxt-entity",
     "druxt-menu",
-    "druxt-router",
+    "druxt-router/nuxt",
     "druxt-schema",
     "druxt-views"
   ];
-  for (const key in modules) {
-    this.addModule(modules[key]);
+  for (const module of druxtModules) {
+    this.addModule(module);
   }
-  if (typeof this.options.proxy === "undefined") {
-    this.options.proxy = [this.options.druxt.baseUrl + "/sites/default/files"];
+  if (!await existsSync(resolve(this.options.srcDir, this.options.dir.layouts)) && options.site.layout) {
+    this.addLayout(resolve(__dirname, "./layouts/default.vue"), "default");
   }
-  if (typeof ((this.options.druxt || {}).menu || {}).jsonApiMenuItems === "undefined") {
-    this.options.druxt.menu = {
-      ...this.options.druxt.menu,
-      ...{ jsonApiMenuItems: true }
-    };
-  }
-  this.options.store = true;
+  this.nuxt.hook("storybook:config", async ({ stories }) => {
+    stories.push("druxt-site/dist/components/*.stories.mjs");
+    await DruxtSiteStorybook.call(this, { options, stories });
+  });
 };
 DruxtSiteNuxtModule.meta = require("../package.json");
 

package/dist/druxt-site.ssr.js

@@ -2,39 +2,76 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+const fs = require('fs');
 const path = require('path');
+const drupalJsonapiParams = require('drupal-jsonapi-params');
+const druxt = require('druxt');
 
-const DruxtSiteNuxtModule = function() {
-  if (typeof this.options === "undefined" || !this.options.druxt) {
-    throw new TypeError("Druxt settings missing.");
-  }
+const titleFn = (parts) => parts.map((part) => part.charAt(0).toUpperCase() + part.slice(1).replace(/_/g, " ")).join("/");
+async function DruxtSiteStorybook({ options, stories }) {
+  const { addTemplate } = this;
+  const druxt$1 = new druxt.DruxtClient(options.baseUrl, { ...options, proxy: { api: false } });
+  const type = "block--block";
+  const query = new drupalJsonapiParams.DrupalJsonApiParams().addFields(type, ["theme"]);
+  const resources = (await druxt$1.getCollectionAll(type, query)).map((collection) => collection.data).flat();
+  const themes = [...new Set(resources.map((o) => o.attributes.theme))].sort();
+  const siteStories = themes.map((theme) => {
+    addTemplate({
+      src: path.resolve(__dirname, "../templates/druxt-site.stories.js"),
+      fileName: `stories/druxt-site.${theme}.stories.js`,
+      options: {
+        theme,
+        title: titleFn(["Druxt", "Site", "Themes", theme])
+      }
+    });
+    return path.resolve(this.options.buildDir, `./stories/druxt-site.${theme}.stories.js`);
+  });
+  stories.push.apply(stories, siteStories);
+}
+
+const DruxtSiteNuxtModule = async function(moduleOptions = {}) {
+  const options = {
+    baseUrl: moduleOptions.baseUrl,
+    ...(this.options || {}).druxt || {},
+    menu: {
+      jsonApiMenuItems: true,
+      ...((this.options || {}).druxt || {}).menu
+    },
+    proxy: {
+      api: false,
+      files: true,
+      ...((this.options || {}).druxt || {}).proxy
+    },
+    site: {
+      layout: true,
+      ...((this.options || {}).druxt || {}).site,
+      ...moduleOptions
+    }
+  };
+  this.options.druxt = options;
   this.nuxt.hook("components:dirs", (dirs) => {
     dirs.push({ path: path.join(__dirname, "components") });
   });
-  const modules = [
-    "@nuxtjs/proxy",
+  const druxtModules = [
     "druxt",
     "druxt-blocks",
     "druxt-breadcrumb",
     "druxt-entity",
     "druxt-menu",
-    "druxt-router",
+    "druxt-router/nuxt",
     "druxt-schema",
     "druxt-views"
   ];
-  for (const key in modules) {
-    this.addModule(modules[key]);
+  for (const module of druxtModules) {
+    this.addModule(module);
   }
-  if (typeof this.options.proxy === "undefined") {
-    this.options.proxy = [this.options.druxt.baseUrl + "/sites/default/files"];
+  if (!await fs.existsSync(path.resolve(this.options.srcDir, this.options.dir.layouts)) && options.site.layout) {
+    this.addLayout(path.resolve(__dirname, "./layouts/default.vue"), "default");
   }
-  if (typeof ((this.options.druxt || {}).menu || {}).jsonApiMenuItems === "undefined") {
-    this.options.druxt.menu = {
-      ...this.options.druxt.menu,
-      ...{ jsonApiMenuItems: true }
-    };
-  }
-  this.options.store = true;
+  this.nuxt.hook("storybook:config", async ({ stories }) => {
+    stories.push("druxt-site/dist/components/*.stories.mjs");
+    await DruxtSiteStorybook.call(this, { options, stories });
+  });
 };
 DruxtSiteNuxtModule.meta = require("../package.json");
 

package/dist/layouts/default.vue

@@ -0,0 +1,3 @@
+<template>
+  <DruxtSite />
+</template>

package/package.json

@@ -1,36 +1,56 @@
 {
   "name": "druxt-site",
-  "version": "0.8.0",
+  "version": "0.10.1",
   "description": "Out of the box Decoupled Drupal sites with Druxt.",
   "keywords": [
+    "cms",
+    "decoupled",
     "drupal",
     "druxt",
+    "druxtjs",
+    "headless",
     "jsonapi",
-    "nuxt"
+    "json:api",
+    "nuxt",
+    "nuxtjs",
+    "module",
+    "storybook",
+    "site",
+    "vue"
   ],
+  "homepage": "https://druxtjs.org",
+  "bugs": {
+    "url": "https://github.com/druxt/druxt.js/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/druxt/druxt.js"
+  },
+  "license": "MIT",
   "exports": {
     ".": {
       "require": "./dist/druxt-site.ssr.js",
       "import": "./dist/druxt-site.esm.js"
     },
-    "./components/*": "./dist/components/*"
+    "./components/*": "./dist/components/*",
+    "./layouts/*": "./dist/layouts/*"
   },
   "main": "dist/druxt-site.ssr.js",
   "module": "dist/druxt-site.esm.js",
   "files": [
     "dist",
-    "nuxt"
+    "templates"
   ],
   "dependencies": {
-    "@nuxtjs/proxy": "^2.1.0",
-    "druxt": "^0.10.0",
-    "druxt-blocks": "^0.12.0",
-    "druxt-breadcrumb": "^0.11.0",
-    "druxt-entity": "^0.18.0",
-    "druxt-menu": "^0.13.0",
-    "druxt-router": "^0.20.0",
-    "druxt-schema": "^0.7.10",
-    "druxt-views": "^0.13.0",
+    "drupal-jsonapi-params": "^1.2.2",
+    "druxt": "^0.13.0",
+    "druxt-blocks": "^0.14.1",
+    "druxt-breadcrumb": "^0.13.1",
+    "druxt-entity": "^0.21.2",
+    "druxt-menu": "^0.15.0",
+    "druxt-router": "^0.24.0",
+    "druxt-schema": "^0.9.0",
+    "druxt-views": "^0.16.1",
     "md5": "^2.2.1"
   },
   "optionalDependencies": {

package/templates/druxt-site.stories.js

@@ -0,0 +1,33 @@
+import DruxtSite from 'druxt-site/dist/components/DruxtSite.vue'
+
+export default {
+  title: '<%= options.title %>',
+  component: DruxtSite,
+  parameters: {
+    docs: {
+      description: {
+        component: ' '
+      },
+    },
+  },
+}
+
+const Template = (args, { argTypes }) => {
+  return {
+    props: Object.keys(argTypes),
+    template: '<DruxtSite v-bind="$props" />',
+  }
+}
+
+export const Default = Template.bind({})
+Default.args = {
+  theme: '<%= options.theme %>',
+}
+Default.storyName = '<%= options.theme.charAt(0).toUpperCase() + options.theme.slice(1) %>'
+Default.parameters = {
+  docs: {
+    source: {
+      code: '<DruxtSite theme="<%= options.theme %>" />'
+    }
+  }
+}