using-javascript-transforms location error

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

@@ -25,7 +25,6 @@ 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")
 
     // 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-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/components/SiteSidebar/index.js

@@ -7,7 +7,7 @@ import siteMetadata from '../metadata.yaml';
 
 class SiteSidebar extends React.Component {
     render() {
-        const isHome = location.pathname === ('/');
+        const isHome = this.props.location.pathname === ('/');
         // const siteMetadata = this.props.data.siteMetadata;
         // placeholder ^ for graphql
         // TODO, deal with image more nice like

examples/using-javascript-transforms/src/html.js

@@ -2,6 +2,15 @@ import React from 'react';
 import * as PropTypes from "prop-types"
 import Helmet from 'react-helmet';
 
+let stylesStr
+if (process.env.NODE_ENV === `production`) {
+  try {
+    stylesStr = require(`!raw-loader!../public/styles.css`)
+  } catch (e) {
+    console.log(e)
+  }
+}
+
 const propTypes = {
   headComponents: PropTypes.node.isRequired,
   body: PropTypes.node.isRequired,
@@ -10,13 +19,25 @@ const propTypes = {
 
 class Html extends React.Component {
     render() {
+
+      let css
+      if (process.env.NODE_ENV === `production`) {
+        css = (
+          <style
+            id="gatsby-inlined-css"
+            dangerouslySetInnerHTML={{ __html: stylesStr }}
+          />
+        )
+      }
+
         return (
             <html lang="en">
             <head>
               <meta charSet="utf-8" />
               <meta httpEquiv="X-UA-Compatible" content="IE=edge" />
               <meta name="viewport" content="width=device-width, initial-scale=1.0 maximum-scale=5.0" />
               { this.props.headComponents }
+              {css}
             </head>
             <body>
               <div id="___gatsby" dangerouslySetInnerHTML={{__html: this.props.body}} />

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

@@ -3,15 +3,12 @@ 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 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;
@@ -20,7 +17,7 @@ class MasterLayout extends React.Component {
         //  layouts do not yet have that support.
         if (location === '/') {
           jimmyPage = this.props.children()
-        } else if (location === '/about' || location === '/contact') {
+        } else if (location === '/contact') {
           jimmyPage = <InsetPage {...this.props} />
         } else {
           jimmyPage = <BlogPost {...this.props} />
@@ -44,6 +41,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 +61,4 @@ export const pageQuery = graphql`
       }
     }
 `
+*/

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';