Fix plugins not running gatsby-browser.js (#4329)

* Fix DOM nesting error

validateDOMNesting(...): <div> cannot appear as a descendant of <p>

* Fix plugins that don't export any gatsby-browser.js APIs

* Remove unused imports

* Add missing links

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

@@ -2,7 +2,6 @@ import React from "react"
 import Link from "gatsby-link"
 import { rhythm, scale } from "../utils/typography"
 import styles from "../styles"
-import presets from "../utils/presets"
 
 import "typeface-space-mono"
 import "typeface-spectral"

examples/using-remark/src/pages/2017-11-14---excerpts/index.md

@@ -22,7 +22,7 @@ tags:
 }
 ```
 
-You can also manually mark in your markdown where to stop excerpting—similar to Jekyl. `gatsby-transformer-remark` uses [gray-matter]() to parse markdown frontmatter, so you can specify an excerpt_separator, as well as any of the other options mentioned [here](), in the `gatsby-config.js` file.
+You can also manually mark in your markdown where to stop excerpting—similar to Jekyl. `gatsby-transformer-remark` uses [gray-matter](https://github.com/jonschlinkert/gray-matter) to parse markdown frontmatter, so you can specify an `excerpt_separator`, as well as any of the other options mentioned [here](https://github.com/jonschlinkert/gray-matter#options), in the `gatsby-config.js` file.
 
 ```json
 {
@@ -33,6 +33,6 @@ You can also manually mark in your markdown where to stop excerpting—similar t
 }
 ```
 
-Any file that does not have the given excerpt_separator will fall back to the default pruning method.
+Any file that does not have the given `excerpt_separator` will fall back to the default pruning method.
 
 You can see the results [here](/excerpt-example)

examples/using-remark/src/pages/examples/example---custom-separator/index.md

@@ -7,9 +7,8 @@ author: Daisy Buchanan
 
 This example uses a custom excerpt_separator.
 
-You can manually mark in your markdown where to stop excerpting—similar to Jekyl. `gatsby-transformer-remark` uses [gray-matter]() to parse markdown frontmatter, so you can specify an excerpt_separator, as well as any of the other options mentioned [here](), in the `gatsby-config.js` file.
+You can manually mark in your markdown where to stop excerpting—similar to Jekyll. <!-- end -->`gatsby-transformer-remark` uses [gray-matter](https://github.com/jonschlinkert/gray-matter) to parse markdown frontmatter, so you can specify an `excerpt_separator`, as well as any of the other options mentioned [here](https://github.com/jonschlinkert/gray-matter#options), in the `gatsby-config.js` file.
 
-<!-- end -->
 
 ```json
 {
@@ -20,4 +19,4 @@ You can manually mark in your markdown where to stop excerpting—similar to Jek
 }
 ```
 
-Any file that does not have the given excerpt_separator will fall back to the default pruning method.
+Any file that does not have the given `excerpt_separator` will fall back to the default pruning method.

examples/using-remark/src/templates/template-blog-post.js

@@ -5,7 +5,6 @@ import rehypeReact from "rehype-react"
 
 import styles from "../styles"
 import { rhythm, scale } from "../utils/typography"
-import presets from "../utils/presets"
 import Counter from "../components/Counter"
 
 import "katex/dist/katex.min.css"
@@ -99,6 +98,7 @@ class BlogPostRoute extends React.Component {
               marginRight: rhythm(3 / 4),
               marginBottom: 0,
             }}
+            Tag="span"
           />
           <span
             css={{

packages/gatsby-plugin-catch-links/src/gatsby-browser.js

@@ -2,6 +2,8 @@ import { navigateTo } from "gatsby-link"
 
 import catchLinks from "./catch-links"
 
-catchLinks(window, href => {
-  navigateTo(href)
-})
+exports.onClientEntry = () => {
+  catchLinks(window, href => {
+    navigateTo(href)
+  })
+}

packages/gatsby-plugin-typography/src/gatsby-browser.js

@@ -1,6 +1,8 @@
 import typography from "gatsby-plugin-typography/.cache/typography.js"
 
-// Hot reload typography in development.
-if (process.env.NODE_ENV !== `production`) {
-  typography.injectStyles()
+exports.onClientEntry = () => {
+  // Hot reload typography in development.
+  if (process.env.NODE_ENV !== `production`) {
+    typography.injectStyles()
+  }
 }