gatsby 公式チュートリアルメモ part3


## 公式チュートリアルリンク
https://www.gatsbyjs.com/tutorial/part-three/
パート3の内容のメモ

## siteの作成
前回同様にpart3用のプロジェクトの生成

```shell:shell
gatsby new tutorial-part-three https://github.com/gatsbyjs/gatsby-starter-hello-world
cd tutorial-part-three
```

## plugin導入
gatsbyはプラグインとして外部コンテンツを読み込む仕組みがある．今回は `typography.js` のプラグインを例に読み込みの練習をする．

```shell:shell
npm install gatsby-plugin-typography react-typography typography typography-theme-fairy-gates
```

configファイルを編集（このへんは他のnodejsと同じようなイメージでOk）

```js:gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: `gatsby-plugin-typography`,
      options: {
        pathToConfigModule: `src/utils/typography`,
      },
    },
  ],
}
```

`typography.js` にはコンフィグファイルが必要とのことで，コンフィグファイルを追加しておく．

```src/utils/typography.js
import Typography from "typography"
import fairyGateTheme from "typography-theme-fairy-gates"

const typography = new Typography(fairyGateTheme)

export const { scale, rhythm, options } = typography
export default typography
```

ここで確認してみる．chromeの開発モードで確認すると，`HEAD` に `typography.js` が読み込まれているのが確認できる．

```shell:shell
gatsby develop
```

ほかにもプラグインは色々あるのでここから参照
[Plugins | gatsby](https://www.gatsbyjs.com/plugins/)


## contentとstyleの追加
`typography.js` を使ってコンテンツを配置してみる．
ページの作成をする．

```js:src/pages/index.js
import React from "react"
import Layout from "../components/layout"

export default function Home() {
  return (
    <Layout>
      <h1>Hi! I'm building a fake Gatsby site as part of a tutorial!</h1>
      <p>
        What do I like to do? Lots of course but definitely enjoy building
        websites.
      </p>
    </Layout>
  )
}
```

```js:src/pages/about.js
import React from "react"
import Layout from "../components/layout"

export default function About() {
  return (
    <Layout>
      <h1>About me</h1>
      <p>
        I’m good enough, I’m smart enough, and gosh darn it, people like me!
      </p>
    </Layout>
  )
}
```

```js:src/pages/content.js
import React from "react"
import Layout from "../components/layout"


export default function Contact() {
  return (
    <Layout>
      <h1>I'd love to talk! Email me at the address below</h1>
      <p>
        <a href="mailto:me@example.com">me@example.com</a>
      </p>
    </Layout>
  )
}
```
レイアウトコンテンツの作成

```js:src/contents/layout.js
import React from "react"

export default function Layout({ children }) {
  return (
    <div style={{ margin: `3rem auto`, maxWidth: 650, padding: `0 1rem` }}>
      {children}
    </div>
  )
}
```

ここでサイトを確認してみると，マージンが設定され，センタライズされたサイトを確認することができる．

## サイトタイトルとヘッダーの作成
`layout.js` に対してさらに変更を加える．サイトのタイトルとインデックスヘッダーを追加する．
Layout要素を変更することですべてのページが更新されるので良い．

```js:src/contents/layout.js
import React from "react"
import { Link } from "gatsby"
const ListLink = props => (
  <li style={{ display: `inline-block`, marginRight: `1rem` }}>
    <Link to={props.to}>{props.children}</Link>
  </li>
)

export default function Layout({ children }) {
  return (
    <div style={{ margin: `3rem auto`, maxWidth: 650, padding: `0 1rem` }}>
      <header style={{ marginBottom: `1.5rem` }}>
        <Link to="/" style={{ textShadow: `none`, backgroundImage: `none` }}>
          <h3 style={{ display: `inline` }}>MySweetSite</h3>
        </Link>
        <ul style={{ listStyle: `none`, float: `right` }}>
          <ListLink to="/">Home</ListLink>
          <ListLink to="/about/">About</ListLink>
          <ListLink to="/contact/">Contact</ListLink>
        </ul>
      </header>
      {children}
    </div>
  )
}
```

`localhost:8000` を確認すると，HOME, ABOUT, CONTACTの目次が追加されているのが確認できた．