Add about

gatsby-config.js

@@ -1,8 +1,8 @@
 module.exports = {
  siteMetadata: {
- title: `Route Map Maker`,
- description: `Kick off your next, great Gatsby project with this default starter. This barebones starter ships with the main Gatsby configuration files you might need.`,
- author: `@gatsbyjs`,
+ title: `BSicon map generator`,
+ description: `Creates random maps using BSicons`,
+ author: `Chris Zetter`,
  },
  plugins: [
  `gatsby-plugin-react-helmet`,

src/components/app.css

@@ -73,6 +73,10 @@ input[type="submit"] {
  cursor: pointer;
 }
 
+a, a:visited, a:active, a:hover, a:link {
+ color: white;
+}
+
 @keyframes fade-in {
  0% {
  opacity: 0;

src/pages/index.js

@@ -50,10 +50,17 @@ const IndexPage = () => {
  {(tab === 'about') &&
  <div>
  <h3>About</h3>
+ <p>This makes random maps using BSicons from Wikipedia.</p>
+ <p>
+ <a href="https://chriszetter.com/blog/2020/06/25/mapping-anything-with-bsicons/">Find out more about BSicons</a>
+ {' '}and how{' '}
+ <a href="https://chriszetter.com/blog/2020/06/26/generating-random-maps/">the generator was made</a>.
+ </p>
+ <p><a href="https://github.com/zetter/route-map-maker">Code on github</a>.</p>
  </div>
  }
  </div>
- <SEO title="Route Map Maker" />
+ <SEO />
  <div className="canvas-wrapper">
  <canvas className="canvas" ref={canvas} width={`${width}px`} height={`${height}px`} />
  </div>