diff --git a/examples/using-javascript-transforms/gatsby-node.js b/examples/using-javascript-transforms/gatsby-node.js index c5df9be05d95b..e50b221f7738a 100644 --- a/examples/using-javascript-transforms/gatsby-node.js +++ b/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( diff --git a/examples/using-javascript-transforms/package.json b/examples/using-javascript-transforms/package.json index 7b179531f84c7..0d1dae940caa8 100644 --- a/examples/using-javascript-transforms/package.json +++ b/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", diff --git a/examples/using-javascript-transforms/src/articles/2017-01-22-a-first-post/index.md b/examples/using-javascript-transforms/src/articles/2017-01-22-a-first-post/index.md index 6cdc33dda30f8..fa194324a4da4 100644 --- a/examples/using-javascript-transforms/src/articles/2017-01-22-a-first-post/index.md +++ b/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?" --- diff --git a/examples/using-javascript-transforms/src/articles/2017-03-09-choropleth-on-d3v4/_choropleth.md b/examples/using-javascript-transforms/src/articles/2017-03-09-choropleth-on-d3v4/_choropleth.md index 3bf16d3870bb6..60c7860578a06 100644 --- a/examples/using-javascript-transforms/src/articles/2017-03-09-choropleth-on-d3v4/_choropleth.md +++ b/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. diff --git a/examples/using-javascript-transforms/src/articles/2017-03-09-choropleth-on-d3v4/index.js b/examples/using-javascript-transforms/src/articles/2017-03-09-choropleth-on-d3v4/index.js index eee5fc1c1cca6..3db4edc7bddd3 100644 --- a/examples/using-javascript-transforms/src/articles/2017-03-09-choropleth-on-d3v4/index.js +++ b/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.`, } diff --git a/examples/using-javascript-transforms/src/articles/2017-05-30-choropleth-on-d3v4-alternate/index.js b/examples/using-javascript-transforms/src/articles/2017-05-30-choropleth-on-d3v4-alternate/index.js index 8adf6ba1245f2..5e8620ab65daa 100644 --- a/examples/using-javascript-transforms/src/articles/2017-05-30-choropleth-on-d3v4-alternate/index.js +++ b/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.`, } diff --git a/examples/using-javascript-transforms/src/components/SiteSidebar/index.js b/examples/using-javascript-transforms/src/components/SiteSidebar/index.js index 0a082362b9969..7e8ad9b71a267 100644 --- a/examples/using-javascript-transforms/src/components/SiteSidebar/index.js +++ b/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 = (
diff --git a/examples/using-javascript-transforms/src/html.js b/examples/using-javascript-transforms/src/html.js deleted file mode 100644 index 0164a02a53a6c..0000000000000 --- a/examples/using-javascript-transforms/src/html.js +++ /dev/null @@ -1,38 +0,0 @@ -import React from "react" -import * as PropTypes from "prop-types" -import Helmet from "react-helmet" - -const propTypes = { - headComponents: PropTypes.node.isRequired, - body: PropTypes.node.isRequired, - postBodyComponents: PropTypes.node.isRequired, -} - -class Html extends React.Component { - render() { - return ( - - - - - - {this.props.headComponents} - - -
- {this.props.postBodyComponents} - - - ) - } -} - -Html.propTypes = propTypes - -module.exports = Html diff --git a/examples/using-javascript-transforms/src/layouts/index.js b/examples/using-javascript-transforms/src/layouts/index.js index 33a9a54487d0d..3ee5937ff2dbf 100644 --- a/examples/using-javascript-transforms/src/layouts/index.js +++ b/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` } } ` +*/ diff --git a/examples/using-javascript-transforms/src/mainPages/contact.js b/examples/using-javascript-transforms/src/mainPages/contact.js index 5240a9121eb71..4abefeda88103 100644 --- a/examples/using-javascript-transforms/src/mainPages/contact.js +++ b/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 { diff --git a/examples/using-javascript-transforms/src/static/css/base.scss b/examples/using-javascript-transforms/src/static/css/base.scss index cc5058fa71126..9605560ce0c2f 100644 --- a/examples/using-javascript-transforms/src/static/css/base.scss +++ b/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'; \ No newline at end of file +@import '~bulma';