Mini-tutorials for Glamor and Styled Components (#3417)

* Create adding-a-list-of-markdown-blog-posts.md

* Create adding-markdown-pages.md

* Create adding-tags-and-categories-to-blog-posts.md

* Create creating-dynamically-rendered-navigation.md

* Create how-gatsby-works-with-github-pages.md

* Create dropping-images-into-static-folders.md

* Update adding-markdown-pages.md

* Update adding-tags-and-categories-to-blog-posts.md

* Update adding-a-list-of-markdown-blog-posts.md

* new link

* Update dropping-images-into-static-folders.md

* new link

* New mini-tutorials on Glamor and Styled Components

Do the intros and code examples make sense now that these are removed from the context provided by Part Two of the tutorial?

* Fully edited

edits to reflect this page's relationship to Part Two of tutorial

* Updated relative links

* Updated relative links

* New relative links from sidebar

For Glamor and Styled Components pages. Does it make sense to have these in the Guides section?

* CSS-in-JS explanation

Let the wars begin about CSS-in-JS!

* Update glamor.md

* Update styled-components.md

* Update doc-links.yaml

docs/docs/glamor.md

@@ -0,0 +1,105 @@
+---
+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/) 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. Glamor is a variant on "CSS-in-JS"—which solves many of the problems with traditional CSS.
+
+One of the most important problems they solve is selector name collisions. With traditional CSS, you have to be careful not to overwrite CSS selectors used elsewhere in a site because all CSS selectors live in the same global namespace. This unfortunate restriction can lead to elaborate (and often confusing) selector naming schemes.
+
+With CSS-in-JS, you avoid all that as CSS selectors are scoped automatically to their component. Styles are tightly coupled with their components. This makes it very easy to know how to edit a component's CSS as there's never any confusion about how and where CSS is being used.
+
+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/styled-components.md

@@ -0,0 +1,103 @@
+---
+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/) to see how Styled Components compares as a styling method.
+
+Styled Components lets you use actual CSS syntax inside your components. Like Glamor, Styled Components is a variant on "CSS-in-JS"—which solves many of the problems with traditional CSS.
+
+One of the most important problems they solve is selector name collisions. With traditional CSS, you have to be careful not to overwrite CSS selectors used elsewhere in a site because all CSS selectors live in the same global namespace. This unfortunate restriction can lead to elaborate (and often confusing) selector naming schemes.
+
+With CSS-in-JS, you avoid all that as CSS selectors are scoped automatically to their component. Styles are tightly coupled with their components. This makes it very easy to know how to edit a component's CSS as there's never any confusion about how and where CSS is being used.
+
+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>
+);
+```

www/src/pages/docs/doc-links.yaml

@@ -44,6 +44,8 @@
       link: /docs/environment-variables/
     - title: Gatsby on Windows
       link: /docs/gatsby-on-windows/
+    - title: Using CSS-in-JS library Glamor
+      link: /docs/glamor/
     - title: How Gatsby Works with GitHub Pages
       link: /docs/how-gatsby-works-with-github-pages/
     - title: Migrating from v0 to v1
@@ -52,6 +54,8 @@
       link: /docs/path-prefix/
     - title: Proxying API Requests
       link: /docs/api-proxy/
+    - title: Using CSS-in-JS library Styled Components 
+      link: /docs/styled-components/
     - title: Adding Markdown Pages
       link: /docs/adding-markdown-pages/
     - title: Adding a List of Markdown Blog Posts*