made the sponsor section work

gatsby-config.js

@@ -36,6 +36,13 @@ module.exports = {
         path: `${__dirname}/src/collections/team`,
       },
     },
+    {
+      resolve: `gatsby-source-filesystem`,
+      options: {
+        name: `sponsor`,
+        path: `${__dirname}/src/collections/sponsors`,
+      },
+    },
     {
       resolve: `gatsby-source-filesystem`,
       options: {

src/collections/sponsors/partner/mlh.md

@@ -0,0 +1,7 @@
+---
+name: MLH
+url: https://mlh.io/
+logo: /sponsors/mlh-logo-color.svg
+tier: partner
+type: sponsor
+---

src/components/Sponsors/Sponsors.js

@@ -3,29 +3,38 @@ import { Jumbotron, Container, Card, Row, Col } from 'reactstrap'
 
 import { DiagonalSplit } from '..'
 
-// TODO: Replace with sponsors from CMS
-const tempSponsors = [
-  // {
-  //   tierName: 'Platinum',
-  //   color: '#CCC2C2',
-  //   // sponsors: [{ name: 'Company name', logo: 'image source', link: 'url' }],
-  // },
-  // {
-  //   tierName: 'Gold',
-  //   color: '#C98910',
-  //   sponsors: [],
-  // },
-  // {
-  //   tierName: 'Silver',
-  //   color: '#A8A8A8',
-  //   sponsors: [],
-  // },
-  // {
-  //   tierName: 'Bronze',
-  //   color: '#965A38',
-  //   sponsors: [],
-  // },
-]
+const sponsorTiers = {
+  platinum: {
+    name: 'Platinum',
+    color: '#CCC2C2',
+    order: 1,
+    companies: [],
+  },
+  gold: {
+    name: 'Gold',
+    color: '#C98910',
+    order: 2,
+    companies: [],
+  },
+  silver: {
+    name: 'Silver',
+    color: '#A8A8A8',
+    order: 3,
+    companies: [],
+  },
+  bronze: {
+    name: 'Bronze',
+    color: '#965A38',
+    order: 4,
+    companies: [],
+  },
+  partner: {
+    name: 'Partner',
+    color: '#323232',
+    order: 5,
+    companies: [],
+  },
+}
 
 const ComingSoon = () => (
   <p className="mt-4 mb-4" style={{ textAlign: 'center', opacity: 0.6 }}>
@@ -36,49 +45,53 @@ const ComingSoon = () => (
   </p>
 )
 
-export class Sponsors extends Component {
-  render() {
-    return (
-      <Jumbotron style={{ padding: 0 }}>
-        <DiagonalSplit invert />
-        <Container
-          className="jumbotron-padding"
-          style={{ paddingTop: '4em', paddingBottom: '2em' }}>
-          <h1 style={{ textAlign: 'center' }}>Sponsors</h1>
-
+const Tier = ({ tier }) => (
+  <div key={tier.name}>
+    <h2 className="mt-5" style={{ color: tier.color, textAlign: 'center' }}>
+      {tier.name.toUpperCase()}
+    </h2>
+    <Row className="justify-content-md-center">
+      {tier.companies && tier.companies.length ? (
+        tier.companies.map(sponsor => (
+          <Col xs="6" sm="4">
+            <a href={sponsor.url}>
+              <img src={sponsor.logo} alt={sponsor.name} />
+            </a>
+          </Col>
+        ))
+      ) : (
+        <Col>
           <ComingSoon />
+        </Col>
+      )}
+    </Row>
+  </div>
+)
 
-          <p className="mt-4 mb-4" style={{ textAlign: 'center' }}>
-            Interested in sponsoring? Email us at{' '}
-            <a href="mailto:[email protected]">[email protected]</a>!
-          </p>
+export const Sponsors = ({ sponsors }) => {
+  /* Build up the tier list */
+  let tierList = { ...sponsorTiers }
+  sponsors.map(company => {
+    const { name, url, logo, tier } = company
+    tierList[tier].companies.push({ name, url, logo })
+  })
+  const sponsorData = Object.values(tierList).sort((a, b) => a.order - b.order)
+  return (
+    <Jumbotron style={{ padding: 0 }}>
+      <DiagonalSplit invert />
+      <Container className="jumbotron-padding" style={{ paddingTop: '4em', paddingBottom: '2em' }}>
+        <h1 style={{ textAlign: 'center' }}>Sponsors</h1>
 
-          {tempSponsors.map(tier => (
-            <div key={tier.tierName}>
-              <h2 className="mt-5" style={{ color: tier.color, textAlign: 'center' }}>
-                {tier.tierName.toUpperCase()}
-              </h2>
+        {sponsorData.map(tier => (
+          <div>{tier.companies.length > 0 && <Tier tier={tier} />}</div>
+        ))}
 
-              <Row className="justify-content-md-center">
-                {tier.sponsors && tier.sponsors.length ? (
-                  tier.sponsors.map(sponsor => (
-                    <Col xs="6" sm="4">
-                      <Card>
-                        <h3>{sponsor.name}</h3>
-                      </Card>
-                    </Col>
-                  ))
-                ) : (
-                  <Col>
-                    <ComingSoon />
-                  </Col>
-                )}
-              </Row>
-            </div>
-          ))}
-        </Container>
-        <DiagonalSplit />
-      </Jumbotron>
-    )
-  }
+        <p className="mt-4 mb-4" style={{ textAlign: 'center' }}>
+          Interested in sponsoring? Email us at{' '}
+          <a href="mailto:[email protected]">[email protected]</a>!
+        </p>
+      </Container>
+      <DiagonalSplit />
+    </Jumbotron>
+  )
 }

src/templates/index-page.js

@@ -17,7 +17,7 @@ import {
 } from '../components'
 
 export default function IndexPage({ data, pageContext: { font } }) {
-  const { markdownRemark, howToFindUs, faq, team, file } = data
+  const { markdownRemark, howToFindUs, faq, team, file, sponsor } = data
   const { frontmatter, html } = markdownRemark
 
   useEffect(() => {
@@ -33,6 +33,9 @@ export default function IndexPage({ data, pageContext: { font } }) {
   const teamData = team.edges
     .map(e => ({ ...e.node, ...e.node.frontmatter }))
     .filter(e => e.type === 'team')
+  const sponsorData = sponsor.edges
+    .map(e => ({ ...e.node, ...e.node.frontmatter }))
+    .filter(e => e.type === 'sponsor')
 
   const backgroundImage = file.childImageSharp.fluid
 
@@ -114,7 +117,7 @@ export default function IndexPage({ data, pageContext: { font } }) {
         <Map />
       </Container>
 
-      <Sponsors className="mb-10" />
+      <Sponsors sponsors={sponsorData} className="mb-10" />
 
       <Container style={{ marginTop: '3em', marginBottom: '3em' }}>
         <h2 style={{ marginTop: '1.5rem' }}>
@@ -197,6 +200,21 @@ export const pageQuery = graphql`
       }
     }
 
+    sponsor: allMarkdownRemark(filter: { frontmatter: { type: { eq: "sponsor" } } }) {
+      edges {
+        node {
+          id
+          frontmatter {
+            name
+            url
+            logo
+            tier
+            type
+          }
+        }
+      }
+    }
+
     file(relativePath: { eq: "CH-20190316-20-27-27.jpg" }) {
       childImageSharp {
         fluid(quality: 90, maxWidth: 1920) {