Creating the Layout Component

We start by creating a layout component in frontend/src/components:

// frontend/src/components/layout.js

import React from 'react';
import Header from './header';

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

Import the layout component into the index page:

// frontend/src/pages/index.js

import React from 'react';

import { useQuery } from '@apollo/client';
import gql from 'graphql-tag';
import Layout from '../components/layout';

const APOLLO_QUERY = gql`
  query {
    todo(id: 7) { 
      id
      title
      task
    }
  }
`;

export default function Home() {
  const { loading, error, data } = useQuery(APOLLO_QUERY)
  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error!</p>;

  return (
    <Layout>
      <div>
        <div>Hello World!</div>
        <div>
          Todo Title: {data.todo.title}
        </div>
      </div>
    </Layout>
  )
}

Spin up the development environment:

docker-compose -f docker-compose.yml -f docker-compose-dev.yml up -d

# or with the Makefile shortcut
make dev

When you hit http://localhost:8000 you should see the index page something like this:

http://localhost:8000

As we move forward with our project we’ll wrap all our pages with our new Layout component so all the pages of the site have a consistent look and feel.

Typography.js

Quoting from the Gatsby docs:

Typography.js is a JavaScript library that allows you to explore the typographic design of your website and define beautiful custom and pre-existing typographic themes. It enables you to change the font on your website with ease. Typography.js currently maintains over 30 themes for you to use. You can also create your own custom font themes if no available themes fit your requirements.

Gatsby Docs

Sounds cool. Lets try it. We’ll start by installing the gatsby-plugin-typography plugin:

# Power down the app
make dev-down

# or
docker-compose -f docker-compose.yml -f docker-compose-dev.yml down

# Very important to make sure you're in frontend dir
# Don't want to install the node modules at the root :)
cd frontend
npm install gatsby-plugin-typography react-typography typography

Update gatsby-config.js with the plugin:

// frontend/gatsby-config.js

/**
 * Configure your Gatsby site with this file.
 *
 * See: https://www.gatsbyjs.com/docs/gatsby-config/
 */

module.exports = {
  siteMetadata: {
    title: `Gatsby Todo App`,
    description: `A fabulous description of our Todo app here...`,
    author: `Ron Leeson`,
  },
  plugins: [
    {
      resolve: `gatsby-plugin-typography`,
      options: {
        pathToConfigModule: `src/utils/typography`,
      },
    },
  ],
}

Note the pathToConfigModule in the options, we need to create that file with a basic typography configuration:

// frontend/src/utils/typography.js

import Typography from "typography"

const typography = new Typography({
  baseFontSize: "18px",
  baseLineHeight: 1.666,
  headerFontFamily: [
    "Avenir Next",
    "Helvetica Neue",
    "Segoe UI",
    "Helvetica",
    "Arial",
    "sans-serif",
  ],
  bodyFontFamily: ["Georgia", "serif"],
})

export default typography

We’re ready to rebuild our frontend docker container:

# cd to root of project
docker-compose build frontend

# After build is complete spin up the dev env
make dev

If all goes well you should be able to hit http://localhost:8000 and see you index page updated with cool, stylish fonts:

http://localhost:8000

There’s loads of other Typography themes you can play with. Checkout the Gatsby Typography tutorial section and the Typography repo.

Well, that wraps up this chapter. After all the gnarly heavy lifting of the previous chapters this one is a walk in the park.

Next up in chapter 12: implement styled-components.

< Previous: Chapter 10
Next: Chapter 12 >