debtcollective · orlando · Oct 17, 2019 · Oct 17, 2019 · Oct 17, 2019 · Oct 17, 2019
diff --git a/.env.template b/.env.template
@@ -1 +1,2 @@
 SITE_RECAPTCHA_KEY=google.com/recaptcha
+SITE_URL=https://academics.debtcollective.org
diff --git a/gatsby-config.js b/gatsby-config.js
@@ -1,10 +1,18 @@
+require("dotenv").config({
+  path: `.env.${process.env.NODE_ENV}`,
+});
+
 var proxy = require("http-proxy-middleware");
 
 module.exports = {
   siteMetadata: {
-    title: "Academics Letter",
-    description:
-      "We are a membership organization working to transform our individual financial struggles into a source of collective power.",
+    title: `Why Faculty Support College For All`,
+    description: `Sign the letter to show your support. #CollegeForAll`,
+    author: "Debt Collective",
+    twitterUsername: `@0debtzone`,
+    facebookPage: "https://www.facebook.com/DebtCollective",
+    image: `${process.env.SITE_URL}/img/seo.png`,
+    url: process.env.SITE_URL,
   },
   plugins: [
     "gatsby-plugin-react-helmet",
@@ -16,6 +24,13 @@ module.exports = {
         name: "pages",
       },
     },
+    {
+      resolve: `gatsby-source-filesystem`,
+      options: {
+        name: `img`,
+        path: `${__dirname}/src/img`,
+      },
+    },
     "gatsby-plugin-sharp",
     "gatsby-transformer-sharp",
     {
@@ -43,6 +58,35 @@ module.exports = {
               destinationDir: "static",
             },
           },
+          {
+            resolve: `gatsby-plugin-favicon`,
+            options: {
+              logo: "./src/img/favicon.png",
+              appName: null,
+              appDescription: null,
+              developerName: null,
+              developerURL: null,
+              dir: "auto",
+              lang: "en-US",
+              background: "#FF4630",
+              theme_color: "#FF4630",
+              display: "standalone",
+              orientation: "any",
+              start_url: "/?homescreen=1",
+              version: "1.0",
+
+              icons: {
+                android: true,
+                appleIcon: true,
+                appleStartup: true,
+                coast: false,
+                favicons: true,
+                firefox: true,
+                yandex: false,
+                windows: true,
+              },
+            },
+          },
         ],
       },
     },

diff --git a/package.json b/package.json
@@ -12,6 +12,7 @@
     "details-polyfill": "1.1.0",
     "gatsby": "^2.13.31",
     "gatsby-image": "^2.0.23",
+    "gatsby-plugin-favicon": "3.1.6",
     "gatsby-plugin-netlify": "^2.0.6",
     "gatsby-plugin-netlify-cms": "^4.1.6",
     "gatsby-plugin-purgecss": "^4.0.0",

diff --git a/src/components/Layout.js b/src/components/Layout.js
@@ -1,58 +1,15 @@
 import React from "react";
 import PropTypes from "prop-types";
-import { Helmet } from "react-helmet";
-import useSiteMetadata from "./SiteMetadata";
-import { withPrefix } from "gatsby";
 import Header from "./Header";
 import Footer from "./Footer";
-import favicon from "../img/favicon.png";
+import SEO from "./SEO";
 
 import "../styles/main.scss";
 
-const Layout = ({ children }) => {
-  const { title, description } = useSiteMetadata();
+const Layout = ({ title, children }) => {
   return (
     <>
-      <Helmet>
-        <html lang="en" />
-        <title>{title}</title>
-        <meta name="description" content={description} />
-
-        <link
-          rel="apple-touch-icon"
-          sizes="180x180"
-          href={`${withPrefix("/")}img/apple-touch-icon.png`}
-        />
-        <link
-          rel="icon"
-          type="image/png"
-          href={`${withPrefix("/")}img/favicon-32x32.png`}
-          sizes="32x32"
-        />
-        <link
-          rel="icon"
-          type="image/png"
-          href={`${withPrefix("/")}img/favicon-16x16.png`}
-          sizes="16x16"
-        />
-
-        <link
-          rel="mask-icon"
-          href={`${withPrefix("/")}img/safari-pinned-tab.svg`}
-          color="#ff4400"
-        />
-        <link rel="shortcut icon" href={favicon} type="image/png" />
-
-        <meta name="theme-color" content="#fff" />
-
-        <meta property="og:type" content="website" />
-        <meta property="og:title" content={title} />
-        <meta property="og:url" content="/" />
-        <meta
-          property="og:image"
-          content={`${withPrefix("/")}img/og-image.jpg`}
-        />
-      </Helmet>
+      <SEO title={title} />
       <Header />
       <div id="main" className="main">
         {children}
@@ -64,6 +21,7 @@ const Layout = ({ children }) => {
 
 Layout.propTypes = {
   children: PropTypes.node,
+  title: PropTypes.string,
 };
 
 export default Layout;
diff --git a/src/components/Mailto/index.js b/src/components/Mailto/index.js
@@ -0,0 +1,41 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+const toSearchString = (searchParams = {}) => {
+  return Object.keys(searchParams)
+    .map(key => `${key}=${encodeURIComponent(searchParams[key])}`)
+    .join("&");
+};
+
+const createMailtoLink = (email, headers) => {
+  let link = `mailto:${email}`;
+  if (headers) {
+    link += `?${toSearchString(headers)}`;
+  }
+  return link;
+};
+
+const Mailto = ({ children, email, headers, ...others }) => {
+  const onClick = e => {
+    e.preventDefault();
+    window.location.href = createMailtoLink(email, headers);
+  };
+
+  return (
+    <a onClick={onClick} href={`mailto:obfuscated`} {...others}>
+      {children}
+    </a>
+  );
+};
+
+Mailto.propTypes = {
+  children: PropTypes.node.isRequired,
+  email: PropTypes.string.isRequired,
+  headers: PropTypes.object,
+};
+
+Mailto.defaultProps = {
+  headers: {},
+};
+
+export default Mailto;
diff --git a/src/components/SEO/index.js b/src/components/SEO/index.js
@@ -0,0 +1,97 @@
+import React from "react";
+import PropTypes from "prop-types";
+import Helmet from "react-helmet";
+import { useStaticQuery, graphql } from "gatsby";
+
+function SEO({ title, description, lang, meta }) {
+  const { site } = useStaticQuery(
+    graphql`
+      query {
+        site {
+          siteMetadata {
+            title
+            description
+            author
+            url
+            image
+            twitterUsername
+            facebookPage
+          }
+        }
+      }
+    `
+  );
+
+  const metaDescription = description || site.siteMetadata.description;
+  const ogTitle = title || site.siteMetadata.title;
+
+  return (
+    <Helmet
+      htmlAttributes={{
+        lang,
+      }}
+      title={ogTitle}
+      meta={[
+        {
+          name: `description`,
+          content: metaDescription,
+        },
+        {
+          property: `og:title`,
+          content: ogTitle,
+        },
+        {
+          property: `og:description`,
+          content: metaDescription,
+        },
+        {
+          property: `og:type`,
+          content: `website`,
+        },
+        {
+          property: `og:image`,
+          content: site.siteMetadata.image,
+        },
+        {
+          property: `og:url`,
+          content: site.siteMetadata.url,
+        },
+        {
+          name: `twitter:card`,
+          content: `summary_large_image`,
+        },
+        {
+          name: `twitter:creator`,
+          content: site.siteMetadata.twitterUsername,
+        },
+        {
+          name: `twitter:title`,
+          content: ogTitle,
+        },
+        {
+          name: `twitter:description`,
+          content: metaDescription,
+        },
+        {
+          name: `twitter:image`,
+          content: site.siteMetadata.image,
+        },
+      ].concat(meta)}
+    />
+  );
+}
+
+SEO.defaultProps = {
+  lang: `en`,
+  meta: [],
+  description: ``,
+};
+
+SEO.propTypes = {
+  description: PropTypes.string,
+  lang: PropTypes.string,
+  meta: PropTypes.arrayOf(PropTypes.object),
+  title: PropTypes.string,
+};
+
+export default SEO;
diff --git a/src/components/SiteMetadata.js b/src/components/SiteMetadata.js
diff --git a/src/components/index.js b/src/components/index.js
@@ -4,5 +4,7 @@ export { default as Header } from "./Header";
 export { default as Hero } from "./Hero";
 export { default as Layout } from "./Layout";
 export { default as Letter } from "./Letter";
+export { default as Mailto } from "./Mailto";
+export { default as SEO } from "./SEO";
 export { default as SignModal } from "./SignModal";
 export { default as Signers } from "./Signers";
diff --git a/src/img/seo.png b/src/img/seo.png
diff --git a/src/pages/index.md b/src/pages/index.md
@@ -1,7 +1,7 @@
 ---
 templateKey: index-page
 hero:
-  title: "Why We Support<br/> College For All"
+  title: "Why Faculty Support<br/> College For All"
   button: Sign your name
 letter:
   text: >

diff --git a/src/templates/index-page.js b/src/templates/index-page.js
@@ -92,7 +92,7 @@ const IndexPage = ({ data }) => {
   const { frontmatter } = data.markdownRemark;
 
   return (
-    <Layout>
+    <Layout title="Why Faculty Support College For All | Sign the letter">
       <IndexPageTemplate {...frontmatter} />
     </Layout>
   );

diff --git a/src/templates/next-steps.js b/src/templates/next-steps.js
@@ -2,9 +2,13 @@ import React from "react";
 import PropTypes from "prop-types";
 import { graphql } from "gatsby";
 
-import { Layout, Hero, FAQ } from "../components";
+import { Layout, Hero, FAQ, Mailto } from "../components";
 import { Container, Row, Col, Card } from "react-bootstrap";
 
+const mailtoHeaders = {
+  subject: "Next Steps for College For All",
+};
+
 export const NextStepsTemplate = ({ hero, content }) => (
   <Container>
     <Row className="mb-md-5">
@@ -22,8 +26,14 @@ export const NextStepsTemplate = ({ hero, content }) => (
             <Card.Text className="mb-4">
               Here are a few ideas to help you engage and involve others on your
               campus and beyond in the fight for the College for All agenda. If
-              you have more questions please contact Hannah Appel at happel at
-              ucla dot edu or Andrew Ross at andrew dot ross at nyu dot edu.
+              you have more questions please contact{" "}
+              <Mailto email="happel@ucla.edu" headers={mailtoHeaders}>
+                Hannah Appel
+              </Mailto>{" "}
+              or{" "}
+              <Mailto email="andrew.ross@nyu.edu" headers={mailtoHeaders}>
+                Andrew Ross
+              </Mailto>
             </Card.Text>
 
             <Card.Title>
@@ -86,7 +96,7 @@ const IndexPage = ({ data }) => {
   const { frontmatter } = data.markdownRemark;
 
   return (
-    <Layout>
+    <Layout title="Why Faculty Support College For All | Next Steps">
       <NextStepsTemplate {...frontmatter} />
     </Layout>
   );