const{Fragment:e,jsx:n,jsxs:l}=arguments[0];function _createMdxContent(a){const r={a:"a",blockquote:"blockquote",code:"code",em:"em",figure:"figure",h2:"h2",h3:"h3",li:"li",ol:"ol",p:"p",pre:"pre",span:"span",strong:"strong",ul:"ul",...a.components};return l(e,{children:[l(r.blockquote,{children:["\n",n(r.p,{children:"This guide is for Gatsby Version 2."}),"\n"]}),"\n",n(r.p,{children:"##Table of Contents"}),"\n",l(r.ol,{children:["\n",l(r.li,{children:["\n",n(r.p,{children:n(r.a,{href:"#installing-and-setting-up-gatsby",children:"Installing and Setting Up Gatsby"})}),"\n"]}),"\n",l(r.li,{children:["\n",n(r.p,{children:n(r.a,{href:"#creating-the-layout-page",children:"Creating the Layout Page"})}),"\n"]}),"\n",l(r.li,{children:["\n",n(r.p,{children:n(r.a,{href:"#using-graphiql-to-view-and-build-queries",children:"Using GraphiQL to View and Build Queries"})}),"\n"]}),"\n",l(r.li,{children:["\n",n(r.p,{children:n(r.a,{href:"#graphql-queries",children:"GraphQL Queries"})}),"\n",l(r.p,{children:["a. ",n(r.a,{href:"#page-query",children:"Page Query"})]}),"\n",l(r.p,{children:["b. ",n(r.a,{href:"#static-query",children:"Static Query"})]}),"\n"]}),"\n",l(r.li,{children:["\n",n(r.p,{children:n(r.a,{href:"#formatting-markdown-files",children:"Formatting Markdown Files"})}),"\n"]}),"\n",l(r.li,{children:["\n",n(r.p,{children:n(r.a,{href:"#creating-a-list-of-markdown-files",children:"Creating A List of Markdown Files"})}),"\n"]}),"\n",l(r.li,{children:["\n",n(r.p,{children:n(r.a,{href:"#filtering-and-sorting-markdown-files",children:"Filtering and Sorting Markdown Files"})}),"\n",l(r.p,{children:["a. ",n(r.a,{href:"#sorting",children:"Sorting"})]}),"\n",l(r.p,{children:["b. ",n(r.a,{href:"#date-formatting",children:"Date Formatting"})]}),"\n",l(r.p,{children:["c. ",n(r.a,{href:"#filtering",children:"Filtering"})]}),"\n"]}),"\n",l(r.li,{children:["\n",n(r.p,{children:n(r.a,{href:"#creating-pages-programmatically",children:"Creating Pages Programmatically"})}),"\n"]}),"\n",l(r.li,{children:["\n",n(r.p,{children:n(r.a,{href:"#creating-tags",children:"Creating Tags"})}),"\n"]}),"\n",l(r.li,{children:["\n",n(r.p,{children:n(r.a,{href:"#simple-pagination",children:"Simple Pagination"})}),"\n"]}),"\n",l(r.li,{children:["\n",n(r.p,{children:n(r.a,{href:"#using-images",children:"Using Images"})}),"\n",l(r.p,{children:["a. ",n(r.a,{href:"#javascript-import",children:"JavaScript Import"})]}),"\n",l(r.p,{children:["b. ",n(r.a,{href:"#images-through-gatsby-plugins",children:"Images Through Gatsby Plugins"})]}),"\n"]}),"\n",l(r.li,{children:["\n",n(r.p,{children:n(r.a,{href:"#styling",children:"Styling"})}),"\n",l(r.p,{children:["a. ",n(r.a,{href:"#emotion",children:"Emotion"})]}),"\n",l(r.p,{children:["b. ",n(r.a,{href:"#themeprovider-injectglobal-and-passing-props",children:"ThemeProvider, injectGlobal, and passing prop"})]}),"\n",l(r.p,{children:["c. ",n(r.a,{href:"#other-options---styled-jsx-sass",children:"Other Options - Styled JSX, Sass"})]}),"\n",l(r.p,{children:["d. ",n(r.a,{href:"#typography",children:"Typography"})]}),"\n"]}),"\n",l(r.li,{children:["\n",n(r.p,{children:n(r.a,{href:"#seo-adding-manifest-sitemap-offline-support",children:"SEO, Adding Manifest, Sitemap, Offline Support"})}),"\n",l(r.p,{children:["a. ",n(r.a,{href:"#seo-file",children:"SEO File"})]}),"\n"]}),"\n",l(r.li,{children:["\n",n(r.p,{children:n(r.a,{href:"#cleaning-up",children:"Cleaning Up"})}),"\n"]}),"\n",l(r.li,{children:["\n",n(r.p,{children:n(r.a,{href:"#deploying",children:"Deploying"})}),"\n"]}),"\n",l(r.li,{children:["\n",n(r.p,{children:n(r.a,{href:"#conclusion",children:"Conclusion"})}),"\n"]}),"\n"]}),"\n",n(r.h2,{id:"introduction",children:n(r.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#introduction",children:"Introduction"})}),"\n",l(r.p,{children:[n(r.a,{href:"https://gatsbyjs.org",children:"Gatsby"})," is ",n(r.em,{children:"technically"})," a Static Site Generator (SSG) which allows you to build incredibly fast websites using React. I say technically because you aren't truly limited to static, client side rendered (CSR) sites. Gatsby is more of a hybrid, allowing you to use dynamic content, connect to a Content Management System (CMS), utilize server side rendering (SSR) and more. In this guide, we're going to focus on just the static site part. Also, Gatsby uses ",n(r.a,{href:"https://graphql.org",children:"GraphQL"})," which will be covered in this guide."]}),"\n",n(r.p,{children:"If you follow along you'll be able to go from an empty folder to a fully functioning Gatsby site, while understanding how it all works under the hood."}),"\n",n(r.h2,{id:"installing-and-setting-up-gatsby",children:n(r.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#installing-and-setting-up-gatsby",children:"Installing and Setting Up Gatsby"})}),"\n",l(r.p,{children:["I recommend starting with an empty file and following along to get the most out of this guide. But, if you just want the completed project, it can be found in the ",n(r.a,{href:"https://github.com/justinformentin/gatsby-v2-tutorial-starter",children:"repository's master branch."})]}),"\n",n(r.p,{children:"Gatsby has an a huge amount of incredibly useful plugins. The plugins can be broken down into three main categories: transformer, functional, and source."}),"\n",l(r.p,{children:[n(r.strong,{children:"Transformer plugins"})," take data that isn't usable in its current form, such as markdown or json, and transforms it into a format that can be queried against with GraphQL. We will be using ",n(r.code,{children:"gatsby-transformer-remark"})," to transform Markdown files into HTML."]}),"\n",l(r.p,{children:[n(r.strong,{children:"Functional plugins"})," either implement functionality, such as manifest generation or offline support, or they extend Gatsby functionality, like adding Typescript support. One functional plugin we'll be using is ",n(r.code,{children:"gatsby-plugin-catch-links"}),", which intercepts local links and replaces the link behavior with Gatsby's Link. This avoids having the browser refresh the page and as a result, allowing for page changes without reload."]}),"\n",l(r.p,{children:[n(r.strong,{children:"Source plugins"})," create ",n(r.code,{children:"nodes"})," which is the center of Gatsby's data system, and transform data into a usable format. We'll be using ",n(r.code,{children:"gatsby-source-filesystem"})," which loads files of off the disk allowing the transformer plugins to transform the data."]}),"\n",l(r.p,{children:["To start, install the dependencies with ",n(r.code,{children:"npm i react react-dom gatsby gatsby-source-filesystem gatsby-transformer-remark gatsby-plugin-catch-links"}),"."]}),"\n",l(r.p,{children:["Next create the ",n(r.code,{children:"gatsby-config.js"})," file and enter the site metadata. Make sure the file is in the root of the project, not in /src."]}),"\n",n(r.figure,{"data-rehype-pretty-code-figure":"",children:n(r.pre,{style:{backgroundColor:"#24292e",color:"#e1e4e8"},tabIndex:"0","data-language":"jsx","data-theme":"github-dark",children:l(r.code,{"data-language":"jsx","data-theme":"github-dark",style:{display:"grid"},children:[n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#6A737D"},children:"// gatsby-config.js"})}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#79B8FF"},children:"module"}),n(r.span,{style:{color:"#E1E4E8"},children:"."}),n(r.span,{style:{color:"#79B8FF"},children:"exports"}),n(r.span,{style:{color:"#F97583"},children:" ="}),n(r.span,{style:{color:"#E1E4E8"},children:" {"})]}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#E1E4E8"},children:" siteMetadata: {"})}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#E1E4E8"},children:" title: Gatsby Tutorial Site"}),n(r.span,{style:{color:"#9ECBFF"},children:"'"}),n(r.span,{style:{color:"#FDAEB7",fontStyle:"italic"},children:","})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#E1E4E8"},children:" description: Welcome to your brand "}),n(r.span,{style:{color:"#F97583"},children:"new"}),n(r.span,{style:{color:"#E1E4E8"},children:" Gatsby "}),n(r.span,{style:{color:"#79B8FF"},children:"V2"}),n(r.span,{style:{color:"#E1E4E8"},children:" Website."}),n(r.span,{style:{color:"#9ECBFF"},children:"'"}),n(r.span,{style:{color:"#FDAEB7",fontStyle:"italic"},children:","})]}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#E1E4E8"},children:" },"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#E1E4E8"},children:"};"})})]})})}),"\n",n(r.h2,{id:"creating-the-layout-page",children:n(r.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#creating-the-layout-page",children:"Creating the Layout Page"})}),"\n",l(r.p,{children:["Let's create a layout component. It will include the features that we want rendered on all pages, such as the header, the footer, etc. Create the folder ",n(r.code,{children:"layouts"})," and in it ",n(r.code,{children:"index.jsx"}),". We need to pass the {children} so that whatever we put in our components gets rendered down the line."]}),"\n",n(r.figure,{"data-rehype-pretty-code-figure":"",children:n(r.pre,{style:{backgroundColor:"#24292e",color:"#e1e4e8"},tabIndex:"0","data-language":"jsx","data-theme":"github-dark",children:l(r.code,{"data-language":"jsx","data-theme":"github-dark",style:{display:"grid"},children:[n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#6A737D"},children:"// src/layouts/index.jsx"})}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#F97583"},children:"import"}),n(r.span,{style:{color:"#E1E4E8"},children:" React "}),n(r.span,{style:{color:"#F97583"},children:"from"}),n(r.span,{style:{color:"#9ECBFF"},children:" 'react'"}),n(r.span,{style:{color:"#E1E4E8"},children:";"})]}),"\n",n(r.span,{"data-line":"",children:" "}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#F97583"},children:"export"}),n(r.span,{style:{color:"#F97583"},children:" default"}),n(r.span,{style:{color:"#E1E4E8"},children:" ({ "}),n(r.span,{style:{color:"#FFAB70"},children:"children"}),n(r.span,{style:{color:"#E1E4E8"},children:" }) "}),n(r.span,{style:{color:"#F97583"},children:"=>"}),n(r.span,{style:{color:"#E1E4E8"},children:" ("})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#E1E4E8"},children:" <"}),n(r.span,{style:{color:"#85E89D"},children:"div"}),n(r.span,{style:{color:"#E1E4E8"},children:">"})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#E1E4E8"},children:" <"}),n(r.span,{style:{color:"#85E89D"},children:"h3"}),n(r.span,{style:{color:"#E1E4E8"},children:">Gatsby Tutorial"})]}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#E1E4E8"},children:" {children}"})}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#E1E4E8"},children:" "})]}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#E1E4E8"},children:");"})})]})})}),"\n",n(r.p,{children:"Now let's fill out the main page with a basic export."}),"\n",n(r.figure,{"data-rehype-pretty-code-figure":"",children:n(r.pre,{style:{backgroundColor:"#24292e",color:"#e1e4e8"},tabIndex:"0","data-language":"jsx","data-theme":"github-dark",children:l(r.code,{"data-language":"jsx","data-theme":"github-dark",style:{display:"grid"},children:[n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#6A737D"},children:"// src/pages/index.js"})}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#F97583"},children:"import"}),n(r.span,{style:{color:"#E1E4E8"},children:" React "}),n(r.span,{style:{color:"#F97583"},children:"from"}),n(r.span,{style:{color:"#9ECBFF"},children:" 'react'"}),n(r.span,{style:{color:"#E1E4E8"},children:";"})]}),"\n",n(r.span,{"data-line":"",children:" "}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#F97583"},children:"export"}),n(r.span,{style:{color:"#F97583"},children:" default"}),n(r.span,{style:{color:"#E1E4E8"},children:" () "}),n(r.span,{style:{color:"#F97583"},children:"=>"}),n(r.span,{style:{color:"#E1E4E8"},children:" ("})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#E1E4E8"},children:" <"}),n(r.span,{style:{color:"#85E89D"},children:"div"}),n(r.span,{style:{color:"#E1E4E8"},children:">"})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#E1E4E8"},children:" <"}),n(r.span,{style:{color:"#85E89D"},children:"h1"}),n(r.span,{style:{color:"#E1E4E8"},children:">Gatsby Tutorial Site Home Page"})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#E1E4E8"},children:" <"}),n(r.span,{style:{color:"#85E89D"},children:"p"}),n(r.span,{style:{color:"#E1E4E8"},children:">This is the home page."})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#E1E4E8"},children:" "})]}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#E1E4E8"},children:");"})})]})})}),"\n",n(r.p,{children:"And finally we'll make an about page."}),"\n",n(r.figure,{"data-rehype-pretty-code-figure":"",children:n(r.pre,{style:{backgroundColor:"#24292e",color:"#e1e4e8"},tabIndex:"0","data-language":"jsx","data-theme":"github-dark",children:l(r.code,{"data-language":"jsx","data-theme":"github-dark",style:{display:"grid"},children:[n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#6A737D"},children:"//src/pages/about.jsx"})}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#F97583"},children:"import"}),n(r.span,{style:{color:"#E1E4E8"},children:" React "}),n(r.span,{style:{color:"#F97583"},children:"from"}),n(r.span,{style:{color:"#9ECBFF"},children:" 'react'"}),n(r.span,{style:{color:"#E1E4E8"},children:";"})]}),"\n",n(r.span,{"data-line":"",children:" "}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#F97583"},children:"export"}),n(r.span,{style:{color:"#F97583"},children:" default"}),n(r.span,{style:{color:"#E1E4E8"},children:" () "}),n(r.span,{style:{color:"#F97583"},children:"=>"}),n(r.span,{style:{color:"#E1E4E8"},children:" ("})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#E1E4E8"},children:" <"}),n(r.span,{style:{color:"#85E89D"},children:"div"}),n(r.span,{style:{color:"#E1E4E8"},children:">"})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#E1E4E8"},children:" <"}),n(r.span,{style:{color:"#85E89D"},children:"h1"}),n(r.span,{style:{color:"#E1E4E8"},children:">About"})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#E1E4E8"},children:" <"}),n(r.span,{style:{color:"#85E89D"},children:"p"}),n(r.span,{style:{color:"#E1E4E8"},children:">This is the about page."})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#E1E4E8"},children:" "})]}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#E1E4E8"},children:");"})})]})})}),"\n",l(r.p,{children:["Here's a really cool feature of Gatsby. Routing is done using ",n(r.code,{children:"@reach/router"})," under the hood. Keeping things simple, all we have to do is import ",n(r.code,{children:"Link"})," from Gatsby and use the Link component with the desired path. Let's go into the Layout component and do that now."]}),"\n",n(r.figure,{"data-rehype-pretty-code-figure":"",children:n(r.pre,{style:{backgroundColor:"#24292e",color:"#e1e4e8"},tabIndex:"0","data-language":"jsx","data-theme":"github-dark",children:l(r.code,{"data-language":"jsx","data-theme":"github-dark",style:{display:"grid"},children:[n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#6A737D"},children:"// layouts/index.jsx"})}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#F97583"},children:"import"}),n(r.span,{style:{color:"#E1E4E8"},children:" React "}),n(r.span,{style:{color:"#F97583"},children:"from"}),n(r.span,{style:{color:"#9ECBFF"},children:" 'react'"}),n(r.span,{style:{color:"#E1E4E8"},children:";"})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#F97583"},children:"import"}),n(r.span,{style:{color:"#E1E4E8"},children:" { Link } "}),n(r.span,{style:{color:"#F97583"},children:"from"}),n(r.span,{style:{color:"#9ECBFF"},children:" 'gatsby'"}),n(r.span,{style:{color:"#E1E4E8"},children:";"})]}),"\n",n(r.span,{"data-line":"",children:" "}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#F97583"},children:"export"}),n(r.span,{style:{color:"#F97583"},children:" default"}),n(r.span,{style:{color:"#E1E4E8"},children:" ({ "}),n(r.span,{style:{color:"#FFAB70"},children:"children"}),n(r.span,{style:{color:"#E1E4E8"},children:" }) "}),n(r.span,{style:{color:"#F97583"},children:"=>"}),n(r.span,{style:{color:"#E1E4E8"},children:" ("})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#E1E4E8"},children:" <"}),n(r.span,{style:{color:"#85E89D"},children:"div"}),n(r.span,{style:{color:"#E1E4E8"},children:">"})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#E1E4E8"},children:" <"}),n(r.span,{style:{color:"#79B8FF"},children:"Link"}),n(r.span,{style:{color:"#B392F0"},children:" to"}),n(r.span,{style:{color:"#F97583"},children:"="}),n(r.span,{style:{color:"#E1E4E8"},children:"{"}),n(r.span,{style:{color:"#9ECBFF"},children:"'/'"}),n(r.span,{style:{color:"#E1E4E8"},children:"}>"})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#E1E4E8"},children:" <"}),n(r.span,{style:{color:"#85E89D"},children:"h3"}),n(r.span,{style:{color:"#E1E4E8"},children:">Gatsby Tutorial"})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#E1E4E8"},children:" "})]}),"\n",n(r.span,{"data-line":"",children:" "}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#E1E4E8"},children:" <"}),n(r.span,{style:{color:"#79B8FF"},children:"Link"}),n(r.span,{style:{color:"#B392F0"},children:" to"}),n(r.span,{style:{color:"#F97583"},children:"="}),n(r.span,{style:{color:"#E1E4E8"},children:"{"}),n(r.span,{style:{color:"#9ECBFF"},children:"'/about'"}),n(r.span,{style:{color:"#E1E4E8"},children:"}>About"})]}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#E1E4E8"},children:" {children}"})}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#E1E4E8"},children:" "})]}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#E1E4E8"},children:");"})})]})})}),"\n",n(r.h2,{id:"using-graphiql-to-view-and-build-queries",children:n(r.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#using-graphiql-to-view-and-build-queries",children:"Using GraphiQL to View and Build Queries"})}),"\n",l(r.p,{children:["Gatsby uses ",n(r.a,{href:"https://graphql.org",children:"GraphQL"}),", which is a ",n(r.strong,{children:"Q"}),"uerying ",n(r.strong,{children:"L"}),"anguage that allows access data data through simple declarative expressions. One major benefit of GraphQL is that it eliminates a lot of bloat. It allows you to be specific and receive only the data you need. We can take a look at all the queries that are available by using a tool called GraphiQL. We can access it by starting the dev server with ",n(r.code,{children:"gatsby develop"}),", and then opening ",n(r.a,{href:"localhost:8000/___graphql",children:"localhost:8000/___graphql"}),"."]}),"\n",l(r.p,{children:["Now that we have GraphiQL open in the browser, open up the Documentation Explorer and look through the schema and see what queries we can make. Click on the ",n(r.code,{children:"QueryType"})," and we see a big list of eveything available. Since we've already entered the site metadata, let's see how to query it. Look at the ",n(r.code,{children:"site"})," query and we see that the first key that's listed is ",n(r.code,{children:"siteMetadata"}),". If we enter that query and click run:"]}),"\n",n(r.figure,{"data-rehype-pretty-code-figure":"",children:n(r.pre,{style:{backgroundColor:"#24292e",color:"#e1e4e8"},tabIndex:"0","data-language":"js","data-theme":"github-dark",children:l(r.code,{"data-language":"js","data-theme":"github-dark",style:{display:"grid"},children:[n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#E1E4E8"},children:"{"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#E1E4E8"},children:" site {"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#E1E4E8"},children:" siteMetadata"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#E1E4E8"},children:" }"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#E1E4E8"},children:"}"})})]})})}),"\n",n(r.p,{children:"We'll see the output:"}),"\n",n(r.figure,{"data-rehype-pretty-code-figure":"",children:n(r.pre,{style:{backgroundColor:"#24292e",color:"#e1e4e8"},tabIndex:"0","data-language":"js","data-theme":"github-dark",children:l(r.code,{"data-language":"js","data-theme":"github-dark",style:{display:"grid"},children:[n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#E1E4E8"},children:"{"})}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#9ECBFF"},children:' "data"'}),n(r.span,{style:{color:"#E1E4E8"},children:": {"})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#9ECBFF"},children:' "site"'}),n(r.span,{style:{color:"#E1E4E8"},children:": {"})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#9ECBFF"},children:' "siteMetadata"'}),n(r.span,{style:{color:"#E1E4E8"},children:": {"})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#9ECBFF"},children:' "title"'}),n(r.span,{style:{color:"#E1E4E8"},children:": "}),n(r.span,{style:{color:"#9ECBFF"},children:'"Gatsby Tutorial Site"'}),n(r.span,{style:{color:"#E1E4E8"},children:","})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#9ECBFF"},children:' "description"'}),n(r.span,{style:{color:"#E1E4E8"},children:": "}),n(r.span,{style:{color:"#9ECBFF"},children:'"Welcome to your brand new Gatsby V2 Website."'}),n(r.span,{style:{color:"#E1E4E8"},children:","})]}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#E1E4E8"},children:" }"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#E1E4E8"},children:" }"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#E1E4E8"},children:" }"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#E1E4E8"},children:"}"})})]})})}),"\n",l(r.p,{children:["We see ",n(r.code,{children:"title"})," and ",n(r.code,{children:"description"}),". These will update if we make changes to the ",n(r.code,{children:"gatsby-config.js"})," file. Let's try that. We'll add ",n(r.code,{children:'author: "Justin"'}),' under the "description." Let\'s save it, restart the dev server, and reload the GraphiQL explorer. And author is now a field.']}),"\n",n(r.h2,{id:"graphql-query",children:n(r.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#graphql-query",children:"GraphQL Query"})}),"\n",l(r.p,{children:["Sticking to React's paradigm of ",n(r.strong,{children:"reusable components"}),", we have a chance to reuse a bit of data. Notice how in both the index and the about page have similar titles? When building sites, there will be plenty of instances where being able to reuse data is ideal, avoiding having to type the same thing over and over again."]}),"\n",l(r.p,{children:["Also, what if we wanted to change the title, or any other data in the future? We'd have to go through every page and manually change it. The more complex your site becomes, the more \"going back and changing stuff\" becomes a burden. Let's make this as pain free as possible by using GraphQL. We'll have our title come from one single location, the ",n(r.code,{children:"gatsby-config.js"})," we've already written."]}),"\n",l(r.p,{children:["To query it, we have two options as of Gatsby v2, ",n(r.code,{children:"page query"})," and ",n(r.code,{children:"StaticQuery"}),". StaticQuery can be used in any page or component, but variables can't be passed to them, hence the \"static\" name. Page queries on the other hand, can only be used in pages, but you're allowed to pass query variables to them."]}),"\n",n(r.h3,{id:"page-query",children:n(r.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#page-query",children:"Page Query"})}),"\n",n(r.p,{children:"First we'll use the page query. Since we've already looked at the GraphiQL explorer, we know what our query should look like."}),"\n",n(r.figure,{"data-rehype-pretty-code-figure":"",children:n(r.pre,{style:{backgroundColor:"#24292e",color:"#e1e4e8"},tabIndex:"0","data-language":"jsx","data-theme":"github-dark",children:l(r.code,{"data-language":"jsx","data-theme":"github-dark",style:{display:"grid"},children:[n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#6A737D"},children:"// src/pages/about.jsx"})}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#F97583"},children:"import"}),n(r.span,{style:{color:"#E1E4E8"},children:" React "}),n(r.span,{style:{color:"#F97583"},children:"from"}),n(r.span,{style:{color:"#9ECBFF"},children:" 'react'"}),n(r.span,{style:{color:"#E1E4E8"},children:";"})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#F97583"},children:"import"}),n(r.span,{style:{color:"#E1E4E8"},children:" { graphql } "}),n(r.span,{style:{color:"#F97583"},children:"from"}),n(r.span,{style:{color:"#9ECBFF"},children:" 'gatsby'"}),n(r.span,{style:{color:"#E1E4E8"},children:";"})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#F97583"},children:"import"}),n(r.span,{style:{color:"#E1E4E8"},children:" Layout "}),n(r.span,{style:{color:"#F97583"},children:"from"}),n(r.span,{style:{color:"#9ECBFF"},children:" '../layouts'"}),n(r.span,{style:{color:"#E1E4E8"},children:";"})]}),"\n",n(r.span,{"data-line":"",children:" "}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#F97583"},children:"export"}),n(r.span,{style:{color:"#F97583"},children:" default"}),n(r.span,{style:{color:"#E1E4E8"},children:" ({ "}),n(r.span,{style:{color:"#FFAB70"},children:"data"}),n(r.span,{style:{color:"#E1E4E8"},children:" }) "}),n(r.span,{style:{color:"#F97583"},children:"=>"}),n(r.span,{style:{color:"#E1E4E8"},children:" ("})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#E1E4E8"},children:" <"}),n(r.span,{style:{color:"#79B8FF"},children:"Layout"}),n(r.span,{style:{color:"#E1E4E8"},children:">"})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#E1E4E8"},children:" <"}),n(r.span,{style:{color:"#85E89D"},children:"h1"}),n(r.span,{style:{color:"#E1E4E8"},children:">{data.site.siteMetadata.title} About Page"})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#E1E4E8"},children:" <"}),n(r.span,{style:{color:"#85E89D"},children:"p"}),n(r.span,{style:{color:"#E1E4E8"},children:">This is the about page."})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#E1E4E8"},children:" "})]}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#E1E4E8"},children:");"})}),"\n",n(r.span,{"data-line":"",children:" "}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#F97583"},children:"export"}),n(r.span,{style:{color:"#F97583"},children:" const"}),n(r.span,{style:{color:"#79B8FF"},children:" query"}),n(r.span,{style:{color:"#F97583"},children:" ="}),n(r.span,{style:{color:"#B392F0"},children:" graphql"}),n(r.span,{style:{color:"#9ECBFF"},children:"`"})]}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#9ECBFF"},children:" query AboutQuery {"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#9ECBFF"},children:" site {"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#9ECBFF"},children:" siteMetadata {"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#9ECBFF"},children:" title"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#9ECBFF"},children:" }"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#9ECBFF"},children:" }"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#9ECBFF"},children:" }"})}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#9ECBFF"},children:"`"}),n(r.span,{style:{color:"#E1E4E8"},children:";"})]})]})})}),"\n",n(r.p,{children:"And if we check the about page, the title is right there."}),"\n",n(r.h3,{id:"static-query",children:n(r.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#static-query",children:"Static Query"})}),"\n",l(r.p,{children:["Let's test out StaticQuery now. Since it can be used on non-page components, let's add it to the Layout. First we need to import StaticQuery and grapqhl, and return the "," component."]}),"\n",l(r.p,{children:["It accepts two props, ",n(r.code,{children:"query"})," and ",n(r.code,{children:"render"}),". The query prop takes a\r\na ",n(r.a,{href:"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals",children:"tagged template literal"}),", which allow embedded expressions. The render prop takes a function with ",n(r.code,{children:"data"})," as a single argument. The ",n(r.code,{children:"data"})," is the ",n(r.code,{children:"query"})," results."]}),"\n",n(r.figure,{"data-rehype-pretty-code-figure":"",children:n(r.pre,{style:{backgroundColor:"#24292e",color:"#e1e4e8"},tabIndex:"0","data-language":"jsx","data-theme":"github-dark",children:l(r.code,{"data-language":"jsx","data-theme":"github-dark",style:{display:"grid"},children:[n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#6A737D"},children:"// src/layouts/index.jsx"})}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#F97583"},children:"import"}),n(r.span,{style:{color:"#E1E4E8"},children:" React "}),n(r.span,{style:{color:"#F97583"},children:"from"}),n(r.span,{style:{color:"#9ECBFF"},children:" 'react'"}),n(r.span,{style:{color:"#E1E4E8"},children:";"})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#F97583"},children:"import"}),n(r.span,{style:{color:"#E1E4E8"},children:" { graphql, StaticQuery, Link } "}),n(r.span,{style:{color:"#F97583"},children:"from"}),n(r.span,{style:{color:"#9ECBFF"},children:" 'gatsby'"}),n(r.span,{style:{color:"#E1E4E8"},children:";"})]}),"\n",n(r.span,{"data-line":"",children:" "}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#F97583"},children:"export"}),n(r.span,{style:{color:"#F97583"},children:" default"}),n(r.span,{style:{color:"#E1E4E8"},children:" ({ "}),n(r.span,{style:{color:"#FFAB70"},children:"children"}),n(r.span,{style:{color:"#E1E4E8"},children:" }) "}),n(r.span,{style:{color:"#F97583"},children:"=>"}),n(r.span,{style:{color:"#E1E4E8"},children:" ("})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#E1E4E8"},children:" <"}),n(r.span,{style:{color:"#79B8FF"},children:"StaticQuery"})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#B392F0"},children:" query"}),n(r.span,{style:{color:"#F97583"},children:"="}),n(r.span,{style:{color:"#E1E4E8"},children:"{"}),n(r.span,{style:{color:"#B392F0"},children:"graphql"}),n(r.span,{style:{color:"#9ECBFF"},children:"`"})]}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#9ECBFF"},children:" query {"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#9ECBFF"},children:" site {"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#9ECBFF"},children:" siteMetadata {"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#9ECBFF"},children:" title"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#9ECBFF"},children:" }"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#9ECBFF"},children:" }"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#9ECBFF"},children:" }"})}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#9ECBFF"},children:" `"}),n(r.span,{style:{color:"#E1E4E8"},children:"}"})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#B392F0"},children:" render"}),n(r.span,{style:{color:"#F97583"},children:"="}),n(r.span,{style:{color:"#E1E4E8"},children:"{("}),n(r.span,{style:{color:"#FFAB70"},children:"data"}),n(r.span,{style:{color:"#E1E4E8"},children:") "}),n(r.span,{style:{color:"#F97583"},children:"=>"}),n(r.span,{style:{color:"#E1E4E8"},children:" ("})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#E1E4E8"},children:" <"}),n(r.span,{style:{color:"#85E89D"},children:"div"}),n(r.span,{style:{color:"#E1E4E8"},children:">"})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#E1E4E8"},children:" <"}),n(r.span,{style:{color:"#79B8FF"},children:"Link"}),n(r.span,{style:{color:"#B392F0"},children:" to"}),n(r.span,{style:{color:"#F97583"},children:"="}),n(r.span,{style:{color:"#E1E4E8"},children:"{"}),n(r.span,{style:{color:"#9ECBFF"},children:"'/'"}),n(r.span,{style:{color:"#E1E4E8"},children:"}>"})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#E1E4E8"},children:" <"}),n(r.span,{style:{color:"#85E89D"},children:"h3"}),n(r.span,{style:{color:"#E1E4E8"},children:">{data.site.siteMetadata.title}"})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#E1E4E8"},children:" "})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#E1E4E8"},children:" <"}),n(r.span,{style:{color:"#79B8FF"},children:"Link"}),n(r.span,{style:{color:"#B392F0"},children:" to"}),n(r.span,{style:{color:"#F97583"},children:"="}),n(r.span,{style:{color:"#E1E4E8"},children:"{"}),n(r.span,{style:{color:"#9ECBFF"},children:"'/about'"}),n(r.span,{style:{color:"#E1E4E8"},children:"}>About"})]}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#E1E4E8"},children:" {children}"})}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#E1E4E8"},children:" "})]}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#E1E4E8"},children:" )}"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#E1E4E8"},children:" />"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#E1E4E8"},children:");"})})]})})}),"\n",n(r.h2,{id:"formatting-markdown-files",children:n(r.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#formatting-markdown-files",children:"Formatting Markdown Files"})}),"\n",l(r.p,{children:["Now we're going to go a little further in utilizing GraphQL and make some posts. We can keep our markdown files in a separate directory outside of /src. It makes it easier to look at and find files, especially when we start adding photos. Let's ",n(r.code,{children:"mkdir content/posts"}),' and then create a different folder for individual posts. With those made, make an index.md in each folder. Inside each index.md file, we\'ll create our post. The important part to take note of is the set of three dashes. That is the "frontmatter", and the contents of the block will be the data that we can pass into our pages and templates later on.']}),"\n",n(r.figure,{"data-rehype-pretty-code-figure":"",children:n(r.pre,{style:{backgroundColor:"#24292e",color:"#e1e4e8"},tabIndex:"0","data-language":"markdown","data-theme":"github-dark",children:l(r.code,{"data-language":"markdown","data-theme":"github-dark",style:{display:"grid"},children:[n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#79B8FF",fontWeight:"bold"},children:"---"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#E1E4E8"},children:"path: /post-one"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#E1E4E8"},children:"date: 2018-10-15'"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#E1E4E8"},children:"title: My First Post"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#E1E4E8"},children:"tags: ['gatsby', 'other']"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#79B8FF",fontWeight:"bold"},children:"---"})}),"\n",n(r.span,{"data-line":"",children:" "}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#E1E4E8"},children:"This is my first post using Gatbsy."})})]})})}),"\n",l(r.p,{children:["Now go back to the ",n(r.code,{children:"gatsy-config.js"})," file and add add the plugins we installed before."]}),"\n",n(r.figure,{"data-rehype-pretty-code-figure":"",children:n(r.pre,{style:{backgroundColor:"#24292e",color:"#e1e4e8"},tabIndex:"0","data-language":"js","data-theme":"github-dark",children:l(r.code,{"data-language":"js","data-theme":"github-dark",style:{display:"grid"},children:[n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#6A737D"},children:"// gatsby-config.js"})}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#79B8FF"},children:"module"}),n(r.span,{style:{color:"#E1E4E8"},children:"."}),n(r.span,{style:{color:"#79B8FF"},children:"exports"}),n(r.span,{style:{color:"#F97583"},children:" ="}),n(r.span,{style:{color:"#E1E4E8"},children:" {"})]}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#E1E4E8"},children:" siteMetadata: {"})}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#E1E4E8"},children:" title: Gatsby Tutorial Site"}),n(r.span,{style:{color:"#9ECBFF"},children:"'"}),n(r.span,{style:{color:"#FDAEB7",fontStyle:"italic"},children:","})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#E1E4E8"},children:" description: Welcome to your brand "}),n(r.span,{style:{color:"#F97583"},children:"new"}),n(r.span,{style:{color:"#E1E4E8"},children:" Gatsby "}),n(r.span,{style:{color:"#79B8FF"},children:"V2"}),n(r.span,{style:{color:"#E1E4E8"},children:" Website."}),n(r.span,{style:{color:"#9ECBFF"},children:"'"}),n(r.span,{style:{color:"#FDAEB7",fontStyle:"italic"},children:","})]}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#E1E4E8"},children:" },"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#E1E4E8"},children:" plugins: ["})}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#9ECBFF"},children:" 'gatsby-plugin-catch-links'"}),n(r.span,{style:{color:"#E1E4E8"},children:","})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#9ECBFF"},children:" 'gatsby-transformer-remark'"}),n(r.span,{style:{color:"#E1E4E8"},children:","})]}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#E1E4E8"},children:" {"})}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#E1E4E8"},children:" resolve: "}),n(r.span,{style:{color:"#9ECBFF"},children:"'gatsby-source-filesystem'"}),n(r.span,{style:{color:"#E1E4E8"},children:","})]}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#E1E4E8"},children:" options: {"})}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#E1E4E8"},children:" name: "}),n(r.span,{style:{color:"#9ECBFF"},children:"'posts'"}),n(r.span,{style:{color:"#E1E4E8"},children:","})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#E1E4E8"},children:" path: "}),n(r.span,{style:{color:"#9ECBFF"},children:"`${"}),n(r.span,{style:{color:"#E1E4E8"},children:"__dirname"}),n(r.span,{style:{color:"#9ECBFF"},children:"}/content/posts`"}),n(r.span,{style:{color:"#E1E4E8"},children:","})]}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#E1E4E8"},children:" },"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#E1E4E8"},children:" },"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#E1E4E8"},children:" ],"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#E1E4E8"},children:"};"})})]})})}),"\n",n(r.p,{children:'Make sure the "path:" is set to where your markdown files are located.'}),"\n",l(r.p,{children:["Let's go back to our GraphiQL explorer and see the newly added ",n(r.code,{children:"allMarkdownRemark"}),". Click on ",n(r.code,{children:"MarkdownRemarkConnection"})," and we'll see all of the fields. We see ",n(r.code,{children:"edges"}),", which are the filepaths. Click on the ",n(r.code,{children:"[MarkdownRemarkEdge]"})," next to the edge field and we'll see ",n(r.code,{children:"node"})," up at the top, which is each of our markdown files we created. Inside of node we see that frontmatter is a field, which is what encompasses what is in our markdown files."]}),"\n",n(r.figure,{"data-rehype-pretty-code-figure":"",children:n(r.pre,{style:{backgroundColor:"#24292e",color:"#e1e4e8"},tabIndex:"0","data-language":"js","data-theme":"github-dark",children:l(r.code,{"data-language":"js","data-theme":"github-dark",style:{display:"grid"},children:[n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#E1E4E8"},children:"{"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#E1E4E8"},children:" allMarkdownRemark {"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#E1E4E8"},children:" edges {"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#E1E4E8"},children:" node {"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#E1E4E8"},children:" frontmatter"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#E1E4E8"},children:" }"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#E1E4E8"},children:" }"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#E1E4E8"},children:" }"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#E1E4E8"},children:"}"})})]})})}),"\n",l(r.p,{children:["Run the query and see all that data that ",n(r.code,{children:"frontmatter"}),' has. We can get more specific and query a single field, such as the title, and get only that result. So we just made use of the transformer plugin, and we saw it "transform" the content onto our page. There are around 500 plugins at the time of writing this and we\'ll be using more to do various things later on.']}),"\n",n(r.h2,{id:"creating-a-list-of-markdown-files",children:n(r.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#creating-a-list-of-markdown-files",children:"Creating A List of Markdown Files"})}),"\n",n(r.p,{children:"Now let's make a list of our markdown files. We'll be using GraphQL to query our content and render it on a page. First, let's go back to our index page and import graphql and then write out the query. What we enter into our query will be exactly what data gets passing into the component."}),"\n",l(r.p,{children:["To pass the data into the component, we'll pass ",n(r.code,{children:"data"})," and destructure ",n(r.code,{children:"edges"})," as data.allMarkdownRemark, map over it to get the post fields, and then add each field that we entered in our query."]}),"\n",l(r.p,{children:["Let's keep the id, and with it we'll specify the key. Each child component as well as each element inside the child should have keys. React uses the keys to determine the identity of the rendered elements. This is important for minimizing DOM manipulation, leading to better performance. To learn more, start at the ",n(r.a,{href:"https://reactjs.org/docs/lists-and-keys.html",children:"Official React Docs about lists and keys"})," and go from there."]}),"\n",l(r.p,{children:["After that, just fill out the information that we queried. Side note: the field ",n(r.code,{children:"excerpt"})," lives on the ",n(r.code,{children:"node"}),", and takes two arguments - ",n(r.code,{children:"pruneLength"}),", an integer and ",n(r.code,{children:"truncate"}),", a boolean. We'll prune it and play with the length until it feels right."]}),"\n",n(r.figure,{"data-rehype-pretty-code-figure":"",children:n(r.pre,{style:{backgroundColor:"#24292e",color:"#e1e4e8"},tabIndex:"0","data-language":"jsx","data-theme":"github-dark",children:l(r.code,{"data-language":"jsx","data-theme":"github-dark",style:{display:"grid"},children:[n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#6A737D"},children:"// src/pages/index.js"})}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#F97583"},children:"import"}),n(r.span,{style:{color:"#E1E4E8"},children:" React "}),n(r.span,{style:{color:"#F97583"},children:"from"}),n(r.span,{style:{color:"#9ECBFF"},children:" 'react'"}),n(r.span,{style:{color:"#E1E4E8"},children:";"})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#F97583"},children:"import"}),n(r.span,{style:{color:"#E1E4E8"},children:" { graphql } "}),n(r.span,{style:{color:"#F97583"},children:"from"}),n(r.span,{style:{color:"#9ECBFF"},children:" 'gatsby'"}),n(r.span,{style:{color:"#E1E4E8"},children:";"})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#F97583"},children:"import"}),n(r.span,{style:{color:"#E1E4E8"},children:" Layout "}),n(r.span,{style:{color:"#F97583"},children:"from"}),n(r.span,{style:{color:"#9ECBFF"},children:" '../layouts'"}),n(r.span,{style:{color:"#E1E4E8"},children:";"})]}),"\n",n(r.span,{"data-line":"",children:" "}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#F97583"},children:"export"}),n(r.span,{style:{color:"#F97583"},children:" default"}),n(r.span,{style:{color:"#E1E4E8"},children:" ({ "}),n(r.span,{style:{color:"#FFAB70"},children:"data"}),n(r.span,{style:{color:"#E1E4E8"},children:" }) "}),n(r.span,{style:{color:"#F97583"},children:"=>"}),n(r.span,{style:{color:"#E1E4E8"},children:" {"})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#F97583"},children:" const"}),n(r.span,{style:{color:"#E1E4E8"},children:" { "}),n(r.span,{style:{color:"#79B8FF"},children:"edges"}),n(r.span,{style:{color:"#E1E4E8"},children:" } "}),n(r.span,{style:{color:"#F97583"},children:"="}),n(r.span,{style:{color:"#E1E4E8"},children:" data.allMarkdownRemark;"})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#F97583"},children:" return"}),n(r.span,{style:{color:"#E1E4E8"},children:" ("})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#E1E4E8"},children:" <"}),n(r.span,{style:{color:"#79B8FF"},children:"Layout"}),n(r.span,{style:{color:"#E1E4E8"},children:">"})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#E1E4E8"},children:" <"}),n(r.span,{style:{color:"#85E89D"},children:"h1"}),n(r.span,{style:{color:"#E1E4E8"},children:">Gatsby Tutorial Site Home Page"})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#E1E4E8"},children:" {edges."}),n(r.span,{style:{color:"#B392F0"},children:"map"}),n(r.span,{style:{color:"#E1E4E8"},children:"(({ "}),n(r.span,{style:{color:"#FFAB70"},children:"node"}),n(r.span,{style:{color:"#E1E4E8"},children:" }) "}),n(r.span,{style:{color:"#F97583"},children:"=>"}),n(r.span,{style:{color:"#E1E4E8"},children:" ("})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#E1E4E8"},children:" <"}),n(r.span,{style:{color:"#85E89D"},children:"div"}),n(r.span,{style:{color:"#B392F0"},children:" key"}),n(r.span,{style:{color:"#F97583"},children:"="}),n(r.span,{style:{color:"#E1E4E8"},children:"{node.id}>"})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#E1E4E8"},children:" <"}),n(r.span,{style:{color:"#85E89D"},children:"h3"}),n(r.span,{style:{color:"#E1E4E8"},children:">{node.frontmatter.title} "})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#E1E4E8"},children:" <"}),n(r.span,{style:{color:"#85E89D"},children:"p"}),n(r.span,{style:{color:"#E1E4E8"},children:">{node.frontmatter.date}"})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#E1E4E8"},children:" <"}),n(r.span,{style:{color:"#85E89D"},children:"p"}),n(r.span,{style:{color:"#E1E4E8"},children:">{node.excerpt}"})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#E1E4E8"},children:" "})]}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#E1E4E8"},children:" ))}"})}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#E1E4E8"},children:" "})]}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#E1E4E8"},children:" );"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#E1E4E8"},children:"};"})}),"\n",n(r.span,{"data-line":"",children:" "}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#F97583"},children:"export"}),n(r.span,{style:{color:"#F97583"},children:" const"}),n(r.span,{style:{color:"#79B8FF"},children:" query"}),n(r.span,{style:{color:"#F97583"},children:" ="}),n(r.span,{style:{color:"#B392F0"},children:" graphql"}),n(r.span,{style:{color:"#9ECBFF"},children:"`"})]}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#9ECBFF"},children:" query {"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#9ECBFF"},children:" allMarkdownRemark {"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#9ECBFF"},children:" edges {"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#9ECBFF"},children:" node {"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#9ECBFF"},children:" id"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#9ECBFF"},children:" excerpt(pruneLength: 100)"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#9ECBFF"},children:" frontmatter {"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#9ECBFF"},children:" title"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#9ECBFF"},children:" date"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#9ECBFF"},children:" }"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#9ECBFF"},children:" }"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#9ECBFF"},children:" }"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#9ECBFF"},children:" }"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#9ECBFF"},children:" }"})}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#9ECBFF"},children:"`"}),n(r.span,{style:{color:"#E1E4E8"},children:";"})]})]})})}),"\n",n(r.p,{children:"The list of our posts should now be on the home page."}),"\n",n(r.h2,{id:"filtering-and-sorting-markdown-files",children:n(r.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#filtering-and-sorting-markdown-files",children:"Filtering and Sorting Markdown Files"})}),"\n",n(r.p,{children:"Now that we have a list of our posts, let's organize them."}),"\n",n(r.h3,{id:"sorting",children:n(r.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#sorting",children:"Sorting"})}),"\n",l(r.p,{children:["Let's first make sure that the newest post is always on top. Go back to our GraphiQL explorer and look at allMarkdownRemark, we'll see that it can take some arguments. Click on ",n(r.code,{children:"sort"}),", and we see both ",n(r.code,{children:"fields"})," and ",n(r.code,{children:"order"}),". Checking ",n(r.code,{children:"order"}),", we see ASC and DESC for ascending and descending. Clicking on ",n(r.code,{children:"fields"})," we see a whole list of options. It makes sense to sort by ",n(r.code,{children:"frontmatter___date"})," so let's add that to our query."]}),"\n",n(r.h3,{id:"date-formatting",children:n(r.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#date-formatting",children:"Date Formatting"})}),"\n",l(r.p,{children:["Go to back to our ",n(r.code,{children:"allMarkdownRemark"}),", click on ",n(r.code,{children:"frontmatter"}),", and we'll see that ",n(r.code,{children:"date"})," has some options as well. We'll format it using ",n(r.code,{children:"formatString"}),"."]}),"\n",n(r.figure,{"data-rehype-pretty-code-figure":"",children:n(r.pre,{style:{backgroundColor:"#24292e",color:"#e1e4e8"},tabIndex:"0","data-language":"jsx","data-theme":"github-dark",children:l(r.code,{"data-language":"jsx","data-theme":"github-dark",style:{display:"grid"},children:[n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#6A737D"},children:"// src/pages/index.js"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#F97583"},children:"..."})}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#F97583"},children:"export"}),n(r.span,{style:{color:"#F97583"},children:" const"}),n(r.span,{style:{color:"#79B8FF"},children:" query"}),n(r.span,{style:{color:"#F97583"},children:" ="}),n(r.span,{style:{color:"#B392F0"},children:" graphql"}),n(r.span,{style:{color:"#9ECBFF"},children:"`"})]}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#9ECBFF"},children:" query {"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#9ECBFF"},children:" allMarkdownRemark ("})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#9ECBFF"},children:" sort: {order: DESC, fields: [frontmatter___date]}"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#9ECBFF"},children:" ) {"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#9ECBFF"},children:" edges {"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#9ECBFF"},children:" node {"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#9ECBFF"},children:" id"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#9ECBFF"},children:" frontmatter {"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#9ECBFF"},children:" title"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#9ECBFF"},children:" excerpt"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#9ECBFF"},children:' date(formatString: "MM.DD.YYYY")'})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#9ECBFF"},children:" }"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#9ECBFF"},children:" }"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#9ECBFF"},children:" }"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#9ECBFF"},children:" }"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#9ECBFF"},children:" }"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#9ECBFF"},children:"`"})})]})})}),"\n",n(r.h3,{id:"filtering",children:n(r.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#filtering",children:"Filtering"})}),"\n",l(r.p,{children:["To show only certain posts depending on certain criteria, we can use ",n(r.code,{children:"filter"}),". A common filter to display posts is by saying if a post is a draft or not. So let's go into our markdown files and add the field ",n(r.code,{children:"draft"}),"."]}),"\n",n(r.figure,{"data-rehype-pretty-code-figure":"",children:n(r.pre,{style:{backgroundColor:"#24292e",color:"#e1e4e8"},tabIndex:"0","data-language":"md","data-theme":"github-dark",children:l(r.code,{"data-language":"md","data-theme":"github-dark",style:{display:"grid"},children:[n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#79B8FF",fontWeight:"bold"},children:"---"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#E1E4E8"},children:"title: My First Post"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#E1E4E8"},children:"path: /post-one"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#E1E4E8"},children:"date: 2018-10-15'"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#E1E4E8"},children:"draft: false"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#E1E4E8"},children:"tags: ['gatsby', 'other']"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#79B8FF",fontWeight:"bold"},children:"---"})}),"\n",n(r.span,{"data-line":"",children:" "}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#E1E4E8"},children:"This is my first post using Gatbsy."})})]})})}),"\n",l(r.p,{children:["We'll do the same in the other posts, but make the second post true and the third post false. Save and restart the server, and let's go back to the GraphiQL browser and check out ",n(r.code,{children:"frontmatter"})," and we see ",n(r.code,{children:"draft"})," has been added. Let's make a query to see what gets returned. We'll add ",n(r.code,{children:"filter"})," onto its own line, and then say if the ",n(r.code,{children:"draft"})," field from ",n(r.code,{children:"frontmatter"})," is false, show the posts on the page."]}),"\n",n(r.figure,{"data-rehype-pretty-code-figure":"",children:n(r.pre,{style:{backgroundColor:"#24292e",color:"#e1e4e8"},tabIndex:"0","data-language":"js","data-theme":"github-dark",children:l(r.code,{"data-language":"js","data-theme":"github-dark",style:{display:"grid"},children:[n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#E1E4E8"},children:"{"})}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#B392F0"},children:" allMarkdownRemark"}),n(r.span,{style:{color:"#E1E4E8"},children:" ("})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#E1E4E8"},children:" filter: { frontmatter: { draft: { eq: "}),n(r.span,{style:{color:"#79B8FF"},children:"false"}),n(r.span,{style:{color:"#E1E4E8"},children:"} } }"})]}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#E1E4E8"},children:" ) {"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#E1E4E8"},children:" edges {"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#E1E4E8"},children:" node {"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#E1E4E8"},children:" frontmatter"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#E1E4E8"},children:" }"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#E1E4E8"},children:" }"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#E1E4E8"},children:" }"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#E1E4E8"},children:"}"})})]})})}),"\n",l(r.p,{children:["Run the query and we see only post one and three were returned, the two markdown files with ",n(r.code,{children:"draft: false"}),". Let's add the filter into our our index file so the list only shows those two posts instead of all three."]}),"\n",n(r.figure,{"data-rehype-pretty-code-figure":"",children:n(r.pre,{style:{backgroundColor:"#24292e",color:"#e1e4e8"},tabIndex:"0","data-language":"jsx","data-theme":"github-dark",children:l(r.code,{"data-language":"jsx","data-theme":"github-dark",style:{display:"grid"},children:[n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#6A737D"},children:"//src/pages/index.js"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#F97583"},children:"..."})}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#F97583"},children:"export"}),n(r.span,{style:{color:"#F97583"},children:" const"}),n(r.span,{style:{color:"#79B8FF"},children:" query"}),n(r.span,{style:{color:"#F97583"},children:" ="}),n(r.span,{style:{color:"#B392F0"},children:" graphql"}),n(r.span,{style:{color:"#9ECBFF"},children:"`"})]}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#9ECBFF"},children:" query {"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#9ECBFF"},children:" allMarkdownRemark ("})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#9ECBFF"},children:" filter: { frontmatter: { draft: { eq: false} } }"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#9ECBFF"},children:" sort: {order: DESC, fields: [frontmatter___date]}"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#9ECBFF"},children:" ) {"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#9ECBFF"},children:"..."})})]})})}),"\n",n(r.h2,{id:"creating-pages-programmatically",children:n(r.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#creating-pages-programmatically",children:"Creating Pages Programmatically"})}),"\n",l(r.p,{children:["Now we want our list of posts to link to the actual posts. Let's try that by wrapping the title of our posts on the home page with ",n(r.code,{children:"Link"}),". Import ",n(r.code,{children:"Link"})," from gastby, and then add the frontmatter.path as the Link path."]}),"\n",n(r.figure,{"data-rehype-pretty-code-figure":"",children:n(r.pre,{style:{backgroundColor:"#24292e",color:"#e1e4e8"},tabIndex:"0","data-language":"jsx","data-theme":"github-dark",children:l(r.code,{"data-language":"jsx","data-theme":"github-dark",style:{display:"grid"},children:[n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#6A737D"},children:"// src/pages/index.js"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#F97583"},children:"..."})}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#E1E4E8"},children:" <"}),n(r.span,{style:{color:"#79B8FF"},children:"Link"}),n(r.span,{style:{color:"#B392F0"},children:" to"}),n(r.span,{style:{color:"#F97583"},children:"="}),n(r.span,{style:{color:"#E1E4E8"},children:"{node.frontmatter.path}>"})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#E1E4E8"},children:" <"}),n(r.span,{style:{color:"#85E89D"},children:"h3"}),n(r.span,{style:{color:"#E1E4E8"},children:">{node.frontmatter.title}"})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#E1E4E8"},children:" "})]}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#F97583"},children:"..."})})]})})}),"\n",l(r.p,{children:["And now that we added , we need to add ",n(r.code,{children:"path"})," to our query as well."]}),"\n",n(r.figure,{"data-rehype-pretty-code-figure":"",children:n(r.pre,{style:{backgroundColor:"#24292e",color:"#e1e4e8"},tabIndex:"0","data-language":"jsx","data-theme":"github-dark",children:l(r.code,{"data-language":"jsx","data-theme":"github-dark",style:{display:"grid"},children:[n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#6A737D"},children:"// src/pages/index.js"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#F97583"},children:"..."})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#E1E4E8"},children:" frontmatter {"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#E1E4E8"},children:" path"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#E1E4E8"},children:" title"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#E1E4E8"},children:" excerpt"})}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#B392F0"},children:" date"}),n(r.span,{style:{color:"#E1E4E8"},children:"(formatString: "}),n(r.span,{style:{color:"#9ECBFF"},children:'"MM.DD.YYYY"'}),n(r.span,{style:{color:"#E1E4E8"},children:")"})]}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#E1E4E8"},children:" }"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#F97583"},children:"..."})})]})})}),"\n",l(r.p,{children:["And if we try it, we'll see it just brings us to the 404 page. That's because we haven't created the post pages yet. Gatsby will automatically create a page from any JS or JSX file inside the ",n(r.code,{children:"/src/pages"})," directory, but if we want to create pages from each of our ",n(r.code,{children:"/content/post"})," markdown files, a few things need to be done first. Create ",n(r.code,{children:"gatsby-node.js"})," in the root, create the directory ",n(r.code,{children:"/src/templates"})," and then create ",n(r.code,{children:"posts.jsx"})," in the templates folder."]}),"\n",l(r.p,{children:["First let's just make a super basic component in ",n(r.code,{children:"post.jsx"}),"."]}),"\n",n(r.figure,{"data-rehype-pretty-code-figure":"",children:n(r.pre,{style:{backgroundColor:"#24292e",color:"#e1e4e8"},tabIndex:"0","data-language":"jsx","data-theme":"github-dark",children:l(r.code,{"data-language":"jsx","data-theme":"github-dark",style:{display:"grid"},children:[n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#6A737D"},children:"// src/templates/post.jsx"})}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#F97583"},children:"import"}),n(r.span,{style:{color:"#E1E4E8"},children:" React "}),n(r.span,{style:{color:"#F97583"},children:"from"}),n(r.span,{style:{color:"#9ECBFF"},children:" 'react'"}),n(r.span,{style:{color:"#E1E4E8"},children:";"})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#F97583"},children:"import"}),n(r.span,{style:{color:"#E1E4E8"},children:" { graphql } "}),n(r.span,{style:{color:"#F97583"},children:"from"}),n(r.span,{style:{color:"#9ECBFF"},children:" 'gatsby'"}),n(r.span,{style:{color:"#E1E4E8"},children:";"})]}),"\n",n(r.span,{"data-line":"",children:" "}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#F97583"},children:"const"}),n(r.span,{style:{color:"#B392F0"},children:" Post"}),n(r.span,{style:{color:"#F97583"},children:" ="}),n(r.span,{style:{color:"#E1E4E8"},children:" ("}),n(r.span,{style:{color:"#FFAB70"},children:"props"}),n(r.span,{style:{color:"#E1E4E8"},children:") "}),n(r.span,{style:{color:"#F97583"},children:"=>"}),n(r.span,{style:{color:"#E1E4E8"},children:" {"})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#F97583"},children:" return"}),n(r.span,{style:{color:"#E1E4E8"},children:" <"}),n(r.span,{style:{color:"#85E89D"},children:"div"}),n(r.span,{style:{color:"#E1E4E8"},children:">Post;"})]}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#E1E4E8"},children:"};"})}),"\n",n(r.span,{"data-line":"",children:" "}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#F97583"},children:"export"}),n(r.span,{style:{color:"#F97583"},children:" default"}),n(r.span,{style:{color:"#E1E4E8"},children:" Post;"})]})]})})}),"\n",l(r.p,{children:["Next, in ",n(r.code,{children:"gatsby-node.js"})," we're going to make use of ",n(r.code,{children:"createPages"}),", one of Gatsby's APIs. We need to create the createPages export function, and then destructure actions, which is where ",n(r.code,{children:"createPages"})," is located, and the function then returns a new promise since file creation is async by nature."]}),"\n",l(r.p,{children:["To create the page, it needs to be able to access the post template we just made. Create a variable and use ",n(r.code,{children:"path.resolve"})," with the path to the template. Then call our graphql query to resolve the promise starting with ",n(r.code,{children:"allMarkdownRemark"})," and including the file ",n(r.code,{children:"path"}),"."]}),"\n",l(r.p,{children:["Now let's pass the result into a function with a then, write a quick reject, and the result will be ",n(r.code,{children:"result.data.allMarkdownRemark.edges"}),", an object that matches the query above. Since edges are the path to our files, we'll add a forEach on the edges to extract our file's path from node.frontmatter."]}),"\n",l(r.p,{children:["Let's destructure that and add it to the posts variable. Destructuring the ",n(r.code,{children:"node"}),", we'll set the path as ",n(r.code,{children:"node.frontmatter.path"}),", and then call the ",n(r.code,{children:"createPage"})," action. The first parameter should be the path, the second parameter is the component we want to render, which is the post template, and the last object is the context which will be passed into our post template as a prop."]}),"\n",l(r.p,{children:["We want the post template to have the file path, so we'll name it pathSlug because path is reserved. As a side note, ",n(r.code,{children:"context"})," is optional as it has defaults built in."]}),"\n",n(r.p,{children:"To summarize what's going on, we made a query that finds our files and gets the path from frontmatter. We cycle through them and call createPage which will use our post template to create a new page for each of our markdown files."}),"\n",n(r.figure,{"data-rehype-pretty-code-figure":"",children:n(r.pre,{style:{backgroundColor:"#24292e",color:"#e1e4e8"},tabIndex:"0","data-language":"js","data-theme":"github-dark",children:l(r.code,{"data-language":"js","data-theme":"github-dark",style:{display:"grid"},children:[n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#6A737D"},children:"// gatsby-node.js"})}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#F97583"},children:"const"}),n(r.span,{style:{color:"#79B8FF"},children:" path"}),n(r.span,{style:{color:"#F97583"},children:" ="}),n(r.span,{style:{color:"#B392F0"},children:" require"}),n(r.span,{style:{color:"#E1E4E8"},children:"("}),n(r.span,{style:{color:"#9ECBFF"},children:"'path'"}),n(r.span,{style:{color:"#E1E4E8"},children:");"})]}),"\n",n(r.span,{"data-line":"",children:" "}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#79B8FF"},children:"exports"}),n(r.span,{style:{color:"#E1E4E8"},children:"."}),n(r.span,{style:{color:"#B392F0"},children:"createPages"}),n(r.span,{style:{color:"#F97583"},children:" ="}),n(r.span,{style:{color:"#E1E4E8"},children:" ({ "}),n(r.span,{style:{color:"#FFAB70"},children:"graphql"}),n(r.span,{style:{color:"#E1E4E8"},children:", "}),n(r.span,{style:{color:"#FFAB70"},children:"actions"}),n(r.span,{style:{color:"#E1E4E8"},children:" }) "}),n(r.span,{style:{color:"#F97583"},children:"=>"}),n(r.span,{style:{color:"#E1E4E8"},children:" {"})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#F97583"},children:" const"}),n(r.span,{style:{color:"#E1E4E8"},children:" { "}),n(r.span,{style:{color:"#79B8FF"},children:"createPage"}),n(r.span,{style:{color:"#E1E4E8"},children:" } "}),n(r.span,{style:{color:"#F97583"},children:"="}),n(r.span,{style:{color:"#E1E4E8"},children:" actions;"})]}),"\n",n(r.span,{"data-line":"",children:" "}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#F97583"},children:" return"}),n(r.span,{style:{color:"#F97583"},children:" new"}),n(r.span,{style:{color:"#79B8FF"},children:" Promise"}),n(r.span,{style:{color:"#E1E4E8"},children:"(("}),n(r.span,{style:{color:"#FFAB70"},children:"resolve"}),n(r.span,{style:{color:"#E1E4E8"},children:", "}),n(r.span,{style:{color:"#FFAB70"},children:"reject"}),n(r.span,{style:{color:"#E1E4E8"},children:") "}),n(r.span,{style:{color:"#F97583"},children:"=>"}),n(r.span,{style:{color:"#E1E4E8"},children:" {"})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#F97583"},children:" const"}),n(r.span,{style:{color:"#79B8FF"},children:" postTemplate"}),n(r.span,{style:{color:"#F97583"},children:" ="}),n(r.span,{style:{color:"#E1E4E8"},children:" path."}),n(r.span,{style:{color:"#B392F0"},children:"resolve"}),n(r.span,{style:{color:"#E1E4E8"},children:"("}),n(r.span,{style:{color:"#9ECBFF"},children:"'src/templates/post.jsx'"}),n(r.span,{style:{color:"#E1E4E8"},children:");"})]}),"\n",n(r.span,{"data-line":"",children:" "}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#B392F0"},children:" resolve"}),n(r.span,{style:{color:"#E1E4E8"},children:"("})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#B392F0"},children:" graphql"}),n(r.span,{style:{color:"#E1E4E8"},children:"("})]}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#9ECBFF"},children:" `"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#9ECBFF"},children:" query {"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#9ECBFF"},children:" allMarkdownRemark {"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#9ECBFF"},children:" edges {"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#9ECBFF"},children:" node {"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#9ECBFF"},children:" frontmatter {"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#9ECBFF"},children:" path"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#9ECBFF"},children:" title"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#9ECBFF"},children:" }"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#9ECBFF"},children:" }"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#9ECBFF"},children:" }"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#9ECBFF"},children:" }"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#9ECBFF"},children:" }"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#9ECBFF"},children:" `"})}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#E1E4E8"},children:" )."}),n(r.span,{style:{color:"#B392F0"},children:"then"}),n(r.span,{style:{color:"#E1E4E8"},children:"(("}),n(r.span,{style:{color:"#FFAB70"},children:"result"}),n(r.span,{style:{color:"#E1E4E8"},children:") "}),n(r.span,{style:{color:"#F97583"},children:"=>"}),n(r.span,{style:{color:"#E1E4E8"},children:" {"})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#F97583"},children:" if"}),n(r.span,{style:{color:"#E1E4E8"},children:" (result.errors) {"})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#F97583"},children:" return"}),n(r.span,{style:{color:"#79B8FF"},children:" Promise"}),n(r.span,{style:{color:"#E1E4E8"},children:"."}),n(r.span,{style:{color:"#B392F0"},children:"reject"}),n(r.span,{style:{color:"#E1E4E8"},children:"(result.errors);"})]}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#E1E4E8"},children:" }"})}),"\n",n(r.span,{"data-line":"",children:" "}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#F97583"},children:" const"}),n(r.span,{style:{color:"#79B8FF"},children:" posts"}),n(r.span,{style:{color:"#F97583"},children:" ="}),n(r.span,{style:{color:"#E1E4E8"},children:" result.data.allMarkdownRemark.edges;"})]}),"\n",n(r.span,{"data-line":"",children:" "}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#E1E4E8"},children:" posts."}),n(r.span,{style:{color:"#B392F0"},children:"forEach"}),n(r.span,{style:{color:"#E1E4E8"},children:"(({ "}),n(r.span,{style:{color:"#FFAB70"},children:"node"}),n(r.span,{style:{color:"#E1E4E8"},children:" }) "}),n(r.span,{style:{color:"#F97583"},children:"=>"}),n(r.span,{style:{color:"#E1E4E8"},children:" {"})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#F97583"},children:" const"}),n(r.span,{style:{color:"#79B8FF"},children:" path"}),n(r.span,{style:{color:"#F97583"},children:" ="}),n(r.span,{style:{color:"#E1E4E8"},children:" node.frontmatter.path;"})]}),"\n",n(r.span,{"data-line":"",children:" "}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#B392F0"},children:" createPage"}),n(r.span,{style:{color:"#E1E4E8"},children:"({"})]}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#E1E4E8"},children:" path,"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#E1E4E8"},children:" component: postTemplate,"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#E1E4E8"},children:" context: {"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#E1E4E8"},children:" pathSlug: path,"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#E1E4E8"},children:" },"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#E1E4E8"},children:" });"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#E1E4E8"},children:" });"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#E1E4E8"},children:" })"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#E1E4E8"},children:" );"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#E1E4E8"},children:" });"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#E1E4E8"},children:"};"})})]})})}),"\n",l(r.p,{children:["After restarting the server, let's go back to our post template and add a ",n(r.code,{children:"console.log"})," to see if our data made it through. In the dev tools, look at the console and all of the correct data for our post should be there."]}),"\n",l(r.p,{children:["We want to render all the content onto the page, so let's head back over to the post template and write a graphql query. To get the path, write a slug variable with the ",n(r.code,{children:"$pathSlug"})," that we added previously, and then make it a required String. Since we want only one markdown file, use markdownRemark instead of allMarkdownRemark."]}),"\n",n(r.p,{children:"Now we need to write a GraphQL query to search markdownRemark for the markdown files. Testing it out on the GraphiQL explorer, we can see what our options are."}),"\n",l(r.p,{children:["So let's see if we can pull in the data properly. The data gets passed as a prop from the query, so we'll try ",n(r.code,{children:"

{props.data.markdownRemark.frontmatter.title}

"})," and save it."]}),"\n",l(r.p,{children:["Now that we've confirmed it works properly, let's break up the props. Change the ",n(r.code,{children:"props"})," to data and since we'll be using ",n(r.code,{children:"data.markdownRemark"})," for all of our variables, we'll set ",n(r.code,{children:"const post = data.markdownRemark."})," Set the title as a variable ",n(r.code,{children:"const title = post.frontmatter.title"})," and the same for ",n(r.code,{children:"date"}),". To render the HTML, we're going to make use of React's ",n(r.code,{children:"dangerouslySetInnerHTML"})," API."]}),"\n",l(r.p,{children:["To do so, we need to define html. If we look in GraphiQL we'll see that html isn't in frontmatter, but just in markdownRemark. So we'll define the html variable as ",n(r.code,{children:"post.html"}),", and then pass in __html as an object with a value of html."]}),"\n",n(r.figure,{"data-rehype-pretty-code-figure":"",children:n(r.pre,{style:{backgroundColor:"#24292e",color:"#e1e4e8"},tabIndex:"0","data-language":"jsx","data-theme":"github-dark",children:l(r.code,{"data-language":"jsx","data-theme":"github-dark",style:{display:"grid"},children:[n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#6A737D"},children:"// src/templates/post.jsx"})}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#F97583"},children:"import"}),n(r.span,{style:{color:"#E1E4E8"},children:" { graphql } "}),n(r.span,{style:{color:"#F97583"},children:"from"}),n(r.span,{style:{color:"#9ECBFF"},children:" 'gatsby'"}),n(r.span,{style:{color:"#E1E4E8"},children:";"})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#F97583"},children:"import"}),n(r.span,{style:{color:"#E1E4E8"},children:" Layout "}),n(r.span,{style:{color:"#F97583"},children:"from"}),n(r.span,{style:{color:"#9ECBFF"},children:" '../layouts'"}),n(r.span,{style:{color:"#E1E4E8"},children:";"})]}),"\n",n(r.span,{"data-line":"",children:" "}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#F97583"},children:"const"}),n(r.span,{style:{color:"#B392F0"},children:" Post"}),n(r.span,{style:{color:"#F97583"},children:" ="}),n(r.span,{style:{color:"#E1E4E8"},children:" ({ "}),n(r.span,{style:{color:"#FFAB70"},children:"data"}),n(r.span,{style:{color:"#E1E4E8"},children:" }) "}),n(r.span,{style:{color:"#F97583"},children:"=>"}),n(r.span,{style:{color:"#E1E4E8"},children:" {"})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#F97583"},children:" const"}),n(r.span,{style:{color:"#79B8FF"},children:" post"}),n(r.span,{style:{color:"#F97583"},children:" ="}),n(r.span,{style:{color:"#E1E4E8"},children:" data.markdownRemark;"})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#F97583"},children:" const"}),n(r.span,{style:{color:"#79B8FF"},children:" title"}),n(r.span,{style:{color:"#F97583"},children:" ="}),n(r.span,{style:{color:"#E1E4E8"},children:" post.frontmatter.title;"})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#F97583"},children:" const"}),n(r.span,{style:{color:"#79B8FF"},children:" date"}),n(r.span,{style:{color:"#F97583"},children:" ="}),n(r.span,{style:{color:"#E1E4E8"},children:" post.frontmatter.date;"})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#F97583"},children:" const"}),n(r.span,{style:{color:"#79B8FF"},children:" html"}),n(r.span,{style:{color:"#F97583"},children:" ="}),n(r.span,{style:{color:"#E1E4E8"},children:" post.html;"})]}),"\n",n(r.span,{"data-line":"",children:" "}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#F97583"},children:" return"}),n(r.span,{style:{color:"#E1E4E8"},children:" ("})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#E1E4E8"},children:" <"}),n(r.span,{style:{color:"#79B8FF"},children:"Layout"}),n(r.span,{style:{color:"#E1E4E8"},children:">"})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#E1E4E8"},children:" <"}),n(r.span,{style:{color:"#85E89D"},children:"h1"}),n(r.span,{style:{color:"#E1E4E8"},children:">{title}"})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#E1E4E8"},children:" <"}),n(r.span,{style:{color:"#85E89D"},children:"p"}),n(r.span,{style:{color:"#E1E4E8"},children:">{date}"})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#E1E4E8"},children:" <"}),n(r.span,{style:{color:"#85E89D"},children:"div"}),n(r.span,{style:{color:"#B392F0"},children:" dangerouslySetInnerHTML"}),n(r.span,{style:{color:"#F97583"},children:"="}),n(r.span,{style:{color:"#E1E4E8"},children:"{{ __html: html }} />"})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#E1E4E8"},children:" "})]}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#E1E4E8"},children:" );"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#E1E4E8"},children:"};"})}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#F97583"},children:"export"}),n(r.span,{style:{color:"#F97583"},children:" const"}),n(r.span,{style:{color:"#79B8FF"},children:" query"}),n(r.span,{style:{color:"#F97583"},children:" ="}),n(r.span,{style:{color:"#B392F0"},children:" graphql"}),n(r.span,{style:{color:"#9ECBFF"},children:"`"})]}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#9ECBFF"},children:" query($pathSlug: String!) {"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#9ECBFF"},children:" markdownRemark(frontmatter: { path: { eq: $pathSlug } }) {"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#9ECBFF"},children:" html"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#9ECBFF"},children:" frontmatter {"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#9ECBFF"},children:" date"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#9ECBFF"},children:" title"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#9ECBFF"},children:" }"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#9ECBFF"},children:" }"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#9ECBFF"},children:" }"})}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#9ECBFF"},children:"`"}),n(r.span,{style:{color:"#E1E4E8"},children:";"})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#F97583"},children:"export"}),n(r.span,{style:{color:"#F97583"},children:" default"}),n(r.span,{style:{color:"#E1E4E8"},children:" Post;"})]})]})})}),"\n",n(r.h2,{id:"creating-tags",children:n(r.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#creating-tags",children:"Creating Tags"})}),"\n",l(r.p,{children:["Now let's add tags to the site so we can browse posts by the tag. First, make the ",n(r.code,{children:"tags.jsx"})," page, and the ",n(r.code,{children:"tag.jsx"})," template. We'll make it a very simple component that has some text just to test that it works for now."]}),"\n",n(r.figure,{"data-rehype-pretty-code-figure":"",children:n(r.pre,{style:{backgroundColor:"#24292e",color:"#e1e4e8"},tabIndex:"0","data-language":"jsx","data-theme":"github-dark",children:l(r.code,{"data-language":"jsx","data-theme":"github-dark",style:{display:"grid"},children:[n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#6A737D"},children:"// src/pages/tags.jsx & src/templates/tag.jsx"})}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#F97583"},children:"import"}),n(r.span,{style:{color:"#E1E4E8"},children:" React "}),n(r.span,{style:{color:"#F97583"},children:"from"}),n(r.span,{style:{color:"#9ECBFF"},children:" 'react'"}),n(r.span,{style:{color:"#E1E4E8"},children:";"})]}),"\n",n(r.span,{"data-line":"",children:" "}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#F97583"},children:"const"}),n(r.span,{style:{color:"#B392F0"},children:" Tags"}),n(r.span,{style:{color:"#F97583"},children:" ="}),n(r.span,{style:{color:"#E1E4E8"},children:" () "}),n(r.span,{style:{color:"#F97583"},children:"=>"}),n(r.span,{style:{color:"#E1E4E8"},children:" {"})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#F97583"},children:" return"}),n(r.span,{style:{color:"#E1E4E8"},children:" <"}),n(r.span,{style:{color:"#85E89D"},children:"div"}),n(r.span,{style:{color:"#E1E4E8"},children:">Tags Page Here;"})]}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#E1E4E8"},children:"};"})}),"\n",n(r.span,{"data-line":"",children:" "}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#F97583"},children:"export"}),n(r.span,{style:{color:"#F97583"},children:" default"}),n(r.span,{style:{color:"#E1E4E8"},children:" Tags;"})]})]})})}),"\n",n(r.p,{children:"First let's think about what the tag actually is and how it's working within our project. At a basic level, it's not a page or a post or a template really. We're just creating all of that out of a single word or line of text inside our markdown files. They'll change when we add new posts with new tags, and if the same tag is used for mutliple posts, we don't want duplicates of the tag in a tag list."}),"\n",l(r.p,{children:["Moving back to ",n(r.code,{children:"gatsby-node.js"}),", we're going to want a variable for our template and page files, so we'll do the same path.resolve(/path/to/template) we did earlier, and add it under the existing ",n(r.code,{children:"postTemplate"})," within the Promise."]}),"\n",l(r.p,{children:["Next, instead of creating a single entity, we'll create an object that will dynamically create a key for each tag which will then hold an array for each post that contains that specific tag. So we'll do ",n(r.code,{children:"posts.forEach"})," to iterate over the array, and then destructure ",n(r.code,{children:"node"})," and write an if statement to check if there is ",n(r.em,{children:"not"})," a post with the tag as a key. We'll then set the ",n(r.code,{children:"\\[tag]"})," as an empty array and push the node. So now this object has each tag being represented by an array of nodes."]}),"\n",l(r.p,{children:["To create a list of all the tags, set tags equal to ",n(r.code,{children:"Object.keys"})," and then add a ",n(r.code,{children:"createPage"})," like we did earlier with our posts. We'll make the path be /tags, the component is tagPosts and to get a sorted list of tags, add ",n(r.code,{children:"tags.sort()"})," to the context."]}),"\n",n(r.figure,{"data-rehype-pretty-code-figure":"",children:n(r.pre,{style:{backgroundColor:"#24292e",color:"#e1e4e8"},tabIndex:"0","data-language":"js","data-theme":"github-dark",children:l(r.code,{"data-language":"js","data-theme":"github-dark",style:{display:"grid"},children:[n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#6A737D"},children:"// gatsby-node.js"})}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#F97583"},children:"const"}),n(r.span,{style:{color:"#79B8FF"},children:" path"}),n(r.span,{style:{color:"#F97583"},children:" ="}),n(r.span,{style:{color:"#B392F0"},children:" require"}),n(r.span,{style:{color:"#E1E4E8"},children:"("}),n(r.span,{style:{color:"#9ECBFF"},children:"'path'"}),n(r.span,{style:{color:"#E1E4E8"},children:");"})]}),"\n",n(r.span,{"data-line":"",children:" "}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#79B8FF"},children:"exports"}),n(r.span,{style:{color:"#E1E4E8"},children:"."}),n(r.span,{style:{color:"#B392F0"},children:"createPages"}),n(r.span,{style:{color:"#F97583"},children:" ="}),n(r.span,{style:{color:"#E1E4E8"},children:" ({ "}),n(r.span,{style:{color:"#FFAB70"},children:"graphql"}),n(r.span,{style:{color:"#E1E4E8"},children:", "}),n(r.span,{style:{color:"#FFAB70"},children:"actions"}),n(r.span,{style:{color:"#E1E4E8"},children:" }) "}),n(r.span,{style:{color:"#F97583"},children:"=>"}),n(r.span,{style:{color:"#E1E4E8"},children:" {"})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#F97583"},children:" const"}),n(r.span,{style:{color:"#E1E4E8"},children:" { "}),n(r.span,{style:{color:"#79B8FF"},children:"createPage"}),n(r.span,{style:{color:"#E1E4E8"},children:" } "}),n(r.span,{style:{color:"#F97583"},children:"="}),n(r.span,{style:{color:"#E1E4E8"},children:" actions;"})]}),"\n",n(r.span,{"data-line":"",children:" "}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#F97583"},children:" return"}),n(r.span,{style:{color:"#F97583"},children:" new"}),n(r.span,{style:{color:"#79B8FF"},children:" Promise"}),n(r.span,{style:{color:"#E1E4E8"},children:"(("}),n(r.span,{style:{color:"#FFAB70"},children:"resolve"}),n(r.span,{style:{color:"#E1E4E8"},children:", "}),n(r.span,{style:{color:"#FFAB70"},children:"reject"}),n(r.span,{style:{color:"#E1E4E8"},children:") "}),n(r.span,{style:{color:"#F97583"},children:"=>"}),n(r.span,{style:{color:"#E1E4E8"},children:" {"})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#F97583"},children:" const"}),n(r.span,{style:{color:"#79B8FF"},children:" postTemplate"}),n(r.span,{style:{color:"#F97583"},children:" ="}),n(r.span,{style:{color:"#E1E4E8"},children:" path."}),n(r.span,{style:{color:"#B392F0"},children:"resolve"}),n(r.span,{style:{color:"#E1E4E8"},children:"("}),n(r.span,{style:{color:"#9ECBFF"},children:"'src/templates/post.jsx'"}),n(r.span,{style:{color:"#E1E4E8"},children:");"})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#F97583"},children:" const"}),n(r.span,{style:{color:"#79B8FF"},children:" tagPage"}),n(r.span,{style:{color:"#F97583"},children:" ="}),n(r.span,{style:{color:"#E1E4E8"},children:" path."}),n(r.span,{style:{color:"#B392F0"},children:"resolve"}),n(r.span,{style:{color:"#E1E4E8"},children:"("}),n(r.span,{style:{color:"#9ECBFF"},children:"'src/pages/tags.jsx'"}),n(r.span,{style:{color:"#E1E4E8"},children:");"})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#F97583"},children:" const"}),n(r.span,{style:{color:"#79B8FF"},children:" tagPosts"}),n(r.span,{style:{color:"#F97583"},children:" ="}),n(r.span,{style:{color:"#E1E4E8"},children:" path."}),n(r.span,{style:{color:"#B392F0"},children:"resolve"}),n(r.span,{style:{color:"#E1E4E8"},children:"("}),n(r.span,{style:{color:"#9ECBFF"},children:"'src/templates/tag.jsx'"}),n(r.span,{style:{color:"#E1E4E8"},children:");"})]}),"\n",n(r.span,{"data-line":"",children:" "}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#B392F0"},children:" resolve"}),n(r.span,{style:{color:"#E1E4E8"},children:"("})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#B392F0"},children:" graphql"}),n(r.span,{style:{color:"#E1E4E8"},children:"("})]}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#9ECBFF"},children:" `"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#9ECBFF"},children:" query {"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#9ECBFF"},children:" allMarkdownRemark {"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#9ECBFF"},children:" edges {"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#9ECBFF"},children:" node {"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#9ECBFF"},children:" frontmatter {"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#9ECBFF"},children:" path"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#9ECBFF"},children:" title"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#9ECBFF"},children:" tags"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#9ECBFF"},children:" }"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#9ECBFF"},children:" }"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#9ECBFF"},children:" }"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#9ECBFF"},children:" }"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#9ECBFF"},children:" }"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#9ECBFF"},children:" `"})}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#E1E4E8"},children:" )."}),n(r.span,{style:{color:"#B392F0"},children:"then"}),n(r.span,{style:{color:"#E1E4E8"},children:"(("}),n(r.span,{style:{color:"#FFAB70"},children:"result"}),n(r.span,{style:{color:"#E1E4E8"},children:") "}),n(r.span,{style:{color:"#F97583"},children:"=>"}),n(r.span,{style:{color:"#E1E4E8"},children:" {"})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#F97583"},children:" if"}),n(r.span,{style:{color:"#E1E4E8"},children:" (result.errors) {"})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#F97583"},children:" return"}),n(r.span,{style:{color:"#79B8FF"},children:" Promise"}),n(r.span,{style:{color:"#E1E4E8"},children:"."}),n(r.span,{style:{color:"#B392F0"},children:"reject"}),n(r.span,{style:{color:"#E1E4E8"},children:"(result.errors);"})]}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#E1E4E8"},children:" }"})}),"\n",n(r.span,{"data-line":"",children:" "}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#F97583"},children:" const"}),n(r.span,{style:{color:"#79B8FF"},children:" posts"}),n(r.span,{style:{color:"#F97583"},children:" ="}),n(r.span,{style:{color:"#E1E4E8"},children:" result.data.allMarkdownRemark.edges;"})]}),"\n",n(r.span,{"data-line":"",children:" "}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#6A737D"},children:" // create tags page"})}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#F97583"},children:" const"}),n(r.span,{style:{color:"#79B8FF"},children:" postsByTag"}),n(r.span,{style:{color:"#F97583"},children:" ="}),n(r.span,{style:{color:"#E1E4E8"},children:" {};"})]}),"\n",n(r.span,{"data-line":"",children:" "}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#E1E4E8"},children:" posts."}),n(r.span,{style:{color:"#B392F0"},children:"forEach"}),n(r.span,{style:{color:"#E1E4E8"},children:"(({ "}),n(r.span,{style:{color:"#FFAB70"},children:"node"}),n(r.span,{style:{color:"#E1E4E8"},children:" }) "}),n(r.span,{style:{color:"#F97583"},children:"=>"}),n(r.span,{style:{color:"#E1E4E8"},children:" {"})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#F97583"},children:" if"}),n(r.span,{style:{color:"#E1E4E8"},children:" (node.frontmatter.tags) {"})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#E1E4E8"},children:" node.frontmatter.tags."}),n(r.span,{style:{color:"#B392F0"},children:"forEach"}),n(r.span,{style:{color:"#E1E4E8"},children:"(("}),n(r.span,{style:{color:"#FFAB70"},children:"tag"}),n(r.span,{style:{color:"#E1E4E8"},children:") "}),n(r.span,{style:{color:"#F97583"},children:"=>"}),n(r.span,{style:{color:"#E1E4E8"},children:" {"})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#F97583"},children:" if"}),n(r.span,{style:{color:"#E1E4E8"},children:" ("}),n(r.span,{style:{color:"#F97583"},children:"!"}),n(r.span,{style:{color:"#E1E4E8"},children:"postsByTag[tag]) {"})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#E1E4E8"},children:" postsByTag[tag] "}),n(r.span,{style:{color:"#F97583"},children:"="}),n(r.span,{style:{color:"#E1E4E8"},children:" [];"})]}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#E1E4E8"},children:" }"})}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#E1E4E8"},children:" postsByTag[tag]."}),n(r.span,{style:{color:"#B392F0"},children:"push"}),n(r.span,{style:{color:"#E1E4E8"},children:"(node);"})]}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#E1E4E8"},children:" });"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#E1E4E8"},children:" }"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#E1E4E8"},children:" });"})}),"\n",n(r.span,{"data-line":"",children:" "}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#F97583"},children:" const"}),n(r.span,{style:{color:"#79B8FF"},children:" tags"}),n(r.span,{style:{color:"#F97583"},children:" ="}),n(r.span,{style:{color:"#E1E4E8"},children:" Object."}),n(r.span,{style:{color:"#B392F0"},children:"keys"}),n(r.span,{style:{color:"#E1E4E8"},children:"(postsByTag);"})]}),"\n",n(r.span,{"data-line":"",children:" "}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#B392F0"},children:" createPage"}),n(r.span,{style:{color:"#E1E4E8"},children:"({"})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#E1E4E8"},children:" path: "}),n(r.span,{style:{color:"#F97583"},children:"/"}),n(r.span,{style:{color:"#E1E4E8"},children:"tags"}),n(r.span,{style:{color:"#9ECBFF"},children:"'"}),n(r.span,{style:{color:"#FDAEB7",fontStyle:"italic"},children:","})]}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#E1E4E8"},children:" component: tagPage,"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#E1E4E8"},children:" context: {"})}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#E1E4E8"},children:" tags: tags."}),n(r.span,{style:{color:"#B392F0"},children:"sort"}),n(r.span,{style:{color:"#E1E4E8"},children:"(),"})]}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#E1E4E8"},children:" },"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#E1E4E8"},children:" });"})}),"\n",n(r.span,{"data-line":"",children:" "}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#6A737D"},children:" //create posts"})}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#E1E4E8"},children:" posts."}),n(r.span,{style:{color:"#B392F0"},children:"forEach"}),n(r.span,{style:{color:"#E1E4E8"},children:"(({ "}),n(r.span,{style:{color:"#FFAB70"},children:"node"}),n(r.span,{style:{color:"#E1E4E8"},children:" }) "}),n(r.span,{style:{color:"#F97583"},children:"=>"}),n(r.span,{style:{color:"#E1E4E8"},children:" {"})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#F97583"},children:" const"}),n(r.span,{style:{color:"#79B8FF"},children:" path"}),n(r.span,{style:{color:"#F97583"},children:" ="}),n(r.span,{style:{color:"#E1E4E8"},children:" node.frontmatter.path;"})]}),"\n",n(r.span,{"data-line":"",children:" "}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#B392F0"},children:" createPage"}),n(r.span,{style:{color:"#E1E4E8"},children:"({"})]}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#E1E4E8"},children:" path,"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#E1E4E8"},children:" component: postTemplate,"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#E1E4E8"},children:" context: {"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#E1E4E8"},children:" pathSlug: path,"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#E1E4E8"},children:" },"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#E1E4E8"},children:" });"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#E1E4E8"},children:" });"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#E1E4E8"},children:" })"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#E1E4E8"},children:" );"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#E1E4E8"},children:" });"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#E1E4E8"},children:"};"})})]})})}),"\n",l(r.p,{children:["Now we want to actually pull in our tags on the tags page. Go to ",n(r.code,{children:"tags.jsx"})," and let's add ",n(r.code,{children:"pageContext"})," as props. To see what data is being passed, we'll add a ",n(r.code,{children:"console.log(pageContext)"}),". ",n(r.code,{children:"pageContext"})," is the data getting passed from ",n(r.code,{children:"gatbsy-node.js"}),", which in this case, is the ",n(r.code,{children:"tags"})," we added. Now checking the console we see the ",n(r.code,{children:"tags: Array"})," with all of our tags."]}),"\n",n(r.figure,{"data-rehype-pretty-code-figure":"",children:n(r.pre,{style:{backgroundColor:"#24292e",color:"#e1e4e8"},tabIndex:"0","data-language":"jsx","data-theme":"github-dark",children:l(r.code,{"data-language":"jsx","data-theme":"github-dark",style:{display:"grid"},children:[n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#6A737D"},children:"// src/pages/tags.jsx"})}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#F97583"},children:"import"}),n(r.span,{style:{color:"#E1E4E8"},children:" React "}),n(r.span,{style:{color:"#F97583"},children:"from"}),n(r.span,{style:{color:"#9ECBFF"},children:" 'react'"}),n(r.span,{style:{color:"#E1E4E8"},children:";"})]}),"\n",n(r.span,{"data-line":"",children:" "}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#F97583"},children:"const"}),n(r.span,{style:{color:"#B392F0"},children:" Tags"}),n(r.span,{style:{color:"#F97583"},children:" ="}),n(r.span,{style:{color:"#E1E4E8"},children:" ({ "}),n(r.span,{style:{color:"#FFAB70"},children:"pageContext"}),n(r.span,{style:{color:"#E1E4E8"},children:" }) "}),n(r.span,{style:{color:"#F97583"},children:"=>"}),n(r.span,{style:{color:"#E1E4E8"},children:" {"})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#E1E4E8"},children:" console."}),n(r.span,{style:{color:"#B392F0"},children:"log"}),n(r.span,{style:{color:"#E1E4E8"},children:"(pageContext);"})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#F97583"},children:" return"}),n(r.span,{style:{color:"#E1E4E8"},children:" <"}),n(r.span,{style:{color:"#85E89D"},children:"div"}),n(r.span,{style:{color:"#E1E4E8"},children:">Tags Page Here;"})]}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#E1E4E8"},children:"};"})}),"\n",n(r.span,{"data-line":"",children:" "}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#F97583"},children:"export"}),n(r.span,{style:{color:"#F97583"},children:" default"}),n(r.span,{style:{color:"#E1E4E8"},children:" Tags;"})]})]})})}),"\n",l(r.p,{children:["Now that the tags page is working we need to edit our tag template. This will be the page that loads when the individual tags are clicked and they will list the posts that contain that specific tag. First create the actual /tags/${tagName} pages in ",n(r.code,{children:"gatsby-node.js"}),". Next add a ",n(r.code,{children:"tag.forEach"})," to iterate each tag name. Then we need to use our list of nodes we made previously as ",n(r.code,{children:"[tagName]"}),". Now just call another createPage with the path being /tag/${tagName}, the component is the tagPosts, and then the context the posts and tagName."]}),"\n",n(r.figure,{"data-rehype-pretty-code-figure":"",children:n(r.pre,{style:{backgroundColor:"#24292e",color:"#e1e4e8"},tabIndex:"0","data-language":"jsx","data-theme":"github-dark",children:l(r.code,{"data-language":"jsx","data-theme":"github-dark",style:{display:"grid"},children:[n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#6A737D"},children:"// gatsby-node.js"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#F97583"},children:"..."})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#6A737D"},children:" //create tags"})}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#E1E4E8"},children:" tags."}),n(r.span,{style:{color:"#B392F0"},children:"forEach"}),n(r.span,{style:{color:"#E1E4E8"},children:"("}),n(r.span,{style:{color:"#FFAB70"},children:"tagName"}),n(r.span,{style:{color:"#F97583"},children:" =>"}),n(r.span,{style:{color:"#E1E4E8"},children:" {"})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#F97583"},children:" const"}),n(r.span,{style:{color:"#79B8FF"},children:" posts"}),n(r.span,{style:{color:"#F97583"},children:" ="}),n(r.span,{style:{color:"#E1E4E8"},children:" postsByTag[tagName];"})]}),"\n",n(r.span,{"data-line":"",children:" "}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#B392F0"},children:" createPage"}),n(r.span,{style:{color:"#E1E4E8"},children:"({"})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#E1E4E8"},children:" path: "}),n(r.span,{style:{color:"#9ECBFF"},children:"`/tags/${"}),n(r.span,{style:{color:"#E1E4E8"},children:"tagName"}),n(r.span,{style:{color:"#9ECBFF"},children:"}`"}),n(r.span,{style:{color:"#E1E4E8"},children:","})]}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#E1E4E8"},children:" component: tagPosts,"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#E1E4E8"},children:" context: {"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#E1E4E8"},children:" posts,"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#E1E4E8"},children:" tagName,"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#E1E4E8"},children:" },"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#E1E4E8"},children:" });"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#E1E4E8"},children:" });"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#F97583"},children:"..."})})]})})}),"\n",l(r.p,{children:["Now let's go into our tag.jsx template. Let's first check we did this correctly by console logging the pageContext again. Go to a tag page and see the correct tag in the posts array in our console. Then, destructure ",n(r.code,{children:"pageContext"})," into the ",n(r.code,{children:"posts"})," and ",n(r.code,{children:"tagName"}),". Next, add a title to show what the page is about with $ {tagName}. Now add a ",n(r.code,{children:"

"}),". As always, we should add a key to any list, so we'll add an index and set the key to the index. Then add a ",n(r.code,{children:""})," to ",n(r.code,{children:"post.frontmatter.path"})," with the ",n(r.code,{children:"post.frontmatter.title"}),". Save it, and we'll see a list of tags that link to individual tags."]}),"\n",n(r.figure,{"data-rehype-pretty-code-figure":"",children:n(r.pre,{style:{backgroundColor:"#24292e",color:"#e1e4e8"},tabIndex:"0","data-language":"jsx","data-theme":"github-dark",children:l(r.code,{"data-language":"jsx","data-theme":"github-dark",style:{display:"grid"},children:[n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#6A737D"},children:"// src/templates/tag.jsx"})}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#F97583"},children:"import"}),n(r.span,{style:{color:"#E1E4E8"},children:" React "}),n(r.span,{style:{color:"#F97583"},children:"from"}),n(r.span,{style:{color:"#9ECBFF"},children:" 'react'"}),n(r.span,{style:{color:"#E1E4E8"},children:";"})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#F97583"},children:"import"}),n(r.span,{style:{color:"#E1E4E8"},children:" { Link } "}),n(r.span,{style:{color:"#F97583"},children:"from"}),n(r.span,{style:{color:"#9ECBFF"},children:" 'gatsby'"}),n(r.span,{style:{color:"#E1E4E8"},children:";"})]}),"\n",n(r.span,{"data-line":"",children:" "}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#F97583"},children:"const"}),n(r.span,{style:{color:"#B392F0"},children:" Tag"}),n(r.span,{style:{color:"#F97583"},children:" ="}),n(r.span,{style:{color:"#E1E4E8"},children:" ({ "}),n(r.span,{style:{color:"#FFAB70"},children:"pageContext"}),n(r.span,{style:{color:"#E1E4E8"},children:" }) "}),n(r.span,{style:{color:"#F97583"},children:"=>"}),n(r.span,{style:{color:"#E1E4E8"},children:" {"})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#F97583"},children:" const"}),n(r.span,{style:{color:"#E1E4E8"},children:" { "}),n(r.span,{style:{color:"#79B8FF"},children:"posts"}),n(r.span,{style:{color:"#E1E4E8"},children:", "}),n(r.span,{style:{color:"#79B8FF"},children:"tagName"}),n(r.span,{style:{color:"#E1E4E8"},children:" } "}),n(r.span,{style:{color:"#F97583"},children:"="}),n(r.span,{style:{color:"#E1E4E8"},children:" pageContext;"})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#F97583"},children:" return"}),n(r.span,{style:{color:"#E1E4E8"},children:" ("})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#E1E4E8"},children:" <"}),n(r.span,{style:{color:"#85E89D"},children:"div"}),n(r.span,{style:{color:"#E1E4E8"},children:">"})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#E1E4E8"},children:" <"}),n(r.span,{style:{color:"#85E89D"},children:"div"}),n(r.span,{style:{color:"#E1E4E8"},children:">Posts about {"}),n(r.span,{style:{color:"#9ECBFF"},children:"`${"}),n(r.span,{style:{color:"#E1E4E8"},children:"tagName"}),n(r.span,{style:{color:"#9ECBFF"},children:"}`"}),n(r.span,{style:{color:"#E1E4E8"},children:"}"})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#E1E4E8"},children:" <"}),n(r.span,{style:{color:"#85E89D"},children:"div"}),n(r.span,{style:{color:"#E1E4E8"},children:">"})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#E1E4E8"},children:" <"}),n(r.span,{style:{color:"#85E89D"},children:"ul"}),n(r.span,{style:{color:"#E1E4E8"},children:">"})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#E1E4E8"},children:" {posts."}),n(r.span,{style:{color:"#B392F0"},children:"map"}),n(r.span,{style:{color:"#E1E4E8"},children:"(("}),n(r.span,{style:{color:"#FFAB70"},children:"post"}),n(r.span,{style:{color:"#E1E4E8"},children:", "}),n(r.span,{style:{color:"#FFAB70"},children:"index"}),n(r.span,{style:{color:"#E1E4E8"},children:") "}),n(r.span,{style:{color:"#F97583"},children:"=>"}),n(r.span,{style:{color:"#E1E4E8"},children:" {"})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#F97583"},children:" return"}),n(r.span,{style:{color:"#E1E4E8"},children:" ("})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#E1E4E8"},children:" <"}),n(r.span,{style:{color:"#85E89D"},children:"li"}),n(r.span,{style:{color:"#B392F0"},children:" key"}),n(r.span,{style:{color:"#F97583"},children:"="}),n(r.span,{style:{color:"#E1E4E8"},children:"{index}>"})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#E1E4E8"},children:" <"}),n(r.span,{style:{color:"#79B8FF"},children:"Link"}),n(r.span,{style:{color:"#B392F0"},children:" to"}),n(r.span,{style:{color:"#F97583"},children:"="}),n(r.span,{style:{color:"#E1E4E8"},children:"{post.frontmatter.path}>{post.frontmatter.title}"})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#E1E4E8"},children:" "})]}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#E1E4E8"},children:" );"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#E1E4E8"},children:" })}"})}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#E1E4E8"},children:" "})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#E1E4E8"},children:" "})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#E1E4E8"},children:" "})]}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#E1E4E8"},children:" );"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#E1E4E8"},children:"};"})}),"\n",n(r.span,{"data-line":"",children:" "}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#F97583"},children:"export"}),n(r.span,{style:{color:"#F97583"},children:" default"}),n(r.span,{style:{color:"#E1E4E8"},children:" Tag;"})]})]})})}),"\n",l(r.p,{children:["We'll now do something similar to our tag page. This time though, we'll only be destructuring tags from pageContext. Add a ul which will map over the tags, add a key again, and then add a ",n(r.code,{children:""})," to ",n(r.code,{children:"${/tags/${tagName}}"}),"."]}),"\n",n(r.figure,{"data-rehype-pretty-code-figure":"",children:n(r.pre,{style:{backgroundColor:"#24292e",color:"#e1e4e8"},tabIndex:"0","data-language":"jsx","data-theme":"github-dark",children:l(r.code,{"data-language":"jsx","data-theme":"github-dark",style:{display:"grid"},children:[n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#6A737D"},children:"// src/pages/tags.jsx"})}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#F97583"},children:"import"}),n(r.span,{style:{color:"#E1E4E8"},children:" React "}),n(r.span,{style:{color:"#F97583"},children:"from"}),n(r.span,{style:{color:"#9ECBFF"},children:" 'react'"}),n(r.span,{style:{color:"#E1E4E8"},children:";"})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#F97583"},children:"import"}),n(r.span,{style:{color:"#E1E4E8"},children:" { Link } "}),n(r.span,{style:{color:"#F97583"},children:"from"}),n(r.span,{style:{color:"#9ECBFF"},children:" 'gatsby'"}),n(r.span,{style:{color:"#E1E4E8"},children:";"})]}),"\n",n(r.span,{"data-line":"",children:" "}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#F97583"},children:"const"}),n(r.span,{style:{color:"#B392F0"},children:" Tags"}),n(r.span,{style:{color:"#F97583"},children:" ="}),n(r.span,{style:{color:"#E1E4E8"},children:" ({ "}),n(r.span,{style:{color:"#FFAB70"},children:"pageContext"}),n(r.span,{style:{color:"#E1E4E8"},children:" }) "}),n(r.span,{style:{color:"#F97583"},children:"=>"}),n(r.span,{style:{color:"#E1E4E8"},children:" {"})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#E1E4E8"},children:" console."}),n(r.span,{style:{color:"#B392F0"},children:"log"}),n(r.span,{style:{color:"#E1E4E8"},children:"(pageContext);"})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#F97583"},children:" const"}),n(r.span,{style:{color:"#E1E4E8"},children:" { "}),n(r.span,{style:{color:"#79B8FF"},children:"tags"}),n(r.span,{style:{color:"#E1E4E8"},children:" } "}),n(r.span,{style:{color:"#F97583"},children:"="}),n(r.span,{style:{color:"#E1E4E8"},children:" pageContext;"})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#F97583"},children:" return"}),n(r.span,{style:{color:"#E1E4E8"},children:" ("})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#E1E4E8"},children:" <"}),n(r.span,{style:{color:"#85E89D"},children:"div"}),n(r.span,{style:{color:"#E1E4E8"},children:">"})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#E1E4E8"},children:" <"}),n(r.span,{style:{color:"#85E89D"},children:"ul"}),n(r.span,{style:{color:"#E1E4E8"},children:">"})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#E1E4E8"},children:" {tags."}),n(r.span,{style:{color:"#B392F0"},children:"map"}),n(r.span,{style:{color:"#E1E4E8"},children:"(("}),n(r.span,{style:{color:"#FFAB70"},children:"tagName"}),n(r.span,{style:{color:"#E1E4E8"},children:", "}),n(r.span,{style:{color:"#FFAB70"},children:"index"}),n(r.span,{style:{color:"#E1E4E8"},children:") "}),n(r.span,{style:{color:"#F97583"},children:"=>"}),n(r.span,{style:{color:"#E1E4E8"},children:" {"})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#F97583"},children:" return"}),n(r.span,{style:{color:"#E1E4E8"},children:" ("})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#E1E4E8"},children:" <"}),n(r.span,{style:{color:"#85E89D"},children:"li"}),n(r.span,{style:{color:"#B392F0"},children:" key"}),n(r.span,{style:{color:"#F97583"},children:"="}),n(r.span,{style:{color:"#E1E4E8"},children:"{index}>"})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#E1E4E8"},children:" <"}),n(r.span,{style:{color:"#79B8FF"},children:"Link"}),n(r.span,{style:{color:"#B392F0"},children:" to"}),n(r.span,{style:{color:"#F97583"},children:"="}),n(r.span,{style:{color:"#E1E4E8"},children:"{"}),n(r.span,{style:{color:"#9ECBFF"},children:"`/tags/${"}),n(r.span,{style:{color:"#E1E4E8"},children:"tagName"}),n(r.span,{style:{color:"#9ECBFF"},children:"}`"}),n(r.span,{style:{color:"#E1E4E8"},children:"}>{tagName}"})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#E1E4E8"},children:" "})]}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#E1E4E8"},children:" );"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#E1E4E8"},children:" })}"})}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#E1E4E8"},children:" "})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#E1E4E8"},children:" "})]}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#E1E4E8"},children:" );"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#E1E4E8"},children:"};"})}),"\n",n(r.span,{"data-line":"",children:" "}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#F97583"},children:"export"}),n(r.span,{style:{color:"#F97583"},children:" default"}),n(r.span,{style:{color:"#E1E4E8"},children:" Tags;"})]})]})})}),"\n",l(r.p,{children:["Since we'll be using this tag list in multiple places, let's use this opportunity to break out the code and make a separate component that will be a block of tags that will be displayed on each post. Let's make an ",n(r.code,{children:"src/component"})," folder and make ",n(r.code,{children:"TagsBlock.jsx"}),". Import Link from gatsby and then pass in list. We're going to map over list with a Link that goes to ",n(r.code,{children:"/tags/${tag}"}),". And that's it."]}),"\n",n(r.figure,{"data-rehype-pretty-code-figure":"",children:n(r.pre,{style:{backgroundColor:"#24292e",color:"#e1e4e8"},tabIndex:"0","data-language":"jsx","data-theme":"github-dark",children:l(r.code,{"data-language":"jsx","data-theme":"github-dark",style:{display:"grid"},children:[n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#6A737D"},children:"// src/components/TagsBlock.jsx"})}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#F97583"},children:"import"}),n(r.span,{style:{color:"#E1E4E8"},children:" React "}),n(r.span,{style:{color:"#F97583"},children:"from"}),n(r.span,{style:{color:"#9ECBFF"},children:" 'react'"}),n(r.span,{style:{color:"#E1E4E8"},children:";"})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#F97583"},children:"import"}),n(r.span,{style:{color:"#E1E4E8"},children:" { Link } "}),n(r.span,{style:{color:"#F97583"},children:"from"}),n(r.span,{style:{color:"#9ECBFF"},children:" 'gatsby'"}),n(r.span,{style:{color:"#E1E4E8"},children:";"})]}),"\n",n(r.span,{"data-line":"",children:" "}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#F97583"},children:"const"}),n(r.span,{style:{color:"#B392F0"},children:" TagsBlock"}),n(r.span,{style:{color:"#F97583"},children:" ="}),n(r.span,{style:{color:"#E1E4E8"},children:" ({ "}),n(r.span,{style:{color:"#FFAB70"},children:"list"}),n(r.span,{style:{color:"#E1E4E8"},children:" }) "}),n(r.span,{style:{color:"#F97583"},children:"=>"}),n(r.span,{style:{color:"#E1E4E8"},children:" {"})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#F97583"},children:" return"}),n(r.span,{style:{color:"#E1E4E8"},children:" ("})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#E1E4E8"},children:" <"}),n(r.span,{style:{color:"#85E89D"},children:"div"}),n(r.span,{style:{color:"#E1E4E8"},children:">"})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#E1E4E8"},children:" {list."}),n(r.span,{style:{color:"#B392F0"},children:"map"}),n(r.span,{style:{color:"#E1E4E8"},children:"(("}),n(r.span,{style:{color:"#FFAB70"},children:"tag"}),n(r.span,{style:{color:"#E1E4E8"},children:") "}),n(r.span,{style:{color:"#F97583"},children:"=>"}),n(r.span,{style:{color:"#E1E4E8"},children:" ("})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#E1E4E8"},children:" <"}),n(r.span,{style:{color:"#79B8FF"},children:"Link"}),n(r.span,{style:{color:"#B392F0"},children:" key"}),n(r.span,{style:{color:"#F97583"},children:"="}),n(r.span,{style:{color:"#E1E4E8"},children:"{tag} "}),n(r.span,{style:{color:"#B392F0"},children:"to"}),n(r.span,{style:{color:"#F97583"},children:"="}),n(r.span,{style:{color:"#E1E4E8"},children:"{"}),n(r.span,{style:{color:"#9ECBFF"},children:"`/tags/${"}),n(r.span,{style:{color:"#E1E4E8"},children:"tag"}),n(r.span,{style:{color:"#9ECBFF"},children:"}`"}),n(r.span,{style:{color:"#E1E4E8"},children:"}>"})]}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#E1E4E8"},children:" {tag}"})}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#E1E4E8"},children:" "})]}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#E1E4E8"},children:" ))}"})}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#E1E4E8"},children:" "})]}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#E1E4E8"},children:" );"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#E1E4E8"},children:"};"})}),"\n",n(r.span,{"data-line":"",children:" "}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#F97583"},children:"export"}),n(r.span,{style:{color:"#F97583"},children:" default"}),n(r.span,{style:{color:"#E1E4E8"},children:" TagsBlock;"})]})]})})}),"\n",l(r.p,{children:["Back on the post template, we'll first import TagsBlock and then stick it under the title. On the list prop, pass the tags from ",n(r.code,{children:"{post.frontmatter.tags}"})," ",n(r.em,{children:"or"})," an empty array in case there are no tags."]}),"\n",n(r.figure,{"data-rehype-pretty-code-figure":"",children:n(r.pre,{style:{backgroundColor:"#24292e",color:"#e1e4e8"},tabIndex:"0","data-language":"jsx","data-theme":"github-dark",children:l(r.code,{"data-language":"jsx","data-theme":"github-dark",style:{display:"grid"},children:[n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#6A737D"},children:"// src/templates/post.jsx"})}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#E1E4E8"},children:"<"}),n(r.span,{style:{color:"#79B8FF"},children:"TagsBlock"}),n(r.span,{style:{color:"#B392F0"},children:" list"}),n(r.span,{style:{color:"#F97583"},children:"="}),n(r.span,{style:{color:"#E1E4E8"},children:"{post.frontmatter.tags "}),n(r.span,{style:{color:"#F97583"},children:"||"}),n(r.span,{style:{color:"#E1E4E8"},children:" []} />"})]})]})})}),"\n",l(r.p,{children:["Let's see what happens if we don't add the ",n(r.code,{children:"|| []"}),". In the last post markdown file, let's delete the entire tags field, and save. In the second to last post, let's just delete the tags but leave an empty array. If we load the second to last post, it's fine, there just aren't any tags. But if we go to the last post that doesn't even have the tags field, the page doesn't load. There are plenty of other ways to achieve this without needing a ",n(r.code,{children:"|| []"})," at all, but that'll do for right now."]}),"\n",l(r.p,{children:["I wanted to point this out because this is something to watch out for when developing your Gatsby site. If a page loads but neither content nor errors are showing up, but when checking the console, an error ",n(r.em,{children:"does"})," get listed, and it says something weird like \"Cannot read property 'map' of null\", go back and check all of your queries and data being passed. Sometimes just forgetting a single word will do it."]}),"\n",l(r.p,{children:["Now that we have a TagsBlock component, let's go back to our ",n(r.code,{children:"tags.jsx"}),", swap it in, and pass ",n(r.code,{children:"{tags}"})," as the ",n(r.code,{children:"list"})," prop."]}),"\n",n(r.figure,{"data-rehype-pretty-code-figure":"",children:n(r.pre,{style:{backgroundColor:"#24292e",color:"#e1e4e8"},tabIndex:"0","data-language":"jsx","data-theme":"github-dark",children:l(r.code,{"data-language":"jsx","data-theme":"github-dark",style:{display:"grid"},children:[n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#6A737D"},children:"// src/pages/tags.jsx"})}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#F97583"},children:"import"}),n(r.span,{style:{color:"#E1E4E8"},children:" React "}),n(r.span,{style:{color:"#F97583"},children:"from"}),n(r.span,{style:{color:"#9ECBFF"},children:" 'react'"}),n(r.span,{style:{color:"#E1E4E8"},children:";"})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#F97583"},children:"import"}),n(r.span,{style:{color:"#E1E4E8"},children:" TagsBlock "}),n(r.span,{style:{color:"#F97583"},children:"from"}),n(r.span,{style:{color:"#9ECBFF"},children:" '../components/TagsBlock'"}),n(r.span,{style:{color:"#E1E4E8"},children:";"})]}),"\n",n(r.span,{"data-line":"",children:" "}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#F97583"},children:"const"}),n(r.span,{style:{color:"#B392F0"},children:" Tags"}),n(r.span,{style:{color:"#F97583"},children:" ="}),n(r.span,{style:{color:"#E1E4E8"},children:" ({ "}),n(r.span,{style:{color:"#FFAB70"},children:"pageContext"}),n(r.span,{style:{color:"#E1E4E8"},children:" }) "}),n(r.span,{style:{color:"#F97583"},children:"=>"}),n(r.span,{style:{color:"#E1E4E8"},children:" {"})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#E1E4E8"},children:" console."}),n(r.span,{style:{color:"#B392F0"},children:"log"}),n(r.span,{style:{color:"#E1E4E8"},children:"(pageContext);"})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#F97583"},children:" const"}),n(r.span,{style:{color:"#E1E4E8"},children:" { "}),n(r.span,{style:{color:"#79B8FF"},children:"tags"}),n(r.span,{style:{color:"#E1E4E8"},children:" } "}),n(r.span,{style:{color:"#F97583"},children:"="}),n(r.span,{style:{color:"#E1E4E8"},children:" pageContext;"})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#F97583"},children:" return"}),n(r.span,{style:{color:"#E1E4E8"},children:" ("})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#E1E4E8"},children:" <"}),n(r.span,{style:{color:"#85E89D"},children:"div"}),n(r.span,{style:{color:"#E1E4E8"},children:">"})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#E1E4E8"},children:" <"}),n(r.span,{style:{color:"#79B8FF"},children:"TagsBlock"}),n(r.span,{style:{color:"#B392F0"},children:" list"}),n(r.span,{style:{color:"#F97583"},children:"="}),n(r.span,{style:{color:"#E1E4E8"},children:"{tags} />"})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#E1E4E8"},children:" "})]}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#E1E4E8"},children:" );"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#E1E4E8"},children:"};"})}),"\n",n(r.span,{"data-line":"",children:" "}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#F97583"},children:"export"}),n(r.span,{style:{color:"#F97583"},children:" default"}),n(r.span,{style:{color:"#E1E4E8"},children:" Tags;"})]})]})})}),"\n",n(r.p,{children:"So much cleaner."}),"\n",n(r.h2,{id:"simple-pagination",children:n(r.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#simple-pagination",children:"Simple Pagination"})}),"\n",l(r.p,{children:["Now that the posts are up and running, we want to be able to navigate through them without having to go back to the home page. To do this, we'll add previous and next buttons. Go back to the ",n(r.code,{children:"gatsby-node.js"}),", and inside the forEach, add an index so we know where we're located in the list as a whole."]}),"\n",l(r.p,{children:["For ",n(r.code,{children:"prev"}),", we can start by saying if our index is zero, then we won't need previous because there isn't a post to move backwards to. Otherwise, we'll get the post[index - 1].node which is the post that comes before the current post. For ",n(r.code,{children:"next"}),", it'll be the same thing but reversed. We'll say ",n(r.code,{children:"(posts.length - 1)"}),", so if it's the last post, there is no next. Otherwise we'll get the post[index + 1].node, which is the post after the current post."]}),"\n",n(r.figure,{"data-rehype-pretty-code-figure":"",children:n(r.pre,{style:{backgroundColor:"#24292e",color:"#e1e4e8"},tabIndex:"0","data-language":"jsx","data-theme":"github-dark",children:l(r.code,{"data-language":"jsx","data-theme":"github-dark",style:{display:"grid"},children:[n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#6A737D"},children:"// gatsby-node.js"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#F97583"},children:"..."})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#6A737D"},children:" //create posts"})}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#E1E4E8"},children:" posts."}),n(r.span,{style:{color:"#B392F0"},children:"forEach"}),n(r.span,{style:{color:"#E1E4E8"},children:"(({ "}),n(r.span,{style:{color:"#FFAB70"},children:"node"}),n(r.span,{style:{color:"#E1E4E8"},children:" }, "}),n(r.span,{style:{color:"#FFAB70"},children:"index"}),n(r.span,{style:{color:"#E1E4E8"},children:") "}),n(r.span,{style:{color:"#F97583"},children:"=>"}),n(r.span,{style:{color:"#E1E4E8"},children:" {"})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#F97583"},children:" const"}),n(r.span,{style:{color:"#79B8FF"},children:" path"}),n(r.span,{style:{color:"#F97583"},children:" ="}),n(r.span,{style:{color:"#E1E4E8"},children:" node.frontmatter.path"})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#F97583"},children:" const"}),n(r.span,{style:{color:"#79B8FF"},children:" prev"}),n(r.span,{style:{color:"#F97583"},children:" ="}),n(r.span,{style:{color:"#E1E4E8"},children:" index "}),n(r.span,{style:{color:"#F97583"},children:"==="}),n(r.span,{style:{color:"#79B8FF"},children:" 0"}),n(r.span,{style:{color:"#F97583"},children:" ?"}),n(r.span,{style:{color:"#79B8FF"},children:" null"}),n(r.span,{style:{color:"#F97583"},children:" :"}),n(r.span,{style:{color:"#E1E4E8"},children:" posts[index "}),n(r.span,{style:{color:"#F97583"},children:"-"}),n(r.span,{style:{color:"#79B8FF"},children:" 1"}),n(r.span,{style:{color:"#E1E4E8"},children:"].node;"})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#F97583"},children:" const"}),n(r.span,{style:{color:"#79B8FF"},children:" next"}),n(r.span,{style:{color:"#F97583"},children:" ="}),n(r.span,{style:{color:"#E1E4E8"},children:" index "}),n(r.span,{style:{color:"#F97583"},children:"==="}),n(r.span,{style:{color:"#E1E4E8"},children:" posts."}),n(r.span,{style:{color:"#79B8FF"},children:"length"}),n(r.span,{style:{color:"#F97583"},children:" -"}),n(r.span,{style:{color:"#79B8FF"},children:" 1"}),n(r.span,{style:{color:"#F97583"},children:" ?"}),n(r.span,{style:{color:"#79B8FF"},children:" null"}),n(r.span,{style:{color:"#F97583"},children:" :"}),n(r.span,{style:{color:"#E1E4E8"},children:" posts[index "}),n(r.span,{style:{color:"#F97583"},children:"+"}),n(r.span,{style:{color:"#79B8FF"},children:" 1"}),n(r.span,{style:{color:"#E1E4E8"},children:"].node;"})]}),"\n",n(r.span,{"data-line":"",children:" "}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#B392F0"},children:" createPage"}),n(r.span,{style:{color:"#E1E4E8"},children:"({"})]}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#E1E4E8"},children:" path,"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#E1E4E8"},children:" component: postTemplate,"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#E1E4E8"},children:" context: {"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#E1E4E8"},children:" pathSlug: path,"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#E1E4E8"},children:" prev,"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#E1E4E8"},children:" next,"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#E1E4E8"},children:" }"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#E1E4E8"},children:" });"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#E1E4E8"},children:" });"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#F97583"},children:"..."})})]})})}),"\n",l(r.p,{children:["Now let's see if it worked. We'll go to our post.jsx and add the ",n(r.code,{children:"pageContext"})," key, and then console.log(pageContext). Let's load our first post and look in the console. We see ",n(r.code,{children:"next: null"})," and data for ",n(r.code,{children:"previous"}),". This is obviously backwards because there shouldn't be data for previous on the first post. To fix this we just need to use ",n(r.code,{children:"sort"})," like we did a little earlier. Go back to ",n(r.code,{children:"gatsby-node.js"})," and add the sort keyword, which takes an object of order by ascending, and by the field frontmatter___date."]}),"\n",n(r.figure,{"data-rehype-pretty-code-figure":"",children:n(r.pre,{style:{backgroundColor:"#24292e",color:"#e1e4e8"},tabIndex:"0","data-language":"jsx","data-theme":"github-dark",children:l(r.code,{"data-language":"jsx","data-theme":"github-dark",style:{display:"grid"},children:[n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#6A737D"},children:"// gatsby-node.js"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#F97583"},children:"..."})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#E1E4E8"},children:" query {"})}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#B392F0"},children:" allMarkdownRemark"}),n(r.span,{style:{color:"#E1E4E8"},children:" ("})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#E1E4E8"},children:" sort: {order: "}),n(r.span,{style:{color:"#79B8FF"},children:"ASC"}),n(r.span,{style:{color:"#E1E4E8"},children:", fields: [frontmatter___date]}"})]}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#E1E4E8"},children:" ) {"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#E1E4E8"},children:" edges {"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#E1E4E8"},children:" node {"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#E1E4E8"},children:" frontmatter {"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#E1E4E8"},children:" path"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#E1E4E8"},children:" title"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#E1E4E8"},children:" date"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#E1E4E8"},children:" }"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#E1E4E8"},children:" }"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#E1E4E8"},children:" }"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#E1E4E8"},children:" }"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#E1E4E8"},children:" }"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#F97583"},children:"..."})})]})})}),"\n",l(r.p,{children:["Reload the server and go back to our first post and check the console. ",n(r.code,{children:"Next"})," has data and ",n(r.code,{children:"prev"})," is null, and on the last post ",n(r.code,{children:"next"})," is null and ",n(r.code,{children:"prev"})," has data, so it works!"]}),"\n",l(r.p,{children:["Now to add the Next and Previous links to the posts. Go back to our ",n(r.code,{children:"post.jsx"})," and import Link from gatsby, destructure prev and next from our ",n(r.code,{children:"pageContext"}),". We'll start with ",n(r.code,{children:"{next &&"}),", and add a "," component to ",n(r.code,{children:"{next.frontmatter.path}"}),". The double ampersand checks the truthiness of the value and so if ",n(r.code,{children:"next"})," is true, it will render this Link. And we'll just do the same thing again but replace next with prev, and wrap each one in a div so they're not stuck right next to each other."]}),"\n",n(r.figure,{"data-rehype-pretty-code-figure":"",children:n(r.pre,{style:{backgroundColor:"#24292e",color:"#e1e4e8"},tabIndex:"0","data-language":"jsx","data-theme":"github-dark",children:l(r.code,{"data-language":"jsx","data-theme":"github-dark",style:{display:"grid"},children:[n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#6A737D"},children:"// src/templates/post.jsx"})}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#F97583"},children:"import"}),n(r.span,{style:{color:"#E1E4E8"},children:" React "}),n(r.span,{style:{color:"#F97583"},children:"from"}),n(r.span,{style:{color:"#9ECBFF"},children:" 'react'"}),n(r.span,{style:{color:"#E1E4E8"},children:";"})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#F97583"},children:"import"}),n(r.span,{style:{color:"#E1E4E8"},children:" { graphql, Link } "}),n(r.span,{style:{color:"#F97583"},children:"from"}),n(r.span,{style:{color:"#9ECBFF"},children:" 'gatsby'"}),n(r.span,{style:{color:"#E1E4E8"},children:";"})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#F97583"},children:"import"}),n(r.span,{style:{color:"#E1E4E8"},children:" Layout "}),n(r.span,{style:{color:"#F97583"},children:"from"}),n(r.span,{style:{color:"#9ECBFF"},children:" '../layouts'"}),n(r.span,{style:{color:"#E1E4E8"},children:";"})]}),"\n",n(r.span,{"data-line":"",children:" "}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#F97583"},children:"const"}),n(r.span,{style:{color:"#B392F0"},children:" Post"}),n(r.span,{style:{color:"#F97583"},children:" ="}),n(r.span,{style:{color:"#E1E4E8"},children:" ({ "}),n(r.span,{style:{color:"#FFAB70"},children:"data"}),n(r.span,{style:{color:"#E1E4E8"},children:", "}),n(r.span,{style:{color:"#FFAB70"},children:"pageContext"}),n(r.span,{style:{color:"#E1E4E8"},children:" }) "}),n(r.span,{style:{color:"#F97583"},children:"=>"}),n(r.span,{style:{color:"#E1E4E8"},children:" {"})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#F97583"},children:" const"}),n(r.span,{style:{color:"#E1E4E8"},children:" { "}),n(r.span,{style:{color:"#79B8FF"},children:"next"}),n(r.span,{style:{color:"#E1E4E8"},children:", "}),n(r.span,{style:{color:"#79B8FF"},children:"prev"}),n(r.span,{style:{color:"#E1E4E8"},children:" } "}),n(r.span,{style:{color:"#F97583"},children:"="}),n(r.span,{style:{color:"#E1E4E8"},children:" pageContext;"})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#F97583"},children:" const"}),n(r.span,{style:{color:"#79B8FF"},children:" post"}),n(r.span,{style:{color:"#F97583"},children:" ="}),n(r.span,{style:{color:"#E1E4E8"},children:" data.markdownRemark;"})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#F97583"},children:" const"}),n(r.span,{style:{color:"#79B8FF"},children:" title"}),n(r.span,{style:{color:"#F97583"},children:" ="}),n(r.span,{style:{color:"#E1E4E8"},children:" post.frontmatter.title;"})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#F97583"},children:" const"}),n(r.span,{style:{color:"#79B8FF"},children:" date"}),n(r.span,{style:{color:"#F97583"},children:" ="}),n(r.span,{style:{color:"#E1E4E8"},children:" post.frontmatter.date;"})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#F97583"},children:" const"}),n(r.span,{style:{color:"#79B8FF"},children:" html"}),n(r.span,{style:{color:"#F97583"},children:" ="}),n(r.span,{style:{color:"#E1E4E8"},children:" post.html;"})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#F97583"},children:" return"}),n(r.span,{style:{color:"#E1E4E8"},children:" ("})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#E1E4E8"},children:" <"}),n(r.span,{style:{color:"#79B8FF"},children:"Layout"}),n(r.span,{style:{color:"#E1E4E8"},children:">"})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#E1E4E8"},children:" <"}),n(r.span,{style:{color:"#85E89D"},children:"h1"}),n(r.span,{style:{color:"#E1E4E8"},children:">{title}"})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#E1E4E8"},children:" <"}),n(r.span,{style:{color:"#85E89D"},children:"p"}),n(r.span,{style:{color:"#E1E4E8"},children:">{date}"})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#E1E4E8"},children:" <"}),n(r.span,{style:{color:"#85E89D"},children:"div"}),n(r.span,{style:{color:"#B392F0"},children:" dangerouslySetInnerHTML"}),n(r.span,{style:{color:"#F97583"},children:"="}),n(r.span,{style:{color:"#E1E4E8"},children:"{{ __html: html }} />"})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#E1E4E8"},children:" <"}),n(r.span,{style:{color:"#85E89D"},children:"div"}),n(r.span,{style:{color:"#E1E4E8"},children:">{next "}),n(r.span,{style:{color:"#F97583"},children:"&&"}),n(r.span,{style:{color:"#E1E4E8"},children:" <"}),n(r.span,{style:{color:"#79B8FF"},children:"Link"}),n(r.span,{style:{color:"#B392F0"},children:" to"}),n(r.span,{style:{color:"#F97583"},children:"="}),n(r.span,{style:{color:"#E1E4E8"},children:"{next.frontmatter.path}>Next Post}"})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#E1E4E8"},children:" <"}),n(r.span,{style:{color:"#85E89D"},children:"div"}),n(r.span,{style:{color:"#E1E4E8"},children:">{prev "}),n(r.span,{style:{color:"#F97583"},children:"&&"}),n(r.span,{style:{color:"#E1E4E8"},children:" <"}),n(r.span,{style:{color:"#79B8FF"},children:"Link"}),n(r.span,{style:{color:"#B392F0"},children:" to"}),n(r.span,{style:{color:"#F97583"},children:"="}),n(r.span,{style:{color:"#E1E4E8"},children:"{prev.frontmatter.path}>Previous Post}"})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#E1E4E8"},children:" "})]}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#E1E4E8"},children:" );"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#E1E4E8"},children:"};"})})]})})}),"\n",n(r.h2,{id:"using-images",children:n(r.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#using-images",children:"Using Images"})}),"\n",n(r.p,{children:"The site works, but it's not much of a looker. We'll get into styling in the next section, but right now let's just bring some images in to make the site more alive. There are a few ways of doing this but in this tutorial we're going to be focusing on two ways in particular- the JavaScript import, and using Gatsby Plugins."}),"\n",n(r.h3,{id:"javascript-import",children:n(r.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#javascript-import",children:"JavaScript Import"})}),"\n",n(r.p,{children:"The first way to add an image to our Gatsby site is to import it like you would in any JavaScript file. Let's add a logo to the site. First make an static folder to hold the logo file, and then add logo into the folder."}),"\n",l(r.p,{children:["Now, since this is a logo, we want it to show on all pages. Go to the Layout component and write the import statement, and just call it logo for simplicity. Add the ",n(r.code,{children:"img"})," and pull in the ",n(r.code,{children:"logo"})," variable we just imported as "]}),"\n",n(r.figure,{"data-rehype-pretty-code-figure":"",children:n(r.pre,{style:{backgroundColor:"#24292e",color:"#e1e4e8"},tabIndex:"0","data-language":"jsx","data-theme":"github-dark",children:l(r.code,{"data-language":"jsx","data-theme":"github-dark",style:{display:"grid"},children:[n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#6A737D"},children:"// src/layouts/index.jsx"})}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#F97583"},children:"import"}),n(r.span,{style:{color:"#E1E4E8"},children:" React "}),n(r.span,{style:{color:"#F97583"},children:"from"}),n(r.span,{style:{color:"#9ECBFF"},children:" 'react'"})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#F97583"},children:"import"}),n(r.span,{style:{color:"#E1E4E8"},children:" { graphql, StaticQuery, Link } "}),n(r.span,{style:{color:"#F97583"},children:"from"}),n(r.span,{style:{color:"#9ECBFF"},children:" 'gatsby'"})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#F97583"},children:"import"}),n(r.span,{style:{color:"#E1E4E8"},children:" logo "}),n(r.span,{style:{color:"#F97583"},children:"from"}),n(r.span,{style:{color:"#9ECBFF"},children:" '../static/logo/gatsby.svg'"})]}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#F97583"},children:"..."})}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#E1E4E8"},children:" render"}),n(r.span,{style:{color:"#F97583"},children:"="}),n(r.span,{style:{color:"#E1E4E8"},children:"{"}),n(r.span,{style:{color:"#FFAB70"},children:"data"}),n(r.span,{style:{color:"#F97583"},children:" =>"}),n(r.span,{style:{color:"#E1E4E8"},children:" ("})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#E1E4E8"},children:" <"}),n(r.span,{style:{color:"#85E89D"},children:"div"}),n(r.span,{style:{color:"#E1E4E8"},children:">"})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#E1E4E8"},children:" <"}),n(r.span,{style:{color:"#85E89D"},children:"img"}),n(r.span,{style:{color:"#B392F0"},children:" src"}),n(r.span,{style:{color:"#F97583"},children:"="}),n(r.span,{style:{color:"#E1E4E8"},children:"{logo} "}),n(r.span,{style:{color:"#B392F0"},children:"alt"}),n(r.span,{style:{color:"#F97583"},children:"="}),n(r.span,{style:{color:"#9ECBFF"},children:"'Gatsby Logo'"}),n(r.span,{style:{color:"#E1E4E8"},children:" />"})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#E1E4E8"},children:" <"}),n(r.span,{style:{color:"#79B8FF"},children:"Link"}),n(r.span,{style:{color:"#B392F0"},children:" to"}),n(r.span,{style:{color:"#F97583"},children:"="}),n(r.span,{style:{color:"#E1E4E8"},children:"{"}),n(r.span,{style:{color:"#9ECBFF"},children:"`/`"}),n(r.span,{style:{color:"#E1E4E8"},children:"}>"})]}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#E1E4E8"},children:"..."})})]})})}),"\n",l(r.p,{children:["A really cool thig about Gatsby is all the settings that come built-in. Relating to images, Gatbsy's default webpack settings are focused on performance. When Gatbsy bundles ",n(r.em,{children:"any"})," file that is less than 10KB, it will return a data uri which will result in fewer browser requests which increases the performance of the app. If it's over 10KB, it'll be bundled into the static folder. To see a quick example of this, import a large jpg file into Layout, and then console.log both the jpg and our previously imported icon."]}),"\n",n(r.figure,{"data-rehype-pretty-code-figure":"",children:n(r.pre,{style:{backgroundColor:"#24292e",color:"#e1e4e8"},tabIndex:"0","data-language":"jsx","data-theme":"github-dark",children:l(r.code,{"data-language":"jsx","data-theme":"github-dark",style:{display:"grid"},children:[n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#6A737D"},children:"// src/layouts/index.jsx"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#F97583"},children:"..."})}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#F97583"},children:"import"}),n(r.span,{style:{color:"#E1E4E8"},children:" logo "}),n(r.span,{style:{color:"#F97583"},children:"from"}),n(r.span,{style:{color:"#9ECBFF"},children:" '../static/logo/gatsby.svg'"})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#F97583"},children:"import"}),n(r.span,{style:{color:"#E1E4E8"},children:" jpg "}),n(r.span,{style:{color:"#F97583"},children:"from"}),n(r.span,{style:{color:"#9ECBFF"},children:" '../static/logo/gatsby.jpg'"})]}),"\n",n(r.span,{"data-line":"",children:" "}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#E1E4E8"},children:"console."}),n(r.span,{style:{color:"#B392F0"},children:"log"}),n(r.span,{style:{color:"#E1E4E8"},children:"(jpg)"})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#E1E4E8"},children:"console."}),n(r.span,{style:{color:"#B392F0"},children:"log"}),n(r.span,{style:{color:"#E1E4E8"},children:"(logo)"})]}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#F97583"},children:"..."})})]})})}),"\n",n(r.p,{children:"In our console, we can see that the jpg is in the static folder, and the svg has been turned into a data uri."}),"\n",n(r.h3,{id:"images-through-gatsby-plugins",children:n(r.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#images-through-gatsby-plugins",children:"Images Through Gatsby Plugins"})}),"\n",l(r.p,{children:["One thing our posts are lacking is an image. As previously mentioned, we have some gatsby plugins available to us to help make everything super smooth and performant. First, ",n(r.code,{children:"npm i gatsby-transformer-sharp gatsby-plugin-sharp gatsby-remark-images gatsby-image"}),"."]}),"\n",l(r.p,{children:["Head over to ",n(r.code,{children:"gatsby-config.js"})," so we can make use of our new plugins. Add gatsby-transformer-sharp, resolve gatsby-transmforer-remark, and then resolve gatbsy-remark-images as a plugin of the transformer-remark. We have some options for remark-images, so let's set the ",n(r.code,{children:"max width"}),", ",n(r.code,{children:"quality"}),", and then add a link to the original image. Underneath all that we'll load gatsby-plugin-sharp."]}),"\n",n(r.figure,{"data-rehype-pretty-code-figure":"",children:n(r.pre,{style:{backgroundColor:"#24292e",color:"#e1e4e8"},tabIndex:"0","data-language":"js","data-theme":"github-dark",children:l(r.code,{"data-language":"js","data-theme":"github-dark",style:{display:"grid"},children:[n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#6A737D"},children:"// gatsby-config.js"})}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#B392F0"},children:" plugins"}),n(r.span,{style:{color:"#E1E4E8"},children:": ["})]}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#E1E4E8"},children:" {"})}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#E1E4E8"},children:" resolve: "}),n(r.span,{style:{color:"#9ECBFF"},children:"`gatsby-source-filesystem`"}),n(r.span,{style:{color:"#E1E4E8"},children:","})]}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#E1E4E8"},children:" options: {"})}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#E1E4E8"},children:" name: "}),n(r.span,{style:{color:"#9ECBFF"},children:"`posts`"}),n(r.span,{style:{color:"#E1E4E8"},children:","})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#E1E4E8"},children:" path: "}),n(r.span,{style:{color:"#9ECBFF"},children:"`${"}),n(r.span,{style:{color:"#E1E4E8"},children:"__dirname"}),n(r.span,{style:{color:"#9ECBFF"},children:"}/content/posts`"})]}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#E1E4E8"},children:" },"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#E1E4E8"},children:" },"})}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#9ECBFF"},children:" 'gatsby-transformer-sharp'"}),n(r.span,{style:{color:"#E1E4E8"},children:","})]}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#E1E4E8"},children:" {"})}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#E1E4E8"},children:" resolve: "}),n(r.span,{style:{color:"#9ECBFF"},children:"`gatsby-transformer-remark`"}),n(r.span,{style:{color:"#E1E4E8"},children:","})]}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#E1E4E8"},children:" options: {"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#E1E4E8"},children:" plugins: ["})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#E1E4E8"},children:" {"})}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#E1E4E8"},children:" resolve: "}),n(r.span,{style:{color:"#9ECBFF"},children:"'gatsby-remark-images'"}),n(r.span,{style:{color:"#E1E4E8"},children:","})]}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#E1E4E8"},children:" options: {"})}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#E1E4E8"},children:" maxWidth: "}),n(r.span,{style:{color:"#79B8FF"},children:"750"}),n(r.span,{style:{color:"#E1E4E8"},children:","})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#E1E4E8"},children:" quality: "}),n(r.span,{style:{color:"#79B8FF"},children:"90"}),n(r.span,{style:{color:"#E1E4E8"},children:","})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#E1E4E8"},children:" linkImagesToOriginal: "}),n(r.span,{style:{color:"#79B8FF"},children:"true"}),n(r.span,{style:{color:"#E1E4E8"},children:","})]}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#E1E4E8"},children:" }"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#E1E4E8"},children:" }"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#E1E4E8"},children:" ]"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#E1E4E8"},children:" }"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#E1E4E8"},children:" },"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#9ECBFF"},children:" 'gatsby-plugin-sharp'"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#E1E4E8"},children:" ]"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#E1E4E8"},children:"}"})})]})})}),"\n",l(r.p,{children:["Now let's add the images to our post folders, and then add the field ",n(r.code,{children:"cover"}),", as in cover photo, to our frontmatter, with the path to our images."]}),"\n",n(r.figure,{"data-rehype-pretty-code-figure":"",children:n(r.pre,{style:{backgroundColor:"#24292e",color:"#e1e4e8"},tabIndex:"0","data-language":"md","data-theme":"github-dark",children:l(r.code,{"data-language":"md","data-theme":"github-dark",style:{display:"grid"},children:[n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#79B8FF",fontWeight:"bold"},children:"---"})}),"\n",n(r.span,{"data-line":"",children:" "}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#E1E4E8"},children:'path: /post-two"'})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#E1E4E8"},children:'cover: "./network.jpg"'})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#E1E4E8"},children:"..."})})]})})}),"\n",l(r.p,{children:["Go to the ",n(r.code,{children:"post.jsx"})," template file and connect all of it together through a query. First, import Img from ",n(r.code,{children:"gatsby-image"}),", add cover, childImageSharp, fluid, and then some arguments."]}),"\n",n(r.figure,{"data-rehype-pretty-code-figure":"",children:n(r.pre,{style:{backgroundColor:"#24292e",color:"#e1e4e8"},tabIndex:"0","data-language":"jsx","data-theme":"github-dark",children:l(r.code,{"data-language":"jsx","data-theme":"github-dark",style:{display:"grid"},children:[n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#6A737D"},children:"// src/templates/post.jsx"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#F97583"},children:"..."})}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#F97583"},children:" return"}),n(r.span,{style:{color:"#E1E4E8"},children:" ("})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#E1E4E8"},children:" <"}),n(r.span,{style:{color:"#79B8FF"},children:"Layout"}),n(r.span,{style:{color:"#E1E4E8"},children:">"})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#E1E4E8"},children:" <"}),n(r.span,{style:{color:"#79B8FF"},children:"Img"}),n(r.span,{style:{color:"#B392F0"},children:" fluid"}),n(r.span,{style:{color:"#F97583"},children:"="}),n(r.span,{style:{color:"#E1E4E8"},children:"{post.frontmatter.cover.childImageSharp.fluid} />"})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#E1E4E8"},children:" <"}),n(r.span,{style:{color:"#85E89D"},children:"h1"}),n(r.span,{style:{color:"#E1E4E8"},children:">{title}"})]}),"\n",n(r.span,{"data-line":"",children:" "}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#E1E4E8"},children:"..."})}),"\n",n(r.span,{"data-line":"",children:" "}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#E1E4E8"},children:" markdownRemark(frontmatter: { path: {eq: $pathSlug} }) {"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#E1E4E8"},children:" html"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#E1E4E8"},children:" frontmatter {"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#E1E4E8"},children:" date"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#E1E4E8"},children:" title"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#E1E4E8"},children:" tags"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#E1E4E8"},children:" slug"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#E1E4E8"},children:" cover {"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#E1E4E8"},children:" childImageSharp {"})}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#B392F0"},children:" fluid"}),n(r.span,{style:{color:"#E1E4E8"},children:"(maxWidth: "}),n(r.span,{style:{color:"#79B8FF"},children:"1920"}),n(r.span,{style:{color:"#E1E4E8"},children:", quality: "}),n(r.span,{style:{color:"#79B8FF"},children:"90"}),n(r.span,{style:{color:"#E1E4E8"},children:", duotone: { highlight: "}),n(r.span,{style:{color:"#9ECBFF"},children:'"#386eee"'}),n(r.span,{style:{color:"#E1E4E8"},children:", shadow: "}),n(r.span,{style:{color:"#9ECBFF"},children:'"#2323be"'}),n(r.span,{style:{color:"#E1E4E8"},children:", opacity: "}),n(r.span,{style:{color:"#79B8FF"},children:"40"}),n(r.span,{style:{color:"#E1E4E8"},children:" }) {"})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#F97583"},children:" ..."}),n(r.span,{style:{color:"#E1E4E8"},children:"GatsbyImageSharpFluid_withWebp"})]}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#E1E4E8"},children:" }"})}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#B392F0"},children:" resize"}),n(r.span,{style:{color:"#E1E4E8"},children:"(width: "}),n(r.span,{style:{color:"#79B8FF"},children:"1200"}),n(r.span,{style:{color:"#E1E4E8"},children:", quality: "}),n(r.span,{style:{color:"#79B8FF"},children:"90"}),n(r.span,{style:{color:"#E1E4E8"},children:") {"})]}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#E1E4E8"},children:" src"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#E1E4E8"},children:" }"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#E1E4E8"},children:" }"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#E1E4E8"},children:" }"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#F97583"},children:"..."})})]})})}),"\n",n(r.p,{children:"Now we need to go to index page and do something similar."}),"\n",n(r.figure,{"data-rehype-pretty-code-figure":"",children:n(r.pre,{style:{backgroundColor:"#24292e",color:"#e1e4e8"},tabIndex:"0","data-language":"jsx","data-theme":"github-dark",children:l(r.code,{"data-language":"jsx","data-theme":"github-dark",style:{display:"grid"},children:[n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#6A737D"},children:"// src/pages/index.jsx"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#F97583"},children:"..."})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#E1E4E8"},children:" frontmatter {"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#E1E4E8"},children:" title"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#E1E4E8"},children:" path"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#E1E4E8"},children:" excerpt"})}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#B392F0"},children:" date"}),n(r.span,{style:{color:"#E1E4E8"},children:"(formatString: "}),n(r.span,{style:{color:"#9ECBFF"},children:'"MM.DD.YYYY"'}),n(r.span,{style:{color:"#E1E4E8"},children:")"})]}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#E1E4E8"},children:" cover {"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#E1E4E8"},children:" childImageSharp {"})}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#B392F0"},children:" fluid"}),n(r.span,{style:{color:"#E1E4E8"},children:"(maxWidth: "}),n(r.span,{style:{color:"#79B8FF"},children:"1000"}),n(r.span,{style:{color:"#E1E4E8"},children:", quality: "}),n(r.span,{style:{color:"#79B8FF"},children:"90"}),n(r.span,{style:{color:"#E1E4E8"},children:", traceSVG: { color: "}),n(r.span,{style:{color:"#9ECBFF"},children:'"#2B2B2F"'}),n(r.span,{style:{color:"#E1E4E8"},children:" }) {"})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#F97583"},children:" ..."}),n(r.span,{style:{color:"#E1E4E8"},children:"GatsbyImageSharpFluid_withWebp_tracedSVG"})]}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#E1E4E8"},children:" }"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#E1E4E8"},children:" }"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#E1E4E8"},children:" }"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#E1E4E8"},children:" }"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#F97583"},children:"..."})})]})})}),"\n",l(r.p,{children:["Gatsby is designed to build incredibly fast sites, so why not utilize every tool available? Sure just importing a regular old "," works, but using plugins makes everything more performant. First, ",n(r.code,{children:"gatsby-image"})," does a whole list of things. Taken from the docs, it:"]}),"\n",n(r.p,{children:'-Loads the optimal size of image for each device size and screen resolution\r\n-Holds the image position while loading so your page doesn’t jump around as images load\r\n-Uses the "blur-up" effect i.e. it loads a tiny version of the image to show while the full image is loading\r\n-Alternatively provides a "traced placeholder" SVG of the image\r\n-Lazy loads images, which reduces bandwidth and speeds the initial load time\r\n-Uses WebP images, if browser supports the format'}),"\n",l(r.p,{children:[n(r.code,{children:"Gatsby-transformer-sharp"})," creates the ",n(r.code,{children:"ImageSharp"})," node. ",n(r.code,{children:"Gatsby-remark-images"})," does the processing in markdown so pictures can be used in production builds, and it does a few other things similar to ",n(r.code,{children:"gatsby-image"})," like adding an elastic container, generates multiple sizes, and uses 'blur-up'. And finally, ",n(r.code,{children:"gatsby-plugin-sharp"})," is a helper plugin used by the other image plugins that also uses pngquant to compress images."]}),"\n",n(r.p,{children:"If you're not already sold, I don't know what else to tell you. If you've ever had to deal with resizing images, holding images, importing, compressing, using placeholders, using lazy loaders, and considering other browsers, you understand how amazing it is to control all of that with a few lines in your query."}),"\n",n(r.h2,{id:"styling",children:n(r.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#styling",children:"Styling"})}),"\n",l(r.p,{children:["Let's make this site look like ",n(r.em,{children:"something"})," because it's getting painful to keep staring at."]}),"\n",n(r.h3,{id:"emotion",children:n(r.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#emotion",children:"Emotion"})}),"\n",l(r.p,{children:["We'll be using Emotion here, but Styled Components could be used as well because of how similar they are. In fact, they're so similar, we could actually replace all ",n(r.code,{children:"react-emotion"})," with ",n(r.code,{children:"styled-components"})," in this project, and all we'd need to do to get it to work is change the name of the global injection. There are of course, more nuanced differences between the two, so read the docs to decide which is best for you."]}),"\n",l(r.p,{children:["Let's ",n(r.code,{children:"npm i emotion react-emotion emotion-theming, gatsby-plugin-emotion"}),", and then add ",n(r.code,{children:"gatsby-plugin-emotion"})," to the plugins in ",n(r.code,{children:"gatsby-config.js"}),"."]}),"\n",n(r.h3,{id:"themeprovider-injectglobal-and-passing-props",children:n(r.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#themeprovider-injectglobal-and-passing-props",children:"ThemeProvider, injectGlobal, and passing props"})}),"\n",l(r.p,{children:["We're going to be passing some theme props with each example so let's start by making a config folder outside of the ",n(r.code,{children:"src"})," and make a ",n(r.code,{children:"theme.js"})," file. Next, go to the Layout component and set it up so we can pass the theme config through. First, break apart the layout a little to simplify it. We'll use Emotion's ",n(r.code,{children:"ThemeProvider"}),". This is a wrapper component that will provide a theme to every component down the line in the render tree through the context API. Import the theme, and then pass the children through. Let's also make use of injectGlobal, which is a way to have a global style across the whole project. We'll import { injectGlobal } from emotion and then just write the css."]}),"\n",n(r.figure,{"data-rehype-pretty-code-figure":"",children:n(r.pre,{style:{backgroundColor:"#24292e",color:"#e1e4e8"},tabIndex:"0","data-language":"jsx","data-theme":"github-dark",children:l(r.code,{"data-language":"jsx","data-theme":"github-dark",style:{display:"grid"},children:[n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#6A737D"},children:"// src/layouts/index.jsx"})}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#F97583"},children:"import"}),n(r.span,{style:{color:"#E1E4E8"},children:" React, { Fragment } "}),n(r.span,{style:{color:"#F97583"},children:"from"}),n(r.span,{style:{color:"#9ECBFF"},children:" 'react'"}),n(r.span,{style:{color:"#E1E4E8"},children:";"})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#F97583"},children:"import"}),n(r.span,{style:{color:"#E1E4E8"},children:" { ThemeProvider } "}),n(r.span,{style:{color:"#F97583"},children:"from"}),n(r.span,{style:{color:"#9ECBFF"},children:" 'emotion-theming'"}),n(r.span,{style:{color:"#E1E4E8"},children:";"})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#F97583"},children:"import"}),n(r.span,{style:{color:"#E1E4E8"},children:" { injectGlobal } "}),n(r.span,{style:{color:"#F97583"},children:"from"}),n(r.span,{style:{color:"#9ECBFF"},children:" 'react-emotion'"}),n(r.span,{style:{color:"#E1E4E8"},children:";"})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#F97583"},children:"import"}),n(r.span,{style:{color:"#E1E4E8"},children:" theme "}),n(r.span,{style:{color:"#F97583"},children:"from"}),n(r.span,{style:{color:"#9ECBFF"},children:" '../../config/theme'"}),n(r.span,{style:{color:"#E1E4E8"},children:";"})]}),"\n",n(r.span,{"data-line":"",children:" "}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#B392F0"},children:"injectGlobal"}),n(r.span,{style:{color:"#9ECBFF"},children:"`"})]}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#9ECBFF"},children:" *, *:before, *:after {"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#9ECBFF"},children:" box-sizing: inherit;"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#9ECBFF"},children:" }"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#9ECBFF"},children:" html, body {"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#9ECBFF"},children:" width: 100%;"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#9ECBFF"},children:" height: 100%;"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#9ECBFF"},children:" margin: 0;"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#9ECBFF"},children:" padding: 0;"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#9ECBFF"},children:" }"})}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#9ECBFF"},children:"`"}),n(r.span,{style:{color:"#E1E4E8"},children:";"})]}),"\n",n(r.span,{"data-line":"",children:" "}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#F97583"},children:"const"}),n(r.span,{style:{color:"#B392F0"},children:" Layout"}),n(r.span,{style:{color:"#F97583"},children:" ="}),n(r.span,{style:{color:"#E1E4E8"},children:" ({ "}),n(r.span,{style:{color:"#FFAB70"},children:"children"}),n(r.span,{style:{color:"#E1E4E8"},children:" }) "}),n(r.span,{style:{color:"#F97583"},children:"=>"}),n(r.span,{style:{color:"#E1E4E8"},children:" ("})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#E1E4E8"},children:" <"}),n(r.span,{style:{color:"#79B8FF"},children:"ThemeProvider"}),n(r.span,{style:{color:"#B392F0"},children:" theme"}),n(r.span,{style:{color:"#F97583"},children:"="}),n(r.span,{style:{color:"#E1E4E8"},children:"{theme}>"})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#E1E4E8"},children:" <"}),n(r.span,{style:{color:"#79B8FF"},children:"Fragment"}),n(r.span,{style:{color:"#E1E4E8"},children:">{children}"})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#E1E4E8"},children:" "})]}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#E1E4E8"},children:");"})}),"\n",n(r.span,{"data-line":"",children:" "}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#F97583"},children:"export"}),n(r.span,{style:{color:"#F97583"},children:" default"}),n(r.span,{style:{color:"#E1E4E8"},children:" Layout;"})]})]})})}),"\n",l(r.p,{children:["So now, whatever we put inside the ThemeProvider tag will have the global style, as well as access to the props from the ",n(r.code,{children:"theme.js"})," file. In our other components or pages, we just need to import the Layout component and then wrap everything with ",n(r.code,{children:""}),". Going further, if you find yourself using the same style block for multiple components, you can break the styling off completely and make a single file like this:"]}),"\n",n(r.figure,{"data-rehype-pretty-code-figure":"",children:n(r.pre,{style:{backgroundColor:"#24292e",color:"#e1e4e8"},tabIndex:"0","data-language":"jsx","data-theme":"github-dark",children:l(r.code,{"data-language":"jsx","data-theme":"github-dark",style:{display:"grid"},children:[l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#F97583"},children:"import"}),n(r.span,{style:{color:"#E1E4E8"},children:" styled "}),n(r.span,{style:{color:"#F97583"},children:"from"}),n(r.span,{style:{color:"#9ECBFF"},children:" 'react-emotion'"}),n(r.span,{style:{color:"#E1E4E8"},children:";"})]}),"\n",n(r.span,{"data-line":"",children:" "}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#F97583"},children:"const"}),n(r.span,{style:{color:"#79B8FF"},children:" Foo"}),n(r.span,{style:{color:"#F97583"},children:" ="}),n(r.span,{style:{color:"#E1E4E8"},children:" styled."}),n(r.span,{style:{color:"#B392F0"},children:"div"}),n(r.span,{style:{color:"#9ECBFF"},children:"`"})]}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#9ECBFF"},children:" padding: 1rem 2rem;"})}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#9ECBFF"},children:" color: ${"}),n(r.span,{style:{color:"#9ECBFF"},children:"("}),n(r.span,{style:{color:"#79B8FF"},children:"props"}),n(r.span,{style:{color:"#9ECBFF"},children:") "}),n(r.span,{style:{color:"#F97583"},children:"=>"}),n(r.span,{style:{color:"#E1E4E8"},children:" props"}),n(r.span,{style:{color:"#9ECBFF"},children:"."}),n(r.span,{style:{color:"#E1E4E8"},children:"theme"}),n(r.span,{style:{color:"#9ECBFF"},children:"."}),n(r.span,{style:{color:"#E1E4E8"},children:"colors"}),n(r.span,{style:{color:"#9ECBFF"},children:"."}),n(r.span,{style:{color:"#E1E4E8"},children:"black"}),n(r.span,{style:{color:"#9ECBFF"},children:"};"})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#9ECBFF"},children:"`"}),n(r.span,{style:{color:"#E1E4E8"},children:";"})]}),"\n",n(r.span,{"data-line":"",children:" "}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#F97583"},children:"export"}),n(r.span,{style:{color:"#F97583"},children:" default"}),n(r.span,{style:{color:"#E1E4E8"},children:" Foo;"})]})]})})}),"\n",n(r.p,{children:"And then reuse that file by importing it in multiple different components, saving a lot of code. First let's take what we deleted from the Layout and turn it into a NavBar component. And we'll do a few very cool things with emotion to style this. First, let's differentiate the menu links from the Logo that's also a link back to the homepage. We'll make a variable and call it \"StyledLink\". But since we're already importing and using Gatsby's Link, how are we going to style it? We'll decorate the { Link } with the StyledLink variable."}),"\n",n(r.figure,{"data-rehype-pretty-code-figure":"",children:n(r.pre,{style:{backgroundColor:"#24292e",color:"#e1e4e8"},tabIndex:"0","data-language":"jsx","data-theme":"github-dark",children:l(r.code,{"data-language":"jsx","data-theme":"github-dark",style:{display:"grid"},children:[n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#6A737D"},children:"// src/components/NavBar.jsx"})}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#F97583"},children:"import"}),n(r.span,{style:{color:"#E1E4E8"},children:" React, { Fragment } "}),n(r.span,{style:{color:"#F97583"},children:"from"}),n(r.span,{style:{color:"#9ECBFF"},children:" 'react'"}),n(r.span,{style:{color:"#E1E4E8"},children:";"})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#F97583"},children:"import"}),n(r.span,{style:{color:"#E1E4E8"},children:" { Link } "}),n(r.span,{style:{color:"#F97583"},children:"from"}),n(r.span,{style:{color:"#9ECBFF"},children:" 'gatsby'"}),n(r.span,{style:{color:"#E1E4E8"},children:";"})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#F97583"},children:"import"}),n(r.span,{style:{color:"#E1E4E8"},children:" styled "}),n(r.span,{style:{color:"#F97583"},children:"from"}),n(r.span,{style:{color:"#9ECBFF"},children:" 'react-emotion'"}),n(r.span,{style:{color:"#E1E4E8"},children:";"})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#F97583"},children:"import"}),n(r.span,{style:{color:"#E1E4E8"},children:" Headroom "}),n(r.span,{style:{color:"#F97583"},children:"from"}),n(r.span,{style:{color:"#9ECBFF"},children:" 'react-headroom'"}),n(r.span,{style:{color:"#E1E4E8"},children:";"})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#F97583"},children:"import"}),n(r.span,{style:{color:"#E1E4E8"},children:" logo "}),n(r.span,{style:{color:"#F97583"},children:"from"}),n(r.span,{style:{color:"#9ECBFF"},children:" '../static/logo/header-logo.png'"}),n(r.span,{style:{color:"#E1E4E8"},children:";"})]}),"\n",n(r.span,{"data-line":"",children:" "}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#F97583"},children:"const"}),n(r.span,{style:{color:"#79B8FF"},children:" StyledLink"}),n(r.span,{style:{color:"#F97583"},children:" ="}),n(r.span,{style:{color:"#B392F0"},children:" styled"}),n(r.span,{style:{color:"#E1E4E8"},children:"(Link)"}),n(r.span,{style:{color:"#9ECBFF"},children:"`"})]}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#9ECBFF"},children:" display: flex;"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#9ECBFF"},children:" font-weight: 700;"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#9ECBFF"},children:" align-items: center;"})}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#9ECBFF"},children:"`"}),n(r.span,{style:{color:"#E1E4E8"},children:";"})]}),"\n",n(r.span,{"data-line":"",children:" "}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#F97583"},children:"const"}),n(r.span,{style:{color:"#79B8FF"},children:" Nav"}),n(r.span,{style:{color:"#F97583"},children:" ="}),n(r.span,{style:{color:"#E1E4E8"},children:" styled."}),n(r.span,{style:{color:"#B392F0"},children:"nav"}),n(r.span,{style:{color:"#9ECBFF"},children:"`"})]}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#9ECBFF"},children:" display: flex;"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#9ECBFF"},children:" justify-content: flex-end;"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#9ECBFF"},children:" font-weight: 500;"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#9ECBFF"},children:" font-size: 1.25rem;"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#9ECBFF"},children:" align-items: center;"})}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#9ECBFF"},children:"`"}),n(r.span,{style:{color:"#E1E4E8"},children:";"})]}),"\n",n(r.span,{"data-line":"",children:" "}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#F97583"},children:"const"}),n(r.span,{style:{color:"#B392F0"},children:" NavBar"}),n(r.span,{style:{color:"#F97583"},children:" ="}),n(r.span,{style:{color:"#E1E4E8"},children:" () "}),n(r.span,{style:{color:"#F97583"},children:"=>"}),n(r.span,{style:{color:"#E1E4E8"},children:" ("})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#E1E4E8"},children:" <"}),n(r.span,{style:{color:"#79B8FF"},children:"Fragment"}),n(r.span,{style:{color:"#E1E4E8"},children:">"})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#E1E4E8"},children:" <"}),n(r.span,{style:{color:"#79B8FF"},children:"StyledLink"}),n(r.span,{style:{color:"#B392F0"},children:" to"}),n(r.span,{style:{color:"#F97583"},children:"="}),n(r.span,{style:{color:"#9ECBFF"},children:'"/"'}),n(r.span,{style:{color:"#E1E4E8"},children:">"})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#E1E4E8"},children:" <"}),n(r.span,{style:{color:"#85E89D"},children:"img"}),n(r.span,{style:{color:"#B392F0"},children:" src"}),n(r.span,{style:{color:"#F97583"},children:"="}),n(r.span,{style:{color:"#E1E4E8"},children:"{logo} "}),n(r.span,{style:{color:"#B392F0"},children:"alt"}),n(r.span,{style:{color:"#F97583"},children:"="}),n(r.span,{style:{color:"#9ECBFF"},children:'"Gatsby Logo"'}),n(r.span,{style:{color:"#E1E4E8"},children:" />"})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#E1E4E8"},children:" "})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#E1E4E8"},children:" <"}),n(r.span,{style:{color:"#79B8FF"},children:"Nav"}),n(r.span,{style:{color:"#E1E4E8"},children:">"})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#E1E4E8"},children:" <"}),n(r.span,{style:{color:"#79B8FF"},children:"Link"}),n(r.span,{style:{color:"#B392F0"},children:" to"}),n(r.span,{style:{color:"#F97583"},children:"="}),n(r.span,{style:{color:"#9ECBFF"},children:'"/"'}),n(r.span,{style:{color:"#E1E4E8"},children:">Home"})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#E1E4E8"},children:" <"}),n(r.span,{style:{color:"#79B8FF"},children:"Link"}),n(r.span,{style:{color:"#B392F0"},children:" to"}),n(r.span,{style:{color:"#F97583"},children:"="}),n(r.span,{style:{color:"#9ECBFF"},children:'"/about"'}),n(r.span,{style:{color:"#E1E4E8"},children:">About"})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#E1E4E8"},children:" "})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#E1E4E8"},children:" "})]}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#E1E4E8"},children:");"})}),"\n",n(r.span,{"data-line":"",children:" "}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#F97583"},children:"export"}),n(r.span,{style:{color:"#F97583"},children:" default"}),n(r.span,{style:{color:"#E1E4E8"},children:" NavBar;"})]})]})})}),"\n",l(r.p,{children:["Let's make this even better. Instead of having to write out every single color, shadow, padding, alignment, whatever, we can just pass theme props to the styled variables. Go to the currently empty ",n(r.code,{children:"theme.js"})," file and fill it out a little bit."]}),"\n",n(r.figure,{"data-rehype-pretty-code-figure":"",children:n(r.pre,{style:{backgroundColor:"#24292e",color:"#e1e4e8"},tabIndex:"0","data-language":"js","data-theme":"github-dark",children:l(r.code,{"data-language":"js","data-theme":"github-dark",style:{display:"grid"},children:[n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#6A737D"},children:"// config/theme.js"})}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#F97583"},children:"const"}),n(r.span,{style:{color:"#79B8FF"},children:" colors"}),n(r.span,{style:{color:"#F97583"},children:" ="}),n(r.span,{style:{color:"#E1E4E8"},children:" {"})]}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#E1E4E8"},children:" black: {"})}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#E1E4E8"},children:" base: "}),n(r.span,{style:{color:"#9ECBFF"},children:"'#333438'"}),n(r.span,{style:{color:"#E1E4E8"},children:","})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#E1E4E8"},children:" light: "}),n(r.span,{style:{color:"#9ECBFF"},children:"'#4b4e57'"}),n(r.span,{style:{color:"#E1E4E8"},children:","})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#E1E4E8"},children:" lighter: "}),n(r.span,{style:{color:"#9ECBFF"},children:"'#696d77'"}),n(r.span,{style:{color:"#E1E4E8"},children:","})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#E1E4E8"},children:" blue: "}),n(r.span,{style:{color:"#9ECBFF"},children:"'#2e3246'"}),n(r.span,{style:{color:"#E1E4E8"},children:","})]}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#E1E4E8"},children:" },"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#E1E4E8"},children:"};"})}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#F97583"},children:"const"}),n(r.span,{style:{color:"#79B8FF"},children:" transition"}),n(r.span,{style:{color:"#F97583"},children:" ="}),n(r.span,{style:{color:"#E1E4E8"},children:" {"})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#E1E4E8"},children:" easeInOutCubic: "}),n(r.span,{style:{color:"#9ECBFF"},children:"'cubic-bezier(0.645, 0.045, 0.355, 1)'"}),n(r.span,{style:{color:"#E1E4E8"},children:","})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#E1E4E8"},children:" easeOutBack: "}),n(r.span,{style:{color:"#9ECBFF"},children:"'cubic-bezier(0.175, 0.885, 0.32, 1.275)'"}),n(r.span,{style:{color:"#E1E4E8"},children:","})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#E1E4E8"},children:" duration: "}),n(r.span,{style:{color:"#9ECBFF"},children:"'0.4s'"}),n(r.span,{style:{color:"#E1E4E8"},children:","})]}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#E1E4E8"},children:"};"})}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#F97583"},children:"const"}),n(r.span,{style:{color:"#79B8FF"},children:" theme"}),n(r.span,{style:{color:"#F97583"},children:" ="}),n(r.span,{style:{color:"#E1E4E8"},children:" {"})]}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#E1E4E8"},children:" colors,"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#E1E4E8"},children:" transition,"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#E1E4E8"},children:"};"})}),"\n",n(r.span,{"data-line":"",children:" "}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#F97583"},children:"export"}),n(r.span,{style:{color:"#F97583"},children:" default"}),n(r.span,{style:{color:"#E1E4E8"},children:" theme;"})]})]})})}),"\n",n(r.p,{children:"And now back in the nav, we can pass the theme styles as props. We can use those same props anywhere in our project, as long as it's somewhere down the tree of our Layout component with the ThemeProvider."}),"\n",n(r.figure,{"data-rehype-pretty-code-figure":"",children:n(r.pre,{style:{backgroundColor:"#24292e",color:"#e1e4e8"},tabIndex:"0","data-language":"jsx","data-theme":"github-dark",children:l(r.code,{"data-language":"jsx","data-theme":"github-dark",style:{display:"grid"},children:[n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#6A737D"},children:"// src/components/NavBar.jsx"})}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#F97583"},children:"const"}),n(r.span,{style:{color:"#79B8FF"},children:" Nav"}),n(r.span,{style:{color:"#F97583"},children:" ="}),n(r.span,{style:{color:"#E1E4E8"},children:" styled."}),n(r.span,{style:{color:"#B392F0"},children:"nav"}),n(r.span,{style:{color:"#9ECBFF"},children:"`"})]}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#9ECBFF"},children:"..."})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#9ECBFF"},children:" align-items: center;"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#9ECBFF"},children:" a {"})}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#9ECBFF"},children:" color: ${"}),n(r.span,{style:{color:"#9ECBFF"},children:"("}),n(r.span,{style:{color:"#79B8FF"},children:"props"}),n(r.span,{style:{color:"#9ECBFF"},children:") "}),n(r.span,{style:{color:"#F97583"},children:"=>"}),n(r.span,{style:{color:"#E1E4E8"},children:" props"}),n(r.span,{style:{color:"#9ECBFF"},children:"."}),n(r.span,{style:{color:"#E1E4E8"},children:"theme"}),n(r.span,{style:{color:"#9ECBFF"},children:"."}),n(r.span,{style:{color:"#E1E4E8"},children:"colors"}),n(r.span,{style:{color:"#9ECBFF"},children:"."}),n(r.span,{style:{color:"#E1E4E8"},children:"black"}),n(r.span,{style:{color:"#9ECBFF"},children:"."}),n(r.span,{style:{color:"#E1E4E8"},children:"base"}),n(r.span,{style:{color:"#9ECBFF"},children:"};"})]}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#9ECBFF"},children:" margin-left: 2rem;"})}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#9ECBFF"},children:" transition: all ${"}),n(r.span,{style:{color:"#9ECBFF"},children:"("}),n(r.span,{style:{color:"#79B8FF"},children:"props"}),n(r.span,{style:{color:"#9ECBFF"},children:") "}),n(r.span,{style:{color:"#F97583"},children:"=>"}),n(r.span,{style:{color:"#E1E4E8"},children:" props"}),n(r.span,{style:{color:"#9ECBFF"},children:"."}),n(r.span,{style:{color:"#E1E4E8"},children:"theme"}),n(r.span,{style:{color:"#9ECBFF"},children:"."}),n(r.span,{style:{color:"#E1E4E8"},children:"transitions"}),n(r.span,{style:{color:"#9ECBFF"},children:"};"})]}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#9ECBFF"},children:" &:hover {"})}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#9ECBFF"},children:" color: ${"}),n(r.span,{style:{color:"#9ECBFF"},children:"("}),n(r.span,{style:{color:"#79B8FF"},children:"props"}),n(r.span,{style:{color:"#9ECBFF"},children:") "}),n(r.span,{style:{color:"#F97583"},children:"=>"}),n(r.span,{style:{color:"#E1E4E8"},children:" props"}),n(r.span,{style:{color:"#9ECBFF"},children:"."}),n(r.span,{style:{color:"#E1E4E8"},children:"theme"}),n(r.span,{style:{color:"#9ECBFF"},children:"."}),n(r.span,{style:{color:"#E1E4E8"},children:"colors"}),n(r.span,{style:{color:"#9ECBFF"},children:"."}),n(r.span,{style:{color:"#E1E4E8"},children:"black"}),n(r.span,{style:{color:"#9ECBFF"},children:"."}),n(r.span,{style:{color:"#E1E4E8"},children:"lighter"}),n(r.span,{style:{color:"#9ECBFF"},children:"};"})]}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#9ECBFF"},children:" }"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#9ECBFF"},children:" }"})}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#9ECBFF"},children:"`"}),n(r.span,{style:{color:"#E1E4E8"},children:";"})]})]})})}),"\n",n(r.h3,{id:"other-options---styled-jsx-sass",children:n(r.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#other-options---styled-jsx-sass",children:"Other Options - Styled JSX, Sass"})}),"\n",l(r.p,{children:["There are other options for styling, of course. Setting up Sass is a breeze when using ",n(r.code,{children:"gatsby-plugin-sass"}),", there are other plugins related to postcss, and another interesting option is ",n(r.code,{children:"styled-jsx"}),". Styled-JSX was developed by Zeit, the people that brough us Next.js. It's actually gotten very powerful as of the last few updates, and it seems very similar to emotion or styled components in functionality, such as passing props, server or client rendering, etc. Though, all the styling is done within ",n(r.code,{children:"

coding

Tags