[1.0] Add using-remark example site (#1230)

* First shot at the using-remark example, WIP

* Fix a.anchor link styles

* Fix homepage intro copy links

* Fix README

* Use a Gatsby related video

* Move code highlighting stuff, include "PrismJS" in article name

* Fix responsive-image width

* Remove unused field

* Fix only one backtick showing up, linebreaks

* Various copy improvements

* improve code highlighting article, add source code for the line highlight example
* add a paragraph on gatsby-remark-autolink-headers
* expand on gatsby-remark-responsive-image a bit
* add example options for gatsby-remark-smartypants
* mention gatsby-remark-smartypants

* Add gatsby-remark-copy-linked-files example

* Move gatsby-plugin-catch-links example

* Fix the inline SVG example (kinda…)

* Remove todo

* Replace "Markdown Here" logo with Gatsby's

* Remove another "Markdown Here" reference

* Fix article URL, add tag "local links"

* Fix tag page

examples/using-remark/.eslintrc

@@ -0,0 +1,8 @@
+{
+  "env": {
+    "browser": true
+  },
+  "globals": {
+    "graphql": false
+  }
+}

examples/using-remark/README.md

@@ -0,0 +1,11 @@
+# Using remark
+
+https://using-remark.gatsbyjs.org
+
+Example site that demonstrates how to use [gatsby-transformer-remark][1]
+and its various plugins. It uses [Typography.js][2] and self-hosted fonts
+via the [Typefaces][3] project.
+
+[1]: https://www.gatsbyjs.org/docs/packages/gatsby-transformer-remark/
+[2]: https://github.com/KyleAMathews/typography.js
+[3]: https://github.com/KyleAMathews/typefaces

examples/using-remark/gatsby-browser.js

@@ -0,0 +1,3 @@
+exports.onClientEntry = function() {
+  require(`es6-object-assign`).polyfill()
+}

examples/using-remark/gatsby-config.js

@@ -0,0 +1,52 @@
+module.exports = {
+  siteMetadata: {
+    title: `gatsby-example-markdown`,
+    author: `@gatsbyjs`,
+    description: `Blazing-fast React.js static site generator`,
+  },
+  mapping: {
+    "MarkdownRemark.frontmatter.author": `AuthorYaml`,
+  },
+  plugins: [
+    {
+      resolve: `gatsby-source-filesystem`,
+      options: {
+        path: `${__dirname}/src/pages`,
+        name: `pages`,
+      },
+    },
+    `gatsby-transformer-sharp`,
+    {
+      resolve: `gatsby-transformer-remark`,
+      options: {
+        plugins: [
+          {
+            resolve: `gatsby-remark-responsive-image`,
+            options: {
+              maxWidth: 740,
+            },
+          },
+          {
+            resolve: `gatsby-remark-responsive-iframe`,
+            options: {
+              wrapperStyle: `margin-bottom: 1.0725rem`,
+            },
+          },
+          `gatsby-remark-copy-linked-files`,
+          {
+            resolve: `gatsby-remark-smartypants`,
+            options: {
+              dashes: `oldschool`,
+            },
+          },
+          `gatsby-remark-prismjs`,
+          `gatsby-remark-autolink-headers`,
+        ],
+      },
+    },
+    `gatsby-transformer-yaml`,
+    `gatsby-plugin-sharp`,
+    `gatsby-plugin-catch-links`,
+    `gatsby-plugin-glamor`,
+  ],
+}

examples/using-remark/gatsby-node.js

@@ -0,0 +1,111 @@
+const _ = require(`lodash`)
+const Promise = require(`bluebird`)
+const path = require(`path`)
+const slash = require(`slash`)
+
+const webpackLodashPlugin = require(`lodash-webpack-plugin`)
+
+exports.createPages = ({ graphql, boundActionCreators }) => {
+  const { createPage } = boundActionCreators
+
+  return new Promise((resolve, reject) => {
+    const blogPostTemplate = path.resolve(`src/templates/template-blog-post.js`)
+    const tagPagesTemplate = path.resolve(`src/templates/template-tag-page.js`)
+    graphql(
+      `
+      {
+        allMarkdownRemark(limit: 1000, filter: { frontmatter: { draft: { ne: true }}}) {
+          edges {
+            node {
+              fields {
+                slug
+              }
+              frontmatter {
+                tags
+              }
+            }
+          }
+        }
+      }
+    `
+    ).then(result => {
+      if (result.errors) {
+        console.log(result.errors)
+      }
+
+      // Create blog posts pages.
+      result.data.allMarkdownRemark.edges.forEach(edge => {
+        createPage({
+          path: edge.node.fields.slug, // required
+          component: slash(blogPostTemplate),
+          context: {
+            slug: edge.node.fields.slug,
+            highlight: edge.node.frontmatter.highlight,
+            shadow: edge.node.frontmatter.shadow,
+          },
+        })
+      })
+
+      // Create tag pages.
+      let tags = []
+      result.data.allMarkdownRemark.edges.forEach(edge => {
+        if (_.get(edge, `node.frontmatter.tags`)) {
+          tags = tags.concat(edge.node.frontmatter.tags)
+        }
+      })
+      tags = _.uniq(tags)
+      tags.forEach(tag => {
+        const tagPath = `/tags/${_.kebabCase(tag)}/`
+        createPage({
+          path: tagPath,
+          component: tagPagesTemplate,
+          context: {
+            tag,
+          },
+        })
+      })
+
+      resolve()
+    })
+  })
+}
+
+// Add custom url pathname for blog posts.
+exports.onCreateNode = ({ node, boundActionCreators, getNode }) => {
+  const { createNodeField } = boundActionCreators
+
+  if (node.internal.type === `File`) {
+    const parsedFilePath = path.parse(node.absolutePath)
+    const slug = `/${parsedFilePath.dir.split(`---`)[1]}/`
+    createNodeField({ node, fieldName: `slug`, fieldValue: slug })
+  } else if (
+    node.internal.type === `MarkdownRemark` &&
+    typeof node.slug === `undefined`
+  ) {
+    const fileNode = getNode(node.parent)
+    createNodeField({
+      node,
+      fieldName: `slug`,
+      fieldValue: fileNode.fields.slug,
+    })
+
+    if (node.frontmatter.tags) {
+      const tagSlugs = node.frontmatter.tags.map(
+        tag => `/tags/${_.kebabCase(tag)}/`
+      )
+      createNodeField({ node, fieldName: `tagSlugs`, fieldValue: tagSlugs })
+    }
+  }
+}
+
+// Sass and Lodash.
+exports.modifyWebpackConfig = ({ config, stage }) => {
+  switch (stage) {
+    case `build-javascript`:
+      config.plugin(`Lodash`, webpackLodashPlugin, null)
+
+      break
+  }
+
+  return config
+}

examples/using-remark/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "gatsby-example-using-remark",
+  "private": true,
+  "description": "Gatsby example site that demonstrates gatsby-transformer-remark and its plugins.",
+  "version": "1.0.0",
+  "author": "Florian Kissling <sechskilo@gmail.com>",
+  "dependencies": {
+    "babel-plugin-lodash": "^3.2.11",
+    "bluebird": "^3.4.7",
+    "es6-object-assign": "^1.1.0",
+    "gatsby": "next",
+    "gatsby-link": "next",
+    "gatsby-plugin-catch-links": "next",
+    "gatsby-plugin-glamor": "next",
+    "gatsby-plugin-sharp": "next",
+    "gatsby-remark-autolink-headers": "next",
+    "gatsby-remark-copy-linked-files": "next",
+    "gatsby-remark-prismjs": "next",
+    "gatsby-remark-responsive-iframe": "next",
+    "gatsby-remark-responsive-image": "next",
+    "gatsby-remark-smartypants": "next",
+    "gatsby-source-filesystem": "next",
+    "gatsby-transformer-remark": "next",
+    "gatsby-transformer-sharp": "next",
+    "gatsby-transformer-yaml": "next",
+    "lodash": "^4.17.4",
+    "lodash-id": "^0.14.0",
+    "lodash-webpack-plugin": "^0.11.2",
+    "react-typography": "^0.15.10",
+    "slash": "^1.0.0",
+    "typeface-space-mono": "^0.0.22",
+    "typeface-spectral": "^0.0.29",
+    "typography": "^0.15.10"
+  },
+  "license": "MIT",
+  "main": "index.js",
+  "scripts": {
+    "develop": "gatsby develop",
+    "build": "gatsby build"
+  }
+}

examples/using-remark/src/html.js

@@ -0,0 +1,52 @@
+import React from "react"
+import { TypographyStyle } from "react-typography"
+
+import typography from "./utils/typography"
+
+let stylesStr
+if (process.env.NODE_ENV === `production`) {
+  try {
+    stylesStr = require(`!raw-loader!../public/styles.css`)
+  } catch (e) {
+    console.log(e)
+  }
+}
+
+class HTML extends React.Component {
+  render() {
+    let css
+    if (process.env.NODE_ENV === `production`) {
+      css = (
+        <style
+          id="gatsby-inlined-css"
+          dangerouslySetInnerHTML={{ __html: stylesStr }}
+        />
+      )
+    }
+
+    return (
+      <html lang="en">
+        <head>
+          {this.props.headComponents}
+          <meta charSet="utf-8" />
+          <meta httpEquiv="X-UA-Compatible" content="IE=edge" />
+          <meta
+            name="viewport"
+            content="width=device-width, initial-scale=1.0"
+          />
+          <TypographyStyle typography={typography} />
+          {css}
+        </head>
+        <body>
+          <div
+            id="___gatsby"
+            dangerouslySetInnerHTML={{ __html: this.props.body }}
+          />
+          {this.props.postBodyComponents}
+        </body>
+      </html>
+    )
+  }
+}
+
+export default HTML

examples/using-remark/src/layouts/index.js

@@ -0,0 +1,46 @@
+import React from "react"
+import Link from "gatsby-link"
+import { rhythm, scale } from "../utils/typography"
+import { siteMetadata } from "../../gatsby-config"
+import styles from "../styles"
+import presets from "../utils/presets"
+
+import "typeface-space-mono"
+import "typeface-spectral"
+
+require(`prismjs/themes/prism-solarizedlight.css`)
+
+class DefaultLayout extends React.Component {
+  render() {
+    return (
+      <div>
+        <div {...styles.container} {...styles.verticalPadding}>
+          <Link
+            to="/"
+            css={{
+              display: `inline-block`,
+              textDecoration: `none`,
+            }}
+          >
+            <h1
+              css={{
+                ...scale(0),
+                color: styles.colors.light,
+                fontWeight: `normal`,
+                lineHeight: 1,
+                margin: 0,
+              }}
+            >
+              {siteMetadata.title}
+            </h1>
+          </Link>
+        </div>
+        <div {...styles.container} {...styles.verticalPadding}>
+          {this.props.children()}
+        </div>
+      </div>
+    )
+  }
+}
+
+export default DefaultLayout