update using-javascript-transforms with new layout graphql (gatsbyjs#…

…1763)

* update using-javascript-transforms with new layout graphql

* remove createLayout until nested layouts are added

* remove unused createLayout const

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

@@ -26,6 +26,7 @@ exports.createPages = ({ graphql, boundActionCreators }) => {
   const { createPage } = boundActionCreators
 
   return new Promise((resolve, reject) => {
+
     const pages = []
     const markdownTemplate = path.resolve(`src/templates/markdown.js`)
 

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

@@ -1,12 +1,6 @@
 import React from "react"
 import { findDOMNode } from "react-dom"
 var d3 = require(`d3`)
-import PostPublished from "../../components/PostPublished"
-import HelmetBlock from "../../components/HelmetBlock"
-// We have to include these components on every javascript page
-//  as we cannot use templates and layouts cannot query for data.
-//  Logically it would make sense to put these on the parents, but
-//  for now they have to be children of EVERY post.
 
 // this is one method to export data and make it usable elsewhere
 exports.data = {
@@ -59,7 +53,6 @@ class choroplethBase extends React.Component {
 
     return (
       <div className="">
-        <HelmetBlock {...frontmatter} />
         <div className="section">
           <div className="container">
             <div id="states" />
@@ -71,7 +64,6 @@ class choroplethBase extends React.Component {
             <div dangerouslySetInnerHTML={{ __html: html }} />
           </div>
         </div>
-        <PostPublished {...frontmatter} />
       </div>
     )
   }

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

@@ -1,12 +1,6 @@
 import React from "react"
 import { findDOMNode } from "react-dom"
 var d3 = require(`d3`)
-import PostPublished from "../../components/PostPublished"
-import HelmetBlock from "../../components/HelmetBlock"
-// We have to include these components on every javascript page
-//  as we cannot use templates and layouts cannot query for data.
-//  Logically it would make sense to put these on the parents, but
-//  for now they have to be children of EVERY post.
 
 // this is an additional method to export data and make it usable elsewhere
 export const data = {
@@ -58,7 +52,6 @@ class choroplethAltBase extends React.Component {
 
     return (
       <div className="">
-        <HelmetBlock {...frontmatter} />
         <div className="section">
           <div className="container">
             <div id="states" />
@@ -70,7 +63,6 @@ class choroplethAltBase extends React.Component {
             <div dangerouslySetInnerHTML={{ __html: html }} />
           </div>
         </div>
-        <PostPublished {...frontmatter} />
       </div>
     )
   }

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

@@ -1,7 +1,6 @@
 import React from "react"
 import PropTypes from "prop-types"
 import "./style.css"
-import siteMetadata from "../metadata.yaml"
 import "../../static/fonts/fontawesome/style.css"
 
 class SiteLinks extends React.Component {
@@ -14,11 +13,13 @@ class SiteLinks extends React.Component {
   }
 
   render() {
+    const siteMetadata = this.props.siteMetadata
+
     return (
       <div className="blog-social">
         <ul>
           <li>
-            <a href={siteMetadata.siteEmailUrl}>
+            <a href={'mailto:' + siteMetadata.siteEmailUrl}>
               <i className="fa fa-envelope-o" /> {siteMetadata.siteEmailPretty}
             </a>
           </li>

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

@@ -2,15 +2,12 @@ import React from "react"
 import Link from "gatsby-link"
 import SiteNav from "../SiteNav"
 import SiteLinks from "../SiteLinks"
-import siteMetadata from "../metadata.yaml"
-// cheating with ^ because no graphql
 
 class SiteSidebar extends React.Component {
-  render() {
-    const isHome = this.props.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.siteMetadata;
+        // TODO, deal with image more nice like
 
     let header = (
       <div className="">
@@ -65,24 +62,3 @@ class SiteSidebar extends React.Component {
 }
 
 export default SiteSidebar
-
-// this doesn't work currently so we cheat above (see imports)
-const pageQuery = graphql`
-  fragment siteMetadata on siteMetadata {
-    siteTitle
-    siteDescr
-    siteAuthor
-    siteEmailUrl
-    siteEmailPretty
-    siteLinkedInUrl
-    siteLinkedInPretty
-    siteTwitterUrl
-    siteTwitterPretty
-    siteGithubUrl
-    siteGithubPretty
-    siteKeybaseUrl
-    siteKeybasePretty
-    sitePhotoUrl
-    sitePhotoPretty
-  }
-`

examples/using-javascript-transforms/src/layouts/blog-post.js

@@ -1,17 +1,12 @@
-/*
-See the notes in future-blog-post.js as well. This is slimmed down as this component
- does not have necessary data (no queries on layouts). We moved the blog post type components
- into templates/markdown.js and into EACH javascript file itself.
-*/
-
 import React from "react"
 import Link from "gatsby-link"
-import siteMetadata from "../components/metadata.yaml"
+import Helmet from "react-helmet"
+import moment from "moment"
 
 class BlogPostTemplate extends React.Component {
   render() {
-    let frontmatter = this.props.data
-    // let siteMetadata = this.props.siteMetadata;
+    let frontmatter = this.props.frontmatter
+    let siteMetadata = this.props.siteMetadata
 
     const home = (
       <div className="nav">
@@ -24,14 +19,70 @@ class BlogPostTemplate extends React.Component {
         </div>
       </div>
     )
+/*
+    if (frontmatter.updated === null) {
+      var published = (
+        <div className="date-published">
+          <p>
+            <em>
+              published {moment(frontmatter.written).format(`D MMM YYYY`)}
+            </em>
+          </p>
+        </div>
+      )
+    } 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>
+      )
+    }
 
     return (
       <div className="ArticleTemplate">
+        <Helmet
+          title={frontmatter.title}
+          meta={[
+            { name: `description`, content: frontmatter.description },
+            {
+              property: `og:url`,
+              content: `https://www.jacobbolda.com/` + frontmatter.path,
+            },
+            { property: `og:description`, content: frontmatter.description },
+            { property: `og:type`, content: `article` },
+            { property: `og:article:author`, content: `Jacob Bolda` },
+            {
+              property: `og:article:published_time`,
+              content: moment(frontmatter.written, `YYYY-MM-DD`),
+            },
+            {
+              property: `og:article:modified_time`,
+              content: moment(frontmatter.updated, `YYYY-MM-DD`),
+            },
+            { property: `og:article:tag`, content: frontmatter.category },
+            { name: `twitter:label1`, content: `Category` },
+            { name: `twitter:data1`, content: frontmatter.category },
+            { name: `twitter:label2`, content: `Written` },
+            { name: `twitter:data2`, content: frontmatter.written },
+          ]}
+        />
+
+        */
+    let published = <div className="date-published" />
+
+    return (<div>
         {home}
         <div className="container">
           {this.props.children()}
         </div>
         <div className="footer container">
+          {published}
           <hr />
           <p>
             {siteMetadata.siteDescr}