Add part two of the tutorial (gatsbyjs#1667)

* WIP

* WIP

* Add gatsby-plugin-typography

* Fix bug in babel-config.js that didn't pass normalizedConfig to plugins

* Add blockquote styling

* Add remainder of typography + component styling parts of tutorial

* Add part two to sidebar

* Remove the WIP writing for the layout section

Author: KyleAMathews

docs/tutorial/part-two/basic-typography-centered.png

@@ -9,7 +9,6 @@ exports.modifyWebpackConfig = ({ config }) =>
   ])
 
 // Add Glamor support
-// // Add Glamor support
 exports.modifyBabelrc = ({ babelrc }) => {
   return {
     ...babelrc,

docs/tutorial/part-two/basic-typograpy.png

@@ -0,0 +1,3 @@
+/*.js
+!index.js
+yarn.lock

docs/tutorial/part-two/css-modules-1.png

@@ -0,0 +1,34 @@
+# Logs
+logs
+*.log
+
+# Runtime data
+pids
+*.pid
+*.seed
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (http://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directory
+# https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git
+node_modules
+*.un~
+yarn.lock
+src
+flow-typed
+coverage
+decls
+examples

docs/tutorial/part-two/css-modules-console.png

@@ -0,0 +1 @@
+// noop

docs/tutorial/part-two/css-modules-final.png

@@ -0,0 +1,23 @@
+{
+  "name": "gatsby-plugin-typography",
+  "version": "1.0.0",
+  "description": "Gatsby plugin to setup server rendering of Typography.js' CSS",
+  "main": "index.js",
+  "dependencies": {
+    "react-typography": "^0.15.10",
+    "typography": "^0.15.10"
+  },
+  "devDependencies": {},
+  "scripts": {
+    "build": "babel src --out-dir . --ignore __tests__",
+    "watch": "babel -w src --out-dir . --ignore __tests__"
+  },
+  "keywords": [
+    "gatsby",
+    "gatsby-plugin",
+    "typography",
+    "typography.js"
+  ],
+  "author": "Kyle Mathews <[email protected]>",
+  "license": "MIT"
+}

docs/tutorial/part-two/glamor-example.png

@@ -0,0 +1,7 @@
+import typography from "gatsby-plugin-typography/.cache/typography.js"
+
+// Hot reload typography in development.
+if (process.env.NODE_ENV !== `production`) {
+  console.log("injecting styles", typography)
+  typography.injectStyles()
+}

docs/tutorial/part-two/index.md

@@ -0,0 +1,23 @@
+const fs = require(`fs`)
+const path = require(`path`)
+
+// Write out a typography module to .cache.
+
+// TODO add a new API hook e.g onPreBootstrap
+exports.sourceNodes = ({ store }, pluginOptions) => {
+  const program = store.getState().program
+
+  let module
+  if (pluginOptions.pathToConfigModule) {
+    module = `module.exports = require("${path.join(
+      program.directory,
+      pluginOptions.pathToConfigModule
+    )}")`
+  } else {
+    module = `const Typography = require("typography")
+const typography = new Typography()
+module.exports typography`
+  }
+
+  fs.writeFileSync(`${__dirname}/.cache/typography.js`, module)
+}

docs/tutorial/part-two/typography-bootstrap.png

@@ -0,0 +1,10 @@
+import React from "react"
+import { TypographyStyle, GoogleFont } from "react-typography"
+import typography from "./.cache/typography"
+
+exports.onRenderBody = ({ setHeadComponents }, pluginOptions) => {
+  setHeadComponents([
+    <TypographyStyle key={`TypographyStyle`} typography={typography} />,
+    <GoogleFont key={`GoogleFont`} typography={typography} />,
+  ])
+}

docs/tutorial/part-two/typography-lawton.png

@@ -171,19 +171,16 @@ module.exports = async function babelConfig(program, stage) {
     babelrc.plugins.unshift(`react-hot-loader/babel`)
   }
 
-  // Always add this plugin so our generated routes
-  // will work regardless of how users export
-  // their components. Yeah for multiple module standards!
-  babelrc.plugins.unshift(`add-module-exports`)
-
   babelrc.plugins.unshift(require.resolve(`./babel-plugin-extract-graphql`))
 
   if (!babelrc.hasOwnProperty(`cacheDirectory`)) {
     babelrc.cacheDirectory = true
   }
 
   const normalizedConfig = normalizeConfig(babelrc, directory)
-  let modifiedConfig = await apiRunnerNode(`modifyBabelrc`, { babelrc })
+  let modifiedConfig = await apiRunnerNode(`modifyBabelrc`, {
+    babelrc: normalizedConfig,
+  })
   if (modifiedConfig.length > 0) {
     modifiedConfig = _.merge({}, ...modifiedConfig)
     // Otherwise this means no plugin changed the babel config.

docs/tutorial/part-two/typography-styles.png

@@ -9,4 +9,15 @@
     ">> Linking between pages": /tutorial/part-one/#linking-between-pages
     ">> Interactive page": /tutorial/part-one/#interactive-page
     ">> Deploying Gatsby.js websites on the web": /tutorial/part-one/#deploying-gatsbyjs-websites-on-the-web
+- title: Part Two
+  links:
+    Part two: /tutorial/part-two/
+    ">> Building with components": /tutorial/part-two/#building-with-components
+    ">> Creating Global Styles": /tutorial/part-two/#creating-global-styles
+    ">> Typography.js": /tutorial/part-two/#typographyjs
+    ">> Gatsby Plugins": /tutorial/part-two/#gatsby-plugins
+    ">> Component CSS": /tutorial/part-two/#component-css
+    ">> CSS Modules": /tutorial/part-two/#css-modules
+    ">> Glamor": /tutorial/part-two/#glamor
+    ">> Styled Components": /tutorial/part-two/#styled-components
 

packages/gatsby-plugin-glamor/src/gatsby-node.js

@@ -42,6 +42,11 @@ const options = {
       h5: {
         ...scale(0),
       },
+      blockquote: {
+        paddingLeft: rhythm(3 / 8),
+        marginLeft: rhythm(3 / 8),
+        borderLeft: `${rhythm(2 / 8)} solid ${presets.brandDark}`,
+      },
       "tt,code": {
         // background: `hsla(23, 60%, 97%, 1)`,
         background: colors.a[0],