Adopt Gatsby

.circleci/config.yml

@@ -196,6 +196,9 @@ jobs:
       - run:
           name: Danger
           when: always
+          environment:
+            # https://github.com/gatsbyjs/gatsby/pull/11555
+            NODE_ENV: test
           command: npm run danger ci
 
   frontend:

.eslintignore

@@ -1,3 +1,4 @@
 /build
 /coverage
 /__snapshots__
+/public

.gitignore

@@ -102,3 +102,7 @@ service-definitions.yml
 
 # Template for the local runtime configuration.
 !/config/local*.template.yml
+
+# Gatsby
+/.cache
+/public

.nowignore

@@ -0,0 +1,30 @@
+*
+!frontend/
+!gh-badges/
+!lib/
+!core/
+!logo/
+!pages/
+!public/
+!templates/
+!services/
+!package-lock.json
+!/*.js
+!scripts/export-*.js
+!config/
+config/local*.yml
+*.spec.js
+*~
+.env
+.circleci
+.github
+.vscode
+__snapshots__
+.buildpacks
+.eslint*
+.editorconfig
+.nycrc*
+.gitpod*
+.prettier*
+CONTRIBUTING.md
+Dockerfile

.nycrc-frontend.json

@@ -1,9 +1,10 @@
 {
   "reporter": ["lcov"],
-  "all": true,
+  "all": false,
   "silent": true,
   "clean": false,
   "sourceMap": false,
   "instrument": false,
-  "exclude": ["**/*.spec.js"]
+  "include": ["frontend/**/*.js"],
+  "exclude": ["**/*.spec.js", "**/mocha-*.js"]
 }

.nycrc.json

@@ -9,7 +9,7 @@
     "**/test-helpers.js",
     "**/*-test-helpers.js",
     "dangerfile.js",
-    "next.config.js",
+    "gatsby-*.js",
     "services/**/*.tester.js",
     "services/service-tester.js",
     "services/create-service-tester.js",

.prettierignore

@@ -3,6 +3,7 @@ package-lock.json
 /__snapshots__
 /.next
 /build
+/public
 /coverage
 private/*.json
 /.nyc_output

Makefile

@@ -48,7 +48,7 @@ push-s2:
 deploy-gh-pages:
 	rm -rf ${FRONTEND_TMP}
 	git worktree prune
-	BASE_URL=https://img.shields.io \
+	GATSBY_BASE_URL=https://img.shields.io \
 		NEXT_ASSET_PREFIX=https://shields.io \
 		npm run build
 	git worktree add -B gh-pages ${FRONTEND_TMP}

README.md

@@ -1,5 +1,5 @@
 <p align="center">
-    <img src="https://rawgit.com/badges/shields/master/static/logo.svg"
+    <img src="https://rawgit.com/badges/shields/master/frontend/static/logo.svg"
         height="130">
 </p>
 <p align="center">
@@ -116,9 +116,6 @@ Please report any Gitpod bugs, questions, or suggestions in issue
 
 [![Edit with Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/badges/shields)
 
-To analyze the frontend bundle, run `npm install webpack-bundle-analyzer` and
-then `ANALYZE=true npm start`.
-
 [Snapshot tests][] ensure we don't inadvertently make changes that affect the
 SVG or JSON output. When deliberately changing the output, run
 `SNAPSHOT_DRY=1 npm run test:js:server` to preview changes to the saved

core/base-service/legacy-result-sender.js

@@ -1,9 +1,16 @@
 'use strict'
 
+const fs = require('fs')
+const path = require('path')
 const stream = require('stream')
 const svg2img = require('../../gh-badges/lib/svg-to-img')
 const log = require('../server/log')
 
+const internalError = fs.readFileSync(
+  path.resolve(__dirname, '..', 'server', 'error-pages', '500.html'),
+  'utf-8'
+)
+
 function streamFromString(str) {
   const newStream = new stream.Readable()
   newStream._read = () => {
@@ -13,16 +20,6 @@ function streamFromString(str) {
   return newStream
 }
 
-function makeSend(format, askres, end) {
-  if (format === 'svg') {
-    return res => sendSVG(res, askres, end)
-  } else if (format === 'json') {
-    return res => sendJSON(res, askres, end)
-  } else {
-    return res => sendOther(format, res, askres, end)
-  }
-}
-
 function sendSVG(res, askres, end) {
   askres.setHeader('Content-Type', 'image/svg+xml;charset=utf-8')
   end(null, { template: streamFromString(res) })
@@ -39,7 +36,7 @@ function sendOther(format, res, askres, end) {
     .catch(err => {
       // This emits status code 200, though 500 would be preferable.
       log.error('svg2img error', err)
-      end(null, { template: '500.html' })
+      end(internalError)
     })
 }
 
@@ -49,6 +46,16 @@ function sendJSON(res, askres, end) {
   end(null, { template: streamFromString(res) })
 }
 
+function makeSend(format, askres, end) {
+  if (format === 'svg') {
+    return res => sendSVG(res, askres, end)
+  } else if (format === 'json') {
+    return res => sendJSON(res, askres, end)
+  } else {
+    return res => sendOther(format, res, askres, end)
+  }
+}
+
 module.exports = {
   makeSend,
 }

core/server/server.js

@@ -1,5 +1,6 @@
 'use strict'
 
+const fs = require('fs')
 const bytes = require('bytes')
 const path = require('path')
 const url = require('url')
@@ -25,6 +26,11 @@ const PrometheusMetrics = require('./prometheus-metrics')
 const optionalUrl = Joi.string().uri({ scheme: ['http', 'https'] })
 const requiredUrl = optionalUrl.required()
 
+const notFound = fs.readFileSync(
+  path.resolve(__dirname, 'error-pages', '404.html'),
+  'utf-8'
+)
+
 const publicConfigSchema = Joi.object({
   bind: {
     port: Joi.number().port(),
@@ -172,7 +178,7 @@ module.exports = class Server {
     })
 
     camp.notfound(/.*/, (query, match, end, request) => {
-      end(null, { template: '404.html' })
+      end(notFound)
     })
   }
 
@@ -238,7 +244,7 @@ module.exports = class Server {
     log(`Server is starting up: ${this.baseUrl}`)
 
     const camp = (this.camp = Camp.start({
-      documentRoot: path.join(__dirname, '..', '..', 'public'),
+      documentRoot: path.resolve(__dirname, '..', '..', 'public'),
       port,
       hostname,
       secure,

core/server/server.spec.js

@@ -106,7 +106,7 @@ describe('The server', function() {
 
   context('with svg2img error', function() {
     const expectedError = fs.readFileSync(
-      path.resolve(__dirname, '..', '..', 'public', '500.html')
+      path.resolve(__dirname, 'error-pages', '500.html')
     )
 
     let toBufferStub

dangerfile.js

@@ -39,8 +39,7 @@ const packageJson = fileMatch('package.json')
 const packageLock = fileMatch('package-lock.json')
 const secretsDocs = fileMatch('doc/server-secrets.md')
 const capitals = fileMatch('**/*[A-Z]*.js')
-// _document.js is used by convention by Next.
-const underscores = fileMatch('**/*_*.js', '!pages/_document.js')
+const underscores = fileMatch('**/*_*.js')
 const targetBranch = danger.github.pr.base.ref
 
 message(

doc/self-hosting.md

@@ -119,10 +119,10 @@ These are documented in [server-secrets.md](./server-secrets.md)
 If you want to host the frontend on a separate server, such as cloud storage
 or a CDN, you can do that.
 
-First, build the frontend, pointing `BASE_URL` to your server.
+First, build the frontend, pointing `GATSBY_BASE_URL` to your server.
 
 ```sh
-BASE_URL=https://your-server.example.com npm run build
+GATSBY_BASE_URL=https://your-server.example.com npm run build
 ```
 
 Then copy the contents of the `build/` folder to your static hosting / CDN.

frontend/components/category-headings.js

@@ -1,14 +1,14 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import styled from 'styled-components'
-import { Link, NavLink } from 'react-router-dom'
+import { Link } from 'gatsby'
 import { H3 } from './common'
 
 const CategoryHeading = ({ category }) => {
   const { id, name } = category
 
   return (
-    <Link to={`/examples/${id}`}>
+    <Link to={`/category/${id}`}>
       <H3 id={id}>{name}</H3>
     </Link>
   )
@@ -67,9 +67,7 @@ const CategoryNav = ({ categories }) => (
     <ul>
       {categories.map(({ id, name }) => (
         <li key={id}>
-          <NavLink to={`/examples/${id}`} activeClassName="active">
-            {name}
-          </NavLink>
+          <Link to={`/category/${id}`}>{name}</Link>
         </li>
       ))}
     </ul>

frontend/components/donate.js

@@ -1,20 +1,16 @@
 import React from 'react'
+import styled from 'styled-components'
 
-export default class DonateBox extends React.Component {
-  render() {
-    return (
-      <div>
-        <div id="donate">
-          Love Shields? Please consider{' '}
-          <a href="https://opencollective.com/shields">donating</a> to sustain
-          our activities
-        </div>
-        <style jsx>{`
-          #donate {
-            padding: 25px 50px;
-          }
-        `}</style>
-      </div>
-    )
-  }
-}
+const Donate = styled.div`
+  padding: 25px 50px;
+`
+
+const DonateBox = () => (
+  <Donate>
+    Love Shields? Please consider{' '}
+    <a href="https://opencollective.com/shields">donating</a> to sustain our
+    activities
+  </Donate>
+)
+
+export default DonateBox

frontend/components/header.js

@@ -1,7 +1,8 @@
-import { Link } from 'react-router-dom'
+import { Link } from 'gatsby'
 import React from 'react'
 import styled from 'styled-components'
 import { VerticalSpace } from './common'
+import Logo from '../images/logo.svg'
 
 const Highlights = styled.p`
   font-style: italic;
@@ -10,7 +11,7 @@ const Highlights = styled.p`
 export default () => (
   <section>
     <Link to="/">
-      <img alt="Shields.io" src="/static/logo.svg" />
+      <Logo />
     </Link>
 
     <VerticalSpace />

frontend/components/main.js

@@ -48,11 +48,14 @@ export default class Main extends React.Component {
   }
 
   static propTypes = {
-    match: PropTypes.object.isRequired,
-  }
-
-  get category() {
-    return this.props.match.params.category
+    // `pageContext` is the `context` passed to `createPage()` in
+    // `gatsby-node.js`. In the case of the index page, `pageContext` is empty.
+    pageContext: {
+      category: PropTypes.shape({
+        id: PropTypes.string.isRequired,
+        name: PropTypes.string.isRequired,
+      }),
+    }.isRequired,
   }
 
   performSearch(query) {
@@ -114,11 +117,11 @@ export default class Main extends React.Component {
   }
 
   renderMain() {
-    const { category: categoryId } = this
+    const {
+      pageContext: { category },
+    } = this.props
     const { isSearchInProgress, isQueryTooShort, searchResults } = this.state
 
-    const category = findCategory(categoryId)
-
     if (isSearchInProgress) {
       return <div>searching...</div>
     } else if (isQueryTooShort) {
@@ -129,7 +132,7 @@ export default class Main extends React.Component {
       )
     } else if (category) {
       const definitions = ServiceDefinitionSetHelper.create(
-        getDefinitionsForCategory(categoryId)
+        getDefinitionsForCategory(category.id)
       )
         .notDeprecated()
         .toArray()
@@ -139,12 +142,6 @@ export default class Main extends React.Component {
           {this.renderCategory(category, definitions)}
         </div>
       )
-    } else if (categoryId) {
-      return (
-        <div>
-          Unknown category <b>{categoryId}</b>
-        </div>
-      )
     } else {
       return <CategoryHeadings categories={categories} />
     }