(chore) update to Gatsby 2.x

zachlysobey · Aug 30, 2019 · 57d7e16 · 57d7e16
1 parent aa06ff7
commit 57d7e16
Show file tree

Hide file tree

Showing 10 changed files with 16,379 additions and 10,885 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -4,14 +4,16 @@
   "version": "1.0.0",
   "author": "Zach Lysobey <zlysobey+dev@gmail.com>",
   "dependencies": {
-    "gatsby": "^1.9.247",
-    "gatsby-link": "^1.6.40",
-    "gatsby-plugin-react-helmet": "^2.0.10",
-    "gatsby-remark-prismjs": "^3.0.0",
-    "gatsby-source-filesystem": "^1.5.39",
-    "gatsby-transformer-remark": "^1.7.44",
-    "prismjs": "^1.15.0",
-    "react-helmet": "^5.2.0"
+    "gatsby": "^2.14.6",
+    "gatsby-link": "^2.2.10",
+    "gatsby-plugin-react-helmet": "^3.1.5",
+    "gatsby-remark-prismjs": "^3.3.9",
+    "gatsby-source-filesystem": "^2.1.18",
+    "gatsby-transformer-remark": "^2.6.19",
+    "prismjs": "^1.17.1",
+    "react": "^16.9.0",
+    "react-dom": "^16.9.0",
+    "react-helmet": "^5.2.1"
   },
   "keywords": [
     "gatsby",
@@ -33,9 +35,9 @@
     ]
   },
   "devDependencies": {
-    "husky": "^1.0.0",
-    "lint-staged": "^7.2.0",
-    "prettier": "^1.12.0"
+    "husky": "^3.0.4",
+    "lint-staged": "^9.2.5",
+    "prettier": "^1.18.2"
   },
   "repository": {
     "type": "git",

diff --git a/src/layouts/index.css → src/components/layout.css b/src/layouts/index.css → src/components/layout.css
diff --git a/src/components/layout.js b/src/components/layout.js
@@ -0,0 +1,58 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { StaticQuery, graphql } from 'gatsby'
+import Helmet from 'react-helmet'
+
+import Header from './header'
+
+import './layout.css'
+
+// import 'prismjs/themes/prism.css'
+// import 'prismjs/themes/prism-tomorrow.css'
+// import 'prismjs/themes/prism-coy.css'
+// import 'prismjs/themes/prism-dark.css'
+// import 'prismjs/themes/prism-funky.css'
+import 'prismjs/themes/prism-okaidia.css'
+// import 'prismjs/themes/prism-solarizedlight.css'
+
+const Layout = ({ children, data }) => (
+    <StaticQuery
+        query={graphql`
+            query SiteTitleQuery {
+                site {
+                    siteMetadata {
+                        title
+                    }
+                }
+            }
+        `}
+        render={(data) => (
+            <>
+                <Helmet
+                    title={data.site.siteMetadata.title}
+                    meta={[
+                        { name: 'description', content: 'Sample' },
+                        { name: 'keywords', content: 'sample, something' },
+                    ]}
+                />
+                <Header siteTitle={data.site.siteMetadata.title} />
+                <div
+                    style={{
+                        margin: '0 auto',
+                        maxWidth: 960,
+                        padding: '0px 1.0875rem 1.45rem',
+                        paddingTop: 0,
+                    }}
+                >
+                    {children}
+                </div>
+            </>
+        )}
+    />
+)
+
+Layout.propTypes = {
+    children: PropTypes.element,
+}
+
+export default Layout
diff --git a/src/layouts/index.js b/src/layouts/index.js
diff --git a/src/pages/blog.js b/src/pages/blog.js
@@ -1,26 +1,30 @@
 import React from 'react'
 import Link from 'gatsby-link'
 
+import Layout from '../components/layout'
+
 export default function Blog({ data }) {
     const { edges: posts } = data.allMarkdownRemark
     return (
-        <div className="blog-posts">
-            {posts
-                .filter((post) => post.node.frontmatter.title.length > 0)
-                .map(({ node: post }) => {
-                    return (
-                        <div className="blog-post-preview" key={post.id}>
-                            <h2>
-                                <small>{post.frontmatter.date}</small>{' '}
-                                <Link to={post.frontmatter.path}>
-                                    {post.frontmatter.title}
-                                </Link>
-                            </h2>
-                            <p>{post.excerpt}</p>
-                        </div>
-                    )
-                })}
-        </div>
+        <Layout>
+            <div className="blog-posts">
+                {posts
+                    .filter((post) => post.node.frontmatter.title.length > 0)
+                    .map(({ node: post }) => {
+                        return (
+                            <div className="blog-post-preview" key={post.id}>
+                                <h2>
+                                    <small>{post.frontmatter.date}</small>{' '}
+                                    <Link to={post.frontmatter.path}>
+                                        {post.frontmatter.title}
+                                    </Link>
+                                </h2>
+                                <p>{post.excerpt}</p>
+                            </div>
+                        )
+                    })}
+            </div>
+        </Layout>
     )
 }
 

diff --git a/src/pages/index.js b/src/pages/index.js
@@ -1,8 +1,10 @@
 import React from 'react'
 import Link from 'gatsby-link'
 
+import Layout from '../components/layout'
+
 export default () => (
-    <div>
+    <Layout>
         <h2>My new home on the Internet</h2>
 
         <p>Playing around with creating a new site using Gatsby.js</p>
@@ -18,5 +20,5 @@ export default () => (
                 <Link to="/blog/">Blog</Link>
             </li>
         </ul>
-    </div>
+    </Layout>
 )
diff --git a/src/pages/music.js b/src/pages/music.js
@@ -1,17 +1,18 @@
 import React from 'react'
 import Link from 'gatsby-link'
 
+import Layout from '../components/layout'
 import { YoutubePosts } from '../components/youtube-posts'
 import { Bands } from '../components/bands'
 
 export default () => (
-    <div>
+    <Layout>
         <h2>Music</h2>
 
         <Bands />
 
         <YoutubePosts />
 
         <Link to="/">back home</Link>
-    </div>
+    </Layout>
 )
diff --git a/src/pages/programming.js b/src/pages/programming.js
@@ -1,14 +1,15 @@
 import React from 'react'
 import Link from 'gatsby-link'
 
+import Layout from '../components/layout'
 import { ExternalArticles } from '../components/external-articles'
 
 export default () => (
-    <div>
+    <Layout>
         <h2>Programming</h2>
 
         <ExternalArticles />
 
         <Link to="/">back home</Link>
-    </div>
+    </Layout>
 )
diff --git a/src/templates/blog-post.js b/src/templates/blog-post.js
@@ -1,22 +1,26 @@
 import React from 'react'
 import Helmet from 'react-helmet'
 
+import Layout from '../components/layout'
+
 export default function Template({ data }) {
     const { markdownRemark: post } = data
     return (
-        <div className="blog-post-container">
-            <Helmet title={`Zach Lysobey - ${post.frontmatter.title}`} />
-            <div className="blog-post">
-                <h2>
-                    <small>{post.frontmatter.date}</small>{' '}
-                    {post.frontmatter.title}
-                </h2>
-                <div
-                    className="blog-post-content"
-                    dangerouslySetInnerHTML={{ __html: post.html }}
-                />
+        <Layout>
+            <div className="blog-post-container">
+                <Helmet title={`Zach Lysobey - ${post.frontmatter.title}`} />
+                <div className="blog-post">
+                    <h2>
+                        <small>{post.frontmatter.date}</small>{' '}
+                        {post.frontmatter.title}
+                    </h2>
+                    <div
+                        className="blog-post-content"
+                        dangerouslySetInnerHTML={{ __html: post.html }}
+                    />
+                </div>
             </div>
-        </div>
+        </Layout>
     )
 }