chore: add comments, setup instructions

src/components/Layout.js

@@ -8,6 +8,7 @@ import { withTheme } from "emotion-theming"
 const Layout = ({ children, theme }) => (
   <>
     <Helmet title="Sol Journal" />
+    {/* some styles should applied globally via the layout */}
     <Global
       styles={css`
         * {

src/components/Navbar.js

@@ -111,6 +111,7 @@ const Navbar = ({ authUser, theme, toggleTheme }) => (
   </Header>
 )
 
+// on langing page and simple pages outside the app, simplify link options
 const SimpleNav = ({ authUser, theme }) => (
   <Header>
     <Nav>

src/components/PrivateRoute.js

@@ -1,6 +1,7 @@
 import React from "react"
 import { Redirect, Location } from "@reach/router"
 
+// when a user isn't logged in, force a redirect
 const PrivateRoute = ({ component: Component, authed, ...rest }) => {
   return (
     <Location>

src/components/context/online.js

@@ -1,5 +1,6 @@
 import React from "react"
 
+// when navigator is available outside of the build phase, provide it through Context
 export const OnlineContext = React.createContext({
   online: typeof window !== "undefined" && navigator && navigator.onLine,
 })

src/components/context/theme.js

@@ -2,6 +2,8 @@ import React from "react"
 import { Helmet } from "react-helmet"
 import theme from "styles/theme"
 
+// create an app-wide context for the theme being used as
+// well as a function to toggle it back and forth
 const ThemeTogglerContext = React.createContext({
   themeName: "LIGHT",
   toggle: () => {},

src/components/elements.js

@@ -71,6 +71,7 @@ export const P = styled.p`
   color: ${props => props.theme.colors.secondary};
 `
 
+// prepend links used within the app section with app
 export const AppLink = props => <Link {...props} to={"/app" + props.to} />
 
 export const StyledLink = withTheme(styled(AppLink)`

src/components/firebase/context.js

@@ -1,5 +1,6 @@
 import React from "react"
 
+// create context of firebase instance
 const FirebaseContext = React.createContext(null)
 
 export const withFirebase = Component => props => (

src/components/firebase/fire.js

@@ -2,6 +2,8 @@ import app from "firebase/app"
 import "firebase/auth"
 import "firebase/firestore"
 
+// store private keys in .env file
+// the prefix GATSBY_ is necessary here
 const config = {
   apiKey: process.env.GATSBY_FIREBASE_API_KEY,
   authDomain: process.env.GATSBY_DEV_AUTH_DOMAIN,
@@ -13,6 +15,8 @@ const config = {
 
 class Firebase {
   constructor() {
+    // protect with conditional so gatsby build doesn't have
+    // issues trying to access the window object
     if (typeof window !== "undefined") {
       app.initializeApp(config)
       this.auth = app.auth()
@@ -34,20 +38,25 @@ class Firebase {
     }
   }
 
-  // Auth
+  // authentication
+  // create user in the database
   doCreateUserWithEmailAndPassword = (email, password) =>
     this.auth.createUserWithEmailAndPassword(email, password)
 
+  // login already existing user
   doSignInWithEmailAndPassword = (email, password) =>
     this.auth.signInWithEmailAndPassword(email, password)
 
+  // sign out user
   doSignOut = () => {
     this.auth.signOut()
     window.location.replace("/login")
   }
 
+  // send email reset to email provided
   doPasswordReset = email => this.auth.sendPasswordResetEmail(email)
 
+  // change password to password provided
   doPasswordUpdate = password => this.auth.currentUser.updatePassword(password)
 }
 

src/components/session/withAuthentication.js

@@ -3,11 +3,14 @@ import React from "react"
 import AuthUserContext from "./context"
 import { withFirebase } from "components/firebase"
 
+// use context to provide all app components with information about
+// the authUser if it's been put in localStorage
 const withAuthentication = Component => {
   class WithAuthentication extends React.Component {
     constructor(props) {
       super(props)
 
+      // protect browser API's like localStorage so Gatsby builds don't fail
       if (typeof window !== "undefined") {
         this.state = {
           authUser: JSON.parse(localStorage.getItem("authUser")),
@@ -20,6 +23,7 @@ const withAuthentication = Component => {
     componentDidMount() {
       this.listener = this.props.firebase.auth.onAuthStateChanged(
         authUser => {
+          // accessing localStorage in componentDidMount is fine in Gatsby
           localStorage.setItem("authUser", JSON.stringify(authUser))
           if (authUser) {
             this.setState({