gatsbyの作業履歴

チュートリアル

今回実施するgatsbyのチュートリアルはこちら
https://www.gatsbyjs.com/tutorial/part-three/
ネストされたレイアウトコンポーネントの作成ができるようです。
早速やっていきましょう。

Creating Nested Layout Component

Using plugins

gatsbyはコミュニティメンバーがプラグインを提供しているので、それを使用しようぜ。
最初はTypography.jsを使うぜ！
みたいなことが書いてるはず！

Create a new Gatsby site

またサイトを作成、で移動
gatsby new tutorial-part-three https://github.com/gatsbyjs/gatsby-starter-hello-world
cd tutorial-part-three

Install and configure gatsby-plugin-typography

移動したディレクトリで以下を実行
npm install --save gatsby-plugin-typography react-typography typography typography-theme-fairy-gates

たぶん出来た。
tutorial-part-threeディレクトリにあるgatsby-config.jsを以下のように修正。

gatsby-config.js

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

srcディレクトリ配下にutilsディレクトリを作成。
src/utils/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

起動
gatsby develop
チュートリアルの感じのんが出てたからOK!!

Make some content and style changes

src/pages/index.jsを以下のように修正

src/pages/index.js

import React from "react"

export default function Home() {
  return (
    <div>
      <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>
    </div>
  )
}

OKOK
更にsrc/pages/index.jsを修正

src/pages/index.js

import React from "react"

export default function Home() {
  return (
    <div style={{ margin: `3rem auto`, maxWidth: 600 }}>←これ追記
      <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>
    </div>
  )
}

おーけー

Creating layout components

つぎがレイアウトコンポーネントの作成
src/pages/about.jsを作成し、以下を記述

src/pages/about.js

import React from "react"

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

src/pages/contact.jsを作成し、以下を記述

src/pages/contact.js

import React from "react"

export default function Contact() {
  return (
    <div>
      <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>
    </div>
  )
}

Create your first layout component

src配下にcomponentsを作成
src/components/layout.jsを作成し以下を記述

src/components/layout.js

import React from "react"

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

src/pages/index.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>←これ修正
  );
}

divのstyleをlayout.jsに移行したが、変わらないのでOK!

Add a site title

サイトタイトルを入れる
src/components/layout.jsを修正

src/components/layout.js

import React from "react"

export default function Layout({ children }) {
  return (
    <div style={{ margin: `3rem auto`, maxWidth: 650, padding: `0 1rem` }}>
      <h3>MySweetSite</h3>←これを追記
      {children}
    </div>
  )
}

タイトル出た

Add navigation links between pages

ナビゲーションのリンクを追加する。
src/components/layout.jsを追記

src/components/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>
  )
}

ナビゲーションが追加されてる！
チュートリアルはここまでか。。。
一応ほかのjsにもレイアウト適用してみるか。
src/pages/about.jsとsrc/pages/contact.jsを修正

src/pages/about.js

import React from "react"
import Layout from "../components/layout"←これ追記

export default function About() {
  return (
    <Layout>←divからLayoutタグに変更
      <h1>About me</h1>
      <p>
        I’m good enough, I’m smart enough, and gosh darn it, people like me!
      </p>
    </Layout>←divからLayoutタグに変更
  )
}

src/pages/contact.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>
  )
}

Layoutが簡単に適用されるね。
便利。
jspのtilesとかで、こんな感じのよく作ってたな。
おじさん、割と感動。

今回はここまで。

ありがとうございました。