Add hero, sponsors, and style to chapter page

Author: deweydell

content/chapters/seattle.json

@@ -1,3 +1,5 @@
 {
-  "city": "Seattle"
+  "city": "Seattle",
+  "photo": "chapters/seattle.jpg",
+  "meetup": "https://www.meetup.com/WSC-Seattle"
 }

gatsby-node.js

@@ -48,6 +48,7 @@ exports.createPages = ({ actions, graphql }) => {
           node {
             id
             city
+            photo
             fields {
               slug
             }
@@ -81,12 +82,14 @@ exports.createPages = ({ actions, graphql }) => {
     chapterPages.forEach(edge => {
       const id = edge.node.id
       const city = edge.node.city
+      const photo = edge.node.photo
       createPage({
         path: edge.node.fields.slug,
         component: path.resolve(`src/templates/chapter.js`),
         context: {
           id,
           city,
+          photo,
         },
       })
     })

src/components/external-link/index.js

@@ -0,0 +1,12 @@
+import React from 'react'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faExternalLinkAlt } from '@fortawesome/free-solid-svg-icons'
+
+const ExternalLink = ({ href, text }) => (
+  <a href={href} className="link" target="_blank" rel="noopener noreferrer">
+    {text}&nbsp;
+    <FontAwesomeIcon icon={faExternalLinkAlt} aria-hidden />
+  </a>
+)
+
+export default ExternalLink

src/components/header/index.js

@@ -30,7 +30,6 @@ const Header = () => {
           <Img
             fixed={data.file.childImageSharp.fixed}
             alt="Write/Speak/Code logo in full color"
-            className={styles.logo}
           />
         </Link>
         <Menu />

src/components/hero/hero.module.css

@@ -0,0 +1,35 @@
+.overlay {
+  background: linear-gradient(
+    to right,
+    RGBA(255, 255, 255, 0.5),
+    RGBA(255, 255, 255, 0.5)
+  );
+  width: 100%;
+  height: 100%;
+  display: table;
+}
+
+.hero {
+  margin: 4em 2em;
+  @media screen and (min-width: 50em) {
+    margin: 8em 2em;
+  }
+  @media screen and (min-width: 95em) {
+    max-width: var(--container);
+    margin: 8em auto;
+  }
+
+  h1,
+  a {
+    display: inline;
+    background: var(--white);
+    padding: 0.25em 0.5em;
+  }
+  a {
+    background-color: var(--mint);
+  }
+}
+
+.cta {
+  margin-top: 1em;
+}

src/components/hero/index.js

@@ -0,0 +1,27 @@
+import React from 'react'
+import BackgroundImage from 'gatsby-background-image'
+import ExternalLink from '../external-link'
+
+import styles from './hero.module.css'
+
+const Hero = ({ title, link, photo }) => (
+  <div className={styles.container}>
+    <BackgroundImage
+      Tag="section"
+      fluid={photo}
+      backgroundColor={`var(--mint)`}
+      alt={`${title} chapter photo`}
+    >
+      <div className={styles.overlay}>
+        <section className={styles.hero}>
+          <h1>{title}</h1>
+          <div className={styles.cta}>
+            <ExternalLink href={link} text="Join the meetup group" />
+          </div>
+        </section>
+      </div>
+    </BackgroundImage>
+  </div>
+)
+
+export default Hero

src/components/sponsors/index.js

@@ -46,6 +46,19 @@ import techbychoice from '../../../content/sponsors/techbychoice.json'
 import brooklynjs from '../../../content/sponsors/brooklynjs.json'
 import outintech from '../../../content/sponsors/out-in-tech.json'
 
+// Basic grid component for chapter pages
+export const SponsorsGrid = ({ sponsors }) => (
+  <section className={[styles['other'], styles.levelSection].join(' ')}>
+    <h3 className={styles.heading}>Chapter Sponsors</h3>
+    <div className={styles.grid}>
+      {sponsors.map(sponsor => (
+        <Sponsor company={sponsor.node} key={sponsor.id} />
+      ))}
+    </div>
+  </section>
+)
+
+// Custom grid for homepage and conference page
 const Sponsors = ({ sponsors, isConference }) => {
   return (
     <section id="sponsorship">

src/images/chapters/seattle.jpg

@@ -64,6 +64,14 @@ a {
   color: inherit;
 }
 
+.container {
+  margin: 2em;
+  @media screen and (min-width: 90em) {
+    max-width: var(--container);
+    margin: 0 auto;
+  }
+}
+
 .link {
   display: inline;
   border-bottom: 4px solid;

src/layouts/base.css

@@ -1,29 +1,44 @@
 import React from 'react'
 import { graphql } from 'gatsby'
-import Layout from '../layouts/default'
+import { SkipNavLink, SkipNavContent } from '@reach/skip-nav'
+import Header from '../components/header'
+import Footer from '../components/footer'
+import { SponsorsGrid } from '../components/sponsors'
+
+import Hero from '../components/hero'
 
 const ChapterTemplate = ({ data }) => {
   const { chaptersJson: chapter, allSponsorsJson: sponsors } = data
   return (
-    <Layout>
-      <section>
-        <h1>{chapter.city}</h1>
-        <ul>
-          {sponsors.edges.map(sponsor => (
-            <li key={sponsor.node.id}>{sponsor.node.name}</li>
-          ))}
-        </ul>
-      </section>
-    </Layout>
+    <>
+      <SkipNavLink />
+      <Header />
+      <SkipNavContent>
+        <main>
+          <Hero
+            title={chapter.city}
+            link={chapter.meetup}
+            photo={data.file.childImageSharp.fluid}
+          />
+
+          <section className="container">
+            <SponsorsGrid sponsors={sponsors.edges} />
+          </section>
+        </main>
+      </SkipNavContent>
+      <Footer />
+    </>
   )
 }
 
 export default ChapterTemplate
 
 export const chapterQuery = graphql`
-  query Chapter($id: String!, $city: String!) {
+  query Chapter($id: String!, $city: String!, $photo: String!) {
     chaptersJson(id: { eq: $id }) {
       city
+      meetup
+      photo
     }
     allSponsorsJson(
       filter: { sponsorships: { elemMatch: { city: { eq: $city } } } }
@@ -37,5 +52,12 @@ export const chapterQuery = graphql`
         }
       }
     }
+    file(relativePath: { eq: $photo }) {
+      childImageSharp {
+        fluid(maxWidth: 3600) {
+          ...GatsbyImageSharpFluid_tracedSVG
+        }
+      }
+    }
   }
 `