Merge branch 'development'

gatsby-node.js

@@ -61,7 +61,7 @@ exports.createPages = async ({ actions, graphql }) => {
  const numPages = Math.ceil(posts.length / postsPerPage)
  Array.from({ length: numPages }).forEach((_, i) => {
  createPage({
- path: i === 0 ? `/blog` : `/blog/${i + 1}`,
+ path: i === 0 ? `/blog` : `/${i + 1}`,
  component: path.resolve("./src/templates/blog-list-template.js"),
  context: {
  limit: postsPerPage,

src/components/Blog/blog-item.js

@@ -0,0 +1,79 @@
+import React from "react"
+import styled from "styled-components"
+import { Link } from "gatsby"
+import Button from "../../components/Button/button"
+
+const BlogItem = styled.article`
+ padding: 1rem 0;
+ display: flex;
+ flex-direction: column;
+
+ @media (min-width: 768px) {
+ flex-direction: row;
+ }
+`
+
+const BlogTitle = styled.div`
+ h2 {
+ display: inline-block;
+ position: relative;
+ line-height: 2.25rem;
+ font-size: 1.5rem;
+ }
+ @media (min-width: 768px) {
+ box-sizing: border-box;
+ padding-right: 2rem;
+ width: 50%;
+
+ h2 {
+ margin: 0;
+ font-size: 1.75rem;
+ }
+ }
+`
+
+const BlogMeta = styled.div`
+ padding: 1rem 0;
+ display: flex;
+ justify-content: space-between;
+
+ h4 {
+ margin: 0;
+ font-size: 1rem;
+ line-height: 30px;
+ color: #939393;
+ }
+`
+
+const BlogContent = styled.div`
+ @media (min-width: 768px) {
+ width: 48%;
+ display: flex;
+ flex-direction: column;
+
+ p {
+ margin-top: 0;
+ }
+ }
+`
+
+const BlogList = props => {
+ return (
+ <BlogItem key={props.key}>
+ <BlogTitle>
+ <h2>{props.title}</h2>
+ </BlogTitle>
+ <BlogContent>
+ <p>{props.excerpt}</p>
+ <BlogMeta>
+ <Link className="btn-link" to={props.path}>
+ <Button />
+ </Link>
+ <h4>{props.date}</h4>
+ </BlogMeta>
+ </BlogContent>
+ </BlogItem>
+ )
+}
+
+export default BlogList

src/components/header.js

@@ -164,7 +164,7 @@ export default ({ children }) => {
  <ul>
  <ListLink to="/">Home</ListLink>
  <ListLink to="/about/">About</ListLink>
- <ListLink to="/blog/">Blog</ListLink>
+ <ListLink to="/journal/">Journal</ListLink>
  <ListLink to="/contact/">Contact</ListLink>
  </ul>
  </nav>

src/pages/index.js

@@ -1,13 +1,11 @@
 import React from "react"
-import { Link, graphql } from "gatsby"
+import { graphql } from "gatsby"
 import Layout from "../components/layout"
 import styles from "../scss/blog.module.scss"
 import Seo from "../components/SEO"
-import Button from "../components/Button/button"
+import BlogItem from "../components/Blog/blog-item"
 
 export default ({ data }) => {
- console.log(data)
-
  return (
  <Layout>
  <Seo />
@@ -19,22 +17,12 @@ export default ({ data }) => {
  {data.allMarkdownRemark.totalCount} Featured Posts
  </h4>
  {data.allMarkdownRemark.edges.map(({ node }) => (
- <article key={node.key} className={styles.item}>
- <div className={styles.title}>
- <h2>
- <Link to={node.frontmatter.path}>{node.frontmatter.title}</Link>
- </h2>
- </div>
- <div className={styles.content}>
- <p>{node.excerpt}</p>
- <div className={styles.meta}>
- <Link className="btn-link" to={node.frontmatter.path}>
- <Button />
- </Link>
- <h4>{node.frontmatter.date}</h4>
- </div>
- </div>
- </article>
+ <BlogItem
+ title={node.frontmatter.title}
+ excerpt={node.excerpt}
+ path={node.frontmatter.path}
+ date={node.frontmatter.date}
+ />
  ))}
  </Layout>
  )

src/pages/journal.js

@@ -0,0 +1,55 @@
+import React from "react"
+import SEO from "../components/SEO"
+import Layout from "../components/layout"
+import { graphql } from "gatsby"
+import BlogItem from "../components/Blog/blog-item"
+
+const Journal = ({ data }) => {
+ return (
+ <>
+ <SEO />
+ <Layout>
+ <h1>Bonneville Journal</h1>
+ <p>
+ {" "}
+ Phasellus vel egestas ipsum. Integer tristique ullamcorper purus a
+ suscipit. Duis condimentum arcu tortor, vitae faucibus elit eleifend
+ eu. Curabitur mauris risus, pretium et est at, consequat venenatis
+ sem. Phasellus vehicula ligula id mauris facilisis bibendum.
+ </p>
+ {data.allMarkdownRemark.edges.map(({ node }) => (
+ <BlogItem
+ title={node.frontmatter.title}
+ excerpt={node.excerpt}
+ path={node.frontmatter.path}
+ date={node.frontmatter.date}
+ />
+ ))}
+ </Layout>
+ </>
+ )
+}
+
+export default Journal
+
+export const query = graphql`
+ query {
+ allMarkdownRemark(
+ sort: { fields: [frontmatter___date], order: DESC }
+ limit: 3
+ ) {
+ totalCount
+ edges {
+ node {
+ id
+ frontmatter {
+ title
+ date(formatString: "MMMM DD, YY")
+ path
+ }
+ excerpt
+ }
+ }
+ }
+ }
+`