Merge branch 'development'

gatsby-node.js

@@ -57,12 +57,12 @@ exports.createPages = async ({ actions, graphql }) => {
 
  // Create blog list pages
  const posts = result.data.allMarkdownRemark.edges
- const postsPerPage = 1
+ const postsPerPage = 10 // Change for number posts to display per page
  const numPages = Math.ceil(posts.length / postsPerPage)
  Array.from({ length: numPages }).forEach((_, i) => {
  createPage({
- path: i === 0 ? `/blog` : `/${i + 1}`,
- component: path.resolve("./src/templates/blog-list-template.js"),
+ path: i === 0 ? `/journal` : `/journal/${i + 1}`,
+ component: path.resolve("./src/templates/journal-template.js"),
  context: {
  limit: postsPerPage,
  skip: i * postsPerPage,

src/components/Blog/blog-item.js

@@ -57,19 +57,19 @@ const BlogContent = styled.div`
  }
 `
 
-const BlogList = props => {
+const BlogList = ({ key, title, excerpt, path, date }) => {
  return (
- <BlogItem key={props.key}>
+ <BlogItem key={key}>
  <BlogTitle>
- <h2>{props.title}</h2>
+ <h2>{title}</h2>
  </BlogTitle>
  <BlogContent>
- <p>{props.excerpt}</p>
+ <p>{excerpt}</p>
  <BlogMeta>
- <Link className="btn-link" to={props.path}>
+ <Link className="btn-link" to={path}>
  <Button />
  </Link>
- <h4>{props.date}</h4>
+ <h4>{date}</h4>
  </BlogMeta>
  </BlogContent>
  </BlogItem>

src/pages/index.js

@@ -1,22 +1,28 @@
 import React from "react"
 import { graphql } from "gatsby"
 import Layout from "../components/layout"
-import styles from "../scss/blog.module.scss"
 import Seo from "../components/SEO"
 import BlogItem from "../components/Blog/blog-item"
+import styled from "styled-components"
+
+const FeaturedItems = styled.h4`
+ font-size: 1.2rem;
+ color: #939393;
+`
 
 export default ({ data }) => {
+ const { allMarkdownRemark } = data
  return (
  <Layout>
  <Seo />
  <h1>
  My name is Bonneville. I'm a starter theme for Gatsby and I like to talk
  as if I am a living thing
  </h1>
- <h4 className={styles.feature}>
- {data.allMarkdownRemark.totalCount} Featured Posts
- </h4>
- {data.allMarkdownRemark.edges.map(({ node }) => (
+ <FeaturedItems>
+ {allMarkdownRemark.totalCount} Featured Posts
+ </FeaturedItems>
+ {allMarkdownRemark.edges.map(({ node }) => (
  <BlogItem
  title={node.frontmatter.title}
  excerpt={node.excerpt}