Blog (#3)

README.md

@@ -1,13 +1,16 @@
-
 # [ryanwiemer.com](https://www.ryanwiemer.com)
-Digital portfolio for Ryan Wiemer.
 
-![screenshot](screenshot.jpg "screenshot")
+- Copyright (c) 2019 Ryan Wiemer
+- All Rights Reserved
+
+![screenshot](screenshot.jpg 'screenshot')
+
+## Be Cool and Don't Steal ✌️
+
+**I'm leaving this repo public for others to see how it is built. This is NOT an invitation to rip it off but rather to learn from it.**
+
+If you are interested in a starter template for Gatsby, Contentful and Netlify check out my **MIT LICENSED** repo: https://github.com/ryanwiemer/gatsby-starter-gcn.
 
-**NOTE:** This repo is mostly just for me. If you are interested in a starter template for Gatsby, Contentful and Netlify checkout: https://github.com/ryanwiemer/gatsby-starter-gcn.
+If you still have any questions feel free to email me:
 
-## Tools & Frameworks Used
-* [Gatsby](https://www.gatsbyjs.org/)
-* [Contentful](https://www.contentful.com/)
-* [Netlify](https://www.netlify.com/)
-* [React](https://reactjs.org/)
+👉 **ryan@ryanwiemer.com**

gatsby-config.js

@@ -20,22 +20,40 @@ module.exports = {
   plugins: [
     'gatsby-plugin-react-helmet',
     'gatsby-plugin-styled-components',
-    'gatsby-transformer-remark',
+    'gatsby-plugin-twitter',
     {
-      resolve: `gatsby-plugin-manifest`,
+      resolve: 'gatsby-transformer-remark',
+      options: {
+        plugins: [
+          {
+            resolve: 'gatsby-remark-prismjs',
+          },
+          {
+            resolve: 'gatsby-remark-images-contentful',
+            options: {
+              maxWidth: 750,
+              backgroundColor: '#272727',
+              linkImagesToOriginal: false,
+            },
+          },
+        ],
+      },
+    },
+    {
+      resolve: 'gatsby-plugin-manifest',
       options: {
         name: 'Ryan Wiemer',
         short_name: 'Ryan Wiemer',
         start_url: '/',
         background_color: '#121212',
         theme_color: '#FFFFFF',
         display: 'minimal-ui',
-        icon: 'static/logos/logo-512.png',
+        icon: 'static/icon.png',
       },
     },
-    `gatsby-plugin-offline`,
+    'gatsby-plugin-offline',
     {
-      resolve: `gatsby-plugin-canonical-urls`,
+      resolve: 'gatsby-plugin-canonical-urls',
       options: {
         siteUrl: `https://www.ryanwiemer.com`,
       },

gatsby-node.js

@@ -17,12 +17,11 @@ exports.createPages = ({ graphql, actions }) => {
       }
     `).then(result => {
       const projects = result.data.allContentfulProject.edges
-
       projects.forEach((edge, i) => {
         const prev = i === 0 ? null : projects[i - 1].node
         const next = i === projects.length - 1 ? null : projects[i + 1].node
         createPage({
-          path: edge.node.slug,
+          path: `/${edge.node.slug}/`,
           component: path.resolve(`./src/templates/project.js`),
           context: {
             slug: edge.node.slug,
@@ -35,5 +34,65 @@ exports.createPages = ({ graphql, actions }) => {
     })
   })
 
-  return Promise.all([loadProjects])
+  const loadPosts = new Promise((resolve, reject) => {
+    graphql(`
+      {
+        allContentfulPost(sort: { fields: [date], order: DESC }) {
+          edges {
+            node {
+              slug
+              date
+            }
+          }
+        }
+      }
+    `).then(result => {
+      const posts = result.data.allContentfulPost.edges
+      posts.forEach((edge, i) => {
+        const prev = i === 0 ? null : posts[i - 1].node
+        const next = i === posts.length - 1 ? null : posts[i + 1].node
+        createPage({
+          path: `/${edge.node.slug}/`,
+          component: path.resolve(`./src/templates/post.js`),
+          context: {
+            slug: edge.node.slug,
+            prev,
+            next,
+          },
+        })
+      })
+      resolve()
+    })
+  })
+
+  const loadTags = new Promise((resolve, reject) => {
+    graphql(`
+      {
+        allContentfulTag {
+          edges {
+            node {
+              slug
+              post {
+                id
+              }
+            }
+          }
+        }
+      }
+    `).then(result => {
+      const tags = result.data.allContentfulTag.edges
+      tags.forEach((edge, i) => {
+        createPage({
+          path: `/tag/${edge.node.slug}/`,
+          component: path.resolve(`./src/templates/tag.js`),
+          context: {
+            slug: edge.node.slug,
+          },
+        })
+      })
+      resolve()
+    })
+  })
+
+  return Promise.all([loadProjects, loadPosts, loadTags])
 }

package.json

@@ -1,37 +1,40 @@
 {
   "name": "rw",
   "description": "Digital portfolio for Ryan Wiemer",
-  "version": "1.2.6",
+  "version": "1.3.0",
   "repository": "https://github.com/ryanwiemer/rw",
   "author": "Ryan Wiemer <ryan@ryanwiemer.com>",
   "dependencies": {
     "babel-plugin-styled-components": "^1.10.0",
-    "gatsby": "^2.0.91",
-    "gatsby-image": "^2.0.26",
-    "gatsby-link": "^2.0.8",
-    "gatsby-plugin-canonical-urls": "^2.0.8",
-    "gatsby-plugin-google-analytics": "^2.0.9",
-    "gatsby-plugin-manifest": "^2.0.13",
-    "gatsby-plugin-netlify": "^2.0.6",
+    "gatsby": "^2.0.103",
+    "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.14",
+    "gatsby-plugin-netlify": "^2.0.7",
     "gatsby-plugin-nprogress": "^2.0.7",
-    "gatsby-plugin-offline": "^2.0.21",
+    "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.5",
+    "gatsby-remark-prismjs": "^3.2.2",
     "gatsby-source-contentful": "^2.0.26",
-    "gatsby-source-filesystem": "^2.0.16",
-    "gatsby-transformer-remark": "^2.2.0",
+    "gatsby-source-filesystem": "^2.0.18",
+    "gatsby-transformer-remark": "^2.2.1",
+    "lodash": "^4.17.11",
+    "moment": "^2.24.0",
+    "prismjs": "^1.15.0",
     "react": "^16.7.0",
     "react-dom": "^16.7.0",
     "react-helmet": "^5.2.0",
     "react-pose": "^4.0.6",
-    "smoothscroll-polyfill": "^0.4.3",
     "styled-components": "^4.1.3"
   },
   "keywords": [
     "rw"
   ],
-  "license": "UNLICENSED",
-  "main": "n/a",
   "scripts": {
     "build": "gatsby build",
     "develop": "gatsby develop",

src/components/BlogIntro.js

@@ -0,0 +1,33 @@
+import React from 'react'
+import styled from 'styled-components'
+
+const Wrapper = styled.div`
+  width: 66%;
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: space-between;
+  margin: 0 0 1rem 0;
+`
+
+const Title = styled.h2`
+  font-size: 1em;
+  line-height: 1.3;
+  margin: 0 0 0.5rem 0;
+  @media screen and (min-width: ${props => props.theme.responsive.small}) {
+    font-size: 1.1em;
+  }
+`
+
+const BlogList = props => {
+  return (
+    <Wrapper>
+      <Title>
+        Duis pretium pharetra lacinia. Cras et ultrices felis. In lobortis
+        dapibus ligula, eget faucibus tellus congue vel. Suspendisse potenti.
+        Duis tempus elementum mi sit amet efficitur.
+      </Title>
+    </Wrapper>
+  )
+}
+
+export default BlogList

src/components/BlogList.js

@@ -0,0 +1,47 @@
+import React from 'react'
+import styled from 'styled-components'
+import posed from 'react-pose'
+import Promotion from './Promotion'
+import TagCloud from './TagCloud'
+import { staggerChildren, appear } from '../styles/poses'
+
+const Wrapper = styled(posed.div(staggerChildren))`
+  width: 100%;
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: space-between;
+  align-items: flex-start;
+`
+
+const List = styled.ul`
+  display: inline-flex;
+  flex-flow: row wrap;
+  justify-content: space-between;
+  width: 100%;
+  @media screen and (min-width: ${props => props.theme.responsive.medium}) {
+    flex: 0 0 66%;
+  }
+`
+
+const SideBar = styled(posed.div(appear))`
+  width: 100%;
+  @media screen and (min-width: ${props => props.theme.responsive.medium}) {
+    flex: 0 0 32%;
+    position: sticky;
+    top: 1rem;
+  }
+`
+
+const BlogList = props => {
+  return (
+    <Wrapper>
+      <List>{props.children}</List>
+      <SideBar>
+        <Promotion />
+        <TagCloud tags={props.tags} />
+      </SideBar>
+    </Wrapper>
+  )
+}
+
+export default BlogList

src/components/BlogTile.js

@@ -0,0 +1,76 @@
+import React from 'react'
+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'
+
+const Wrapper = styled(posed.li(appear))`
+  width: 100%;
+  position: relative;
+  background: ${props => props.theme.colors.tertiary};
+  border-radius: 2px;
+  margin: 0 0 1rem 0;
+  &:hover {
+    h2 {
+      text-decoration: underline;
+    }
+  }
+`
+
+const StyledLink = styled(Link)`
+  display: flex;
+  flex-direction: row-reverse;
+`
+
+const Cover = styled(Img)`
+  width: 32%;
+  height: 100%;
+  position: absolute !important;
+  border-top-left-radius: 2px !important;
+  border-bottom-left-radius: 2px !important;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  & > img {
+    object-fit: cover !important;
+    object-position: 50% 50% !important;
+  }
+`
+
+const Details = styled.div`
+  flex: 0 0 65%;
+  padding: 2rem 1rem;
+`
+
+const Title = styled.h2`
+  font-size: 1.25em;
+  font-weight: bold;
+  margin: 0 0 0.5rem 0;
+  @media screen and (min-width: ${props => props.theme.responsive.medium}) {
+    font-size: 1.5em;
+  }
+`
+
+const Date = styled.span`
+  color: gray;
+`
+const BlogTile = ({ slug, cover, title, date, ...props }) => {
+  return (
+    <Wrapper>
+      <StyledLink to={`/${slug}/`}>
+        <Cover
+          fluid={cover.fluid}
+          alt={cover.title}
+          backgroundColor={'#212121'}
+        />
+        <Details>
+          <Title>{title}</Title>
+          <Date>{date}</Date>
+        </Details>
+      </StyledLink>
+    </Wrapper>
+  )
+}
+
+export default BlogTile

src/components/Container.js

@@ -1,20 +1,24 @@
 import React from 'react'
-import styled from 'styled-components'
+import styled, { css } from 'styled-components'
 
 const Wrapper = styled.section`
   position: relative;
   max-width: ${props => props.theme.sizes.maxWidth};
   margin: 0 auto;
   padding: 0 1.5rem;
   height: 100%;
-  min-height: calc(100vh - 8rem);
+  ${props =>
+    props.minHeight &&
+    css`
+      min-height: calc(100vh - 128px);
+    `};
   @media screen and (min-width: ${props => props.theme.responsive.small}) {
     padding: 0 3rem;
   }
 `
 
 const Container = props => {
-  return <Wrapper>{props.children}</Wrapper>
+  return <Wrapper {...props}>{props.children}</Wrapper>
 }
 
 export default Container