Update homepage and other small fixes (#198)

* Update conf and chapter section

* Fix accessibility warnings for speaker component

* Add external link component

* Fix speaker css

* Fix mobile padding on sponsorship section

* Update links to external conference pages

* Add some 2019 photos

* Set font size of icon in external link

* Load font awesome styles before SSR icon

* Prevent fontawesome from dynamically adding its css since we did it manually

* Update homepage copy

Author: deweydell

src/components/link/index.js

@@ -0,0 +1,29 @@
+import React from 'react'
+// This ensures that the icon CSS is loaded immediately before attempting to render icons
+import '@fortawesome/fontawesome-svg-core/styles.css'
+import { config } from '@fortawesome/fontawesome-svg-core'
+// Prevent fontawesome from dynamically adding its css since we did it manually above
+config.autoAddCss = false
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faExternalLinkAlt, faFilePdf } from '@fortawesome/free-solid-svg-icons'
+import { faMeetup } from '@fortawesome/free-brands-svg-icons'
+
+export const ExternalLink = ({ href, text, icon }) => {
+  function setIcon() {
+    switch (icon) {
+      case 'pdf':
+        return faFilePdf
+      case 'meetup':
+        return faMeetup
+      default:
+        return faExternalLinkAlt
+    }
+  }
+
+  return (
+    <a href={href} className="link" target="_blank" rel="noopener noreferrer">
+      {text}&nbsp;
+      <FontAwesomeIcon icon={setIcon()} aria-hidden />
+    </a>
+  )
+}

src/components/menu/index.js

@@ -1,4 +1,9 @@
 import React, { useState } from 'react'
+// This ensures that the icon CSS is loaded immediately before attempting to render icons
+import '@fortawesome/fontawesome-svg-core/styles.css'
+import { config } from '@fortawesome/fontawesome-svg-core'
+// Prevent fontawesome from dynamically adding its css since we did it manually above
+config.autoAddCss = false
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faBars, faTimes } from '@fortawesome/free-solid-svg-icons'
 import { navigate } from 'gatsby'

src/components/speaker/index.js

@@ -145,8 +145,12 @@ export const SpeakerButton = ({ speaker }) => {
 const SpeakerHeadshot = ({ speaker }) => {
   const [dialogIsOpen, setDialogIsOpen] = useState(false)
   return (
-    <>
-      <figure className={styles.speaker} onClick={() => setDialogIsOpen(true)}>
+    <button
+      className={styles.speakerHeadshotButton}
+      onClick={() => setDialogIsOpen(true)}
+      onKeyDown={() => setDialogIsOpen(true)}
+    >
+      <figure className={styles.speaker}>
         <img
           src={speaker.headshot ? speaker.headshot : randomPlaceholder()}
           alt={`${speaker.name} headshot`}
@@ -164,7 +168,7 @@ const SpeakerHeadshot = ({ speaker }) => {
         speaker={speaker}
         showLinkToTalk={true}
       />
-    </>
+    </button>
   )
 }
 

src/components/speaker/speaker.module.css

@@ -63,6 +63,25 @@
   }
 }
 
+.speakerHeadshotButton {
+  -webkit-appearance: unset;
+  line-height: unset;
+  background: none;
+  border: none;
+  text-align: unset;
+  padding: 0;
+  align-items: unset;
+  color: unset;
+  display: unset;
+  &:focus {
+    outline: none;
+    .headshot {
+      box-shadow: 8px 8px var(--tan);
+      cursor: pointer;
+    }
+  }
+}
+
 /* Speaker Dialog Styles */
 
 .dialog {

src/components/sponsors/index.js

@@ -1,6 +1,7 @@
 import React from 'react'
 
 import Sponsor from '../sponsor'
+import { ExternalLink } from '../link'
 
 import styles from './sponsors.module.css'
 
@@ -68,14 +69,11 @@ const Sponsors = ({ sponsors, isConference }) => {
               <span className="italic">sponsor@writespeakcode.com</span> to
               learn more.
             </p>
-            <a
-              className="link"
-              target="_blank"
-              rel="noopener noreferrer"
+            <ExternalLink
               href="https://drive.google.com/file/d/1X-nDSHYiPiPT79Rc1xUAZCNxvr67ei6J/view?usp=sharing"
-            >
-              2019 Sponsorship Prospectus
-            </a>
+              text="2019 Sponsorship Prospectus"
+              icon="pdf"
+            />
           </div>
         </div>
       </div>

src/components/sponsors/sponsors.module.css

@@ -7,7 +7,7 @@
 }
 
 .info {
-  padding: 2em;
+  padding: 2em 2em 0 2em;
 }
 
 .wrap {
@@ -39,7 +39,7 @@
 }
 
 .cta {
-  padding: 2em;
+  padding: 0 2em 2em 2em;
   a {
     margin-top: 1em;
     display: inline;
@@ -101,10 +101,12 @@
   .cta {
     max-width: 35%;
     margin: 2em;
+    padding: 2em;
   }
 
   .info {
     max-width: 50%;
+    padding: 2em;
   }
 
   .grid {