gatsby-theme-q3 3.1.4 → 3.2.2

package/CHANGELOG.md

@@ -3,7 +3,7 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [3.1.4](https://github.com/3merge/q/compare/v3.1.3...v3.1.4) (2022-02-01)
+## [3.2.2](https://github.com/3merge/q/compare/v3.2.1...v3.2.2) (2022-02-10)
 
 **Note:** Version bump only for package gatsby-theme-q3
 
@@ -11,58 +11,97 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 
 
-# [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/PublicTemplate.js

@@ -9,7 +9,11 @@ var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _components = require("q3-admin/lib/components");
+var _core = require("@material-ui/core");
+
+var _gatsby = require("gatsby");
+
+var _q3UiLocale = require("q3-ui-locale");
 
 var _AdminPublicGateway = _interopRequireDefault(require("./AdminPublicGateway"));
 
@@ -17,18 +21,133 @@ var _useSiteMetaData = _interopRequireDefault(require("./useSiteMetaData"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+const useStyle = (0, _core.makeStyles)(theme => ({
+  logo: {
+    height: 95,
+    width: 180,
+    display: 'block',
+    '& img': {
+      objectFit: 'contain',
+      height: '100%',
+      width: '100%'
+    }
+  },
+  container: {
+    maxWidth: '85vw',
+    width: 850,
+    [theme.breakpoints.down('md')]: {
+      width: '100%'
+    },
+    [theme.breakpoints.down('sm')]: {
+      width: 'auto'
+    }
+  },
+  photo: ({
+    photo
+  }) => ({
+    backgroundColor: theme.palette.secondary.light,
+    backgroundImage: `url(${photo})`,
+    backgroundSize: 'contain',
+    backgroundPosition: 'center',
+    backgroundRepeat: 'no-repeat',
+    width: '100%',
+    height: '100%'
+  })
+}));
+
+const Copyright = () => {
+  const {
+    brand
+  } = (0, _useSiteMetaData.default)();
+  return brand ? /*#__PURE__*/_react.default.createElement(_core.Box, {
+    display: "inline-block",
+    mx: 1
+  }, "\xA9", new Date().getFullYear(), " ", brand) : null;
+}; // eslint-disable-next-line
+
+
+const TextLink = ({
+  href,
+  text
+}) => {
+  const {
+    t
+  } = (0, _q3UiLocale.useTranslation)('labels');
+  return href ? /*#__PURE__*/_react.default.createElement(_core.Box, {
+    display: "inline-block",
+    mx: 1
+  }, /*#__PURE__*/_react.default.createElement(_core.Link, {
+    href: href,
+    target: "_blank"
+  }, t(text)), ' ') : null;
+};
+
 const PublicTemplate = ({
   children,
   ...rest
 }) => {
   const {
     brand,
-    logo
+    cancellation,
+    logo,
+    terms,
+    privacy,
+    photo
   } = (0, _useSiteMetaData.default)();
-  return /*#__PURE__*/_react.default.createElement(_AdminPublicGateway.default, rest, /*#__PURE__*/_react.default.createElement(_components.Public, {
-    companyName: brand,
-    logo: logo
-  }, children));
+  const cls = useStyle({
+    photo
+  });
+  return /*#__PURE__*/_react.default.createElement(_AdminPublicGateway.default, rest, /*#__PURE__*/_react.default.createElement(_core.Box, {
+    alignItems: "center",
+    component: "article",
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "center",
+    width: "100%"
+  }, /*#__PURE__*/_react.default.createElement(_core.Box, {
+    component: "header",
+    mt: "2vh",
+    mb: 2,
+    textAlign: "center"
+  }, /*#__PURE__*/_react.default.createElement(_gatsby.Link, {
+    to: "/",
+    className: cls.logo
+  }, /*#__PURE__*/_react.default.createElement("img", {
+    alt: brand,
+    src: logo
+  }))), /*#__PURE__*/_react.default.createElement(_core.Paper, {
+    className: cls.container
+  }, /*#__PURE__*/_react.default.createElement(_core.Grid, {
+    container: true,
+    spacing: 1
+  }, /*#__PURE__*/_react.default.createElement(_core.Hidden, {
+    smDown: true
+  }, /*#__PURE__*/_react.default.createElement(_core.Grid, {
+    item: true,
+    xs: 6
+  }, /*#__PURE__*/_react.default.createElement(_core.Box, {
+    className: cls.photo
+  }))), /*#__PURE__*/_react.default.createElement(_core.Grid, {
+    item: true,
+    md: 6,
+    xs: 12
+  }, /*#__PURE__*/_react.default.createElement(_core.Box, {
+    p: 2
+  }, children)))), /*#__PURE__*/_react.default.createElement(_core.Box, {
+    maxWidth: "75vw",
+    component: "footer",
+    mt: 3,
+    textAlign: "center"
+  }, /*#__PURE__*/_react.default.createElement("small", null, /*#__PURE__*/_react.default.createElement(Copyright, null), /*#__PURE__*/_react.default.createElement(TextLink, {
+    href: terms,
+    text: "termsAndConditions"
+  }), /*#__PURE__*/_react.default.createElement(TextLink, {
+    href: privacy,
+    text: "privacyPolicy"
+  }), /*#__PURE__*/_react.default.createElement(TextLink, {
+    href: cancellation,
+    text: "cancellationPolicy"
+  })))));
 };
 
 PublicTemplate.defaultProps = {

package/lib/components/PublicTemplateBackground.js

@@ -0,0 +1,120 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _core = require("@material-ui/core");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const PublicTemplateBackground = () => {
+  const theme = (0, _core.useTheme)();
+  return /*#__PURE__*/_react.default.createElement(_core.Box, {
+    position: "fixed",
+    top: 0,
+    right: 0,
+    left: 0,
+    bottom: 0,
+    overflow: "hidden"
+  }, /*#__PURE__*/_react.default.createElement(_core.Box, {
+    position: "fixed",
+    top: 0,
+    right: 0,
+    left: 0,
+    bottom: 0,
+    style: {
+      backgroundImage: 'url(https://images.unsplash.com/photo-1523293836414-f04e712e1f3b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=703&q=80)',
+      opacity: 0.1
+    }
+  }), /*#__PURE__*/_react.default.createElement(_core.Box, {
+    position: "fixed",
+    top: 0,
+    right: 0,
+    left: 0,
+    bottom: 0,
+    style: {
+      background: `linear-gradient(90deg, ${theme.palette.secondary.dark} 0%, ${theme.palette.secondary.light} 35%, ${theme.palette.secondary.main} 100%)`,
+      opacity: 0.1
+    }
+  }), /*#__PURE__*/_react.default.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    style: {
+      opacity: 0.15,
+      minHeight: '100vh',
+      minWidth: '100vw'
+    }
+  }, /*#__PURE__*/_react.default.createElement("defs", null, /*#__PURE__*/_react.default.createElement("linearGradient", {
+    id: "a",
+    x1: "0",
+    x2: "0",
+    y1: "1",
+    y2: "0"
+  }, /*#__PURE__*/_react.default.createElement("stop", {
+    offset: "0",
+    stopColor: theme.palette.background.muted
+  }), /*#__PURE__*/_react.default.createElement("stop", {
+    offset: "1",
+    stopColor: theme.palette.secondary.dark
+  })), /*#__PURE__*/_react.default.createElement("linearGradient", {
+    id: "b",
+    x1: "0",
+    x2: "0",
+    y1: "0",
+    y2: "1"
+  }, /*#__PURE__*/_react.default.createElement("stop", {
+    offset: "0",
+    stopColor: theme.palette.secondary.light
+  }), /*#__PURE__*/_react.default.createElement("stop", {
+    offset: "1",
+    stopColor: theme.palette.secondary.main
+  }))), /*#__PURE__*/_react.default.createElement("g", {
+    fill: theme.palette.background.muted,
+    fillOpacity: "0",
+    strokeMiterlimit: "10"
+  }, /*#__PURE__*/_react.default.createElement("g", {
+    stroke: "url(#a)",
+    strokeWidth: "2"
+  }, /*#__PURE__*/_react.default.createElement("path", {
+    transform: "translate(0 0)",
+    d: "M1409 581 1450.35 511 1490 581z"
+  }), /*#__PURE__*/_react.default.createElement("circle", {
+    strokeWidth: "4",
+    transform: "rotate(0 800 450)",
+    cx: "500",
+    cy: "100",
+    r: "40"
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    transform: "translate(0 0)",
+    d: "M400.86 735.5h-83.73c0-23.12 18.74-41.87 41.87-41.87S400.86 712.38 400.86 735.5z"
+  })), /*#__PURE__*/_react.default.createElement("g", {
+    stroke: "url(#b)",
+    strokeWidth: "4"
+  }, /*#__PURE__*/_react.default.createElement("path", {
+    transform: "translate(0 0)",
+    d: "M149.8 345.2 118.4 389.8 149.8 434.4 181.2 389.8z"
+  }), /*#__PURE__*/_react.default.createElement("rect", {
+    strokeWidth: "8",
+    transform: "rotate(0 1089 759)",
+    x: "1039",
+    y: "709",
+    width: "100",
+    height: "100"
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    transform: "rotate(0 1400 132)",
+    d: "M1426.8 132.4 1405.7 168.8 1363.7 168.8 1342.7 132.4 1363.7 96 1405.7 96z"
+  })))), /*#__PURE__*/_react.default.createElement(_core.Box, {
+    position: "fixed",
+    bottom: "1rem",
+    right: "1rem",
+    zIndex: 10
+  }, /*#__PURE__*/_react.default.createElement("small", null, "Texture made with", ' ', /*#__PURE__*/_react.default.createElement(_core.Link, {
+    href: "https://www.design.svgbackgrounds.com/"
+  }, "SVGBackgrounds.com"))));
+};
+
+var _default = PublicTemplateBackground;
+exports.default = _default;

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 = {