gatsby-theme-q3 3.1.0 → 3.2.1

package/CHANGELOG.md

@@ -3,58 +3,97 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-# [3.1.0](https://github.com/3merge/q/compare/v3.0.4...v3.1.0) (2022-01-31)
-
-**Note:** Version bump only for package gatsby-theme-q3
-
-
-
-
-
-## [3.0.4](https://github.com/3merge/q/compare/v3.0.3...v3.0.4) (2022-01-29)
-
-**Note:** Version bump only for package gatsby-theme-q3
-
-
-
-
-
-## [3.0.3](https://github.com/3merge/q/compare/v3.0.2...v3.0.3) (2022-01-29)
+## [3.2.1](https://github.com/3merge/q/compare/v3.2.0...v3.2.1) (2022-02-09)
 
 
 ### Bug Fixes
 
-* major release bugs ([#372](https://github.com/3merge/q/issues/372)) ([d3e0681](https://github.com/3merge/q/commit/d3e0681a8d9ce61558b3aeaabe94ce8bc326dfa7))
+* misc domain issues ([17cb74b](https://github.com/3merge/q/commit/17cb74b927721f11b5fcd8f8a9a1a28a86867048))
 
 
 
 
 
-## [3.0.2](https://github.com/3merge/q/compare/v3.0.1...v3.0.2) (2022-01-28)
-
-**Note:** Version bump only for package gatsby-theme-q3
+# [3.2.0](https://github.com/3merge/q/compare/v3.1.5...v3.2.0) (2022-02-09)
 
 
+### Features
 
-
-
-## [3.0.1](https://github.com/3merge/q/compare/v3.0.0...v3.0.1) (2022-01-28)
-
-**Note:** Version bump only for package gatsby-theme-q3
-
-
-
-
-
-# [3.0.0](https://github.com/3merge/q/compare/v2.3.13...v3.0.0) (2022-01-28)
-
-**Note:** Version bump only for package gatsby-theme-q3
+* text locale editor ([#377](https://github.com/3merge/q/issues/377)) ([e827875](https://github.com/3merge/q/commit/e8278757be7505554376c1d1d78d9b8900fdf35e))
 
 
 
 
 
 
+## [3.1.5](https://github.com/3merge/q/compare/v3.1.4...v3.1.5) (2022-02-01)
+
+**Note:** Version bump only for package gatsby-theme-q3
+
+
+
+
+
+## [3.1.4](https://github.com/3merge/q/compare/v3.1.3...v3.1.4) (2022-02-01)
+
+**Note:** Version bump only for package gatsby-theme-q3
+
+
+
+
+
+# [3.1.0](https://github.com/3merge/q/compare/v3.0.4...v3.1.0) (2022-01-31)
+
+**Note:** Version bump only for package gatsby-theme-q3
+
+
+
+
+
+## [3.0.4](https://github.com/3merge/q/compare/v3.0.3...v3.0.4) (2022-01-29)
+
+**Note:** Version bump only for package gatsby-theme-q3
+
+
+
+
+
+## [3.0.3](https://github.com/3merge/q/compare/v3.0.2...v3.0.3) (2022-01-29)
+
+
+### Bug Fixes
+
+* major release bugs ([#372](https://github.com/3merge/q/issues/372)) ([d3e0681](https://github.com/3merge/q/commit/d3e0681a8d9ce61558b3aeaabe94ce8bc326dfa7))
+
+
+
+
+
+## [3.0.2](https://github.com/3merge/q/compare/v3.0.1...v3.0.2) (2022-01-28)
+
+**Note:** Version bump only for package gatsby-theme-q3
+
+
+
+
+
+## [3.0.1](https://github.com/3merge/q/compare/v3.0.0...v3.0.1) (2022-01-28)
+
+**Note:** Version bump only for package gatsby-theme-q3
+
+
+
+
+
+# [3.0.0](https://github.com/3merge/q/compare/v2.3.13...v3.0.0) (2022-01-28)
+
+**Note:** Version bump only for package gatsby-theme-q3
+
+
+
+
+
+
 ## [2.3.11](https://github.com/3merge/q/compare/v2.3.10...v2.3.11) (2022-01-18)
 
 **Note:** Version bump only for package gatsby-theme-q3

package/gatsby-browser.js

@@ -1,4 +1,33 @@
+import axios from 'axios';
+import { last, size } from 'lodash';
+import { getDomain } from 'q3-admin';
+import { browser } from 'q3-ui-helpers';
+
 export {
   wrapPageElement,
   wrapRootElement,
 } from './gatsby-ssr';
+
+export const onClientEntry = async () => {
+  if (!browser.isBrowserReady()) return;
+
+  // set api default root
+  axios.defaults.baseURL =
+    process.env.GATSBY_APP_BASE_URL ||
+    'http://localhost:9000';
+
+  // set language default
+  axios.defaults.headers['Content-Language'] =
+    window.localStorage.getItem('q3-locale') || 'en';
+
+  // set tenant default
+  const { host } = window.location;
+  const parts = String(host).split('.').reverse();
+
+  if (size(parts) > 1)
+    axios.defaults.headers['X-Session-Tenant'] =
+      last(parts);
+
+  // calls Q3 API
+  await getDomain();
+};

package/gatsby-config.js

@@ -4,16 +4,7 @@ require('dotenv').config();
 const genKey = (url) =>
   String(url).includes('netlify') ? 'disallow' : 'allow';
 
-module.exports = ({
-  contentfulSpaceID,
-  contentfulAccessToken,
-  siteUrl,
-  title,
-  brandingColor,
-  icon,
-  netlify,
-  ...options
-}) => {
+module.exports = (options) => {
   const plugins = [
     {
       resolve: 'gatsby-theme-q3-mui',
@@ -50,51 +41,20 @@ module.exports = ({
         },
       },
     },
-  ];
-
-  if (contentfulSpaceID) {
-    if (!contentfulAccessToken)
-      throw new Error('Contentful access token missing');
-
-    plugins.push({
-      resolve: 'gatsby-source-contentful',
-      options: {
-        spaceId: contentfulSpaceID,
-        accessToken: contentfulAccessToken,
-      },
-    });
-  }
-
-  if (netlify)
-    plugins.push({
+    {
       resolve: 'gatsby-plugin-netlify',
       options: {
         generateMatchPathRewrites: true,
       },
-    });
-
-  if (title && brandingColor)
-    plugins.push({
-      resolve: 'gatsby-plugin-manifest',
-      options: {
-        short_name: title,
-        start_url: '/',
-        background_color: '#FFF',
-        theme_color: brandingColor,
-        display: 'standalone',
-        name: title,
-        icon,
-      },
-    });
-
-  if (siteUrl)
-    plugins.push({
+    },
+    {
       resolve: 'gatsby-plugin-canonical-urls',
       options: {
         stripQueryString: true,
-        siteUrl,
+        siteUrl: process.env.URL,
       },
-    });
+    },
+  ];
 
   return {
     plugins,

package/gatsby-node.js

@@ -70,7 +70,6 @@ exports.onCreatePage = async ({ page, actions }) => {
     createPage({
       ...page,
       context: {
-        contentful_id: 'APP',
         to: '/app',
       },
     });

package/lib/components/PageWrapper.js

@@ -13,21 +13,12 @@ var _components = require("q3-admin/lib/components");
 
 var _SearchEngine = _interopRequireDefault(require("./SearchEngine"));
 
-var _useLocale = _interopRequireDefault(require("./useLocale"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-// cannot conditionally call hooks otherwise
-const Locale = () => {
-  (0, _useLocale.default)();
-  return null;
-};
-
 const PageWrapper = ({
   children,
-  includeLoader,
-  includeLocale
-}) => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_SearchEngine.default, null), includeLoader && /*#__PURE__*/_react.default.createElement(_components.Loader, null), includeLocale && /*#__PURE__*/_react.default.createElement(Locale, null), children);
+  includeLoader
+}) => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_SearchEngine.default, null), includeLoader && /*#__PURE__*/_react.default.createElement(_components.Loader, null), children);
 
 PageWrapper.defaultProps = {
   children: null,

package/lib/components/SearchEngine.js

@@ -3,18 +3,72 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.getStartUrl = exports.generateMetaTitleOptions = exports.generateMetaDescriptionOptions = exports.generateManifest = exports.generateIcons = exports.generateBrand = exports.default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
+var _lodash = require("lodash");
+
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _reactHelmet = require("react-helmet");
 
+var _q3UiHelpers = require("q3-ui-helpers");
+
 var _useSiteMetaData = _interopRequireDefault(require("./useSiteMetaData"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+const withContent = output => content => content && (0, _lodash.isFunction)(output) ? output(content) : [];
+
+const getStartUrl = () => _q3UiHelpers.browser.isBrowserReady() ? (0, _lodash.get)(window, 'location.host') : '';
+
+exports.getStartUrl = getStartUrl;
+const generateMetaDescriptionOptions = withContent(content => [{
+  name: 'description',
+  content
+}, {
+  property: 'og:description',
+  content
+}, {
+  name: 'twitter:description',
+  content
+}]);
+exports.generateMetaDescriptionOptions = generateMetaDescriptionOptions;
+const generateMetaTitleOptions = withContent(content => [{
+  property: 'og:title',
+  content
+}, {
+  name: 'twitter:title',
+  content
+}]);
+exports.generateMetaTitleOptions = generateMetaTitleOptions;
+
+const generateBrand = xs => xs ? `%s | ${xs}` : undefined;
+
+exports.generateBrand = generateBrand;
+
+const generateIcons = (site = {}) => site !== null && site !== void 0 && site.favicon ? [{
+  src: site.favicon,
+  sizes: '512x512',
+  type: 'image/png'
+}] : [];
+
+exports.generateIcons = generateIcons;
+
+const generateManifest = (site = {}) => ({
+  background_color: site.color,
+  description: site.description,
+  display: 'fullscreen',
+  icons: generateIcons(site),
+  name: site.title,
+  start_url: getStartUrl(),
+  short_name: site.brand,
+  theme_color: site.color
+});
+
+exports.generateManifest = generateManifest;
+
 const SEO = ({
   description,
   lang,
@@ -23,35 +77,28 @@ const SEO = ({
 }) => {
   const site = (0, _useSiteMetaData.default)();
   const metaDescription = description || site.description;
+  const metaTitle = title || site.title;
+  const manifestData = generateManifest(site);
   return /*#__PURE__*/_react.default.createElement(_reactHelmet.Helmet, {
     htmlAttributes: {
       lang
     },
-    title: title || site.title,
-    titleTemplate: `%s | ${site.brand}`,
-    meta: [{
-      name: 'description',
-      content: metaDescription
-    }, {
-      property: 'og:title',
-      content: title
-    }, {
-      property: 'og:description',
-      content: metaDescription
-    }, {
+    title: metaTitle,
+    titleTemplate: generateBrand(site.brand),
+    meta: [...generateMetaTitleOptions(metaTitle), ...generateMetaDescriptionOptions(metaDescription), {
       property: 'og:type',
       content: 'website'
     }, {
       name: 'twitter:card',
       content: 'summary'
-    }, {
-      name: 'twitter:title',
-      content: title
-    }, {
-      name: 'twitter:description',
-      content: metaDescription
     }].concat(meta)
-  });
+  }, (0, _lodash.isObject)(manifestData) ? /*#__PURE__*/_react.default.createElement("link", {
+    rel: "manifest",
+    href: `data:application/manifest+json,${encodeURIComponent(JSON.stringify(manifestData))}`
+  }) : null, /*#__PURE__*/_react.default.createElement("link", {
+    rel: "icon",
+    href: site.favicon
+  }));
 };
 
 SEO.defaultProps = {

package/lib/components/Wrapper.js

@@ -7,41 +7,19 @@ exports.default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _axios = _interopRequireDefault(require("axios"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _q3UiPermissions = _interopRequireDefault(require("q3-ui-permissions"));
 
-var _LocaleBundles = _interopRequireDefault(require("./LocaleBundles"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 /* eslint-disable import/no-extraneous-dependencies */
-const setBaseUrlForRest = (baseURL = process.env.GATSBY_APP_BASE_URL || 'http://localhost:9000') => {
-  _axios.default.defaults.baseURL = baseURL;
-  return _axios.default.defaults;
-};
-
 const Wrapper = ({
-  baseURL,
-  children,
-  locale
-}) => {
-  setBaseUrlForRest(baseURL);
-  return /*#__PURE__*/_react.default.createElement(_LocaleBundles.default, {
-    locale: locale
-  }, /*#__PURE__*/_react.default.createElement(_q3UiPermissions.default, null, children));
-};
+  children
+}) => /*#__PURE__*/_react.default.createElement(_q3UiPermissions.default, null, children);
 
-Wrapper.defaultProps = {
-  baseURL: undefined
-};
 Wrapper.propTypes = {
-  baseURL: _propTypes.default.string,
-  children: _propTypes.default.node.isRequired,
-  // eslint-disable-next-line
-  locale: _propTypes.default.object.isRequired
+  children: _propTypes.default.node.isRequired
 };
 var _default = Wrapper;
 exports.default = _default;

package/lib/components/__tests__/SearchEngine.test.js

@@ -0,0 +1,41 @@
+"use strict";
+
+var _SearchEngine = require("../SearchEngine");
+
+jest.mock('q3-ui-locale', () => ({
+  browser: {
+    isBrowserReady: jest.fn()
+  }
+}));
+const host = 'https://google.ca';
+beforeEach(() => {
+  Object.defineProperty(window, 'location', {
+    value: {
+      host
+    }
+  });
+});
+describe('SearchEngine', () => {
+  it('should not render descriptions without content', () => {
+    expect((0, _SearchEngine.generateMetaDescriptionOptions)().length).toBe(0);
+  });
+  it('should render descriptions with content', () => {
+    expect((0, _SearchEngine.generateMetaDescriptionOptions)('foo').length).toBeGreaterThanOrEqual(1);
+  });
+  it('should return host', () => {
+    expect((0, _SearchEngine.getStartUrl)()).toMatch(host);
+  });
+  it('should render favicon', () => {
+    expect((0, _SearchEngine.generateIcons)({
+      favicon: host
+    })).toHaveLength(1);
+  });
+  it('should not render favicon', () => {
+    expect((0, _SearchEngine.generateIcons)({
+      favicon: undefined
+    })).toHaveLength(0);
+  });
+  it('should include template literals', () => {
+    expect((0, _SearchEngine.generateBrand)('3merge')).toMatch('%s | 3merge');
+  });
+});

package/lib/components/useSiteMetaData.js

@@ -9,19 +9,20 @@ var _lodash = require("lodash");
 
 var _gatsby = require("gatsby");
 
-var _default = () => (0, _lodash.get)((0, _gatsby.useStaticQuery)((0, _gatsby.graphql)`
-      query {
-        site {
-          siteMetadata {
-            appDirectory
-            brand
-            description
-            favicon
-            logo
-            title
+var _useRunTime = _interopRequireDefault(require("gatsby-theme-q3-mui/src/components/useRunTime"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _default = () => (0, _lodash.merge)((0, _lodash.get)((0, _gatsby.useStaticQuery)((0, _gatsby.graphql)`
+        query {
+          site {
+            siteMetadata {
+              appDirectory
+              description
+              title
+            }
           }
         }
-      }
-    `), 'site.siteMetadata', {});
+      `), 'site.siteMetadata', {}), (0, _useRunTime.default)());
 
 exports.default = _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gatsby-theme-q3",
-  "version": "3.1.0",
+  "version": "3.2.1",
   "main": "index.js",
   "license": "MIT",
   "peerDependencies": {
@@ -23,24 +23,24 @@
     "gatsby-image": "^3.11.0",
     "gatsby-plugin-canonical-urls": "^4.2.0",
     "gatsby-plugin-force-trailing-slashes": "^1.0.5",
-    "gatsby-plugin-manifest": "^4.2.0",
     "gatsby-plugin-material-ui": "^3.0.1",
     "gatsby-plugin-netlify": "^3.14.0",
     "gatsby-plugin-robots-txt": "^1.6.14",
     "gatsby-plugin-sharp": "^4.2.0",
     "gatsby-plugin-sitemap": "^5.2.0",
-    "gatsby-source-contentful": "^7.0.0",
-    "gatsby-theme-q3-mui": "^3.1.0",
+    "gatsby-theme-q3-mui": "^3.2.1",
     "gatsby-transformer-sharp": "^4.2.0",
     "lodash": "^4.17.20",
     "process": "^0.11.10",
     "prop-types": "^15.7.2",
-    "q3-ui-locale": "^3.1.0",
+    "q3-ui-helpers": "^3.2.0",
+    "q3-ui-locale": "^3.2.1",
     "query-string": "^7.0.1",
+    "react-helmet": "^6.1.0",
     "react-share": "^4.3.1",
     "slugify": "^1.6.3",
     "transform-loader": "^0.2.4",
     "yarn": "^1.22.17"
   },
-  "gitHead": "346448a8fd596cf2453ed9dcb48fb6dc4f9b8450"
+  "gitHead": "b9ee55eb96e7d61f86f9d5d091d8a9d770c720cc"
 }

package/src/components/PageWrapper.jsx

@@ -2,23 +2,11 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Loader } from 'q3-admin/lib/components';
 import SearchEngine from './SearchEngine';
-import useLocale from './useLocale';
 
-// cannot conditionally call hooks otherwise
-const Locale = () => {
-  useLocale();
-  return null;
-};
-
-const PageWrapper = ({
-  children,
-  includeLoader,
-  includeLocale,
-}) => (
+const PageWrapper = ({ children, includeLoader }) => (
   <>
     <SearchEngine />
     {includeLoader && <Loader />}
-    {includeLocale && <Locale />}
     {children}
   </>
 );