Fancy Javascript Example

examples/using-javascript-transforms/.gitignore

@@ -0,0 +1,3 @@
+public
+.cache
+node_modules

examples/using-javascript-transforms/README.md

@@ -0,0 +1,8 @@
+# Using Javascript Transforms
+## Where we get fancy what we can do with gatsby
+### An exploration of the javascript ecosystem in Gatsby
+TODO, ALL OF THIS.
+
+It mixes javascript and remark, uses scss and bulma.io, has use case examples for graphql in layouts, and some "manual" page creation with the help of the jsFrontmatter transformer.
+
+For the time being, read the comments within the files themselves.

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

@@ -0,0 +1,53 @@
+module.exports = {
+  siteMetadata: {
+    title: "Fancy Javascript Example",
+    siteDescr: "We get fancy with some javascript here.",
+    siteAuthor: "Jacob Bolda",
+
+    siteEmailUrl: "me@x.com",
+    siteEmailPretty: "me@x.com",
+    siteTwitterUrl: "https://twitter.com/jacob_bolda",
+    siteTwitterPretty: "@jacob_bolda",
+  },
+  plugins: [
+   {
+      resolve: `gatsby-source-filesystem`,
+      options: {
+        name: `pages`,
+        path: `${__dirname}/src/mainPages/`,
+      },
+    },
+   {
+      resolve: `gatsby-source-filesystem`,
+      options: {
+        name: `articles`,
+        path: `${__dirname}/src/articles/`,
+      },
+    },
+    `gatsby-transformer-javascript-static-exports`,
+    `gatsby-transformer-yaml`,
+    {
+      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`,
+        ],
+      },
+    },
+    `gatsby-plugin-sharp`,
+    `gatsby-plugin-postcss-sass`,
+    `gatsby-plugin-offline`,
+  ],
+}

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

@@ -0,0 +1,125 @@
+const path = require('path')
+
+exports.onCreateNode = ({ node, boundActionCreators, getNode }) => {
+  const { createNodeField } = boundActionCreators
+  let slug
+  if (node.internal.type === `MarkdownRemark` || node.internal.type === `JSFrontmatter`) {
+    const fileNode = getNode(node.parent)
+    const parsedFilePath = path.parse(fileNode.relativePath)
+    if (parsedFilePath.name !== `index` && parsedFilePath.dir !== ``) {
+      slug = `/${parsedFilePath.dir}/${parsedFilePath.name}/`
+    } else if (parsedFilePath.dir === ``) {
+      slug = `/${parsedFilePath.name}/`
+    } else {
+      slug = `/${parsedFilePath.dir}/`
+    }
+
+    // Add slug as a field on the node.
+    createNodeField({ node, name: `slug`, value: slug })
+  }
+}
+
+exports.createPages = ({ graphql, boundActionCreators }) => {
+  const { createPage } = 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(
+      graphql(
+      `
+        {
+          allMarkdownRemark {
+            edges {
+              node {
+                frontmatter {
+                  layoutType
+                  path
+                }
+                fields {
+                  slug
+                }
+              }
+            }
+          }
+          allJsFrontmatter {
+            edges {
+              node {
+                fileAbsolutePath
+                data {
+                  layoutType
+                  path
+                }
+                fields {
+                  slug
+                }
+              }
+            }
+          }
+        }
+      `
+      ).then(result => {
+        if (result.errors) {
+          console.log(result.errors)
+          console.log(result)
+          reject(result.errors)
+        }
+
+        // Create from markdown
+        result.data.allMarkdownRemark.edges.forEach(edge => {
+            let frontmatter = edge.node.frontmatter;
+            // ideally we would want to use layoutType to
+            //  decide which (nested) layout to use, but
+            //  gatsby currently doesnt support this.
+            if (frontmatter.layoutType === 'post' ||
+                frontmatter.layoutType === 'page') {
+                createPage({
+                  path: frontmatter.path, // required
+                  component: markdownTemplate,
+                  context: {
+                    layoutType: frontmatter.layoutType,
+                    slug: edge.node.fields.slug,
+                  },
+                })
+            }
+        })
+
+        // Create pages from javascript
+        // 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;
+            // see above
+            if (frontmatter.layoutType === 'post' ||
+                frontmatter.layoutType === 'page') {
+                createPage({
+                  path: frontmatter.path, // required
+                  // 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.
+                  component: path.resolve(edge.node.fileAbsolutePath),
+                  context: {
+                    layoutType: frontmatter.layoutType,
+                    slug: edge.node.fields.slug,
+                  },
+                })
+              } else if (edge.node.fields.slug === '/index/') {
+                createPage({
+                  path: '/', // required, we don't have frontmatter for this page hence separate if()
+                  component: path.resolve(edge.node.fileAbsolutePath),
+                  context: {
+                    slug: edge.node.fields.slug,
+                  },
+                })
+              }
+        })
+
+        return
+      })
+    )
+  })
+}

examples/using-javascript-transforms/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "gatsby-example-using-javascript-transforms",
+  "version": "1.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-build": "node_modules/.bin/gatsby serve-build",
+    "clean:public": "rm -rf public & mkdir public",
+    "clean": "npm run clean:public",
+    "lint": "./node_modules/.bin/eslint --ext .js,.jsx --ignore-pattern public .",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [
+    "personal",
+    "blog"
+  ],
+  "author": "jbolda",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/gatsbyjs/gatsby/issues"
+  },
+  "homepage": "https://www.gatsbyjs.org",
+  "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",
+    "moment": "^2.14.1",
+    "normalize.css": "^7.0.0",
+    "prop-types": "^15.5.8",
+    "react-helmet": "^3.1.0"
+  }
+}

examples/using-javascript-transforms/src/articles/2017-01-22-a-first-post/index.md

@@ -0,0 +1,19 @@
+---
+title: First Post About First Post
+written: "2017-01-22"
+updated: "2017-03-04"
+layoutType: post
+path: "a-first-post"
+category: "Beginnings"
+description: "From humble beginnings to... space?"
+---
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sed nisi eu quam ultrices malesuada. Vestibulum dictum aliquet turpis et lobortis. In a massa nec risus convallis accumsan sed a arcu. Sed lacus sapien, elementum et condimentum et, dictum eget sem. Suspendisse tellus mauris, elementum placerat commodo sit amet, iaculis vitae justo. Fusce sed orci feugiat, cursus ante consectetur, vulputate urna. Duis pharetra magna sed semper auctor. Nullam et nunc nulla. Donec nibh nibh, ornare a ipsum quis, condimentum faucibus nibh. Etiam venenatis nec nibh vitae porta. Aliquam erat volutpat. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed auctor semper dolor eu rhoncus. Mauris sit amet lacus pulvinar nunc vehicula vulputate. Ut quis nisl hendrerit, elementum ante quis, maximus mi.
+
+Sed fermentum finibus mauris. Nullam posuere ornare purus eu viverra. Fusce placerat erat ac dolor tincidunt, vitae elementum lorem luctus. Donec molestie et urna eu aliquam. In aliquam mauris in justo ullamcorper commodo. Donec sodales viverra quam vitae interdum. Maecenas volutpat congue massa. Suspendisse congue massa lorem, vitae luctus mi semper quis.
+
+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.
+
+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/articles/2017-03-09-choropleth-on-d3v4/_choropleth.md

@@ -0,0 +1,13 @@
+---
+what: text for Choropleth on d3v4
+---
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sed nisi eu quam ultrices malesuada. Vestibulum dictum aliquet turpis et lobortis. In a massa nec risus convallis accumsan sed a arcu. Sed lacus sapien, elementum et condimentum et, dictum eget sem. Suspendisse tellus mauris, elementum placerat commodo sit amet, iaculis vitae justo. Fusce sed orci feugiat, cursus ante consectetur, vulputate urna. Duis pharetra magna sed semper auctor. Nullam et nunc nulla. Donec nibh nibh, ornare a ipsum quis, condimentum faucibus nibh. Etiam venenatis nec nibh vitae porta. Aliquam erat volutpat. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed auctor semper dolor eu rhoncus. Mauris sit amet lacus pulvinar nunc vehicula vulputate. Ut quis nisl hendrerit, elementum ante quis, maximus mi.
+
+Sed fermentum finibus mauris. Nullam posuere ornare purus eu viverra. Fusce placerat erat ac dolor tincidunt, vitae elementum lorem luctus. Donec molestie et urna eu aliquam. In aliquam mauris in justo ullamcorper commodo. Donec sodales viverra quam vitae interdum. Maecenas volutpat congue massa. Suspendisse congue massa lorem, vitae luctus mi semper quis.
+
+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.
+
+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.