feat: persist layout state across pages

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>
   )
 }