Merge pull request #50 from AustinGreen/select-by-id

Select by ID instead of path and derive path from file path

gatsby-config.js

@@ -34,4 +34,4 @@ module.exports = {
       },
     },
   ],
-};
+}

gatsby-node.js

@@ -1,4 +1,5 @@
-const path = require("path")
+const path = require('path')
+const { createFilePath } = require('gatsby-source-filesystem')
 
 exports.createPages = ({ boundActionCreators, graphql }) => {
   const { createPage } = boundActionCreators
@@ -8,8 +9,11 @@ exports.createPages = ({ boundActionCreators, graphql }) => {
       allMarkdownRemark(limit: 1000) {
         edges {
           node {
+            id
+            fields {
+              slug
+            }
             frontmatter {
-              path
               templateKey
             }
           }
@@ -22,16 +26,31 @@ exports.createPages = ({ boundActionCreators, graphql }) => {
       return Promise.reject(result.errors)
     }
 
-    return result.data.allMarkdownRemark.edges.forEach(({ node }) => {
-      const pagePath = node.frontmatter.path
+    result.data.allMarkdownRemark.edges.forEach(edge => {
+      const id = edge.node.id
       createPage({
-        path: pagePath,
+        path: edge.node.fields.slug,
         component: path.resolve(
-          `src/templates/${String(node.frontmatter.templateKey)}.js`
+          `src/templates/${String(edge.node.frontmatter.templateKey)}.js`
         ),
         // additional data can be passed via context
-        context: {},
+        context: {
+          id,
+        },
       })
     })
   })
 }
+
+exports.onCreateNode = ({ node, boundActionCreators, getNode }) => {
+  const { createNodeField } = boundActionCreators
+
+  if (node.internal.type === `MarkdownRemark`) {
+    const value = createFilePath({ node, getNode })
+    createNodeField({
+      name: `slug`,
+      node,
+      value,
+    })
+  }
+}

package.json

@@ -29,7 +29,7 @@
     "build": "gatsby build",
     "develop": "gatsby develop",
     "serve": "gatsby serve",
-    "format": "prettier --trailing-comma es5 --no-semi --single-quote --write src/**/*.js",
+    "format": "prettier --trailing-comma es5 --no-semi --single-quote --write \"{gatsby-*.js,src/**/*.js}\"",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "devDependencies": {

src/cms/preview-templates/AboutPagePreview.js

@@ -1,8 +1,11 @@
-import React from 'react';
-import { AboutPageTemplate } from '../../templates/about-page';
+import React from 'react'
+import { AboutPageTemplate } from '../../templates/about-page'
 
 const AboutPagePreview = ({ entry, widgetFor }) => (
-  <AboutPageTemplate title={entry.getIn(['data', 'title'])} content={widgetFor('body')} />
-);
+  <AboutPageTemplate
+    title={entry.getIn(['data', 'title'])}
+    content={widgetFor('body')}
+  />
+)
 
-export default AboutPagePreview;
+export default AboutPagePreview

src/cms/preview-templates/BlogPostPreview.js

@@ -1,5 +1,5 @@
-import React from 'react';
-import { BlogPostTemplate } from '../../templates/blog-post';
+import React from 'react'
+import { BlogPostTemplate } from '../../templates/blog-post'
 
 const BlogPostPreview = ({ entry, widgetFor }) => (
   <BlogPostTemplate
@@ -7,6 +7,6 @@ const BlogPostPreview = ({ entry, widgetFor }) => (
     description={entry.getIn(['data', 'description'])}
     title={entry.getIn(['data', 'title'])}
   />
-);
+)
 
-export default BlogPostPreview;
+export default BlogPostPreview

src/cms/preview-templates/ProductPagePreview.js

@@ -1,15 +1,15 @@
-import React from 'react';
-import { ProductPageTemplate } from '../../templates/product-page';
+import React from 'react'
+import { ProductPageTemplate } from '../../templates/product-page'
 
 const ProductPagePreview = ({ entry, getAsset }) => {
-  const entryBlurbs = entry.getIn(['data', 'intro', 'blurbs']);
-  const blurbs = entryBlurbs ? entryBlurbs.toJS() : [];
+  const entryBlurbs = entry.getIn(['data', 'intro', 'blurbs'])
+  const blurbs = entryBlurbs ? entryBlurbs.toJS() : []
 
-  const entryTestimonials = entry.getIn(['data', 'testimonials']);
-  const testimonials = entryTestimonials ? entryTestimonials.toJS() : [];
+  const entryTestimonials = entry.getIn(['data', 'testimonials'])
+  const testimonials = entryTestimonials ? entryTestimonials.toJS() : []
 
-  const entryPricingPlans = entry.getIn(['data', 'pricing', 'plans']);
-  const pricingPlans = entryPricingPlans ? entryPricingPlans.toJS() : [];
+  const entryPricingPlans = entry.getIn(['data', 'pricing', 'plans'])
+  const pricingPlans = entryPricingPlans ? entryPricingPlans.toJS() : []
 
   return (
     <ProductPageTemplate
@@ -42,7 +42,7 @@ const ProductPagePreview = ({ entry, getAsset }) => {
         plans: pricingPlans,
       }}
     />
-  );
-};
+  )
+}
 
-export default ProductPagePreview;
+export default ProductPagePreview

src/layouts/all.sass

@@ -1,6 +1,6 @@
 @import "~bulma/sass/utilities/initial-variables"
 
-// Config
+// Config vars
 $kaldi-red: #FD461E
 $kaldi-red-invert: #fff
 

src/pages/blog/2016-12-17-making-sense-of-the-scaas-new-flavor-wheel.md

@@ -1,6 +1,5 @@
 ---
 templateKey: blog-post
-path: /making-sense
 title: Making sense of the SCAA’s new Flavor Wheel
 date: 2016-12-17T15:04:10.000Z
 description: The Coffee Taster’s Flavor Wheel, the official resource used by coffee tasters, has been revised for the first time this year.

src/pages/blog/2017-01-04-a-beginners-guide-to-brewing-with-chemex.md

@@ -1,6 +1,5 @@
 ---
 templateKey: blog-post
-path: /brewing-chemex
 title: A beginners’ guide to brewing with Chemex
 date: 2017-01-04T15:04:10.000Z
 description: Brewing with a Chemex probably seems like a complicated, time-consuming ordeal, but once you get used to the process, it becomes a soothing ritual that's worth the effort every time.

src/pages/blog/2017-01-04-just-in-small-batch-of-jamaican-blue-mountain-in-store-next-week.md

@@ -1,6 +1,5 @@
 ---
 templateKey: 'blog-post'
-path: /jamaica-blue
 title: 'Just in: small batch of Jamaican Blue Mountain in store next week'
 date: 2017-01-04T15:04:10.000Z
 description: >-

src/pages/index.js

@@ -21,7 +21,7 @@ export default class IndexPage extends React.Component {
                 key={post.id}
               >
                 <p>
-                  <Link className="has-text-primary" to={post.frontmatter.path}>
+                  <Link className="has-text-primary" to={post.fields.slug}>
                     {post.frontmatter.title}
                   </Link>
                   <span> &bull; </span>
@@ -31,7 +31,7 @@ export default class IndexPage extends React.Component {
                   {post.excerpt}
                   <br />
                   <br />
-                  <Link className="button is-small" to={post.frontmatter.path}>
+                  <Link className="button is-small" to={post.fields.slug}>
                     Keep Reading →
                   </Link>
                 </p>
@@ -50,11 +50,13 @@ export const pageQuery = graphql`
         node {
           excerpt(pruneLength: 400)
           id
+          fields {
+            slug
+          }
           frontmatter {
             title
             templateKey
             date(formatString: "MMMM DD, YYYY")
-            path
           }
         }
       }

src/templates/about-page.js

@@ -35,11 +35,10 @@ export default ({ data }) => {
 }
 
 export const aboutPageQuery = graphql`
-  query AboutPage($path: String!) {
-    markdownRemark(frontmatter: { path: { eq: $path } }) {
+  query AboutPage($id: String!) {
+    markdownRemark(id: { eq: $id }) {
       html
       frontmatter {
-        path
         title
       }
     }

src/templates/blog-post.js

@@ -44,11 +44,11 @@ export default props => {
 }
 
 export const pageQuery = graphql`
-  query BlogPostByPath($path: String!) {
-    markdownRemark(frontmatter: { path: { eq: $path } }) {
+  query BlogPostByID($id: String!) {
+    markdownRemark(id: { eq: $id }) {
+      id
       html
       frontmatter {
-        path
         date(formatString: "MMMM DD, YYYY")
         title
         description

src/templates/product-page.js

@@ -123,11 +123,10 @@ export default ({ data }) => {
 }
 
 export const productPageQuery = graphql`
-  query ProductPage($path: String!) {
-    markdownRemark(frontmatter: { path: { eq: $path } }) {
+  query ProductPage($id: String!) {
+    markdownRemark(id: { eq: $id }) {
       frontmatter {
         title
-        path
         image
         heading
         description

static/admin/config.yml

@@ -13,7 +13,6 @@ collections:
     slug: "{{year}}-{{month}}-{{day}}-{{slug}}"
     fields:
       - {label: "Template Key", name: "templateKey", widget: "hidden", default: "blog-post"}
-      - {label: "Path", name: "path", widget: "string"}
       - {label: "Title", name: "title", widget: "string"}
       - {label: "Publish Date", name: "date", widget: "datetime"}
       - {label: "Description", name: "description", widget: "text"}
@@ -27,7 +26,6 @@ collections:
         name: "about"
         fields:
           - {label: "Template Key", name: "templateKey", widget: "hidden", default: "about-page"}
-          - {label: "Path", name: "path", widget: "hidden", default: "/about"}
           - {label: "Title", name: "title", widget: "string"}
           - {label: "Body", name: "body", widget: "markdown"}
       - file: "src/pages/product/product.md"
@@ -35,7 +33,6 @@ collections:
         name: "products"
         fields:
           - {label: "Template Key", name: "templateKey", widget: "hidden", default: "product-page"}
-          - {label: "Path", name: "path", widget: "hidden", default: "/products"}
           - {label: Title, name: title, widget: string}
           - {label: Image, name: image, widget: image}
           - {label: Heading, name: heading, widget: string}