gatsby-theme-q3 3.1.0 → 3.2.1

package/src/components/SearchEngine.jsx

@@ -1,32 +1,89 @@
 import React from 'react';
+import { get, isFunction, isObject } from 'lodash';
 import PropTypes from 'prop-types';
 import { Helmet } from 'react-helmet';
+import { browser } from 'q3-ui-helpers';
 import useSiteMetaData from './useSiteMetaData';
 
+const withContent = (output) => (content) =>
+  content && isFunction(output) ? output(content) : [];
+
+export const getStartUrl = () =>
+  browser.isBrowserReady()
+    ? get(window, 'location.host')
+    : '';
+
+export const generateMetaDescriptionOptions = withContent(
+  (content) => [
+    {
+      name: 'description',
+      content,
+    },
+    {
+      property: 'og:description',
+      content,
+    },
+    {
+      name: 'twitter:description',
+      content,
+    },
+  ],
+);
+
+export const generateMetaTitleOptions = withContent(
+  (content) => [
+    {
+      property: 'og:title',
+      content,
+    },
+    {
+      name: 'twitter:title',
+      content,
+    },
+  ],
+);
+
+export const generateBrand = (xs) =>
+  xs ? `%s | ${xs}` : undefined;
+
+export const generateIcons = (site = {}) =>
+  site?.favicon
+    ? [
+        {
+          src: site.favicon,
+          sizes: '512x512',
+          type: 'image/png',
+        },
+      ]
+    : [];
+
+export 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,
+});
+
 const SEO = ({ description, lang, meta, title }) => {
   const site = useSiteMetaData();
   const metaDescription = description || site.description;
+  const metaTitle = title || site.title;
+  const manifestData = generateManifest(site);
 
   return (
     <Helmet
       htmlAttributes={{
         lang,
       }}
-      title={title || site.title}
-      titleTemplate={`%s | ${site.brand}`}
+      title={metaTitle}
+      titleTemplate={generateBrand(site.brand)}
       meta={[
-        {
-          name: 'description',
-          content: metaDescription,
-        },
-        {
-          property: 'og:title',
-          content: title,
-        },
-        {
-          property: 'og:description',
-          content: metaDescription,
-        },
+        ...generateMetaTitleOptions(metaTitle),
+        ...generateMetaDescriptionOptions(metaDescription),
         {
           property: 'og:type',
           content: 'website',
@@ -35,16 +92,18 @@ const SEO = ({ description, lang, meta, title }) => {
           name: 'twitter:card',
           content: 'summary',
         },
-        {
-          name: 'twitter:title',
-          content: title,
-        },
-        {
-          name: 'twitter:description',
-          content: metaDescription,
-        },
       ].concat(meta)}
-    />
+    >
+      {isObject(manifestData) ? (
+        <link
+          rel="manifest"
+          href={`data:application/manifest+json,${encodeURIComponent(
+            JSON.stringify(manifestData),
+          )}`}
+        />
+      ) : null}
+      <link rel="icon" href={site.favicon} />
+    </Helmet>
   );
 };
 

package/src/components/Wrapper.jsx

@@ -1,38 +1,14 @@
 /* eslint-disable import/no-extraneous-dependencies */
 import React from 'react';
-import axios from 'axios';
 import PropTypes from 'prop-types';
 import AuthProvider from 'q3-ui-permissions';
-import LocaleBundles from './LocaleBundles';
 
-const setBaseUrlForRest = (
-  baseURL = process.env.GATSBY_APP_BASE_URL ||
-    'http://localhost:9000',
-) => {
-  axios.defaults.baseURL = baseURL;
-  return axios.defaults;
-};
-
-const Wrapper = ({ baseURL, children, locale }) => {
-  setBaseUrlForRest(baseURL);
-
-  return (
-    <LocaleBundles locale={locale}>
-      <AuthProvider>{children}</AuthProvider>
-    </LocaleBundles>
-  );
-};
-
-Wrapper.defaultProps = {
-  baseURL: undefined,
-};
+const Wrapper = ({ children }) => (
+  <AuthProvider>{children}</AuthProvider>
+);
 
 Wrapper.propTypes = {
-  baseURL: PropTypes.string,
   children: PropTypes.node.isRequired,
-
-  // eslint-disable-next-line
-  locale: PropTypes.object.isRequired,
 };
 
 export default Wrapper;

package/src/components/__tests__/SearchEngine.test.jsx

@@ -0,0 +1,58 @@
+import {
+  generateMetaDescriptionOptions,
+  getStartUrl,
+  generateIcons,
+  generateBrand,
+} from '../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(generateMetaDescriptionOptions().length).toBe(0);
+  });
+
+  it('should render descriptions with content', () => {
+    expect(
+      generateMetaDescriptionOptions('foo').length,
+    ).toBeGreaterThanOrEqual(1);
+  });
+
+  it('should return host', () => {
+    expect(getStartUrl()).toMatch(host);
+  });
+
+  it('should render favicon', () => {
+    expect(
+      generateIcons({
+        favicon: host,
+      }),
+    ).toHaveLength(1);
+  });
+
+  it('should not render favicon', () => {
+    expect(
+      generateIcons({
+        favicon: undefined,
+      }),
+    ).toHaveLength(0);
+  });
+
+  it('should include template literals', () => {
+    expect(generateBrand('3merge')).toMatch('%s | 3merge');
+  });
+});

package/src/components/useSiteMetaData.js

@@ -1,22 +1,23 @@
-import { get } from 'lodash';
+import { get, merge } from 'lodash';
 import { useStaticQuery, graphql } from 'gatsby';
+import useRunTime from 'gatsby-theme-q3-mui/src/components/useRunTime';
 
 export default () =>
-  get(
-    useStaticQuery(graphql`
-      query {
-        site {
-          siteMetadata {
-            appDirectory
-            brand
-            description
-            favicon
-            logo
-            title
+  merge(
+    get(
+      useStaticQuery(graphql`
+        query {
+          site {
+            siteMetadata {
+              appDirectory
+              description
+              title
+            }
           }
         }
-      }
-    `),
-    'site.siteMetadata',
-    {},
+      `),
+      'site.siteMetadata',
+      {},
+    ),
+    useRunTime(),
   );

package/__tests__/config.int.test.js

@@ -1,73 +0,0 @@
-import { get } from 'lodash';
-import config from '../gatsby-config';
-
-const CANONICAL = 'gatsby-plugin-canonical-urls';
-const MANIFEST = 'gatsby-plugin-manifest';
-const ROBOTS = 'gatsby-plugin-robots-txt';
-
-const ENV = {
-  contentfulSpaceID: 1,
-  contentfulAccessToken: 1,
-};
-
-const containsResolver = (plugins = [], name) =>
-  plugins.find(
-    (p) => typeof p === 'object' && p.resolve === name,
-  );
-
-const checkPlugins = (args = {}, plugin) => {
-  const { plugins } = config({ ...ENV, ...args });
-  const statement = expect(
-    containsResolver(plugins, plugin),
-  );
-
-  return {
-    has: () => statement.not.toBeUndefined(),
-    hasNot: () => statement.toBeUndefined(),
-  };
-};
-
-describe('gatsby-config', () => {
-  describe('plugins', () => {
-    it('should error without contentful access token', () => {
-      process.env.URL =
-        'https://development.netlify.3merge.com';
-      expect(() =>
-        config({
-          contentfulSpaceID: '1',
-        }),
-      ).toThrowError();
-    });
-
-    it('should include conditional plugins', () =>
-      [CANONICAL, MANIFEST].forEach((name) =>
-        checkPlugins(
-          {
-            brandingColor: '#FFF',
-            title: 'Foo',
-            siteUrl: 'https://google.ca',
-          },
-          name,
-        ).has(),
-      ));
-
-    it('should exclude conditional plugins', () =>
-      [CANONICAL, MANIFEST].forEach((name) =>
-        checkPlugins({}, name).hasNot(),
-      ));
-
-    it.each([
-      ['https://dev.netlify.3merge.com', 'disallow'],
-      ['https://3merge.com', 'allow'],
-    ])('should disable indexing', (url, key) => {
-      process.env.URL = url;
-      const { plugins } = config({ ...ENV });
-      const res = containsResolver(plugins, ROBOTS);
-      const prod = get(
-        res,
-        'options.env.production.policy',
-      )[0];
-      expect(prod).toHaveProperty(key, '/');
-    });
-  });
-});

package/helpers/__tests__/loadContent.unit.test.js

@@ -1,13 +0,0 @@
-const path = require('path');
-const loadContent = require('../loadContent');
-
-describe('loadContent', () => {
-  it('should fetch all content from directory', () => {
-    const out = loadContent(
-      path.resolve(__dirname, '../../__fixtures__'),
-    );
-
-    expect(out).toHaveProperty('en');
-    expect(out).toHaveProperty('fr');
-  });
-});

package/helpers/__tests__/pagination.unit.test.js

@@ -1,139 +0,0 @@
-const {
-  genCursor,
-  appendSiblingsToContext,
-  getPreviousArchiveUrl,
-  getNextArchiveUrl,
-  getNumberOfPages,
-  paginateArchiveContext,
-} = require('../pagination');
-
-const genEntries = () => {
-  const entries = [];
-  for (let i = 0; i < 30; i += 1) entries.push(i);
-  return entries;
-};
-
-describe('pagination', () => {
-  describe('"genCursor"', () => {
-    const stub = ['foo', 'bar', 'quuz', 'garply'];
-    const cursor = genCursor(stub, 2);
-    // current index targets "quuz"
-
-    it('should identify first item', () => {
-      expect(cursor.first).toMatch('foo');
-    });
-
-    it('should identify last item', () => {
-      expect(cursor.last).toMatch('garply');
-    });
-
-    it('should identify next item', () => {
-      expect(cursor.next).toMatch('garply');
-    });
-
-    it('should identify previous item', () => {
-      expect(cursor.prev).toMatch('bar');
-    });
-
-    it('should identify first position', () => {
-      expect(cursor.isFirst).toBeFalsy();
-      expect(genCursor(stub, 0).isFirst).toBeTruthy();
-    });
-
-    it('should identify last position', () => {
-      expect(cursor.isLast).toBeFalsy();
-      expect(genCursor(stub, 3).isLast).toBeTruthy();
-    });
-  });
-
-  describe('"appendSiblingsToContext"', () => {
-    const mockContentfulEntry = (id) => ({
-      contentful_id: id,
-    });
-
-    const stubWithContentful = [
-      mockContentfulEntry(1),
-      mockContentfulEntry(2),
-      mockContentfulEntry(3),
-    ];
-
-    it('should map contentful entries using cursor', () => {
-      const entries = appendSiblingsToContext(
-        stubWithContentful,
-      );
-      expect(entries[0]).toMatchObject({
-        prev: 3,
-        next: 2,
-      });
-      expect(entries[2]).toMatchObject({
-        prev: 2,
-        next: 1,
-      });
-    });
-  });
-
-  describe('"getPreviousArchiveUrl"', () => {
-    it('should return null', () => {
-      expect(getPreviousArchiveUrl('/foo', 1)).toBeNull();
-    });
-
-    it('should return archive', () => {
-      expect(getPreviousArchiveUrl('/foo', 2)).toEqual(
-        '/foo',
-      );
-    });
-
-    it('should return archive sub-directory', () => {
-      expect(getPreviousArchiveUrl('/foo', 3)).toEqual(
-        '/foo/2',
-      );
-    });
-  });
-
-  describe('"getNextArchiveUrl"', () => {
-    it('should return sub-directory', () => {
-      expect(getNextArchiveUrl('/foo', 8, 9)).toEqual(
-        '/foo/9',
-      );
-    });
-
-    it('should return null', () => {
-      expect(getNextArchiveUrl('/foo', 9, 9)).toBeNull();
-    });
-  });
-
-  describe('"getNumberOfPages"', () => {
-    it('should return number divisible by', () => {
-      expect(getNumberOfPages(genEntries(), 5)).toBe(6);
-    });
-  });
-
-  describe('"paginateArchiveContext"', () => {
-    it('should return pagination meta', () => {
-      // default 15 per page
-      const res = paginateArchiveContext(
-        genEntries(),
-        '/foo',
-      );
-
-      expect(res).toHaveLength(2);
-      expect(res[0]).toMatchObject({
-        path: '/foo',
-        limit: 15,
-        skip: 0,
-        pageNum: 0,
-        prev: null,
-        next: '/foo/2',
-      });
-
-      expect(res[1]).toMatchObject({
-        path: '/foo/2',
-        limit: 15,
-        skip: 15,
-        pageNum: 1,
-        prev: '/foo',
-        next: null,
-      });
-    });
-  });
-});

package/helpers/__tests__/slug.unit.test.js

@@ -1,21 +0,0 @@
-const slug = require('../slug');
-
-describe('slug', () => {
-  it('should combine use slug attribute', () => {
-    expect(
-      slug({ slug: 'already-formatted-as-slug' }),
-    ).toMatch('/already-formatted-as-slug');
-  });
-
-  it('should combine use title attribute', () => {
-    expect(
-      slug({ title: 'This is a post' }, 'foos'),
-    ).toMatch('/foos/this-is-a-post');
-  });
-
-  it('should combine use name attribute', () => {
-    expect(slug({ name: "Post's name" }, '/foos')).toMatch(
-      '/foos/posts-name',
-    );
-  });
-});

package/helpers/archive.js

@@ -1,42 +0,0 @@
-const { get } = require('lodash');
-const { resolve } = require('path');
-const {
-  appendSiblingsToContext,
-  paginateArchiveContext,
-} = require('./pagination');
-
-module.exports = ({
-  archiveComponentRelativePath,
-  createPage,
-  detailComponentRelativePath,
-  nodesKeyName,
-  slug,
-}) => async ({ data, errors }) => {
-  if (errors) throw errors;
-  const { nodes = [] } = get(data, nodesKeyName, {
-    nodes: [],
-  });
-
-  const archives = appendSiblingsToContext(nodes).map(
-    (context) =>
-      createPage({
-        path:
-          // see slugType for more details on this field
-          context.to || `/${slug}/${context.contentful_id}`,
-        component: resolve(detailComponentRelativePath),
-        context,
-      }),
-  );
-
-  const entries = paginateArchiveContext(nodes, slug).map(
-    ({ path, ...context }) =>
-      createPage({
-        component: resolve(archiveComponentRelativePath),
-        path,
-        context,
-      }),
-  );
-
-  await Promise.all(archives);
-  await Promise.all(entries);
-};

package/helpers/index.js

@@ -1,19 +0,0 @@
-const ArchiveBuilder = require('./archive');
-const loadContent = require('./loadContent');
-const {
-  appendSiblingsToContext,
-  paginateArchiveContext,
-} = require('./pagination');
-const slug = require('./slug');
-const slugType = require('./slugType');
-const setup = require('./setup');
-
-module.exports = {
-  ArchiveBuilder,
-  loadContent,
-  appendSiblingsToContext,
-  paginateArchiveContext,
-  setup,
-  slug,
-  slugType,
-};

package/helpers/loadContent.js

@@ -1,45 +0,0 @@
-const fs = require('fs');
-const path = require('path');
-
-const readJsonFile = (dir, filename) => {
-  try {
-    const file = path.resolve(dir, filename);
-    const buffer = fs.readFileSync(file);
-    return JSON.parse(buffer);
-  } catch (e) {
-    return {};
-  }
-};
-
-const reduceFileSystem = (name, next) =>
-  fs
-    .readdirSync(name, { withFileTypes: true })
-    .reduce(next, {});
-
-const getJsonFileNameFromDirent = ({ name }) =>
-  path.basename(name, '.json');
-
-const readFilePathFromDirent = ({ name }, root, next) =>
-  next(path.join(root, name));
-
-const recurseFileSystem = (pathName) =>
-  reduceFileSystem(pathName, (curr, dirent) =>
-    Object.assign(curr, {
-      [getJsonFileNameFromDirent(
-        dirent,
-      )]: dirent.isDirectory()
-        ? readFilePathFromDirent(
-            dirent,
-            pathName,
-            recurseFileSystem,
-          )
-        : readJsonFile(pathName, dirent.name),
-    }),
-  );
-
-recurseFileSystem.readJsonFile = readJsonFile;
-recurseFileSystem.reduceFileSystem = reduceFileSystem;
-recurseFileSystem.getJsonFileNameFromDirent = getJsonFileNameFromDirent;
-recurseFileSystem.readFilePathFromDirent = readFilePathFromDirent;
-
-module.exports = recurseFileSystem;

package/helpers/loadTheme.js

@@ -1,10 +0,0 @@
-module.exports = (src) => {
-  try {
-    if (!src) throw new Error('No theme file detected');
-
-    // eslint-disable-next-line
-    return require(src);
-  } catch (e) {
-    return {};
-  }
-};