refactor(www): Move base layout component into layouts plugin

www/src/components/guidelines/layout.js

@@ -1,18 +1,16 @@
 /** @jsx jsx */
 import { jsx } from "theme-ui"
-import React from "react"
 import PropTypes from "prop-types"
 import { Helmet } from "react-helmet"
 import { Global } from "@emotion/core"
 
-import BaseLayout from "../layout"
 import { globalStyles } from "../../utils/styles/global"
 import { Box } from "./system"
 import Header from "./header"
 import Footer from "../shared/footer-links"
 
-const Layout = ({ children, background, location, pageTitle }) => (
-  <BaseLayout location={location}>
+const Layout = ({ children, background, pageTitle }) => (
+  <Box bg="background" position="relative">
     <Global
       styles={{
         ".ReactModal__Overlay": {
@@ -34,15 +32,13 @@ const Layout = ({ children, background, location, pageTitle }) => (
     <Helmet>
       <title>{pageTitle ? `${pageTitle} | Guidelines` : `Guidelines`}</title>
     </Helmet>
-    <Box bg="background" position="relative">
-      {background && background}
-      <Header />
-      <Box as="main" className="main-body">
-        {children}
-        <Footer />
-      </Box>
+    {background && background}
+    <Header />
+    <Box as="main" className="main-body">
+      {children}
+      <Footer />
     </Box>
-  </BaseLayout>
+  </Box>
 )
 
 Layout.propTypes = {

www/src/components/layout/layout-with-heading.js

@@ -3,28 +3,25 @@ import { jsx } from "theme-ui"
 import PropTypes from "prop-types"
 
 import PageHeading from "./page-heading"
-import BaseLayout from "../layout"
 import { mediaQueries } from "gatsby-design-tokens/dist/theme-gatsbyjs-org"
 
 const LayoutWithHeading = props => {
-  const { children, location, pageTitle = ``, pageIcon } = props
+  const { children, pageTitle = ``, pageIcon } = props
 
   return (
-    <BaseLayout location={location}>
-      <div
-        sx={{
-          pb: t => t.fontSizes[10],
+    <div
+      sx={{
+        pb: t => t.fontSizes[10],
 
-          [mediaQueries.md]: {
-            ml: t => t.sizes.pageHeadingDesktopWidth,
-            pb: 0,
-          },
-        }}
-      >
-        {pageTitle && <PageHeading title={pageTitle} icon={pageIcon} />}
-        {children}
-      </div>
-    </BaseLayout>
+        [mediaQueries.md]: {
+          ml: t => t.sizes.pageHeadingDesktopWidth,
+          pb: 0,
+        },
+      }}
+    >
+      {pageTitle && <PageHeading title={pageTitle} icon={pageIcon} />}
+      {children}
+    </div>
   )
 }
 

www/src/components/showcase-details.js

@@ -8,7 +8,6 @@ import Img from "gatsby-image"
 import qs from "qs"
 
 import { mediaQueries } from "gatsby-design-tokens/dist/theme-gatsbyjs-org"
-import Layout from "../components/layout"
 import Modal from "../components/modal"
 import ShareMenu from "../components/share-menu"
 import Button from "../components/button"
@@ -140,7 +139,8 @@ function getExitLocation(filters = {}) {
   }
 }
 
-function ShowcaseModal({ children, location }) {
+function ShowcaseModal({ children, location, isModal }) {
+  if (!isModal) return children
   const { previousSite, nextSite } = usePrevAndNextSite(location.pathname)
   const { filters } = location.state || {}
   return (
@@ -245,9 +245,8 @@ function ShowcaseModal({ children, location }) {
 const ShowcaseDetails = ({ location, site, isModal, categories }) => {
   const screenshotFile = site.childScreenshot.screenshotFile.childImageSharp
 
-  const PageLayout = isModal ? ShowcaseModal : Layout
   return (
-    <PageLayout location={location}>
+    <ShowcaseModal isModal={isModal} location={location}>
       <div
         sx={{
           display: `flex`,
@@ -395,7 +394,7 @@ const ShowcaseDetails = ({ location, site, isModal, categories }) => {
           </div>
         </div>
       </div>
-    </PageLayout>
+    </ShowcaseModal>
   )
 }
 

www/src/layouts/index.js

@@ -1,3 +1,16 @@
-export default function Layout({ children }) {
-  return children
+/** @jsx jsx */
+import { jsx } from "theme-ui"
+import BaseLayout from "../components/layout"
+import { getLocaleAndBasePath } from "../utils/i18n"
+
+export default function Layout({ location, children }) {
+  if (location.state && location.state.isModal) {
+    return children
+  }
+  const { locale } = getLocaleAndBasePath(location.pathname)
+  return (
+    <BaseLayout location={location} locale={locale}>
+      {children}
+    </BaseLayout>
+  )
 }

www/src/pages/404.js

@@ -1,26 +1,19 @@
 import React from "react"
 import Container from "../components/container"
-import Layout from "../components/layout"
 import { Link } from "gatsby"
 import FooterLinks from "../components/shared/footer-links"
 
-class FourOhFour extends React.Component {
-  render() {
-    return (
-      <Layout location={this.props.location}>
-        <Container>
-          <h1>Page not found</h1>
-          <p>
-            Oops! The page you are looking for has been removed or relocated.
-          </p>
-          <Link to="/">
-            <p>Go Back</p>
-          </Link>
-        </Container>
-        <FooterLinks />
-      </Layout>
-    )
-  }
+export default function FourOhFour() {
+  return (
+    <>
+      <Container>
+        <h1>Page not found</h1>
+        <p>Oops! The page you are looking for has been removed or relocated.</p>
+        <Link to="/">
+          <p>Go Back</p>
+        </Link>
+      </Container>
+      <FooterLinks />
+    </>
+  )
 }
-
-export default FourOhFour