feat(layouts): start converting to use layouts

packages/example/src/gatsby-theme-carbon/components/Layout.js

@@ -1,23 +1,23 @@
 /* eslint-disable import/no-unresolved */
 import React, { useEffect } from 'react';
 
-import { Information } from "@carbon/icons-react";
+import { Information } from '@carbon/icons-react';
 
 import Meta from 'gatsby-theme-carbon/src/components/Meta';
 import LeftNav from 'gatsby-theme-carbon/src/components/LeftNav';
 import Header from 'gatsby-theme-carbon/src/components/Header';
 import Switcher from 'gatsby-theme-carbon/src/components/Switcher';
-import Footer from './Footer';
 import Container from 'gatsby-theme-carbon/src/components/Container';
 import useMetadata from 'gatsby-theme-carbon/src/util/hooks/useMetadata';
+import Footer from './Footer';
 
 import 'gatsby-theme-carbon/src/styles/index.scss';
 import {
-    layout,
-    banner,
-    bannerText,
-    bannerIcon,
-} from "../../styles/Layout.module.scss";
+  layout,
+  banner,
+  bannerText,
+  bannerIcon,
+} from '../../styles/Layout.module.scss';
 
 const Layout = ({
   children,
@@ -55,9 +55,10 @@ const Layout = ({
       />
       <div className={banner} role="contentinfo">
         <span className={bannerText}>
-          <Information size={16} className={bannerIcon} /> This project is maintained by
-            community contributions. The original contributor, Carbon Design System, is
-            no longer involved in maintaining this project.
+          <Information size={16} className={bannerIcon} /> This project is
+          maintained by community contributions. The original contributor,
+          Carbon Design System, is no longer involved in maintaining this
+          project.
         </span>
       </div>
       <Header isSwitcherEnabled={isSwitcherEnabled} />

packages/gatsby-theme-carbon/gatsby-config.js

@@ -115,10 +115,10 @@ module.exports = (themeOptions) => {
           mdxOptions: {
             remarkPlugins,
           },
-          defaultLayouts: {
-            default: require.resolve('./src/templates/Default.js'),
-            home: require.resolve('./src/templates/Homepage.js'),
-          },
+          // defaultLayouts: {
+          //   default: require.resolve('./src/templates/Default.js'),
+          //   home: require.resolve('./src/templates/Homepage.js'),
+          // },
         },
       },
       {

packages/gatsby-theme-carbon/src/templates/Default.js → packages/gatsby-theme-carbon/src/components/Layouts/Default.js

@@ -2,15 +2,16 @@ import React from 'react';
 import slugify from 'slugify';
 import { useStaticQuery, graphql } from 'gatsby';
 
-import Utils from '../components/Utils';
-import Layout from '../components/Layout';
-import PageHeader from '../components/PageHeader';
-import EditLink from '../components/EditLink';
-import NextPrevious from '../components/NextPrevious';
-import PageTabs from '../components/PageTabs';
-import Main from '../components/Main';
-import useMetadata from '../util/hooks/useMetadata';
-import LastModifiedDate from '../components/LastModifiedDate';
+import Utils from '../Utils';
+import Layout from '../Layout';
+import PageHeader from '../PageHeader';
+import EditLink from '../EditLink';
+import NextPrevious from '../NextPrevious';
+import PageTabs from '../PageTabs';
+import { useMetadata } from '../../util/hooks';
+import Main from '../Main';
+
+import LastModifiedDate from '../LastModifiedDate';
 
 const Default = ({ pageContext, children, location, Title }) => {
   const { frontmatter = {}, relativePagePath, titleType } = pageContext;
@@ -23,7 +24,7 @@ const Default = ({ pageContext, children, location, Title }) => {
     date,
   } = frontmatter;
 
-  const { interiorTheme } = useMetadata();
+  const { interiorTheme } = useMetadata;
 
   // get the path prefix if it exists
   const {

packages/gatsby-theme-carbon/src/templates/Homepage.js → packages/gatsby-theme-carbon/src/components/Layouts/Homepage.js

@@ -1,12 +1,12 @@
 import React from 'react';
-import Layout from '../components/Layout';
+import Layout from '../Layout';
 // import { HomepageBanner, HomepageCallout } from '../components/Homepage';
 // import Carbon from '../images/carbon.jpg';
-import Main from '../components/Main';
-import useMetadata from '../util/hooks/useMetadata';
-import Utils from '../components/Utils';
+import Main from '../Main';
+import useMetadata from '../../util/hooks/useMetadata';
+import Utils from '../Utils';
 
-import NextPrevious from '../components/NextPrevious';
+import NextPrevious from '../NextPrevious';
 
 const Homepage = ({
   children,

packages/gatsby-theme-carbon/src/components/MDXProvider/MDXProvider.js

@@ -1,9 +1,12 @@
 import React from 'react';
 import { MDXProvider as Provider } from '@mdx-js/react';
 import defaultComponents from './defaultComponents';
+import Default from '../Layouts/Default';
 
 const MDXProvider = ({ components = defaultComponents, element }) => (
-  <Provider components={components}>{element}</Provider>
+  <Provider components={{ ...components, wrapper: Default }}>
+    {element}
+  </Provider>
 );
 
 export default MDXProvider;