diff --git a/examples/using-styled-components/README.md b/examples/using-styled-components/README.md index 76ab295540731..985a95fb1d4d2 100644 --- a/examples/using-styled-components/README.md +++ b/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/) diff --git a/examples/using-styled-components/gatsby-config.js b/examples/using-styled-components/gatsby-config.js index 4bd5976146856..abcad0612d891 100644 --- a/examples/using-styled-components/gatsby-config.js +++ b/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`, ], } diff --git a/examples/using-styled-components/package.json b/examples/using-styled-components/package.json index 708e81b559d1e..d4de96b0cc381 100644 --- a/examples/using-styled-components/package.json +++ b/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 ", "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" diff --git a/examples/using-styled-components/src/html.js b/examples/using-styled-components/src/html.js deleted file mode 100644 index 5affc9b4f6904..0000000000000 --- a/examples/using-styled-components/src/html.js +++ /dev/null @@ -1,67 +0,0 @@ -import React, { Component } from "react" -import * as PropTypes from "prop-types" -import { TypographyStyle } from "react-typography" -import typography from "./utils/typography" - -let stylesStr -if (process.env.NODE_ENV === `production`) { - try { - stylesStr = require(`!raw-loader!../public/styles.css`) - } catch (e) { - console.log(e) - } -} - -const propTypes = { - headComponents: PropTypes.node.isRequired, - body: PropTypes.node.isRequired, - postBodyComponents: PropTypes.node.isRequired, -} - -class Html extends Component { - render() { - let css - if (process.env.NODE_ENV === `production`) { - css = ( -