[v2] Update Emotion + PrismJS example (#5720)

* Add required packages + upgrade their versions * Refactor layout component to v2 * Migrate from custom html.js to react-helmet * Add references to README * Fix typo + remove semi * Fix typo * Fix lint errors + remove unused console.log * Fix mixed up blog post content * Show proper page titles * remove word * remove word
gatsbyjs · Jun 6, 2018 · 1572240 · 1572240
1 parent 0b66c94
commit 1572240
Show file tree

Hide file tree

Showing 13 changed files with 168 additions and 178 deletions.
diff --git a/examples/using-emotion-prismjs/README.md b/examples/using-emotion-prismjs/README.md
@@ -4,4 +4,11 @@ https://using-emotion-prismjs.gatsbyjs.org
 
 Example site that demonstrates how to build Gatsby sites that use code
 highlighting with [emotion](https://emotion.sh/) and the
-[Gatsby PrismJS plugin](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-remark-prismjs).
+[Gatsby PrismJS plugin](https://www.gatsbyjs.org/packages/gatsby-remark-prismjs/).
+
+## References
+
+- [Official Emotion site](https://emotion.sh)
+- [Official PrismJS site](https://prismjs.com/)
+- [gatsby-plugin-emotion](https://www.gatsbyjs.org/packages/gatsby-plugin-emotion/)
+- [gatsby-remark-prismjs](https://www.gatsbyjs.org/packages/gatsby-remark-prismjs/)
diff --git a/examples/using-emotion-prismjs/gatsby-config.js b/examples/using-emotion-prismjs/gatsby-config.js
@@ -1,6 +1,6 @@
 module.exports = {
   siteMetadata: {
-    title: `Gatsby with emotion and Prismjs`,
+    title: `Gatsby with Emotion and PrismJS`,
   },
   plugins: [
     {
@@ -36,5 +36,6 @@ module.exports = {
         trackingId: `UA-93349937-2`,
       },
     },
+    `gatsby-plugin-react-helmet`,
   ],
 }
diff --git a/examples/using-emotion-prismjs/gatsby-node.js b/examples/using-emotion-prismjs/gatsby-node.js
@@ -33,9 +33,6 @@ exports.createPages = ({ graphql, actions }) => {
           createPage({
             path: edge.node.frontmatter.path,
             component: blogPost,
-            context: {
-              path: edge.node.frontmatter.path,
-            },
           })
         })
       })

diff --git a/examples/using-emotion-prismjs/package.json b/examples/using-emotion-prismjs/package.json
@@ -1,28 +1,34 @@
 {
   "name": "using-emotion-prismjs",
-  "description": "Gatsby example using emotion and PrismJS Gatsby plugin for code snippet highlighting",
+  "description": "Gatsby example using Emotion and PrismJS Gatsby plugin for code snippet highlighting",
   "main": "n/a",
   "scripts": {
     "develop": "gatsby develop",
     "build": "gatsby build"
   },
   "dependencies": {
-    "emotion": "^8.0.2-8",
-    "emotion-server": "^8.0.2-8",
-    "gatsby": "latest",
-    "gatsby-plugin-emotion": "latest",
-    "gatsby-plugin-google-analytics": "^1.0.1",
-    "gatsby-plugin-offline": "^1.0.1",
-    "gatsby-plugin-typography": "^1.7.10",
-    "gatsby-remark-prismjs": "^1.2.8",
-    "gatsby-source-filesystem": "^1.5.5",
-    "gatsby-transformer-remark": "^1.7.17",
+    "emotion": "^9.1.3",
+    "emotion-server": "^9.1.3",
+    "gatsby": "next",
+    "gatsby-plugin-emotion": "next",
+    "gatsby-plugin-google-analytics": "next",
+    "gatsby-plugin-offline": "next",
+    "gatsby-plugin-react-helmet": "next",
+    "gatsby-plugin-typography": "next",
+    "gatsby-remark-prismjs": "next",
+    "gatsby-source-filesystem": "next",
+    "gatsby-transformer-remark": "next",
     "lodash": "^4.17.4",
+    "prismjs": "^1.14.0",
     "prop-types": "^15.6.0",
-    "react-emotion": "^8.0.2-8",
-    "typography": "^0.16.6",
+    "react": "^16.4.0",
+    "react-dom": "^16.4.0",
+    "react-emotion": "^9.1.3",
+    "react-helmet": "^5.2.0",
+    "react-typography": "^0.16.13",
+    "typography": "^0.16.17",
     "typography-theme-bootstrap": "^0.16.7"
   },
   "author": "Andrew Wyatt <andrewrwyatt@gmail.com>",
   "license": "MIT"
-}
+}
diff --git a/examples/using-emotion-prismjs/src/components/layout.js b/examples/using-emotion-prismjs/src/components/layout.js
@@ -0,0 +1,73 @@
+import React from "react"
+import { Link, StaticQuery } from "gatsby"
+import PropTypes from "prop-types"
+import { css } from "react-emotion"
+import Helmet from "react-helmet"
+
+import { rhythm } from "../utils/typography"
+import "../prism-styles"
+
+const indexContainer = css`
+  max-width: ${rhythm(30)};
+  margin: ${rhythm(1)} auto 0;
+  padding: ${rhythm(1)};
+`
+
+const link = css`
+  box-shadow: none;
+  text-decoration: none;
+  color: inherit;
+`
+
+class Layout extends React.Component {
+  render() {
+    const HeadingTag = this.props.isIndex ? `h1` : `h3`
+    const { siteTitle, pageTitle } = this.props
+    const title = pageTitle ? `${pageTitle} — ${siteTitle}` : `${siteTitle}`
+
+    return (
+      <>
+        <Helmet>
+          <title>{title}</title>
+          <meta
+            name="description"
+            content="Gatsby example site using Emotion and PrismJS"
+          />
+          <meta name="referrer" content="origin" />
+        </Helmet>
+        <div className={indexContainer}>
+          <HeadingTag>
+            <Link className={link} to={`/`}>
+              Using Gatsby with Emotion and PrismJS
+            </Link>
+          </HeadingTag>
+          {this.props.children}
+        </div>
+      </>
+    )
+  }
+}
+
+Layout.propTypes = {
+  siteTitle: PropTypes.string.isRequired,
+  pageTitle: PropTypes.string,
+  isIndex: PropTypes.bool,
+  children: PropTypes.node.isRequired,
+}
+
+export default props => (
+  <StaticQuery
+    query={graphql`
+      query LayoutQuery {
+        site {
+          siteMetadata {
+            title
+          }
+        }
+      }
+    `}
+    render={data => (
+      <Layout siteTitle={data.site.siteMetadata.title} {...props} />
+    )}
+  />
+)
diff --git a/examples/using-emotion-prismjs/src/html.js b/examples/using-emotion-prismjs/src/html.js
diff --git a/examples/using-emotion-prismjs/src/layouts/index.js b/examples/using-emotion-prismjs/src/layouts/index.js
diff --git a/examples/using-emotion-prismjs/src/pages/2017-10-16-code-highlighting/index.md b/examples/using-emotion-prismjs/src/pages/2017-10-16-code-highlighting/index.md
@@ -2,29 +2,24 @@
 title: Blog Post with Code Example
 description: "Post containing a code example with syntax highlighting"
 date: "2017-10-16T15:12:03.284Z"
-path: /code-example-line-highlighting/
+path: /code-example/
 ---
 
-This post contains the same code snippet with synatax hightlighting from the
-previous post, but now includes highlighted lines. The highlight theme and is
-still same one used in the official React documentation.
+This post contains a code snippet with syntax highlighting. The highlight
+theme is the same one used in the official React documentation.
 
-```jsx{1,4-6}
+```jsx
 function NumberList(props) {
-  const numbers = props.numbers;
-  const listItems = numbers.map((number) =>
-    <li key={number.toString()}>
-      {number}
-    </li>
-  );
-  return (
-    <ul>{listItems}</ul>
-  );
+  const numbers = props.numbers
+  const listItems = numbers.map(number => (
+    <li key={number.toString()}>{number}</li>
+  ))
+  return <ul>{listItems}</ul>
 }
 
-const numbers = [1, 2, 3, 4, 5];
+const numbers = [1, 2, 3, 4, 5]
 ReactDOM.render(
   <NumberList numbers={numbers} />,
-  document.getElementById('root')
-);
+  document.getElementById("root")
+)
 ```
diff --git a/...ion-prismjs/src/pages/2017-10-17-code-highlighting-with-line-highlight/index.md b/...ion-prismjs/src/pages/2017-10-17-code-highlighting-with-line-highlight/index.md
@@ -2,13 +2,14 @@
 title: Another Blog Post with Code Example Including Highlighted Lines
 description: "Post containing a code example with syntax highlighting"
 date: "2017-10-17T14:12:03.284Z"
-path: /code-example/
+path: /code-example-line-highlighting/
 ---
 
-This post contains a code snippet with synatax hightlighting. The highlight
-theme and is the same one used in the official React documentation.
+This post contains the same code snippet with syntax highlighting from the
+previous post, but now includes highlighted lines. The highlight theme is
+still same one used in the official React documentation.
 
-```jsx
+```jsx{1,4-6}
 function NumberList(props) {
   const numbers = props.numbers
   const listItems = numbers.map(number => (

diff --git a/examples/using-emotion-prismjs/src/pages/index.js b/examples/using-emotion-prismjs/src/pages/index.js
@@ -2,9 +2,10 @@ import React from "react"
 import { Link } from "gatsby"
 import { css } from "emotion"
 import get from "lodash/get"
-
 import { rhythm, scale } from "../utils/typography"
 
+import Layout from '../components/layout'
+
 const indexContainer = css`
   max-width: ${rhythm(30)};
   margin: 0 auto 3rem;
@@ -44,38 +45,40 @@ class BlogIndex extends React.Component {
     const posts = get(this, `props.data.allMarkdownRemark.edges`)
 
     return (
-      <div className={indexContainer}>
-        <h2>
-          Enjoy the nicely highlighted code snippets in the posts below styled
-          with the{` `}
-          {` `}
-          <a href="https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-remark-prismjs">
-            Gatsby PrismJS plugin
-          </a>
-          {` `}
-          and
-          {` `}
-          <a href="https://emotion.sh/">emotion</a>!
-        </h2>
-        {posts.map(post => {
-          if (post.node.path !== `/404/`) {
-            return (
-              <div key={post.node.frontmatter.path} className={postContainer}>
-                <div className={titleContainer}>
-                  <h3 className={postTitle}>
-                    <Link className={link} to={post.node.frontmatter.path}>
-                      {post.node.frontmatter.title}
-                    </Link>
-                  </h3>
-                  <span className={postDate}>{post.node.frontmatter.date}</span>
+      <Layout isIndex>
+        <div className={indexContainer}>
+          <h2>
+            Enjoy the nicely highlighted code snippets in the posts below styled
+            with the{` `}
+            {` `}
+            <a href="https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-remark-prismjs">
+              Gatsby PrismJS plugin
+            </a>
+            {` `}
+            and
+            {` `}
+            <a href="https://emotion.sh/">emotion</a>!
+          </h2>
+          {posts.map(post => {
+            if (post.node.path !== `/404/`) {
+              return (
+                <div key={post.node.frontmatter.path} className={postContainer}>
+                  <div className={titleContainer}>
+                    <h3 className={postTitle}>
+                      <Link className={link} to={post.node.frontmatter.path}>
+                        {post.node.frontmatter.title}
+                      </Link>
+                    </h3>
+                    <span className={postDate}>{post.node.frontmatter.date}</span>
+                  </div>
+                  <p dangerouslySetInnerHTML={{ __html: post.node.excerpt }} />
                 </div>
-                <p dangerouslySetInnerHTML={{ __html: post.node.excerpt }} />
-              </div>
-            )
-          }
-          return null
-        })}
-      </div>
+              )
+            }
+            return null
+          })}
+        </div>
+      </Layout>
     )
   }
 }