Update gatsby-node and render posts (not currently working)

demo/gatsby-config.js

@@ -5,5 +5,14 @@
  */
 
 module.exports = {
+  siteMetadata: {
+    title: `Becca Bailey`,
+    author: `Becca Bailey`,
+    description: `Becca likes to build things`,
+    siteUrl: `http://becca.is`,
+    social: {
+      twitter: `beccaliz`,
+    },
+  },
   plugins: ["gatsby-theme-writer"],
 }

demo/package.json

@@ -12,7 +12,7 @@
     "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\""
   },
   "dependencies": {
-    "gatsby": "^2.13.1",
+    "gatsby": "^2.2.5",
     "gatsby-theme-events": "*",
     "react": "^16.8.6",
     "react-dom": "^16.8.6"

gatsby-theme-writer/gatsby-node.js

@@ -1,11 +1,12 @@
 const fs = require("fs")
+const path = require("path")
+const { createFilePath } = require(`gatsby-source-filesystem`)
 
 exports.onPreBootstrap = ({ reporter }, options) => {
-  const contentPath = options.contentPath || "content"
-  const blogPath = `${contentPath}/blog`
-  const assetsPath = `${contentPath}/assets`
+  const contentPath = options.contentPath || "content/blog"
+  const assetsPath = options.assetsPath || "content/assets"
 
-  const paths = [contentPath, blogPath, assetsPath]
+  const paths = [contentPath, assetsPath]
 
   // each of these paths must exist, or gatsby-source-filesystem will throw an error
   paths.forEach(path => {
@@ -14,19 +15,66 @@ exports.onPreBootstrap = ({ reporter }, options) => {
       fs.mkdirSync(path)
     }
   })
+}
+
+exports.createPages = async ({ reporter, graphql, actions }) => {
+  const { createPage } = actions
+
+  const blogPost = path.resolve(`./src/templates/blog-post.js`)
+  const result = await graphql(
+    `
+      {
+        allMarkdownRemark(
+          sort: { fields: [frontmatter___date], order: DESC }
+          limit: 1000
+        ) {
+          edges {
+            node {
+              fields {
+                slug
+              }
+              frontmatter {
+                title
+              }
+            }
+          }
+        }
+      }
+    `
+  )
 
-  if (!fs.existsSync(contentPath)) {
-    reporter.info(`Creating the ${contentPath} directory`)
-    fs.mkdirSync(contentPath)
+  if (result.errors) {
+    reporter.panic(result.errors)
   }
-}
 
-exports.createPages = ({ actions, reporter }, options) => {
-  reporter.warn("make sure to load data from somewhere!")
+  // Create blog posts pages.
+  const posts = result.data.allMarkdownRemark.edges
+
+  posts.forEach((post, index) => {
+    const previous = index === posts.length - 1 ? null : posts[index + 1].node
+    const next = index === 0 ? null : posts[index - 1].node
 
-  // TODO replace this with data from somewhere
-  actions.createPage({
-    path: options.basePath || "/",
-    component: require.resolve("./src/templates/page.js"),
+    createPage({
+      path: post.node.fields.slug,
+      component: blogPost,
+      context: {
+        slug: post.node.fields.slug,
+        previous,
+        next,
+      },
+    })
   })
 }
+
+exports.onCreateNode = ({ node, actions, getNode }) => {
+  const { createNodeField } = actions
+
+  if (node.internal.type === `MarkdownRemark`) {
+    const value = createFilePath({ node, getNode })
+    createNodeField({
+      name: `slug`,
+      node,
+      value,
+    })
+  }
+}

gatsby-theme-writer/src/components/featured-post.js

@@ -1,6 +1,5 @@
 import { Link } from "gatsby"
 import Image from "gatsby-image"
-import React from "react"
 import { Styled } from "theme-ui"
 import PostMetadata from "./post-metadata"
 /** @jsx jsx */
@@ -16,7 +15,9 @@ const FeaturedPost = ({
 }) => {
   return (
     <article>
-      <Image fluid={fluidImageData} />
+      <Link to={slug}>
+        <Image sx={{ maxHeight: 250 }} fluid={fluidImageData} />
+      </Link>
       <Styled.h2 sx={{ marginBottom: 0 }}>{title}</Styled.h2>
       <PostMetadata timeToRead={timeToRead} formattedDate={formattedDate} />
       <p>

gatsby-theme-writer/src/components/featured-posts.js

@@ -1,3 +1,4 @@
+import Grid from "./grid"
 import FeaturedPost from "./featured-post"
 /** @jsx jsx */
 import { jsx } from "theme-ui"
@@ -6,24 +7,24 @@ const FeaturedPosts = ({ posts }) => {
   return (
     <div
       sx={{
-        display: "grid",
-        gridColumnGap: 3,
-        gridTemplateColumns: "repeat(2, 1fr)",
-        padding: 3,
         border: "1px solid #eee",
         backgroundColor: "#fcfcfc",
         borderRadius: 4,
       }}
     >
-      {posts.map(post => (
-        <FeaturedPost
-          title={post.frontmatter.title}
-          formattedDate={post.frontmatter.date}
-          descriptionHTML={post.excerpt}
-          fluidImageData={post.frontmatter.featuredImage.childImageSharp.fluid}
-          timeToRead={post.timeToRead}
-        />
-      ))}
+      <Grid columns={posts.length}>
+        {posts.map(post => (
+          <FeaturedPost
+            title={post.frontmatter.title}
+            formattedDate={post.frontmatter.date}
+            descriptionHTML={post.excerpt}
+            fluidImageData={
+              post.frontmatter.featuredImage.childImageSharp.fluid
+            }
+            timeToRead={post.timeToRead}
+          />
+        ))}
+      </Grid>
     </div>
   )
 }

gatsby-theme-writer/src/components/grid.js

@@ -0,0 +1,19 @@
+/** @jsx jsx */
+import { jsx } from "theme-ui"
+
+const Grid = ({ columns, children, padding = 3 }) => {
+  return (
+    <div
+      sx={{
+        display: "grid",
+        gridColumnGap: 3,
+        gridTemplateColumns: ["repeat(1, 1fr)", `repeat(${columns}, 1fr)`],
+        padding: 3,
+      }}
+    >
+      {children}
+    </div>
+  )
+}
+
+export default Grid

gatsby-theme-writer/src/components/site-title.js

@@ -12,6 +12,7 @@ const SiteTitle = ({ baseUrl, children }) => {
         color: "text",
         paddingLeft: 4,
         paddingRight: 4,
+        textAlign: "center",
       }}
     >
       <h1 sx={{ fontFamily: "title" }}>{children}</h1>

gatsby-theme-writer/src/templates/blog-post.js

@@ -0,0 +1,71 @@
+import { graphql, Link } from "gatsby"
+import React from "react"
+import Layout from "../components/layout"
+import PostMetadata from "../components/post-metadata"
+/** @jsx jsx */
+import { jsx } from "theme-ui"
+
+class BlogPostTemplate extends React.Component {
+  render() {
+    const post = this.props.data.markdownRemark
+    const siteTitle = this.props.data.site.siteMetadata.title
+    const { previous, next } = this.props.pageContext
+
+    return (
+      <Layout location={this.props.location} title={siteTitle}>
+        <h1>{post.frontmatter.title}</h1>
+        <PostMetadata
+          formattedDagte={post.frontmatter.date}
+          timeToRead={post.timeToRead}
+        />
+        <div dangerouslySetInnerHTML={{ __html: post.html }} />
+        <ul
+          sx={{
+            display: `flex`,
+            flexWrap: `wrap`,
+            justifyContent: `space-between`,
+            listStyle: `none`,
+            padding: 0,
+          }}
+        >
+          <li>
+            {previous && (
+              <Link to={previous.fields.slug} rel="prev">
+                ← {previous.frontmatter.title}
+              </Link>
+            )}
+          </li>
+          <li>
+            {next && (
+              <Link to={next.fields.slug} rel="next">
+                {next.frontmatter.title} →
+              </Link>
+            )}
+          </li>
+        </ul>
+      </Layout>
+    )
+  }
+}
+
+export default BlogPostTemplate
+
+export const pageQuery = graphql`
+  query BlogPostBySlug($slug: String!) {
+    site {
+      siteMetadata {
+        title
+        author
+      }
+    }
+    markdownRemark(fields: { slug: { eq: $slug } }) {
+      html
+      timeToRead
+      frontmatter {
+        title
+        date(formatString: "MMMM DD, YYYY")
+        description
+      }
+    }
+  }
+`

gatsby-theme-writer/src/templates/featured-posts.js

@@ -20,7 +20,7 @@ const featuredPostsQuery = graphql`
           date(formatString: "MMMM D, YYYY")
           featuredImage {
             childImageSharp {
-              fluid(maxWidth: 400, maxHeight: 250) {
+              fluid(maxWidth: 800, maxHeight: 500) {
                 ...GatsbyImageSharpFluid
               }
             }