2019 Maintenance & Transition to Gatsby Theme

[keplersj]

Looks like it's been about a year since this site transitioned to Gatsby, per d8cf9f! Seems to me it's about time for some yearly maintenance.

Visual TL;DR

Before	After

Summary of Changes

I tried my best to make sure the commits in this PR were [atomic]. The benefit of this is that it'll make it very easy to see how we got from A to B, can revert unwanted changes, and can easily summarize the changes below.

Transition from using Static Query Higher Order Components to Hooks

In the year since this site transitioned to Gatsby, they have introduced a new useStaticQuery React Hook that can be used in place of the StaticQuery higher order component. In short React Hooks provide many of the same advantages as an HOC, while reducing some of the HOC boilerplate allowing for more flexibility and easier maintainability in components.

Use Emotion to Custom Styled Components

Previously the site was using a global stylesheet to customize a few of the Material Design Lite components on the site. Using emotion isolates the custom styles to the components they're customizing.

Define Navigation Bar Links to Site Metadata

Previously links in the nav bar were hard coded into the NavBar components. This PR moves the nav bar links to an array in gatsby-config.js allowing them to be easily customized and updated.

Transition to Material-UI from Material Design Lite

Previously this site was using Material Design Lite as a base style framework. This was convenient for transitioning to Gatsby from Jekyll, but MDL comes with several disadvantages for Gatsby. MDL is difficult to bundle during Gatsby's initial SSR render, and introduces many render bugs when the pages rehydrates in the browser. As well MDL is design for simpler sites, not using a component framework like React. Transitioning to Material-UI solves all of these issues.

Transition to a Gatsby Theme

And finally the big one, this PR transitions the site to a new Gatsby Theme, gatsby-theme-atom-service. Themes are a powerful new feature of Gatsby allowing sites to abstract entires portions of their codebase into versioned packages that can be reused else where. For this code base, this means all this repo has to worry about is the dataset it maintains and the Gatsby configuration. As well, it allows other code bases that are based on this site (like AtomBuild) to use the same theme and stay up-to-date with site updates.

---

Closes #44

[Arcanemagus]

Looks great, one minor change that I can see... and I still need to fix the deploy keys so this actually can get pushed to the site!

[keplersj]

I've updated this Pull Request to use my new tool for Gatsby, Carraway. You can see it in use in the repo for AtomBuild's website and my surname site.

[keplersj]

If it makes it easier to maintain I can add a GitHub Actions config that pushes the built site to GitHub Pages to this pull request.

[Arcanemagus]

I've fixed the GITHUB_TOKEN in Travis CI, although it looks like master is currently broken, the branch here appears to be working locally.

If it makes it easier to maintain I can add a GitHub Actions config that pushes the built site to GitHub Pages to this pull request.

That would be awesome if we could remove the dependency on TravisCI, although I'm not sure how worth it it is currently as it seems the token those jobs gets doesn't currently have sufficient rights for public repositories to deploy the page.

[Arcanemagus]

The changes look good to me in a local build.

[Arcanemagus]

I'll wait to see if you want to setup the GitHub Actions together, otherwise I'll merge this in a few days if I don't hear back. Thanks for putting this together!

[keplersj]

Set up GitHub Actions! I have the same set up working on the AtomBuild website's repo, if you'd like to see it in action.

[Arcanemagus]

Added a GITHUB_PAT token with public_repo scope, let's see if this works.

[Arcanemagus]

A reload without cache later, and it's all updated on the live site! 🎉