Created
July 25, 2019 18:25
-
-
Save KyleAMathews/1883663faa0b086b6a9aad99c6677a2c to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charSet="utf-8" /> | |
| <meta http-equiv="x-ua-compatible" content="ie=edge" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" /> | |
| <style id="typography.js"> | |
| html { | |
| font-family: sans-serif; | |
| -ms-text-size-adjust: 100%; | |
| -webkit-text-size-adjust: 100% | |
| } | |
| body { | |
| margin: 0 | |
| } | |
| article, | |
| aside, | |
| details, | |
| figcaption, | |
| figure, | |
| footer, | |
| header, | |
| main, | |
| menu, | |
| nav, | |
| section, | |
| summary { | |
| display: block | |
| } | |
| audio, | |
| canvas, | |
| progress, | |
| video { | |
| display: inline-block | |
| } | |
| audio:not([controls]) { | |
| display: none; | |
| height: 0 | |
| } | |
| progress { | |
| vertical-align: baseline | |
| } | |
| [hidden], | |
| template { | |
| display: none | |
| } | |
| a { | |
| background-color: transparent; | |
| -webkit-text-decoration-skip: objects | |
| } | |
| a:active, | |
| a:hover { | |
| outline-width: 0 | |
| } | |
| abbr[title] { | |
| border-bottom: none; | |
| text-decoration: underline; | |
| text-decoration: underline dotted | |
| } | |
| b, | |
| strong { | |
| font-weight: inherit; | |
| font-weight: bolder | |
| } | |
| dfn { | |
| font-style: italic | |
| } | |
| h1 { | |
| font-size: 2em; | |
| margin: .67em 0 | |
| } | |
| mark { | |
| background-color: #ff0; | |
| color: #000 | |
| } | |
| small { | |
| font-size: 80% | |
| } | |
| sub, | |
| sup { | |
| font-size: 75%; | |
| line-height: 0; | |
| position: relative; | |
| vertical-align: baseline | |
| } | |
| sub { | |
| bottom: -.25em | |
| } | |
| sup { | |
| top: -.5em | |
| } | |
| img { | |
| border-style: none | |
| } | |
| svg:not(:root) { | |
| overflow: hidden | |
| } | |
| code, | |
| kbd, | |
| pre, | |
| samp { | |
| font-family: monospace, monospace; | |
| font-size: 1em | |
| } | |
| figure { | |
| margin: 1em 40px | |
| } | |
| hr { | |
| box-sizing: content-box; | |
| height: 0; | |
| overflow: visible | |
| } | |
| button, | |
| input, | |
| optgroup, | |
| select, | |
| textarea { | |
| font: inherit; | |
| margin: 0 | |
| } | |
| optgroup { | |
| font-weight: 700 | |
| } | |
| button, | |
| input { | |
| overflow: visible | |
| } | |
| button, | |
| select { | |
| text-transform: none | |
| } | |
| [type=reset], | |
| [type=submit], | |
| button, | |
| html [type=button] { | |
| -webkit-appearance: button | |
| } | |
| [type=button]::-moz-focus-inner, | |
| [type=reset]::-moz-focus-inner, | |
| [type=submit]::-moz-focus-inner, | |
| button::-moz-focus-inner { | |
| border-style: none; | |
| padding: 0 | |
| } | |
| [type=button]:-moz-focusring, | |
| [type=reset]:-moz-focusring, | |
| [type=submit]:-moz-focusring, | |
| button:-moz-focusring { | |
| outline: 1px dotted ButtonText | |
| } | |
| fieldset { | |
| border: 1px solid silver; | |
| margin: 0 2px; | |
| padding: .35em .625em .75em | |
| } | |
| legend { | |
| box-sizing: border-box; | |
| color: inherit; | |
| display: table; | |
| max-width: 100%; | |
| padding: 0; | |
| white-space: normal | |
| } | |
| textarea { | |
| overflow: auto | |
| } | |
| [type=checkbox], | |
| [type=radio] { | |
| box-sizing: border-box; | |
| padding: 0 | |
| } | |
| [type=number]::-webkit-inner-spin-button, | |
| [type=number]::-webkit-outer-spin-button { | |
| height: auto | |
| } | |
| [type=search] { | |
| -webkit-appearance: textfield; | |
| outline-offset: -2px | |
| } | |
| [type=search]::-webkit-search-cancel-button, | |
| [type=search]::-webkit-search-decoration { | |
| -webkit-appearance: none | |
| } | |
| ::-webkit-input-placeholder { | |
| color: inherit; | |
| opacity: .54 | |
| } | |
| ::-webkit-file-upload-button { | |
| -webkit-appearance: button; | |
| font: inherit | |
| } | |
| html { | |
| font: 100%/1.5 -apple-system, 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial', 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; | |
| box-sizing: border-box; | |
| overflow-y: scroll; | |
| background-color: #ffffff; | |
| -webkit-font-smoothing: antialiased; | |
| -moz-osx-font-smoothing: grayscale; | |
| } | |
| * { | |
| box-sizing: inherit; | |
| } | |
| *:before { | |
| box-sizing: inherit; | |
| } | |
| *:after { | |
| box-sizing: inherit; | |
| } | |
| body { | |
| color: #36313d; | |
| font-family: -apple-system, 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial', 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; | |
| font-weight: normal; | |
| word-wrap: break-word; | |
| font-kerning: normal; | |
| -moz-font-feature-settings: "kern", "liga", "clig", "calt"; | |
| -ms-font-feature-settings: "kern", "liga", "clig", "calt"; | |
| -webkit-font-feature-settings: "kern", "liga", "clig", "calt"; | |
| font-feature-settings: "kern", "liga", "clig", "calt"; | |
| } | |
| img { | |
| max-width: 100%; | |
| margin-left: 0; | |
| margin-right: 0; | |
| margin-top: 0; | |
| padding-bottom: 0; | |
| padding-left: 0; | |
| padding-right: 0; | |
| padding-top: 0; | |
| margin-bottom: 1.5rem; | |
| } | |
| h1 { | |
| margin-left: 0; | |
| margin-right: 0; | |
| margin-top: 0; | |
| padding-bottom: 0; | |
| padding-left: 0; | |
| padding-right: 0; | |
| padding-top: 0; | |
| margin-bottom: 1.5rem; | |
| color: #000000; | |
| font-family: 'Futura PT', -apple-system, 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial', 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; | |
| font-weight: 800; | |
| text-rendering: optimizeLegibility; | |
| font-size: 2rem; | |
| line-height: 1.25; | |
| } | |
| h2 { | |
| margin-left: 0; | |
| margin-right: 0; | |
| margin-top: 3rem; | |
| padding-bottom: 0; | |
| padding-left: 0; | |
| padding-right: 0; | |
| padding-top: 0; | |
| margin-bottom: 1.5rem; | |
| color: #000000; | |
| font-family: 'Futura PT', -apple-system, 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial', 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; | |
| font-weight: bold; | |
| text-rendering: optimizeLegibility; | |
| font-size: 1.51572rem; | |
| line-height: 1.25; | |
| } | |
| h3 { | |
| margin-left: 0; | |
| margin-right: 0; | |
| margin-top: 3rem; | |
| padding-bottom: 0; | |
| padding-left: 0; | |
| padding-right: 0; | |
| padding-top: 0; | |
| margin-bottom: 1.5rem; | |
| color: #000000; | |
| font-family: 'Futura PT', -apple-system, 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial', 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; | |
| font-weight: bold; | |
| text-rendering: optimizeLegibility; | |
| font-size: 1.31951rem; | |
| line-height: 1.25; | |
| } | |
| h4 { | |
| margin-left: 0; | |
| margin-right: 0; | |
| margin-top: 0; | |
| padding-bottom: 0; | |
| padding-left: 0; | |
| padding-right: 0; | |
| padding-top: 0; | |
| margin-bottom: 1.5rem; | |
| color: #000000; | |
| font-family: 'Futura PT', -apple-system, 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial', 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; | |
| font-weight: bold; | |
| text-rendering: optimizeLegibility; | |
| font-size: 1rem; | |
| line-height: 1.25; | |
| } | |
| h5 { | |
| margin-left: 0; | |
| margin-right: 0; | |
| margin-top: 0; | |
| padding-bottom: 0; | |
| padding-left: 0; | |
| padding-right: 0; | |
| padding-top: 0; | |
| margin-bottom: 1.5rem; | |
| color: #000000; | |
| font-family: 'Futura PT', -apple-system, 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial', 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; | |
| font-weight: bold; | |
| text-rendering: optimizeLegibility; | |
| font-size: 0.87055rem; | |
| line-height: 1.25; | |
| } | |
| h6 { | |
| margin-left: 0; | |
| margin-right: 0; | |
| margin-top: 0; | |
| padding-bottom: 0; | |
| padding-left: 0; | |
| padding-right: 0; | |
| padding-top: 0; | |
| margin-bottom: 1.5rem; | |
| color: #000000; | |
| font-family: 'Futura PT', -apple-system, 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial', 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; | |
| font-weight: bold; | |
| text-rendering: optimizeLegibility; | |
| font-size: 1rem; | |
| line-height: 1.25; | |
| } | |
| hgroup { | |
| margin-left: 0; | |
| margin-right: 0; | |
| margin-top: 0; | |
| padding-bottom: 0; | |
| padding-left: 0; | |
| padding-right: 0; | |
| padding-top: 0; | |
| margin-bottom: 1.5rem; | |
| } | |
| ul { | |
| margin-left: 1.5rem; | |
| margin-right: 0; | |
| margin-top: 0; | |
| padding-bottom: 0; | |
| padding-left: 0; | |
| padding-right: 0; | |
| padding-top: 0; | |
| margin-bottom: 1.5rem; | |
| list-style-position: outside; | |
| list-style-image: none; | |
| } | |
| ol { | |
| margin-left: 1.5rem; | |
| margin-right: 0; | |
| margin-top: 0; | |
| padding-bottom: 0; | |
| padding-left: 0; | |
| padding-right: 0; | |
| padding-top: 0; | |
| margin-bottom: 1.5rem; | |
| list-style-position: outside; | |
| list-style-image: none; | |
| } | |
| dl { | |
| margin-left: 0; | |
| margin-right: 0; | |
| margin-top: 0; | |
| padding-bottom: 0; | |
| padding-left: 0; | |
| padding-right: 0; | |
| padding-top: 0; | |
| margin-bottom: 1.5rem; | |
| } | |
| dd { | |
| margin-left: 0; | |
| margin-right: 0; | |
| margin-top: 0; | |
| padding-bottom: 0; | |
| padding-left: 0; | |
| padding-right: 0; | |
| padding-top: 0; | |
| margin-bottom: 1.5rem; | |
| } | |
| p { | |
| margin-left: 0; | |
| margin-right: 0; | |
| margin-top: 0; | |
| padding-bottom: 0; | |
| padding-left: 0; | |
| padding-right: 0; | |
| padding-top: 0; | |
| margin-bottom: 1.5rem; | |
| } | |
| figure { | |
| margin-left: 0; | |
| margin-right: 0; | |
| margin-top: 0; | |
| padding-bottom: 0; | |
| padding-left: 0; | |
| padding-right: 0; | |
| padding-top: 0; | |
| margin-bottom: 1.5rem; | |
| } | |
| pre { | |
| margin-left: 0; | |
| margin-right: 0; | |
| margin-top: 0; | |
| padding-bottom: 0; | |
| padding-left: 0; | |
| padding-right: 0; | |
| padding-top: 0; | |
| margin-bottom: 1.5rem; | |
| font-size: 0.85rem; | |
| line-height: 1.42; | |
| background: hsla(0, 0%, 0%, 0.04); | |
| border-radius: 3px; | |
| overflow: auto; | |
| word-wrap: normal; | |
| padding: 1.5rem; | |
| } | |
| table { | |
| margin-left: 0; | |
| margin-right: 0; | |
| margin-top: 0; | |
| padding-bottom: 0; | |
| padding-left: 0; | |
| padding-right: 0; | |
| padding-top: 0; | |
| margin-bottom: 1.5rem; | |
| font-size: 1rem; | |
| line-height: 1.5rem; | |
| border-collapse: collapse; | |
| width: 100%; | |
| } | |
| fieldset { | |
| margin-left: 0; | |
| margin-right: 0; | |
| margin-top: 0; | |
| padding-bottom: 0; | |
| padding-left: 0; | |
| padding-right: 0; | |
| padding-top: 0; | |
| margin-bottom: 1.5rem; | |
| } | |
| blockquote { | |
| margin-left: 0; | |
| margin-right: 1.5rem; | |
| margin-top: 0; | |
| padding-bottom: 0; | |
| padding-left: 1.5rem; | |
| padding-right: 0; | |
| padding-top: 0; | |
| margin-bottom: 1.5rem; | |
| border-left: 0.25rem solid #f0f0f2; | |
| } | |
| form { | |
| margin-left: 0; | |
| margin-right: 0; | |
| margin-top: 0; | |
| padding-bottom: 0; | |
| padding-left: 0; | |
| padding-right: 0; | |
| padding-top: 0; | |
| margin-bottom: 1.5rem; | |
| } | |
| noscript { | |
| margin-left: 0; | |
| margin-right: 0; | |
| margin-top: 0; | |
| padding-bottom: 0; | |
| padding-left: 0; | |
| padding-right: 0; | |
| padding-top: 0; | |
| margin-bottom: 1.5rem; | |
| } | |
| iframe { | |
| margin-left: 0; | |
| margin-right: 0; | |
| margin-top: 0; | |
| padding-bottom: 0; | |
| padding-left: 0; | |
| padding-right: 0; | |
| padding-top: 0; | |
| margin-bottom: 1.5rem; | |
| border: 0; | |
| } | |
| hr { | |
| margin-left: 0; | |
| margin-right: 0; | |
| margin-top: 0; | |
| padding-bottom: 0; | |
| padding-left: 0; | |
| padding-right: 0; | |
| padding-top: 0; | |
| margin-bottom: calc(1.5rem - 1px); | |
| background: hsla(0, 0%, 0%, 0.2); | |
| border: none; | |
| height: 1px; | |
| background-color: #f0f0f2; | |
| } | |
| address { | |
| margin-left: 0; | |
| margin-right: 0; | |
| margin-top: 0; | |
| padding-bottom: 0; | |
| padding-left: 0; | |
| padding-right: 0; | |
| padding-top: 0; | |
| margin-bottom: 1.5rem; | |
| } | |
| b { | |
| font-weight: bold; | |
| } | |
| strong { | |
| font-weight: bold; | |
| } | |
| dt { | |
| font-weight: bold; | |
| } | |
| th { | |
| font-weight: bold; | |
| } | |
| li { | |
| margin-bottom: calc(1.5rem / 2); | |
| } | |
| ol li { | |
| padding-left: 0; | |
| } | |
| ul li { | |
| padding-left: 0; | |
| } | |
| li > ol { | |
| margin-left: 1.5rem; | |
| margin-bottom: calc(1.5rem / 2); | |
| margin-top: calc(1.5rem / 2); | |
| } | |
| li > ul { | |
| margin-left: 1.5rem; | |
| margin-bottom: calc(1.5rem / 2); | |
| margin-top: calc(1.5rem / 2); | |
| } | |
| blockquote *:last-child { | |
| margin-bottom: 0; | |
| } | |
| li *:last-child { | |
| margin-bottom: 0; | |
| } | |
| p *:last-child { | |
| margin-bottom: 0; | |
| } | |
| li > p { | |
| margin-bottom: calc(1.5rem / 2); | |
| } | |
| code { | |
| font-size: 0.85rem; | |
| line-height: 1.5rem; | |
| } | |
| kbd { | |
| font-size: 0.85rem; | |
| line-height: 1.5rem; | |
| } | |
| samp { | |
| font-size: 0.85rem; | |
| line-height: 1.5rem; | |
| } | |
| abbr { | |
| border-bottom: 1px dotted hsla(0, 0%, 0%, 0.5); | |
| cursor: help; | |
| } | |
| acronym { | |
| border-bottom: 1px dotted hsla(0, 0%, 0%, 0.5); | |
| cursor: help; | |
| } | |
| abbr[title] { | |
| border-bottom: 1px dotted hsla(0, 0%, 0%, 0.5); | |
| cursor: help; | |
| text-decoration: none; | |
| } | |
| thead { | |
| text-align: left; | |
| } | |
| td, | |
| th { | |
| text-align: left; | |
| border-bottom: 1px solid hsla(0, 0%, 0%, 0.12); | |
| font-feature-settings: "tnum"; | |
| -moz-font-feature-settings: "tnum"; | |
| -ms-font-feature-settings: "tnum"; | |
| -webkit-font-feature-settings: "tnum"; | |
| padding-left: 1rem; | |
| padding-right: 1rem; | |
| padding-top: 0.75rem; | |
| padding-bottom: calc(0.75rem - 1px); | |
| } | |
| th:first-child, | |
| td:first-child { | |
| padding-left: 0; | |
| } | |
| th:last-child, | |
| td:last-child { | |
| padding-right: 0; | |
| } | |
| tt, | |
| code { | |
| background-color: hsla(0, 0%, 0%, 0.04); | |
| border-radius: 3px; | |
| font-family: "SFMono-Regular", Consolas, "Roboto Mono", "Droid Sans Mono", "Liberation Mono", Menlo, Courier, monospace; | |
| padding: 0; | |
| padding-top: 0.2em; | |
| padding-bottom: 0.2em; | |
| } | |
| pre code { | |
| background: none; | |
| line-height: 1.42; | |
| } | |
| code:before, | |
| code:after, | |
| tt:before, | |
| tt:after { | |
| letter-spacing: -0.2em; | |
| content: " "; | |
| } | |
| pre code:before, | |
| pre code:after, | |
| pre tt:before, | |
| pre tt:after { | |
| content: none; | |
| } | |
| a { | |
| text-decoration: none; | |
| } | |
| h1, | |
| h2, | |
| h3, | |
| h4, | |
| h5, | |
| h6 { | |
| letter-spacing: -0.015em; | |
| } | |
| h4, | |
| h5, | |
| h6 { | |
| font-size: 1.125rem; | |
| } | |
| h5, | |
| h6 { | |
| font-weight: 400; | |
| } | |
| th, | |
| td { | |
| border-color: #f0f0f2; | |
| } | |
| tt, | |
| code, | |
| kbd, | |
| samp { | |
| line-height: inherit; | |
| } | |
| h1 code, | |
| h2 code, | |
| h3 code, | |
| h4 code, | |
| h5 code, | |
| h6 code { | |
| font-weight: 400; | |
| font-size: 82.5%; | |
| } | |
| tt, | |
| code, | |
| kbd { | |
| background: #fbf2e9; | |
| padding-top: 0.2em; | |
| padding-bottom: 0.2em; | |
| } | |
| tt, | |
| code, | |
| kbd, | |
| .gatsby-code-title { | |
| font-family: SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace; | |
| font-size: 90%; | |
| font-variant: none; | |
| -webkit-font-feature-settings: "clig" 0, "calt" 0; | |
| font-feature-settings: "clig" 0, "calt" 0; | |
| } | |
| .gatsby-highlight { | |
| background: #fdfaf6; | |
| position: relative; | |
| -webkit-overflow-scrolling: touch; | |
| } | |
| .gatsby-highlight pre[class*='language-'] { | |
| background-color: transparent; | |
| border: 0; | |
| padding: 1.5rem 0; | |
| -webkit-overflow-scrolling: touch; | |
| } | |
| .gatsby-highlight pre[class*='language-']::before { | |
| background: #ddd; | |
| border-radius: 0 0 4px 4px; | |
| color: #000000; | |
| font-size: 0.75rem; | |
| font-family: SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace; | |
| letter-spacing: 0.075em; | |
| line-height: 1; | |
| padding: 0.25rem 0.5rem; | |
| position: absolute; | |
| left: 1.5rem; | |
| text-align: right; | |
| text-transform: uppercase; | |
| top: 0; | |
| } | |
| .gatsby-highlight pre[class='language-javascript']::before { | |
| content: 'js'; | |
| background: #f7df1e; | |
| } | |
| .gatsby-highlight pre[class='language-js']::before { | |
| content: 'js'; | |
| background: #f7df1e; | |
| } | |
| .gatsby-highlight pre[class='language-jsx']::before { | |
| content: 'jsx'; | |
| background: #61dafb; | |
| } | |
| .gatsby-highlight pre[class='language-graphql']::before { | |
| content: 'GraphQL'; | |
| background: #E10098; | |
| color: #ffffff; | |
| } | |
| .gatsby-highlight pre[class='language-html']::before { | |
| content: 'html'; | |
| background: #005A9C; | |
| color: #ffffff; | |
| } | |
| .gatsby-highlight pre[class='language-css']::before { | |
| content: 'css'; | |
| background: #ff9800; | |
| color: #ffffff; | |
| } | |
| .gatsby-highlight pre[class='language-mdx']::before { | |
| content: 'mdx'; | |
| background: #f9ac00; | |
| color: #ffffff; | |
| font-weight: 400; | |
| } | |
| .gatsby-highlight pre[class='language-shell']::before { | |
| content: 'shell'; | |
| } | |
| .gatsby-highlight pre[class='language-sh']::before { | |
| content: 'sh'; | |
| } | |
| .gatsby-highlight pre[class='language-bash']::before { | |
| content: 'bash'; | |
| } | |
| .gatsby-highlight pre[class='language-yaml']::before { | |
| content: 'yaml'; | |
| background: #ffa8df; | |
| } | |
| .gatsby-highlight pre[class='language-markdown']::before { | |
| content: 'md'; | |
| } | |
| .gatsby-highlight pre[class='language-json']::before, | |
| .gatsby-highlight pre[class='language-json5']::before { | |
| content: 'json'; | |
| background: linen; | |
| } | |
| .gatsby-highlight pre[class='language-diff']::before { | |
| content: 'diff'; | |
| background: #e6ffed; | |
| } | |
| .gatsby-highlight pre[class='language-text']::before { | |
| content: 'text'; | |
| background: #ffffff; | |
| } | |
| .gatsby-highlight pre[class='language-flow']::before { | |
| content: 'flow'; | |
| background: #E8BD36; | |
| } | |
| .gatsby-highlight pre code { | |
| display: block; | |
| font-size: 100%; | |
| line-height: 1.5; | |
| float: left; | |
| min-width: 100%; | |
| padding: 0 1.5rem; | |
| } | |
| .gatsby-highlight-code-line { | |
| background: #faede5; | |
| margin-left: -1.5rem; | |
| margin-right: -1.5rem; | |
| padding-left: 1.25rem; | |
| padding-right: 1.5rem; | |
| border-left: 0.25rem solid #f1beb6; | |
| display: block; | |
| } | |
| .gatsby-highlight pre::-webkit-scrollbar { | |
| width: 0.5rem; | |
| height: 0.5rem; | |
| } | |
| .gatsby-highlight pre::-webkit-scrollbar-thumb { | |
| background: #f4d1c6; | |
| } | |
| .gatsby-highlight pre::-webkit-scrollbar-track { | |
| background: #faede5; | |
| } | |
| .gatsby-resp-image-link + em, | |
| .gatsby-resp-image-wrapper + em { | |
| font-size: 0.875rem; | |
| line-height: 1.25; | |
| padding-top: 0.5625rem; | |
| margin-bottom: 3rem; | |
| display: block; | |
| font-style: normal; | |
| color: #78757a; | |
| position: relative; | |
| } | |
| .gatsby-resp-image-link + em a, | |
| .gatsby-resp-image-wrapper + em a { | |
| font-weight: 400; | |
| color: #8a4baf; | |
| } | |
| .main-body a { | |
| color: #8a4baf; | |
| text-decoration: none; | |
| transition: all 100ms cubic-bezier(0.4, 0, 0.2, 1); | |
| border-bottom: 1px solid #d9bae8; | |
| } | |
| .main-body a:hover { | |
| border-bottom-color: #8a4baf; | |
| } | |
| .post-body h1 { | |
| font-weight: 700; | |
| } | |
| .post-body figure img { | |
| margin-bottom: 0; | |
| } | |
| .post-body figcaption { | |
| color: #78757a; | |
| font-size: 87.5%; | |
| margin-top: 0.25rem; | |
| margin-bottom: 0.75rem; | |
| } | |
| .main-body a.anchor { | |
| color: inherit; | |
| fill: #8a4baf; | |
| text-decoration: none; | |
| border-bottom: none; | |
| } | |
| .main-body a.anchor:hover { | |
| background: none; | |
| } | |
| .main-body a.gatsby-resp-image-link { | |
| border-bottom: transparent; | |
| margin-top: 3rem; | |
| margin-bottom: 3rem; | |
| } | |
| .main-body figure a.gatsby-resp-image-link { | |
| border-bottom: transparent; | |
| margin-top: 3rem; | |
| margin-bottom: 0; | |
| } | |
| .gatsby-highlight, | |
| .gatsby-code-title, | |
| .post-body .gatsby-resp-image-link { | |
| margin-left: -1.5rem; | |
| margin-right: -1.5rem; | |
| } | |
| .gatsby-resp-image-link { | |
| border-radius: 2px; | |
| overflow: hidden; | |
| } | |
| .gatsby-code-title { | |
| background: #fdfaf6; | |
| border-bottom: 1px solid #faede5; | |
| color: #866c5b; | |
| padding: 1.25rem 1.5rem 1rem; | |
| font-size: 0.75rem; | |
| } | |
| @media (min-width: 750px) { | |
| .gatsby-highlight, | |
| .gatsby-resp-image-link, | |
| .gatsby-code-title { | |
| margin-left: 0; | |
| margin-right: 0; | |
| border-radius: 4px; | |
| } | |
| .gatsby-code-title { | |
| border-radius: 4px 4px 0 0; | |
| } | |
| .gatsby-code-title + .gatsby-highlight { | |
| border-radius: 0 0 4px 4px; | |
| } | |
| } | |
| video { | |
| width: 100%; | |
| margin-bottom: 1.5rem; | |
| } | |
| .twitter-tweet-rendered { | |
| margin: 3rem auto !important; | |
| } | |
| .egghead-video { | |
| border: none; | |
| } | |
| @media (min-width: 1000px) { | |
| .gatsby-highlight, | |
| .post-body .gatsby-resp-image-link, | |
| .gatsby-code-title { | |
| margin-left: -1.5rem; | |
| margin-right: -1.5rem; | |
| } | |
| } | |
| @media (min-width: 1600px) { | |
| html { | |
| font-size: 112.5%; | |
| } | |
| } | |
| .token { | |
| display: inline; | |
| } | |
| .token.comment, | |
| .token.block-comment, | |
| .token.prolog, | |
| .token.doctype, | |
| .token.cdata { | |
| color: #6f8f39; | |
| } | |
| .token.punctuation { | |
| color: #53450e; | |
| } | |
| .token.property, | |
| .token.tag, | |
| .token.boolean, | |
| .token.number, | |
| .token.function-name, | |
| .token.constant, | |
| .token.symbol { | |
| color: #4084a1; | |
| } | |
| .token.selector, | |
| .token.attr-name, | |
| .token.string, | |
| .token.char, | |
| .token.function, | |
| .token.builtin { | |
| color: #b3568b; | |
| } | |
| .token.operator, | |
| .token.entity, | |
| .token.url, | |
| .token.variable {} | |
| .token.atrule, | |
| .token.attr-value, | |
| .token.keyword, | |
| .token.class-name { | |
| color: #538eb6; | |
| } | |
| .token.inserted { | |
| color: #4a9c59; | |
| } | |
| .token.deleted { | |
| color: #e45c5c; | |
| } | |
| .token.regex, | |
| .token.important { | |
| color: #d88489; | |
| } | |
| .language-css .token.string, | |
| .style .token.string { | |
| color: #a2466c; | |
| } | |
| .token.important { | |
| font-weight: 400; | |
| } | |
| .token.bold { | |
| font-weight: 700; | |
| } | |
| .token.italic { | |
| font-style: italic; | |
| } | |
| .token.entity { | |
| cursor: help; | |
| } | |
| .namespace { | |
| opacity: 0.7; | |
| } | |
| .token.tab:not(:empty):before, | |
| .token.cr:before, | |
| .token.lf:before { | |
| color: #e0d7d1; | |
| } | |
| .gatsby-resp-image-link + em a[href*='//']:after { | |
| content: " " url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20class='i-external'%20viewBox='0%200%2032%2032'%20width='14'%20height='14'%20fill='none'%20stroke='%23744C9E'%20stroke-linecap='round'%20stroke-linejoin='round'%20stroke-width='9.38%'%3E%3Cpath%20d='M14%209%20L3%209%203%2029%2023%2029%2023%2018%20M18%204%20L28%204%2028%2014%20M28%204%20L14%2018'/%3E%3C/svg%3E"); | |
| } | |
| </style> | |
| <style data-href="/styles.6a1b9eeedee588fc04c7.css"> | |
| @font-face { | |
| font-family: Futura PT; | |
| font-display: swap; | |
| src: url(/static/ftn45-webfont-c2439033a37a428d148b673062131f47.woff2) format("woff2"), url(/static/ftn45-webfont-2b95f947aed524d9309c78cc9c9c7528.woff) format("woff"), url(/static/ftn45-webfont-d997e84e92366d98a8e00c4cc2731cfe.ttf) format("truetype"); | |
| font-weight: 400; | |
| font-style: normal | |
| } | |
| @font-face { | |
| font-family: Futura PT; | |
| font-display: swap; | |
| src: url(/static/ftn46-webfont-726bd3e3a1d23f4229179d8e89e581bb.woff2) format("woff2"), url(/static/ftn46-webfont-9b6d0a603264721172df60d49baebcb0.woff) format("woff"), url(/static/ftn46-webfont-38c87a1ea18a58321f68bea31d32b414.ttf) format("truetype"); | |
| font-weight: 400; | |
| font-style: italic | |
| } | |
| @font-face { | |
| font-family: Futura PT; | |
| font-display: swap; | |
| src: url(/static/ftn65-webfont-0ddc10d20bd3c3e162e4ea9b49c82856.woff2) format("woff2"), url(/static/ftn65-webfont-d40bda222a86b1160230720097056b18.woff) format("woff"), url(/static/ftn65-webfont-b9e7a71256335f15df8f2734393ee767.ttf) format("truetype"); | |
| font-weight: 700; | |
| font-style: normal | |
| } | |
| @font-face { | |
| font-family: Futura PT; | |
| font-display: swap; | |
| src: url(/static/ftn66-webfont-a12b8b243dfe032db7eafed8267c778b.woff2) format("woff2"), url(/static/ftn66-webfont-f1434ef355382a2b1ccf366e0ddf513f.woff) format("woff"), url(/static/ftn66-webfont-8188e45e22950965e828309b38e6e5a1.ttf) format("truetype"); | |
| font-weight: 700; | |
| font-style: italic | |
| } | |
| /*! Generated by Fontspring (https://www.fontspring.com) on June 11, 2019 | |
| * | |
| * Fully installable fonts can be purchased at http://www.fontspring.com | |
| * | |
| * The fonts included in this stylesheet are subject to the End User License you purchased | |
| * from Fontspring. The fonts are protected under domestic and international trademark and | |
| * copyright law. You are prohibited from modifying, reverse engineering, duplicating, or | |
| * distributing this font software. | |
| * | |
| * (c) 2010-2019 Fontspring | |
| * | |
| * | |
| */ | |
| @font-face { | |
| font-family: Futura PT; | |
| font-display: swap; | |
| src: url(/static/ftn85-webfont-8723b7c6d2438ea9aaa9337f9e86876f.eot); | |
| src: url(/static/ftn85-webfont-8723b7c6d2438ea9aaa9337f9e86876f.eot?#iefix) format("embedded-opentype"), url(/static/ftn85-webfont-6ad5290a317be4dc9031cd1e82fc080b.woff2) format("woff2"), url(/static/ftn85-webfont-6750568fc344deab1d90d6a1baf9d3f4.woff) format("woff"), url(/static/ftn85-webfont-248f6063b34fdba35a56b2f49a1687b9.ttf) format("truetype"); | |
| font-weight: 800; | |
| font-style: normal | |
| } | |
| </style> | |
| <meta name="generator" content="Gatsby 2.13.40" /> | |
| <style type="text/css"> | |
| .gatsby-resp-image-image { | |
| width: 100%; | |
| height: 100%; | |
| margin: 0; | |
| vertical-align: middle; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| color: transparent; | |
| } | |
| </style> | |
| <style type="text/css"> | |
| .anchor { | |
| float: left; | |
| padding-right: 4px; | |
| margin-left: -20px; | |
| } | |
| h1 .anchor svg, | |
| h2 .anchor svg, | |
| h3 .anchor svg, | |
| h4 .anchor svg, | |
| h5 .anchor svg, | |
| h6 .anchor svg { | |
| visibility: hidden; | |
| } | |
| h1:hover .anchor svg, | |
| h2:hover .anchor svg, | |
| h3:hover .anchor svg, | |
| h4:hover .anchor svg, | |
| h5:hover .anchor svg, | |
| h6:hover .anchor svg, | |
| h1 .anchor:focus svg, | |
| h2 .anchor:focus svg, | |
| h3 .anchor:focus svg, | |
| h4 .anchor:focus svg, | |
| h5 .anchor:focus svg, | |
| h6 .anchor:focus svg { | |
| visibility: visible; | |
| } | |
| </style> | |
| <script> | |
| document.addEventListener("DOMContentLoaded", function(event) { | |
| var hash = window.decodeURI(location.hash.replace('#', '')) | |
| if (hash !== '') { | |
| var element = document.getElementById(hash) | |
| if (element) { | |
| var offset = element.offsetTop | |
| // Wait for the browser to finish rendering before scrolling. | |
| setTimeout((function() { | |
| window.scrollTo(0, offset - 0) | |
| }), 0) | |
| } | |
| } | |
| }) | |
| </script> | |
| <link rel="shortcut icon" href="/icons/icon-48x48.png?v=008654519ce705ac7bc44303a9014606" /> | |
| <link rel="manifest" href="/manifest.webmanifest" /> | |
| <meta name="theme-color" content="#663399" /> | |
| <link rel="apple-touch-icon" sizes="48x48" href="/icons/icon-48x48.png?v=008654519ce705ac7bc44303a9014606" /> | |
| <link rel="apple-touch-icon" sizes="72x72" href="/icons/icon-72x72.png?v=008654519ce705ac7bc44303a9014606" /> | |
| <link rel="apple-touch-icon" sizes="96x96" href="/icons/icon-96x96.png?v=008654519ce705ac7bc44303a9014606" /> | |
| <link rel="apple-touch-icon" sizes="144x144" href="/icons/icon-144x144.png?v=008654519ce705ac7bc44303a9014606" /> | |
| <link rel="apple-touch-icon" sizes="192x192" href="/icons/icon-192x192.png?v=008654519ce705ac7bc44303a9014606" /> | |
| <link rel="apple-touch-icon" sizes="256x256" href="/icons/icon-256x256.png?v=008654519ce705ac7bc44303a9014606" /> | |
| <link rel="apple-touch-icon" sizes="384x384" href="/icons/icon-384x384.png?v=008654519ce705ac7bc44303a9014606" /> | |
| <link rel="apple-touch-icon" sizes="512x512" href="/icons/icon-512x512.png?v=008654519ce705ac7bc44303a9014606" /> | |
| <title data-react-helmet="true">SEO with Gatsby | GatsbyJS</title> | |
| <link data-react-helmet="true" rel="canonical" href="https://www.gatsbyjs.org/docs/seo/" /> | |
| <meta data-react-helmet="true" name="description" content="Gatsby helps your site place better in search engines. Some advantages come out of the box and some require configuration. Server rendering…" /> | |
| <meta data-react-helmet="true" property="og:description" content="Gatsby helps your site place better in search engines. Some advantages come out of the box and some require configuration. Server rendering…" /> | |
| <meta data-react-helmet="true" property="og:title" content="SEO with Gatsby" /> | |
| <meta data-react-helmet="true" name="twitter:description" content="Gatsby helps your site place better in search engines. Some advantages come out of the box and some require configuration. Server rendering…" /> | |
| <meta data-react-helmet="true" name="twitter.label1" content="Reading time" /> | |
| <meta data-react-helmet="true" name="twitter:data1" content="1 min read" /> | |
| <meta data-react-helmet="true" name="docsearch:version" content="2.0" /> | |
| <meta data-react-helmet="true" name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no,viewport-fit=cover" /> | |
| <meta data-react-helmet="true" property="og:url" content="https://www.gatsbyjs.org" /> | |
| <meta data-react-helmet="true" property="og:type" content="website" /> | |
| <meta data-react-helmet="true" property="og:locale" content="en" /> | |
| <meta data-react-helmet="true" property="og:site_name" content="GatsbyJS" /> | |
| <meta data-react-helmet="true" property="og:image" content="https://www.gatsbyjs.org/static/gatsby-icon-4a9773549091c227cd2eb82ccd9c5e3a.png" /> | |
| <meta data-react-helmet="true" property="og:image:width" content="512" /> | |
| <meta data-react-helmet="true" property="og:image:height" content="512" /> | |
| <meta data-react-helmet="true" name="twitter:card" content="summary" /> | |
| <meta data-react-helmet="true" name="twitter:site" content="@gatsbyjs" /> | |
| <link rel="sitemap" type="application/xml" href="/sitemap.xml" /> | |
| <link rel="preconnect dns-prefetch" href="https://www.google-analytics.com" /> | |
| <link rel="alternate" type="application/rss+xml" href="/blog/rss.xml" /> | |
| <link rel="dns-prefetch" href="https://cdn.jsdelivr.net" /> | |
| <link rel="dns-prefetch" href="https://www.google-analytics.com" /> | |
| <link as="script" rel="preload" href="/webpack-runtime-e6dd956aa1952c03dac3.js" /> | |
| <link as="script" rel="preload" href="/app-5d873e85996efb087f27.js" /> | |
| <link as="script" rel="preload" href="/styles-f2fe70701828434e64ea.js" /> | |
| <link as="script" rel="preload" href="/0-1ca549877e2b191cb4f2.js" /> | |
| <link as="script" rel="preload" href="/2-fca3321f556d3625dd39.js" /> | |
| <link as="script" rel="preload" href="/3-92f22224542de1c55728.js" /> | |
| <link as="script" rel="preload" href="/component---src-templates-template-docs-markdown-js-36a02eff386e0d4aa7d0.js" /> | |
| <link as="fetch" rel="preload" href="/page-data/docs/seo/page-data.json" crossorigin="use-credentials" /> | |
| </head> | |
| <body> | |
| <noscript id="gatsby-noscript">This app works best with JavaScript enabled.</noscript> | |
| <div id="___gatsby"> | |
| <div style="outline:none" tabindex="-1" role="group" id="gatsby-focus-wrapper"> | |
| <style data-emotion-css="udka6y"> | |
| .css-udka6y { | |
| border: 0; | |
| color: #663399; | |
| -webkit-clip: rect(0 0 0 0); | |
| clip: rect(0 0 0 0); | |
| height: 1px; | |
| width: 1px; | |
| margin: -1px; | |
| padding: 0; | |
| overflow: hidden; | |
| position: absolute; | |
| z-index: 100; | |
| font-size: 0.875rem; | |
| } | |
| .css-udka6y:focus { | |
| padding: 1rem; | |
| position: fixed; | |
| top: 1.5rem; | |
| left: 1.5rem; | |
| background: #ffffff; | |
| -webkit-text-decoration: none; | |
| text-decoration: none; | |
| width: auto; | |
| height: auto; | |
| -webkit-clip: auto; | |
| clip: auto; | |
| } | |
| </style><a class="css-udka6y" href="#reach-skip-nav" data-reach-skip-link="true">Skip to main content</a> | |
| <style data-emotion-css="cjab5p"> | |
| .css-cjab5p { | |
| background-color: #663399; | |
| height: 2.5rem; | |
| position: fixed; | |
| width: 100%; | |
| z-index: 10; | |
| padding-left: env(safe-area-inset-left); | |
| padding-right: env(safe-area-inset-right); | |
| } | |
| </style> | |
| <aside class="banner css-cjab5p e1l69j060"> | |
| <style data-emotion-css="14n4ldk"> | |
| .css-14n4ldk { | |
| -webkit-align-items: center; | |
| -webkit-box-align: center; | |
| -ms-flex-align: center; | |
| align-items: center; | |
| display: -webkit-box; | |
| display: -webkit-flex; | |
| display: -ms-flexbox; | |
| display: flex; | |
| height: 2.5rem; | |
| overflow-x: auto; | |
| -webkit-mask-image: linear-gradient(to right, transparent, #663399 1.5rem, #663399 96%, transparent); | |
| mask-image: linear-gradient(to right, transparent, #663399 1.5rem, #663399 96%, transparent); | |
| } | |
| </style> | |
| <div class="css-14n4ldk e1l69j061"> | |
| <style data-emotion-css="olpx4"> | |
| .css-olpx4 { | |
| color: #f1defa; | |
| font-family: Futura PT, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji; | |
| padding-left: 1.5rem; | |
| padding-right: 1.5rem; | |
| -webkit-font-smoothing: antialiased; | |
| white-space: nowrap; | |
| } | |
| .css-olpx4 a { | |
| color: #ffffff; | |
| border-bottom: 1px solid #ffffff; | |
| } | |
| .css-olpx4 a:hover { | |
| color: #ffffff; | |
| border-bottom-color: #ffffffa0; | |
| } | |
| </style> | |
| <div class="css-olpx4 e1l69j062">Using Gatsby for your clients or team? Start 14-day free trial of <a href="https://www.gatsbyjs.com/preview">Gatsby Preview</a></div> | |
| </div> | |
| </aside> | |
| <style data-emotion-css="f7wge8"> | |
| .css-f7wge8 { | |
| background-color: rgba(255, 255, 255, 0.975); | |
| position: relative; | |
| height: 3.75rem; | |
| left: 0; | |
| right: 0; | |
| top: 2.5rem; | |
| z-index: 5; | |
| padding-left: env(safe-area-inset-left); | |
| padding-right: env(safe-area-inset-right); | |
| } | |
| @media (min-width:42rem) { | |
| .css-f7wge8 { | |
| position: fixed; | |
| } | |
| } | |
| </style> | |
| <header class="css-f7wge8"> | |
| <style data-emotion-css="ok3t7s"> | |
| .css-ok3t7s { | |
| margin: 0 auto; | |
| padding-left: 1.5rem; | |
| padding-right: 1.5rem; | |
| font-family: Futura PT, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji; | |
| display: -webkit-box; | |
| display: -webkit-flex; | |
| display: -ms-flexbox; | |
| display: flex; | |
| -webkit-align-items: center; | |
| -webkit-box-align: center; | |
| -ms-flex-align: center; | |
| align-items: center; | |
| width: 100%; | |
| height: 100%; | |
| position: relative; | |
| } | |
| .css-ok3t7s:after { | |
| content: ''; | |
| position: absolute; | |
| bottom: 0; | |
| left: 0; | |
| right: 0; | |
| height: 1px; | |
| z-index: -1; | |
| background: #f0f0f2; | |
| } | |
| </style> | |
| <div class="css-ok3t7s"> | |
| <style data-emotion-css="1jr27r2"> | |
| .css-1jr27r2 { | |
| -webkit-align-items: center; | |
| -webkit-box-align: center; | |
| -ms-flex-align: center; | |
| align-items: center; | |
| color: inherit; | |
| display: -webkit-box; | |
| display: -webkit-flex; | |
| display: -ms-flexbox; | |
| display: flex; | |
| -webkit-flex-shrink: 0; | |
| -ms-flex-negative: 0; | |
| flex-shrink: 0; | |
| margin-right: 0.75rem; | |
| -webkit-text-decoration: none; | |
| text-decoration: none; | |
| } | |
| </style> | |
| <a aria-label="Gatsby, Back to homepage" class="css-1jr27r2" href="/"> | |
| <style data-emotion-css="guj4ht"> | |
| .css-guj4ht { | |
| height: 1.5rem; | |
| margin: 0; | |
| } | |
| </style><img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDYgMjgiIGZvY3VzYWJsZT0iZmFsc2UiPgogIDxwYXRoIGQ9Ik02Mi45IDEyaDIuOHYxMGgtMi44di0xLjNjLTEgMS41LTIuMyAxLjYtMy4xIDEuNi0zLjEgMC01LjEtMi40LTUuMS01LjMgMC0zIDItNS4zIDQuOS01LjMuOCAwIDIuMy4xIDMuMiAxLjZWMTJ6bS01LjIgNWMwIDEuNiAxLjEgMi44IDIuOCAyLjggMS42IDAgMi44LTEuMiAyLjgtMi44IDAtMS42LTEuMS0yLjgtMi44LTIuOC0xLjYgMC0yLjggMS4yLTIuOCAyLjh6bTEzLjUtMi42VjIyaC0yLjh2LTcuNmgtMS4xVjEyaDEuMVY4LjZoMi44VjEyaDEuOXYyLjRoLTEuOXptOC41IDBjLS43LS42LTEuMy0uNy0xLjYtLjctLjcgMC0xLjEuMy0xLjEuOCAwIC4zLjEuNi45LjlsLjcuMmMuOC4zIDIgLjYgMi41IDEuNC4zLjQuNSAxIC41IDEuNyAwIC45LS4zIDEuOC0xLjEgMi41cy0xLjggMS4xLTMgMS4xYy0yLjEgMC0zLjItMS0zLjktMS43bDEuNS0xLjdjLjYuNiAxLjQgMS4yIDIuMiAxLjIuOCAwIDEuNC0uNCAxLjQtMS4xIDAtLjYtLjUtLjktLjktMWwtLjYtLjJjLS43LS4zLTEuNS0uNi0yLjEtMS4yLS41LS41LS44LTEuMS0uOC0xLjkgMC0xIC41LTEuOCAxLTIuMy44LS42IDEuOC0uNyAyLjYtLjcuNyAwIDEuOS4xIDMuMiAxLjFsLTEuNCAxLjZ6bTYuMS0xLjFjMS0xLjQgMi40LTEuNiAzLjItMS42IDIuOSAwIDQuOSAyLjMgNC45IDUuM3MtMiA1LjMtNSA1LjNjLS42IDAtMi4xLS4xLTMuMi0xLjZWMjJIODNWNS4yaDIuOHY4LjF6bS0uMyAzLjdjMCAxLjYgMS4xIDIuOCAyLjggMi44IDEuNiAwIDIuOC0xLjIgMi44LTIuOCAwLTEuNi0xLjEtMi44LTIuOC0yLjgtMS43IDAtMi44IDEuMi0yLjggMi44em0xMyAzLjVMOTMuNyAxMkg5N2wzLjEgNS43IDIuOC01LjdoMy4ybC04IDE1LjNoLTMuMmwzLjYtNi44ek01NCAxMy43aC03djIuOGgzLjdjLS42IDEuOS0yIDMuMi00LjYgMy4yLTIuOSAwLTUtMi40LTUtNS4zUzQzLjEgOSA0NiA5YzEuNiAwIDMuMi44IDQuMiAyLjFsMi4zLTEuNUM1MSA3LjUgNDguNiA2LjMgNDYgNi4zYy00LjQgMC04IDMuNi04IDguMXMzLjQgOC4xIDggOC4xIDgtMy42IDgtOC4xYy4xLS4zIDAtLjUgMC0uN3oiLz4KICA8cGF0aCBkPSJNMjUgMTRoLTd2Mmg0LjhjLS43IDMtMi45IDUuNS01LjggNi41TDUuNSAxMWMxLjItMy41IDQuNi02IDguNS02IDMgMCA1LjcgMS41IDcuNCAzLjhsMS41LTEuM0MyMC45IDQuOCAxNy43IDMgMTQgMyA4LjggMyA0LjQgNi43IDMuMyAxMS42bDEzLjIgMTMuMkMyMS4zIDIzLjYgMjUgMTkuMiAyNSAxNHptLTIyIC4xYzAgMi44IDEuMSA1LjUgMy4yIDcuNiAyLjEgMi4xIDQuOSAzLjIgNy42IDMuMkwzIDE0LjF6IiBmaWxsPSIjZmZmIi8+CiAgPHBhdGggZD0iTTE0IDBDNi4zIDAgMCA2LjMgMCAxNHM2LjMgMTQgMTQgMTQgMTQtNi4zIDE0LTE0UzIxLjcgMCAxNCAwek02LjIgMjEuOEM0LjEgMTkuNyAzIDE2LjkgMyAxNC4yTDEzLjkgMjVjLTIuOC0uMS01LjYtMS4xLTcuNy0zLjJ6bTEwLjIgMi45TDMuMyAxMS42QzQuNCA2LjcgOC44IDMgMTQgM2MzLjcgMCA2LjkgMS44IDguOSA0LjVsLTEuNSAxLjNDMTkuNyA2LjUgMTcgNSAxNCA1Yy0zLjkgMC03LjIgMi41LTguNSA2TDE3IDIyLjVjMi45LTEgNS4xLTMuNSA1LjgtNi41SDE4di0yaDdjMCA1LjItMy43IDkuNi04LjYgMTAuN3oiIGZpbGw9IiM2MzkiLz4KPC9zdmc+Cg==" alt="Gatsby Logo" aria-hidden="true" class="css-guj4ht" /></a> | |
| <style data-emotion-css="113kodn"> | |
| .css-113kodn { | |
| display: none; | |
| } | |
| @media (min-width:750px) { | |
| .css-113kodn { | |
| -webkit-align-self: flex-end; | |
| -ms-flex-item-align: end; | |
| align-self: flex-end; | |
| display: -webkit-box; | |
| display: -webkit-flex; | |
| display: -ms-flexbox; | |
| display: flex; | |
| margin-left: 1.5rem; | |
| } | |
| } | |
| </style> | |
| <nav class="navigation css-113kodn" aria-label="Primary Navigation"> | |
| <style data-emotion-css="8280xh"> | |
| .css-8280xh { | |
| display: none; | |
| } | |
| @media (min-width:750px) { | |
| .css-8280xh { | |
| -webkit-align-self: flex-end; | |
| -ms-flex-item-align: end; | |
| align-self: flex-end; | |
| display: -webkit-box; | |
| display: -webkit-flex; | |
| display: -ms-flexbox; | |
| display: flex; | |
| -webkit-box-flex: 1; | |
| -webkit-flex-grow: 1; | |
| -ms-flex-positive: 1; | |
| flex-grow: 1; | |
| margin: 0; | |
| list-style: none; | |
| -webkit-mask-image: linear-gradient(to right, transparent, white 0.1875rem, white 98%, transparent); | |
| mask-image: linear-gradient(to right, transparent, white 0.1875rem, white 98%, transparent); | |
| overflow-x: auto; | |
| } | |
| } | |
| </style> | |
| <ul class="css-8280xh"> | |
| <style data-emotion-css="w5s3vg"> | |
| .css-w5s3vg { | |
| display: block; | |
| margin: 0; | |
| margin-left: 0.5rem; | |
| margin-right: 0.5rem; | |
| } | |
| </style> | |
| <li class="css-w5s3vg"> | |
| <style data-emotion-css="z32gdo"> | |
| .css-z32gdo { | |
| font-size: 1.125rem; | |
| border-bottom: 2px solid transparent; | |
| color: #36313d; | |
| display: block; | |
| -webkit-font-smoothing: antialiased; | |
| line-height: calc(3.75rem - 0.4rem); | |
| position: relative; | |
| -webkit-text-decoration: none; | |
| text-decoration: none; | |
| top: 0; | |
| -webkit-transition: color 250ms cubic-bezier(0.4, 0, 0.2, 1); | |
| transition: color 250ms cubic-bezier(0.4, 0, 0.2, 1); | |
| z-index: 1; | |
| } | |
| .css-z32gdo:hover { | |
| color: #663399; | |
| } | |
| .css-z32gdo active { | |
| border-bottom-color: #8a4baf; | |
| color: #8a4baf; | |
| } | |
| </style><a class="css-z32gdo" style="border-bottom-color:#8a4baf;color:#8a4baf" href="/docs/">Docs</a></li> | |
| <li class="css-w5s3vg"><a class="css-z32gdo" href="/tutorial/">Tutorials</a></li> | |
| <li class="css-w5s3vg"><a class="css-z32gdo" href="/plugins/">Plugins</a></li> | |
| <li class="css-w5s3vg"><a class="css-z32gdo" href="/features/">Features</a></li> | |
| <li class="css-w5s3vg"><a class="css-z32gdo" href="/blog/">Blog</a></li> | |
| <li class="css-w5s3vg"><a class="css-z32gdo" href="/showcase/">Showcase</a></li> | |
| <li class="css-w5s3vg"><a class="css-z32gdo" href="/contributing/">Contributing</a></li> | |
| </ul> | |
| </nav> | |
| <style data-emotion-css="1yc32nb"> | |
| .css-1yc32nb { | |
| -webkit-align-self: flex-end; | |
| -ms-flex-item-align: end; | |
| align-self: flex-end; | |
| display: -webkit-box; | |
| display: -webkit-flex; | |
| display: -ms-flexbox; | |
| display: flex; | |
| margin-left: auto; | |
| } | |
| </style> | |
| <div class="css-1yc32nb"> | |
| <style data-emotion-css="1a3kw4n"> | |
| .css-1a3kw4n { | |
| display: -webkit-box; | |
| display: -webkit-flex; | |
| display: -ms-flexbox; | |
| display: flex; | |
| -webkit-flex: 0 0 auto; | |
| -ms-flex: 0 0 auto; | |
| flex: 0 0 auto; | |
| -webkit-flex-direction: row; | |
| -ms-flex-direction: row; | |
| flex-direction: row; | |
| -webkit-align-items: center; | |
| -webkit-box-align: center; | |
| -ms-flex-align: center; | |
| align-items: center; | |
| margin-left: 0.75rem; | |
| margin-bottom: 0; | |
| margin-top: -0.2175rem; | |
| } | |
| </style> | |
| <form class="searchWrap css-1a3kw4n"> | |
| <style data-emotion-css="vc1x1t"> | |
| .algolia-autocomplete .ds-dropdown-menu { | |
| position: fixed !important; | |
| top: calc(3rem + 2.5rem) !important; | |
| left: 0.75rem !important; | |
| right: 0.75rem !important; | |
| min-width: calc(100vw - 1.25rem) !important; | |
| max-width: calc(100vw - 2rem)) !important; | |
| box-shadow: 0px 4px 16px rgba(46, 41, 51, 0.08), 0px 8px 24px rgba(71, 63, 79, 0.16) !important; | |
| } | |
| .searchWrap .algolia-autocomplete.algolia-autocomplete-right .ds-dropdown-menu, | |
| .searchWrap .algolia-autocomplete.algolia-autocomplete-left .ds-dropdown-menu { | |
| left: 0.75rem !important; | |
| right: 0.75rem !important; | |
| } | |
| .algolia-autocomplete .ds-dropdown-menu .ds-suggestions { | |
| margin-top: 0 !important; | |
| } | |
| .algolia-docsearch-suggestion--wrapper { | |
| padding-top: 0 !important; | |
| } | |
| .algolia-autocomplete .algolia-docsearch-suggestion--subcategory-column { | |
| color: #78757a !important; | |
| font-size: 0.875rem !important; | |
| font-weight: normal !important; | |
| padding: 0.25rem 0.75rem !important; | |
| } | |
| .algolia-autocomplete .algolia-docsearch-suggestion--subcategory-column:before { | |
| background: #f6edfa !important; | |
| } | |
| .algolia-autocomplete .algolia-docsearch-suggestion--subcategory-column:after { | |
| display: none !important; | |
| } | |
| .algolia-autocomplete .algolia-docsearch-suggestion { | |
| padding: 0 !important; | |
| } | |
| .algolia-autocomplete .algolia-docsearch-suggestion--content { | |
| padding: 0.75rem !important; | |
| width: 100% !important; | |
| max-width: 100% !important; | |
| } | |
| .algolia-autocomplete .ds-dropdown-menu::before { | |
| border-top-color: #f0f0f2 !important; | |
| border-right-color: #f0f0f2 !important; | |
| } | |
| .algolia-autocomplete .ds-dropdown-menu [class^="ds-dataset-"] { | |
| max-height: calc( 100vh - 3.75rem - 2.5rem) !important; | |
| padding: 0 !important; | |
| border-color: #f0f0f2 !important; | |
| } | |
| .algolia-autocomplete .algolia-docsearch-suggestion--highlight { | |
| background-color: #f1defa !important; | |
| box-shadow: 0 !important; | |
| color: #663399 !important; | |
| } | |
| .algolia-autocomplete .algolia-docsearch-suggestion--text { | |
| color: #78757a !important; | |
| } | |
| .algolia-autocomplete .algolia-docsearch-suggestion--text .algolia-docsearch-suggestion--highlight { | |
| background: transparent !important; | |
| box-shadow: inset 0 -1px 0 0 #663399 !important; | |
| } | |
| .algolia-autocomplete .algolia-docsearch-suggestion .algolia-docsearch-suggestion--subcategory-column { | |
| width: 100% !important; | |
| } | |
| .algolia-autocomplete .ds-dropdown-menu .ds-suggestion.ds-cursor .algolia-docsearch-suggestion:not(.suggestion-layout-simple) .algolia-docsearch-suggestion--content { | |
| background-color: #fcfaff !important; | |
| } | |
| .algolia-autocomplete .algolia-docsearch-suggestion .algolia-docsearch-suggestion--content.algolia-docsearch-suggestion--no-results { | |
| max-width: 100% !important; | |
| width: 100% !important; | |
| font-weight: normal !important; | |
| padding: 1rem 0.75rem !important; | |
| } | |
| .algolia-autocomplete .algolia-docsearch-suggestion .algolia-docsearch-suggestion--content.algolia-docsearch-suggestion--no-results .algolia-docsearch-suggestion--title { | |
| margin-bottom: 0 !important; | |
| } | |
| .algolia-autocomplete .algolia-docsearch-suggestion .algolia-docsearch-suggestion--content.algolia-docsearch-suggestion--no-results .algolia-docsearch-suggestion--text { | |
| color: inherit !important; | |
| font-weight: normal !important; | |
| } | |
| .algolia-autocomplete .algolia-docsearch-suggestion .algolia-docsearch-suggestion--content.algolia-docsearch-suggestion--no-results .algolia-docsearch-suggestion--text:after { | |
| content: "😔"; | |
| } | |
| .algolia-autocomplete .algolia-docsearch-suggestion--category-header { | |
| padding: 0.25rem 0.75rem !important; | |
| margin-top: 0 !important; | |
| font-size: 0.875rem !important; | |
| border-color: #f0f0f2 !important; | |
| color: #663399 !important; | |
| font-weight: bold !important; | |
| } | |
| .searchWrap .algolia-autocomplete.algolia-autocomplete-right .ds-dropdown-menu::before { | |
| right: 7.125rem !important; | |
| } | |
| .algolia-autocomplete .algolia-docsearch-suggestion .algolia-docsearch-suggestion--content.algolia-docsearch-suggestion--no-results:before { | |
| display: none !important; | |
| } | |
| .algolia-autocomplete .algolia-docsearch-footer { | |
| width: 100% !important; | |
| height: 30px !important; | |
| margin-top: 0 !important; | |
| border-top: 1px solid #f0f0f2 !important; | |
| } | |
| .algolia-autocomplete .algolia-docsearch-footer--logo { | |
| width: 110px !important; | |
| height: 100% !important; | |
| margin-left: auto !important; | |
| margin-right: 0.75rem !important; | |
| } | |
| @media (min-width:550px) { | |
| .algolia-autocomplete .algolia-docsearch-suggestion--category-header { | |
| color: inherit !important; | |
| font-weight: normal !important; | |
| } | |
| .algolia-autocomplete .algolia-docsearch-suggestion .algolia-docsearch-suggestion--subcategory-column { | |
| width: 30% !important; | |
| text-align: right !important; | |
| opacity: 1 !important; | |
| padding: 0.75rem 1rem !important; | |
| } | |
| .algolia-autocomplete .algolia-docsearch-suggestion--category-header { | |
| padding: 0.75rem 1rem !important; | |
| } | |
| .algolia-autocomplete .algolia-docsearch-suggestion--content { | |
| width: 70% !important; | |
| max-width: 70% !important; | |
| padding: 0.75rem 1rem !important; | |
| } | |
| .algolia-autocomplete .algolia-docsearch-suggestion--content:before, | |
| .algolia-autocomplete .algolia-docsearch-suggestion--subcategory-column:after { | |
| display: block !important; | |
| content: "" !important; | |
| position: absolute !important; | |
| top: 0 !important; | |
| height: 100% !important; | |
| width: 1px !important; | |
| background: #f6edfa !important; | |
| } | |
| .algolia-autocomplete .algolia-docsearch-suggestion--subcategory-column:after { | |
| right: 0 !important; | |
| } | |
| .algolia-autocomplete .algolia-docsearch-suggestion--content:before { | |
| left: -1px !important; | |
| } | |
| } | |
| @media (min-width:750px) { | |
| .algolia-autocomplete .ds-dropdown-menu { | |
| top: 100% !important; | |
| position: absolute !important; | |
| max-width: 600px !important; | |
| min-width: 500px !important; | |
| } | |
| .searchWrap .algolia-autocomplete.algolia-autocomplete-right .ds-dropdown-menu { | |
| right: 0 !important; | |
| left: inherit !important; | |
| } | |
| .searchWrap .algolia-autocomplete.algolia-autocomplete-right .ds-dropdown-menu::before { | |
| right: 4.5rem !important; | |
| } | |
| } | |
| @media (min-width:1000px) { | |
| .algolia-autocomplete .ds-dropdown-menu { | |
| max-width: 600px !important; | |
| min-width: 540px !important; | |
| } | |
| .algolia-autocomplete .algolia-docsearch-suggestion .algolia-docsearch-suggestion--subcategory-column { | |
| width: 35% !important; | |
| } | |
| .algolia-autocomplete .algolia-docsearch-suggestion--content { | |
| width: 65% !important; | |
| max-width: 65% !important; | |
| } | |
| } | |
| </style> | |
| <style data-emotion-css="79elbk"> | |
| .css-79elbk { | |
| position: relative; | |
| } | |
| </style> | |
| <label class="css-79elbk"> | |
| <style data-emotion-css="g8y9e2"> | |
| .css-g8y9e2 { | |
| -webkit-appearance: none; | |
| -moz-appearance: none; | |
| appearance: none; | |
| background-color: transparent; | |
| border: 0; | |
| border-radius: 2px; | |
| color: #8a4baf; | |
| padding: 0.25rem; | |
| padding-right: 0.75rem; | |
| padding-left: 2rem; | |
| overflow: hidden; | |
| width: 1.25rem; | |
| -webkit-transition: width 250ms cubic-bezier(0.4, 0, 0.2, 1), background-color 250ms cubic-bezier(0.4, 0, 0.2, 1); | |
| transition: width 250ms cubic-bezier(0.4, 0, 0.2, 1), background-color 250ms cubic-bezier(0.4, 0, 0.2, 1); | |
| } | |
| .css-g8y9e2:focus { | |
| background-color: #f6edfa; | |
| color: #663399; | |
| outline: 0; | |
| width: 7.5rem; | |
| } | |
| @media (min-width:1000px) { | |
| .css-g8y9e2 { | |
| background-color: #ffffff; | |
| width: 5.625rem; | |
| } | |
| .css-g8y9e2:focus { | |
| background-color: #f6edfa; | |
| } | |
| } | |
| </style> | |
| <input type="search" id="doc-search" placeholder="Search" aria-label="Search" title="Hit 's' to search docs" class="css-g8y9e2" /> | |
| <style data-emotion-css="p3jwe8"> | |
| .css-p3jwe8 { | |
| fill: #8a4baf; | |
| position: absolute; | |
| left: 0.5rem; | |
| top: 50%; | |
| width: 1rem; | |
| height: 1rem; | |
| pointer-events: none; | |
| -webkit-transition: fill 250ms cubic-bezier(0.4, 0, 0.2, 1); | |
| transition: fill 250ms cubic-bezier(0.4, 0, 0.2, 1); | |
| -webkit-transform: translateY(-55%); | |
| -ms-transform: translateY(-55%); | |
| transform: translateY(-55%); | |
| } | |
| </style> | |
| <svg viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg" fill="currentColor" focusable="false" aria-hidden="true" class="css-p3jwe8"> | |
| <g> | |
| <path d="m34.8 30.2c0.3 0.3 0.3 0.8 0 1.1l-3.4 3.5c-0.1 0.1-0.4 0.2-0.6 0.2s-0.4-0.1-0.6-0.2l-6.5-6.8c-2 1.2-4.1 1.8-6.3 1.8-6.8 0-12.4-5.5-12.4-12.4s5.6-12.4 12.4-12.4 12.4 5.5 12.4 12.4c0 2.1-0.6 4.2-1.7 6.1z m-17.4-20.4c-4.1 0-7.6 3.4-7.6 7.6s3.5 7.6 7.6 7.6 7.5-3.4 7.5-7.6-3.3-7.6-7.5-7.6z"></path> | |
| </g> | |
| </svg> | |
| </label> | |
| </form> | |
| <style data-emotion-css="4nkztw"> | |
| .css-4nkztw { | |
| font-size: 1rem; | |
| border-bottom: 2px solid transparent; | |
| color: #8a4baf; | |
| display: block; | |
| -webkit-font-smoothing: antialiased; | |
| line-height: calc(3.75rem - 0.4rem); | |
| position: relative; | |
| -webkit-text-decoration: none; | |
| text-decoration: none; | |
| top: 0; | |
| -webkit-transition: color 250ms cubic-bezier(0.4, 0, 0.2, 1); | |
| transition: color 250ms cubic-bezier(0.4, 0, 0.2, 1); | |
| z-index: 1; | |
| padding-left: 0.5rem; | |
| padding-right: 0.5rem; | |
| } | |
| .css-4nkztw:hover { | |
| color: #663399; | |
| } | |
| .css-4nkztw active { | |
| border-bottom-color: #8a4baf; | |
| color: #8a4baf; | |
| } | |
| </style> | |
| <a href="https://github.com/gatsbyjs/gatsby" title="GitHub" class="css-4nkztw"> | |
| <svg fill="currentColor" preserveAspectRatio="xMidYMid meet" height="1em" width="1em" viewBox="0 0 40 40" style="vertical-align:text-top"> | |
| <g> | |
| <path d="m20 0c-11 0-20 9-20 20 0 8.8 5.7 16.3 13.7 19 1 0.2 1.3-0.5 1.3-1 0-0.5 0-2 0-3.7-5.5 1.2-6.7-2.4-6.7-2.4-0.9-2.3-2.2-2.9-2.2-2.9-1.9-1.2 0.1-1.2 0.1-1.2 2 0.1 3.1 2.1 3.1 2.1 1.7 3 4.6 2.1 5.8 1.6 0.2-1.3 0.7-2.2 1.3-2.7-4.5-0.5-9.2-2.2-9.2-9.8 0-2.2 0.8-4 2.1-5.4-0.2-0.5-0.9-2.6 0.2-5.3 0 0 1.7-0.5 5.5 2 1.6-0.4 3.3-0.6 5-0.6 1.7 0 3.4 0.2 5 0.7 3.8-2.6 5.5-2.1 5.5-2.1 1.1 2.8 0.4 4.8 0.2 5.3 1.3 1.4 2.1 3.2 2.1 5.4 0 7.6-4.7 9.3-9.2 9.8 0.7 0.6 1.4 1.9 1.4 3.7 0 2.7 0 4.9 0 5.5 0 0.6 0.3 1.2 1.3 1 8-2.7 13.7-10.2 13.7-19 0-11-9-20-20-20z"></path> | |
| </g> | |
| </svg> | |
| </a> | |
| <style data-emotion-css="dq6yd"> | |
| .css-dq6yd { | |
| display: none; | |
| } | |
| @media (min-width:1000px) { | |
| .css-dq6yd { | |
| display: -webkit-box; | |
| display: -webkit-flex; | |
| display: -ms-flexbox; | |
| display: flex; | |
| } | |
| } | |
| </style> | |
| <div class="css-dq6yd"> | |
| <a href="https://gatsby.dev/discord" title="Discord" class="css-4nkztw"> | |
| <style data-emotion-css="ezbbe2"> | |
| .css-ezbbe2 { | |
| vertical-align: text-top; | |
| } | |
| </style> | |
| <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 28 28" xml:space="preserve" fill="currentColor" height="1em" width="1em" preserveAspectRatio="xMidYMid meet" class="css-ezbbe2"> | |
| <g> | |
| <path d="M11.5,11.7c-0.8,0-1.4,0.7-1.4,1.6s0.6,1.6,1.4,1.6c0.8,0,1.4-0.7,1.4-1.6 C12.9,12.4,12.3,11.7,11.5,11.7L11.5,11.7z M16.6,11.7c-0.8,0-1.4,0.7-1.4,1.6s0.6,1.6,1.4,1.6c0.8,0,1.4-0.7,1.4-1.6 S17.4,11.7,16.6,11.7L16.6,11.7z"></path> | |
| <path d="M23.4,0H4.6C3,0,1.8,1.3,1.8,2.9v18.9c0,1.6,1.3,2.9,2.9,2.9h15.9l-0.7-2.6l1.8,1.7l1.7,1.6 l3,2.7V2.9C26.2,1.3,25,0,23.4,0L23.4,0z M18,18.3c0,0-0.5-0.6-0.9-1.1c1.8-0.5,2.5-1.7,2.5-1.7c-0.6,0.4-1.1,0.6-1.6,0.8 c-0.7,0.3-1.4,0.5-2,0.6c-1.3,0.3-2.6,0.2-3.6,0c-0.8-0.2-1.5-0.4-2.1-0.6c-0.3-0.1-0.7-0.3-1-0.5c0,0-0.1,0-0.1-0.1c0,0,0,0-0.1,0 c-0.3-0.1-0.4-0.2-0.4-0.2s0.7,1.1,2.4,1.7c-0.4,0.5-0.9,1.2-0.9,1.2c-3.1-0.1-4.3-2.1-4.3-2.1c0-4.5,2-8.2,2-8.2 c2-1.5,3.9-1.5,3.9-1.5L12,6.7C9.5,7.4,8.3,8.5,8.3,8.5s0.3-0.2,0.8-0.4c1.5-0.7,2.7-0.8,3.2-0.9c0.1,0,0.2,0,0.2,0 c0.9-0.1,1.8-0.1,2.8,0c1.3,0.2,2.8,0.5,4.2,1.3c0,0-1.1-1.1-3.5-1.8l0.2-0.2c0,0,1.9,0,3.9,1.5c0,0,2,3.7,2,8.2 C22.3,16.2,21.1,18.2,18,18.3L18,18.3z"></path> | |
| </g> | |
| </svg> | |
| </a> | |
| <a href="https://twitter.com/gatsbyjs" title="Twitter" class="css-4nkztw"> | |
| <svg fill="currentColor" preserveAspectRatio="xMidYMid meet" height="1em" width="1em" viewBox="0 0 40 40" style="vertical-align:text-top"> | |
| <g> | |
| <path d="m37.7 9.1q-1.5 2.2-3.7 3.7 0.1 0.3 0.1 1 0 2.9-0.9 5.8t-2.6 5.5-4.1 4.7-5.7 3.3-7.2 1.2q-6.1 0-11.1-3.3 0.8 0.1 1.7 0.1 5 0 9-3-2.4-0.1-4.2-1.5t-2.6-3.5q0.8 0.1 1.4 0.1 1 0 1.9-0.3-2.5-0.5-4.1-2.5t-1.7-4.6v0q1.5 0.8 3.3 0.9-1.5-1-2.4-2.6t-0.8-3.4q0-2 0.9-3.7 2.7 3.4 6.6 5.4t8.3 2.2q-0.2-0.9-0.2-1.7 0-3 2.1-5.1t5.1-2.1q3.2 0 5.3 2.3 2.4-0.5 4.6-1.7-0.8 2.5-3.2 3.9 2.1-0.2 4.2-1.1z"></path> | |
| </g> | |
| </svg> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <style data-emotion-css="an3pyk"> | |
| .css-an3pyk { | |
| padding-left: env(safe-area-inset-left); | |
| padding-right: env(safe-area-inset-right); | |
| padding-top: 2.5rem; | |
| padding-bottom: 3.75rem; | |
| } | |
| @media (min-width:42rem) { | |
| .css-an3pyk { | |
| padding-top: calc(2.5rem + 3.75rem); | |
| padding-bottom: 0; | |
| } | |
| } | |
| </style> | |
| <div class="main-body css-an3pyk"> | |
| <style data-emotion-css="133lhrq"> | |
| @media (min-width:750px) { | |
| .css-133lhrq { | |
| padding-left: 16.5rem; | |
| } | |
| } | |
| @media (min-width:1000px) { | |
| .css-133lhrq { | |
| padding-left: 18rem; | |
| } | |
| } | |
| </style> | |
| <div class="css-133lhrq"> | |
| <main id="reach-skip-nav" class="docSearch-content"> | |
| <style data-emotion-css="1mqs98d"> | |
| .css-1mqs98d { | |
| max-width: 42rem; | |
| margin: 0 auto; | |
| padding: 1.5rem; | |
| position: relative; | |
| } | |
| @media (min-width:1000px) { | |
| .css-1mqs98d { | |
| padding-top: 3rem; | |
| padding-bottom: 3rem; | |
| } | |
| } | |
| </style> | |
| <div class="css-1mqs98d"> | |
| <style data-emotion-css="xlqhel"> | |
| .css-xlqhel { | |
| font-size: 0.875rem; | |
| display: none; | |
| margin-bottom: 0.5rem; | |
| } | |
| @media (min-width:750px) { | |
| .css-xlqhel { | |
| display: inherit; | |
| } | |
| } | |
| </style> | |
| <nav aria-label="breadcrumb" class="css-xlqhel"><a href="/">Home</a><span style="margin:0px 0.25rem" role="presentation"><svg fill="currentColor" preserveAspectRatio="xMidYMid meet" height="1em" width="1em" viewBox="0 0 40 40" style="vertical-align:middle"><g><path d="m16.6 10l10 10-10 10-2.3-2.3 7.7-7.7-7.7-7.7z"></path></g></svg></span><a href="/docs/">Docs</a><span style="margin:0px 0.25rem" role="presentation"><svg fill="currentColor" preserveAspectRatio="xMidYMid meet" height="1em" width="1em" viewBox="0 0 40 40" style="vertical-align:middle"><g><path d="m16.6 10l10 10-10 10-2.3-2.3 7.7-7.7-7.7-7.7z"></path></g></svg></span><span><a href="/docs/guides/">Reference Guides</a></span><span style="margin:0px 0.25rem" role="presentation"><svg fill="currentColor" preserveAspectRatio="xMidYMid meet" height="1em" width="1em" viewBox="0 0 40 40" style="vertical-align:middle"><g><path d="m16.6 10l10 10-10 10-2.3-2.3 7.7-7.7-7.7-7.7z"></path></g></svg></span><span><a href="/docs/performance/">Improving Performance</a></span><span style="margin:0px 0.25rem" role="presentation"><svg fill="currentColor" preserveAspectRatio="xMidYMid meet" height="1em" width="1em" viewBox="0 0 40 40" style="vertical-align:middle"><g><path d="m16.6 10l10 10-10 10-2.3-2.3 7.7-7.7-7.7-7.7z"></path></g></svg></span><span aria-current="page">SEO</span></nav> | |
| <style data-emotion-css="kcpnyh"> | |
| .css-kcpnyh { | |
| font-size: 0.875rem; | |
| display: inherit; | |
| margin-bottom: 0.5rem; | |
| } | |
| @media (min-width:750px) { | |
| .css-kcpnyh { | |
| display: none; | |
| } | |
| } | |
| </style> | |
| <nav aria-label="breadcrumb" class="css-kcpnyh"><span style="margin:0px 0.25rem" role="presentation"><svg fill="currentColor" preserveAspectRatio="xMidYMid meet" height="1em" width="1em" viewBox="0 0 40 40" style="vertical-align:middle"><g><path d="m25.7 12.3l-7.7 7.7 7.7 7.7-2.3 2.3-10-10 10-10z"></path></g></svg></span><a href="/docs/performance/">Improving Performance</a></nav> | |
| <style data-emotion-css="8kn4zf"> | |
| .css-8kn4zf { | |
| margin-top: 0; | |
| } | |
| </style> | |
| <h1 id="seo" class="css-8kn4zf">SEO with Gatsby</h1> | |
| <p>Gatsby helps your site place better in search engines. Some advantages come out of the box and some require configuration.</p> | |
| <h3 id="server-rendering"><a href="#server-rendering" aria-label="server rendering permalink" class="anchor"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Server rendering</h3> | |
| <p>Because Gatsby pages are server-rendered, all the page content is available to Google and other search engines or crawlers.</p> | |
| <p>You can see this by viewing the source for this page with <code>curl</code> (in your terminal):</p> | |
| <div class="gatsby-highlight"><pre class="language-shell"><style data-emotion-css="bsen3l">.css-bsen3l{position:absolute;right:0.25rem;top:0.25rem;border-radius:4px 4px;}</style><style data-emotion-css="93j64b">.css-93j64b{background-color:transparent;border:none;color:#635e69;cursor:pointer;font-size:1rem;font-family:Futura PT,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;line-height:1;padding:0.5rem 0.5rem;-webkit-transition:250ms cubic-bezier(0.4,0,0.2,1);transition:250ms cubic-bezier(0.4,0,0.2,1);position:absolute;right:0.25rem;top:0.25rem;border-radius:4px 4px;}.css-93j64b[disabled]{cursor:not-allowed;}.css-93j64b:not([disabled]):hover{background-color:#663399;box-shadow:0px 1px 2px rgba(46,41,51,0.08),0px 2px 4px rgba(71,63,79,0.08);color:#ffffff;}.css-93j64b:active{box-shadow:0px 2px 4px rgba(46,41,51,0.08),0px 4px 8px rgba(71,63,79,0.16);}</style><button name="copy code to clipboard" class="css-93j64b">Copy<style data-emotion-css="16cz5zo">.css-16cz5zo{border:0;-webkit-clip:rect(0,0,0,0);clip:rect(0,0,0,0);-webkit-clip:rect(0,0,0,0);height:1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap;}</style><span aria-roledescription="status" class="css-16cz5zo erisdwh3">copy code to clipboard</span></button><code class="language-shell"><div class="token-line"><span class="token function">curl</span><span class="token plain"> https://www.gatsbyjs.org/docs/seo</span></div></code></pre></div> | |
| <p><code>Right-Click => View source</code> won’t show you the actual HTML (but the pages are still server-rendered!) as this site is using service workers. <a href="https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-offline#notes">Read these notes</a> to learn more.</p> | |
| <h3 id="speed-boost"><a href="#speed-boost" aria-label="speed boost permalink" class="anchor"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Speed boost</h3> | |
| <p>Gatsby’s many built-in performance optimizations, such as rendering to static files, progressive image loading, and the <a href="/docs/prpl-pattern/">PRPL pattern</a>—all help your site be lightning-fast by default.</p> | |
| <p>Starting in January 2018, Google <a href="https://searchengineland.com/google-speed-update-page-speed-will-become-ranking-factor-mobile-search-289904">rewards faster sites with a bump in search rankings</a>.</p> | |
| <h3 id="page-metadata"><a href="#page-metadata" aria-label="page metadata permalink" class="anchor"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Page metadata</h3> | |
| <p>Adding metadata to pages, such as page title and description, helps search engines understand your content and when to show your pages in search results.</p> | |
| <p>A common way to add metadata to pages is to add <a href="https://github.com/nfl/react-helmet">react-helmet</a> components (together with the <a href="/packages/gatsby-plugin-react-helmet">Gatsby React Helmet plugin</a> for SSR support) to your page components. Here’s a <a href="https://www.gatsbyjs.org/docs/add-seo-component/">guide on how to add an SEO component</a> to your Gatsby app.</p> | |
| <p>Some examples using react-helmet:</p> | |
| <ul> | |
| <li><a href="https://github.com/gatsbyjs/gatsby/blob/87ad6e81b9bd78b25d089434600750f5903baaee/www/src/components/package-readme.js#L16-L25">Official GatsbyJS.org site</a></li> | |
| <li><a href="https://github.com/gatsbyjs/gatsby/blob/776dc1d6fe8d5ce7b5ea6d884736bb3c76280975/starters/default/src/components/seo.js">Official GatsbyJS default starter</a></li> | |
| <li><a href="https://github.com/DSchau/gatsby-mail/blob/89b467e5654619ffe3073133ef0ae48b4d7502e3/src/components/meta.js">Gatsby Mail</a></li> | |
| <li><a href="https://github.com/jlengstorf/gatsby-theme-jason-blog/blob/e6d25ca927afdc75c759e611d4ba6ba086452bb8/src/components/SEO/SEO.js">Jason Lengstorf’s personal blog</a></li> | |
| </ul> | |
| <style data-emotion-css="18lcbnd"> | |
| .css-18lcbnd { | |
| margin-top: 3rem; | |
| } | |
| </style> | |
| <hr class="css-18lcbnd" /> | |
| <style data-emotion-css="5jkycy"> | |
| .css-5jkycy { | |
| font-size: 0.875rem; | |
| line-height: 1; | |
| padding: 0.75rem 0; | |
| } | |
| .css-5jkycy.css-5jkycy { | |
| border: 0; | |
| color: #78757a; | |
| display: -webkit-box; | |
| display: -webkit-flex; | |
| display: -ms-flexbox; | |
| display: flex; | |
| font-weight: normal; | |
| } | |
| .css-5jkycy.css-5jkycy:hover { | |
| color: #663399; | |
| } | |
| </style> | |
| <a href="https://github.com/gatsbyjs/gatsby/blob/master/docs/docs/seo.md" class="css-5jkycy"> | |
| <style data-emotion-css="9u48bm"> | |
| .css-9u48bm { | |
| margin-right: 0.5rem; | |
| } | |
| </style> | |
| <svg fill="currentColor" preserveAspectRatio="xMidYMid meet" height="1em" width="1em" viewBox="0 0 40 40" class="css-9u48bm" style="vertical-align:middle"> | |
| <g> | |
| <path d="m34.5 11.7l-3 3.1-6.3-6.3 3.1-3q0.5-0.5 1.2-0.5t1.1 0.5l3.9 3.9q0.5 0.4 0.5 1.1t-0.5 1.2z m-29.5 17.1l18.4-18.5 6.3 6.3-18.4 18.4h-6.3v-6.2z"></path> | |
| </g> | |
| </svg> | |
| <!-- -->Edit this page on GitHub</a> | |
| </div> | |
| </main> | |
| <style data-emotion-css="1fh8h1h"> | |
| .css-1fh8h1h { | |
| background: 0; | |
| border-top: 1px solid #f0f0f2; | |
| font-size: 0.875rem; | |
| margin: 0; | |
| padding: 3rem 1.5rem; | |
| margin-top: 3rem; | |
| list-style: none; | |
| text-align: center; | |
| width: 100%; | |
| } | |
| .css-1fh8h1h li { | |
| display: inline-block; | |
| } | |
| .css-1fh8h1h li:after { | |
| color: #d9d7e0; | |
| content: "•"; | |
| padding-left: 1em; | |
| padding-right: 1em; | |
| } | |
| .css-1fh8h1h li:last-of-type:after { | |
| content: none; | |
| } | |
| .css-1fh8h1h li a { | |
| color: #78757a; | |
| border-color: #d9d7e0; | |
| } | |
| .css-1fh8h1h li a:hover { | |
| color: #663399; | |
| border-color: #8a4baf; | |
| } | |
| </style> | |
| <ul class="css-1fh8h1h esvgv9w0"> | |
| <li><a href="/accessibility-statement">Accessibility Statement</a></li> | |
| <li><a href="/guidelines/logo/">Logo & Assets</a></li> | |
| <li><a href="https://www.gatsbyjs.com">Gatsbyjs.com</a></li> | |
| </ul> | |
| </div> | |
| <style data-emotion-css="19tbodv"> | |
| .css-19tbodv { | |
| border: 0; | |
| bottom: 0; | |
| display: block; | |
| height: 100vh; | |
| position: fixed; | |
| top: 0; | |
| -webkit-transition: opacity 350ms cubic-bezier(0.4, 0, 0.2, 1); | |
| transition: opacity 350ms cubic-bezier(0.4, 0, 0.2, 1); | |
| width: 320px; | |
| z-index: 10; | |
| opacity: 0; | |
| pointer-events: none; | |
| } | |
| @media (min-width:750px) { | |
| .css-19tbodv { | |
| height: calc(100vh - 3.75rem - 2.5rem); | |
| max-width: none; | |
| opacity: 1 !important; | |
| pointer-events: auto; | |
| top: calc(3.75rem + 2.5rem); | |
| width: 16.5rem; | |
| } | |
| } | |
| @media (min-width:1000px) { | |
| .css-19tbodv { | |
| width: 18rem; | |
| } | |
| } | |
| </style> | |
| <div class="css-19tbodv"> | |
| <style data-emotion-css="1vsxuwb"> | |
| .css-1vsxuwb { | |
| height: 100%; | |
| -webkit-transition: -webkit-transform 350ms cubic-bezier(0.4, 0, 0.2, 1); | |
| -webkit-transition: transform 350ms cubic-bezier(0.4, 0, 0.2, 1); | |
| transition: transform 350ms cubic-bezier(0.4, 0, 0.2, 1); | |
| box-shadow: 0px 4px 16px rgba(46, 41, 51, 0.08), 0px 8px 24px rgba(71, 63, 79, 0.16); | |
| -webkit-transform: translateX(-15rem); | |
| -ms-transform: translateX(-15rem); | |
| transform: translateX(-15rem); | |
| } | |
| @media (min-width:750px) { | |
| .css-1vsxuwb { | |
| -webkit-transform: none !important; | |
| -ms-transform: none !important; | |
| transform: none !important; | |
| box-shadow: none; | |
| } | |
| } | |
| </style> | |
| <div class="css-1vsxuwb"> | |
| <style data-emotion-css="10klw3m"> | |
| .css-10klw3m { | |
| height: 100%; | |
| } | |
| </style> | |
| <section aria-label="Secondary Navigation" id="SecondaryNavigation" class="docSearch-sidebar css-10klw3m"> | |
| <style data-emotion-css="dg4tpx"> | |
| .css-dg4tpx { | |
| border-right: 1px solid #f0f0f2; | |
| display: -webkit-box; | |
| display: -webkit-flex; | |
| display: -ms-flexbox; | |
| display: flex; | |
| -webkit-align-items: center; | |
| -webkit-box-align: center; | |
| -ms-flex-align: center; | |
| align-items: center; | |
| height: 3.5rem; | |
| background: #ffffff; | |
| padding-left: 1rem; | |
| padding-right: 1.5rem; | |
| } | |
| </style> | |
| <header class="css-dg4tpx"> | |
| <style data-emotion-css="1k55xzz"> | |
| .css-1k55xzz { | |
| font-size: 0.75rem; | |
| line-height: 1; | |
| background: transparent; | |
| border: none; | |
| border-radius: 2px; | |
| color: #78757a; | |
| display: -webkit-box; | |
| display: -webkit-flex; | |
| display: -ms-flexbox; | |
| display: flex; | |
| cursor: pointer; | |
| -webkit-align-items: center; | |
| -webkit-box-align: center; | |
| -ms-flex-align: center; | |
| align-items: center; | |
| -webkit-box-flex: 0; | |
| -webkit-flex-grow: 0; | |
| -ms-flex-positive: 0; | |
| flex-grow: 0; | |
| padding-top: 0.5rem; | |
| padding-bottom: 0.5rem; | |
| text-align: left; | |
| -webkit-transition: all 100ms; | |
| transition: all 100ms; | |
| } | |
| .css-1k55xzz:hover { | |
| background: #f6edfa; | |
| color: #663399; | |
| } | |
| </style> | |
| <button class="css-1k55xzz"><span>Expand All</span> | |
| <style data-emotion-css="1kaojm3"> | |
| .css-1kaojm3 { | |
| display: inline-block; | |
| margin-left: 8px; | |
| } | |
| </style><span class="css-1kaojm3"><svg fill="currentColor" preserveAspectRatio="xMidYMid meet" height="1em" width="1em" viewBox="0 0 40 40" style="vertical-align:middle"><g><path d="m17.5 15h5v-7.5h5l-7.5-7.5-7.5 7.5h5v7.5z m7.5-5v2.5h8.8l-5 5h-17.5l-5-5h8.7v-2.5h-12.5v2.5l6.3 6.3-6.3 6.2v2.5h12.5v-2.5h-8.7l5-5h17.5l5 5h-8.8v2.5h12.5v-2.5l-6.2-6.2 6.2-6.3v-2.5h-12.5z m-2.5 12.5h-5v7.5h-5l7.5 7.5 7.5-7.5h-5v-7.5z"></path></g></svg></span></button> | |
| </header> | |
| <style data-emotion-css="1ea7y3j"> | |
| .css-1ea7y3j { | |
| -webkit-overflow-scrolling: touch; | |
| background: #ffffff; | |
| border: 0; | |
| display: block; | |
| overflow-y: auto; | |
| -webkit-transition: opacity 350ms cubic-bezier(0.4, 0, 0.2, 1); | |
| transition: opacity 350ms cubic-bezier(0.4, 0, 0.2, 1); | |
| z-index: 10; | |
| border-right: 1px solid #f0f0f2; | |
| height: calc(100% - 3.5rem); | |
| } | |
| @media (min-width:750px) { | |
| .css-1ea7y3j { | |
| background-color: #ffffff; | |
| top: calc(3.75rem + 2.5rem); | |
| } | |
| } | |
| </style> | |
| <nav class="css-1ea7y3j"> | |
| <style data-emotion-css="1s3mgj3"> | |
| .css-1s3mgj3 { | |
| color: #78757a; | |
| padding-left: 1.5rem; | |
| padding-right: 1.5rem; | |
| font-size: 0.875rem; | |
| padding-top: 1.5rem; | |
| margin: 0; | |
| font-weight: normal; | |
| text-transform: uppercase; | |
| -webkit-letter-spacing: 0.075em; | |
| -moz-letter-spacing: 0.075em; | |
| -ms-letter-spacing: 0.075em; | |
| letter-spacing: 0.075em; | |
| } | |
| </style> | |
| <h3 class="css-1s3mgj3">Documentation</h3> | |
| <style data-emotion-css="1399cn3"> | |
| .css-1399cn3 { | |
| margin: 0; | |
| padding-top: 1rem; | |
| padding-bottom: 1rem; | |
| font-size: 0.875rem; | |
| } | |
| .css-1399cn3 li { | |
| margin: 0; | |
| list-style: none; | |
| } | |
| .css-1399cn3 > li:last-child > span:before { | |
| display: none; | |
| } | |
| </style> | |
| <ul class="css-1399cn3"> | |
| <li> | |
| <style data-emotion-css="joo087"> | |
| .css-joo087 { | |
| display: -webkit-box; | |
| display: -webkit-flex; | |
| display: -ms-flexbox; | |
| display: flex; | |
| -webkit-align-items: center; | |
| -webkit-box-align: center; | |
| -ms-flex-align: center; | |
| align-items: center; | |
| position: relative; | |
| } | |
| .css-joo087:before { | |
| background: transparent; | |
| bottom: 0; | |
| top: auto; | |
| content: ''; | |
| height: 1px; | |
| position: absolute; | |
| right: 0; | |
| left: 1.5rem; | |
| } | |
| </style><span class="css-joo087"><style data-emotion-css="1dc9vet">.css-1dc9vet{padding-right:1rem;min-height:2.5rem;padding-top:0.75rem;padding-bottom:0.75rem;position:relative;z-index:1;width:100%;padding-left:1.5rem;}.css-1dc9vet.css-1dc9vet{border:0;color:#36313d;font-weight:normal;}.css-1dc9vet.css-1dc9vet:hover{background:rgba(241,222,250,0.275);color:#663399;}.css-1dc9vet.css-1dc9vet:hover:before{background:#8a4baf;-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);}.css-1dc9vet:before,.css-1dc9vet:after{content:'';left:calc(1.5rem - 1rem);top:1.3em;height:8px;position:absolute;-webkit-transition:all 250ms cubic-bezier(0.4,0,0.2,1);transition:all 250ms cubic-bezier(0.4,0,0.2,1);width:8px;}.css-1dc9vet:before{border-radius:100%;-webkit-transform:scale(0.1);-ms-transform:scale(0.1);transform:scale(0.1);}.css-1dc9vet:after{background:#8a4baf;border-radius:4px;opacity:0;-webkit-transform:translateX(-92px);-ms-transform:translateX(-92px);transform:translateX(-92px);width:0;}</style><a class="css-1dc9vet" href="/docs/">Introduction</a></span></li> | |
| <li><span class="css-joo087"><a class="css-1dc9vet" href="/docs/quick-start">Quick Start</a></span></li> | |
| <li><span class="css-joo087"><a class="css-1dc9vet" href="/docs/recipes/">Recipes</a></span></li> | |
| <li><span class="css-joo087"><a class="css-1dc9vet" href="/plugins">Plugin Library</a></span></li> | |
| <li><span class="css-joo087"><a class="css-1dc9vet" href="/starters/">Starter Library</a></span></li> | |
| <li><span class="css-joo087"><a class="css-1dc9vet" href="/docs/awesome-gatsby/">Awesome Gatsby Resources</a></span></li> | |
| <style data-emotion-css="1it6eku"> | |
| .css-1it6eku { | |
| background: rgba(241, 222, 250, 0.15); | |
| position: relative; | |
| -webkit-transition: all 100ms cubic-bezier(0.4, 0, 0.2, 1); | |
| transition: all 100ms cubic-bezier(0.4, 0, 0.2, 1); | |
| } | |
| .css-1it6eku::before { | |
| content: " "; | |
| position: absolute; | |
| border-top: 1px solid #f6edfa; | |
| left: 0; | |
| right: 0; | |
| top: 0; | |
| } | |
| .css-1it6eku:after { | |
| top: auto; | |
| bottom: -1px; | |
| } | |
| </style> | |
| <li class="css-1it6eku"> | |
| <style data-emotion-css="15wrjcl"> | |
| .css-15wrjcl { | |
| -webkit-align-items: flex-end; | |
| -webkit-box-align: flex-end; | |
| -ms-flex-align: flex-end; | |
| align-items: flex-end; | |
| display: -webkit-box; | |
| display: -webkit-flex; | |
| display: -ms-flexbox; | |
| display: flex; | |
| position: relative; | |
| width: 100%; | |
| } | |
| </style><span class="css-15wrjcl"><style data-emotion-css="i9gxme">.css-i9gxme{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}</style><span class="css-i9gxme"><span class="css-joo087"><style data-emotion-css="stq9a0">.css-stq9a0{padding-right:1rem;min-height:2.5rem;padding-top:0.75rem;padding-bottom:0.75rem;position:relative;z-index:1;width:100%;padding-right:2.5rem;padding-left:1.5rem;}.css-stq9a0.css-stq9a0{border:0;color:#36313d;font-weight:normal;}.css-stq9a0.css-stq9a0:hover{background:rgba(241,222,250,0.275);color:#663399;}.css-stq9a0.css-stq9a0:hover:before{background:#8a4baf;-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);}.css-stq9a0.css-stq9a0{color:#8a4baf;font-weight:600;}.css-stq9a0.css-stq9a0{font-family:Futura PT,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;-webkit-letter-spacing:0.075em;-moz-letter-spacing:0.075em;-ms-letter-spacing:0.075em;letter-spacing:0.075em;text-transform:uppercase;font-size:0.875rem;color:#8a4baf;}.css-stq9a0:before,.css-stq9a0:after{content:'';left:calc(1.5rem - 1rem);top:1.3em;height:8px;position:absolute;-webkit-transition:all 250ms cubic-bezier(0.4,0,0.2,1);transition:all 250ms cubic-bezier(0.4,0,0.2,1);width:8px;}.css-stq9a0:before{border-radius:100%;-webkit-transform:scale(0.1);-ms-transform:scale(0.1);transform:scale(0.1);}.css-stq9a0:after{background:#8a4baf;border-radius:4px;opacity:0;-webkit-transform:translateX(-92px);-ms-transform:translateX(-92px);transform:translateX(-92px);width:0;}</style><a class="css-stq9a0" href="/docs/guides/">Reference Guides</a></span></span> | |
| <style data-emotion-css="yxzoj8"> | |
| .css-yxzoj8 { | |
| background-color: transparent; | |
| border: 0; | |
| cursor: pointer; | |
| padding: 0; | |
| margin-left: auto; | |
| position: absolute; | |
| top: 0; | |
| bottom: 0; | |
| right: 0; | |
| min-height: 2.5rem; | |
| width: 2.5rem; | |
| z-index: 1; | |
| } | |
| </style> | |
| <button aria-controls="item_022003094672643253" aria-expanded="true" aria-label="Reference Guides collapse" class="css-yxzoj8"> | |
| <style data-emotion-css="mnk7jy"> | |
| .css-mnk7jy { | |
| display: -webkit-box; | |
| display: -webkit-flex; | |
| display: -ms-flexbox; | |
| display: flex; | |
| -webkit-flex-shrink: 0; | |
| -ms-flex-negative: 0; | |
| flex-shrink: 0; | |
| margin-left: auto; | |
| height: 100%; | |
| width: 100%; | |
| padding-top: 1.3em; | |
| min-height: 2.5rem; | |
| min-width: 2.5rem; | |
| } | |
| .css-mnk7jy:hover { | |
| background: rgba(241, 222, 250, 0.15); | |
| } | |
| </style><span class="css-mnk7jy"><style data-emotion-css="19n436v">.css-19n436v{color:#78757a;margin-left:auto;margin-right:auto;-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg);-webkit-transition:-webkit-transform 100ms cubic-bezier(0.4,0,0.2,1);-webkit-transition:transform 100ms cubic-bezier(0.4,0,0.2,1);transition:transform 100ms cubic-bezier(0.4,0,0.2,1);}</style><svg viewBox="0 0 926.23699 573.74994" version="1.1" x="0px" y="0px" width="10" height="10" class="css-19n436v"><g transform="translate(904.92214,-879.1482)"><path d=" | |
| m -673.67664,1221.6502 -231.2455,-231.24803 55.6165, | |
| -55.627 c 30.5891,-30.59485 56.1806,-55.627 56.8701,-55.627 0.6894, | |
| 0 79.8637,78.60862 175.9427,174.68583 l 174.6892,174.6858 174.6892, | |
| -174.6858 c 96.079,-96.07721 175.253196,-174.68583 175.942696, | |
| -174.68583 0.6895,0 26.281,25.03215 56.8701, | |
| 55.627 l 55.6165,55.627 -231.245496,231.24803 c -127.185,127.1864 | |
| -231.5279,231.248 -231.873,231.248 -0.3451,0 -104.688, | |
| -104.0616 -231.873,-231.248 z | |
| " fill="currentColor"></path></g></svg></span></button> | |
| </span> | |
| <style data-emotion-css="1b1xtt0"> | |
| .css-1b1xtt0 { | |
| list-style: none; | |
| margin: 0; | |
| position: relative; | |
| display: block; | |
| } | |
| </style> | |
| <ul id="item_022003094672643253" class="css-1b1xtt0"> | |
| <style data-emotion-css="xha50i"> | |
| .css-xha50i { | |
| position: relative; | |
| -webkit-transition: all 100ms cubic-bezier(0.4, 0, 0.2, 1); | |
| transition: all 100ms cubic-bezier(0.4, 0, 0.2, 1); | |
| } | |
| </style> | |
| <li class="css-xha50i"><span class="css-15wrjcl"><span class="css-i9gxme"><span class="css-joo087"><style data-emotion-css="1v37eqh">.css-1v37eqh{padding-right:1rem;min-height:2.5rem;padding-top:0.75rem;padding-bottom:0.75rem;position:relative;z-index:1;width:100%;padding-right:2.5rem;padding-left:1.5rem;}.css-1v37eqh.css-1v37eqh{border:0;color:#36313d;font-weight:normal;}.css-1v37eqh.css-1v37eqh:hover{background:rgba(241,222,250,0.275);color:#663399;}.css-1v37eqh.css-1v37eqh:hover:before{background:#8a4baf;-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);}.css-1v37eqh:before,.css-1v37eqh:after{content:'';left:calc(1.5rem - 1rem);top:1.3em;height:8px;position:absolute;-webkit-transition:all 250ms cubic-bezier(0.4,0,0.2,1);transition:all 250ms cubic-bezier(0.4,0,0.2,1);width:8px;}.css-1v37eqh:before{border-radius:100%;-webkit-transform:scale(0.1);-ms-transform:scale(0.1);transform:scale(0.1);}.css-1v37eqh:after{background:#8a4baf;border-radius:4px;opacity:0;-webkit-transform:translateX(-92px);-ms-transform:translateX(-92px);transform:translateX(-92px);width:0;}</style><a class="css-1v37eqh" href="/docs/preparing-your-environment/">Preparing Your Environment</a></span></span> | |
| <button aria-controls="item_0002725913953892656" aria-label="Preparing Your Environment expand" class="css-yxzoj8"><span class="css-mnk7jy"><style data-emotion-css="w8prxe">.css-w8prxe{color:#78757a;margin-left:auto;margin-right:auto;-webkit-transform:rotate(270deg);-ms-transform:rotate(270deg);transform:rotate(270deg);-webkit-transition:-webkit-transform 100ms cubic-bezier(0.4,0,0.2,1);-webkit-transition:transform 100ms cubic-bezier(0.4,0,0.2,1);transition:transform 100ms cubic-bezier(0.4,0,0.2,1);}</style><svg viewBox="0 0 926.23699 573.74994" version="1.1" x="0px" y="0px" width="10" height="10" class="css-w8prxe"><g transform="translate(904.92214,-879.1482)"><path d=" | |
| m -673.67664,1221.6502 -231.2455,-231.24803 55.6165, | |
| -55.627 c 30.5891,-30.59485 56.1806,-55.627 56.8701,-55.627 0.6894, | |
| 0 79.8637,78.60862 175.9427,174.68583 l 174.6892,174.6858 174.6892, | |
| -174.6858 c 96.079,-96.07721 175.253196,-174.68583 175.942696, | |
| -174.68583 0.6895,0 26.281,25.03215 56.8701, | |
| 55.627 l 55.6165,55.627 -231.245496,231.24803 c -127.185,127.1864 | |
| -231.5279,231.248 -231.873,231.248 -0.3451,0 -104.688, | |
| -104.0616 -231.873,-231.248 z | |
| " fill="currentColor"></path></g></svg></span></button> | |
| </span> | |
| <style data-emotion-css="1ovlie0"> | |
| .css-1ovlie0 { | |
| list-style: none; | |
| margin: 0; | |
| position: relative; | |
| display: none; | |
| } | |
| </style> | |
| <ul id="item_0002725913953892656" class="css-1ovlie0"> | |
| <li> | |
| <style data-emotion-css="1okwld7"> | |
| .css-1okwld7 { | |
| display: -webkit-box; | |
| display: -webkit-flex; | |
| display: -ms-flexbox; | |
| display: flex; | |
| -webkit-align-items: center; | |
| -webkit-box-align: center; | |
| -ms-flex-align: center; | |
| align-items: center; | |
| position: relative; | |
| } | |
| .css-1okwld7:before { | |
| background: transparent; | |
| bottom: 0; | |
| top: auto; | |
| content: ''; | |
| height: 1px; | |
| position: absolute; | |
| right: 0; | |
| left: 3rem; | |
| } | |
| </style><span class="css-1okwld7"><style data-emotion-css="14mmb96">.css-14mmb96{padding-right:1rem;min-height:2.5rem;padding-top:0.75rem;padding-bottom:0.75rem;position:relative;z-index:1;width:100%;padding-left:3rem;}.css-14mmb96.css-14mmb96{border:0;color:#36313d;font-weight:normal;}.css-14mmb96.css-14mmb96:hover{background:rgba(241,222,250,0.275);color:#663399;}.css-14mmb96.css-14mmb96:hover:before{background:#8a4baf;-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);}.css-14mmb96:before,.css-14mmb96:after{content:'';left:calc(3rem - 1.5rem);top:1.3em;height:8px;position:absolute;-webkit-transition:all 250ms cubic-bezier(0.4,0,0.2,1);transition:all 250ms cubic-bezier(0.4,0,0.2,1);width:8px;}.css-14mmb96:before{border-radius:100%;-webkit-transform:scale(0.1);-ms-transform:scale(0.1);transform:scale(0.1);}.css-14mmb96:after{background:#8a4baf;border-radius:4px;opacity:0;-webkit-transform:translateX(-92px);-ms-transform:translateX(-92px);transform:translateX(-92px);width:0;}</style><a class="css-14mmb96" href="/docs/browser-support/">Browser Support</a></span></li> | |
| <li><span class="css-1okwld7"><a class="css-14mmb96" href="/docs/gatsby-on-windows/">Gatsby on Windows</a></span></li> | |
| <li><span class="css-1okwld7"><a class="css-14mmb96" href="/docs/gatsby-on-linux/">Gatsby on Linux</a></span></li> | |
| </ul> | |
| </li> | |
| <li class="css-xha50i"><span class="css-15wrjcl"><span class="css-i9gxme"><span class="css-joo087"><a class="css-1v37eqh" href="/docs/deploying-and-hosting/">Deploying & Hosting</a></span></span> | |
| <button aria-controls="item_01402787096013025" aria-label="Deploying & Hosting expand" class="css-yxzoj8"><span class="css-mnk7jy"><svg viewBox="0 0 926.23699 573.74994" version="1.1" x="0px" y="0px" width="10" height="10" class="css-w8prxe"><g transform="translate(904.92214,-879.1482)"><path d=" | |
| m -673.67664,1221.6502 -231.2455,-231.24803 55.6165, | |
| -55.627 c 30.5891,-30.59485 56.1806,-55.627 56.8701,-55.627 0.6894, | |
| 0 79.8637,78.60862 175.9427,174.68583 l 174.6892,174.6858 174.6892, | |
| -174.6858 c 96.079,-96.07721 175.253196,-174.68583 175.942696, | |
| -174.68583 0.6895,0 26.281,25.03215 56.8701, | |
| 55.627 l 55.6165,55.627 -231.245496,231.24803 c -127.185,127.1864 | |
| -231.5279,231.248 -231.873,231.248 -0.3451,0 -104.688, | |
| -104.0616 -231.873,-231.248 z | |
| " fill="currentColor"></path></g></svg></span></button> | |
| </span> | |
| <ul id="item_01402787096013025" class="css-1ovlie0"> | |
| <li><span class="css-1okwld7"><a class="css-14mmb96" href="/docs/preparing-for-deployment/">Preparing a Site for Deployment</a></span></li> | |
| <li><span class="css-1okwld7"><a class="css-14mmb96" href="/docs/deploying-to-aws-amplify/">Deploying to AWS Amplify</a></span></li> | |
| <li><span class="css-1okwld7"><a class="css-14mmb96" href="/docs/deploying-to-s3-cloudfront/">Deploying to S3 and CloudFront</a></span></li> | |
| <li><span class="css-1okwld7"><a class="css-14mmb96" href="/docs/deploying-to-aerobatic/">Deploying to Aerobatic</a></span></li> | |
| <li><span class="css-1okwld7"><a class="css-14mmb96" href="/docs/deploying-to-heroku/">Deploying to Heroku</a></span></li> | |
| <li><span class="css-1okwld7"><a class="css-14mmb96" href="/docs/deploying-to-now/">Deploying to Now</a></span></li> | |
| <li><span class="css-1okwld7"><a class="css-14mmb96" href="/docs/deploying-to-gitlab-pages/">Deploying to GitLab Pages</a></span></li> | |
| <li><span class="css-1okwld7"><a class="css-14mmb96" href="/docs/hosting-on-netlify/">Hosting on Netlify</a></span></li> | |
| <li><span class="css-1okwld7"><a class="css-14mmb96" href="/docs/deploying-to-render/">Deploying to Render</a></span></li> | |
| <li><span class="css-1okwld7"><a class="css-14mmb96" href="/docs/deploying-to-surge/">Deploying to Surge</a></span></li> | |
| <li><span class="css-1okwld7"><a class="css-14mmb96" href="/docs/path-prefix/">Adding a Path Prefix</a></span></li> | |
| <li><span class="css-1okwld7"><a class="css-14mmb96" href="/docs/how-gatsby-works-with-github-pages/">How Gatsby Works with GitHub Pages</a></span></li> | |
| <li><span class="css-1okwld7"><a class="css-14mmb96" href="/docs/multi-core-builds/">Multi-Core Builds</a></span></li> | |
| </ul> | |
| </li> | |
| <li class="css-xha50i"><span class="css-15wrjcl"><span class="css-i9gxme"><span class="css-joo087"><a class="css-1v37eqh" href="/docs/customization/">Custom Configuration</a></span></span> | |
| <button aria-controls="item_020046532901011838" aria-label="Custom Configuration expand" class="css-yxzoj8"><span class="css-mnk7jy"><svg viewBox="0 0 926.23699 573.74994" version="1.1" x="0px" y="0px" width="10" height="10" class="css-w8prxe"><g transform="translate(904.92214,-879.1482)"><path d=" | |
| m -673.67664,1221.6502 -231.2455,-231.24803 55.6165, | |
| -55.627 c 30.5891,-30.59485 56.1806,-55.627 56.8701,-55.627 0.6894, | |
| 0 79.8637,78.60862 175.9427,174.68583 l 174.6892,174.6858 174.6892, | |
| -174.6858 c 96.079,-96.07721 175.253196,-174.68583 175.942696, | |
| -174.68583 0.6895,0 26.281,25.03215 56.8701, | |
| 55.627 l 55.6165,55.627 -231.245496,231.24803 c -127.185,127.1864 | |
| -231.5279,231.248 -231.873,231.248 -0.3451,0 -104.688, | |
| -104.0616 -231.873,-231.248 z | |
| " fill="currentColor"></path></g></svg></span></button> | |
| </span> | |
| <ul id="item_020046532901011838" class="css-1ovlie0"> | |
| <li><span class="css-1okwld7"><a class="css-14mmb96" href="/docs/babel/">Customizing Babel.js Config</a></span></li> | |
| <li><span class="css-1okwld7"><a class="css-14mmb96" href="/docs/babel-plugin-macros/">Using Babel Plugin Macros</a></span></li> | |
| <li><span class="css-1okwld7"><a class="css-14mmb96" href="/docs/add-custom-webpack-config/">Adding a Custom Webpack Config</a></span></li> | |
| <li><span class="css-1okwld7"><a class="css-14mmb96" href="/docs/custom-html/">Customizing html.js</a></span></li> | |
| <li><span class="css-1okwld7"><a class="css-14mmb96" href="/docs/environment-variables/">Using Environment Variables</a></span></li> | |
| <li><span class="css-1okwld7"><a class="css-14mmb96" href="/docs/eslint/">Using ESLint</a></span></li> | |
| <li><span class="css-1okwld7"><a class="css-14mmb96" href="/docs/api-proxy/">Proxying API Requests</a></span></li> | |
| </ul> | |
| </li> | |
| <li class="css-xha50i"><span class="css-15wrjcl"><span class="css-i9gxme"><span class="css-joo087"><a class="css-1v37eqh" href="/docs/images-and-files/">Images, Files, and Video</a></span></span> | |
| <button aria-controls="item_03842334090257582" aria-label="Images, Files, and Video expand" class="css-yxzoj8"><span class="css-mnk7jy"><svg viewBox="0 0 926.23699 573.74994" version="1.1" x="0px" y="0px" width="10" height="10" class="css-w8prxe"><g transform="translate(904.92214,-879.1482)"><path d=" | |
| m -673.67664,1221.6502 -231.2455,-231.24803 55.6165, | |
| -55.627 c 30.5891,-30.59485 56.1806,-55.627 56.8701,-55.627 0.6894, | |
| 0 79.8637,78.60862 175.9427,174.68583 l 174.6892,174.6858 174.6892, | |
| -174.6858 c 96.079,-96.07721 175.253196,-174.68583 175.942696, | |
| -174.68583 0.6895,0 26.281,25.03215 56.8701, | |
| 55.627 l 55.6165,55.627 -231.245496,231.24803 c -127.185,127.1864 | |
| -231.5279,231.248 -231.873,231.248 -0.3451,0 -104.688, | |
| -104.0616 -231.873,-231.248 z | |
| " fill="currentColor"></path></g></svg></span></button> | |
| </span> | |
| <ul id="item_03842334090257582" class="css-1ovlie0"> | |
| <li><span class="css-1okwld7"><a class="css-14mmb96" href="/docs/importing-assets-into-files/">Importing Assets Directly Into Files</a></span></li> | |
| <li><span class="css-1okwld7"><a class="css-14mmb96" href="/docs/static-folder/">Using the Static Folder</a></span></li> | |
| <li><span class="css-1okwld7"><a class="css-14mmb96" href="/docs/using-gatsby-image/">Using gatsby-image</a></span></li> | |
| <li><span class="css-1okwld7"><a class="css-14mmb96" href="/docs/working-with-images/">Working with Images in Gatsby</a></span></li> | |
| <li><span class="css-1okwld7"><a class="css-14mmb96" href="/docs/preoptimizing-images/">Preoptimizing your Images</a></span></li> | |
| <li><span class="css-1okwld7"><a class="css-14mmb96" href="/docs/working-with-video/">Working With Video</a></span></li> | |
| <li><span class="css-1okwld7"><a class="css-14mmb96" href="/docs/importing-media-content/">Importing Media Content</a></span></li> | |
| <li><span class="css-1okwld7"><a class="css-14mmb96" href="/docs/working-with-gifs/">Working with GIFs</a></span></li> | |
| <li><span class="css-1okwld7"><a class="css-14mmb96" href="/docs/working-with-images-in-markdown/">Working with Images in Markdown</a></span></li> | |
| </ul> | |
| </li> | |
| <li class="css-xha50i"><span class="css-15wrjcl"><span class="css-i9gxme"><span class="css-joo087"><a class="css-1v37eqh" href="/docs/content-and-data/">Sourcing Content and Data</a></span></span> | |
| <button aria-controls="item_06744399508325016" aria-label="Sourcing Content and Data expand" class="css-yxzoj8"><span class="css-mnk7jy"><svg viewBox="0 0 926.23699 573.74994" version="1.1" x="0px" y="0px" width="10" height="10" class="css-w8prxe"><g transform="translate(904.92214,-879.1482)"><path d=" | |
| m -673.67664,1221.6502 -231.2455,-231.24803 55.6165, | |
| -55.627 c 30.5891,-30.59485 56.1806,-55.627 56.8701,-55.627 0.6894, | |
| 0 79.8637,78.60862 175.9427,174.68583 l 174.6892,174.6858 174.6892, | |
| -174.6858 c 96.079,-96.07721 175.253196,-174.68583 175.942696, | |
| -174.68583 0.6895,0 26.281,25.03215 56.8701, | |
| 55.627 l 55.6165,55.627 -231.245496,231.24803 c -127.185,127.1864 | |
| -231.5279,231.248 -231.873,231.248 -0.3451,0 -104.688, | |
| -104.0616 -231.873,-231.248 z | |
| " fill="currentColor"></path></g></svg></span></button> | |
| </span> | |
| <ul id="item_06744399508325016" class="css-1ovlie0"> | |
| <li><span class="css-1okwld7"><a class="css-14mmb96" href="/docs/using-gatsby-without-graphql/">Using Gatsby Without GraphQL</a></span></li> | |
| <li><span class="css-1okwld7"><a class="css-14mmb96" href="/docs/sourcing-from-the-filesystem/">Sourcing From the Filesystem</a></span></li> | |
| <li><span class="css-1okwld7"><a class="css-14mmb96" href="/docs/sourcing-from-databases/">Sourcing From Databases</a></span></li> | |
| <li><span class="css-1okwld7"><style data-emotion-css="ulde4x">.css-ulde4x{padding-right:1rem;min-height:2.5rem;padding-top:0.75rem;padding-bottom:0.75rem;position:relative;z-index:1;width:100%;padding-left:3rem;}.css-ulde4x.css-ulde4x{border:0;color:#36313d;font-weight:normal;}.css-ulde4x.css-ulde4x:hover{background:rgba(241,222,250,0.275);color:#663399;}.css-ulde4x.css-ulde4x:hover:before{background:#8a4baf;-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);}.css-ulde4x.css-ulde4x{color:#78757a;}.css-ulde4x:before,.css-ulde4x:after{content:'';left:calc(3rem - 1.5rem);top:1.3em;height:8px;position:absolute;-webkit-transition:all 250ms cubic-bezier(0.4,0,0.2,1);transition:all 250ms cubic-bezier(0.4,0,0.2,1);width:8px;}.css-ulde4x:before{border-radius:100%;-webkit-transform:scale(0.1);-ms-transform:scale(0.1);transform:scale(0.1);}.css-ulde4x:after{background:#8a4baf;border-radius:4px;opacity:0;-webkit-transform:translateX(-92px);-ms-transform:translateX(-92px);transform:translateX(-92px);width:0;}</style><a class="css-ulde4x" href="/docs/sourcing-from-saas-services/">Sourcing from SaaS Services</a></span></li> | |
| <li><span class="css-1okwld7"><a class="css-14mmb96" href="/docs/sourcing-from-private-apis/">Sourcing from Private APIs</a></span></li> | |
| <li class="css-xha50i"><span class="css-15wrjcl"><span class="css-i9gxme"><span class="css-1okwld7"><style data-emotion-css="12c97ec">.css-12c97ec{padding-right:1rem;min-height:2.5rem;padding-top:0.75rem;padding-bottom:0.75rem;position:relative;z-index:1;width:100%;padding-right:2.5rem;padding-left:3rem;}.css-12c97ec.css-12c97ec{border:0;color:#36313d;font-weight:normal;}.css-12c97ec.css-12c97ec:hover{background:rgba(241,222,250,0.275);color:#663399;}.css-12c97ec.css-12c97ec:hover:before{background:#8a4baf;-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);}.css-12c97ec:before,.css-12c97ec:after{content:'';left:calc(3rem - 1.5rem);top:1.3em;height:8px;position:absolute;-webkit-transition:all 250ms cubic-bezier(0.4,0,0.2,1);transition:all 250ms cubic-bezier(0.4,0,0.2,1);width:8px;}.css-12c97ec:before{border-radius:100%;-webkit-transform:scale(0.1);-ms-transform:scale(0.1);transform:scale(0.1);}.css-12c97ec:after{background:#8a4baf;border-radius:4px;opacity:0;-webkit-transform:translateX(-92px);-ms-transform:translateX(-92px);transform:translateX(-92px);width:0;}</style><a class="css-12c97ec" href="/docs/headless-cms/">Sourcing from (Headless) CMSs</a></span></span> | |
| <button aria-controls="item_05645923552481955" aria-label="Sourcing from (Headless) CMSs expand" class="css-yxzoj8"><span class="css-mnk7jy"><svg viewBox="0 0 926.23699 573.74994" version="1.1" x="0px" y="0px" width="10" height="10" class="css-w8prxe"><g transform="translate(904.92214,-879.1482)"><path d=" | |
| m -673.67664,1221.6502 -231.2455,-231.24803 55.6165, | |
| -55.627 c 30.5891,-30.59485 56.1806,-55.627 56.8701,-55.627 0.6894, | |
| 0 79.8637,78.60862 175.9427,174.68583 l 174.6892,174.6858 174.6892, | |
| -174.6858 c 96.079,-96.07721 175.253196,-174.68583 175.942696, | |
| -174.68583 0.6895,0 26.281,25.03215 56.8701, | |
| 55.627 l 55.6165,55.627 -231.245496,231.24803 c -127.185,127.1864 | |
| -231.5279,231.248 -231.873,231.248 -0.3451,0 -104.688, | |
| -104.0616 -231.873,-231.248 z | |
| " fill="currentColor"></path></g></svg></span></button> | |
| </span> | |
| <ul id="item_05645923552481955" class="css-1ovlie0"> | |
| <li> | |
| <style data-emotion-css="i3q8q7"> | |
| .css-i3q8q7 { | |
| display: -webkit-box; | |
| display: -webkit-flex; | |
| display: -ms-flexbox; | |
| display: flex; | |
| -webkit-align-items: center; | |
| -webkit-box-align: center; | |
| -ms-flex-align: center; | |
| align-items: center; | |
| position: relative; | |
| } | |
| .css-i3q8q7:before { | |
| background: transparent; | |
| bottom: 0; | |
| top: auto; | |
| content: ''; | |
| height: 1px; | |
| position: absolute; | |
| right: 0; | |
| left: 4.5rem; | |
| } | |
| </style><span class="css-i3q8q7"><style data-emotion-css="1qspiaa">.css-1qspiaa{padding-right:1rem;min-height:2.5rem;padding-top:0.75rem;padding-bottom:0.75rem;position:relative;z-index:1;width:100%;padding-left:4.5rem;}.css-1qspiaa.css-1qspiaa{border:0;color:#36313d;font-weight:normal;}.css-1qspiaa.css-1qspiaa:hover{background:rgba(241,222,250,0.275);color:#663399;}.css-1qspiaa.css-1qspiaa:hover:before{background:#8a4baf;-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);}.css-1qspiaa:before,.css-1qspiaa:after{content:'';left:calc(4.5rem - 1.5rem);top:1.3em;height:8px;position:absolute;-webkit-transition:all 250ms cubic-bezier(0.4,0,0.2,1);transition:all 250ms cubic-bezier(0.4,0,0.2,1);width:8px;}.css-1qspiaa:before{border-radius:100%;-webkit-transform:scale(0.1);-ms-transform:scale(0.1);transform:scale(0.1);}.css-1qspiaa:after{background:#8a4baf;border-radius:4px;opacity:0;-webkit-transform:translateX(-92px);-ms-transform:translateX(-92px);transform:translateX(-92px);width:0;}</style><a class="css-1qspiaa" href="/docs/sourcing-from-contentful/">Sourcing from Contentful</a></span></li> | |
| <li><span class="css-i3q8q7"><a class="css-1qspiaa" href="/docs/sourcing-from-netlify-cms/">Sourcing from Netlify CMS</a></span></li> | |
| <li><span class="css-i3q8q7"><a class="css-1qspiaa" href="/docs/sourcing-from-wordpress/">Sourcing from WordPress</a></span></li> | |
| <li><span class="css-i3q8q7"><a class="css-1qspiaa" href="/docs/sourcing-from-prismic/">Sourcing from Prismic</a></span></li> | |
| <li><span class="css-i3q8q7"><a class="css-1qspiaa" href="/docs/sourcing-from-drupal/">Sourcing from Drupal</a></span></li> | |
| </ul> | |
| </li> | |
| </ul> | |
| </li> | |
| <li class="css-xha50i"><span class="css-15wrjcl"><span class="css-i9gxme"><span class="css-joo087"><a class="css-1v37eqh" href="/docs/graphql/">Querying Your Data with GraphQL</a></span></span> | |
| <button aria-controls="item_07380072478246291" aria-label="Querying Your Data with GraphQL expand" class="css-yxzoj8"><span class="css-mnk7jy"><svg viewBox="0 0 926.23699 573.74994" version="1.1" x="0px" y="0px" width="10" height="10" class="css-w8prxe"><g transform="translate(904.92214,-879.1482)"><path d=" | |
| m -673.67664,1221.6502 -231.2455,-231.24803 55.6165, | |
| -55.627 c 30.5891,-30.59485 56.1806,-55.627 56.8701,-55.627 0.6894, | |
| 0 79.8637,78.60862 175.9427,174.68583 l 174.6892,174.6858 174.6892, | |
| -174.6858 c 96.079,-96.07721 175.253196,-174.68583 175.942696, | |
| -174.68583 0.6895,0 26.281,25.03215 56.8701, | |
| 55.627 l 55.6165,55.627 -231.245496,231.24803 c -127.185,127.1864 | |
| -231.5279,231.248 -231.873,231.248 -0.3451,0 -104.688, | |
| -104.0616 -231.873,-231.248 z | |
| " fill="currentColor"></path></g></svg></span></button> | |
| </span> | |
| <ul id="item_07380072478246291" class="css-1ovlie0"> | |
| <li><span class="css-1okwld7"><a class="css-14mmb96" href="/docs/why-gatsby-uses-graphql/">Why Gatsby Uses GraphQL</a></span></li> | |
| <li><span class="css-1okwld7"><a class="css-14mmb96" href="/docs/graphql-reference/">Understanding GraphQL Syntax</a></span></li> | |
| <li><span class="css-1okwld7"><a class="css-14mmb96" href="/docs/introducing-graphiql/">Introducing GraphiQL</a></span></li> | |
| <li><span class="css-1okwld7"><a class="css-14mmb96" href="/docs/creating-and-modifying-pages/">Creating and Modifying Pages</a></span></li> | |
| <li><span class="css-1okwld7"><a class="css-14mmb96" href="/docs/page-query/">Querying Data in Pages with GraphQL</a></span></li> | |
| <li><span class="css-1okwld7"><a class="css-14mmb96" href="/docs/static-query/">Querying Data in Components with StaticQuery</a></span></li> | |
| <li><span class="css-1okwld7"><a class="css-14mmb96" href="/docs/use-static-query/">Querying Data in Components with the useStaticQuery Hook</a></span></li> | |
| <li><span class="css-1okwld7"><a class="css-14mmb96" href="/docs/using-fragments/">Using GraphQL Fragments</a></span></li> | |
| <li><span class="css-1okwld7"><a class="css-14mmb96" href="/docs/creating-slugs-for-pages/">Creating Slugs for Pages</a></span></li> | |
| <li><span class="css-1okwld7"><a class="css-14mmb96" href="/docs/programmatically-create-pages-from-data/">Creating Pages from Data Programmatically</a></span></li> | |
| <li><span class="css-1okwld7"><a class="css-14mmb96" href="/docs/third-party-graphql/">Using Third-Party GraphQL APIs</a></span></li> | |
| <li><span class="css-1okwld7"><a class="css-14mmb96" href="/docs/adding-markdown-pages/">Adding Markdown Pages</a></span></li> | |
| <li><span class="css-1okwld7"><a class="css-14mmb96" href="/docs/adding-a-list-of-markdown-blog-posts/">Adding a List of Markdown Blog Posts</a></span></li> | |
| </ul> | |
| </li> | |
| <li class="css-xha50i"><span class="css-15wrjcl"><span class="css-i9gxme"><span class="css-joo087"><a class="css-1v37eqh" href="/docs/plugins/">Plugins</a></span></span> | |
| <button aria-controls="item_07874873755495684" aria-label="Plugins expand" class="css-yxzoj8"><span class="css-mnk7jy"><svg viewBox="0 0 926.23699 573.74994" version="1.1" x="0px" y="0px" width="10" height="10" class="css-w8prxe"><g transform="translate(904.92214,-879.1482)"><path d=" | |
| m -673.67664,1221.6502 -231.2455,-231.24803 55.6165, | |
| -55.627 c 30.5891,-30.59485 56.1806,-55.627 56.8701,-55.627 0.6894, | |
| 0 79.8637,78.60862 175.9427,174.68583 l 174.6892,174.6858 174.6892, | |
| -174.6858 c 96.079,-96.07721 175.253196,-174.68583 175.942696, | |
| -174.68583 0.6895,0 26.281,25.03215 56.8701, | |
| 55.627 l 55.6165,55.627 -231.245496,231.24803 c -127.185,127.1864 | |
| -231.5279,231.248 -231.873,231.248 -0.3451,0 -104.688, | |
| -104.0616 -231.873,-231.248 z | |
| " fill="currentColor"></path></g></svg></span></button> | |
| </span> | |
| <ul id="item_07874873755495684" class="css-1ovlie0"> | |
| <li><span class="css-1okwld7"><a class="css-14mmb96" href="/docs/what-is-a-plugin/">What is a Plugin?</a></span></li> | |
| <li><span class="css-1okwld7"><a class="css-14mmb96" href="/docs/using-a-plugin-in-your-site/">Using a Plugin in Your Site</a></span></li> | |
| <li><span class="css-1okwld7"><a class="css-14mmb96" href="/docs/what-you-dont-need-plugins-for/">What You Don't Need Plugins For</a></span></li> | |
| <li><span class="css-1okwld7"><a class="css-14mmb96" href="/docs/loading-plugins-from-your-local-plugins-folder/">Loading Plugins from Your Local Plugins Folder</a></span></li> | |
| <li><span class="css-1okwld7"><a class="css-14mmb96" href="/plugins/">Plugin Library</a></span></li> | |
| <li class="css-xha50i"><span class="css-15wrjcl"><span class="css-i9gxme"><span class="css-1okwld7"><a class="css-12c97ec" href="/docs/creating-plugins/">Creating Plugins</a></span></span> | |
| <button aria-controls="item_07961107188514036" aria-label="Creating Plugins expand" class="css-yxzoj8"><span class="css-mnk7jy"><svg viewBox="0 0 926.23699 573.74994" version="1.1" x="0px" y="0px" width="10" height="10" class="css-w8prxe"><g transform="translate(904.92214,-879.1482)"><path d=" | |
| m -673.67664,1221.6502 -231.2455,-231.24803 55.6165, | |
| -55.627 c 30.5891,-30.59485 56.1806,-55.627 56.8701,-55.627 0.6894, | |
| 0 79.8637,78.60862 175.9427,174.68583 l 174.6892,174.6858 174.6892, | |
| -174.6858 c 96.079,-96.07721 175.253196,-174.68583 175.942696, | |
| -174.68583 0.6895,0 26.281,25.03215 56.8701, | |
| 55.627 l 55.6165,55.627 -231.245496,231.24803 c -127.185,127.1864 | |
| -231.5279,231.248 -231.873,231.248 -0.3451,0 -104.688, | |
| -104.0616 -231.873,-231.248 z | |
| " fill="currentColor"></path></g></svg></span></button> | |
| </span> | |
| <ul id="item_07961107188514036" class="css-1ovlie0"> | |
| <li><span class="css-i3q8q7"><a class="css-1qspiaa" href="/docs/naming-a-plugin/">Naming a Plugin</a></span></li> | |
| <li><span class="css-i3q8q7"><a class="css-1qspiaa" href="/docs/files-gatsby-looks-for-in-a-plugin/">Files Gatsby Looks for in a Plugin</a></span></li> | |
| <li><span class="css-i3q8q7"><a class="css-1qspiaa" href="/docs/creating-a-local-plugin/">Creating a Local Plugin</a></span></li> | |
| <li><span class="css-i3q8q7"><a class="css-1qspiaa" href="/docs/creating-a-source-plugin/">Creating a Source Plugin</a></span></li> | |
| <li><span class="css-i3q8q7"><a class="css-1qspiaa" href="/docs/creating-a-transformer-plugin/">Creating a Transformer Plugin</a></span></li> | |
| <li><span class="css-i3q8q7"><a class="css-1qspiaa" href="/contributing/submit-to-plugin-library/">Submit to Plugin Library</a></span></li> | |
| <li><span class="css-i3q8q7"><a class="css-1qspiaa" href="/docs/pixabay-source-plugin-tutorial/">Pixabay Image Source Plugin Tutorial</a></span></li> | |
| <li><span class="css-i3q8q7"><a class="css-1qspiaa" href="/docs/remark-plugin-tutorial/">Remark Plugin Tutorial</a></span></li> | |
| <li><span class="css-i3q8q7"><style data-emotion-css="1sgu29x">.css-1sgu29x{padding-right:1rem;min-height:2.5rem;padding-top:0.75rem;padding-bottom:0.75rem;position:relative;z-index:1;width:100%;padding-left:4.5rem;}.css-1sgu29x.css-1sgu29x{border:0;color:#36313d;font-weight:normal;}.css-1sgu29x.css-1sgu29x:hover{background:rgba(241,222,250,0.275);color:#663399;}.css-1sgu29x.css-1sgu29x:hover:before{background:#8a4baf;-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);}.css-1sgu29x.css-1sgu29x{color:#78757a;}.css-1sgu29x:before,.css-1sgu29x:after{content:'';left:calc(4.5rem - 1.5rem);top:1.3em;height:8px;position:absolute;-webkit-transition:all 250ms cubic-bezier(0.4,0,0.2,1);transition:all 250ms cubic-bezier(0.4,0,0.2,1);width:8px;}.css-1sgu29x:before{border-radius:100%;-webkit-transform:scale(0.1);-ms-transform:scale(0.1);transform:scale(0.1);}.css-1sgu29x:after{background:#8a4baf;border-radius:4px;opacity:0;-webkit-transform:translateX(-92px);-ms-transform:translateX(-92px);transform:translateX(-92px);width:0;}</style><a class="css-1sgu29x" href="/docs/maintaining-a-plugin/">Maintaining a Plugin</a></span></li> | |
| </ul> | |
| </li> | |
| </ul> | |
| </li> | |
| <li class="css-xha50i"><span class="css-15wrjcl"><span class="css-i9gxme"><span class="css-joo087"><a class="css-1v37eqh" href="/docs/starters/">Starters</a></span></span> | |
| <button aria-controls="item_06003628503027343" aria-label="Starters expand" class="css-yxzoj8"><span class="css-mnk7jy"><svg viewBox="0 0 926.23699 573.74994" version="1.1" x="0px" y="0px" width="10" height="10" class="css-w8prxe"><g transform="translate(904.92214,-879.1482)"><path d=" | |
| m -673.67664,1221.6502 -231.2455,-231.24803 55.6165, | |
| -55.627 c 30.5891,-30.59485 56.1806,-55.627 56.8701,-55.627 0.6894, | |
| 0 79.8637,78.60862 175.9427,174.68583 l 174.6892,174.6858 174.6892, | |
| -174.6858 c 96.079,-96.07721 175.253196,-174.68583 175.942696, | |
| -174.68583 0.6895,0 26.281,25.03215 56.8701, | |
| 55.627 l 55.6165,55.627 -231.245496,231.24803 c -127.185,127.1864 | |
| -231.5279,231.248 -231.873,231.248 -0.3451,0 -104.688, | |
| -104.0616 -231.873,-231.248 z | |
| " fill="currentColor"></path></g></svg></span></button> | |
| </span> | |
| <ul id="item_06003628503027343" class="css-1ovlie0"> | |
| <li><span class="css-1okwld7"><a class="css-14mmb96" href="/starters/">Starter Library</a></span></li> | |
| <li><span class="css-1okwld7"><a class="css-14mmb96" href="/docs/creating-a-starter/">Creating a Starter</a></span></li> | |
| </ul> | |
| </li> | |
| <li class="css-xha50i"><span class="css-15wrjcl"><span class="css-i9gxme"><span class="css-joo087"><a class="css-1v37eqh" href="/docs/themes/">Themes</a></span></span> | |
| <button aria-controls="item_042036106897359904" aria-label="Themes expand" class="css-yxzoj8"><span class="css-mnk7jy"><svg viewBox="0 0 926.23699 573.74994" version="1.1" x="0px" y="0px" width="10" height="10" class="css-w8prxe"><g transform="translate(904.92214,-879.1482)"><path d=" | |
| m -673.67664,1221.6502 -231.2455,-231.24803 55.6165, | |
| -55.627 c 30.5891,-30.59485 56.1806,-55.627 56.8701,-55.627 0.6894, | |
| 0 79.8637,78.60862 175.9427,174.68583 l 174.6892,174.6858 174.6892, | |
| -174.6858 c 96.079,-96.07721 175.253196,-174.68583 175.942696, | |
| -174.68583 0.6895,0 26.281,25.03215 56.8701, | |
| 55.627 l 55.6165,55.627 -231.245496,231.24803 c -127.185,127.1864 | |
| -231.5279,231.248 -231.873,231.248 -0.3451,0 -104.688, | |
| -104.0616 -231.873,-231.248 z | |
| " fill="currentColor"></path></g></svg></span></button> | |
| </span> | |
| <ul id="item_042036106897359904" class="css-1ovlie0"> | |
| <li><span class="css-1okwld7"><a class="css-14mmb96" href="/docs/themes/what-are-gatsby-themes">What are Gatsby Themes?</a></span></li> | |
| <li><span class="css-1okwld7"><a class="css-14mmb96" href="/docs/themes/using-a-gatsby-theme">Using a Gatsby Theme</a></span></li> | |
| <li><span class="css-1okwld7"><a class="css-14mmb96" href="/docs/themes/using-multiple-gatsby-themes">Using Multiple Gatsby Themes</a></span></li> | |
| <li class="css-xha50i"><span class="css-15wrjcl"><span class="css-i9gxme"><span class="css-1okwld7"><a class="css-12c97ec" href="/docs/themes/building-themes">Building Themes</a></span></span> | |
| <button aria-controls="item_05538787245298997" aria-label="Building Themes expand" class="css-yxzoj8"><span class="css-mnk7jy"><svg viewBox="0 0 926.23699 573.74994" version="1.1" x="0px" y="0px" width="10" height="10" class="css-w8prxe"><g transform="translate(904.92214,-879.1482)"><path d=" | |
| m -673.67664,1221.6502 -231.2455,-231.24803 55.6165, | |
| -55.627 c 30.5891,-30.59485 56.1806,-55.627 56.8701,-55.627 0.6894, | |
| 0 79.8637,78.60862 175.9427,174.68583 l 174.6892,174.6858 174.6892, | |
| -174.6858 c 96.079,-96.07721 175.253196,-174.68583 175.942696, | |
| -174.68583 0.6895,0 26.281,25.03215 56.8701, | |
| 55.627 l 55.6165,55.627 -231.245496,231.24803 c -127.185,127.1864 | |
| -231.5279,231.248 -231.873,231.248 -0.3451,0 -104.688, | |
| -104.0616 -231.873,-231.248 z | |
| " fill="currentColor"></path></g></svg></span></button> | |
| </span> | |
| <ul id="item_05538787245298997" class="css-1ovlie0"> | |
| <li><span class="css-i3q8q7"><a class="css-1qspiaa" href="/docs/themes/api-reference">Themes API Reference</a></span></li> | |
| <li><span class="css-i3q8q7"><a class="css-1qspiaa" href="/docs/themes/converting-a-starter">Converting a Starter</a></span></li> | |
| <li><span class="css-i3q8q7"><a class="css-1qspiaa" href="/docs/themes/theme-composition">Theme Composition</a></span></li> | |
| <li><span class="css-i3q8q7"><a class="css-1qspiaa" href="/docs/themes/conventions">Conventions</a></span></li> | |
| </ul> | |
| </li> | |
| </ul> | |
| </li> | |
| <li class="css-xha50i"><span class="css-15wrjcl"><span class="css-i9gxme"><span class="css-joo087"><a class="css-1v37eqh" href="/docs/styling/">Styling Your Site</a></span></span> | |
| <button aria-controls="item_05434339555362822" aria-label="Styling Your Site expand" class="css-yxzoj8"><span class="css-mnk7jy"><svg viewBox="0 0 926.23699 573.74994" version="1.1" x="0px" y="0px" width="10" height="10" class="css-w8prxe"><g transform="translate(904.92214,-879.1482)"><path d=" | |
| m -673.67664,1221.6502 -231.2455,-231.24803 55.6165, | |
| -55.627 c 30.5891,-30.59485 56.1806,-55.627 56.8701,-55.627 0.6894, | |
| 0 79.8637,78.60862 175.9427,174.68583 l 174.6892,174.6858 174.6892, | |
| -174.6858 c 96.079,-96.07721 175.253196,-174.68583 175.942696, | |
| -174.68583 0.6895,0 26.281,25.03215 56.8701, | |
| 55.627 l 55.6165,55.627 -231.245496,231.24803 c -127.185,127.1864 | |
| -231.5279,231.248 -231.873,231.248 -0.3451,0 -104.688, | |
| -104.0616 -231.873,-231.248 z | |
| " fill="currentColor"></path></g></svg></span></button> | |
| </span> | |
| <ul id="item_05434339555362822" class="css-1ovlie0"> | |
| <li><span class="css-1okwld7"><a class="css-14mmb96" href="/docs/layout-components/">Using Layout Components</a></span></li> | |
| <li><span class="css-1okwld7"><a class="css-14mmb96" href="/docs/global-css/">Standard, Global CSS Files</a></span></li> | |
| <li><span class="css-1okwld7"><a class="css-14mmb96" href="/docs/css-modules/">Component-Scoped CSS Modules</a></span></li> | |
| <li class="css-xha50i"><span class="css-15wrjcl"><span class="css-i9gxme"><span class="css-1okwld7"><a class="css-12c97ec" href="/docs/css-in-js/">Enhancing with CSS-in-JS</a></span></span> | |
| <button aria-controls="item_019607558329609986" aria-label="Enhancing with CSS-in-JS expand" class="css-yxzoj8"><span class="css-mnk7jy"><svg viewBox="0 0 926.23699 573.74994" version="1.1" x="0px" y="0px" width="10" height="10" class="css-w8prxe"><g transform="translate(904.92214,-879.1482)"><path d=" | |
| m -673.67664,1221.6502 -231.2455,-231.24803 55.6165, | |
| -55.627 c 30.5891,-30.59485 56.1806,-55.627 56.8701,-55.627 0.6894, | |
| 0 79.8637,78.60862 175.9427,174.68583 l 174.6892,174.6858 174.6892, | |
| -174.6858 c 96.079,-96.07721 175.253196,-174.68583 175.942696, | |
| -174.68583 0.6895,0 26.281,25.03215 56.8701, | |
| 55.627 l 55.6165,55.627 -231.245496,231.24803 c -127.185,127.1864 | |
| -231.5279,231.248 -231.873,231.248 -0.3451,0 -104.688, | |
| -104.0616 -231.873,-231.248 z | |
| " fill="currentColor"></path></g></svg></span></button> | |
| </span> | |
| <ul id="item_019607558329609986" class="css-1ovlie0"> | |
| <li><span class="css-i3q8q7"><a class="css-1qspiaa" href="/docs/emotion/">Emotion</a></span></li> | |
| <li><span class="css-i3q8q7"><a class="css-1qspiaa" href="/docs/styled-components/">Styled-Components</a></span></li> | |
| </ul> | |
| </li> | |
| <li class="css-xha50i"><span class="css-15wrjcl"><span class="css-i9gxme"><span class="css-1okwld7"><a class="css-12c97ec" href="/docs/css-libraries-and-frameworks/">CSS Libraries and Frameworks</a></span></span> | |
| <button aria-controls="item_06177035752006104" aria-label="CSS Libraries and Frameworks expand" class="css-yxzoj8"><span class="css-mnk7jy"><svg viewBox="0 0 926.23699 573.74994" version="1.1" x="0px" y="0px" width="10" height="10" class="css-w8prxe"><g transform="translate(904.92214,-879.1482)"><path d=" | |
| m -673.67664,1221.6502 -231.2455,-231.24803 55.6165, | |
| -55.627 c 30.5891,-30.59485 56.1806,-55.627 56.8701,-55.627 0.6894, | |
| 0 79.8637,78.60862 175.9427,174.68583 l 174.6892,174.6858 174.6892, | |
| -174.6858 c 96.079,-96.07721 175.253196,-174.68583 175.942696, | |
| -174.68583 0.6895,0 26.281,25.03215 56.8701, | |
| 55.627 l 55.6165,55.627 -231.245496,231.24803 c -127.185,127.1864 | |
| -231.5279,231.248 -231.873,231.248 -0.3451,0 -104.688, | |
| -104.0616 -231.873,-231.248 z | |
| " fill="currentColor"></path></g></svg></span></button> | |
| </span> | |
| <ul id="item_06177035752006104" class="css-1ovlie0"> | |
| <li><span class="css-i3q8q7"><a class="css-1qspiaa" href="/docs/typography-js/">Typography.js</a></span></li> | |
| <li><span class="css-i3q8q7"><a class="css-1qspiaa" href="/docs/sass/">Using Sass</a></span></li> | |
| <li><span class="css-i3q8q7"><a class="css-1qspiaa" href="/docs/post-css/">Using PostCSS</a></span></li> | |
| <li><span class="css-i3q8q7"><a class="css-1qspiaa" href="/docs/tailwind-css/">Using TailwindCSS</a></span></li> | |
| <li><span class="css-i3q8q7"><a class="css-1qspiaa" href="/docs/bulma/">Using Bulma</a></span></li> | |
| </ul> | |
| </li> | |
| </ul> | |
| </li> | |
| <li class="css-xha50i"><span class="css-15wrjcl"><span class="css-i9gxme"><span class="css-joo087"><a class="css-1v37eqh" href="/docs/mdx/">Adding Components to Markdown with MDX</a></span></span> | |
| <button aria-controls="item_0056298093160956464" aria-label="Adding Components to Markdown with MDX expand" class="css-yxzoj8"><span class="css-mnk7jy"><svg viewBox="0 0 926.23699 573.74994" version="1.1" x="0px" y="0px" width="10" height="10" class="css-w8prxe"><g transform="translate(904.92214,-879.1482)"><path d=" | |
| m -673.67664,1221.6502 -231.2455,-231.24803 55.6165, | |
| -55.627 c 30.5891,-30.59485 56.1806,-55.627 56.8701,-55.627 0.6894, | |
| 0 79.8637,78.60862 175.9427,174.68583 l 174.6892,174.6858 174.6892, | |
| -174.6858 c 96.079,-96.07721 175.253196,-174.68583 175.942696, | |
| -174.68583 0.6895,0 26.281,25.03215 56.8701, | |
| 55.627 l 55.6165,55.627 -231.245496,231.24803 c -127.185,127.1864 | |
| -231.5279,231.248 -231.873,231.248 -0.3451,0 -104.688, | |
| -104.0616 -231.873,-231.248 z | |
| " fill="currentColor"></path></g></svg></span></button> | |
| </span> | |
| <ul id="item_0056298093160956464" class="css-1ovlie0"> | |
| <li><span class="css-1okwld7"><a class="css-14mmb96" href="/docs/mdx/getting-started/">Getting Started with MDX</a></span></li> | |
| <li><span class="css-1okwld7"><a class="css-14mmb96" href="/docs/mdx/writing-pages/">Writing Pages</a></span></li> | |
| <li><span class="css-1okwld7"><a class="css-14mmb96" href="/docs/mdx/customizing-components/">Customizing Components</a></span></li> | |
| <li><span class="css-1okwld7"><a class="css-14mmb96" href="/docs/mdx/programmatically-creating-pages/">Programmatically Creating Pages</a></span></li> | |
| <li><span class="css-1okwld7"><a class="css-14mmb96" href="/docs/mdx/plugins/">Using MDX Plugins</a></span></li> | |
| </ul> | |
| </li> | |
| <li class="css-xha50i"><span class="css-15wrjcl"><span class="css-i9gxme"><span class="css-joo087"><a class="css-1v37eqh" href="/docs/testing/">Adding Testing</a></span></span> | |
| <button aria-controls="item_09067587221093294" aria-label="Adding Testing expand" class="css-yxzoj8"><span class="css-mnk7jy"><svg viewBox="0 0 926.23699 573.74994" version="1.1" x="0px" y="0px" width="10" height="10" class="css-w8prxe"><g transform="translate(904.92214,-879.1482)"><path d=" | |
| m -673.67664,1221.6502 -231.2455,-231.24803 55.6165, | |
| -55.627 c 30.5891,-30.59485 56.1806,-55.627 56.8701,-55.627 0.6894, | |
| 0 79.8637,78.60862 175.9427,174.68583 l 174.6892,174.6858 174.6892, | |
| -174.6858 c 96.079,-96.07721 175.253196,-174.68583 175.942696, | |
| -174.68583 0.6895,0 26.281,25.03215 56.8701, | |
| 55.627 l 55.6165,55.627 -231.245496,231.24803 c -127.185,127.1864 | |
| -231.5279,231.248 -231.873,231.248 -0.3451,0 -104.688, | |
| -104.0616 -231.873,-231.248 z | |
| " fill="currentColor"></path></g></svg></span></button> | |
| </span> | |
| <ul id="item_09067587221093294" class="css-1ovlie0"> | |
| <li><span class="css-1okwld7"><a class="css-14mmb96" href="/docs/unit-testing/">Unit Testing</a></span></li> | |
| <li><span class="css-1okwld7"><a class="css-14mmb96" href="/docs/testing-components-with-graphql/">Testing Components with GraphQL</a></span></li> | |
| <li><span class="css-1okwld7"><a class="css-14mmb96" href="/docs/end-to-end-testing/">End-to-end Testing</a></span></li> | |
| <li><span class="css-1okwld7"><a class="css-14mmb96" href="/docs/testing-css-in-js/">Testing CSS-in-JS</a></span></li> | |
| <li><span class="css-1okwld7"><a class="css-14mmb96" href="/docs/testing-react-components/">Testing React Components</a></span></li> | |
| <li><span class="css-1okwld7"><a class="css-14mmb96" href="/docs/visual-testing-with-storybook/">Visual Testing with Storybook</a></span></li> | |
| </ul> | |
| </li> | |
| <li class="css-xha50i"><span class="css-15wrjcl"><span class="css-i9gxme"><span class="css-joo087"><a class="css-1v37eqh" href="/docs/debugging/">Debugging Gatsby</a></span></span> | |
| <button aria-controls="item_08565808818680893" aria-label="Debugging Gatsby expand" class="css-yxzoj8"><span class="css-mnk7jy"><svg viewBox="0 0 926.23699 573.74994" version="1.1" x="0px" y="0px" width="10" height="10" class="css-w8prxe"><g transform="translate(904.92214,-879.1482)"><path d=" | |
| m -673.67664,1221.6502 -231.2455,-231.24803 55.6165, | |
| -55.627 c 30.5891,-30.59485 56.1806,-55.627 56.8701,-55.627 0.6894, | |
| 0 79.8637,78.60862 175.9427,174.68583 l 174.6892,174.6858 174.6892, | |
| -174.6858 c 96.079,-96.07721 175.253196,-174.68583 175.942696, | |
| -174.68583 0.6895,0 26.281,25.03215 56.8701, | |
| 55.627 l 55.6165,55.627 -231.245496,231.24803 c -127.185,127.1864 | |
| -231.5279,231.248 -231.873,231.248 -0.3451,0 -104.688, | |
| -104.0616 -231.873,-231.248 z | |
| " fill="currentColor"></path></g></svg></span></button> | |
| </span> | |
| <ul id="item_08565808818680893" class="css-1ovlie0"> | |
| <li><span class="css-1okwld7"><a class="css-14mmb96" href="/docs/debugging-html-builds/">Debugging HTML Builds</a></span></li> | |
| <li><span class="css-1okwld7"><a class="css-14mmb96" href="/docs/debugging-replace-renderer-api/">Debugging Replace Renderer API</a></span></li> | |
| <li><span class="css-1okwld7"><a class="css-14mmb96" href="/docs/debugging-the-build-process/">Debugging the Build Process</a></span></li> | |
| <li><span class="css-1okwld7"><a class="css-14mmb96" href="/docs/debugging-cache-issues/">Debugging Cache Issues</a></span></li> | |
| <li><span class="css-1okwld7"><a class="css-14mmb96" href="/docs/performance-tracing/">Tracing Gatsby Builds</a></span></li> | |
| <li><span class="css-1okwld7"><a class="css-14mmb96" href="/docs/debugging-async-lifecycles/">Debugging Async Lifecycles</a></span></li> | |
| </ul> | |
| </li> | |
| <li class="css-xha50i"><span class="css-15wrjcl"><span class="css-i9gxme"><span class="css-joo087"><a class="css-1v37eqh" href="/docs/adding-website-functionality/">Adding Website Functionality</a></span></span> | |
| <button aria-controls="item_004927018282857487" aria-label="Adding Website Functionality expand" class="css-yxzoj8"><span class="css-mnk7jy"><svg viewBox="0 0 926.23699 573.74994" version="1.1" x="0px" y="0px" width="10" height="10" class="css-w8prxe"><g transform="translate(904.92214,-879.1482)"><path d=" | |
| m -673.67664,1221.6502 -231.2455,-231.24803 55.6165, | |
| -55.627 c 30.5891,-30.59485 56.1806,-55.627 56.8701,-55.627 0.6894, | |
| 0 79.8637,78.60862 175.9427,174.68583 l 174.6892,174.6858 174.6892, | |
| -174.6858 c 96.079,-96.07721 175.253196,-174.68583 175.942696, | |
| -174.68583 0.6895,0 26.281,25.03215 56.8701, | |
| 55.627 l 55.6165,55.627 -231.245496,231.24803 c -127.185,127.1864 | |
| -231.5279,231.248 -231.873,231.248 -0.3451,0 -104.688, | |
| -104.0616 -231.873,-231.248 z | |
| " fill="currentColor"></path></g></svg></span></button> | |
| </span> | |
| <ul id="item_004927018282857487" class="css-1ovlie0"> | |
| <li><span class="css-1okwld7"><a class="css-14mmb96" href="/docs/linking-between-pages/">Linking Between Pages</a></span></li> | |
| <li class="css-xha50i"><span class="css-15wrjcl"><span class="css-i9gxme"><span class="css-1okwld7"><a class="css-12c97ec" href="/docs/adding-search/">Adding Search</a></span></span> | |
| <button aria-controls="item_09191557451153725" aria-label="Adding Search expand" class="css-yxzoj8"><span class="css-mnk7jy"><svg viewBox="0 0 926.23699 573.74994" version="1.1" x="0px" y="0px" width="10" height="10" class="css-w8prxe"><g transform="translate(904.92214,-879.1482)"><path d=" | |
| m -673.67664,1221.6502 -231.2455,-231.24803 55.6165, | |
| -55.627 c 30.5891,-30.59485 56.1806,-55.627 56.8701,-55.627 0.6894, | |
| 0 79.8637,78.60862 175.9427,174.68583 l 174.6892,174.6858 174.6892, | |
| -174.6858 c 96.079,-96.07721 175.253196,-174.68583 175.942696, | |
| -174.68583 0.6895,0 26.281,25.03215 56.8701, | |
| 55.627 l 55.6165,55.627 -231.245496,231.24803 c -127.185,127.1864 | |
| -231.5279,231.248 -231.873,231.248 -0.3451,0 -104.688, | |
| -104.0616 -231.873,-231.248 z | |
| " fill="currentColor"></path></g></svg></span></button> | |
| </span> | |
| <ul id="item_09191557451153725" class="css-1ovlie0"> | |
| <li><span class="css-i3q8q7"><a class="css-1qspiaa" href="/docs/adding-search-with-algolia/">Adding Search with Algolia</a></span></li> | |
| <li><span class="css-i3q8q7"><a class="css-1sgu29x" href="/docs/adding-search-with-elasticlunr/">Adding Search with elasticlunr</a></span></li> | |
| <li><span class="css-i3q8q7"><a class="css-1qspiaa" href="/docs/adding-search-with-js-search/">Adding Search with js-search</a></span></li> | |
| </ul> | |
| </li> | |
| <li><span class="css-1okwld7"><a class="css-14mmb96" href="/docs/adding-analytics/">Adding Analytics</a></span></li> | |
| <li><span class="css-1okwld7"><a class="css-14mmb96" href="/docs/building-a-site-with-authentication/">Adding Authentication</a></span></li> | |
| <li><span class="css-1okwld7"><a class="css-14mmb96" href="/docs/adding-forms/">Adding Forms</a></span></li> | |
| <li><span class="css-1okwld7"><a class="css-14mmb96" href="/docs/building-a-contact-form">Building a Contact Form</a></span></li> | |
| <li><span class="css-1okwld7"><a class="css-14mmb96" href="/docs/add-404-page/">Adding a 404 Page</a></span></li> | |
| <li><span class="css-1okwld7"><a class="css-14mmb96" href="/docs/add-seo-component/">Adding an SEO Component</a></span></li> | |
| <li><span class="css-1okwld7"><a class="css-14mmb96" href="/docs/adding-tags-and-categories-to-blog-posts/">Adding Tags and Categories to Blog Posts</a></span></li> | |
| <li><span class="css-1okwld7"><a class="css-14mmb96" href="/docs/adding-pagination/">Adding Pagination</a></span></li> | |
| <li><span class="css-1okwld7"><a class="css-14mmb96" href="/docs/adding-comments/">Adding Comments</a></span></li> | |
| <li><span class="css-1okwld7"><a class="css-14mmb96" href="/docs/creating-a-sitemap/">Creating a Sitemap</a></span></li> | |
| <li><span class="css-1okwld7"><a class="css-14mmb96" href="/docs/adding-an-rss-feed/">Adding an RSS Feed</a></span></li> | |
| <li class="css-xha50i"><span class="css-15wrjcl"><span class="css-i9gxme"><span class="css-1okwld7"><a class="css-12c97ec" href="/docs/adding-page-transitions/">Adding Page Transitions</a></span></span> | |
| <button aria-controls="item_030521603392096" aria-label="Adding Page Transitions expand" class="css-yxzoj8"><span class="css-mnk7jy"><svg viewBox="0 0 926.23699 573.74994" version="1.1" x="0px" y="0px" width="10" height="10" class="css-w8prxe"><g transform="translate(904.92214,-879.1482)"><path d=" | |
| m -673.67664,1221.6502 -231.2455,-231.24803 55.6165, | |
| -55.627 c 30.5891,-30.59485 56.1806,-55.627 56.8701,-55.627 0.6894, | |
| 0 79.8637,78.60862 175.9427,174.68583 l 174.6892,174.6858 174.6892, | |
| -174.6858 c 96.079,-96.07721 175.253196,-174.68583 175.942696, | |
| -174.68583 0.6895,0 26.281,25.03215 56.8701, | |
| 55.627 l 55.6165,55.627 -231.245496,231.24803 c -127.185,127.1864 | |
| -231.5279,231.248 -231.873,231.248 -0.3451,0 -104.688, | |
| -104.0616 -231.873,-231.248 z | |
| " fill="currentColor"></path></g></svg></span></button> | |
| </span> | |
| <ul id="item_030521603392096" class="css-1ovlie0"> | |
| <li><span class="css-i3q8q7"><a class="css-1qspiaa" href="/docs/adding-page-transitions-with-plugin-transition-link/">Adding Page Transitions with gatsby-plugin-transition-link</a></span></li> | |
| <li><span class="css-i3q8q7"><a class="css-1sgu29x" href="/docs/adding-page-transitions-with-plugin-page-transitions/">Adding Page Transitions with gatsby-plugin-page-transitions</a></span></li> | |
| </ul> | |
| </li> | |
| <li><span class="css-1okwld7"><a class="css-14mmb96" href="/docs/making-your-site-accessible">Making Your Site Accessible</a></span></li> | |
| <li class="css-xha50i"><span class="css-15wrjcl"><span class="css-i9gxme"><span class="css-1okwld7"><a class="css-12c97ec" href="/docs/routing/">Routing</a></span></span> | |
| <button aria-controls="item_0024651841785603645" aria-label="Routing expand" class="css-yxzoj8"><span class="css-mnk7jy"><svg viewBox="0 0 926.23699 573.74994" version="1.1" x="0px" y="0px" width="10" height="10" class="css-w8prxe"><g transform="translate(904.92214,-879.1482)"><path d=" | |
| m -673.67664,1221.6502 -231.2455,-231.24803 55.6165, | |
| -55.627 c 30.5891,-30.59485 56.1806,-55.627 56.8701,-55.627 0.6894, | |
| 0 79.8637,78.60862 175.9427,174.68583 l 174.6892,174.6858 174.6892, | |
| -174.6858 c 96.079,-96.07721 175.253196,-174.68583 175.942696, | |
| -174.68583 0.6895,0 26.281,25.03215 56.8701, | |
| 55.627 l 55.6165,55.627 -231.245496,231.24803 c -127.185,127.1864 | |
| -231.5279,231.248 -231.873,231.248 -0.3451,0 -104.688, | |
| -104.0616 -231.873,-231.248 z | |
| " fill="currentColor"></path></g></svg></span></button> | |
| </span> | |
| <ul id="item_0024651841785603645" class="css-1ovlie0"> | |
| <li><span class="css-i3q8q7"><a class="css-1sgu29x" href="/docs/reach-router-and-gatsby/">@reach/router and Gatsby</a></span></li> | |
| <li><span class="css-i3q8q7"><a class="css-1sgu29x" href="/docs/linking-and-prefetching-with-gatsby/">Linking and Prefetching with Gatsby</a></span></li> | |
| <li><span class="css-i3q8q7"><a class="css-1qspiaa" href="/docs/centralizing-your-sites-navigation/">Centralizing Your Site's Navigation</a></span></li> | |
| <li><span class="css-i3q8q7"><a class="css-1sgu29x" href="/docs/rendering-sidebar-navigation-dynamically/">Rendering Sidebar Navigation Dynamically</a></span></li> | |
| </ul> | |
| </li> | |
| <li><span class="css-1okwld7"><a class="css-14mmb96" href="/docs/client-data-fetching/">Client Data Fetching</a></span></li> | |
| <li><span class="css-1okwld7"><a class="css-14mmb96" href="/docs/using-client-side-only-packages">Using Client-Side Only Packages</a></span></li> | |
| </ul> | |
| </li> | |
| <li class="css-xha50i"><span class="css-15wrjcl"><span class="css-i9gxme"><span class="css-joo087"><style data-emotion-css="prg6yt">.css-prg6yt{padding-right:1rem;min-height:2.5rem;padding-top:0.75rem;padding-bottom:0.75rem;position:relative;z-index:1;width:100%;padding-right:2.5rem;padding-left:1.5rem;}.css-prg6yt.css-prg6yt{border:0;color:#36313d;font-weight:normal;}.css-prg6yt.css-prg6yt:hover{background:rgba(241,222,250,0.275);color:#663399;}.css-prg6yt.css-prg6yt:hover:before{background:#8a4baf;-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);}.css-prg6yt.css-prg6yt{color:#8a4baf;font-weight:600;}.css-prg6yt:before,.css-prg6yt:after{content:'';left:calc(1.5rem - 1rem);top:1.3em;height:8px;position:absolute;-webkit-transition:all 250ms cubic-bezier(0.4,0,0.2,1);transition:all 250ms cubic-bezier(0.4,0,0.2,1);width:8px;}.css-prg6yt:before{border-radius:100%;-webkit-transform:scale(0.1);-ms-transform:scale(0.1);transform:scale(0.1);}.css-prg6yt:after{background:#8a4baf;border-radius:4px;opacity:0;-webkit-transform:translateX(-92px);-ms-transform:translateX(-92px);transform:translateX(-92px);width:0;}</style><a class="css-prg6yt" href="/docs/performance/">Improving Performance</a></span></span> | |
| <button aria-controls="item_0489198947938734" aria-expanded="true" aria-label="Improving Performance collapse" class="css-yxzoj8"><span class="css-mnk7jy"><svg viewBox="0 0 926.23699 573.74994" version="1.1" x="0px" y="0px" width="10" height="10" class="css-19n436v"><g transform="translate(904.92214,-879.1482)"><path d=" | |
| m -673.67664,1221.6502 -231.2455,-231.24803 55.6165, | |
| -55.627 c 30.5891,-30.59485 56.1806,-55.627 56.8701,-55.627 0.6894, | |
| 0 79.8637,78.60862 175.9427,174.68583 l 174.6892,174.6858 174.6892, | |
| -174.6858 c 96.079,-96.07721 175.253196,-174.68583 175.942696, | |
| -174.68583 0.6895,0 26.281,25.03215 56.8701, | |
| 55.627 l 55.6165,55.627 -231.245496,231.24803 c -127.185,127.1864 | |
| -231.5279,231.248 -231.873,231.248 -0.3451,0 -104.688, | |
| -104.0616 -231.873,-231.248 z | |
| " fill="currentColor"></path></g></svg></span></button> | |
| </span> | |
| <ul id="item_0489198947938734" class="css-1b1xtt0"> | |
| <li><span class="css-1okwld7"><a class="css-14mmb96" href="/docs/progressive-web-app/">Supporting Progressive Web Apps (PWAs)</a></span></li> | |
| <li><span class="css-1okwld7"><a class="css-14mmb96" href="/docs/caching/">Caching</a></span></li> | |
| <li><span class="css-1okwld7"><a class="css-14mmb96" href="/docs/local-https/">Using Local HTTPS</a></span></li> | |
| <li><span class="css-1okwld7"><a class="css-14mmb96" href="/docs/audit-with-lighthouse/">Auditing with Lighthouse</a></span></li> | |
| <li><span class="css-1okwld7"><a class="css-14mmb96" href="/docs/add-a-manifest-file/">Adding a Manifest File</a></span></li> | |
| <li><span class="css-1okwld7"><a class="css-14mmb96" href="/docs/add-offline-support-with-a-service-worker/">Adding Offline Support with a Service Worker</a></span></li> | |
| <li><span class="css-1okwld7"><a class="css-14mmb96" href="/docs/add-page-metadata/">Adding Page Metadata</a></span></li> | |
| <li><span class="css-1okwld7"><style data-emotion-css="1a1p23m">.css-1a1p23m{padding-right:1rem;min-height:2.5rem;padding-top:0.75rem;padding-bottom:0.75rem;position:relative;z-index:1;width:100%;padding-left:3rem;}.css-1a1p23m.css-1a1p23m{border:0;color:#36313d;font-weight:normal;}.css-1a1p23m.css-1a1p23m:hover{background:rgba(241,222,250,0.275);color:#663399;}.css-1a1p23m.css-1a1p23m:hover:before{background:#8a4baf;-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);}.css-1a1p23m.css-1a1p23m{color:#8a4baf;font-weight:600;background:transparent;}.css-1a1p23m:before,.css-1a1p23m:after{content:'';left:calc(3rem - 1.5rem);top:1.3em;height:8px;position:absolute;-webkit-transition:all 250ms cubic-bezier(0.4,0,0.2,1);transition:all 250ms cubic-bezier(0.4,0,0.2,1);width:8px;}.css-1a1p23m:before{background:#8a4baf;border-radius:100%;-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);}.css-1a1p23m:after{background:#8a4baf;border-radius:4px;opacity:1;-webkit-transform:translateX(-92px);-ms-transform:translateX(-92px);transform:translateX(-92px);width:100px;}</style><a aria-current="page" class="css-1a1p23m" href="/docs/seo/">Search Engine Optimization (SEO)</a></span></li> | |
| <li><span class="css-1okwld7"><a class="css-14mmb96" href="/docs/optimizing-site-performance-with-guessjs/">Optimizing Site Performance with Guess.js</a></span></li> | |
| </ul> | |
| </li> | |
| <li class="css-xha50i"><span class="css-15wrjcl"><span class="css-i9gxme"><span class="css-joo087"><a class="css-1v37eqh" href="/docs/localization-i18n/">Localization and Internationalization with Gatsby</a></span></span> | |
| <button aria-controls="item_04606391259585405" aria-label="Localization and Internationalization with Gatsby expand" class="css-yxzoj8"><span class="css-mnk7jy"><svg viewBox="0 0 926.23699 573.74994" version="1.1" x="0px" y="0px" width="10" height="10" class="css-w8prxe"><g transform="translate(904.92214,-879.1482)"><path d=" | |
| m -673.67664,1221.6502 -231.2455,-231.24803 55.6165, | |
| -55.627 c 30.5891,-30.59485 56.1806,-55.627 56.8701,-55.627 0.6894, | |
| 0 79.8637,78.60862 175.9427,174.68583 l 174.6892,174.6858 174.6892, | |
| -174.6858 c 96.079,-96.07721 175.253196,-174.68583 175.942696, | |
| -174.68583 0.6895,0 26.281,25.03215 56.8701, | |
| 55.627 l 55.6165,55.627 -231.245496,231.24803 c -127.185,127.1864 | |
| -231.5279,231.248 -231.873,231.248 -0.3451,0 -104.688, | |
| -104.0616 -231.873,-231.248 z | |
| " fill="currentColor"></path></g></svg></span></button> | |
| </span> | |
| <ul id="item_04606391259585405" class="css-1ovlie0"> | |
| <li><span class="css-1okwld7"><a class="css-14mmb96" href="/docs/creating-prefixed-404-pages-for-different-languages/">Creating Prefixed 404 Pages for Different Languages</a></span></li> | |
| </ul> | |
| </li> | |
| <li class="css-xha50i"><span class="css-15wrjcl"><span class="css-i9gxme"><span class="css-joo087"><a class="css-1v37eqh" href="/docs/porting-to-gatsby/">Porting to Gatsby</a></span></span> | |
| <button aria-controls="item_011792112462039595" aria-label="Porting to Gatsby expand" class="css-yxzoj8"><span class="css-mnk7jy"><svg viewBox="0 0 926.23699 573.74994" version="1.1" x="0px" y="0px" width="10" height="10" class="css-w8prxe"><g transform="translate(904.92214,-879.1482)"><path d=" | |
| m -673.67664,1221.6502 -231.2455,-231.24803 55.6165, | |
| -55.627 c 30.5891,-30.59485 56.1806,-55.627 56.8701,-55.627 0.6894, | |
| 0 79.8637,78.60862 175.9427,174.68583 l 174.6892,174.6858 174.6892, | |
| -174.6858 c 96.079,-96.07721 175.253196,-174.68583 175.942696, | |
| -174.68583 0.6895,0 26.281,25.03215 56.8701, | |
| 55.627 l 55.6165,55.627 -231.245496,231.24803 c -127.185,127.1864 | |
| -231.5279,231.248 -231.873,231.248 -0.3451,0 -104.688, | |
| -104.0616 -231.873,-231.248 z | |
| " fill="currentColor"></path></g></svg></span></button> | |
| </span> | |
| <ul id="item_011792112462039595" class="css-1ovlie0"> | |
| <li><span class="css-1okwld7"><a class="css-14mmb96" href="/docs/porting-from-create-react-app-to-gatsby/">Porting from Create React App to Gatsby</a></span></li> | |
| </ul> | |
| </li> | |
| </ul> | |
| </li> | |
| <style data-emotion-css="es1dba"> | |
| .css-es1dba { | |
| position: relative; | |
| -webkit-transition: all 100ms cubic-bezier(0.4, 0, 0.2, 1); | |
| transition: all 100ms cubic-bezier(0.4, 0, 0.2, 1); | |
| } | |
| .css-es1dba::before { | |
| content: " "; | |
| position: absolute; | |
| border-top: 1px solid #f0f0f2; | |
| left: 1.5rem; | |
| right: 0; | |
| top: 0; | |
| } | |
| .css-es1dba:after { | |
| top: auto; | |
| bottom: -1px; | |
| } | |
| </style> | |
| <li class="css-es1dba"><span class="css-15wrjcl"><span class="css-i9gxme"><span class="css-joo087"><style data-emotion-css="18gt9nx">.css-18gt9nx{padding-right:1rem;min-height:2.5rem;padding-top:0.75rem;padding-bottom:0.75rem;position:relative;z-index:1;width:100%;padding-right:2.5rem;padding-left:1.5rem;}.css-18gt9nx.css-18gt9nx{border:0;color:#36313d;font-weight:normal;}.css-18gt9nx.css-18gt9nx:hover{background:rgba(241,222,250,0.275);color:#663399;}.css-18gt9nx.css-18gt9nx:hover:before{background:#8a4baf;-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);}.css-18gt9nx.css-18gt9nx{font-family:Futura PT,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;-webkit-letter-spacing:0.075em;-moz-letter-spacing:0.075em;-ms-letter-spacing:0.075em;letter-spacing:0.075em;text-transform:uppercase;font-size:0.875rem;color:#36313d;}.css-18gt9nx:before,.css-18gt9nx:after{content:'';left:calc(1.5rem - 1rem);top:1.3em;height:8px;position:absolute;-webkit-transition:all 250ms cubic-bezier(0.4,0,0.2,1);transition:all 250ms cubic-bezier(0.4,0,0.2,1);width:8px;}.css-18gt9nx:before{border-radius:100%;-webkit-transform:scale(0.1);-ms-transform:scale(0.1);transform:scale(0.1);}.css-18gt9nx:after{background:#8a4baf;border-radius:4px;opacity:0;-webkit-transform:translateX(-92px);-ms-transform:translateX(-92px);transform:translateX(-92px);width:0;}</style><a class="css-18gt9nx" href="/docs/api-reference/">Gatsby API</a></span></span> | |
| <button aria-controls="item_06985378084046687" aria-label="Gatsby API expand" class="css-yxzoj8"><span class="css-mnk7jy"><svg viewBox="0 0 926.23699 573.74994" version="1.1" x="0px" y="0px" width="10" height="10" class="css-w8prxe"><g transform="translate(904.92214,-879.1482)"><path d=" | |
| m -673.67664,1221.6502 -231.2455,-231.24803 55.6165, | |
| -55.627 c 30.5891,-30.59485 56.1806,-55.627 56.8701,-55.627 0.6894, | |
| 0 79.8637,78.60862 175.9427,174.68583 l 174.6892,174.6858 174.6892, | |
| -174.6858 c 96.079,-96.07721 175.253196,-174.68583 175.942696, | |
| -174.68583 0.6895,0 26.281,25.03215 56.8701, | |
| 55.627 l 55.6165,55.627 -231.245496,231.24803 c -127.185,127.1864 | |
| -231.5279,231.248 -231.873,231.248 -0.3451,0 -104.688, | |
| -104.0616 -231.873,-231.248 z | |
| " fill="currentColor"></path></g></svg></span></button> | |
| </span> | |
| <ul id="item_06985378084046687" class="css-1ovlie0"> | |
| <li><span class="css-joo087"><a class="css-1dc9vet" href="/docs/gatsby-link/">Gatsby Link</a></span></li> | |
| <li><span class="css-joo087"><a class="css-1dc9vet" href="/docs/gatsby-image/">Gatsby Image</a></span></li> | |
| <li><span class="css-joo087"><a class="css-1dc9vet" href="/docs/gatsby-config/">Gatsby Config</a></span></li> | |
| <li><span class="css-joo087"><a class="css-1dc9vet" href="/docs/node-apis/">Gatsby Node APIs</a></span></li> | |
| <li><span class="css-joo087"><a class="css-1dc9vet" href="/docs/node-api-helpers/">Gatsby Node Helpers</a></span></li> | |
| <li><span class="css-joo087"><a class="css-1dc9vet" href="/docs/browser-apis/">Gatsby Browser APIs</a></span></li> | |
| <li><span class="css-joo087"><a class="css-1dc9vet" href="/docs/ssr-apis/">Gatsby SSR APIs</a></span></li> | |
| <li><span class="css-joo087"><a class="css-1dc9vet" href="/docs/actions/">Actions</a></span></li> | |
| <li><span class="css-joo087"><a class="css-1dc9vet" href="/docs/node-model/">Node Model</a></span></li> | |
| <li><span class="css-joo087"><a class="css-1dc9vet" href="/docs/node-interface/">Node Interface</a></span></li> | |
| <li><span class="css-joo087"><a class="css-1dc9vet" href="/docs/schema-customization/">Customizing the GraphQL Schema</a></span></li> | |
| <li><span class="css-joo087"><a class="css-1dc9vet" href="/docs/api-specification/">API Philosophy</a></span></li> | |
| </ul> | |
| </li> | |
| <li class="css-es1dba"><span class="css-15wrjcl"><span class="css-i9gxme"><span class="css-joo087"><a class="css-18gt9nx" href="/docs/releases-and-migration/">Releases & Migration</a></span></span> | |
| <button aria-controls="item_07812660210221412" aria-label="Releases & Migration expand" class="css-yxzoj8"><span class="css-mnk7jy"><svg viewBox="0 0 926.23699 573.74994" version="1.1" x="0px" y="0px" width="10" height="10" class="css-w8prxe"><g transform="translate(904.92214,-879.1482)"><path d=" | |
| m -673.67664,1221.6502 -231.2455,-231.24803 55.6165, | |
| -55.627 c 30.5891,-30.59485 56.1806,-55.627 56.8701,-55.627 0.6894, | |
| 0 79.8637,78.60862 175.9427,174.68583 l 174.6892,174.6858 174.6892, | |
| -174.6858 c 96.079,-96.07721 175.253196,-174.68583 175.942696, | |
| -174.68583 0.6895,0 26.281,25.03215 56.8701, | |
| 55.627 l 55.6165,55.627 -231.245496,231.24803 c -127.185,127.1864 | |
| -231.5279,231.248 -231.873,231.248 -0.3451,0 -104.688, | |
| -104.0616 -231.873,-231.248 z | |
| " fill="currentColor"></path></g></svg></span></button> | |
| </span> | |
| <ul id="item_07812660210221412" class="css-1ovlie0"> | |
| <li><span class="css-joo087"><a class="css-1dc9vet" href="/docs/v2-release-notes/">v2 Release Notes</a></span></li> | |
| <li><span class="css-joo087"><a class="css-1dc9vet" href="/docs/v1-release-notes/">v1 Release Notes</a></span></li> | |
| <li><span class="css-joo087"><a class="css-1dc9vet" href="/docs/migrating-from-v1-to-v2/">Migrating from v1 to v2</a></span></li> | |
| <li><span class="css-joo087"><a class="css-1dc9vet" href="/docs/migrating-from-v0-to-v1/">Migrating from v0 to v1</a></span></li> | |
| </ul> | |
| </li> | |
| <li class="css-es1dba"><span class="css-15wrjcl"><span class="css-i9gxme"><span class="css-joo087"><a class="css-18gt9nx" href="/docs/conceptual-guide/">Conceptual Guide</a></span></span> | |
| <button aria-controls="item_004552619972301919" aria-label="Conceptual Guide expand" class="css-yxzoj8"><span class="css-mnk7jy"><svg viewBox="0 0 926.23699 573.74994" version="1.1" x="0px" y="0px" width="10" height="10" class="css-w8prxe"><g transform="translate(904.92214,-879.1482)"><path d=" | |
| m -673.67664,1221.6502 -231.2455,-231.24803 55.6165, | |
| -55.627 c 30.5891,-30.59485 56.1806,-55.627 56.8701,-55.627 0.6894, | |
| 0 79.8637,78.60862 175.9427,174.68583 l 174.6892,174.6858 174.6892, | |
| -174.6858 c 96.079,-96.07721 175.253196,-174.68583 175.942696, | |
| -174.68583 0.6895,0 26.281,25.03215 56.8701, | |
| 55.627 l 55.6165,55.627 -231.245496,231.24803 c -127.185,127.1864 | |
| -231.5279,231.248 -231.873,231.248 -0.3451,0 -104.688, | |
| -104.0616 -231.873,-231.248 z | |
| " fill="currentColor"></path></g></svg></span></button> | |
| </span> | |
| <ul id="item_004552619972301919" class="css-1ovlie0"> | |
| <li><span class="css-joo087"><a class="css-1dc9vet" href="/docs/gatsby-core-philosophy/">The Gatsby Core Philosophy</a></span></li> | |
| <li><span class="css-joo087"><a class="css-1dc9vet" href="/docs/gatsby-project-structure/">Gatsby Project Structure</a></span></li> | |
| <li><span class="css-joo087"><style data-emotion-css="kghvgx">.css-kghvgx{padding-right:1rem;min-height:2.5rem;padding-top:0.75rem;padding-bottom:0.75rem;position:relative;z-index:1;width:100%;padding-left:1.5rem;}.css-kghvgx.css-kghvgx{border:0;color:#36313d;font-weight:normal;}.css-kghvgx.css-kghvgx:hover{background:rgba(241,222,250,0.275);color:#663399;}.css-kghvgx.css-kghvgx:hover:before{background:#8a4baf;-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);}.css-kghvgx.css-kghvgx{color:#78757a;}.css-kghvgx:before,.css-kghvgx:after{content:'';left:calc(1.5rem - 1rem);top:1.3em;height:8px;position:absolute;-webkit-transition:all 250ms cubic-bezier(0.4,0,0.2,1);transition:all 250ms cubic-bezier(0.4,0,0.2,1);width:8px;}.css-kghvgx:before{border-radius:100%;-webkit-transform:scale(0.1);-ms-transform:scale(0.1);transform:scale(0.1);}.css-kghvgx:after{background:#8a4baf;border-radius:4px;opacity:0;-webkit-transform:translateX(-92px);-ms-transform:translateX(-92px);transform:translateX(-92px);width:0;}</style><a class="css-kghvgx" href="/docs/life-and-times-of-a-gatsby-build/">Life and Times of a Gatsby Build</a></span></li> | |
| <li><span class="css-joo087"><a class="css-1dc9vet" href="/docs/building-with-components/">Building with Components</a></span></li> | |
| <li><span class="css-joo087"><a class="css-1dc9vet" href="/docs/gatsby-lifecycle-apis/">Lifecycle APIs</a></span></li> | |
| <li><span class="css-joo087"><a class="css-1dc9vet" href="/docs/prpl-pattern/">PRPL Pattern</a></span></li> | |
| <li><span class="css-joo087"><a class="css-1dc9vet" href="/docs/querying-with-graphql/">Querying Data with GraphQL</a></span></li> | |
| <li><span class="css-joo087"><a class="css-kghvgx" href="/docs/security-in-gatsby/">Security in Gatsby</a></span></li> | |
| </ul> | |
| </li> | |
| <li class="css-es1dba"><span class="css-15wrjcl"><span class="css-i9gxme"><span class="css-joo087"><a class="css-18gt9nx" href="/docs/gatsby-internals/">Gatsby Internals</a></span></span> | |
| <button aria-controls="item_014061926321557094" aria-label="Gatsby Internals expand" class="css-yxzoj8"><span class="css-mnk7jy"><svg viewBox="0 0 926.23699 573.74994" version="1.1" x="0px" y="0px" width="10" height="10" class="css-w8prxe"><g transform="translate(904.92214,-879.1482)"><path d=" | |
| m -673.67664,1221.6502 -231.2455,-231.24803 55.6165, | |
| -55.627 c 30.5891,-30.59485 56.1806,-55.627 56.8701,-55.627 0.6894, | |
| 0 79.8637,78.60862 175.9427,174.68583 l 174.6892,174.6858 174.6892, | |
| -174.6858 c 96.079,-96.07721 175.253196,-174.68583 175.942696, | |
| -174.68583 0.6895,0 26.281,25.03215 56.8701, | |
| 55.627 l 55.6165,55.627 -231.245496,231.24803 c -127.185,127.1864 | |
| -231.5279,231.248 -231.873,231.248 -0.3451,0 -104.688, | |
| -104.0616 -231.873,-231.248 z | |
| " fill="currentColor"></path></g></svg></span></button> | |
| </span> | |
| <ul id="item_014061926321557094" class="css-1ovlie0"> | |
| <li><span class="css-joo087"><a class="css-1dc9vet" href="/docs/how-plugins-apis-are-run/">How APIs/Plugins Are Run</a></span></li> | |
| <li><span class="css-joo087"><a class="css-1dc9vet" href="/docs/node-creation/">Node Creation</a></span></li> | |
| <li class="css-xha50i"><span class="css-15wrjcl"><span class="css-i9gxme"><span class="css-joo087"><a class="css-1v37eqh" href="/docs/schema-generation/">Schema Generation</a></span></span> | |
| <button aria-controls="item_09952926442846224" aria-label="Schema Generation expand" class="css-yxzoj8"><span class="css-mnk7jy"><svg viewBox="0 0 926.23699 573.74994" version="1.1" x="0px" y="0px" width="10" height="10" class="css-w8prxe"><g transform="translate(904.92214,-879.1482)"><path d=" | |
| m -673.67664,1221.6502 -231.2455,-231.24803 55.6165, | |
| -55.627 c 30.5891,-30.59485 56.1806,-55.627 56.8701,-55.627 0.6894, | |
| 0 79.8637,78.60862 175.9427,174.68583 l 174.6892,174.6858 174.6892, | |
| -174.6858 c 96.079,-96.07721 175.253196,-174.68583 175.942696, | |
| -174.68583 0.6895,0 26.281,25.03215 56.8701, | |
| 55.627 l 55.6165,55.627 -231.245496,231.24803 c -127.185,127.1864 | |
| -231.5279,231.248 -231.873,231.248 -0.3451,0 -104.688, | |
| -104.0616 -231.873,-231.248 z | |
| " fill="currentColor"></path></g></svg></span></button> | |
| </span> | |
| <ul id="item_09952926442846224" class="css-1ovlie0"> | |
| <li><span class="css-1okwld7"><a class="css-14mmb96" href="/docs/schema-gql-type/">Building the GqlType</a></span></li> | |
| <li><span class="css-1okwld7"><a class="css-14mmb96" href="/docs/schema-input-gql/">Building the Input Filters</a></span></li> | |
| <li><span class="css-1okwld7"><a class="css-14mmb96" href="/docs/schema-sift/">Querying with Sift</a></span></li> | |
| <li><span class="css-1okwld7"><a class="css-14mmb96" href="/docs/schema-connections/">Connections</a></span></li> | |
| </ul> | |
| </li> | |
| <li><span class="css-joo087"><a class="css-1dc9vet" href="/docs/page-creation/">Page Creation</a></span></li> | |
| <li><span class="css-joo087"><a class="css-1dc9vet" href="/docs/page-node-dependencies/">Page -> Node Dependencies</a></span></li> | |
| <li><span class="css-joo087"><a class="css-1dc9vet" href="/docs/node-tracking/">Node Tracking</a></span></li> | |
| <li><span class="css-joo087"><a class="css-1dc9vet" href="/docs/internal-data-bridge/">Internal Data Bridge</a></span></li> | |
| <li class="css-xha50i"><span class="css-15wrjcl"><span class="css-i9gxme"><span class="css-joo087"><a class="css-1v37eqh" href="/docs/query-behind-the-scenes/">Queries</a></span></span> | |
| <button aria-controls="item_002787910126718507" aria-label="Queries expand" class="css-yxzoj8"><span class="css-mnk7jy"><svg viewBox="0 0 926.23699 573.74994" version="1.1" x="0px" y="0px" width="10" height="10" class="css-w8prxe"><g transform="translate(904.92214,-879.1482)"><path d=" | |
| m -673.67664,1221.6502 -231.2455,-231.24803 55.6165, | |
| -55.627 c 30.5891,-30.59485 56.1806,-55.627 56.8701,-55.627 0.6894, | |
| 0 79.8637,78.60862 175.9427,174.68583 l 174.6892,174.6858 174.6892, | |
| -174.6858 c 96.079,-96.07721 175.253196,-174.68583 175.942696, | |
| -174.68583 0.6895,0 26.281,25.03215 56.8701, | |
| 55.627 l 55.6165,55.627 -231.245496,231.24803 c -127.185,127.1864 | |
| -231.5279,231.248 -231.873,231.248 -0.3451,0 -104.688, | |
| -104.0616 -231.873,-231.248 z | |
| " fill="currentColor"></path></g></svg></span></button> | |
| </span> | |
| <ul id="item_002787910126718507" class="css-1ovlie0"> | |
| <li><span class="css-1okwld7"><a class="css-14mmb96" href="/docs/query-extraction/">Query Extraction</a></span></li> | |
| <li><span class="css-1okwld7"><a class="css-14mmb96" href="/docs/query-execution/">Query Execution</a></span></li> | |
| <li><span class="css-1okwld7"><a class="css-14mmb96" href="/docs/static-vs-normal-queries/">Normal vs StaticQueries</a></span></li> | |
| </ul> | |
| </li> | |
| <li><span class="css-joo087"><a class="css-1dc9vet" href="/docs/write-pages/">Write out Pages</a></span></li> | |
| <li class="css-xha50i"><span class="css-15wrjcl"><span class="css-i9gxme"><span class="css-joo087"><a class="css-1v37eqh" href="/docs/webpack-and-ssr/">Webpack and SSR</a></span></span> | |
| <button aria-controls="item_06500241009342482" aria-label="Webpack and SSR expand" class="css-yxzoj8"><span class="css-mnk7jy"><svg viewBox="0 0 926.23699 573.74994" version="1.1" x="0px" y="0px" width="10" height="10" class="css-w8prxe"><g transform="translate(904.92214,-879.1482)"><path d=" | |
| m -673.67664,1221.6502 -231.2455,-231.24803 55.6165, | |
| -55.627 c 30.5891,-30.59485 56.1806,-55.627 56.8701,-55.627 0.6894, | |
| 0 79.8637,78.60862 175.9427,174.68583 l 174.6892,174.6858 174.6892, | |
| -174.6858 c 96.079,-96.07721 175.253196,-174.68583 175.942696, | |
| -174.68583 0.6895,0 26.281,25.03215 56.8701, | |
| 55.627 l 55.6165,55.627 -231.245496,231.24803 c -127.185,127.1864 | |
| -231.5279,231.248 -231.873,231.248 -0.3451,0 -104.688, | |
| -104.0616 -231.873,-231.248 z | |
| " fill="currentColor"></path></g></svg></span></button> | |
| </span> | |
| <ul id="item_06500241009342482" class="css-1ovlie0"> | |
| <li><span class="css-1okwld7"><a class="css-14mmb96" href="/docs/production-app/">Building the JavaScript App</a></span></li> | |
| <li><span class="css-1okwld7"><a class="css-14mmb96" href="/docs/html-generation/">Page HTML Generation</a></span></li> | |
| <li><span class="css-1okwld7"><a class="css-14mmb96" href="/docs/how-code-splitting-works/">Code Splitting and Prefetching</a></span></li> | |
| </ul> | |
| </li> | |
| <li><span class="css-joo087"><a class="css-1dc9vet" href="/docs/resource-handling-and-service-workers/">Resource Handling & Service Workers</a></span></li> | |
| <li><span class="css-joo087"><a class="css-kghvgx" href="/docs/data-storage-redux/">Data Storage (Redux)</a></span></li> | |
| <li><span class="css-joo087"><a class="css-1dc9vet" href="/docs/build-caching/">Build Caching</a></span></li> | |
| <li><span class="css-joo087"><a class="css-1dc9vet" href="/docs/gatsby-internals-terminology/">Terminology</a></span></li> | |
| </ul> | |
| </li> | |
| <li class="css-es1dba"><span class="css-15wrjcl"><span class="css-i9gxme"><span class="css-joo087"><a class="css-18gt9nx" href="/docs/using-gatsby-professionally/">Using Gatsby Professionally</a></span></span> | |
| <button aria-controls="item_026503895344859707" aria-label="Using Gatsby Professionally expand" class="css-yxzoj8"><span class="css-mnk7jy"><svg viewBox="0 0 926.23699 573.74994" version="1.1" x="0px" y="0px" width="10" height="10" class="css-w8prxe"><g transform="translate(904.92214,-879.1482)"><path d=" | |
| m -673.67664,1221.6502 -231.2455,-231.24803 55.6165, | |
| -55.627 c 30.5891,-30.59485 56.1806,-55.627 56.8701,-55.627 0.6894, | |
| 0 79.8637,78.60862 175.9427,174.68583 l 174.6892,174.6858 174.6892, | |
| -174.6858 c 96.079,-96.07721 175.253196,-174.68583 175.942696, | |
| -174.68583 0.6895,0 26.281,25.03215 56.8701, | |
| 55.627 l 55.6165,55.627 -231.245496,231.24803 c -127.185,127.1864 | |
| -231.5279,231.248 -231.873,231.248 -0.3451,0 -104.688, | |
| -104.0616 -231.873,-231.248 z | |
| " fill="currentColor"></path></g></svg></span></button> | |
| </span> | |
| <ul id="item_026503895344859707" class="css-1ovlie0"> | |
| <li><span class="css-joo087"><a class="css-1dc9vet" href="/docs/convincing-others/">Introduction - Convincing Others to Use Gatsby</a></span></li> | |
| <li><span class="css-joo087"><a class="css-1dc9vet" href="/docs/first-professional-project/">Your First Professional Project</a></span></li> | |
| <li class="css-xha50i"><span class="css-15wrjcl"><span class="css-i9gxme"><span class="css-joo087"><a class="css-1v37eqh" href="/docs/winning-over-stakeholders/">Winning Over Different Stakeholders</a></span></span> | |
| <button aria-controls="item_09513208969580915" aria-label="Winning Over Different Stakeholders expand" class="css-yxzoj8"><span class="css-mnk7jy"><svg viewBox="0 0 926.23699 573.74994" version="1.1" x="0px" y="0px" width="10" height="10" class="css-w8prxe"><g transform="translate(904.92214,-879.1482)"><path d=" | |
| m -673.67664,1221.6502 -231.2455,-231.24803 55.6165, | |
| -55.627 c 30.5891,-30.59485 56.1806,-55.627 56.8701,-55.627 0.6894, | |
| 0 79.8637,78.60862 175.9427,174.68583 l 174.6892,174.6858 174.6892, | |
| -174.6858 c 96.079,-96.07721 175.253196,-174.68583 175.942696, | |
| -174.68583 0.6895,0 26.281,25.03215 56.8701, | |
| 55.627 l 55.6165,55.627 -231.245496,231.24803 c -127.185,127.1864 | |
| -231.5279,231.248 -231.873,231.248 -0.3451,0 -104.688, | |
| -104.0616 -231.873,-231.248 z | |
| " fill="currentColor"></path></g></svg></span></button> | |
| </span> | |
| <ul id="item_09513208969580915" class="css-1ovlie0"> | |
| <li><span class="css-1okwld7"><a class="css-14mmb96" href="/docs/winning-over-developers/">Developers</a></span></li> | |
| <li><span class="css-1okwld7"><a class="css-14mmb96" href="/docs/winning-over-engineering-leaders/">Engineering Leaders</a></span></li> | |
| <li><span class="css-1okwld7"><a class="css-14mmb96" href="/docs/winning-over-marketers/">Marketers</a></span></li> | |
| <li><span class="css-1okwld7"><a class="css-14mmb96" href="/docs/winning-over-executives/">Executives</a></span></li> | |
| <li><span class="css-1okwld7"><a class="css-ulde4x" href="/docs/winning-over-clients/">Clients</a></span></li> | |
| </ul> | |
| </li> | |
| <li class="css-xha50i"><span class="css-15wrjcl"><span class="css-i9gxme"><span class="css-joo087"><a class="css-1v37eqh" href="/docs/different-organization-types/">Spreading Gatsby In Different Types of Organizations</a></span></span> | |
| <button aria-controls="item_03290634026879231" aria-label="Spreading Gatsby In Different Types of Organizations expand" class="css-yxzoj8"><span class="css-mnk7jy"><svg viewBox="0 0 926.23699 573.74994" version="1.1" x="0px" y="0px" width="10" height="10" class="css-w8prxe"><g transform="translate(904.92214,-879.1482)"><path d=" | |
| m -673.67664,1221.6502 -231.2455,-231.24803 55.6165, | |
| -55.627 c 30.5891,-30.59485 56.1806,-55.627 56.8701,-55.627 0.6894, | |
| 0 79.8637,78.60862 175.9427,174.68583 l 174.6892,174.6858 174.6892, | |
| -174.6858 c 96.079,-96.07721 175.253196,-174.68583 175.942696, | |
| -174.68583 0.6895,0 26.281,25.03215 56.8701, | |
| 55.627 l 55.6165,55.627 -231.245496,231.24803 c -127.185,127.1864 | |
| -231.5279,231.248 -231.873,231.248 -0.3451,0 -104.688, | |
| -104.0616 -231.873,-231.248 z | |
| " fill="currentColor"></path></g></svg></span></button> | |
| </span> | |
| <ul id="item_03290634026879231" class="css-1ovlie0"> | |
| <li><span class="css-1okwld7"><a class="css-ulde4x" href="/docs/gatsby-for-freelancers/">As a Freelancer</a></span></li> | |
| <li class="css-xha50i"><span class="css-15wrjcl"><span class="css-i9gxme"><span class="css-1okwld7"><a class="css-12c97ec" href="/docs/gatsby-for-agencies/">Inside an Agency</a></span></span> | |
| <button aria-controls="item_08806363673748665" aria-label="Inside an Agency expand" class="css-yxzoj8"><span class="css-mnk7jy"><svg viewBox="0 0 926.23699 573.74994" version="1.1" x="0px" y="0px" width="10" height="10" class="css-w8prxe"><g transform="translate(904.92214,-879.1482)"><path d=" | |
| m -673.67664,1221.6502 -231.2455,-231.24803 55.6165, | |
| -55.627 c 30.5891,-30.59485 56.1806,-55.627 56.8701,-55.627 0.6894, | |
| 0 79.8637,78.60862 175.9427,174.68583 l 174.6892,174.6858 174.6892, | |
| -174.6858 c 96.079,-96.07721 175.253196,-174.68583 175.942696, | |
| -174.68583 0.6895,0 26.281,25.03215 56.8701, | |
| 55.627 l 55.6165,55.627 -231.245496,231.24803 c -127.185,127.1864 | |
| -231.5279,231.248 -231.873,231.248 -0.3451,0 -104.688, | |
| -104.0616 -231.873,-231.248 z | |
| " fill="currentColor"></path></g></svg></span></button> | |
| </span> | |
| <ul id="item_08806363673748665" class="css-1ovlie0"> | |
| <li><span class="css-i3q8q7"><a class="css-1qspiaa" href="/docs/lower-bids-more-profit/">Lower Bids, More Profit</a></span></li> | |
| <li><span class="css-i3q8q7"><a class="css-1qspiaa" href="/docs/faster-recruiting/">Faster Recruiting</a></span></li> | |
| <li><span class="css-i3q8q7"><a class="css-1qspiaa" href="/docs/sanitize-your-stack/">Sanitize Your Stack</a></span></li> | |
| <li><span class="css-i3q8q7"><a class="css-1qspiaa" href="/docs/going-gatsby-only/">Why Agencies Go Gatsby-Only</a></span></li> | |
| </ul> | |
| </li> | |
| <li><span class="css-1okwld7"><a class="css-14mmb96" href="/docs/gatsby-for-companies/">Inside a Company</a></span></li> | |
| <li class="css-xha50i"><span class="css-15wrjcl"><span class="css-i9gxme"><span class="css-1okwld7"><a class="css-12c97ec" href="/docs/gatsby-in-the-enterprise/">Inside an Enterprise (Large Company)</a></span></span> | |
| <button aria-controls="item_03607809436805669" aria-label="Inside an Enterprise (Large Company) expand" class="css-yxzoj8"><span class="css-mnk7jy"><svg viewBox="0 0 926.23699 573.74994" version="1.1" x="0px" y="0px" width="10" height="10" class="css-w8prxe"><g transform="translate(904.92214,-879.1482)"><path d=" | |
| m -673.67664,1221.6502 -231.2455,-231.24803 55.6165, | |
| -55.627 c 30.5891,-30.59485 56.1806,-55.627 56.8701,-55.627 0.6894, | |
| 0 79.8637,78.60862 175.9427,174.68583 l 174.6892,174.6858 174.6892, | |
| -174.6858 c 96.079,-96.07721 175.253196,-174.68583 175.942696, | |
| -174.68583 0.6895,0 26.281,25.03215 56.8701, | |
| 55.627 l 55.6165,55.627 -231.245496,231.24803 c -127.185,127.1864 | |
| -231.5279,231.248 -231.873,231.248 -0.3451,0 -104.688, | |
| -104.0616 -231.873,-231.248 z | |
| " fill="currentColor"></path></g></svg></span></button> | |
| </span> | |
| <ul id="item_03607809436805669" class="css-1ovlie0"> | |
| <li><span class="css-i3q8q7"><a class="css-1qspiaa" href="/docs/answering-it-security/">Answering IT/Security Questions</a></span></li> | |
| <li><span class="css-i3q8q7"><a class="css-1qspiaa" href="/docs/setting-up-gatsby-without-gatsby-new">Setting Up Gatsby Without Gatsby New</a></span></li> | |
| </ul> | |
| </li> | |
| </ul> | |
| </li> | |
| <li class="css-xha50i"><span class="css-15wrjcl"><span class="css-i9gxme"><span class="css-joo087"><style data-emotion-css="1ojt6fr">.css-1ojt6fr{padding-right:1rem;min-height:2.5rem;padding-top:0.75rem;padding-bottom:0.75rem;position:relative;z-index:1;width:100%;padding-right:2.5rem;padding-left:1.5rem;}.css-1ojt6fr.css-1ojt6fr{border:0;color:#36313d;font-weight:normal;}.css-1ojt6fr.css-1ojt6fr:hover{background:rgba(241,222,250,0.275);color:#663399;}.css-1ojt6fr.css-1ojt6fr:hover:before{background:#8a4baf;-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);}.css-1ojt6fr.css-1ojt6fr{color:#78757a;}.css-1ojt6fr:before,.css-1ojt6fr:after{content:'';left:calc(1.5rem - 1rem);top:1.3em;height:8px;position:absolute;-webkit-transition:all 250ms cubic-bezier(0.4,0,0.2,1);transition:all 250ms cubic-bezier(0.4,0,0.2,1);width:8px;}.css-1ojt6fr:before{border-radius:100%;-webkit-transform:scale(0.1);-ms-transform:scale(0.1);transform:scale(0.1);}.css-1ojt6fr:after{background:#8a4baf;border-radius:4px;opacity:0;-webkit-transform:translateX(-92px);-ms-transform:translateX(-92px);transform:translateX(-92px);width:0;}</style><a class="css-1ojt6fr" href="/docs/best-practices-for-orgs/">Best Practices for Orgs</a></span></span> | |
| <button aria-controls="item_09954225141429827" aria-label="Best Practices for Orgs* expand" class="css-yxzoj8"><span class="css-mnk7jy"><svg viewBox="0 0 926.23699 573.74994" version="1.1" x="0px" y="0px" width="10" height="10" class="css-w8prxe"><g transform="translate(904.92214,-879.1482)"><path d=" | |
| m -673.67664,1221.6502 -231.2455,-231.24803 55.6165, | |
| -55.627 c 30.5891,-30.59485 56.1806,-55.627 56.8701,-55.627 0.6894, | |
| 0 79.8637,78.60862 175.9427,174.68583 l 174.6892,174.6858 174.6892, | |
| -174.6858 c 96.079,-96.07721 175.253196,-174.68583 175.942696, | |
| -174.68583 0.6895,0 26.281,25.03215 56.8701, | |
| 55.627 l 55.6165,55.627 -231.245496,231.24803 c -127.185,127.1864 | |
| -231.5279,231.248 -231.873,231.248 -0.3451,0 -104.688, | |
| -104.0616 -231.873,-231.248 z | |
| " fill="currentColor"></path></g></svg></span></button> | |
| </span> | |
| <ul id="item_09954225141429827" class="css-1ovlie0"> | |
| <li class="css-xha50i"><span class="css-15wrjcl"><span class="css-i9gxme"><span class="css-1okwld7"><a class="css-12c97ec" href="/docs/sharing-components-across-websites/">Sharing Components Across Websites</a></span></span> | |
| <button aria-controls="item_0993221445379636" aria-label="Sharing Components Across Websites expand" class="css-yxzoj8"><span class="css-mnk7jy"><svg viewBox="0 0 926.23699 573.74994" version="1.1" x="0px" y="0px" width="10" height="10" class="css-w8prxe"><g transform="translate(904.92214,-879.1482)"><path d=" | |
| m -673.67664,1221.6502 -231.2455,-231.24803 55.6165, | |
| -55.627 c 30.5891,-30.59485 56.1806,-55.627 56.8701,-55.627 0.6894, | |
| 0 79.8637,78.60862 175.9427,174.68583 l 174.6892,174.6858 174.6892, | |
| -174.6858 c 96.079,-96.07721 175.253196,-174.68583 175.942696, | |
| -174.68583 0.6895,0 26.281,25.03215 56.8701, | |
| 55.627 l 55.6165,55.627 -231.245496,231.24803 c -127.185,127.1864 | |
| -231.5279,231.248 -231.873,231.248 -0.3451,0 -104.688, | |
| -104.0616 -231.873,-231.248 z | |
| " fill="currentColor"></path></g></svg></span></button> | |
| </span> | |
| <ul id="item_0993221445379636" class="css-1ovlie0"> | |
| <li><span class="css-i3q8q7"><a class="css-1qspiaa" href="/docs/component-libraries/">Component Libraries</a></span></li> | |
| <li><span class="css-i3q8q7"><a class="css-1sgu29x" href="/docs/making-components-discoverable/">Making Components Discoverable</a></span></li> | |
| </ul> | |
| </li> | |
| </ul> | |
| </li> | |
| <li><span class="css-joo087"><a class="css-1dc9vet" href="/docs/how-gatsby-boosts-career/">How Gatsby Boosts Your Career</a></span></li> | |
| </ul> | |
| </li> | |
| <li class="css-es1dba"><span class="css-15wrjcl"><span class="css-i9gxme"><span class="css-joo087"><a class="css-18gt9nx" href="/contributing/">Contributing</a></span></span> | |
| <button aria-controls="item_06706813178716764" aria-label="Contributing expand" class="css-yxzoj8"><span class="css-mnk7jy"><svg viewBox="0 0 926.23699 573.74994" version="1.1" x="0px" y="0px" width="10" height="10" class="css-w8prxe"><g transform="translate(904.92214,-879.1482)"><path d=" | |
| m -673.67664,1221.6502 -231.2455,-231.24803 55.6165, | |
| -55.627 c 30.5891,-30.59485 56.1806,-55.627 56.8701,-55.627 0.6894, | |
| 0 79.8637,78.60862 175.9427,174.68583 l 174.6892,174.6858 174.6892, | |
| -174.6858 c 96.079,-96.07721 175.253196,-174.68583 175.942696, | |
| -174.68583 0.6895,0 26.281,25.03215 56.8701, | |
| 55.627 l 55.6165,55.627 -231.245496,231.24803 c -127.185,127.1864 | |
| -231.5279,231.248 -231.873,231.248 -0.3451,0 -104.688, | |
| -104.0616 -231.873,-231.248 z | |
| " fill="currentColor"></path></g></svg></span></button> | |
| </span> | |
| <ul id="item_06706813178716764" class="css-1ovlie0"> | |
| <li><span class="css-joo087"><a class="css-1dc9vet" href="/contributing/community/">Community</a></span></li> | |
| <li><span class="css-joo087"><a class="css-1dc9vet" href="/contributing/how-to-contribute/">How to Contribute</a></span></li> | |
| </ul> | |
| </li> | |
| <li class="css-es1dba"><span class="css-15wrjcl"><span class="css-i9gxme"><span class="css-joo087"><a class="css-18gt9nx" href="/docs/partnering-with-gatsby/">Partnering With Gatsby</a></span></span> | |
| <button aria-controls="item_08730266739376031" aria-label="Partnering With Gatsby expand" class="css-yxzoj8"><span class="css-mnk7jy"><svg viewBox="0 0 926.23699 573.74994" version="1.1" x="0px" y="0px" width="10" height="10" class="css-w8prxe"><g transform="translate(904.92214,-879.1482)"><path d=" | |
| m -673.67664,1221.6502 -231.2455,-231.24803 55.6165, | |
| -55.627 c 30.5891,-30.59485 56.1806,-55.627 56.8701,-55.627 0.6894, | |
| 0 79.8637,78.60862 175.9427,174.68583 l 174.6892,174.6858 174.6892, | |
| -174.6858 c 96.079,-96.07721 175.253196,-174.68583 175.942696, | |
| -174.68583 0.6895,0 26.281,25.03215 56.8701, | |
| 55.627 l 55.6165,55.627 -231.245496,231.24803 c -127.185,127.1864 | |
| -231.5279,231.248 -231.873,231.248 -0.3451,0 -104.688, | |
| -104.0616 -231.873,-231.248 z | |
| " fill="currentColor"></path></g></svg></span></button> | |
| </span> | |
| <ul id="item_08730266739376031" class="css-1ovlie0"> | |
| <li><span class="css-joo087"><a class="css-1dc9vet" href="/docs/gatsby-vendor-partnership/">Integrating and Partnering For Vendors</a></span></li> | |
| <li><span class="css-joo087"><a class="css-1dc9vet" href="/docs/gatsby-agency-partnership/">Agency Partnership Program</a></span></li> | |
| </ul> | |
| </li> | |
| <li><span class="css-joo087"><a class="css-1dc9vet" href="/docs/gatsby-cli/">Commands (Gatsby CLI)</a></span></li> | |
| <li><span class="css-joo087"><a class="css-1dc9vet" href="/docs/cheat-sheet/">Cheat Sheet</a></span></li> | |
| <li><span class="css-joo087"><a class="css-1dc9vet" href="/docs/glossary/">Glossary</a></span></li> | |
| <li><span class="css-joo087"><a class="css-1dc9vet" href="/docs/gatsby-repl/">Gatsby REPL</a></span></li> | |
| </ul> | |
| </nav> | |
| </section> | |
| </div> | |
| </div> | |
| <style data-emotion-css="de5d5h"> | |
| .css-de5d5h { | |
| background-color: #663399; | |
| border-radius: 50%; | |
| bottom: 4rem; | |
| box-shadow: 0px 4px 16px rgba(46, 41, 51, 0.08), 0px 8px 24px rgba(71, 63, 79, 0.16); | |
| cursor: pointer; | |
| display: -webkit-box; | |
| display: -webkit-flex; | |
| display: -ms-flexbox; | |
| display: flex; | |
| height: 3.5rem; | |
| -webkit-box-pack: space-around; | |
| -webkit-justify-content: space-around; | |
| -ms-flex-pack: space-around; | |
| justify-content: space-around; | |
| position: fixed; | |
| right: 1.5rem; | |
| visibility: visible; | |
| width: 3.5rem; | |
| z-index: 20; | |
| } | |
| @media (min-width:750px) { | |
| .css-de5d5h { | |
| display: none; | |
| } | |
| } | |
| </style> | |
| <div role="button" aria-label="Show Secondary Navigation" aria-controls="SecondaryNavigation" aria-expanded="false" tabindex="0" class="css-de5d5h"> | |
| <style data-emotion-css="umykz0"> | |
| .css-umykz0 { | |
| -webkit-align-self: center; | |
| -ms-flex-item-align: center; | |
| align-self: center; | |
| color: #ffffff; | |
| display: -webkit-box; | |
| display: -webkit-flex; | |
| display: -ms-flexbox; | |
| display: flex; | |
| -webkit-flex-direction: column; | |
| -ms-flex-direction: column; | |
| flex-direction: column; | |
| height: 1.25rem; | |
| visibility: visible; | |
| width: 1.25rem; | |
| } | |
| </style> | |
| <div class="css-umykz0"> | |
| <style data-emotion-css="19k4nei"> | |
| .css-19k4nei { | |
| -webkit-transform: translate(-5px, 5px) rotate(90deg); | |
| -ms-transform: translate(-5px, 5px) rotate(90deg); | |
| transform: translate(-5px, 5px) rotate(90deg); | |
| -webkit-transition: -webkit-transform 100ms cubic-bezier(0.4, 0, 0.2, 1); | |
| -webkit-transition: transform 100ms cubic-bezier(0.4, 0, 0.2, 1); | |
| transition: transform 100ms cubic-bezier(0.4, 0, 0.2, 1); | |
| } | |
| </style> | |
| <svg viewBox="0 0 926.23699 573.74994" version="1.1" x="0px" y="0px" width="15" height="15" class="css-19k4nei"> | |
| <g transform="translate(904.92214,-879.1482)"> | |
| <path d=" | |
| m -673.67664,1221.6502 -231.2455,-231.24803 55.6165, | |
| -55.627 c 30.5891,-30.59485 56.1806,-55.627 56.8701,-55.627 0.6894, | |
| 0 79.8637,78.60862 175.9427,174.68583 l 174.6892,174.6858 174.6892, | |
| -174.6858 c 96.079,-96.07721 175.253196,-174.68583 175.942696, | |
| -174.68583 0.6895,0 26.281,25.03215 56.8701, | |
| 55.627 l 55.6165,55.627 -231.245496,231.24803 c -127.185,127.1864 | |
| -231.5279,231.248 -231.873,231.248 -0.3451,0 -104.688, | |
| -104.0616 -231.873,-231.248 z | |
| " fill="currentColor"></path> | |
| </g> | |
| </svg> | |
| <style data-emotion-css="1k1o4ur"> | |
| .css-1k1o4ur { | |
| -webkit-transform: translate(10px, -5px) rotate(270deg); | |
| -ms-transform: translate(10px, -5px) rotate(270deg); | |
| transform: translate(10px, -5px) rotate(270deg); | |
| -webkit-transition: -webkit-transform 100ms cubic-bezier(0.4, 0, 0.2, 1); | |
| -webkit-transition: transform 100ms cubic-bezier(0.4, 0, 0.2, 1); | |
| transition: transform 100ms cubic-bezier(0.4, 0, 0.2, 1); | |
| } | |
| </style> | |
| <svg viewBox="0 0 926.23699 573.74994" version="1.1" x="0px" y="0px" width="15" height="15" class="css-1k1o4ur"> | |
| <g transform="translate(904.92214,-879.1482)"> | |
| <path d=" | |
| m -673.67664,1221.6502 -231.2455,-231.24803 55.6165, | |
| -55.627 c 30.5891,-30.59485 56.1806,-55.627 56.8701,-55.627 0.6894, | |
| 0 79.8637,78.60862 175.9427,174.68583 l 174.6892,174.6858 174.6892, | |
| -174.6858 c 96.079,-96.07721 175.253196,-174.68583 175.942696, | |
| -174.68583 0.6895,0 26.281,25.03215 56.8701, | |
| 55.627 l 55.6165,55.627 -231.245496,231.24803 c -127.185,127.1864 | |
| -231.5279,231.248 -231.873,231.248 -0.3451,0 -104.688, | |
| -104.0616 -231.873,-231.248 z | |
| " fill="currentColor"></path> | |
| </g> | |
| </svg> | |
| </div> | |
| </div> | |
| </div> | |
| <style data-emotion-css="18dt6si"> | |
| .css-18dt6si { | |
| position: absolute; | |
| width: 1px; | |
| height: 1px; | |
| padding: 0; | |
| overflow: hidden; | |
| -webkit-clip: rect(0, 0, 0, 0); | |
| clip: rect(0, 0, 0, 0); | |
| white-space: nowrap; | |
| border: 0; | |
| } | |
| </style><span class="css-18dt6si"><svg width="0" height="0" viewBox="0 0 0 0" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><linearGradient id="accent-white-top" x1="0%" y1="100%" x2="0%" y2="0%"><stop offset="0" style="stop-color:#FFFFFF;stop-opacity:0"></stop><stop offset="0.35" style="stop-color:#FFFFFF;stop-opacity:0"></stop><stop offset="1" style="stop-color:#ffb238"></stop></linearGradient><linearGradient id="accent-white-bottom" x1="0%" y1="0%" x2="0%" y2="100%"><stop offset="0" style="stop-color:#FFFFFF"></stop><stop offset="0.65" style="stop-color:#FFFFFF"></stop><stop offset="1" style="stop-color:#ffb238"></stop></linearGradient><linearGradient id="accent-white-45deg" x1="0%" y1="0%" x2="100%" y2="0%"><stop offset="0" style="stop-color:#FFFFFF;stop-opacity:0"></stop><stop offset="1" style="stop-color:#ffb238"></stop></linearGradient><linearGradient id="lilac-gatsby" x1="0%" y1="0%" x2="0%" y2="100%"><stop offset="0" style="stop-color:#8a4baf"></stop><stop offset="1" style="stop-color:#663399"></stop></linearGradient><linearGradient id="purple-top" x1="0%" y1="0%" x2="0%" y2="100%"><stop offset="0" style="stop-color:#663399"></stop><stop offset="1" style="stop-color:#8a4baf"></stop></linearGradient></defs></svg></span> | |
| <style data-emotion-css="524y8i"> | |
| .css-524y8i { | |
| position: fixed; | |
| display: -webkit-box; | |
| display: -webkit-flex; | |
| display: -ms-flexbox; | |
| display: flex; | |
| -webkit-box-pack: space-around; | |
| -webkit-justify-content: space-around; | |
| -ms-flex-pack: space-around; | |
| justify-content: space-around; | |
| bottom: 0; | |
| left: 0; | |
| right: 0; | |
| z-index: 5; | |
| border-top: 1px solid #f0f0f2; | |
| background: #ffffff; | |
| height: 3.75rem; | |
| font-family: Futura PT, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji; | |
| padding-bottom: env(safe-area-inset-bottom); | |
| } | |
| @media (min-width:750px) { | |
| .css-524y8i { | |
| display: none; | |
| } | |
| } | |
| </style> | |
| <div class="css-524y8i"> | |
| <style data-emotion-css="1ddhqnj"> | |
| .css-1ddhqnj { | |
| color: #8a4baf; | |
| border-radius: 2px; | |
| font-size: 0.75rem; | |
| -webkit-flex-shrink: 0; | |
| -ms-flex-negative: 0; | |
| flex-shrink: 0; | |
| line-height: 1; | |
| width: 64px; | |
| padding: 0.25rem; | |
| -webkit-text-decoration: none; | |
| text-decoration: none; | |
| text-align: center; | |
| -webkit-font-smoothing: antialiased; | |
| } | |
| .css-1ddhqnj svg { | |
| display: block; | |
| height: 32px; | |
| margin: 0 auto; | |
| } | |
| .css-1ddhqnj svg path, | |
| .css-1ddhqnj svg line, | |
| .css-1ddhqnj svg polygon { | |
| -webkit-transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1); | |
| transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1); | |
| } | |
| .css-1ddhqnj .svg-stroke { | |
| stroke-miterlimit: 10; | |
| stroke-width: 1.4173; | |
| } | |
| .css-1ddhqnj .svg-stroke-accent { | |
| stroke: #b17acc; | |
| } | |
| .css-1ddhqnj .svg-stroke-lilac { | |
| stroke: #b17acc; | |
| } | |
| .css-1ddhqnj .svg-fill-lilac { | |
| fill: #b17acc; | |
| } | |
| .css-1ddhqnj .svg-fill-gatsby { | |
| fill: #b17acc; | |
| } | |
| .css-1ddhqnj .svg-fill-brightest { | |
| fill: #ffffff; | |
| } | |
| .css-1ddhqnj .svg-fill-accent { | |
| fill: #b17acc; | |
| } | |
| .css-1ddhqnj .svg-stroke-gatsby { | |
| stroke: #b17acc; | |
| } | |
| .css-1ddhqnj .svg-fill-gradient-accent-white-top { | |
| fill: transparent; | |
| } | |
| .css-1ddhqnj .svg-fill-gradient-accent-white-45deg { | |
| fill: transparent; | |
| } | |
| .css-1ddhqnj .svg-fill-gradient-accent-white-bottom { | |
| fill: #ffffff; | |
| } | |
| .css-1ddhqnj .svg-fill-gradient-purple { | |
| fill: #b17acc; | |
| } | |
| .css-1ddhqnj .svg-stroke-gradient-purple { | |
| stroke: #b17acc; | |
| } | |
| .css-1ddhqnj .svg-fill-lavender { | |
| fill: transparent; | |
| } | |
| .css-1ddhqnj:hover .svg-stroke-accent { | |
| stroke: #ffb238; | |
| } | |
| .css-1ddhqnj:hover .svg-stroke-lilac { | |
| stroke: #8a4baf; | |
| } | |
| .css-1ddhqnj:hover .svg-stroke-gatsby { | |
| stroke: #663399; | |
| } | |
| .css-1ddhqnj:hover .svg-stroke-gradient-purple { | |
| stroke: url(#purple-top); | |
| } | |
| .css-1ddhqnj:hover .svg-fill-lilac { | |
| fill: #8a4baf; | |
| } | |
| .css-1ddhqnj:hover .svg-fill-gatsby { | |
| fill: #663399; | |
| } | |
| .css-1ddhqnj:hover .svg-fill-accent { | |
| fill: #ffb238; | |
| } | |
| .css-1ddhqnj:hover .svg-fill-lavender { | |
| fill: #f1defa; | |
| } | |
| .css-1ddhqnj:hover .svg-fill-brightest { | |
| fill: #ffffff; | |
| } | |
| .css-1ddhqnj:hover .svg-fill-gradient-accent-white-45deg { | |
| fill: url(#accent-white-45deg); | |
| } | |
| .css-1ddhqnj:hover .svg-fill-gradient-purple { | |
| fill: url(#lilac-gatsby); | |
| } | |
| .css-1ddhqnj:hover .svg-fill-gradient-accent-white-bottom { | |
| fill: url(#accent-white-bottom); | |
| } | |
| .css-1ddhqnj:hover .svg-fill-gradient-accent-white-top { | |
| fill: url(#accent-white-top); | |
| } | |
| .css-1ddhqnj[data-active] { | |
| color: #663399; | |
| font-weight: bold; | |
| } | |
| .css-1ddhqnj[data-active] .svg-stroke-accent { | |
| stroke: #ffb238; | |
| } | |
| .css-1ddhqnj[data-active] .svg-stroke-lilac { | |
| stroke: #8a4baf; | |
| } | |
| .css-1ddhqnj[data-active] .svg-stroke-gatsby { | |
| stroke: #663399; | |
| } | |
| .css-1ddhqnj[data-active] .svg-stroke-gradient-purple { | |
| stroke: url(#purple-top); | |
| } | |
| .css-1ddhqnj[data-active] .svg-fill-lilac { | |
| fill: #8a4baf; | |
| } | |
| .css-1ddhqnj[data-active] .svg-fill-gatsby { | |
| fill: #663399; | |
| } | |
| .css-1ddhqnj[data-active] .svg-fill-accent { | |
| fill: #ffb238; | |
| } | |
| .css-1ddhqnj[data-active] .svg-fill-lavender { | |
| fill: #f1defa; | |
| } | |
| .css-1ddhqnj[data-active] .svg-fill-brightest { | |
| fill: #ffffff; | |
| } | |
| .css-1ddhqnj[data-active] .svg-fill-gradient-accent-white-45deg { | |
| fill: url(#accent-white-45deg); | |
| } | |
| .css-1ddhqnj[data-active] .svg-fill-gradient-purple { | |
| fill: url(#lilac-gatsby); | |
| } | |
| .css-1ddhqnj[data-active] .svg-fill-gradient-accent-white-bottom { | |
| fill: url(#accent-white-bottom); | |
| } | |
| .css-1ddhqnj[data-active] .svg-fill-gradient-accent-white-top { | |
| fill: url(#accent-white-top); | |
| } | |
| </style><a class="css-1ddhqnj" data-active="true" href="/docs/"><span><svg class="svg-icon-docs" viewBox="0 0 36 32" focusable="false"> | |
| <path class="svg-stroke svg-stroke-gatsby svg-fill-lavender" d="M10 7c-1.6 0-3 1.4-3 3v2h10"/> | |
| <path class="svg-fill-gradient-accent-white-bottom" d="M10 7c1.6 0 3 1.4 3 3v12c0 1.6 1.3 3 3 3s3-1.4 3-3h6V10c0-1.6-1.4-3-3-3H10z"/> | |
| <path class="svg-stroke svg-stroke-gradient-purple" fill="none" d="M10 7h12c1.6 0 3 1.4 3 3v12"/> | |
| <path class="svg-stroke svg-stroke-gradient-purple" fill="none" d="M16 25c-1.7 0-3-1.4-3-3V10c0-1.6-1.4-3-3-3"/> | |
| <path class="svg-stroke svg-stroke-lilac" fill="#fff" d="M16 25h9c1.6 0 3-1.4 3-3v-1h-9v1c0 1.6-1.4 3-3 3z"/> | |
| <path class="svg-fill-gatsby" d="M17 10.5c.6 0 1 .4 1 1s-.4 1-1 1-1-.4-1-1 .6-1 1-1zm4.2.1c.6 0 1 .4 1 1s-.4 1-1 1-1-.4-1-1c.1-.5.4-1 1-1z"/> | |
| <path class="svg-fill-gradient-purple" d="M22.2 14.5v1.3c0 .6-.3 1.1-.8 1.6s-1.3.9-2.2.9-1.7-.4-2.2-.9c-.5-.5-.8-1-.8-1.6v-1.3h6z"/> | |
| </svg> | |
| </span><div>Docs</div></a><a class="css-1ddhqnj" href="/tutorial/"><span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 32" focusable="false"> | |
| <circle class="svg-fill-brightest" cx="15.4" cy="19.2" r="6.8"/> | |
| <path fill="#fff" class="svg-stroke svg-stroke-accent" d="M25.3 21.5h-7.6l3.8-6.7 3.8-6.6 3.9 6.6 3.8 6.7z"/> | |
| <path class="svg-fill-lilac" d="M15.5 13.4c3.4 0 6.1 2.7 6.1 6.1s-2.7 6.1-6.1 6.1-6.1-2.7-6.1-6.1 2.7-6.1 6.1-6.1m0-1.4C11.4 12 8 15.4 8 19.5s3.4 7.5 7.5 7.5 7.5-3.4 7.5-7.5-3.4-7.5-7.5-7.5z"/> | |
| <path class="svg-fill-gradient-accent-white-top" d="M3.7 6.7h10.6v10.6H3.7z"/> | |
| <path class="svg-fill-gatsby" d="M13.6 7.4v9.2H4.4V7.4h9.2M15 6H3v12h12V6z"/> | |
| </svg> | |
| </span><div>Tutorials</div></a><a class="css-1ddhqnj" href="/plugins/"><span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 32" focusable="false"> | |
| <path class="svg-fill-lilac" d="M17.7 10.5c.2-.2.2-.5 0-.6l-.7-.7c-.2-.2-.2-.5 0-.6l.7-.7c.2-.2.2-.5 0-.6l-.5-.5c-.2-.2-.5-.2-.6 0l-.7.7c-.2.2-.5.2-.6 0l-.7-.7c-.2-.2-.5-.2-.6 0l-.7.2c-.2.2-.2.5 0 .6l.7.7c.2.2.2.5 0 .6l-.7.7c-.2.2-.2.5 0 .6l.5.5c.2.2.5.2.6 0l.7-.7c.2-.2.5-.2.6 0l.7.7c.2.2.5.2.6 0l.7-.2z"/> | |
| <path class="svg-fill-accent" d="M26.3 7.9c.2-.2.2-.5 0-.6l-.5-.5c-.2-.2-.2-.5 0-.6l.5-.5c.2-.2.2-.5 0-.6l-.3-.3c-.2-.2-.5-.2-.6 0l-.5.5c-.2.2-.5.2-.6 0l-.5-.5c-.2-.2-.5-.2-.6 0l-.3.2c-.2.2-.2.5 0 .6l.5.5c.2.2.2.5 0 .6l-.5.5c-.2.2-.2.5 0 .6l.3.3c.2.2.5.2.6 0l.5-.5c.2-.2.5-.2.6 0l.5.5c.2.2.5.2.6 0l.3-.2z"/> | |
| <path class="svg-fill-gatsby" d="M26.7 17.1c.2-.2.1-.5-.1-.7l-.1-.1c-.2-.2-.2-.5 0-.7l.1-.1c.2-.2.2-.5.1-.7-.2-.2-.5-.1-.7.1v.2c-.2.2-.5.2-.7 0l-.1-.1c-.2-.2-.5-.2-.7-.1-.2.2-.1.5.1.7l.1.1c.2.2.2.5 0 .7l-.1.1c-.2.2-.2.5-.1.7s.5.1.7-.1l.1-.1c.2-.2.5-.2.7 0l.1.1c.1.1.4.2.6 0z"/> | |
| <path class="svg-stroke svg-stroke-gatsby" fill="#fff" d="M21.413 11.11l2.121 2.12L20 16.767l-2.122-2.121z"/> | |
| <path class="svg-fill-lavender svg-stroke svg-stroke-gatsby" d="M10.2 25.3l-.9-.9c-.3-.3-.3-.9 0-1.2l8.5-8.5 2.1 2.1-8.5 8.5c-.4.4-.9.4-1.2 0z"/> | |
| </svg> | |
| </span><div>Plugins</div></a><a class="css-1ddhqnj" href="/blog/"><span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 32" focusable="false"> | |
| <path class="svg-stroke svg-stroke-lilac" d="M24.1 10.7h4.2m-7.1 2.8h5.7m-7.1 1.4l-.1-5.7M17 17.8l-.1-5.8"/> | |
| <path class="svg-fill-gradient-accent-white-45deg" d="M27.6 12.8L18.4 22c-1.6 1.6-5.7 0-5.7 0s-1.6-4.1 0-5.7l9.2-9.2c1.6-1.6 4.1-1.6 5.7 0 1.6 1.6 1.6 4.2 0 5.7z"/> | |
| <path class="svg-stroke svg-stroke-lilac" d="M27.6 7.2L13.1 21.7"/> | |
| <path class="svg-fill-gatsby" d="M10.4 25.4l-2.4.4 4.9-5 1.1 1z"/> | |
| <path fill="none" class="svg-stroke svg-stroke-gatsby" d="M27.6 12.8L18.4 22h-5.7v-5.7l9.2-9.2c1.6-1.6 4.1-1.6 5.7 0 1.6 1.6 1.6 4.2 0 5.7z"/> | |
| </svg> | |
| </span><div>Blog</div></a><a class="css-1ddhqnj" href="/showcase/"><span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 32" focusable="false"> | |
| <path class="svg-stroke svg-stroke-gatsby svg-fill-gradient-accent-white-45deg" d="M18.9 20.7l-2.3 5-2.3-5-5-2.3 5-2.3 2.3-5.1 2.3 5.1 5.1 2.3z"/> | |
| <path class="svg-fill-lilac" d="M26.3 13.1l-.9 1.9-.9-1.9-1.9-.9 1.9-.8.9-1.9.9 1.9 1.9.8z"/> | |
| <path class="svg-fill-accent" d="M21 7.4L20.3 9l-.7-1.6-1.6-.7 1.6-.7.7-1.5L21 6l1.5.7z"/> | |
| </svg> | |
| </span><div>Showcase</div></a></div> | |
| </div> | |
| </div> | |
| <script> | |
| (function(sa, gai) { | |
| function load(f, c) { | |
| var a = document.createElement('script'); | |
| a.async = 1; | |
| a.src = f; | |
| a.onload = c; | |
| var s = document.getElementsByTagName('script')[0]; | |
| s.parentNode.insertBefore(a, s); | |
| } | |
| load(sa); | |
| window.onload = function() { | |
| firebase.initializeApp({ | |
| appId: gai | |
| }).performance(); | |
| }; | |
| })('https://earlymonitoring.firebaseapp.com/index.min.js', "1:216044356421:web:92185d5e24b3a2a1"); | |
| </script> | |
| <script> | |
| function gaOptout() { | |
| document.cookie = disableStr + '=true; expires=Thu, 31 Dec 2099 23:59:59 UTC;path=/', window[disableStr] = !0 | |
| } | |
| var gaProperty = 'UA-93349937-5', | |
| disableStr = 'ga-disable-' + gaProperty; | |
| document.cookie.indexOf(disableStr + '=true') > -1 && (window[disableStr] = !0); | |
| if (true) { | |
| (function(i, s, o, g, r, a, m) { | |
| i['GoogleAnalyticsObject'] = r; | |
| i[r] = i[r] || function() { | |
| (i[r].q = i[r].q || []).push(arguments) | |
| }, i[r].l = 1 * new Date(); | |
| a = s.createElement(o), | |
| m = s.getElementsByTagName(o)[0]; | |
| a.async = 1; | |
| a.src = g; | |
| m.parentNode.insertBefore(a, m) | |
| })(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga'); | |
| } | |
| if (typeof ga === "function") { | |
| ga('create', 'UA-93349937-5', 'auto', { | |
| "allowLinker": true | |
| }); | |
| ga('set', 'anonymizeIp', true); | |
| } | |
| </script> | |
| <script> | |
| if (ga) { | |
| ga('require', 'linker'); | |
| ga('linker:autoLink', ['gatsbyjs.com']); | |
| } | |
| </script> | |
| <script id="gatsby-script-loader"> | |
| /*<![CDATA[*/ | |
| window.pagePath = "/docs/seo/"; | |
| window.webpackCompilationHash = "a14d5e2cc93f949b0762"; /*]]>*/ | |
| </script> | |
| <script id="gatsby-chunk-mapping"> | |
| /*<![CDATA[*/ | |
| window.___chunkMapping = { | |
| "app": ["/app-5d873e85996efb087f27.js"], | |
| "component---node-modules-gatsby-plugin-offline-app-shell-js": ["/component---node-modules-gatsby-plugin-offline-app-shell-js-173253da8ec0b4e965a9.js"], | |
| "component---src-templates-template-blog-list-js": ["/component---src-templates-template-blog-list-js-9b2e3232379288725ff7.js"], | |
| "component---src-templates-template-blog-post-js": ["/component---src-templates-template-blog-post-js-b4298bb172b69de70855.js"], | |
| "component---src-templates-tags-js": ["/component---src-templates-tags-js-cd25fb7fb0afc21c6fbe.js"], | |
| "component---src-templates-template-starter-page-js": ["/component---src-templates-template-starter-page-js-72a5119586cc99da3c9c.js"], | |
| "component---src-templates-template-contributor-page-js": ["/component---src-templates-template-contributor-page-js-b265e35966f842484d86.js"], | |
| "component---src-templates-template-creator-details-js": ["/component---src-templates-template-creator-details-js-0840a69809408e346d19.js"], | |
| "component---src-templates-template-showcase-details-js": ["/component---src-templates-template-showcase-details-js-648a2f1ead0077036b56.js"], | |
| "component---src-templates-template-docs-markdown-js": ["/component---src-templates-template-docs-markdown-js-36a02eff386e0d4aa7d0.js"], | |
| "component---src-templates-template-docs-local-packages-js": ["/component---src-templates-template-docs-local-packages-js-26ed34f3d49ddf538885.js"], | |
| "component---src-templates-template-docs-remote-packages-js": ["/component---src-templates-template-docs-remote-packages-js-8cc0acce4257631b35c4.js"], | |
| "component---src-pages-404-js": ["/component---src-pages-404-js-0fa780a830db74116396.js"], | |
| "component---src-pages-blog-tags-js": ["/component---src-pages-blog-tags-js-0688fdf37aadae235649.js"], | |
| "component---src-pages-contributing-events-js": ["/component---src-pages-contributing-events-js-d31c2670f70fc7703f8b.js"], | |
| "component---src-pages-contributing-index-js": ["/component---src-pages-contributing-index-js-593e5b4bd328e4321f2b.js"], | |
| "component---src-pages-contributing-stub-list-js": ["/component---src-pages-contributing-stub-list-js-a4121b5cf4c5934ec7d4.js"], | |
| "component---src-pages-creators-agencies-js": ["/component---src-pages-creators-agencies-js-621f0b93a901c500b4bc.js"], | |
| "component---src-pages-creators-companies-js": ["/component---src-pages-creators-companies-js-7e7e5c2b3b3b1fb83f19.js"], | |
| "component---src-pages-creators-index-js": ["/component---src-pages-creators-index-js-89f73512d3c0cdfa4947.js"], | |
| "component---src-pages-creators-people-js": ["/component---src-pages-creators-people-js-277416e632562b715ffa.js"], | |
| "component---src-pages-docs-actions-js": ["/component---src-pages-docs-actions-js-7782d9df5b7bdc2c2808.js"], | |
| "component---src-pages-docs-browser-apis-js": ["/component---src-pages-docs-browser-apis-js-b177c630a5c10619f0f2.js"], | |
| "component---src-pages-docs-index-js": ["/component---src-pages-docs-index-js-0e56d5653e86e8194b21.js"], | |
| "component---src-pages-docs-node-api-helpers-js": ["/component---src-pages-docs-node-api-helpers-js-bf9d41835d6fd75f59fd.js"], | |
| "component---src-pages-docs-node-apis-js": ["/component---src-pages-docs-node-apis-js-309ce2b9b6cfb0f8465b.js"], | |
| "component---src-pages-docs-node-model-js": ["/component---src-pages-docs-node-model-js-b11e3b689286d724e25c.js"], | |
| "component---src-pages-docs-ssr-apis-js": ["/component---src-pages-docs-ssr-apis-js-662bbf4d96ded845297f.js"], | |
| "component---src-pages-features-js": ["/component---src-pages-features-js-b452f1fe1026e1e004d6.js"], | |
| "component---src-pages-guidelines-color-js": ["/component---src-pages-guidelines-color-js-b2222c8272318d3e3c70.js"], | |
| "component---src-pages-guidelines-design-tokens-js": ["/component---src-pages-guidelines-design-tokens-js-6e291439fbd9e8e2400c.js"], | |
| "component---src-pages-guidelines-logo-js": ["/component---src-pages-guidelines-logo-js-4c8e4b4922ec0c35a33a.js"], | |
| "component---src-pages-guidelines-typography-js": ["/component---src-pages-guidelines-typography-js-66c99000297baf984334.js"], | |
| "component---src-pages-newsletter-js": ["/component---src-pages-newsletter-js-f04e8d898186df68f3f9.js"], | |
| "component---src-pages-showcase-js": ["/component---src-pages-showcase-js-799398fb4e62d5a60cd6.js"], | |
| "component---src-pages-starters-js": ["/component---src-pages-starters-js-24a0c9e285d522fa5227.js"], | |
| "component---src-pages-ecosystem-js": ["/component---src-pages-ecosystem-js-49c0d156f33fefa86669.js"], | |
| "component---src-pages-index-js": ["/component---src-pages-index-js-3249ee0eafd7b7580627.js"], | |
| "component---src-pages-plugins-js": ["/component---src-pages-plugins-js-2e7c11d227e9997ff093.js"] | |
| }; /*]]>*/ | |
| </script> | |
| <script src="/component---src-templates-template-docs-markdown-js-36a02eff386e0d4aa7d0.js" async=""></script> | |
| <script src="/3-92f22224542de1c55728.js" async=""></script> | |
| <script src="/2-fca3321f556d3625dd39.js" async=""></script> | |
| <script src="/0-1ca549877e2b191cb4f2.js" async=""></script> | |
| <script src="/styles-f2fe70701828434e64ea.js" async=""></script> | |
| <script src="/app-5d873e85996efb087f27.js" async=""></script> | |
| <script src="/webpack-runtime-e6dd956aa1952c03dac3.js" async=""></script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment