move Layout to use by wrapPageElement

Author: dowdiness

.eslintignore

@@ -3,3 +3,4 @@ gatsby-node.js
 tailwind.config.js
 postcss.config.js
 gatsby-browser.js
+gatsby-ssr.js

gatsby-browser.js

@@ -5,3 +5,14 @@ import "fontsource-roboto-mono"
 
 // custom CSS styles
 import "./src/styles/style.css"
+
+import * as React from 'react'
+import Layout from 'src/components/Layout'
+
+const wrapPageElement = ({ element }) => {
+  return (
+    <Layout>{element}</Layout>
+  )
+}
+
+export { wrapPageElement }

gatsby-ssr.js

@@ -0,0 +1,18 @@
+/**
+ * Implement Gatsby's SSR (Server Side Rendering) APIs in this file.
+ *
+ * See: https://www.gatsbyjs.org/docs/ssr-apis/
+ */
+
+// You can delete this file if you're not using it
+import * as React from 'react'
+// import { Provider } from '~/store/global'
+import Layout from 'src/components/Layout'
+
+const wrapPageElement = ({ element }) => {
+  return (
+    <Layout>{element}</Layout>
+  )
+}
+
+export { wrapPageElement }

src/pages/404.tsx

@@ -1,16 +1,15 @@
 import React from 'react'
 import { PageProps } from 'gatsby'
 
-import Layout from 'src/components/Layout'
 import { GatsbySeo } from 'gatsby-plugin-next-seo'
 
 const NotFoundPage: React.FC<PageProps> = ({}) => {
   return (
-    <Layout>
+    <>
       <GatsbySeo title="404: Not Found" />
       <h1>404: Not Found</h1>
       <p>You just hit a route that doesn&#39;t exist... the sadness.</p>
-    </Layout>
+    </>
   )
 }
 

src/pages/index.tsx

@@ -3,7 +3,6 @@ import { graphql, PageProps, Link } from 'gatsby'
 
 import Bio from 'src/components/bio'
 import { GatsbySeo } from 'gatsby-plugin-next-seo'
-import Layout from 'src/components/Layout'
 
 const BlogIndex: React.FC<PageProps<GatsbyTypes.IndexPageQuery>> = ({
   data,
@@ -12,20 +11,20 @@ const BlogIndex: React.FC<PageProps<GatsbyTypes.IndexPageQuery>> = ({
 
   if (posts.length === 0) {
     return (
-      <Layout>
+      <>
         <GatsbySeo title="All posts" />
         <Bio />
         <p>
           No blog posts found. Add markdown posts to "content/blog" (or the
           directory you specified for the "gatsby-source-filesystem" plugin in
           gatsby-config.js).
         </p>
-      </Layout>
+      </>
     )
   }
 
   return (
-    <Layout>
+    <>
       <GatsbySeo title="弱いZINE" titleTemplate="%s" />
       <ol style={{ listStyle: 'none' }}>
         {posts.map(post => {
@@ -67,7 +66,7 @@ const BlogIndex: React.FC<PageProps<GatsbyTypes.IndexPageQuery>> = ({
           )
         })}
       </ol>
-    </Layout>
+    </>
   )
 }
 
@@ -77,7 +76,7 @@ export const pageQuery = graphql`
   query IndexPage {
     allMarkdownRemark(sort: { fields: [frontmatter___date], order: DESC }) {
       nodes {
-        excerpt
+        excerpt(truncate: true)
         fields {
           slug
         }

src/templates/blog-post.tsx

@@ -2,7 +2,6 @@ import React from 'react'
 import { graphql, PageProps, Link } from 'gatsby'
 
 import useTategaki from 'src/hooks/useTategaki'
-import Layout from 'src/components/Layout'
 import { GatsbySeo } from 'gatsby-plugin-next-seo'
 
 const BlogPostTemplate: React.FC<PageProps<
@@ -14,7 +13,7 @@ const BlogPostTemplate: React.FC<PageProps<
   const { tategakiRef } = useTategaki()
 
   return (
-    <Layout>
+    <>
       <GatsbySeo
         title={post?.frontmatter?.title || ``}
         description={post?.frontmatter?.description || post?.excerpt || ``}
@@ -79,7 +78,7 @@ const BlogPostTemplate: React.FC<PageProps<
           </li>
         </ul>
       </nav>
-    </Layout>
+    </>
   )
 }