Add styled-components example site

gatsbyjs · Jun 2, 2017 · 589120f · 589120f
1 parent a6f779d
commit 589120f
Show file tree

Hide file tree

Showing 8 changed files with 191 additions and 2 deletions.
diff --git a/examples/using-glamor/package.json b/examples/using-glamor/package.json
@@ -1,7 +1,7 @@
 {
-  "name": "gatsby-example-using-drupal",
+  "name": "gatsby-example-using-glamor",
   "private": true,
-  "description": "Gatsby example site using the Drupal source plugin",
+  "description": "Gatsby example site using the Glamor plugin",
   "version": "1.0.0",
   "author": "Kyle Mathews <mathews.kyle@gmail.com>",
   "dependencies": {

diff --git a/examples/using-styled-components/.eslintrc b/examples/using-styled-components/.eslintrc
@@ -0,0 +1,8 @@
+{
+  "env": {
+    "browser": true
+  },
+  "globals": {
+    "graphql": false
+  }
+}
diff --git a/examples/using-styled-components/README.md b/examples/using-styled-components/README.md
@@ -0,0 +1,6 @@
+# Using Drupal
+
+https://using-drupal.gatsbyjs.org
+
+Example site that demostrates how to build Gatsby sites
+that pull data from the [Drupal CMS](https://www.drupal.org/).
diff --git a/examples/using-styled-components/gatsby-config.js b/examples/using-styled-components/gatsby-config.js
@@ -0,0 +1,15 @@
+module.exports = {
+  siteMetadata: {
+    title: `Gatsby with styled components`,
+  },
+  plugins: [
+    `gatsby-plugin-styled-components`,
+    {
+      resolve: `gatsby-plugin-google-analytics`,
+      options: {
+        trackingId: `UA-93349937-2`,
+      },
+    },
+    `gatsby-plugin-offline`,
+  ],
+}
diff --git a/examples/using-styled-components/package.json b/examples/using-styled-components/package.json
@@ -0,0 +1,28 @@
+{
+  "name": "gatsby-example-using-styled-components",
+  "private": true,
+  "description": "Gatsby example site using the styled components plugin",
+  "version": "1.0.0",
+  "author": "Kyle Mathews <mathews.kyle@gmail.com>",
+  "dependencies": {
+    "gatsby": "canary",
+    "gatsby-link": "canary",
+    "gatsby-plugin-google-analytics": "canary",
+    "gatsby-plugin-offline": "canary",
+    "gatsby-plugin-styled-components": "canary",
+    "lodash": "^4.16.4",
+    "react-typography": "^0.15.0",
+    "slash": "^1.0.0",
+    "typography": "^0.15.8",
+    "typography-breakpoint-constants": "^0.14.0"
+  },
+  "keywords": [
+    "gatsby"
+  ],
+  "license": "MIT",
+  "main": "n/a",
+  "scripts": {
+    "develop": "gatsby develop",
+    "build": "gatsby build"
+  }
+}
diff --git a/examples/using-styled-components/src/html.js b/examples/using-styled-components/src/html.js
@@ -0,0 +1,53 @@
+import React from "react"
+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)
+  }
+}
+
+module.exports = React.createClass({
+  render() {
+    let css
+    if (process.env.NODE_ENV === `production`) {
+      css = (
+        <style
+          id="gatsby-inlined-css"
+          dangerouslySetInnerHTML={{ __html: stylesStr }}
+        />
+      )
+    }
+
+    return (
+      <html op="news" lang="en">
+        <head>
+          {this.props.headComponents}
+
+          <meta name="referrer" content="origin" />
+          <meta charSet="utf-8" />
+          <meta name="description" content="Gatsby example site using Glamor" />
+          <meta httpEquiv="X-UA-Compatible" content="IE=edge" />
+          <meta
+            name="viewport"
+            content="width=device-width, initial-scale=1.0"
+          />
+          <title>Gatsby Glamor</title>
+          <TypographyStyle typography={typography} />
+          {css}
+        </head>
+        <body>
+          <div
+            id="___gatsby"
+            dangerouslySetInnerHTML={{ __html: this.props.body }}
+          />
+          {this.props.postBodyComponents}
+        </body>
+      </html>
+    )
+  },
+})
diff --git a/examples/using-styled-components/src/pages/index.js b/examples/using-styled-components/src/pages/index.js
@@ -0,0 +1,39 @@
+import React from "react"
+import styled from "styled-components"
+
+// Create a Title component that'll render an <h1> tag with some styles
+const Title = styled.h1`
+  font-size: 1.5em;
+  text-align: center;
+  color: palevioletred;
+`
+
+// Create a Wrapper component that'll render a <section> tag with some styles
+const Wrapper = styled.section`
+  padding: 4em;
+  background: papayawhip;
+`
+
+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>
+        </Wrapper>
+      </div>
+    )
+  }
+}
+
+export default IndexPage
diff --git a/examples/using-styled-components/src/utils/typography.js b/examples/using-styled-components/src/utils/typography.js
@@ -0,0 +1,40 @@
+import Typography from "typography"
+import {
+  MOBILE_MEDIA_QUERY,
+  TABLET_MEDIA_QUERY,
+} from "typography-breakpoint-constants"
+
+const options = {
+  baseFontSize: `18px`,
+  baseLineHeight: 1.45,
+  blockMarginBottom: 0.75,
+  scaleRatio: 2.15,
+  overrideStyles: ({ rhythm, scale }, options) => {
+    return {
+      "h1,h2,h3,h4": {
+        lineHeight: 1.2,
+      },
+      [TABLET_MEDIA_QUERY]: {
+        // Make baseFontSize on mobile 17px.
+        html: {
+          fontSize: `${17 / 16 * 100}%`,
+        },
+      },
+      [MOBILE_MEDIA_QUERY]: {
+        // Make baseFontSize on mobile 16px.
+        html: {
+          fontSize: `${16 / 16 * 100}%`,
+        },
+      },
+    }
+  },
+}
+
+const typography = new Typography(options)
+
+// Hot reload typography in development.
+if (process.env.NODE_ENV !== `production`) {
+  typography.injectStyles()
+}
+
+export default typography