Organize File Structure and Letter Template (#4)

gatsby-browser.js

@@ -1,5 +1,5 @@
 import React from 'react'
-import Layout from './src/components/Layout'
+import Layout from './src/components/general/Layout'
 
 const transitionDelay = 350
 

gatsby-node.js

@@ -72,9 +72,6 @@ exports.createPages = ({ graphql, actions }) => {
           edges {
             node {
               slug
-              post {
-                id
-              }
             }
           }
         }
@@ -94,5 +91,31 @@ exports.createPages = ({ graphql, actions }) => {
     })
   })
 
-  return Promise.all([loadProjects, loadPosts, loadTags])
+  const loadLetters = new Promise((resolve, reject) => {
+    graphql(`
+      {
+        allContentfulLetter {
+          edges {
+            node {
+              slug
+            }
+          }
+        }
+      }
+    `).then(result => {
+      const tags = result.data.allContentfulLetter.edges
+      tags.forEach((edge, i) => {
+        createPage({
+          path: `/letter/${edge.node.slug}/`,
+          component: path.resolve(`./src/templates/letter.js`),
+          context: {
+            slug: edge.node.slug,
+          },
+        })
+      })
+      resolve()
+    })
+  })
+
+  return Promise.all([loadProjects, loadPosts, loadTags, loadLetters])
 }

gatsby-ssr.js

@@ -1,5 +1,5 @@
 import React from 'react'
-import Layout from './src/components/Layout'
+import Layout from './src/components/general/Layout'
 
 export const wrapPageElement = ({ element, props }) => {
   return <Layout {...props}>{element}</Layout>

package.json

@@ -1,28 +1,28 @@
 {
   "name": "rw",
   "description": "Digital portfolio for Ryan Wiemer",
-  "version": "1.3.1",
+  "version": "1.3.2",
   "repository": "https://github.com/ryanwiemer/rw",
   "author": "Ryan Wiemer <[email protected]>",
   "dependencies": {
     "babel-plugin-styled-components": "^1.10.0",
-    "gatsby": "^2.0.106",
+    "gatsby": "^2.0.114",
     "gatsby-image": "^2.0.29",
-    "gatsby-link": "^2.0.9",
-    "gatsby-plugin-canonical-urls": "^2.0.9",
-    "gatsby-plugin-google-analytics": "^2.0.12",
-    "gatsby-plugin-manifest": "^2.0.15",
-    "gatsby-plugin-netlify": "^2.0.7",
-    "gatsby-plugin-nprogress": "^2.0.7",
+    "gatsby-link": "^2.0.10",
+    "gatsby-plugin-canonical-urls": "^2.0.10",
+    "gatsby-plugin-google-analytics": "^2.0.13",
+    "gatsby-plugin-manifest": "^2.0.17",
+    "gatsby-plugin-netlify": "^2.0.8",
+    "gatsby-plugin-nprogress": "^2.0.8",
     "gatsby-plugin-offline": "^2.0.22",
-    "gatsby-plugin-react-helmet": "^3.0.5",
-    "gatsby-plugin-styled-components": "^3.0.4",
-    "gatsby-plugin-twitter": "^2.0.8",
-    "gatsby-remark-images-contentful": "^2.0.6",
-    "gatsby-remark-prismjs": "^3.2.3",
-    "gatsby-source-contentful": "^2.0.28",
-    "gatsby-source-filesystem": "^2.0.18",
-    "gatsby-transformer-remark": "^2.2.2",
+    "gatsby-plugin-react-helmet": "^3.0.6",
+    "gatsby-plugin-styled-components": "^3.0.5",
+    "gatsby-plugin-twitter": "^2.0.9",
+    "gatsby-remark-images-contentful": "^2.0.7",
+    "gatsby-remark-prismjs": "^3.2.4",
+    "gatsby-source-contentful": "^2.0.29",
+    "gatsby-source-filesystem": "^2.0.20",
+    "gatsby-transformer-remark": "^2.2.4",
     "lodash": "^4.17.11",
     "moment": "^2.24.0",
     "prismjs": "^1.15.0",
@@ -47,9 +47,9 @@
     "share": "gatsby develop --host $(ifconfig | awk '/inet 192\\.168\\.[0-9]+\\.[0-9]+/{print $2}') --port 8000"
   },
   "devDependencies": {
-    "eslint": "^5.12.1",
+    "eslint": "^5.13.0",
     "eslint-config-gatsby-standard": "^2.1.1",
-    "prettier": "^1.16.3",
+    "prettier": "^1.16.4",
     "stylelint": "9.10.1",
     "stylelint-config-prettier": "^4.0.0",
     "stylelint-config-standard": "^18.2.0",

src/components/BlogList.js → src/components/blog/BlogList.js

@@ -3,7 +3,7 @@ import styled from 'styled-components'
 import posed from 'react-pose'
 import Promotion from './Promotion'
 import TagCloud from './TagCloud'
-import { staggerChildren, appear } from '../styles/poses'
+import { staggerChildren, appear } from '../../styles/poses'
 
 const Wrapper = styled(posed.div(staggerChildren))`
   width: 100%;

src/components/BlogTile.js → src/components/blog/BlogTile.js

@@ -3,7 +3,7 @@ import Link from 'gatsby-link'
 import styled from 'styled-components'
 import Img from 'gatsby-image'
 import posed from 'react-pose'
-import { appear } from '../styles/poses'
+import { appear } from '../../styles/poses'
 
 const Wrapper = styled(posed.li(appear))`
   width: 100%;

src/components/Hero.js → src/components/general/Hero.js

@@ -2,7 +2,7 @@ import React from 'react'
 import styled from 'styled-components'
 import Img from 'gatsby-image'
 import posed from 'react-pose'
-import { appear } from '../styles/poses'
+import { appear } from '../../styles/poses'
 
 const Wrapper = styled.div`
   position: relative;

src/components/Layout.js → src/components/general/Layout.js

@@ -2,12 +2,12 @@ import React from 'react'
 import Helmet from 'react-helmet'
 import styled, { ThemeProvider } from 'styled-components'
 import posed, { PoseGroup } from 'react-pose'
-import favicon from '../images/favicon.ico'
-import GlobalStyle from '../styles/global'
-import theme from '../styles/theme'
-import { pageFade } from '../styles/poses'
-import Menu from '../components/Menu'
-import Footer from '../components/Footer'
+import favicon from '../../images/favicon.ico'
+import GlobalStyle from '../../styles/global'
+import theme from '../../styles/theme'
+import { pageFade } from '../../styles/poses'
+import Menu from './Menu'
+import Footer from './Footer'
 
 const Main = posed('main')(pageFade)
 

src/components/Menu.js → src/components/general/Menu.js

@@ -27,7 +27,7 @@ const List = styled.ul`
   justify-content: space-between;
   li {
     display: inline-block;
-    margin: 0 0 0 1.5rem;
+    margin: 0 0 0 1.25rem;
     &:first-child {
       position: relative;
       margin: 0;

src/components/ProjectLinks.js → src/components/general/NavLinks.js

@@ -41,7 +41,7 @@ const Next = styled.span`
   }
 `
 
-const ProjectLinks = props => {
+const NavLinks = props => {
   return (
     <Wrapper>
       {props.previous && (
@@ -58,4 +58,4 @@ const ProjectLinks = props => {
   )
 }
 
-export default ProjectLinks
+export default NavLinks

src/components/Work.js → src/components/index/WorkList.js

@@ -3,7 +3,7 @@ import Link from 'gatsby-link'
 import styled from 'styled-components'
 import Img from 'gatsby-image'
 import posed from 'react-pose'
-import { appear, slideUp, staggerChildren } from '../styles/poses'
+import { appear, slideUp, staggerChildren } from '../../styles/poses'
 
 const List = styled(posed.ul(staggerChildren))`
   width: 100%;
@@ -132,7 +132,7 @@ const ProjectLink = styled(Link)`
   }
 `
 
-const Work = props => {
+const WorkList = props => {
   return (
     <List>
       {props.projects.map(({ node: project }) => (
@@ -156,4 +156,4 @@ const Work = props => {
   )
 }
 
-export default Work
+export default WorkList

src/components/letter/LetterAbout.js

@@ -0,0 +1,105 @@
+import React from 'react'
+import styled from 'styled-components'
+import Img from 'gatsby-image'
+
+const Wrapper = styled.div`
+  padding: 0 0 6rem;
+  width: 100%;
+`
+
+const BgImg = styled(Img)`
+  height: 0;
+  padding-bottom: 125%;
+  & > img {
+    object-fit: cover !important;
+    object-position: 50% 50% !important;
+  }
+`
+
+const Title = styled.h3`
+  text-transform: capitalize;
+  line-height: 1.2;
+  margin: 0 0 2rem 0;
+  font-size: 1.25em;
+  @media screen and (min-width: ${props => props.theme.responsive.medium}) {
+    font-size: 1.5em;
+  }
+  span::before {
+    content: '2';
+    float: left;
+    margin: 0 0.5em 0 0;
+  }
+  span::after {
+    content: '';
+    height: 1px;
+    width: 40px;
+    background: white;
+    margin: 0.6em 0.5em 0 0;
+    float: left;
+  }
+`
+
+const List = styled.ul`
+  width: 100%;
+  @media screen and (min-width: ${props => props.theme.responsive.small}) {
+    display: flex;
+    justify-content: space-between;
+  }
+`
+
+const Item = styled.div`
+  flex: 0 0 32%;
+  margin: 0 0 1rem 0;
+`
+
+const Caption = styled.span`
+  line-height: 1.3;
+  display: block;
+  color: gray;
+  padding: 0.5rem 0;
+`
+
+const LetterAbout = props => {
+  return (
+    <Wrapper id="about">
+      <Title>
+        <span /> A little bit about myself
+      </Title>
+      <List>
+        <Item>
+          <BgImg
+            fluid={props.images[0].fluid}
+            alt={props.images[0].title}
+            backgroundColor={'#212121'}
+          />
+          <Caption>
+            I'm a proud dog dad of two awesome dogs — Birch & Lemon.
+          </Caption>
+        </Item>
+        <Item>
+          <BgImg
+            fluid={props.images[1].fluid}
+            alt={props.images[1].title}
+            backgroundColor={'#212121'}
+          />
+          <Caption>
+            San Francisco Bay Area transplant since 2013. I currently call
+            Oakland home.
+          </Caption>
+        </Item>
+        <Item>
+          <BgImg
+            fluid={props.images[2].fluid}
+            alt={props.images[2].title}
+            backgroundColor={'#212121'}
+          />
+          <Caption>
+            Tech gadget connoisseur and unapologetic Apple fanboy.
+          </Caption>
+        </Item>
+      </List>
+    </Wrapper>
+  )
+}
+
+export default LetterAbout