feat: persist layout state across pages

gatsby-config.js

@@ -23,6 +23,7 @@ module.exports = {
         ],
       },
     },
+    `gatsby-plugin-layout`,
     {
       resolve: `gatsby-transformer-remark`,
       plugins: [`gatsby-remark-prismjs`],

gatsby-node.js

@@ -6,6 +6,9 @@ const fs = require("fs")
 
 const requiredArticleFrontmatter = ["authors", "date"]
 
+const LAYOUT_RESOURCES = "resources"
+const LAYOUT_REGULAR = "regular"
+
 let users = []
 try {
   users = JSON.parse(fs.readFileSync("./users.json", "utf-8"))
@@ -51,6 +54,7 @@ const createResources = async ({ createPage, graphql }) => {
       component: languageResources,
       context: {
         file: node.relativePath,
+        layout: LAYOUT_RESOURCES,
       },
     })
   })
@@ -84,6 +88,15 @@ exports.onCreateNode = async ({ node, getNode, actions }) => {
   }
 }
 
+exports.onCreatePage = ({ page, actions }) => {
+  const { createPage } = actions
+
+  page.context.layout = page.path.match(/resources/)
+    ? LAYOUT_RESOURCES
+    : LAYOUT_REGULAR
+  createPage(page)
+}
+
 exports.createPages = ({ actions, graphql }) => {
   const { createPage } = actions
   return createResources({ createPage, graphql })

package-lock.json

@@ -7729,6 +7729,14 @@
         "slash": "^1.0.0"
       }
     },
+    "gatsby-plugin-layout": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/gatsby-plugin-layout/-/gatsby-plugin-layout-1.1.2.tgz",
+      "integrity": "sha512-nXtF5SJbx+qcSQBXLnpq3YeaPN0LEbkkH3HOJcoFfynzY0cKH4o09+IO3WGxoV/XLBjcxc3OxZFwBqQaeL6Keg==",
+      "requires": {
+        "@babel/runtime": "^7.0.0"
+      }
+    },
     "gatsby-plugin-manifest": {
       "version": "2.2.4",
       "resolved": "https://registry.npmjs.org/gatsby-plugin-manifest/-/gatsby-plugin-manifest-2.2.4.tgz",

package.json

@@ -7,6 +7,7 @@
   "dependencies": {
     "gatsby": "^2.13.39",
     "gatsby-image": "^2.2.6",
+    "gatsby-plugin-layout": "^1.1.2",
     "gatsby-plugin-manifest": "^2.2.4",
     "gatsby-plugin-mdx": "^1.0.17",
     "gatsby-plugin-offline": "^2.2.4",

src/layouts/index.tsx

@@ -0,0 +1,18 @@
+import React, { PropsWithChildren } from "react"
+import { Layout } from "../components/Layout"
+import { ResourcesLayout } from "../components/ResourcesLayout"
+
+export default function BaseLayout({
+  children,
+  pageContext,
+}: PropsWithChildren<{
+  pageContext: {
+    layout?: string
+  }
+}>) {
+  if (pageContext.layout === "resources") {
+    return <ResourcesLayout>{children}</ResourcesLayout>
+  }
+
+  return <Layout>{children}</Layout>
+}

src/pages/404.tsx

@@ -1,15 +1,14 @@
-import React from "react"
+import React, { Fragment } from "react"
 
-import { Layout } from "../components/Layout"
 import { SEO } from "../components/SEO"
 
 function NotFoundPage() {
   return (
-    <Layout>
+    <Fragment>
       <SEO title="404: Not found" />
       <h1>NOT FOUND</h1>
       <p>You just hit a route that doesn&#39;t exist... the sadness.</p>
-    </Layout>
+    </Fragment>
   )
 }
 

src/pages/about.tsx

@@ -1,7 +1,6 @@
-import React from "react"
+import React, { Fragment } from "react"
 import { graphql } from "gatsby"
 import { Markdown } from "../components/Markdown"
-import { Layout } from "../components/Layout"
 import { MarkdownRemark, Query } from "../generated/graphql"
 import { SEO } from "../components/SEO"
 
@@ -9,10 +8,10 @@ function AboutPage({ data }: ComponentQuery<{ md: MarkdownRemark }>) {
   const { md } = data
 
   return (
-    <Layout>
+    <Fragment>
       <SEO title="About" />
       <Markdown content={md.html!} />
-    </Layout>
+    </Fragment>
   )
 }
 

src/pages/index.tsx

@@ -1,19 +1,18 @@
-import React from "react"
+import React, { Fragment } from "react"
 import { Link } from "gatsby"
 
-import { Layout } from "../components/Layout"
 import { SEO } from "../components/SEO"
 
 function IndexPage() {
   return (
-    <Layout>
+    <Fragment>
       <SEO title="Home" />
       <h1>Hi people</h1>
       <p>Welcome to your new Gatsby site.</p>
       <p>Now go build something great.</p>
       <div style={{ maxWidth: `300px`, marginBottom: `1.45rem` }}></div>
       <Link to="/page-2/">Go to page 2</Link>
-    </Layout>
+    </Fragment>
   )
 }
 

src/pages/resources.tsx

@@ -1,14 +1,13 @@
-import React from "react"
+import React, { Fragment } from "react"
 
-import { ResourcesLayout } from "../components/ResourcesLayout"
 import { SEO } from "../components/SEO"
 
 function ResourcesPage() {
   return (
-    <ResourcesLayout>
+    <Fragment>
       <SEO title="Resources" />
       the resources
-    </ResourcesLayout>
+    </Fragment>
   )
 }
 

src/pages/rules.tsx

@@ -1,7 +1,6 @@
-import React from "react"
+import React, { Fragment } from "react"
 import { graphql } from "gatsby"
 import { Markdown } from "../components/Markdown"
-import { Layout } from "../components/Layout"
 import { MarkdownRemark, Query } from "../generated/graphql"
 import { SEO } from "../components/SEO"
 
@@ -9,10 +8,10 @@ function RulesPage({ data }: ComponentQuery<{ md: MarkdownRemark }>) {
   const { md } = data
 
   return (
-    <Layout>
+    <Fragment>
       <SEO title="Rules" />
       <Markdown content={md.html!} />
-    </Layout>
+    </Fragment>
   )
 }
 

src/templates/languagePost.tsx

@@ -1,8 +1,7 @@
-import React from "react"
+import React, { Fragment } from "react"
 import { graphql } from "gatsby"
 import { Markdown } from "../components/Markdown"
 import { SEO } from "../components/SEO"
-import { ResourcesLayout } from "../components/ResourcesLayout"
 import { ResourceHeader } from "../components/ResourceHeader"
 
 // @todo maybe find alternative type for data
@@ -10,7 +9,7 @@ function LanguagePost({ data }: any) {
   const { html, fields, frontmatter, timeToRead } = data.file.post
   console.log(data)
   return (
-    <ResourcesLayout>
+    <Fragment>
       <SEO title={frontmatter.title} />
       <ResourceHeader
         title={frontmatter.title}
@@ -20,7 +19,7 @@ function LanguagePost({ data }: any) {
         recommendedReading={frontmatter.recommended_reading}
       />
       <Markdown content={html} />
-    </ResourcesLayout>
+    </Fragment>
   )
 }