Docs: Glamorous -> styled Components

[Jossdz]

Hi there, since glamorous is unmaintained you should change your documentation to provide a diferent way to style components here's a suggestion at the part-four in the gatsby tutorial: src/layouts/index.js

import React from "react";
import g from "glamorous";
import { css } from "glamor";
import Link from "gatsby-link";

import { rhythm } from "../utils/typography";

const linkStyle = css({ float: `right` });

export default ({ children }) => (
  <g.Div
    margin={`0 auto`}
    maxWidth={700}
    padding={rhythm(2)}
    paddingTop={rhythm(1.5)}
  >
    <Link to={`/`}>
      <g.H3
        marginBottom={rhythm(2)}
        display={`inline-block`}
        fontStyle={`normal`}
      >
        Pandas Eating Lots
      </g.H3>
    </Link>
    <Link className={linkStyle} to={`/about/`}>
      About
    </Link>
    {children()}
  </g.Div>
);

=>

import React from "react";

import Link from "gatsby-link";

import styled from 'styled-components';

import { rhythm } from "../utils/typography";

const MainContainer = styled.div`
    margin: 0 auto;
    max-width: 700px;
    padding: ${rhythm(2)};
    padding-top: ${rhythm(1.5)};
`;

const StyledLink = styled(Link)`
    float: right;
`
const H3 = styled.h3`
        margin-bottom:${rhythm(2)};
        display: inline-block;
        font-style: normal;
`;

export default ({ children }) => (
  <MainContainer>
    <Link to={`/`}>
      <H3 >
        Pandas Eating Lots
      </H3>
    </Link>
    <StyledLink to={`/about/`}>
      About
    </StyledLink>
    {children()}
  </MainContainer>
);

[LekoArts]

The v2 document is already using emotion. https://github.com/gatsbyjs/gatsby/blob/master/docs/tutorial/part-four/index.md

Since this will be the default tutorial in the near future I don't think it's necessary to change that in the v1 branch.

[Chuloo]

Thanks, @LeKoArts for pointing that out.

@Jossdz Feel free to open a new one if you still experience a similar problem! 👍