fix: 🐛 Guard the use of window object during Gatsby build

Used advice in this issue: gatsbyjs/gatsby#309

package.json

@@ -5,6 +5,7 @@
   "version": "0.2.0",
   "author": "Jon Pepler",
   "dependencies": {
+    "@loadable/component": "^5.12.0",
     "gatsby": "^2.19.45",
     "gatsby-image": "^2.2.44",
     "gatsby-plugin-manifest": "^2.2.48",
@@ -13,6 +14,7 @@
     "gatsby-plugin-sharp": "^2.4.13",
     "gatsby-source-filesystem": "^2.1.56",
     "gatsby-transformer-sharp": "^2.3.19",
+    "localstorage-memory": "^1.0.3",
     "prop-types": "^15.7.2",
     "react": "^16.12.0",
     "react-color": "^2.18.0",

src/components/asteroids.js

@@ -1,5 +1,5 @@
 import React from 'react'
-import Sketch from 'react-p5'
+import {loadableSketch as Sketch} from './loadable-react-p5'
 
 import { get } from '../services/storage'
 

src/components/loadable-react-p5.js

@@ -0,0 +1,2 @@
+import Loadable from "@loadable/component"
+export const loadableSketch = Loadable(() => import('react-p5'))

src/services/storage.js

@@ -1,4 +1,11 @@
+import localStorageMemory from 'localstorage-memory'
 import { getDefault } from './defaults'
 
-export const get = key => localStorage.getItem(key) || getDefault(key) || ''
-export const set = (key, value) => localStorage.setItem(key, value)
+// Used to handle lack of window object in Gatsby build
+const windowGlobal = typeof window !== 'undefined' && window
+const storage = windowGlobal ?
+  windowGlobal.localStorage :
+  localStorageMemory
+;
+export const get = key => storage.getItem(key) || getDefault(key) || ''
+export const set = (key, value) => storage.setItem(key, value)