Merge branch 'development'

CHANGELOG.md

@@ -8,8 +8,37 @@ Blog posts edits (typos, code snippets, content embeds, etc.) will be included i
 
 - Email newsletter subscription form
 - Netlify functions to use with Mailchimp API.
-- Blog post drafts
+- Blog post drafts (content/blogPosts/drafts)
 - "Talks" page featuring public speaking gigs
+- Netlify functions for contact form
+- "Work" page for portfolio
+- Jest testing w/ react-testing-library
+
+## [2.2.1] - 2019-11-20
+
+### Changed
+
+- Fixed site url in Netlify environment check (gatsby-config.js)
+
+## [2.2.0] - 2019-11-19
+
+### Added
+
+- Contact page ([jacobdcastro.com/contact](https://jacobdcastro.com/contact))
+- Contact form success page ([jacobdcastro.com/form-success](https://jacobdcastro.com/form-success))
+- Encode function for encoding axios requests (src/utils/encode.js)
+- Prop type checking on all components w/ PropTypes
+- Netlify environment checking, preventing crawling on branch/preview deploys (gatsby-config.js)
+- Some 'TODO' comments
+
+### Changed
+
+- Styled-components rule name (eslint)
+- Disallow crawling on contact form success page
+
+### Removed
+
+- Unused code and files from v1
 
 ## [2.1.0] - 2019-11-15
 

gatsby-config.js

@@ -1,4 +1,12 @@
 const path = require(`path`);
+const {
+  NODE_ENV,
+  URL: NETLIFY_SITE_URL = 'https://jacobdcastro.com',
+  DEPLOY_PRIME_URL: NETLIFY_DEPLOY_URL = NETLIFY_SITE_URL,
+  CONTEXT: NETLIFY_ENV = NODE_ENV,
+} = process.env;
+const isNetlifyProduction = NETLIFY_ENV === 'production';
+const siteUrl = isNetlifyProduction ? NETLIFY_SITE_URL : NETLIFY_DEPLOY_URL;
 
 module.exports = {
   pathPrefix: `/blog`,
@@ -7,7 +15,6 @@ module.exports = {
   siteMetadata: {
     title: `Jacob D. Castro`,
     siteUrl: `https://jacobdcastro.com`,
-    // siteURL: `https://jacobdcastro.com`,
   },
 
   plugins: [
@@ -112,7 +119,24 @@ module.exports = {
       options: {
         host: 'https://jacobdcastro.com',
         sitemap: 'https://jacobdcastro.com/sitemap.xml',
-        policy: [{ userAgent: '*', allow: '/' }],
+        resolveEnv: () => NETLIFY_ENV,
+        env: {
+          production: {
+            policy: [
+              { userAgent: '*', allow: '/', disallow: ['/form-success'] },
+            ],
+          },
+          'branch-deploy': {
+            policy: [{ userAgent: '*', disallow: ['/'] }],
+            sitemap: null,
+            host: null,
+          },
+          'deploy-preview': {
+            policy: [{ userAgent: '*', disallow: ['/'] }],
+            sitemap: null,
+            host: null,
+          },
+        },
       },
     },
     `gatsby-plugin-sitemap`,

package.json

@@ -1,7 +1,7 @@
 {
   "name": "jdcastro-personal-site",
   "description": "I'm a full-stack web developer and I love creating modern digital experiences. Some tech I enjoy include HTML + CSS, Javascipt, React, GraphQL, and Node.js.",
-  "version": "2.1.0",
+  "version": "2.2.1",
   "author": "Jacob D. Castro",
   "dependencies": {
     "axios": "^0.19.0",
@@ -39,9 +39,9 @@
   },
   "keywords": [
     "gatsby",
-    "portfolio",
     "react",
     "static",
+    "portfolio",
     "blog"
   ],
   "license": "MIT",

src/components/contact/ContactForm.js

@@ -42,6 +42,7 @@ const ContactForm = () => {
       method="post"
       data-netlify="true"
       data-netlify-honeypot="bot-field"
+      action="/form-success"
     >
       {/* hidden input for netlify bots */}
       <input type="hidden" name="form-name" value="contact" />

src/components/layout/Footer.js

@@ -126,7 +126,7 @@ const Footer = () => {
         href="https://github.com/jacobdcastro/personal-site/releases"
         rel="noopener"
       >
-        v2.1.0
+        v2.2.1
       </a>
       <a href={`${url}/sitemap.xml`}>Sitemap</a>
       <span>&copy;2019 - JDCastro Digital</span>

src/pages/form-success.js

@@ -0,0 +1,40 @@
+import React from 'react';
+import { Link } from 'gatsby';
+import PropTypes from 'prop-types';
+import Layout from '../templates/layout';
+import ContactWrapper from '../styles/contact/ContactStyles';
+
+const FormSuccess = ({ path }) => {
+  const seo = {
+    page: `contact`,
+    title: 'Contact',
+    description: `Let's chat! I'm open to lots of new opportunities, freelance or a fulltime position.`,
+    url: `https://jacobdcastro.com/form-success`,
+    // imgUrl: `${data.pageImg.publicURL}`,
+    // imgAlt:
+    //   'jdcastro logo, twitter, instagram, facebook, github icons with @jacobdcastro username',
+    breadcrumbs: [
+      {
+        name: `Contact`,
+        path: `/contact`,
+      },
+    ],
+  };
+
+  return (
+    <Layout seo={seo} path={path}>
+      <ContactWrapper>
+        <h1>Contact</h1>
+        <h2>Form successfully sent!</h2>
+        <h3>I'll get back to you as soon as possible!</h3>
+        <Link to="/">Go back to home page</Link>
+      </ContactWrapper>
+    </Layout>
+  );
+};
+
+FormSuccess.propTypes = {
+  path: PropTypes.string.isRequired,
+};
+
+export default FormSuccess;

src/pages/work.js

@@ -0,0 +1,39 @@
+import React from 'react';
+import { Link } from 'gatsby';
+import PropTypes from 'prop-types';
+import Layout from '../templates/layout';
+import WorkPageWrapper from '../styles/work/WorkPageStyles';
+
+const Work = ({ path, data }) => {
+  const seo = {
+    page: `work`,
+    title: `Work`,
+    description: `Some project examples of mine. Ranging from personal side projects to paid client projects, I've had a lot of fun!`,
+    // imgUrl: `${data.pageImg.publicURL}`,
+    // imgAlt:
+    //   'jdcastro logo, twitter, instagram, facebook, github icons with @jacobdcastro username',
+    breadcrumbs: [
+      {
+        name: `Work`,
+        path: `/work`,
+      },
+    ],
+  };
+
+  return (
+    <Layout seo={seo} path={path}>
+      <WorkPageWrapper>
+        <h1>Work</h1>
+
+        {/* map a list of projects */}
+      </WorkPageWrapper>
+    </Layout>
+  );
+};
+
+Work.propTypes = {
+  path: PropTypes.string.isRequired,
+  data: PropTypes.object.isRequired,
+};
+
+export default Work;

src/styles/contact/ContactStyles.js

@@ -34,7 +34,7 @@ const ContactWrapper = styled.div`
 
       input,
       textarea {
-        font-family: 'Montserrat', 'Helvetica', sans-serif;
+        font-family: 'Montserrat', sans-serif;
         padding: 5px 10px;
         border: none;
         border-bottom: 3px solid ${props => props.theme.textColor};

src/styles/work/WorkPageStyles.js

@@ -0,0 +1,5 @@
+import styled from 'styled-components';
+
+const WorkPageWrapper = styled.div``;
+
+export default WorkPageWrapper;