[v2] Update styled-components example

examples/using-styled-components/README.md

@@ -4,3 +4,8 @@ https://using-styled-components.gatsbyjs.org
 
 Example site that demonstrates how to build Gatsby sites with
 [Styled Components](https://www.styled-components.com/).
+
+## References
+
+- [Official styled-components site](https://www.styled-components.com/)
+- [gatsby-plugin-styled-components](https://www.gatsbyjs.org/packages/gatsby-plugin-styled-components/)

examples/using-styled-components/gatsby-config.js

@@ -4,12 +4,19 @@ module.exports = {
   },
   plugins: [
     `gatsby-plugin-styled-components`,
+    {
+      resolve: `gatsby-plugin-typography`,
+      options: {
+        pathToConfigModule: `src/utils/typography.js`,
+      },
+    },
     {
       resolve: `gatsby-plugin-google-analytics`,
       options: {
         trackingId: `UA-93349937-2`,
       },
     },
+    `gatsby-plugin-react-helmet`,
     `gatsby-plugin-offline`,
   ],
 }

examples/using-styled-components/package.json

@@ -2,19 +2,25 @@
   "name": "gatsby-example-using-styled-components",
   "private": true,
   "description": "Gatsby example site using the styled components plugin",
-  "version": "1.0.0",
+  "version": "2.0.0",
   "author": "Kyle Mathews <mathews.kyle@gmail.com>",
   "dependencies": {
-    "gatsby": "latest",
-    "gatsby-plugin-google-analytics": "latest",
-    "gatsby-plugin-offline": "latest",
-    "gatsby-plugin-styled-components": "latest",
+    "babel-plugin-styled-components": "^1.5.1",
+    "gatsby": "next",
+    "gatsby-plugin-google-analytics": "next",
+    "gatsby-plugin-offline": "next",
+    "gatsby-plugin-react-helmet": "next",
+    "gatsby-plugin-styled-components": "next",
+    "gatsby-plugin-typography": "next",
     "lodash": "^4.16.4",
-    "react-typography": "^0.15.0",
+    "react": "^16.4.0",
+    "react-dom": "^16.4.0",
+    "react-helmet": "^5.2.0",
+    "react-typography": "^0.16.13",
     "slash": "^1.0.0",
-    "styled-components": "^2.2.3",
-    "typography": "^0.15.8",
-    "typography-breakpoint-constants": "^0.14.0"
+    "styled-components": "^3.3.2",
+    "typography": "^0.16.17",
+    "typography-breakpoint-constants": "^0.15.10"
   },
   "keywords": [
     "gatsby"

examples/using-styled-components/src/pages/index.js

@@ -1,4 +1,5 @@
 import React from "react"
+import Helmet from "react-helmet"
 import styled from "styled-components"
 
 // Create a Title component that'll render an <h1> tag with some styles
@@ -17,24 +18,34 @@ const Wrapper = styled.section`
 class IndexPage extends React.Component {
   render() {
     return (
-      <div
-        style={{
-          margin: `0 auto`,
-          marginTop: `3rem`,
-          padding: `1.5rem`,
-          maxWidth: 800,
-          color: `red`,
-        }}
-      >
-        <Wrapper>
-          <Title>Hello World, this is my first styled component!</Title>
-          <p>
-            <a href="https://www.gatsbyjs.org/packages/gatsby-plugin-styled-components/">
-              gatsby-plugin-styled-component docs
-            </a>
-          </p>
-        </Wrapper>
-      </div>
+      <>
+        <Helmet>
+          <title>Gatsby Styled Components</title>
+          <meta
+            name="description"
+            content="Gatsby example site using Styled Components"
+          />
+          <meta name="referrer" content="origin" />
+        </Helmet>
+        <div
+          style={{
+            margin: `0 auto`,
+            marginTop: `3rem`,
+            padding: `1.5rem`,
+            maxWidth: 800,
+            color: `red`,
+          }}
+        >
+          <Wrapper>
+            <Title>Hello World, this is my first styled component!</Title>
+            <p>
+              <a href="https://www.gatsbyjs.org/packages/gatsby-plugin-styled-components/">
+                gatsby-plugin-styled-component docs
+              </a>
+            </p>
+          </Wrapper>
+        </div>
+      </>
     )
   }
 }

examples/using-styled-components/src/utils/typography.js

@@ -32,9 +32,4 @@ const options = {
 
 const typography = new Typography(options)
 
-// Hot reload typography in development.
-if (process.env.NODE_ENV !== `production`) {
-  typography.injectStyles()
-}
-
 export default typography