Set up Gatsby

[shawnbot]

👀 Preview

• Home
• News
• Team

There's a lot going on in this PR to switch over from Next to Gatsby. Notably:

1. We're deploying with the Now GitHub integration and using v2 with the same build configuration as Doctocat. The big win here is getting to specify routes in now.json so that every deployment can test sub-site URLs (/css/utilities, /components, etc.). 🤘

2. Our custom babel config is gone. 🔥

3. We've switched to using Yarn instead of npm so that we can leverage selective version resolutions to force @primer/blueprints and @primer/components to use the version of React that we want. This appears to be the only way to prevent multiple versions of react-dom from being bundled, which breaks the app. ☹️

   (Huge props to @colebemis for pointing me to the solution here!)

4. There is now a contributing.md describing (for now) just the development workflow. 📝

5. Many of the social card and SEO-related files are currently ignored; I'll file a separate issue to get them all working with gatsby-plugin-manifest. 📦

6. Upgrading @svgr/webpack for use with gatsby-plugin-svgr meant having to rewrite all of the imports and add an SVGO config that disables removal of the viewBox attribute, which is required to preserve aspect ratios. So:

   // before:
   import SomeVector from './some-vector.svg'
   // after:
   import {ReactComponent as SomeVector} from './some-vector.svg'

7. All of our data — team content, releases, and "news" items — now lives in src/data/.

@emplums I wasn't able to figure out how to make the @primer/blueprints' Header component not prefix links with https://primer.style. Any ideas there?

[vercel]

This pull request is automatically deployed with Now.
To access deployments, click Details below or on the icon next to each push.

Latest deployment for this branch: https://primer-style-git-use-gatsby.primer.now.sh

[simurai]

The spacing is slightly different in some places.. for example on the home page some margin is missing for "Keep in touch":

It also seems that there is a slight difference in colors for SVGs? The blue in the header graphic is blue a bit lighter?

Maybe it's because the SVGs get optimized and it reduces the color pallete? Anyways, no real blocker.

[shawnbot]

@simurai yeah, I noticed that too. Seeing as we're redesigning the entire thing and this is just a step in that process (see #152, #153, #154, and #155), I think the spacing issues are acceptable.

[broccolini]

@shawnbot I think this is a sensible first ship, I did a quick scan over the site and didn't see any issues. Probably good to get a more thorough code review before shipping though!

[broccolini]

Seeing as we're redesigning the entire thing and this is just a step in that process (see #152, #153, #154, and #155), I think the spacing issues are acceptable.

The open source/keep in touch section is likely to stay for a while as you're only working on release 1 and part of 2. So I think it's worth correcting the spacing, should be a quick fix.

[emplums]

Regarding switching to yarn to deal with the react-dom versions, since we won't be using Blueprints anymore after the gatsby theme is finished, I don't think that we should switch to yarn. All of our other projects are using npm and for consistency sake we should use npm here too, if anything we should bump the react-dom version in whichever repo has an older version.

[shawnbot]

Regarding switching to yarn to deal with the react-dom versions, since we won't be using Blueprints anymore after the gatsby theme is finished, I don't think that we should switch to yarn. All of our other projects are using npm and for consistency sake we should use npm here too, if anything we should bump the react-dom version in whichever repo has an older version.

@emplums I absolutely agree! We can ditch Yarn as soon as we're able to replace the Blueprints header with the one from Doctocat.

[colebemis]

Looks good to me 🚢