Use prettier on scss files, use semantic html, pull styles to classNames

Author: BrianMitchL

package.json

@@ -36,7 +36,7 @@
     "deploy": "gatsby build --prefix-links && gh-pages -a -d public -b master",
     "develop": "gatsby develop",
     "start": "npm run develop",
-    "format": "prettier --write \"src/**/*.{js,json,css}\""
+    "format": "prettier --write \"src/**/*.{js,json,scss,css}\""
   },
   "devDependencies": {
     "gh-pages": "^2.0.1",
@@ -54,7 +54,7 @@
     }
   },
   "lint-staged": {
-    "{src}/**/*.{js,json,css}": [
+    "{src}/**/*.{js,json,scss,css}": [
       "prettier --write",
       "git add"
     ]

src/components/Meetup.js

@@ -11,13 +11,13 @@ const MeetupDescription = ({ name, time, venue }) => (
       <strong>Next Event:</strong>
       <div className="event-name">{name}</div>
       {time &&
-      venue &&
-      venue.name && (
-        <span className="next-event-timestamp">
-                {format(new Date(time), 'dddd, MMMM Do, YYYY')} at{' '}
-          <strong>{venue.name}</strong>
-              </span>
-      )}
+        venue &&
+        venue.name && (
+          <span className="next-event-timestamp">
+            {format(new Date(time), 'dddd, MMMM Do, YYYY')} at{' '}
+            <strong>{venue.name}</strong>
+          </span>
+        )}
     </div>
   </div>
 )
@@ -46,7 +46,7 @@ class Meetup extends Component {
           venue,
           loading: false,
           error: false,
-        }),
+        })
       )
       .catch(() => this.setState({ loading: false, error: true }))
   }
@@ -65,7 +65,7 @@ class Meetup extends Component {
     //   },
     // }
 
-    if (this.state.loading) return <MeetupDescription name={'Loading...'}/>
+    if (this.state.loading) return <MeetupDescription name={'Loading...'} />
 
     if (this.state.error)
       return (

src/components/footer.js

@@ -2,7 +2,7 @@ import React from 'react'
 import { Link, withPrefix } from 'gatsby'
 
 const Footer = () => (
-  <div style={{ maxWidth: '100vw' }} className="footer">
+  <footer className="footer">
     <div className="footer-content">
       <div className="footer-column footer-sitemap">
         <h6>Meetup</h6>
@@ -23,9 +23,7 @@ const Footer = () => (
         </div>
       </div>
     </div>
-  </div>
+  </footer>
 )
 
-Footer.propTypes = {}
-
 export default Footer

src/components/header.js

@@ -6,11 +6,7 @@ import jsmnImg from '../images/JSMN-opaque-js.png'
 
 const Header = () => (
   <Headroom style={{ background: '#fff' }}>
-    <div className="primary-navigation" style={{
-      maxWidth: 960,
-      marginLeft: 'auto',
-      marginRight: 'auto',
-    }}>
+    <nav className="primary-navigation">
       <div className="logo-container">
         <Link to={withPrefix('/')}>
           <img className="logo" src={jsmnImg} alt="Logo for JavaScriptMN" />
@@ -23,7 +19,7 @@ const Header = () => (
           Speak
         </Link>
       </div>
-    </div>
+    </nav>
   </Headroom>
 )
 

src/components/image.js

@@ -35,9 +35,9 @@ const Layout = ({ children }) => (
           <GoogleFont typography={typography} />
         </Helmet>
         <Header />
-        <div className="content-body" style={{ maxWidth: '100vw' }}>
+        <min role="main" className="content-body">
           {children}
-        </div>
+        </min>
         <Footer />
       </div>
     )}