{"id":1454,"date":"2020-11-19T02:03:12","date_gmt":"2020-11-19T02:03:12","guid":{"rendered":"http:\/\/10.0.0.14\/?p=1454"},"modified":"2021-09-08T00:13:27","modified_gmt":"2021-09-08T00:13:27","slug":"tdd-with-gatsby-django-docker-part-2-chapter-11-layout-component","status":"publish","type":"post","link":"https:\/\/tutorials.leesonresearch.com\/tutorials\/2020\/11\/19\/tdd-with-gatsby-django-docker-part-2-chapter-11-layout-component\/","title":{"rendered":"TDD with Gatsby, Django & Docker Part 2, Chapter 11 — Layout Component & Typography"},"content":{"rendered":"\n

Creating the Layout Component<\/h1>\n\n\n\n

We start by creating a layout component in frontend\/src\/components:<\/p>\n\n\n

\n\/\/ frontend\/src\/components\/layout.js\n\nimport React from 'react';\nimport Header from '.\/header';\n\nexport default function Layout({ children }) {\n  return (\n    <React.Fragment>\n      <Header \/>\n      <div style={{ margin: `0 auto`, maxWidth: 650, padding: `0 1rem` }}>\n        {children}\n      <\/div>\n    <\/React.Fragment>\n  )\n}\n<\/pre><\/div>\n\n\n
Import the layout component into the index page:<\/p>\n\n\n
\n\/\/ frontend\/src\/pages\/index.js\n\nimport React from 'react';\n\nimport { useQuery } from '@apollo\/client';\nimport gql from 'graphql-tag';\nimport Layout from '..\/components\/layout';\n\nconst APOLLO_QUERY = gql`\n  query {\n    todo(id: 7) { \n      id\n      title\n      task\n    }\n  }\n`;\n\nexport default function Home() {\n  const { loading, error, data } = useQuery(APOLLO_QUERY)\n  if (loading) return <p>Loading...<\/p>;\n  if (error) return <p>Error!<\/p>;\n\n  return (\n    <Layout>\n      <div>\n        <div>Hello World!<\/div>\n        <div>\n          Todo Title: {data.todo.title}\n        <\/div>\n      <\/div>\n    <\/Layout>\n  )\n}\n<\/pre><\/div>\n\n\n
Spin up the development environment:<\/p>\n\n\n
\ndocker-compose -f docker-compose.yml -f docker-compose-dev.yml up -d\n\n# or with the Makefile shortcut\nmake dev\n<\/pre><\/div>\n\n\n
When you hit http:\/\/localhost:8000 you should see the index page something like this:<\/p>\n\n\n\n
\"\"
http:\/\/localhost:8000<\/figcaption><\/figure>\n\n\n\n
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.<\/p>\n\n\n\n
Typography.js<\/h4>\n\n\n\n
Quoting from the Gatsby docs<\/a>:<\/p>\n\n\n\n
Typography.js<\/a> 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.<\/p>Gatsby Docs<\/a><\/cite><\/blockquote>\n\n\n\n
Sounds cool. Lets try it. We’ll start by installing the gatsby-plugin-typography<\/code> plugin:<\/p>\n\n\n
\n# Power down the app\nmake dev-down\n\n# or\ndocker-compose -f docker-compose.yml -f docker-compose-dev.yml down\n\n# Very important to make sure you're in frontend dir\n# Don't want to install the node modules at the root :)\ncd frontend\nnpm install gatsby-plugin-typography react-typography typography\n<\/pre><\/div>\n\n\n
Update gatsby-config.js with the plugin:<\/p>\n\n\n
\n\/\/ frontend\/gatsby-config.js\n\n\/**\n * Configure your Gatsby site with this file.\n *\n * See: https:\/\/www.gatsbyjs.com\/docs\/gatsby-config\/\n *\/\n\nmodule.exports = {\n  siteMetadata: {\n    title: `Gatsby Todo App`,\n    description: `A fabulous description of our Todo app here...`,\n    author: `Ron Leeson`,\n  },\n  plugins: [\n    {\n      resolve: `gatsby-plugin-typography`,\n      options: {\n        pathToConfigModule: `src\/utils\/typography`,\n      },\n    },\n  ],\n}\n<\/pre><\/div>\n\n\n
Note the pathToConfigModule in the options, we need to create that file with a basic typography configuration:<\/p>\n\n\n
\n\/\/ frontend\/src\/utils\/typography.js\n\nimport Typography from "typography"\n\nconst typography = new Typography({\n  baseFontSize: "18px",\n  baseLineHeight: 1.666,\n  headerFontFamily: [\n    "Avenir Next",\n    "Helvetica Neue",\n    "Segoe UI",\n    "Helvetica",\n    "Arial",\n    "sans-serif",\n  ],\n  bodyFontFamily: ["Georgia", "serif"],\n})\n\nexport default typography\n<\/pre><\/div>\n\n\n
We’re ready to rebuild our frontend docker container:<\/p>\n\n\n
\n# cd to root of project\ndocker-compose build frontend\n\n# After build is complete spin up the dev env\nmake dev\n<\/pre><\/div>\n\n\n
If all goes well you should be able to hit http:\/\/localhost:8000 and see you index page updated with cool, stylish fonts:<\/p>\n\n\n\n
\"\"
http:\/\/localhost:8000<\/figcaption><\/figure>\n\n\n\n
There’s loads of other Typography themes you can play with. Checkout the Gatsby Typography tutorial section<\/a> and the Typography repo<\/a>. <\/p>\n\n\n\n
Well, that wraps up this chapter. After all the gnarly heavy lifting of the previous chapters this one is a walk in the park.<\/p>\n\n\n\n
Next up in chapter 12: implement styled-components<\/strong>. <\/p>\n\n\n\n
\n
< Previous:  Chapter 10<\/a><\/div>\n\n\n\n
Next: Chapter 12 ><\/a><\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"
Creating the Layout Component We start by creating a layout component in frontend\/src\/components: Import the layout component into the index page: Spin up the development environment: When you hit http:\/\/localhost:8000 you should see the index page something like this: As… Continue Reading →<\/a><\/p>\n","protected":false},"author":1,"featured_media":277,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[20,12],"tags":[10,33,34],"class_list":["post-1454","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-featured-tutorial","category-gatsby","tag-gatsby","tag-layout-component","tag-typography"],"_links":{"self":[{"href":"https:\/\/tutorials.leesonresearch.com\/tutorials\/wp-json\/wp\/v2\/posts\/1454","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tutorials.leesonresearch.com\/tutorials\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/tutorials.leesonresearch.com\/tutorials\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/tutorials.leesonresearch.com\/tutorials\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/tutorials.leesonresearch.com\/tutorials\/wp-json\/wp\/v2\/comments?post=1454"}],"version-history":[{"count":46,"href":"https:\/\/tutorials.leesonresearch.com\/tutorials\/wp-json\/wp\/v2\/posts\/1454\/revisions"}],"predecessor-version":[{"id":2518,"href":"https:\/\/tutorials.leesonresearch.com\/tutorials\/wp-json\/wp\/v2\/posts\/1454\/revisions\/2518"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/tutorials.leesonresearch.com\/tutorials\/wp-json\/wp\/v2\/media\/277"}],"wp:attachment":[{"href":"https:\/\/tutorials.leesonresearch.com\/tutorials\/wp-json\/wp\/v2\/media?parent=1454"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tutorials.leesonresearch.com\/tutorials\/wp-json\/wp\/v2\/categories?post=1454"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tutorials.leesonresearch.com\/tutorials\/wp-json\/wp\/v2\/tags?post=1454"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}