Mini-tutorials for Glamor and Styled Components

docs/docs/adding-a-list-of-markdown-blog-posts.md

@@ -0,0 +1,7 @@
+---
+title: Adding a List of Markdown Blog Posts
+---
+
+This is a stub. Help our community expand it.
+
+Please use the [Gatsby Style Guide](https://www.gatsbyjs.org/docs/gatsby-style-guide/#where-to-get-help) to ensure your pull request gets accepted.

docs/docs/adding-markdown-pages.md

@@ -0,0 +1,7 @@
+---
+title: Adding Markdown Pages
+---
+
+This is a stub. Help our community expand it.
+
+Please use the [Gatsby Style Guide](https://www.gatsbyjs.org/docs/gatsby-style-guide/#where-to-get-help) to ensure your pull request gets accepted.

docs/docs/adding-tags-and-categories-to-blog-posts.md

@@ -0,0 +1,7 @@
+---
+title: Adding Tags and Categories to Blog Posts
+---
+
+This is a stub. Help our community expand it.
+
+Please use the [Gatsby Style Guide](https://www.gatsbyjs.org/docs/gatsby-style-guide/#where-to-get-help) to ensure your pull request gets accepted.

docs/docs/creating-dynamically-rendered-navigation.md

@@ -0,0 +1,7 @@
+---
+title: Creating Dynamically-Rendered Navigation
+---
+
+This is a stub. Help our community expand it.
+
+Please use the [Gatsby Style Guide](https://www.gatsbyjs.org/docs/gatsby-style-guide/#where-to-get-help) to ensure your pull request gets accepted.

docs/docs/dropping-images-into-static-folders.md

@@ -0,0 +1,7 @@
+---
+title: Dropping Images into Static Folders
+---
+
+This is a stub. Help our community expand it.
+
+Please use the [Gatsby Style Guide](https://www.gatsbyjs.org/docs/gatsby-style-guide/#where-to-get-help) to ensure your pull request gets accepted.

docs/docs/glamor.md

@@ -0,0 +1,101 @@
+---
+title: Glamor
+---
+
+Let's create a page using
+[Glamor](https://github.com/threepointone/glamor). It might be useful for you to explore [CSS Modules](/tutorial/part-two/) and [Styled Components](/styled-components.md) to see how Glamor compares as a styling method.
+
+Glamor lets you write _real_ CSS inline in your components using the same Object
+CSS syntax React supports for the `style` prop.
+
+First, install the Gatsby plugin for Glamor.
+
+```shell
+npm install --save gatsby-plugin-glamor
+```
+
+And then add it to your `gatsby-config.js`
+
+```javascript{9}
+module.exports = {
+  plugins: [
+    {
+      resolve: `gatsby-plugin-typography`,
+      options: {
+        pathToConfigModule: `src/utils/typography.js`,
+      },
+    },
+    `gatsby-plugin-glamor`,
+  ],
+}
+```
+
+Restart `gatsby develop` again to enable the Glamor plugin.
+
+Now create the Glamor page at `src/pages/about-glamor.js`
+
+```jsx
+import React from "react";
+
+import Container from "../components/container";
+
+export default () => (
+  <Container>
+    <h1>About Glamor</h1>
+    <p>Glamor is cool</p>
+  </Container>
+);
+```
+
+Let's add the same inline `User` component that you would use for CSS Modules, but this time using Glamor's `css`
+prop.
+
+```jsx{5-27,33-40}
+import React from "react"
+
+import Container from "../components/container"
+
+const User = props =>
+  <div
+    css={{
+      display: `flex`,
+      alignItems: `center`,
+      margin: `0 auto 12px auto`,
+      "&:last-child": { marginBottom: 0 }
+    }}
+  >
+    <img
+      src={props.avatar}
+      css={{ flex: `0 0 96px`, width: 96, height: 96, margin: 0 }}
+      alt=""
+    />
+    <div css={{ flex: 1, marginLeft: 18, padding: 12 }}>
+      <h2 css={{ margin: `0 0 12px 0`, padding: 0 }}>
+        {props.username}
+      </h2>
+      <p css={{ margin: 0 }}>
+        {props.excerpt}
+      </p>
+    </div>
+  </div>
+
+export default () =>
+  <Container>
+    <h1>About Glamor</h1>
+    <p>Glamor is cool</p>
+    <User
+      username="Jane Doe"
+      avatar="https://s3.amazonaws.com/uifaces/faces/twitter/adellecharles/128.jpg"
+      excerpt="I'm Jane Doe. Lorem ipsum dolor sit amet, consectetur adipisicing elit."
+    />
+    <User
+      username="Bob Smith"
+      avatar="https://s3.amazonaws.com/uifaces/faces/twitter/vladarbatov/128.jpg"
+      excerpt="I'm Bob smith, a vertically aligned type of guy. Lorem ipsum dolor sit amet, consectetur adipisicing elit."
+    />
+  </Container>
+```
+
+If you are using Glamor in Part Two of the tutorials, the final Glamor page should look identical to the CSS Modules page.
+
+![glamor-example](glamor-example.png)

docs/docs/how-gatsby-works-with-github-pages.md

@@ -0,0 +1,7 @@
+---
+title: How Gatsby Works with Github Pages
+---
+
+This is a stub. Help our community expand it.
+
+Please use the [Gatsby Style Guide](https://www.gatsbyjs.org/docs/gatsby-style-guide/#where-to-get-help) to ensure your pull request gets accepted.

docs/docs/styled-components.md

@@ -0,0 +1,99 @@
+---
+title: Styled Components
+---
+
+[Styled Components](https://www.styled-components.com/) is an example of using CSS-in-JS. It might be useful for you to explore [CSS Modules](/tutorial/part-two/) and [Glamor](/glamor.md) to see how Styled Components compares as a styling method.
+
+Styled Components lets you use actual CSS syntax inside your components.
+
+First, we'll install the Gatsby plugin for Styled Components.
+
+```sh
+npm install --save gatsby-plugin-styled-components styled-components
+```
+
+Then modify the `gatsby-config.js`. If you've previously used the Glamor plugin in this site,
+you'll need to remove the Glamor plugin and delete the Glamor component page we
+created. The two plugins conflict with each other as both want to take control
+during server rendering.
+
+```javascript{9}
+module.exports = {
+  plugins: [
+    {
+      resolve: `gatsby-plugin-typography`,
+      options: {
+        pathToConfigModule: `src/utils/typography.js`,
+      },
+    },
+    `gatsby-plugin-styled-components`,
+  ],
+}
+```
+
+Then at `src/pages/about-styled-components.js` create:
+
+```jsx
+import React from "react";
+import styled from "styled-components";
+
+import Container from "../components/container";
+
+const UserWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  margin: 0 auto 12px auto;
+  &:last-child {
+    margin-bottom: 0;
+  }
+`;
+
+const Avatar = styled.img`
+  flex: 0 0 96px;
+  width: 96px;
+  height: 96px;
+  margin: 0;
+`;
+
+const Description = styled.div`
+  flex: 1;
+  margin-left: 18px;
+  padding: 12px;
+`;
+
+const Username = styled.h2`
+  margin: 0 0 12px 0;
+  padding: 0;
+`;
+
+const Excerpt = styled.p`
+  margin: 0;
+`;
+
+const User = props => (
+  <UserWrapper>
+    <Avatar src={props.avatar} alt="" />
+    <Description>
+      <Username>{props.username}</Username>
+      <Excerpt>{props.excerpt}</Excerpt>
+    </Description>
+  </UserWrapper>
+);
+
+export default () => (
+  <Container>
+    <h1>About Styled Components</h1>
+    <p>Styled Components is cool</p>
+    <User
+      username="Jane Doe"
+      avatar="https://s3.amazonaws.com/uifaces/faces/twitter/adellecharles/128.jpg"
+      excerpt="I'm Jane Doe. Lorem ipsum dolor sit amet, consectetur adipisicing elit."
+    />
+    <User
+      username="Bob Smith"
+      avatar="https://s3.amazonaws.com/uifaces/faces/twitter/vladarbatov/128.jpg"
+      excerpt="I'm Bob smith, a vertically aligned type of guy. Lorem ipsum dolor sit amet, consectetur adipisicing elit."
+    />
+  </Container>
+);
+```