using-javascript-transforms location error

examples/using-javascript-transforms/gatsby-node.js

@@ -27,8 +27,7 @@ exports.createPages = ({ graphql, boundActionCreators }) => {
 
   return new Promise((resolve, reject) => {
     const pages = []
-    const markdownTemplate = path.resolve(`src/templates/markdown.js`)
-    const jsTemplate = path.resolve(`src/templates/javascript.js`)
+    const markdownTemplate = path.resolve("src/templates/markdown.js")
 
     // Query for all markdown "nodes" and for the slug we previously created.
     resolve(

examples/using-javascript-transforms/package.json

@@ -7,7 +7,7 @@
     "develop": "node_modules/.bin/gatsby develop",
     "dev:hard": "rm -rf .cache && rm -rf public && npm run develop",
     "build": "npm run clean & .\\node_modules\\.bin\\gatsby build",
-    "serve-build": "node_modules/.bin/gatsby serve-build",
+    "serve": "node_modules/.bin/gatsby serve",
     "clean:public": "rm -rf public & mkdir public",
     "clean": "npm run clean:public",
     "lint": "./node_modules/.bin/eslint --ext .js,.jsx --ignore-pattern public .",
@@ -26,22 +26,22 @@
   "dependencies": {
     "bulma": "0.4.2",
     "d3": "4.9.1",
-    "gatsby": "^1.1.0",
-    "gatsby-link": "^1.0.9",
-    "gatsby-plugin-offline": "^1.0.1",
-    "gatsby-plugin-postcss-sass": "^1.0.1",
-    "gatsby-plugin-sharp": "^1.0.0",
-    "gatsby-remark-copy-linked-files": "^1.0.1",
-    "gatsby-remark-prismjs": "^1.1.0",
-    "gatsby-remark-responsive-iframe": "^1.0.1",
-    "gatsby-remark-images": "^1.1.0",
-    "gatsby-remark-smartypants": "^1.0.1",
-    "gatsby-source-filesystem": "^1.0.1",
-    "gatsby-source-contentful": "^1.1.0",
-    "gatsby-transformer-javascript-static-exports": "^1.0.1",
-    "gatsby-transformer-remark": "^1.1.0",
-    "gatsby-transformer-sharp": "^1.0.1",
-    "gatsby-transformer-yaml": "^1.0.0",
+    "gatsby": "latest",
+    "gatsby-link": "latest",
+    "gatsby-plugin-offline": "latest",
+    "gatsby-plugin-postcss-sass": "latest",
+    "gatsby-plugin-sharp": "latest",
+    "gatsby-remark-copy-linked-files": "latest",
+    "gatsby-remark-prismjs": "latest",
+    "gatsby-remark-responsive-iframe": "latest",
+    "gatsby-remark-images": "latest",
+    "gatsby-remark-smartypants": "latest",
+    "gatsby-source-filesystem": "latest",
+    "gatsby-source-contentful": "latest",
+    "gatsby-transformer-javascript-static-exports": "latest",
+    "gatsby-transformer-remark": "latest",
+    "gatsby-transformer-sharp": "latest",
+    "gatsby-transformer-yaml": "latest",
     "moment": "^2.14.1",
     "normalize.css": "^7.0.0",
     "prop-types": "^15.5.8",

examples/using-javascript-transforms/src/articles/2017-01-22-a-first-post/index.md

@@ -3,7 +3,7 @@ title: First Post About First Post
 written: "2017-01-22"
 updated: "2017-03-04"
 layoutType: post
-path: "a-first-post"
+path: "/a-first-post/"
 category: "Beginnings"
 description: "From humble beginnings to... space?"
 ---

examples/using-javascript-transforms/src/articles/2017-03-09-choropleth-on-d3v4/_choropleth.md

@@ -8,6 +8,21 @@ Sed fermentum finibus mauris. Nullam posuere ornare purus eu viverra. Fusce plac
 
 Etiam sodales felis at magna condimentum, eu placerat arcu pulvinar. Nulla facilisi. Mauris bibendum felis in ex sagittis ornare. Mauris varius luctus magna, sed mattis lorem blandit id. Fusce condimentum odio non dui semper, quis finibus diam vehicula. Pellentesque ac aliquam lorem. Aliquam ac neque augue. Phasellus tempus faucibus blandit. Nulla iaculis tortor felis, et luctus libero rhoncus blandit. Donec mollis tortor nec tellus imperdiet, in porttitor sem molestie. Duis ac arcu rutrum urna auctor mollis. Phasellus ante dolor, congue ac lacinia id, ultrices et urna.
 
+```javascript
+graph.setup = (selection, measurements) => {
+// the path string is drawn expecting:
+  // a width of 950px
+  // a height of 600px
+  // which gives an aspect ratio of 1.6
+
+  let svg = selection.append('svg')
+    .attr('width', measurements.width)
+    .attr('height', measurements.width / 1.6);
+
+  return svg;
+}
+```
+
 Nullam id mollis justo. Sed malesuada interdum purus id commodo. Fusce finibus porttitor dolor, in pretium nulla. Praesent eleifend ornare nibh, id dictum sapien blandit sodales. Vestibulum scelerisque dolor sit amet tincidunt tincidunt. Integer at auctor odio. Maecenas at mattis nisi. Proin lobortis, ex sed tincidunt imperdiet, lorem odio porta felis, ac consectetur orci metus vel nisi. Donec quis libero dapibus, pulvinar est vitae, ullamcorper neque. Sed vestibulum nulla sed turpis congue elementum. Sed nunc nibh, lacinia non venenatis eget, mattis at libero. Praesent venenatis nulla vitae magna ullamcorper fringilla. Mauris vestibulum nec nunc at elementum.
 
 Praesent neque lorem, auctor ut commodo ut, condimentum in justo. Nam metus odio, bibendum dignissim neque vel, finibus dapibus nisi. In hac habitasse platea dictumst. Ut viverra magna rhoncus neque placerat finibus. Aenean vestibulum, quam non congue vulputate, risus felis convallis magna, sit amet ullamcorper odio arcu in tellus. Vivamus aliquam metus vel ante venenatis, vitae efficitur tellus facilisis. Ut tempus cursus mi, ultricies fringilla nunc. Mauris ac aliquet tortor. Cras ut ornare justo, dignissim vestibulum est. Donec pulvinar nibh nec venenatis viverra. Sed consectetur volutpat metus in volutpat. Suspendisse vulputate placerat tortor nec ultricies. Integer sed felis euismod lectus lobortis molestie. Donec finibus velit ullamcorper, feugiat dolor eu, maximus sem. Aenean congue vulputate massa quis placerat.

examples/using-javascript-transforms/src/articles/2017-03-09-choropleth-on-d3v4/index.js

@@ -14,7 +14,7 @@ exports.data = {
   written: `2017-03-09`,
   updated: `2017-04-28`,
   layoutType: `post`,
-  path: `choropleth-on-d3v4`,
+  path: `/choropleth-on-d3v4/`,
   category: `data science`,
   description: `Things about the choropleth.`,
 }

examples/using-javascript-transforms/src/articles/2017-05-30-choropleth-on-d3v4-alternate/index.js

@@ -13,7 +13,7 @@ export const data = {
   title: `Alternate Choropleth on d3v4`,
   written: `2017-05-30`,
   layoutType: `post`,
-  path: `choropleth-on-d3v4-alternate`,
+  path: `/choropleth-on-d3v4-alternate/`,
   category: `data science`,
   description: `Even more things about the choropleth. No, seriously.`,
 }

examples/using-javascript-transforms/src/components/SiteSidebar/index.js

@@ -6,11 +6,11 @@ import siteMetadata from "../metadata.yaml"
 // cheating with ^ because no graphql
 
 class SiteSidebar extends React.Component {
-  render() {
-    const isHome = location.pathname === `/`
-    // const siteMetadata = this.props.data.siteMetadata;
-    // placeholder ^ for graphql
-    // TODO, deal with image more nice like
+    render() {
+        const isHome = this.props.location.pathname === ('/');
+        // const siteMetadata = this.props.data.siteMetadata;
+        // placeholder ^ for graphql
+        // TODO, deal with image more nice like
 
     let header = (
       <div className="">

examples/using-javascript-transforms/src/layouts/index.js

@@ -1,18 +1,13 @@
-import React from "react"
-import * as PropTypes from "prop-types"
-import Helmet from "react-helmet"
-import siteMetadata from "../components/metadata.yaml"
-import "../static/css/base.scss"
-require(`prismjs/themes/prism-coy.css`)
+import React from 'react';
+import * as PropTypes from 'prop-types';
+import Helmet from 'react-helmet';
+import siteMetadata from '../components/metadata.yaml';
+import '../static/css/base.scss';
 
 import InsetPage from "./inset-page"
 import BlogPost from "./blog-post"
 
 class MasterLayout extends React.Component {
-  static propTypes = {
-    location: PropTypes.object.isRequired,
-  }
-
   render() {
     let location = this.props.location.pathname
     let jimmyPage // you jimmy a lock until it opens, so same thing here ;)
@@ -44,6 +39,7 @@ class MasterLayout extends React.Component {
 export default MasterLayout
 
 // this is a placeholder, does not actually work
+/*
 export const pageQuery = graphql`
   query LayoutBySlug($slug: String!) {
     allJsFrontmatter {
@@ -63,3 +59,4 @@ export const pageQuery = graphql`
     }
   }
 `
+*/

examples/using-javascript-transforms/src/mainPages/contact.js

@@ -4,7 +4,7 @@ import SiteLinks from "../components/SiteLinks"
 
 exports.data = {
   layoutType: `page`,
-  path: `contact`,
+  path: `/contact/`,
 }
 
 class ContactMe extends React.Component {

examples/using-javascript-transforms/src/static/css/base.scss

@@ -1,5 +1,5 @@
 @import '~normalize.css';
-
+@import 'prismjs/themes/prism-coy.css';
 // Override variables here
 // You can add new ones or update existing ones:
 
@@ -14,4 +14,4 @@ $background: #FFFFFF;
 $family-sans-serif: 'Varela Round', sans-serif;
 $family-serif: 'Lora', serif; // Add a serif family
 
-@import '~bulma';
+@import '~bulma';