WIP: Add Seattle pilot page

content/chapters/seattle.json

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

content/sponsors/climate-corporation.json

@@ -3,7 +3,17 @@
   "url": "https://climate.com/",
   "logo": "/images/climate-corporation.jpg",
   "sponsorships": [
-    { "year": "2019", "level": "Local Meetup SEA", "conf_sponsor": false },
-    { "year": "2019", "level": "Local Meetup SF", "conf_sponsor": false }
+    {
+      "year": "2019",
+      "level": "Local Meetup SEA",
+      "conf_sponsor": false,
+      "city": "Seattle"
+    },
+    {
+      "year": "2019",
+      "level": "Local Meetup SF",
+      "conf_sponsor": false,
+      "city": "San Francisco"
+    }
   ]
 }

content/sponsors/glympse.json

@@ -3,6 +3,11 @@
   "url": "https://www.glympse.com",
   "logo": "/images/glympse.jpg",
   "sponsorships": [
-    { "year": "2019", "level": "Local Meetup SEA", "conf_sponsor": false }
+    {
+      "year": "2019",
+      "level": "Local Meetup SEA",
+      "conf_sponsor": false,
+      "city": "Seattle"
+    }
   ]
 }

gatsby-node.js

@@ -6,6 +6,25 @@
 const path = require('path')
 const { createFilePath } = require('gatsby-source-filesystem')
 
+// Add slug field based on filepath to content nodes
+// We use this slug to create the path for the automatically generated pages
+exports.onCreateNode = ({ node, actions, getNode }) => {
+  const { createNodeField } = actions
+
+  if (
+    node.internal.type === `MarkdownRemark` ||
+    node.internal.type === `ChaptersJson`
+  ) {
+    const value = createFilePath({ node, getNode })
+    createNodeField({
+      name: `slug`,
+      node,
+      value,
+    })
+  }
+}
+
+// Create subpages from markdown and chapter pages from json
 exports.createPages = ({ actions, graphql }) => {
   const { createPage } = actions
 
@@ -24,41 +43,55 @@ exports.createPages = ({ actions, graphql }) => {
           }
         }
       }
+      allChaptersJson {
+        edges {
+          node {
+            id
+            city
+            photo
+            fields {
+              slug
+            }
+          }
+        }
+      }
     }
   `).then(result => {
     if (result.errors) {
       result.errors.forEach(e => console.error(e.toString()))
       return Promise.reject(result.errors)
     }
 
-    const pages = result.data.allMarkdownRemark.edges
+    const subPages = result.data.allMarkdownRemark.edges
+    const chapterPages = result.data.allChaptersJson.edges
 
-    pages.forEach(edge => {
+    subPages.forEach(edge => {
       const id = edge.node.id
       createPage({
         path: edge.node.fields.slug,
         tags: edge.node.frontmatter.tags,
         component: path.resolve(
           `src/templates/${String(edge.node.frontmatter.templateKey)}.js`
         ),
-        // additional data can be passed via context
         context: {
           id,
         },
       })
     })
-  })
-}
-
-exports.onCreateNode = ({ node, actions, getNode }) => {
-  const { createNodeField } = actions
 
-  if (node.internal.type === `MarkdownRemark`) {
-    const value = createFilePath({ node, getNode })
-    createNodeField({
-      name: `slug`,
-      node,
-      value,
+    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/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,35 @@
+import React from 'react'
+import BackgroundImage from 'gatsby-background-image'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faExternalLinkAlt } from '@fortawesome/free-solid-svg-icons'
+
+import styles from './hero.module.css'
+
+const ExternalLink = ({ href, text }) => (
+  <a href={href} className="link" target="_blank" rel="noopener noreferrer">
+    {text}&nbsp;
+    <FontAwesomeIcon icon={faExternalLinkAlt} aria-hidden />
+  </a>
+)
+
+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/organizers/index.js

@@ -0,0 +1,28 @@
+import React from 'react'
+
+import styles from './organizers.module.css'
+
+export const Organizer = ({ organizer }) => {
+  const person = organizer.node
+  return (
+    <figure className={styles.person}>
+      <img src={person.headshot} alt={`${person.name} headshot`} />
+      <figcaption>
+        <h3>{person.name}</h3>
+        <h4>{person.pronouns}</h4>
+      </figcaption>
+    </figure>
+  )
+}
+
+const Organizers = ({ organizers }) => (
+  <section className="container padding">
+    <h1 className="title">Meet the Organizers</h1>
+    <div className={styles.grid}>
+      {organizers.map(person => (
+        <Organizer organizer={person} />
+      ))}
+    </div>
+  </section>
+)
+export default Organizers

src/components/organizers/organizers.module.css

@@ -0,0 +1,30 @@
+.grid {
+  padding: 1em 0;
+  @media screen and (min-width: 20em) {
+    display: grid;
+    grid-column-gap: 2em;
+    grid-template-columns: 1fr 1fr 1fr;
+  }
+  @media screen and (min-width: 50em) {
+    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
+  }
+}
+
+.person {
+  margin: 0;
+  img {
+    width: 100%;
+    max-width: ;
+  }
+  figcaption {
+    font-weight: var(--bold);
+  }
+  h3 {
+    margin: 0;
+  }
+  h4 {
+    font-weight: var(--semi-bold);
+    margin-top: 0.25em;
+    font-size: 0.9em;
+  }
+}

src/components/sponsors/index.js

@@ -47,37 +47,59 @@ import techbychoice from '../../../content/sponsors/techbychoice.json'
 import brooklynjs from '../../../content/sponsors/brooklynjs.json'
 import outintech from '../../../content/sponsors/out-in-tech.json'
 
+const SponsorshipCTA = () => (
+  <div className={styles.background}>
+    <div className={styles.row}>
+      <div className={styles.info}>
+        <h1 className="title">Sponsorship</h1>
+        <h2 className="subtitle">Recruit talented, driven technologists.</h2>
+        <p>
+          Sponsorship is the most effective way to demonstrate your commitment
+          to the professional development of people with marginalized genders at
+          your organization.
+        </p>
+      </div>
+      <div className={styles.cta}>
+        <p>
+          Write/Speak/Code is a 501c3 nonprofit. Contact{' '}
+          <span className="italic">[email protected]</span> to learn
+          more.
+        </p>
+        <a
+          className="link"
+          target="_blank"
+          rel="noopener noreferrer"
+          href="https://drive.google.com/file/d/1X-nDSHYiPiPT79Rc1xUAZCNxvr67ei6J/view?usp=sharing"
+        >
+          2019 Sponsorship Prospectus
+        </a>
+      </div>
+    </div>
+  </div>
+)
+
+// Basic grid component for chapter pages
+export const ChapterSponsors = ({ sponsors }) => (
+  <section>
+    <SponsorshipCTA />
+    <div className={styles.wrap}>
+      <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>
+    </div>
+  </section>
+)
+
+// Custom grid for homepage and conference page
 const Sponsors = ({ sponsors, isConference }) => {
   return (
     <section id="sponsorship">
-      <div className={styles.background}>
-        <div className={styles.row}>
-          <div className={styles.info}>
-            <h1 className="title">Sponsorship</h1>
-            <h2 className="subtitle">
-              Recruit talented, driven technologists.
-            </h2>
-            <p>
-              Sponsorship is the most effective way to demonstrate your
-              commitment to the professional development of people with
-              marginalized genders at your organization.
-            </p>
-          </div>
-          <div className={styles.cta}>
-            <p>
-              Write/Speak/Code is a 501c3 nonprofit. Contact{' '}
-              <span className="italic">[email protected]</span> to
-              learn more.
-            </p>
-            <ExternalLink
-              href="https://drive.google.com/file/d/1X-nDSHYiPiPT79Rc1xUAZCNxvr67ei6J/view?usp=sharing"
-              text="2019 Sponsorship Prospectus"
-              icon="pdf"
-            />
-          </div>
-        </div>
-      </div>
-
+      <SponsorshipCTA />
       <div className={styles.wrap}>
         <section
           className={[styles['platinum'], styles.levelSection].join(' ')}

src/layouts/base.css

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