[v2] upgrade using-remark example site (#5220)

* Upgrade using remark example site to v2 * Update remark dependencies
gatsbyjs · May 2, 2018 · 765b679 · 765b679
1 parent 72f28a1
commit 765b679
Show file tree

Hide file tree

Showing 15 changed files with 315 additions and 253 deletions.
diff --git a/examples/using-remark/package.json b/examples/using-remark/package.json
@@ -8,25 +8,28 @@
     "babel-plugin-lodash": "^3.2.11",
     "bluebird": "^3.4.7",
     "es6-object-assign": "^1.1.0",
-    "gatsby": "latest",
-    "gatsby-image": "^1.0.5",
-    "gatsby-plugin-catch-links": "latest",
-    "gatsby-plugin-glamor": "latest",
-    "gatsby-plugin-sharp": "latest",
-    "gatsby-remark-autolink-headers": "^1.4.8",
-    "gatsby-remark-copy-linked-files": "latest",
-    "gatsby-remark-images": "latest",
-    "gatsby-remark-katex": "latest",
-    "gatsby-remark-prismjs": "latest",
-    "gatsby-remark-responsive-iframe": "^1.4.9",
-    "gatsby-remark-smartypants": "latest",
-    "gatsby-source-filesystem": "latest",
-    "gatsby-transformer-remark": "latest",
-    "gatsby-transformer-sharp": "latest",
-    "gatsby-transformer-yaml": "latest",
+    "gatsby": "next",
+    "gatsby-image": "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-images": "next",
+    "gatsby-remark-katex": "next",
+    "gatsby-remark-prismjs": "next",
+    "gatsby-remark-responsive-iframe": "next",
+    "gatsby-remark-smartypants": "next",
+    "gatsby-source-filesystem": "next",
+    "gatsby-transformer-remark": "next",
+    "gatsby-transformer-sharp": "next",
+    "gatsby-transformer-yaml": "next",
+    "glamor": "^2.20.40",
     "lodash": "^4.17.4",
     "lodash-id": "^0.14.0",
     "lodash-webpack-plugin": "^0.11.5",
+    "react": "^16.3.2",
+    "react-dom": "^16.3.2",
     "react-typography": "^0.15.10",
     "rehype-react": "^3.0.2",
     "slash": "^1.0.0",

diff --git a/examples/using-remark/src/html.js b/examples/using-remark/src/html.js
diff --git a/examples/using-remark/src/layouts/index.js b/examples/using-remark/src/layouts/index.js
@@ -1,67 +1,74 @@
 import React from "react"
-import { Link } from "gatsby"
-import { rhythm, scale } from "../utils/typography"
+import { Link, StaticQuery } from "gatsby"
+import typography from "../utils/typography"
 import styles from "../styles"
 
 import "typeface-space-mono"
 import "typeface-spectral"
 
-require(`prismjs/themes/prism-solarizedlight.css`)
+import "prismjs/themes/prism-solarizedlight.css"
 
-class DefaultLayout extends React.Component {
+const { scale } = typography
+
+class Layout extends React.Component {
   render() {
-    const { author, homepage } = this.props.data.site.siteMetadata
     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,
-              }}
-            >
-              gatsby-example-using-remark
-            </h1>
-          </Link>
-        </div>
-        <div {...styles.container} {...styles.verticalPadding}>
-          {this.props.children()}
-          <div
-            css={{
-              ...scale(-0.5),
-              color: styles.colors.light,
-            }}
-          >
-            powered by{` `}
-            <a target="_blank" href={homepage}>
-              {author}
-            </a>
-          </div>
-        </div>
-      </div>
+      <StaticQuery
+        query={graphql`
+          query LayoutIndexQuery {
+            site {
+              siteMetadata {
+                author
+                homepage
+              }
+            }
+          }
+        `}
+        render={data => {
+          const { author, homepage } = data.site.siteMetadata
+          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,
+                    }}
+                  >
+                    gatsby-example-using-remark
+                  </h1>
+                </Link>
+              </div>
+              <div {...styles.container} {...styles.verticalPadding}>
+                {this.props.children}
+                <div
+                  css={{
+                    ...scale(-0.5),
+                    color: styles.colors.light,
+                  }}
+                >
+                  powered by{` `}
+                  <a target="_blank" href={homepage}>
+                    {author}
+                  </a>
+                </div>
+              </div>
+            </div>
+          )
+        }}
+      />
     )
   }
 }
 
-export default DefaultLayout
-
-export const pageQuery = graphql`
-  query LayoutIndexQuery {
-    site {
-      siteMetadata {
-        author
-        homepage
-      }
-    }
-  }
-`
+export default Layout
diff --git a/examples/using-remark/src/pages/excerpt-example.js b/examples/using-remark/src/pages/excerpt-example.js
@@ -2,7 +2,9 @@ import React from "react"
 import { Link } from "gatsby"
 import styles from "../styles"
 import presets from "../utils/presets"
-import { rhythm, scale } from "../utils/typography"
+import typography from "../utils/typography"
+
+const { rhythm, scale } = typography
 
 class Index extends React.Component {
   render() {

diff --git a/examples/using-remark/src/pages/index.js b/examples/using-remark/src/pages/index.js
@@ -1,15 +1,18 @@
 import React from "react"
 import { Link } from "gatsby"
+import Layout from "../layouts"
 import styles from "../styles"
 import presets from "../utils/presets"
-import { rhythm, scale } from "../utils/typography"
+import typography from "../utils/typography"
+
+const { rhythm, scale } = typography
 
 class Index extends React.Component {
   render() {
     const posts = this.props.data.allMarkdownRemark.edges
 
     return (
-      <div>
+      <Layout location={this.props.location}>
         <div>
           <h1
             css={{
@@ -63,7 +66,7 @@ class Index extends React.Component {
             ))}
           </ul>
         </div>
-      </div>
+      </Layout>
     )
   }
 }

diff --git a/examples/using-remark/src/pages/tags.js b/examples/using-remark/src/pages/tags.js
@@ -1,13 +1,14 @@
 import React from "react"
 import { Link } from "gatsby"
+import Layout from "../layouts"
 import kebabCase from "lodash/kebabCase"
 
 class TagsPageRoute extends React.Component {
   render() {
     const allTags = this.props.data.allMarkdownRemark.group
 
     return (
-      <div>
+      <Layout location={this.props.location}>
         <h1>Tags</h1>
         <ul>
           {allTags.map(tag => (
@@ -23,7 +24,7 @@ class TagsPageRoute extends React.Component {
             </li>
           ))}
         </ul>
-      </div>
+      </Layout>
     )
   }
 }

diff --git a/examples/using-remark/src/styles/index.js b/examples/using-remark/src/styles/index.js
@@ -1,7 +1,9 @@
 import { style } from "glamor"
-import { rhythm } from "../utils/typography"
-import { colors } from "./colors"
-import presets from "../utils/presets"
+import typography from "../utils/typography"
+import styleColors from "./colors"
+
+const { rhythm } = typography
+const { colors } = styleColors
 
 const animations = {
   animationCurveFastOutSlowIn: `cubic-bezier(0.4, 0, 0.2, 1)`,