impactmakers · richsoni · Dec 8, 2020 · Dec 12, 2020
diff --git a/gatsby-config.js b/gatsby-config.js
@@ -103,7 +103,20 @@ module.exports = {
       }
     },
     `gatsby-plugin-offline`,
-    `gatsby-plugin-react-helmet`
+    `gatsby-plugin-react-helmet`,
+    `gatsby-plugin-react-helmet`,
+    {
+      resolve: `gatsby-source-airtable`,
+      options: {
+        apiKey: process.env.AIRTABLE_API_KEY,
+        tables: [
+          {
+            baseId: process.env.AIRTABLE_BASE,
+            tableName: `Production`
+          }
+        ]
+      }
+    }
   ],
   mapping: {
     "MarkdownRemark.frontmatter.author": `AuthorYaml`

diff --git a/package.json b/package.json
@@ -30,6 +30,7 @@
     "gatsby-remark-prismjs": "^3.2.4",
     "gatsby-remark-responsive-iframe": "^2.0.9",
     "gatsby-remark-smartypants": "^2.0.8",
+    "gatsby-source-airtable": "^2.1.1",
     "gatsby-source-filesystem": "^2.0.32",
     "gatsby-transformer-remark": "^2.2.5",
     "gatsby-transformer-sharp": "^2.1.14",

diff --git a/src/components/DirectoryLink/Styles.module.scss b/src/components/DirectoryLink/Styles.module.scss
@@ -0,0 +1,16 @@
+@import "../../styles/Variables.module.scss";
+@import "../../styles/Mixins.module.scss";
+@import "../../styles/Typography.module.scss";
+
+.link {
+  @include links-on-light;
+}
+
+.container {
+}
+
+.description {
+}
+
+.topRow {
+}
diff --git a/src/components/DirectoryLink/index.js b/src/components/DirectoryLink/index.js
@@ -0,0 +1,22 @@
+import React from "react";
+import { OutboundLink } from "gatsby-plugin-google-analytics";
+import Styles from "./Styles.module.scss";
+import TwitterIcon from "../Images/Icons/TwitterIcon";
+import FacebookIcon from "../Images/Icons/FacebookIcon";
+import EmailIcon from "../Images/Icons/EmailIcon";
+
+const AuthorCard = props => {
+  const { title, url, description } = props;
+  return (
+    <div className={Styles.container}>
+      <div className={Styles.topRow}>
+        <OutboundLink className={Styles.link} href={url}>
+          {title}
+        </OutboundLink>
+      </div>
+      <div className={Styles.description}>{description}</div>
+    </div>
+  );
+};
+
+export default AuthorCard;
diff --git a/src/pages/directory/index.js b/src/pages/directory/index.js
@@ -0,0 +1,78 @@
+import React, { useEffect } from "react";
+import { OutboundLink } from "gatsby-plugin-google-analytics";
+import { Link, graphql } from "gatsby";
+import Layout from "../../components/layout";
+import SEO from "../../components/seo";
+import GlobalStyles from "../../styles/Global.module.scss";
+import Styles from "./styles.module.scss";
+import FooterCta from "../../components/FooterCta";
+import DirectoryLink from "../../components/DirectoryLink";
+
+const DirectoryPage = ({ data }) => {
+  const links = data.allAirtable.nodes.map(({ data }) => data);
+  const categories = links
+    .reduce((memo, { categories }) => memo.concat(categories), [])
+    .filter((v, i, a) => a.indexOf(v) === i)
+    .filter(x => x)
+    .map(category => {
+      return {
+        title: category.replace(/(\w)-(\w)/, "$1 $2").toUpperCase(),
+        links: links.filter(({ categories }) =>
+          (categories || []).includes(category)
+        )
+      };
+    });
+  return (
+    <Layout>
+      <SEO title="Link Directory" keywords={[`Directory`, `ClimateChoice`]} />
+      <section
+        className={`${GlobalStyles.container} ${GlobalStyles.subpageContainer}`}
+      >
+        <div className={`${GlobalStyles.inner} ${GlobalStyles.subpageInner}`}>
+          <div className={GlobalStyles.subpageContent}>
+            <h1
+              className={`${GlobalStyles.title} ${GlobalStyles.subpageTitle}`}
+            >
+              Link Directory
+            </h1>
+            {categories.map(({ title, links }) => (
+              <>
+                <h2>{title}</h2>
+                <ul>
+                  {links.map(link => (
+                    <li key={link.url}>
+                      <DirectoryLink {...link} />
+                    </li>
+                  ))}
+                </ul>
+              </>
+            ))}
+          </div>
+        </div>
+      </section>
+      <FooterCta />
+    </Layout>
+  );
+};
+
+export const query = graphql`
+  query DirectoryQuery {
+    allAirtable {
+      nodes {
+        data {
+          title
+          countries
+          description
+          url
+          tags
+          categories
+          status
+          featured
+          instagram
+          twitter
+        }
+      }
+    }
+  }
+`;
+export default DirectoryPage;
diff --git a/src/pages/directory/styles.module.scss b/src/pages/directory/styles.module.scss
@@ -0,0 +1,24 @@
+@import "../../styles/Variables.module.scss";
+@import "../../styles/Mixins.module.scss";
+@import "../../styles/Typography.module.scss";
+
+.container {
+  box-sizing: border-box;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  @include page-top;
+}
+
+.inner {
+  justify-content: space-between;
+  align-items: center;
+  flex-direction: column;
+  @include mq("tablet") {
+  }
+}
+
+.title {
+  margin: 0;
+}
diff --git a/yarn.lock b/yarn.lock
@@ -1489,6 +1489,16 @@ after@0.8.2:
   resolved "https://registry.yarnpkg.com/after/-/after-0.8.2.tgz#fedb394f9f0e02aa9768e702bda23b505fae7e1f"
   integrity sha1-/ts5T58OAqqXaOcCvaI7UF+ufh8=
 
+airtable@^0.8.0:
+  version "0.8.1"
+  resolved "https://registry.yarnpkg.com/airtable/-/airtable-0.8.1.tgz#8d10f04f41673b86ed75fa054f54470357e36ae0"
+  integrity sha512-Cxw55ta1olDwDERz++HFJOBX6LONtg+d7+wOcYguqI4PR4P5RHmgjTbY8tPKgLHb8U3FVOyAbpb7NpLRSnLGgg==
+  dependencies:
+    es6-promise "4.2.8"
+    lodash "4.17.15"
+    request "2.88.0"
+    xhr "2.3.3"
+
 ajv-errors@^1.0.0, ajv-errors@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/ajv-errors/-/ajv-errors-1.0.1.tgz#f35986aceb91afadec4102fbd85014950cefa64d"
@@ -2229,6 +2239,11 @@ bluebird@^3.5.0, bluebird@^3.5.3:
   resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.5.4.tgz#d6cc661595de30d5b3af5fcedd3c0b3ef6ec5714"
   integrity sha512-FG+nFEZChJrbQ9tIccIfZJBz3J7mLrAhxakAbnrJWn8d7aKOC+LWifa0G+p4ZqKp4y13T7juYvdhq9NzKdsrjw==
 
+bluebird@^3.5.4:
+  version "3.7.2"
+  resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.7.2.tgz#9f229c15be272454ffa973ace0dbee79a1b0c36f"
+  integrity sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg==
+
 bmp-js@0.0.3:
   version "0.0.3"
   resolved "https://registry.yarnpkg.com/bmp-js/-/bmp-js-0.0.3.tgz#64113e9c7cf1202b376ed607bf30626ebe57b18a"
@@ -4336,6 +4351,11 @@ es-to-primitive@^1.2.0:
     is-date-object "^1.0.1"
     is-symbol "^1.0.2"
 
+es6-promise@4.2.8:
+  version "4.2.8"
+  resolved "https://registry.yarnpkg.com/es6-promise/-/es6-promise-4.2.8.tgz#4eb21594c972bc40553d276e510539143db53e0a"
+  integrity sha512-HJDGx5daxeIvxdBxvG2cb9g4tEvwIk3i8+nhX0yGrYmZUzbkdg8QbDevheDB8gd0//uPj4c1EQua8Q+MViT0/w==
+
 es6-promise@^3.0.2:
   version "3.3.1"
   resolved "https://registry.yarnpkg.com/es6-promise/-/es6-promise-3.3.1.tgz#a08cdde84ccdbf34d027a1451bc91d4bcd28a613"
@@ -5680,6 +5700,15 @@ gatsby-remark-smartypants@^2.0.8:
     retext-smartypants "^3.0.0"
     unist-util-visit "^1.3.0"
 
+gatsby-source-airtable@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/gatsby-source-airtable/-/gatsby-source-airtable-2.1.1.tgz#a864be9900f252267a73aed38072e7ee89af8d6c"
+  integrity sha512-VLTB9iny0Vqf9ee/Piwl1LLRC++wtGyO9ZBMEISgXxsamwpQ0/08J8jL2zB+EDe5v4KRPRLSlEqb4aO1kYCBIA==
+  dependencies:
+    airtable "^0.8.0"
+    bluebird "^3.5.4"
+    mime "^2.4.4"
+
 gatsby-source-filesystem@^2.0.32:
   version "2.0.33"
   resolved "https://registry.yarnpkg.com/gatsby-source-filesystem/-/gatsby-source-filesystem-2.0.33.tgz#c8b4ed9a231a325ca356f739bab77ea8fad5824d"
@@ -8211,6 +8240,11 @@ lodash.uniq@^4.5.0:
   resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
   integrity sha1-0CJTc662Uq3BvILklFM5qEJ1R3M=
 
+lodash@4.17.15:
+  version "4.17.15"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.15.tgz#b447f6670a0455bbfeedd11392eff330ea097548"
+  integrity sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A==
+
 lodash@^4.0.0, lodash@^4.1.1, lodash@^4.11.1, lodash@^4.13.1, lodash@^4.15.0, lodash@^4.17.10, lodash@^4.17.11, lodash@^4.17.3, lodash@^4.17.4, lodash@^4.17.5, lodash@^4.3.0, lodash@~4.17.10:
   version "4.17.11"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.11.tgz#b39ea6229ef607ecd89e2c8df12536891cac9b8d"
@@ -8623,6 +8657,11 @@ mime@^2.0.3, mime@^2.2.0, mime@^2.3.1:
   resolved "https://registry.yarnpkg.com/mime/-/mime-2.4.2.tgz#ce5229a5e99ffc313abac806b482c10e7ba6ac78"
   integrity sha512-zJBfZDkwRu+j3Pdd2aHsR5GfH2jIWhmL1ZzBoc+X+3JEti2hbArWcyJ+1laC1D2/U/W1a/+Cegj0/OnEU2ybjg==
 
+mime@^2.4.4:
+  version "2.4.6"
+  resolved "https://registry.yarnpkg.com/mime/-/mime-2.4.6.tgz#e5b407c90db442f2beb5b162373d07b69affa4d1"
+  integrity sha512-RZKhC3EmpBchfTGBVb8fb+RL2cWyw/32lshnsETttkBAyAUXSGHxbEJWWRXc751DrIxG1q04b8QwMbAwkRPpUA==
+
 mimic-fn@^1.0.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-1.2.0.tgz#820c86a39334640e99516928bd03fca88057d022"
@@ -11828,7 +11867,7 @@ replace-ext@1.0.0, replace-ext@^1.0.0:
   resolved "https://registry.yarnpkg.com/replace-ext/-/replace-ext-1.0.0.tgz#de63128373fcbf7c3ccfa4de5a480c45a67958eb"
   integrity sha1-3mMSg3P8v3w8z6TeWkgMRaZ5WOs=
 
-request@^2.65.0, request@^2.83.0, request@^2.87.0, request@^2.88.0:
+request@2.88.0, request@^2.65.0, request@^2.83.0, request@^2.87.0, request@^2.88.0:
   version "2.88.0"
   resolved "https://registry.yarnpkg.com/request/-/request-2.88.0.tgz#9c2fca4f7d35b592efe57c7f0a55e81052124fef"
   integrity sha512-NAqBSrijGLZdM0WZNsInLJpkJokL72XYjUpnB0iwsRgxh7dB6COrHnTBNwN0E+lHDAJzu7kLAkDeY08z2/A0hg==
@@ -14549,6 +14588,16 @@ xdg-basedir@^3.0.0:
   resolved "https://registry.yarnpkg.com/xdg-basedir/-/xdg-basedir-3.0.0.tgz#496b2cc109eca8dbacfe2dc72b603c17c5870ad4"
   integrity sha1-SWsswQnsqNus/i3HK2A8F8WHCtQ=
 
+xhr@2.3.3:
+  version "2.3.3"
+  resolved "https://registry.yarnpkg.com/xhr/-/xhr-2.3.3.tgz#ad6b810e0917ce72b5ec704f5d41f1503b8e7524"
+  integrity sha1-rWuBDgkXznK17HBPXUHxUDuOdSQ=
+  dependencies:
+    global "~4.3.0"
+    is-function "^1.0.1"
+    parse-headers "^2.0.0"
+    xtend "^4.0.0"
+
 xhr@^2.0.1:
   version "2.5.0"
   resolved "https://registry.yarnpkg.com/xhr/-/xhr-2.5.0.tgz#bed8d1676d5ca36108667692b74b316c496e49dd"