add gatsby-transformer-javascript-frontmatter, closes #3795

examples/using-javascript-transforms/README.md

@@ -12,7 +12,7 @@ There are two "root" data types that we use. There are routes that are based in
 markdown such as /a-first-post/ found at
 `src/articles/2017-01-22-a-first-post/index.md`. Of greater interest are routes
 based on JavaScript. This is not to be confused with the JavaScript react
-components in `src/layouts/*` or `src/templates/*` or even `src/components/*`.
+components in `src/templates/*` or even `src/components/*`.
 In this example, we use JavaScript for some articles. Check out
 `src/articles/2017-03-09-choropleth-on-d3v4/index.js`. Typically most examples
 will use a JavaScript root data type for the homepage.
@@ -22,8 +22,8 @@ template (`src/templates/*`). In the template, we can include dumb components to
 compose our structure in a DRY manner. The JavaScript routes are used directly
 which means you will need to include some of the route specific structure on
 every JavaScript page. This can be painful, but it can be managed with good use
-of higher order components (see `src/components/BlogPostChrome`) and graphql
-fragments. For further discussion and relevant prototypes see
+of higher order components (see `src/components/BlogPostChrome` and `src/components/Layouts`)
+and graphql fragments. For further discussion and relevant prototypes see
 [#1866](https://github.com/gatsbyjs/gatsby/issues/1866).
 
 The last thing of note is this example's `gatsby-node.js`. Gatsby by default

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

@@ -24,30 +24,13 @@ module.exports = {
         path: `${__dirname}/src/articles/`,
       },
     },
-    `gatsby-transformer-javascript-static-exports`,
-    `gatsby-transformer-yaml`,
+    `gatsby-transformer-javascript-frontmatter`,
     {
       resolve: `gatsby-transformer-remark`,
       options: {
-        plugins: [
-          {
-            resolve: `gatsby-remark-images`,
-            options: {
-              maxWidth: 690,
-            },
-          },
-          {
-            resolve: `gatsby-remark-responsive-iframe`,
-            options: {},
-          },
-          `gatsby-remark-prismjs`,
-          `gatsby-remark-copy-linked-files`,
-          `gatsby-remark-smartypants`,
-        ],
+        plugins: [`gatsby-remark-prismjs`],
       },
     },
-    `gatsby-plugin-sharp`,
-    `gatsby-plugin-postcss-sass`,
-    `gatsby-plugin-offline`,
+    `gatsby-plugin-sass`,
   ],
 }

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

@@ -5,7 +5,7 @@ exports.onCreateNode = ({ node, boundActionCreators, getNode }) => {
   let slug
   if (
     node.internal.type === `MarkdownRemark` ||
-    node.internal.type === `JSFrontmatter`
+    node.internal.type === `JavascriptFrontmatter`
   ) {
     const fileNode = getNode(node.parent)
     const parsedFilePath = path.parse(fileNode.relativePath)
@@ -48,11 +48,11 @@ exports.createPages = ({ graphql, boundActionCreators }) => {
                 }
               }
             }
-            allJsFrontmatter {
+            allJavascriptFrontmatter {
               edges {
                 node {
                   fileAbsolutePath
-                  data {
+                  frontmatter {
                     layoutType
                     path
                   }
@@ -73,11 +73,10 @@ exports.createPages = ({ graphql, boundActionCreators }) => {
 
         // Create from markdown
         result.data.allMarkdownRemark.edges.forEach(edge => {
-          let frontmatter = edge.node.frontmatter
+          let { frontmatter } = edge.node
           if (frontmatter.layoutType === `post`) {
             createPage({
               path: frontmatter.path, // required
-              layout: `blogPost`, // this matches the filename of src/layouts/blogPost.js, layout created automatically
               component: mdBlogPost,
               context: {
                 slug: edge.node.fields.slug,
@@ -86,7 +85,6 @@ exports.createPages = ({ graphql, boundActionCreators }) => {
           } else if (frontmatter.layoutType === `page`) {
             createPage({
               path: frontmatter.path, // required
-              layout: `insetPage`, // this matches the filename of src/layouts/blogPost.js, layout created automatically
               component: mdInsetPage,
               context: {
                 slug: edge.node.fields.slug,
@@ -99,13 +97,12 @@ exports.createPages = ({ graphql, boundActionCreators }) => {
         // Gatsby will, by default, createPages for javascript in the
         //  /pages directory. We purposely don't have a folder with this name
         //  so that we can go full manual mode.
-        result.data.allJsFrontmatter.edges.forEach(edge => {
-          let frontmatter = edge.node.data
+        result.data.allJavascriptFrontmatter.edges.forEach(edge => {
+          let { frontmatter } = edge.node
           // see above
           if (frontmatter.layoutType === `post`) {
             createPage({
               path: frontmatter.path, // required
-              layout: `blogPost`, // this matches the filename of src/layouts/blogPost.js, layout created automatically
               // Note, we can't have a template, but rather require the file directly.
               //  Templates are for converting non-react into react. jsFrontmatter
               //  picks up all of the javascript files. We have only written these in react.
@@ -117,7 +114,6 @@ exports.createPages = ({ graphql, boundActionCreators }) => {
           } else if (frontmatter.layoutType === `page`) {
             createPage({
               path: frontmatter.path, // required
-              layout: `insetPage`, // this matches the filename of src/layouts/insetPage.js, layout created automatically
               component: path.resolve(edge.node.fileAbsolutePath),
               context: {
                 slug: edge.node.fields.slug,
@@ -126,7 +122,6 @@ exports.createPages = ({ graphql, boundActionCreators }) => {
           } else if (edge.node.fields.slug === `/index/`) {
             createPage({
               path: `/`, // required, we don't have frontmatter for this page hence separate if()
-              layout: `insetPage`, // this matches the filename of src/layouts/insetPage.js, layout created automatically
               component: path.resolve(edge.node.fileAbsolutePath),
               context: {
                 slug: edge.node.fields.slug,

examples/using-javascript-transforms/package.json

@@ -10,11 +10,13 @@
     "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 .",
+    "lint": "./node_modules/.bin/eslint --ext .js,.jsx --ignore-pattern public .",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
-  "keywords": ["personal", "blog"],
+  "keywords": [
+    "personal",
+    "blog"
+  ],
   "author": "gatsbyjs",
   "license": "MIT",
   "bugs": {
@@ -26,20 +28,11 @@
     "d3": "4.9.1",
     "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-plugin-sass": "^1.0.16",
     "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-javascript-frontmatter": "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/index.js

@@ -4,7 +4,7 @@ import { findDOMNode } from "react-dom"
 var d3 = require(`d3`)
 
 // this is one method to export data and make it usable elsewhere
-exports.data = {
+exports.frontmatter = {
   title: `Choropleth on d3v4`,
   written: `2017-03-09`,
   updated: `2017-04-28`,
@@ -52,7 +52,12 @@ class choroplethBase extends React.Component {
     let html = data.html
 
     return (
-      <BlogPostChrome {...this.props.data.jsFrontmatter.data}>
+      <BlogPostChrome
+        {...{
+          frontmatter: this.props.data.javascriptFrontmatter.frontmatter,
+          site: this.props.data.site,
+        }}
+      >
         <div className="section">
           <div className="container">
             <div id="states" />
@@ -207,8 +212,11 @@ export const pageQuery = graphql`
     ) {
       html
     }
-    jsFrontmatter(fields: { slug: { eq: $slug } }) {
-      ...JSBlogPost_data
+    javascriptFrontmatter(fields: { slug: { eq: $slug } }) {
+      ...JSBlogPost_frontmatter
+    }
+    site {
+      ...site_sitemetadata
     }
   }
 `

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

@@ -4,7 +4,7 @@ import { findDOMNode } from "react-dom"
 var d3 = require(`d3`)
 
 // this is an additional method to export data and make it usable elsewhere
-export const data = {
+export const frontmatter = {
   title: `Alternate Choropleth on d3v4`,
   written: `2017-05-30`,
   layoutType: `post`,
@@ -51,7 +51,12 @@ class choroplethAltBase extends React.Component {
     let html = data.html
 
     return (
-      <BlogPostChrome {...this.props.data.jsFrontmatter.data}>
+      <BlogPostChrome
+        {...{
+          frontmatter: this.props.data.javascriptFrontmatter.frontmatter,
+          site: this.props.data.site,
+        }}
+      >
         <div className="section">
           <div className="container">
             <div id="states" />
@@ -200,16 +205,19 @@ let mergeData = (d1, d1key, d2, d2key) => {
 //  query for it here, and get the transformed html though because remark transforms
 //  any markdown based node.
 export const pageQuery = graphql`
-  query choroplethOnD3v4Alt($slug: String!) {
+  query choroplethOnD3v4Alt {
     markdownRemark(
       fields: {
         slug: { eq: "/2017-05-30-choropleth-on-d3v4-alternate/_choropleth/" }
       }
     ) {
       html
     }
-    jsFrontmatter(fields: { slug: { eq: $slug } }) {
-      ...JSBlogPost_data
+    javascriptFrontmatter {
+      ...JSBlogPost_frontmatter
+    }
+    site {
+      ...site_sitemetadata
     }
   }
 `

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

@@ -1,21 +1,22 @@
 import React from "react"
 import HelmetBlock from "../HelmetBlock"
 import PostPublished from "../PostPublished"
+import BlogPostLayout from "../Layouts/blogPost"
 
 class BlogPostChrome extends React.Component {
   render() {
-    const frontmatter = this.props
-
     return (
-      <div className="BlogPostChrome">
-        <HelmetBlock {...frontmatter} />
-        <div className="content">
-          <div className="section">
-            <div className="container content">{this.props.children}</div>
+      <BlogPostLayout {...this.props.site}>
+        <div className="BlogPostChrome">
+          <HelmetBlock {...this.props.frontmatter} />
+          <div className="content">
+            <div className="section">
+              <div className="container content">{this.props.children}</div>
+            </div>
           </div>
+          <PostPublished {...this.props.frontmatter} />
         </div>
-        <PostPublished {...frontmatter} />
-      </div>
+      </BlogPostLayout>
     )
   }
 }
@@ -35,8 +36,8 @@ export const blogPostFragment = graphql`
     }
   }
 
-  fragment JSBlogPost_data on JSFrontmatter {
-    data {
+  fragment JSBlogPost_frontmatter on JavascriptFrontmatter {
+    frontmatter {
       title
       path
       layoutType

examples/using-javascript-transforms/src/layouts/blogPost.js → examples/using-javascript-transforms/src/components/Layouts/blogPost.js

@@ -7,7 +7,7 @@ import MasterLayout from "./master"
 
 class BlogPostLayout extends React.Component {
   render() {
-    let siteMetadata = this.props.data.site.siteMetadata
+    let siteMetadata = this.props.siteMetadata
 
     const home = (
       <div className="nav">
@@ -23,9 +23,11 @@ class BlogPostLayout extends React.Component {
 
     return (
       <div>
-        <MasterLayout {...this.props}>
+        <MasterLayout
+          {...{ data: { site: { siteMetadata: this.props.siteMetadata } } }}
+        >
           {home}
-          <div className="container">{this.props.children()}</div>
+          <div className="container">{this.props.children}</div>
           <div className="footer container">
             <hr />
             <p>
@@ -44,17 +46,15 @@ class BlogPostLayout extends React.Component {
 export default BlogPostLayout
 
 export const pageQuery = graphql`
-  query BlogPostLayoutBySlug {
-    site {
-      siteMetadata {
-        title
-        siteDescr
-        siteAuthor
-        siteEmailUrl
-        siteEmailPretty
-        siteTwitterUrl
-        siteTwitterPretty
-      }
+  fragment sitemetadata on Site {
+    siteMetadata {
+      title
+      siteDescr
+      siteAuthor
+      siteEmailUrl
+      siteEmailPretty
+      siteTwitterUrl
+      siteTwitterPretty
     }
   }
 `

examples/using-javascript-transforms/src/layouts/insetPage.js → examples/using-javascript-transforms/src/components/Layouts/insetPage.js

@@ -1,5 +1,5 @@
 import React from "react"
-import SiteSidebar from "../components/SiteSidebar"
+import SiteSidebar from "../SiteSidebar"
 import MasterLayout from "./master"
 
 class InsetPageLayout extends React.Component {
@@ -14,7 +14,7 @@ class InsetPageLayout extends React.Component {
               <div className="column is-one-quarter">
                 <SiteSidebar {...this.props} />
               </div>
-              <div className="column">{this.props.children()}</div>
+              <div className="column">{this.props.children}</div>
             </div>
           </div>
         </MasterLayout>
@@ -26,17 +26,15 @@ class InsetPageLayout extends React.Component {
 export default InsetPageLayout
 
 export const pageQuery = graphql`
-  query InsetLayoutBySlug {
-    site {
-      siteMetadata {
-        title
-        siteDescr
-        siteAuthor
-        siteEmailUrl
-        siteEmailPretty
-        siteTwitterUrl
-        siteTwitterPretty
-      }
+  fragment site_sitemetadata on Site {
+    siteMetadata {
+      title
+      siteDescr
+      siteAuthor
+      siteEmailUrl
+      siteEmailPretty
+      siteTwitterUrl
+      siteTwitterPretty
     }
   }
 `