Make paths more flexible

gatsby-node.js

@@ -1,11 +1,14 @@
-const path = require('path');
+const path = require("path");
 
 exports.createPages = ({ boundActionCreators, graphql }) => {
   const { createPage } = boundActionCreators;
 
   return graphql(`
     {
-      allMarkdownRemark(sort: { order: DESC, fields: [frontmatter___date] }, limit: 1000) {
+      allMarkdownRemark(
+        sort: { order: DESC, fields: [frontmatter___date] }
+        limit: 1000
+      ) {
         edges {
           node {
             excerpt(pruneLength: 400)
@@ -63,7 +66,7 @@ exports.createPages = ({ boundActionCreators, graphql }) => {
         }
       }
     }
-  `).then((result) => {
+  `).then(result => {
     if (result.errors) {
       result.errors.forEach(e => console.error(e.toString()));
       return Promise.reject(result.errors);
@@ -72,8 +75,12 @@ exports.createPages = ({ boundActionCreators, graphql }) => {
     return result.data.allMarkdownRemark.edges.forEach(({ node }) => {
       createPage({
         path: node.frontmatter.path,
-        component: path.resolve(`src/templates/${String(node.frontmatter.templateKey)}.js`),
-        context: {}, // additional data can be passed via context
+        component: path.resolve(
+          `src/templates/${String(node.frontmatter.templateKey)}.js`
+        ),
+        context: {
+          path: node.frontmatter.path
+        } // additional data can be passed via context
       });
     });
   });

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

@@ -1,10 +1,11 @@
 ---
 templateKey: blog-post
-path: /making-sense
+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.
 ---
+
 ![flavor wheel](/img/flavor_wheel.jpg)
 
 The SCAA updated the wheel to reflect the finer nuances needed to describe flavors more precisely. The new descriptions are more detailed and hence allow cuppers to distinguish between more flavors.

src/pages/index.js

@@ -1,15 +1,15 @@
-import React from 'react';
-import Link from 'gatsby-link';
-import Script from 'react-load-script';
-import graphql from 'graphql';
+import React from "react";
+import Link from "gatsby-link";
+import Script from "react-load-script";
+import graphql from "graphql";
 
 export default class IndexPage extends React.Component {
-  static handleScriptLoad() {
-    if (window.netlifyIdentity) {
-      window.netlifyIdentity.on('init', (user) => {
+  handleScriptLoad() {
+    if (typeof window !== `undefined` && window.netlifyIdentity) {
+      window.netlifyIdentity.on("init", user => {
         if (!user) {
-          window.netlifyIdentity.on('login', () => {
-            document.location.href = '/admin/';
+          window.netlifyIdentity.on("login", () => {
+            document.location.href = "/admin/";
           });
         }
       });
@@ -31,24 +31,30 @@ export default class IndexPage extends React.Component {
           <div className="content">
             <h1 className="has-text-weight-bold is-size-2">Latest Stories</h1>
           </div>
-          {posts.filter(post => post.node.frontmatter.templateKey === 'blog-post').map(({ node: post }) => (
-            <div className="content" style={{ border: '1px solid #eaecee', padding: '2em 4em' }} key={post.id}>
-              <p>
-                <Link className="has-text-primary" to={post.frontmatter.path}>
-                  {post.frontmatter.title}
-                </Link>
-                <span> &bull; </span>
-                <small>{post.frontmatter.date}</small>
-              </p>
-              <p>
-                {post.excerpt}
-                <br />
-                <br />
-                <Link className="button is-small" to={post.frontmatter.path}>
+          {posts
+            .filter(post => post.node.frontmatter.templateKey === "blog-post")
+            .map(({ node: post }) => (
+              <div
+                className="content"
+                style={{ border: "1px solid #eaecee", padding: "2em 4em" }}
+                key={post.id}
+              >
+                <p>
+                  <Link className="has-text-primary" to={post.frontmatter.path}>
+                    {post.frontmatter.title}
+                  </Link>
+                  <span> &bull; </span>
+                  <small>{post.frontmatter.date}</small>
+                </p>
+                <p>
+                  {post.excerpt}
+                  <br />
+                  <br />
+                  <Link className="button is-small" to={post.frontmatter.path}>
                     Keep Reading →
-                </Link>
-              </p>
-            </div>
+                  </Link>
+                </p>
+              </div>
             ))}
         </div>
       </section>