canary => next

.prettierrc

@@ -1,5 +1,6 @@
 {
   "trailingComma": "es5",
   "semi": false,
-  "singleQuote": true
+  "singleQuote": true,
+  "tabWidth": 2
 }

_redirects

@@ -0,0 +1,2 @@
+# Redirect default Netlify subdomain to primary domain
+https://rdela.netlify.com/* https://rdela.com/:splat 301!

gatsby-node.js

@@ -1,14 +1,15 @@
 const _ = require('lodash')
-const Promise = require('bluebird')
+const Promise = require(`bluebird`)
 const path = require('path')
 const { createFilePath } = require('gatsby-source-filesystem')
 
+
 exports.createPages = ({ graphql, actions }) => {
   const { createPage, createRedirect } = actions
 
   // https://github.com/gatsbyjs/gatsby/blob/master/examples/using-redirects/gatsby-node.js
   // Redirect /index.html to root.
-  // Redirect /rss to /rss.xml
+  // Redirect /rss & /feed to /rss.xml
 
   const feedPath = `/rss.xml`
 
@@ -72,9 +73,9 @@ exports.createPages = ({ graphql, actions }) => {
         })
 
         posts.forEach((edge, index) => {
-          const next = index === 0 ? false : posts[index - 1].node
+          const next = index === 0 ? null : posts[index - 1].node
           const prev =
-            index === posts.length - 1 ? false : posts[index + 1].node
+            index === posts.length - 1 ? null : posts[index + 1].node
 
           createPage({
             path: `${edge.node.fields.slug}`, // required

netlify.toml

@@ -1,5 +1,5 @@
 [build]
-  command = "npm run build"
+  command = "gatsby build"
   publish = "public"
 
 [build.environment]

package.json

@@ -13,33 +13,32 @@
     "@fortawesome/free-brands-svg-icons": "5.2.0",
     "@fortawesome/free-solid-svg-icons": "5.2.0",
     "@fortawesome/react-fontawesome": "0.1.2",
-    "gatsby": "canary",
-    "gatsby-image": "canary",
-    "gatsby-link": "canary",
-    "gatsby-plugin-feed": "canary",
-    "gatsby-plugin-lodash": "canary",
-    "gatsby-plugin-manifest": "canary",
-    "gatsby-plugin-netlify": "canary",
-    "gatsby-plugin-offline": "canary",
-    "gatsby-plugin-react-helmet": "canary",
-    "gatsby-plugin-sharp": "canary",
-    "gatsby-plugin-typography": "canary",
-    "gatsby-remark-copy-linked-files": "canary",
-    "gatsby-remark-images": "canary",
+    "gatsby": "next",
+    "gatsby-image": "next",
+    "gatsby-plugin-feed": "next",
+    "gatsby-plugin-lodash": "next",
+    "gatsby-plugin-manifest": "next",
+    "gatsby-plugin-netlify": "next",
+    "gatsby-plugin-offline": "next",
+    "gatsby-plugin-react-helmet": "next",
+    "gatsby-plugin-sharp": "next",
+    "gatsby-plugin-typography": "next",
+    "gatsby-remark-copy-linked-files": "next",
+    "gatsby-remark-images": "next",
     "gatsby-remark-numbered-footnotes": "1.0.0",
-    "gatsby-remark-prismjs": "canary",
-    "gatsby-remark-responsive-iframe": "canary",
-    "gatsby-remark-smartypants": "canary",
-    "gatsby-source-filesystem": "canary",
-    "gatsby-transformer-remark": "canary",
-    "gatsby-transformer-sharp": "canary",
+    "gatsby-remark-prismjs": "next",
+    "gatsby-remark-responsive-iframe": "next",
+    "gatsby-remark-smartypants": "next",
+    "gatsby-source-filesystem": "next",
+    "gatsby-transformer-remark": "next",
+    "gatsby-transformer-sharp": "next",
     "lodash": "4.17.10",
-    "lodash-webpack-plugin": "0.11.5",
-    "prop-types": "15.6.2",
+    "prismjs": "^1.15.0",
     "react": "16.4.2",
     "react-dom": "16.4.2",
     "react-helmet": "5.2.0",
     "react-responsive-grid": "0.3.4",
+    "react-typography": "^0.16.13",
     "typeface-source-code-pro": "0.0.54",
     "typeface-source-sans-pro": "0.0.54",
     "typeface-source-serif-pro": "0.0.54",
@@ -62,10 +61,7 @@
     "url": "git+https://github.com/rdela/rdela.com.git"
   },
   "scripts": {
-    "build": "gatsby build",
-    "develop": "gatsby develop",
-    "format": "prettier --trailing-comma es5 --no-semi --single-quote --write \"{gatsby-*.js,src/**/*.js}\"",
-    "serve": "gatsby serve"
+    "format": "prettier --write \"{gatsby-*.js,src/**/*.js}\""
   },
   "renovate": {
     "extends": [

src/components/Bio.js

@@ -1,67 +1,43 @@
 import React from 'react'
-import ReactDOM from 'react-dom'
-import Link from 'gatsby-link'
+import { Link } from 'gatsby'
+// eslint-disable-next-line
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faEnvelope, faLink, faRss } from '@fortawesome/free-solid-svg-icons'
 import { faTwitter } from '@fortawesome/free-brands-svg-icons/faTwitter'
 import { faGithub } from '@fortawesome/free-brands-svg-icons/faGithub'
 import { faGitlab } from '@fortawesome/free-brands-svg-icons/faGitlab'
 
-import knot from '../svg/rdela-knot.svg'
-
 class Bio extends React.Component {
   render() {
     const authorNBSP = this.props.author.replace(/ /g, ' ')
     const siteEmail = this.props.siteEmail
     const siteGithub = this.props.siteGithub
     const siteGitlab = this.props.siteGitlab
-    const siteTitle = this.props.siteTitle
     const siteTwitter = this.props.siteTwitter
 
     let authorLink, linksLink
 
     authorLink = (
-      <span>
+      <Link to="/">
         <strong>
           <span dangerouslySetInnerHTML={{ __html: authorNBSP }} />
         </strong>
-      </span>
+      </Link>
     )
-    if (this.props.isHome !== true) {
-      authorLink = (
-        <Link to="/">
-          <strong>
-            <span dangerouslySetInnerHTML={{ __html: authorNBSP }} />
-          </strong>
-        </Link>
-      )
-    }
 
     linksLink = (
       <li>
-        <span>
-          <FontAwesomeIcon icon={faLink} />
-        </span>
-        {` `}
-        links
+        <Link to="/l/">
+          <span>
+            <FontAwesomeIcon icon={faLink} />
+          </span>
+          {` `}
+          links
+        </Link>
       </li>
     )
 
-    if (this.props.isLinks !== true) {
-      linksLink = (
-        <li>
-          <Link to="/l/">
-            <span>
-              <FontAwesomeIcon icon={faLink} />
-            </span>
-            {` `}
-            links
-          </Link>
-        </li>
-      )
-    }
-
     return (
       <section>
         <p>

src/components/Masthead.js

@@ -1,9 +1,9 @@
 import React from 'react'
-import Link from 'gatsby-link'
+import { Link } from 'gatsby'
 import Helmet from 'react-helmet'
 
 import knot from '../svg/rdela-knot.svg'
-import { rhythm, scale } from '../utils/typography'
+import { rhythm } from '../utils/typography'
 
 const cYear = new Date().getFullYear()
 
@@ -12,70 +12,38 @@ class Masthead extends React.Component {
     const defaultMetaDesc = this.props.description
     const siteTitle = this.props.siteTitle
     const siteTwitter = this.props.siteTwitter
-    let pTop = `48px`
     let topknot
 
     topknot = (
-      <h1
+      <h3
         style={{
-          ...scale(0.4),
           lineHeight: `2rem`,
           marginTop: 0,
-          marginBottom: rhythm(1 / 2),
+          marginBottom: rhythm(1.00875),
         }}
       >
-        <span
-          style={{
-            display: `block`,
-            width: `100%`,
-            height: `76px`,
-            backgroundImage: `url(${knot})`,
-            backgroundRepeat: `no-repeat`,
-            backgroundSize: `52px`,
-            backgroundPosition: `left top`,
-            paddingBottom: 0,
-            paddingTop: pTop,
-            marginBottom: 0,
-            marginTop: 0,
-          }}
-        >
-          {siteTitle}
-        </span>
-      </h1>
+        <Link to={'/'}>
+          <span
+            style={{
+              display: `block`,
+              width: `100%`,
+              height: `76px`,
+              backgroundImage: `url(${knot})`,
+              backgroundRepeat: `no-repeat`,
+              backgroundSize: `52px`,
+              backgroundPosition: `left top`,
+              paddingBottom: 0,
+              paddingTop: `48px`,
+              marginBottom: 0,
+              marginTop: 0,
+            }}
+          >
+            {siteTitle}
+          </span>
+        </Link>
+      </h3>
     )
 
-    if (this.props.isHome !== true) {
-      // pTop = `48px`
-      topknot = (
-        <h3
-          style={{
-            lineHeight: `2rem`,
-            marginTop: 0,
-            marginBottom: rhythm(1.00875),
-          }}
-        >
-          <Link to={'/'}>
-            <span
-              style={{
-                display: `block`,
-                width: `100%`,
-                height: `76px`,
-                backgroundImage: `url(${knot})`,
-                backgroundRepeat: `no-repeat`,
-                backgroundSize: `52px`,
-                backgroundPosition: `left top`,
-                paddingBottom: 0,
-                paddingTop: pTop,
-                marginBottom: 0,
-                marginTop: 0,
-              }}
-            >
-              {siteTitle}
-            </span>
-          </Link>
-        </h3>
-      )
-    }
 
     return (
       <header>

src/components/layout.js

@@ -0,0 +1,66 @@
+import React from 'react'
+import { graphql, StaticQuery } from 'gatsby'
+
+import { rhythm } from '../utils/typography'
+
+import Bio from '../components/Bio'
+import Masthead from '../components/Masthead'
+
+import 'typeface-source-code-pro'
+import 'typeface-source-sans-pro'
+import 'typeface-source-serif-pro'
+
+import '../css/prism/prism-tomorrow.css'
+
+export default ({ children, location }) => (
+  <StaticQuery
+    query={graphql`
+      {
+        site {
+          siteMetadata {
+            author
+            description
+            email
+            github
+            gitlab
+            siteUrl
+            title
+            twitter
+          }
+        }
+      }
+    `}
+    render={data => (
+      <div
+        style={{
+          maxWidth: rhythm(24),
+          padding: `${rhythm(1 / 2)} ${rhythm(1 / 2)}`,
+          margin: `${rhythm(1 / 2)} auto`,
+        }}
+      >
+        <Masthead
+          description={data.site.siteMetadata.description}
+          siteTitle={data.site.siteMetadata.title}
+          siteTwitter={data.site.siteMetadata.twitter}
+        />
+        {children}
+        <hr />
+        <footer
+          style={{
+            display: 'flex',
+            marginBottom: rhythm(2.5),
+          }}
+        >
+          <Bio
+            author={data.site.siteMetadata.author}
+            siteEmail={data.site.siteMetadata.email}
+            siteGithub={data.site.siteMetadata.github}
+            siteGitlab={data.site.siteMetadata.gitlab}
+            siteTitle={data.site.siteMetadata.title}
+            siteTwitter={data.site.siteMetadata.twitter}
+          />
+        </footer>
+      </div>
+    )}
+  />
+)