Update feed and javascript transform example sites (#6224)

* Update feed example to Gatsby v2 * Update using-javascript-transforms example to Gatsby v2 * Fix eslint warnings * Tidy up package.json
gatsbyjs · Jun 29, 2018 · 52c3354 · 52c3354
1 parent c1d86bc
commit 52c3354
Show file tree

Hide file tree

Showing 17 changed files with 53 additions and 123 deletions.
diff --git a/examples/feed/.eslintrc.json b/examples/feed/.eslintrc.json
diff --git a/examples/feed/README.md b/examples/feed/README.md
@@ -1,5 +1,5 @@
 # RSS Feed Example
 
-https://feed.gatsbyjs.org
-
 Gatsby example site demonstrating how to use the RSS Feed generator plugin.
+
+Note that the RSS Feed will only be generated when running `gatsby build`.
diff --git a/examples/feed/package.json b/examples/feed/package.json
@@ -5,12 +5,16 @@
   "version": "1.0.0",
   "author": "Nicholas Young <[email protected]>",
   "dependencies": {
-    "gatsby": "latest",
-    "gatsby-source-filesystem": "latest",
-    "gatsby-transformer-remark": "latest",
-    "gatsby-plugin-feed": "latest"
+    "gatsby": "next",
+    "gatsby-plugin-feed": "next",
+    "gatsby-source-filesystem": "next",
+    "gatsby-transformer-remark": "next",
+    "react": "^16.4.1",
+    "react-dom": "^16.4.1"
   },
-  "keywords": ["gatsby"],
+  "keywords": [
+    "gatsby"
+  ],
   "license": "MIT",
   "main": "index.js",
   "scripts": {

diff --git a/examples/feed/src/html.js b/examples/feed/src/html.js
diff --git a/examples/feed/src/layouts/index.js b/examples/feed/src/layouts/index.js
diff --git a/examples/feed/src/pages/index.js b/examples/feed/src/pages/index.js
@@ -2,11 +2,8 @@ import React from "react"
 
 const IndexRoute = () => (
   <div>
-    <p>
-      Welcome to the GatsbyJS RSS Demo.
-      <a href="/rss.xml">Click here</a>
-      to see the generated RSS Feed.
-    </p>
+    <p> Welcome to the GatsbyJS RSS Demo.</p>
+    <p><a href="/rss.xml">Click here</a> to see the generated RSS Feed.</p>
   </div>
 )
 

diff --git a/examples/using-javascript-transforms/package.json b/examples/using-javascript-transforms/package.json
@@ -1,16 +1,12 @@
 {
   "name": "gatsby-example-using-javascript-transforms",
-  "version": "1.0.0",
+  "version": "2.0.0",
   "description": "example site and blog",
   "main": "index.js",
   "scripts": {
-    "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": "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 .",
+    "develop": "gatsby develop",
+    "build": "gatsby build",
+    "serve": "gatsby serve",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "keywords": [
@@ -26,13 +22,14 @@
   "dependencies": {
     "bulma": "0.4.2",
     "d3": "4.9.1",
-    "gatsby": "latest",
-    "gatsby-plugin-sass": "^1.0.16",
-    "gatsby-remark-prismjs": "latest",
-    "gatsby-source-filesystem": "latest",
-    "gatsby-transformer-javascript-frontmatter": "latest",
-    "gatsby-transformer-remark": "latest",
+    "gatsby": "next",
+    "gatsby-plugin-sass": "next",
+    "gatsby-remark-prismjs": "next",
+    "gatsby-source-filesystem": "next",
+    "gatsby-transformer-javascript-frontmatter": "next",
+    "gatsby-transformer-remark": "next",
     "moment": "^2.14.1",
+    "node-sass": "^4.9.0",
     "normalize.css": "^7.0.0",
     "prismjs": "^1.13.0",
     "prop-types": "^15.5.8",

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
@@ -1,10 +1,9 @@
 import React from "react"
 import BlogPostChrome from "../../components/BlogPostChrome"
-import { findDOMNode } from "react-dom"
 var d3 = require(`d3`)
 
 // this is one method to export data and make it usable elsewhere
-exports.frontmatter = {
+export const frontmatter = {
   title: `Choropleth on d3v4`,
   written: `2017-03-09`,
   updated: `2017-04-28`,
@@ -15,10 +14,6 @@ exports.frontmatter = {
 }
 
 class choroplethBase extends React.Component {
-  constructor(props) {
-    super(props)
-  }
-
   componentDidMount() {
     this.d3Node = d3.select(`div#states`)
     let measurements = {
@@ -127,7 +122,7 @@ average: tooltip, path fill
 
   let states = svg.selectAll(`path.states`).data(data)
 
-  let drawStates = states
+  states
     .enter()
     .append(`path`)
     .attr(`class`, `state`)
@@ -173,6 +168,7 @@ let mouseOut = () => {
     .style(`opacity`, 0)
 }
 
+// eslint-disable-next-line no-unused-vars
 function scale(scaleFactor, width, height) {
   return d3.geoTransform({
     point: function(x, y) {

diff --git a/...using-javascript-transforms/src/articles/2017-05-30-choropleth-on-d3v4-alternate/index.js b/...using-javascript-transforms/src/articles/2017-05-30-choropleth-on-d3v4-alternate/index.js
@@ -1,6 +1,5 @@
 import React from "react"
 import BlogPostChrome from "../../components/BlogPostChrome"
-import { findDOMNode } from "react-dom"
 var d3 = require(`d3`)
 
 // this is an additional method to export data and make it usable elsewhere
@@ -14,10 +13,6 @@ export const frontmatter = {
 }
 
 class choroplethAltBase extends React.Component {
-  constructor(props) {
-    super(props)
-  }
-
   componentDidMount() {
     this.d3Node = d3.select(`div#states`)
     let measurements = {
@@ -126,7 +121,7 @@ average: tooltip, path fill
 
   let states = svg.selectAll(`path.states`).data(data)
 
-  let drawStates = states
+  states
     .enter()
     .append(`path`)
     .attr(`class`, `state`)
@@ -172,6 +167,7 @@ let mouseOut = () => {
     .style(`opacity`, 0)
 }
 
+// eslint-disable-next-line no-unused-vars
 function scale(scaleFactor, width, height) {
   return d3.geoTransform({
     point: function(x, y) {

diff --git a/examples/using-javascript-transforms/src/components/Layouts/blogPost.js b/examples/using-javascript-transforms/src/components/Layouts/blogPost.js
@@ -1,7 +1,5 @@
 import React from "react"
 import { Link } from "gatsby"
-import Helmet from "react-helmet"
-import moment from "moment"
 
 import MasterLayout from "./master"
 

diff --git a/examples/using-javascript-transforms/src/components/Layouts/insetPage.js b/examples/using-javascript-transforms/src/components/Layouts/insetPage.js
@@ -4,8 +4,6 @@ import MasterLayout from "./master"
 
 class InsetPageLayout extends React.Component {
   render() {
-    const siteMetadata = this.props.data.site
-
     return (
       <div className="PageTemplate">
         <MasterLayout {...this.props}>

diff --git a/examples/using-javascript-transforms/src/components/Layouts/master.js b/examples/using-javascript-transforms/src/components/Layouts/master.js
@@ -1,5 +1,4 @@
 import React from "react"
-import * as PropTypes from "prop-types"
 import Helmet from "react-helmet"
 import "../../static/css/base.scss"
 

diff --git a/examples/using-javascript-transforms/src/components/PostPublished/index.js b/examples/using-javascript-transforms/src/components/PostPublished/index.js
@@ -1,36 +1,32 @@
 import React from "react"
-import Helmet from "react-helmet"
 import moment from "moment"
 
 class PostPublished extends React.Component {
   render() {
     const frontmatter = this
-
+    let published
     if (frontmatter.updated === null) {
-      var published = (
-        <div className="date-published">
-          <p>
-            <em>
-              published {moment(frontmatter.written).format(`D MMM YYYY`)}
-            </em>
-          </p>
-        </div>
+      published = (
+        <em>`published`{moment(frontmatter.written).format(`D MMM YYYY`)}</em>
       )
     } else {
-      var published = (
-        <div className="date-published">
-          <p>
-            <em>
-              originally published{` `}
-              {moment(frontmatter.written).format(`D MMM YYYY`)} and updated{` `}
-              {moment(frontmatter.updated).format(`D MMM YYYY`)}
-            </em>
-          </p>
-        </div>
+      published = (
+        <em>
+          {`originally published `}
+          {moment(frontmatter.written).format(`D MMM YYYY`)}
+          {` and updated `}
+          {moment(frontmatter.updated).format(`D MMM YYYY`)}
+        </em>
       )
     }
 
-    return <div className="container content">{published}</div>
+    return (
+      <div className="container content">
+        <div className="date-published">
+          <p>{published}</p>
+        </div>
+      </div>
+    )
   }
 }
 

diff --git a/examples/using-javascript-transforms/src/components/SiteSidebar/index.js b/examples/using-javascript-transforms/src/components/SiteSidebar/index.js
@@ -5,7 +5,6 @@ import SiteLinks from "../SiteLinks"
 
 class SiteSidebar extends React.Component {
   render() {
-    const isHome = this.props.location.pathname === `/`
     const { siteMetadata } = this.props.data.site
     // TODO, deal with image more nice like
 
@@ -14,7 +13,10 @@ class SiteSidebar extends React.Component {
         <div className="card-image">
           <Link to={`/`}>
             <figure className="image">
-              <img src="https://camo.githubusercontent.com/ac31ac54c2013850b0fb8a3a4926f4718a398fb3/68747470733a2f2f7777772e6761747362796a732e6f72672f6d6f6e6f6772616d2e737667" />
+              <img
+                src="https://camo.githubusercontent.com/ac31ac54c2013850b0fb8a3a4926f4718a398fb3/68747470733a2f2f7777772e6761747362796a732e6f72672f6d6f6e6f6772616d2e737667"
+                alt="Gatsby logo"
+              />
             </figure>
           </Link>
         </div>

diff --git a/examples/using-javascript-transforms/src/mainPages/contact.js b/examples/using-javascript-transforms/src/mainPages/contact.js
@@ -1,9 +1,7 @@
 import React from "react"
-import Helmet from "react-helmet"
-import SiteLinks from "../components/SiteLinks"
 import InsetPageLayout from "../components/Layouts/insetPage"
 
-exports.frontmatter = {
+export const frontmatter = {
   layoutType: `page`,
   path: `/contact/`,
 }

diff --git a/examples/using-javascript-transforms/src/mainPages/index.js b/examples/using-javascript-transforms/src/mainPages/index.js
@@ -1,11 +1,10 @@
 import React from "react"
 import { Link } from "gatsby"
-import Helmet from "react-helmet"
 import sortBy from "lodash/sortBy"
 import moment from "moment"
 import InsetPageLayout from "../components/Layouts/insetPage"
 
-exports.frontmatter = {
+export const frontmatter = {
   layoutType: `page`,
   path: `/`,
 }
@@ -116,7 +115,6 @@ export const pageQuery = graphql`
             title
             path
             layoutType
-            parent
             written
             updated
             category

diff --git a/examples/using-javascript-transforms/src/templates/mdBlogPost.js b/examples/using-javascript-transforms/src/templates/mdBlogPost.js
@@ -1,10 +1,9 @@
 import React from "react"
-import moment from "moment"
 import BlogPostChrome from "../components/BlogPostChrome"
 
 class mdBlogPost extends React.Component {
   render() {
-    const { html, frontmatter } = this.props.data.markdownRemark
+    const { html } = this.props.data.markdownRemark
 
     return (
       <BlogPostChrome