CINXE.COM
GitHub - gocode1702/headless-gatsby-multilang
<!DOCTYPE html> <html lang="en" data-color-mode="auto" data-light-theme="light" data-dark-theme="dark" data-a11y-animated-images="system" data-a11y-link-underlines="true" > <head> <meta charset="utf-8"> <link rel="dns-prefetch" href="https://github.githubassets.com"> <link rel="dns-prefetch" href="https://avatars.githubusercontent.com"> <link rel="dns-prefetch" href="https://github-cloud.s3.amazonaws.com"> <link rel="dns-prefetch" href="https://user-images.githubusercontent.com/"> <link rel="preconnect" href="https://github.githubassets.com" crossorigin> <link rel="preconnect" href="https://avatars.githubusercontent.com"> <link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/light-3e154969b9f9.css" /><link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/dark-9c5b7a476542.css" /><link data-color-theme="dark_dimmed" crossorigin="anonymous" media="all" rel="stylesheet" data-href="https://github.githubassets.com/assets/dark_dimmed-afda8eb0fb33.css" /><link data-color-theme="dark_high_contrast" crossorigin="anonymous" media="all" rel="stylesheet" data-href="https://github.githubassets.com/assets/dark_high_contrast-2494e44ccdc5.css" /><link data-color-theme="dark_colorblind" crossorigin="anonymous" media="all" rel="stylesheet" data-href="https://github.githubassets.com/assets/dark_colorblind-56fff47acadc.css" /><link data-color-theme="light_colorblind" crossorigin="anonymous" media="all" rel="stylesheet" data-href="https://github.githubassets.com/assets/light_colorblind-71cd4cc132ec.css" /><link data-color-theme="light_high_contrast" crossorigin="anonymous" media="all" rel="stylesheet" data-href="https://github.githubassets.com/assets/light_high_contrast-fd5499848985.css" /><link data-color-theme="light_tritanopia" crossorigin="anonymous" media="all" rel="stylesheet" data-href="https://github.githubassets.com/assets/light_tritanopia-31d17ba3e139.css" /><link data-color-theme="dark_tritanopia" crossorigin="anonymous" media="all" rel="stylesheet" data-href="https://github.githubassets.com/assets/dark_tritanopia-68d6b2c79663.css" /> <link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/primer-primitives-4cf0d59ab51a.css" /> <link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/primer-af846850481e.css" /> <link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/global-e41ff91f8baa.css" /> <link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/github-d3b66f11d613.css" /> <link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/repository-1e3bbbee6b91.css" /> <link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/code-a0610fd00b47.css" /> <script type="application/json" id="client-env">{"locale":"en","featureFlags":["copilot_new_references_ui","copilot_beta_features_opt_in","copilot_chat_static_thread_suggestions","copilot_conversational_ux_history_refs","copilot_implicit_context","copilot_smell_icebreaker_ux","experimentation_azure_variant_endpoint","failbot_handle_non_errors","geojson_azure_maps","ghost_pilot_confidence_truncation_25","ghost_pilot_confidence_truncation_40","hovercard_accessibility","issues_react_new_timeline","issues_react_avatar_refactor","issues_react_remove_placeholders","issues_react_cache_fix_workaround","issues_react_blur_item_picker_on_close","marketing_pages_search_explore_provider","remove_child_patch","sample_network_conn_type","site_metered_billing_update","issues_react_first_time_contribution_banner","jk_navigation_in_list_view","ui_commands_respect_modals","lifecycle_label_name_updates"]}</script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/wp-runtime-118ecaabd77e.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_dompurify_dist_purify_js-b73fdff77a4e.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_oddbird_popover-polyfill_dist_popover_js-aff936e590ed.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_github_arianotify-polyfill_ariaNotify-polyfill_js-node_modules_github_mi-247092-740e4ddd559d.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/ui_packages_failbot_failbot_ts-a46544e9ee5e.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/environment-cd35650c2e9c.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_primer_behaviors_dist_esm_index_mjs-4aa4b0e95669.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_github_selector-observer_dist_index_esm_js-f690fd9ae3d5.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_github_relative-time-element_dist_index_js-6d3967acd51c.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_github_combobox-nav_dist_index_js-node_modules_github_g-emoji-element_di-6ce195-53781cbc550f.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_github_auto-complete-element_dist_index_js-node_modules_github_catalyst_-6afc16-3cdfa69a0406.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_github_text-expander-element_dist_index_js-f5498b8d4e5d.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_github_filter-input-element_dist_index_js-node_modules_github_remote-inp-b5f1d7-492b5042c841.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_github_mini-throttle_dist_index_js-node_modules_stacktrace-parser_dist_s-1f651a-1e3d784c897c.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_github_file-attachment-element_dist_index_js-node_modules_primer_view-co-7671f1-dc6cac136d88.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/github-elements-71486356f507.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/element-registry-e3ab8405ef80.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_braintree_browser-detection_dist_browser-detection_js-node_modules_githu-bb80ec-634de60bacfa.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_lit-html_lit-html_js-ce7225a304c5.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_github_hydro-analytics-client_dist_analytics-client_js-node_modules_gith-f3aee1-e6893db9c19e.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_github_mini-throttle_dist_index_js-node_modules_morphdom_dist_morphdom-e-7c534c-f8a5485c982a.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_github_turbo_dist_turbo_es2017-esm_js-858e043fcf76.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_github_remote-form_dist_index_js-node_modules_delegated-events_dist_inde-893f9f-6cf3320416b8.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_scroll-anchoring_dist_scroll-anchoring_esm_js-node_modules_stacktrace-pa-a71630-6f3c4f0189d8.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_color-convert_index_js-0e07cc183eed.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_github_quote-selection_dist_index_js-node_modules_github_session-resume_-0b5e12-889cec8cf448.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/ui_packages_updatable-content_updatable-content_ts-eae9df0dd562.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/app_assets_modules_github_behaviors_task-list_ts-app_assets_modules_github_sso_ts-ui_packages-900dde-18d1c91a7872.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/app_assets_modules_github_sticky-scroll-into-view_ts-7cbef09a422c.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/app_assets_modules_github_behaviors_ajax-error_ts-app_assets_modules_github_behaviors_include-d0d0a6-0e9fa537dc4f.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/app_assets_modules_github_behaviors_commenting_edit_ts-app_assets_modules_github_behaviors_ht-83c235-c89801ebbe15.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/behaviors-93287f4de493.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_delegated-events_dist_index_js-node_modules_github_catalyst_lib_index_js-f6223d90c7ba.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/notifications-global-3366f6b6298e.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_virtualized-list_es_index_js-node_modules_github_template-parts_lib_index_js-96453a51f920.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_stacktrace-parser_dist_stack-trace-parser_esm_js-node_modules_github_bro-b0a862-4d8589138d1e.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_github_remote-form_dist_index_js-node_modules_delegated-events_dist_inde-0e9dbe-d2bcedf65682.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/app_assets_modules_github_ref-selector_ts-043af64042a1.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/codespaces-4158520ad4d7.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_github_mini-throttle_dist_decorators_js-node_modules_delegated-events_di-cc9bcb-ea42a360c5ae.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_github_file-attachment-element_dist_index_js-node_modules_github_filter--35675b-aff280068839.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/repositories-ce9ff2a57e1f.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_github_mini-throttle_dist_index_js-node_modules_github_catalyst_lib_inde-dbbea9-9b97703a4e6a.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/code-menu-3118a76a2829.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/primer-react-765944243383.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/react-core-cd0a67881543.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/react-lib-7b7b5264f6c1.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/octicons-react-45c3a19dd792.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_emotion_is-prop-valid_dist_emotion-is-prop-valid_esm_js-node_modules_emo-62da9f-54c0c921f04b.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_github_mini-throttle_dist_index_js-node_modules_stacktrace-parser_dist_s-e7dcdd-285fc29e9fa5.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_oddbird_popover-polyfill_dist_popover-fn_js-4896ddd4b7bb.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/notifications-subscriptions-menu-1490f5bef85d.js"></script> <link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/primer-react.9fa170e9435ed4b922b9.module.css" /> <link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/notifications-subscriptions-menu.1bcff9205c241e99cff2.module.css" /> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/primer-react-765944243383.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/react-core-cd0a67881543.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/react-lib-7b7b5264f6c1.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/octicons-react-45c3a19dd792.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_emotion_is-prop-valid_dist_emotion-is-prop-valid_esm_js-node_modules_emo-62da9f-54c0c921f04b.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_github_mini-throttle_dist_index_js-node_modules_stacktrace-parser_dist_s-e7dcdd-285fc29e9fa5.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_oddbird_popover-polyfill_dist_popover-fn_js-4896ddd4b7bb.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/notifications-subscriptions-menu-1490f5bef85d.js"></script> <link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/primer-react.9fa170e9435ed4b922b9.module.css" /> <link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/notifications-subscriptions-menu.1bcff9205c241e99cff2.module.css" /> <title>GitHub - gocode1702/headless-gatsby-multilang</title> <meta name="route-pattern" content="/:user_id/:repository" data-turbo-transient> <meta name="route-controller" content="files" data-turbo-transient> <meta name="route-action" content="disambiguate" data-turbo-transient> <meta name="current-catalog-service-hash" content="f3abb0cc802f3d7b95fc8762b94bdcb13bf39634c40c357301c4aa1d67a256fb"> <meta name="request-id" content="9888:DB1F5:811FF:8F741:6742CB0C" data-pjax-transient="true"/><meta name="html-safe-nonce" content="8e3ea0336fd7b2d5ac1756aeb31ab8f5ac38a0c1ae3435befe0a125ac48b4f38" data-pjax-transient="true"/><meta name="visitor-payload" content="eyJyZWZlcnJlciI6IiIsInJlcXVlc3RfaWQiOiI5ODg4OkRCMUY1OjgxMUZGOjhGNzQxOjY3NDJDQjBDIiwidmlzaXRvcl9pZCI6IjE1ODQ3NDk1NDg0ODI1MTM2NzYiLCJyZWdpb25fZWRnZSI6InNvdXRoZWFzdGFzaWEiLCJyZWdpb25fcmVuZGVyIjoic291dGhlYXN0YXNpYSJ9" data-pjax-transient="true"/><meta name="visitor-hmac" content="d8cf8250bd712d454dfc66bf5732be6c334781f066bb4118651c38427c49e444" data-pjax-transient="true"/> <meta name="hovercard-subject-tag" content="repository:620384312" data-turbo-transient> <meta name="github-keyboard-shortcuts" content="repository,copilot" data-turbo-transient="true" /> <meta name="selected-link" value="repo_source" data-turbo-transient> <link rel="assets" href="https://github.githubassets.com/"> <meta name="google-site-verification" content="Apib7-x98H0j5cPqHWwSMm6dNU4GmODRoqxLiDzdx9I"> <meta name="octolytics-url" content="https://collector.github.com/github/collect" /> <meta name="analytics-location" content="/<user-name>/<repo-name>" data-turbo-transient="true" /> <meta name="user-login" content=""> <meta name="viewport" content="width=device-width"> <meta name="description" content="Contribute to gocode1702/headless-gatsby-multilang development by creating an account on GitHub."> <link rel="search" type="application/opensearchdescription+xml" href="/opensearch.xml" title="GitHub"> <link rel="fluid-icon" href="https://github.com/fluidicon.png" title="GitHub"> <meta property="fb:app_id" content="1401488693436528"> <meta name="apple-itunes-app" content="app-id=1477376905, app-argument=https://github.com/gocode1702/headless-gatsby-multilang" /> <meta name="twitter:image" content="https://opengraph.githubassets.com/af82d7f04d16b4ef6bec52646c2a3438bb7c3e5c49f29af126faa7e63f9a9e1b/gocode1702/headless-gatsby-multilang" /><meta name="twitter:site" content="@github" /><meta name="twitter:card" content="summary_large_image" /><meta name="twitter:title" content="GitHub - gocode1702/headless-gatsby-multilang" /><meta name="twitter:description" content="Contribute to gocode1702/headless-gatsby-multilang development by creating an account on GitHub." /> <meta property="og:image" content="https://opengraph.githubassets.com/af82d7f04d16b4ef6bec52646c2a3438bb7c3e5c49f29af126faa7e63f9a9e1b/gocode1702/headless-gatsby-multilang" /><meta property="og:image:alt" content="Contribute to gocode1702/headless-gatsby-multilang development by creating an account on GitHub." /><meta property="og:image:width" content="1200" /><meta property="og:image:height" content="600" /><meta property="og:site_name" content="GitHub" /><meta property="og:type" content="object" /><meta property="og:title" content="GitHub - gocode1702/headless-gatsby-multilang" /><meta property="og:url" content="https://github.com/gocode1702/headless-gatsby-multilang" /><meta property="og:description" content="Contribute to gocode1702/headless-gatsby-multilang development by creating an account on GitHub." /> <meta name="hostname" content="github.com"> <meta name="expected-hostname" content="github.com"> <meta http-equiv="x-pjax-version" content="272935131c2027f789efabd5bf30904ffaea35908a22afd03d8f75128cee7e1b" data-turbo-track="reload"> <meta http-equiv="x-pjax-csp-version" content="ace39c3b6632770952207593607e6e0be0db363435a8b877b1f96abe6430f345" data-turbo-track="reload"> <meta http-equiv="x-pjax-css-version" content="8968ee26e93ec8c6d3c4e91c77fb9d206091689d451ebbcddeca3832587a5b30" data-turbo-track="reload"> <meta http-equiv="x-pjax-js-version" content="c4972ae1cf5d4607c47252349fc1b47a24ff0ea303e5a8fbbe18ec27725a87ee" data-turbo-track="reload"> <meta name="turbo-cache-control" content="no-preview" data-turbo-transient=""> <meta data-hydrostats="publish"> <meta name="go-import" content="github.com/gocode1702/headless-gatsby-multilang git https://github.com/gocode1702/headless-gatsby-multilang.git"> <meta name="octolytics-dimension-user_id" content="93603467" /><meta name="octolytics-dimension-user_login" content="gocode1702" /><meta name="octolytics-dimension-repository_id" content="620384312" /><meta name="octolytics-dimension-repository_nwo" content="gocode1702/headless-gatsby-multilang" /><meta name="octolytics-dimension-repository_public" content="true" /><meta name="octolytics-dimension-repository_is_fork" content="false" /><meta name="octolytics-dimension-repository_network_root_id" content="620384312" /><meta name="octolytics-dimension-repository_network_root_nwo" content="gocode1702/headless-gatsby-multilang" /> <link rel="canonical" href="https://github.com/gocode1702/headless-gatsby-multilang" data-turbo-transient> <meta name="turbo-body-classes" content="logged-out env-production page-responsive"> <meta name="browser-stats-url" content="https://api.github.com/_private/browser/stats"> <meta name="browser-errors-url" content="https://api.github.com/_private/browser/errors"> <link rel="mask-icon" href="https://github.githubassets.com/assets/pinned-octocat-093da3e6fa40.svg" color="#000000"> <link rel="alternate icon" class="js-site-favicon" type="image/png" href="https://github.githubassets.com/favicons/favicon.png"> <link rel="icon" class="js-site-favicon" type="image/svg+xml" href="https://github.githubassets.com/favicons/favicon.svg" data-base-href="https://github.githubassets.com/favicons/favicon"> <meta name="theme-color" content="#1e2327"> <meta name="color-scheme" content="light dark" /> <link rel="manifest" href="/manifest.json" crossOrigin="use-credentials"> </head> <body class="logged-out env-production page-responsive" style="word-wrap: break-word;"> <div data-turbo-body class="logged-out env-production page-responsive" style="word-wrap: break-word;"> <div class="position-relative header-wrapper js-header-wrapper "> <a href="#start-of-content" data-skip-target-assigned="false" class="px-2 py-4 color-bg-accent-emphasis color-fg-on-emphasis show-on-focus js-skip-to-content">Skip to content</a> <span data-view-component="true" class="progress-pjax-loader Progress position-fixed width-full"> <span style="width: 0%;" data-view-component="true" class="Progress-item progress-pjax-loader-bar left-0 top-0 color-bg-accent-emphasis"></span> </span> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/ui_packages_ui-commands_ui-commands_ts-d25fac54a6bc.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/keyboard-shortcuts-dialog-ed30662f9578.js"></script> <link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/primer-react.9fa170e9435ed4b922b9.module.css" /> <react-partial partial-name="keyboard-shortcuts-dialog" data-ssr="false" data-attempted-ssr="false" > <script type="application/json" data-target="react-partial.embeddedData">{"props":{"docsUrl":"https://docs.github.com/get-started/accessibility/keyboard-shortcuts"}}</script> <div data-target="react-partial.reactRoot"></div> </react-partial> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_github_remote-form_dist_index_js-node_modules_delegated-events_dist_inde-94fd67-cf3dd69d89eb.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/sessions-8fa3b694f335.js"></script> <header class="HeaderMktg header-logged-out js-details-container js-header Details f4 py-3" role="banner" data-is-top="true" data-color-mode=light data-light-theme=light data-dark-theme=dark> <h2 class="sr-only">Navigation Menu</h2> <button type="button" class="HeaderMktg-backdrop d-lg-none border-0 position-fixed top-0 left-0 width-full height-full js-details-target" aria-label="Toggle navigation"> <span class="d-none">Toggle navigation</span> </button> <div class="d-flex flex-column flex-lg-row flex-items-center px-3 px-md-4 px-lg-5 height-full position-relative z-1"> <div class="d-flex flex-justify-between flex-items-center width-full width-lg-auto"> <div class="flex-1"> <button aria-label="Toggle navigation" aria-expanded="false" type="button" data-view-component="true" class="js-details-target js-nav-padding-recalculate js-header-menu-toggle Button--link Button--medium Button d-lg-none color-fg-inherit p-1"> <span class="Button-content"> <span class="Button-label"><div class="HeaderMenu-toggle-bar rounded my-1"></div> <div class="HeaderMenu-toggle-bar rounded my-1"></div> <div class="HeaderMenu-toggle-bar rounded my-1"></div></span> </span> </button> </div> <a class="mr-lg-3 color-fg-inherit flex-order-2 js-prevent-focus-on-mobile-nav" href="/" aria-label="Homepage" data-analytics-event="{"category":"Marketing nav","action":"click to go to homepage","label":"ref_page:Marketing;ref_cta:Logomark;ref_loc:Header"}"> <svg height="32" aria-hidden="true" viewBox="0 0 24 24" version="1.1" width="32" data-view-component="true" class="octicon octicon-mark-github"> <path d="M12.5.75C6.146.75 1 5.896 1 12.25c0 5.089 3.292 9.387 7.863 10.91.575.101.79-.244.79-.546 0-.273-.014-1.178-.014-2.142-2.889.532-3.636-.704-3.866-1.35-.13-.331-.69-1.352-1.18-1.625-.402-.216-.977-.748-.014-.762.906-.014 1.553.834 1.769 1.179 1.035 1.74 2.688 1.25 3.349.948.1-.747.402-1.25.733-1.538-2.559-.287-5.232-1.279-5.232-5.678 0-1.25.445-2.285 1.178-3.09-.115-.288-.517-1.467.115-3.048 0 0 .963-.302 3.163 1.179.92-.259 1.897-.388 2.875-.388.977 0 1.955.13 2.875.388 2.2-1.495 3.162-1.179 3.162-1.179.633 1.581.23 2.76.115 3.048.733.805 1.179 1.825 1.179 3.09 0 4.413-2.688 5.39-5.247 5.678.417.36.776 1.05.776 2.128 0 1.538-.014 2.774-.014 3.162 0 .302.216.662.79.547C20.709 21.637 24 17.324 24 12.25 24 5.896 18.854.75 12.5.75Z"></path> </svg> </a> <div class="flex-1 flex-order-2 text-right"> <a href="/login?return_to=https%3A%2F%2Fgithub.com%2Fgocode1702%2Fheadless-gatsby-multilang" class="HeaderMenu-link HeaderMenu-button d-inline-flex d-lg-none flex-order-1 f5 no-underline border color-border-default rounded-2 px-2 py-1 color-fg-inherit js-prevent-focus-on-mobile-nav" data-hydro-click="{"event_type":"authentication.click","payload":{"location_in_page":"site header menu","repository_id":null,"auth_type":"SIGN_UP","originating_url":"https://github.com/gocode1702/headless-gatsby-multilang","user_id":null}}" data-hydro-click-hmac="19951f9050e0cea4ceab7a2097cbfa0099b9c1cf04972e143e5a6e9f72c99d8d" data-analytics-event="{"category":"Marketing nav","action":"click to Sign in","label":"ref_page:Marketing;ref_cta:Sign in;ref_loc:Header"}" > Sign in </a> </div> </div> <div class="HeaderMenu js-header-menu height-fit position-lg-relative d-lg-flex flex-column flex-auto top-0"> <div class="HeaderMenu-wrapper d-flex flex-column flex-self-start flex-lg-row flex-auto rounded rounded-lg-0"> <nav class="HeaderMenu-nav" aria-label="Global"> <ul class="d-lg-flex list-style-none"> <li class="HeaderMenu-item position-relative flex-wrap flex-justify-between flex-items-center d-block d-lg-flex flex-lg-nowrap flex-lg-items-center js-details-container js-header-menu-item"> <button type="button" class="HeaderMenu-link border-0 width-full width-lg-auto px-0 px-lg-2 py-lg-2 no-wrap d-flex flex-items-center flex-justify-between js-details-target" aria-expanded="false"> Product <svg opacity="0.5" aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-chevron-down HeaderMenu-icon ml-1"> <path d="M12.78 5.22a.749.749 0 0 1 0 1.06l-4.25 4.25a.749.749 0 0 1-1.06 0L3.22 6.28a.749.749 0 1 1 1.06-1.06L8 8.939l3.72-3.719a.749.749 0 0 1 1.06 0Z"></path> </svg> </button> <div class="HeaderMenu-dropdown dropdown-menu rounded m-0 p-0 pt-2 pt-lg-4 position-relative position-lg-absolute left-0 left-lg-n3 pb-2 pb-lg-4 d-lg-flex flex-wrap dropdown-menu-wide"> <div class="HeaderMenu-column px-lg-4 border-lg-right mb-4 mb-lg-0 pr-lg-7"> <div class="border-bottom pb-3 pb-lg-0 border-lg-bottom-0"> <ul class="list-style-none f5" > <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary d-flex flex-items-center Link--has-description pb-lg-3" data-analytics-event="{"location":"navbar","action":"github_copilot","context":"product","tag":"link","label":"github_copilot_link_product_navbar"}" href="https://github.com/features/copilot"> <svg aria-hidden="true" height="24" viewBox="0 0 24 24" version="1.1" width="24" data-view-component="true" class="octicon octicon-copilot color-fg-subtle mr-3"> <path d="M23.922 16.992c-.861 1.495-5.859 5.023-11.922 5.023-6.063 0-11.061-3.528-11.922-5.023A.641.641 0 0 1 0 16.736v-2.869a.841.841 0 0 1 .053-.22c.372-.935 1.347-2.292 2.605-2.656.167-.429.414-1.055.644-1.517a10.195 10.195 0 0 1-.052-1.086c0-1.331.282-2.499 1.132-3.368.397-.406.89-.717 1.474-.952 1.399-1.136 3.392-2.093 6.122-2.093 2.731 0 4.767.957 6.166 2.093.584.235 1.077.546 1.474.952.85.869 1.132 2.037 1.132 3.368 0 .368-.014.733-.052 1.086.23.462.477 1.088.644 1.517 1.258.364 2.233 1.721 2.605 2.656a.832.832 0 0 1 .053.22v2.869a.641.641 0 0 1-.078.256ZM12.172 11h-.344a4.323 4.323 0 0 1-.355.508C10.703 12.455 9.555 13 7.965 13c-1.725 0-2.989-.359-3.782-1.259a2.005 2.005 0 0 1-.085-.104L4 11.741v6.585c1.435.779 4.514 2.179 8 2.179 3.486 0 6.565-1.4 8-2.179v-6.585l-.098-.104s-.033.045-.085.104c-.793.9-2.057 1.259-3.782 1.259-1.59 0-2.738-.545-3.508-1.492a4.323 4.323 0 0 1-.355-.508h-.016.016Zm.641-2.935c.136 1.057.403 1.913.878 2.497.442.544 1.134.938 2.344.938 1.573 0 2.292-.337 2.657-.751.384-.435.558-1.15.558-2.361 0-1.14-.243-1.847-.705-2.319-.477-.488-1.319-.862-2.824-1.025-1.487-.161-2.192.138-2.533.529-.269.307-.437.808-.438 1.578v.021c0 .265.021.562.063.893Zm-1.626 0c.042-.331.063-.628.063-.894v-.02c-.001-.77-.169-1.271-.438-1.578-.341-.391-1.046-.69-2.533-.529-1.505.163-2.347.537-2.824 1.025-.462.472-.705 1.179-.705 2.319 0 1.211.175 1.926.558 2.361.365.414 1.084.751 2.657.751 1.21 0 1.902-.394 2.344-.938.475-.584.742-1.44.878-2.497Z"></path><path d="M14.5 14.25a1 1 0 0 1 1 1v2a1 1 0 0 1-2 0v-2a1 1 0 0 1 1-1Zm-5 0a1 1 0 0 1 1 1v2a1 1 0 0 1-2 0v-2a1 1 0 0 1 1-1Z"></path> </svg> <div> <div class="color-fg-default h4">GitHub Copilot</div> Write better code with AI </div> </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary d-flex flex-items-center Link--has-description pb-lg-3" data-analytics-event="{"location":"navbar","action":"security","context":"product","tag":"link","label":"security_link_product_navbar"}" href="https://github.com/features/security"> <svg aria-hidden="true" height="24" viewBox="0 0 24 24" version="1.1" width="24" data-view-component="true" class="octicon octicon-shield-check color-fg-subtle mr-3"> <path d="M16.53 9.78a.75.75 0 0 0-1.06-1.06L11 13.19l-1.97-1.97a.75.75 0 0 0-1.06 1.06l2.5 2.5a.75.75 0 0 0 1.06 0l5-5Z"></path><path d="m12.54.637 8.25 2.675A1.75 1.75 0 0 1 22 4.976V10c0 6.19-3.771 10.704-9.401 12.83a1.704 1.704 0 0 1-1.198 0C5.77 20.705 2 16.19 2 10V4.976c0-.758.489-1.43 1.21-1.664L11.46.637a1.748 1.748 0 0 1 1.08 0Zm-.617 1.426-8.25 2.676a.249.249 0 0 0-.173.237V10c0 5.46 3.28 9.483 8.43 11.426a.199.199 0 0 0 .14 0C17.22 19.483 20.5 15.461 20.5 10V4.976a.25.25 0 0 0-.173-.237l-8.25-2.676a.253.253 0 0 0-.154 0Z"></path> </svg> <div> <div class="color-fg-default h4">Security</div> Find and fix vulnerabilities </div> </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary d-flex flex-items-center Link--has-description pb-lg-3" data-analytics-event="{"location":"navbar","action":"actions","context":"product","tag":"link","label":"actions_link_product_navbar"}" href="https://github.com/features/actions"> <svg aria-hidden="true" height="24" viewBox="0 0 24 24" version="1.1" width="24" data-view-component="true" class="octicon octicon-workflow color-fg-subtle mr-3"> <path d="M1 3a2 2 0 0 1 2-2h6.5a2 2 0 0 1 2 2v6.5a2 2 0 0 1-2 2H7v4.063C7 16.355 7.644 17 8.438 17H12.5v-2.5a2 2 0 0 1 2-2H21a2 2 0 0 1 2 2V21a2 2 0 0 1-2 2h-6.5a2 2 0 0 1-2-2v-2.5H8.437A2.939 2.939 0 0 1 5.5 15.562V11.5H3a2 2 0 0 1-2-2Zm2-.5a.5.5 0 0 0-.5.5v6.5a.5.5 0 0 0 .5.5h6.5a.5.5 0 0 0 .5-.5V3a.5.5 0 0 0-.5-.5ZM14.5 14a.5.5 0 0 0-.5.5V21a.5.5 0 0 0 .5.5H21a.5.5 0 0 0 .5-.5v-6.5a.5.5 0 0 0-.5-.5Z"></path> </svg> <div> <div class="color-fg-default h4">Actions</div> Automate any workflow </div> </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary d-flex flex-items-center Link--has-description pb-lg-3" data-analytics-event="{"location":"navbar","action":"codespaces","context":"product","tag":"link","label":"codespaces_link_product_navbar"}" href="https://github.com/features/codespaces"> <svg aria-hidden="true" height="24" viewBox="0 0 24 24" version="1.1" width="24" data-view-component="true" class="octicon octicon-codespaces color-fg-subtle mr-3"> <path d="M3.5 3.75C3.5 2.784 4.284 2 5.25 2h13.5c.966 0 1.75.784 1.75 1.75v7.5A1.75 1.75 0 0 1 18.75 13H5.25a1.75 1.75 0 0 1-1.75-1.75Zm-2 12c0-.966.784-1.75 1.75-1.75h17.5c.966 0 1.75.784 1.75 1.75v4a1.75 1.75 0 0 1-1.75 1.75H3.25a1.75 1.75 0 0 1-1.75-1.75ZM5.25 3.5a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h13.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Zm-2 12a.25.25 0 0 0-.25.25v4c0 .138.112.25.25.25h17.5a.25.25 0 0 0 .25-.25v-4a.25.25 0 0 0-.25-.25Z"></path><path d="M10 17.75a.75.75 0 0 1 .75-.75h6.5a.75.75 0 0 1 0 1.5h-6.5a.75.75 0 0 1-.75-.75Zm-4 0a.75.75 0 0 1 .75-.75h.5a.75.75 0 0 1 0 1.5h-.5a.75.75 0 0 1-.75-.75Z"></path> </svg> <div> <div class="color-fg-default h4">Codespaces</div> Instant dev environments </div> </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary d-flex flex-items-center Link--has-description pb-lg-3" data-analytics-event="{"location":"navbar","action":"issues","context":"product","tag":"link","label":"issues_link_product_navbar"}" href="https://github.com/features/issues"> <svg aria-hidden="true" height="24" viewBox="0 0 24 24" version="1.1" width="24" data-view-component="true" class="octicon octicon-issue-opened color-fg-subtle mr-3"> <path d="M12 1c6.075 0 11 4.925 11 11s-4.925 11-11 11S1 18.075 1 12 5.925 1 12 1ZM2.5 12a9.5 9.5 0 0 0 9.5 9.5 9.5 9.5 0 0 0 9.5-9.5A9.5 9.5 0 0 0 12 2.5 9.5 9.5 0 0 0 2.5 12Zm9.5 2a2 2 0 1 1-.001-3.999A2 2 0 0 1 12 14Z"></path> </svg> <div> <div class="color-fg-default h4">Issues</div> Plan and track work </div> </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary d-flex flex-items-center Link--has-description pb-lg-3" data-analytics-event="{"location":"navbar","action":"code_review","context":"product","tag":"link","label":"code_review_link_product_navbar"}" href="https://github.com/features/code-review"> <svg aria-hidden="true" height="24" viewBox="0 0 24 24" version="1.1" width="24" data-view-component="true" class="octicon octicon-code-review color-fg-subtle mr-3"> <path d="M10.3 6.74a.75.75 0 0 1-.04 1.06l-2.908 2.7 2.908 2.7a.75.75 0 1 1-1.02 1.1l-3.5-3.25a.75.75 0 0 1 0-1.1l3.5-3.25a.75.75 0 0 1 1.06.04Zm3.44 1.06a.75.75 0 1 1 1.02-1.1l3.5 3.25a.75.75 0 0 1 0 1.1l-3.5 3.25a.75.75 0 1 1-1.02-1.1l2.908-2.7-2.908-2.7Z"></path><path d="M1.5 4.25c0-.966.784-1.75 1.75-1.75h17.5c.966 0 1.75.784 1.75 1.75v12.5a1.75 1.75 0 0 1-1.75 1.75h-9.69l-3.573 3.573A1.458 1.458 0 0 1 5 21.043V18.5H3.25a1.75 1.75 0 0 1-1.75-1.75ZM3.25 4a.25.25 0 0 0-.25.25v12.5c0 .138.112.25.25.25h2.5a.75.75 0 0 1 .75.75v3.19l3.72-3.72a.749.749 0 0 1 .53-.22h10a.25.25 0 0 0 .25-.25V4.25a.25.25 0 0 0-.25-.25Z"></path> </svg> <div> <div class="color-fg-default h4">Code Review</div> Manage code changes </div> </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary d-flex flex-items-center Link--has-description pb-lg-3" data-analytics-event="{"location":"navbar","action":"discussions","context":"product","tag":"link","label":"discussions_link_product_navbar"}" href="https://github.com/features/discussions"> <svg aria-hidden="true" height="24" viewBox="0 0 24 24" version="1.1" width="24" data-view-component="true" class="octicon octicon-comment-discussion color-fg-subtle mr-3"> <path d="M1.75 1h12.5c.966 0 1.75.784 1.75 1.75v9.5A1.75 1.75 0 0 1 14.25 14H8.061l-2.574 2.573A1.458 1.458 0 0 1 3 15.543V14H1.75A1.75 1.75 0 0 1 0 12.25v-9.5C0 1.784.784 1 1.75 1ZM1.5 2.75v9.5c0 .138.112.25.25.25h2a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h6.5a.25.25 0 0 0 .25-.25v-9.5a.25.25 0 0 0-.25-.25H1.75a.25.25 0 0 0-.25.25Z"></path><path d="M22.5 8.75a.25.25 0 0 0-.25-.25h-3.5a.75.75 0 0 1 0-1.5h3.5c.966 0 1.75.784 1.75 1.75v9.5A1.75 1.75 0 0 1 22.25 20H21v1.543a1.457 1.457 0 0 1-2.487 1.03L15.939 20H10.75A1.75 1.75 0 0 1 9 18.25v-1.465a.75.75 0 0 1 1.5 0v1.465c0 .138.112.25.25.25h5.5a.75.75 0 0 1 .53.22l2.72 2.72v-2.19a.75.75 0 0 1 .75-.75h2a.25.25 0 0 0 .25-.25v-9.5Z"></path> </svg> <div> <div class="color-fg-default h4">Discussions</div> Collaborate outside of code </div> </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary d-flex flex-items-center Link--has-description" data-analytics-event="{"location":"navbar","action":"code_search","context":"product","tag":"link","label":"code_search_link_product_navbar"}" href="https://github.com/features/code-search"> <svg aria-hidden="true" height="24" viewBox="0 0 24 24" version="1.1" width="24" data-view-component="true" class="octicon octicon-code-square color-fg-subtle mr-3"> <path d="M10.3 8.24a.75.75 0 0 1-.04 1.06L7.352 12l2.908 2.7a.75.75 0 1 1-1.02 1.1l-3.5-3.25a.75.75 0 0 1 0-1.1l3.5-3.25a.75.75 0 0 1 1.06.04Zm3.44 1.06a.75.75 0 1 1 1.02-1.1l3.5 3.25a.75.75 0 0 1 0 1.1l-3.5 3.25a.75.75 0 1 1-1.02-1.1l2.908-2.7-2.908-2.7Z"></path><path d="M2 3.75C2 2.784 2.784 2 3.75 2h16.5c.966 0 1.75.784 1.75 1.75v16.5A1.75 1.75 0 0 1 20.25 22H3.75A1.75 1.75 0 0 1 2 20.25Zm1.75-.25a.25.25 0 0 0-.25.25v16.5c0 .138.112.25.25.25h16.5a.25.25 0 0 0 .25-.25V3.75a.25.25 0 0 0-.25-.25Z"></path> </svg> <div> <div class="color-fg-default h4">Code Search</div> Find more, search less </div> </a></li> </ul> </div> </div> <div class="HeaderMenu-column px-lg-4"> <div class="border-bottom pb-3 pb-lg-0 border-lg-bottom-0 border-bottom-0"> <span class="d-block h4 color-fg-default my-1" id="product-explore-heading">Explore</span> <ul class="list-style-none f5" aria-labelledby="product-explore-heading"> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary" data-analytics-event="{"location":"navbar","action":"all_features","context":"product","tag":"link","label":"all_features_link_product_navbar"}" href="https://github.com/features"> All features </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary Link--external" target="_blank" data-analytics-event="{"location":"navbar","action":"documentation","context":"product","tag":"link","label":"documentation_link_product_navbar"}" href="https://docs.github.com"> Documentation <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-link-external HeaderMenu-external-icon color-fg-subtle"> <path d="M3.75 2h3.5a.75.75 0 0 1 0 1.5h-3.5a.25.25 0 0 0-.25.25v8.5c0 .138.112.25.25.25h8.5a.25.25 0 0 0 .25-.25v-3.5a.75.75 0 0 1 1.5 0v3.5A1.75 1.75 0 0 1 12.25 14h-8.5A1.75 1.75 0 0 1 2 12.25v-8.5C2 2.784 2.784 2 3.75 2Zm6.854-1h4.146a.25.25 0 0 1 .25.25v4.146a.25.25 0 0 1-.427.177L13.03 4.03 9.28 7.78a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042l3.75-3.75-1.543-1.543A.25.25 0 0 1 10.604 1Z"></path> </svg> </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary Link--external" target="_blank" data-analytics-event="{"location":"navbar","action":"github_skills","context":"product","tag":"link","label":"github_skills_link_product_navbar"}" href="https://skills.github.com"> GitHub Skills <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-link-external HeaderMenu-external-icon color-fg-subtle"> <path d="M3.75 2h3.5a.75.75 0 0 1 0 1.5h-3.5a.25.25 0 0 0-.25.25v8.5c0 .138.112.25.25.25h8.5a.25.25 0 0 0 .25-.25v-3.5a.75.75 0 0 1 1.5 0v3.5A1.75 1.75 0 0 1 12.25 14h-8.5A1.75 1.75 0 0 1 2 12.25v-8.5C2 2.784 2.784 2 3.75 2Zm6.854-1h4.146a.25.25 0 0 1 .25.25v4.146a.25.25 0 0 1-.427.177L13.03 4.03 9.28 7.78a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042l3.75-3.75-1.543-1.543A.25.25 0 0 1 10.604 1Z"></path> </svg> </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary Link--external" target="_blank" data-analytics-event="{"location":"navbar","action":"blog","context":"product","tag":"link","label":"blog_link_product_navbar"}" href="https://github.blog"> Blog <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-link-external HeaderMenu-external-icon color-fg-subtle"> <path d="M3.75 2h3.5a.75.75 0 0 1 0 1.5h-3.5a.25.25 0 0 0-.25.25v8.5c0 .138.112.25.25.25h8.5a.25.25 0 0 0 .25-.25v-3.5a.75.75 0 0 1 1.5 0v3.5A1.75 1.75 0 0 1 12.25 14h-8.5A1.75 1.75 0 0 1 2 12.25v-8.5C2 2.784 2.784 2 3.75 2Zm6.854-1h4.146a.25.25 0 0 1 .25.25v4.146a.25.25 0 0 1-.427.177L13.03 4.03 9.28 7.78a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042l3.75-3.75-1.543-1.543A.25.25 0 0 1 10.604 1Z"></path> </svg> </a></li> </ul> </div> </div> </div> </li> <li class="HeaderMenu-item position-relative flex-wrap flex-justify-between flex-items-center d-block d-lg-flex flex-lg-nowrap flex-lg-items-center js-details-container js-header-menu-item"> <button type="button" class="HeaderMenu-link border-0 width-full width-lg-auto px-0 px-lg-2 py-lg-2 no-wrap d-flex flex-items-center flex-justify-between js-details-target" aria-expanded="false"> Solutions <svg opacity="0.5" aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-chevron-down HeaderMenu-icon ml-1"> <path d="M12.78 5.22a.749.749 0 0 1 0 1.06l-4.25 4.25a.749.749 0 0 1-1.06 0L3.22 6.28a.749.749 0 1 1 1.06-1.06L8 8.939l3.72-3.719a.749.749 0 0 1 1.06 0Z"></path> </svg> </button> <div class="HeaderMenu-dropdown dropdown-menu rounded m-0 p-0 pt-2 pt-lg-4 position-relative position-lg-absolute left-0 left-lg-n3 d-lg-flex flex-wrap dropdown-menu-wide"> <div class="HeaderMenu-column px-lg-4 border-lg-right mb-4 mb-lg-0 pr-lg-7"> <div class="border-bottom pb-3 pb-lg-0 border-lg-bottom-0 pb-lg-3 mb-3 mb-lg-0"> <span class="d-block h4 color-fg-default my-1" id="solutions-by-company-size-heading">By company size</span> <ul class="list-style-none f5" aria-labelledby="solutions-by-company-size-heading"> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary" data-analytics-event="{"location":"navbar","action":"enterprises","context":"solutions","tag":"link","label":"enterprises_link_solutions_navbar"}" href="https://github.com/enterprise"> Enterprises </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary" data-analytics-event="{"location":"navbar","action":"small_and_medium_teams","context":"solutions","tag":"link","label":"small_and_medium_teams_link_solutions_navbar"}" href="https://github.com/team"> Small and medium teams </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary" data-analytics-event="{"location":"navbar","action":"startups","context":"solutions","tag":"link","label":"startups_link_solutions_navbar"}" href="https://github.com/enterprise/startups"> Startups </a></li> </ul> </div> <div class="border-bottom pb-3 pb-lg-0 border-lg-bottom-0"> <span class="d-block h4 color-fg-default my-1" id="solutions-by-use-case-heading">By use case</span> <ul class="list-style-none f5" aria-labelledby="solutions-by-use-case-heading"> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary" data-analytics-event="{"location":"navbar","action":"devsecops","context":"solutions","tag":"link","label":"devsecops_link_solutions_navbar"}" href="/solutions/use-case/devsecops"> DevSecOps </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary" data-analytics-event="{"location":"navbar","action":"devops","context":"solutions","tag":"link","label":"devops_link_solutions_navbar"}" href="/solutions/use-case/devops"> DevOps </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary" data-analytics-event="{"location":"navbar","action":"ci_cd","context":"solutions","tag":"link","label":"ci_cd_link_solutions_navbar"}" href="/solutions/use-case/ci-cd"> CI/CD </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary" data-analytics-event="{"location":"navbar","action":"view_all_use_cases","context":"solutions","tag":"link","label":"view_all_use_cases_link_solutions_navbar"}" href="/solutions/use-case"> View all use cases </a></li> </ul> </div> </div> <div class="HeaderMenu-column px-lg-4"> <div class="border-bottom pb-3 pb-lg-0 border-lg-bottom-0"> <span class="d-block h4 color-fg-default my-1" id="solutions-by-industry-heading">By industry</span> <ul class="list-style-none f5" aria-labelledby="solutions-by-industry-heading"> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary" data-analytics-event="{"location":"navbar","action":"healthcare","context":"solutions","tag":"link","label":"healthcare_link_solutions_navbar"}" href="/solutions/industry/healthcare"> Healthcare </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary" data-analytics-event="{"location":"navbar","action":"financial_services","context":"solutions","tag":"link","label":"financial_services_link_solutions_navbar"}" href="/solutions/industry/financial-services"> Financial services </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary" data-analytics-event="{"location":"navbar","action":"manufacturing","context":"solutions","tag":"link","label":"manufacturing_link_solutions_navbar"}" href="/solutions/industry/manufacturing"> Manufacturing </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary" data-analytics-event="{"location":"navbar","action":"government","context":"solutions","tag":"link","label":"government_link_solutions_navbar"}" href="/solutions/industry/government"> Government </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary" data-analytics-event="{"location":"navbar","action":"view_all_industries","context":"solutions","tag":"link","label":"view_all_industries_link_solutions_navbar"}" href="/solutions/industry"> View all industries </a></li> </ul> </div> </div> <div class="HeaderMenu-trailing-link rounded-bottom-2 flex-shrink-0 mt-lg-4 px-lg-4 py-4 py-lg-3 f5 text-semibold"> <a href="/solutions"> View all solutions <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-chevron-right HeaderMenu-trailing-link-icon"> <path d="M6.22 3.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L9.94 8 6.22 4.28a.75.75 0 0 1 0-1.06Z"></path> </svg> </a> </div> </div> </li> <li class="HeaderMenu-item position-relative flex-wrap flex-justify-between flex-items-center d-block d-lg-flex flex-lg-nowrap flex-lg-items-center js-details-container js-header-menu-item"> <button type="button" class="HeaderMenu-link border-0 width-full width-lg-auto px-0 px-lg-2 py-lg-2 no-wrap d-flex flex-items-center flex-justify-between js-details-target" aria-expanded="false"> Resources <svg opacity="0.5" aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-chevron-down HeaderMenu-icon ml-1"> <path d="M12.78 5.22a.749.749 0 0 1 0 1.06l-4.25 4.25a.749.749 0 0 1-1.06 0L3.22 6.28a.749.749 0 1 1 1.06-1.06L8 8.939l3.72-3.719a.749.749 0 0 1 1.06 0Z"></path> </svg> </button> <div class="HeaderMenu-dropdown dropdown-menu rounded m-0 p-0 pt-2 pt-lg-4 position-relative position-lg-absolute left-0 left-lg-n3 pb-2 pb-lg-4 d-lg-flex flex-wrap dropdown-menu-wide"> <div class="HeaderMenu-column px-lg-4 border-lg-right mb-4 mb-lg-0 pr-lg-7"> <div class="border-bottom pb-3 pb-lg-0 border-lg-bottom-0"> <span class="d-block h4 color-fg-default my-1" id="resources-topics-heading">Topics</span> <ul class="list-style-none f5" aria-labelledby="resources-topics-heading"> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary" data-analytics-event="{"location":"navbar","action":"ai","context":"resources","tag":"link","label":"ai_link_resources_navbar"}" href="/resources/articles/ai"> AI </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary" data-analytics-event="{"location":"navbar","action":"devops","context":"resources","tag":"link","label":"devops_link_resources_navbar"}" href="/resources/articles/devops"> DevOps </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary" data-analytics-event="{"location":"navbar","action":"security","context":"resources","tag":"link","label":"security_link_resources_navbar"}" href="/resources/articles/security"> Security </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary" data-analytics-event="{"location":"navbar","action":"software_development","context":"resources","tag":"link","label":"software_development_link_resources_navbar"}" href="/resources/articles/software-development"> Software Development </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary" data-analytics-event="{"location":"navbar","action":"view_all","context":"resources","tag":"link","label":"view_all_link_resources_navbar"}" href="/resources/articles"> View all </a></li> </ul> </div> </div> <div class="HeaderMenu-column px-lg-4"> <div class="border-bottom pb-3 pb-lg-0 border-lg-bottom-0 border-bottom-0"> <span class="d-block h4 color-fg-default my-1" id="resources-explore-heading">Explore</span> <ul class="list-style-none f5" aria-labelledby="resources-explore-heading"> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary Link--external" target="_blank" data-analytics-event="{"location":"navbar","action":"learning_pathways","context":"resources","tag":"link","label":"learning_pathways_link_resources_navbar"}" href="https://resources.github.com/learn/pathways"> Learning Pathways <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-link-external HeaderMenu-external-icon color-fg-subtle"> <path d="M3.75 2h3.5a.75.75 0 0 1 0 1.5h-3.5a.25.25 0 0 0-.25.25v8.5c0 .138.112.25.25.25h8.5a.25.25 0 0 0 .25-.25v-3.5a.75.75 0 0 1 1.5 0v3.5A1.75 1.75 0 0 1 12.25 14h-8.5A1.75 1.75 0 0 1 2 12.25v-8.5C2 2.784 2.784 2 3.75 2Zm6.854-1h4.146a.25.25 0 0 1 .25.25v4.146a.25.25 0 0 1-.427.177L13.03 4.03 9.28 7.78a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042l3.75-3.75-1.543-1.543A.25.25 0 0 1 10.604 1Z"></path> </svg> </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary Link--external" target="_blank" data-analytics-event="{"location":"navbar","action":"white_papers_ebooks_webinars","context":"resources","tag":"link","label":"white_papers_ebooks_webinars_link_resources_navbar"}" href="https://resources.github.com"> White papers, Ebooks, Webinars <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-link-external HeaderMenu-external-icon color-fg-subtle"> <path d="M3.75 2h3.5a.75.75 0 0 1 0 1.5h-3.5a.25.25 0 0 0-.25.25v8.5c0 .138.112.25.25.25h8.5a.25.25 0 0 0 .25-.25v-3.5a.75.75 0 0 1 1.5 0v3.5A1.75 1.75 0 0 1 12.25 14h-8.5A1.75 1.75 0 0 1 2 12.25v-8.5C2 2.784 2.784 2 3.75 2Zm6.854-1h4.146a.25.25 0 0 1 .25.25v4.146a.25.25 0 0 1-.427.177L13.03 4.03 9.28 7.78a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042l3.75-3.75-1.543-1.543A.25.25 0 0 1 10.604 1Z"></path> </svg> </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary" data-analytics-event="{"location":"navbar","action":"customer_stories","context":"resources","tag":"link","label":"customer_stories_link_resources_navbar"}" href="https://github.com/customer-stories"> Customer Stories </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary Link--external" target="_blank" data-analytics-event="{"location":"navbar","action":"partners","context":"resources","tag":"link","label":"partners_link_resources_navbar"}" href="https://partner.github.com"> Partners <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-link-external HeaderMenu-external-icon color-fg-subtle"> <path d="M3.75 2h3.5a.75.75 0 0 1 0 1.5h-3.5a.25.25 0 0 0-.25.25v8.5c0 .138.112.25.25.25h8.5a.25.25 0 0 0 .25-.25v-3.5a.75.75 0 0 1 1.5 0v3.5A1.75 1.75 0 0 1 12.25 14h-8.5A1.75 1.75 0 0 1 2 12.25v-8.5C2 2.784 2.784 2 3.75 2Zm6.854-1h4.146a.25.25 0 0 1 .25.25v4.146a.25.25 0 0 1-.427.177L13.03 4.03 9.28 7.78a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042l3.75-3.75-1.543-1.543A.25.25 0 0 1 10.604 1Z"></path> </svg> </a></li> </ul> </div> </div> </div> </li> <li class="HeaderMenu-item position-relative flex-wrap flex-justify-between flex-items-center d-block d-lg-flex flex-lg-nowrap flex-lg-items-center js-details-container js-header-menu-item"> <button type="button" class="HeaderMenu-link border-0 width-full width-lg-auto px-0 px-lg-2 py-lg-2 no-wrap d-flex flex-items-center flex-justify-between js-details-target" aria-expanded="false"> Open Source <svg opacity="0.5" aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-chevron-down HeaderMenu-icon ml-1"> <path d="M12.78 5.22a.749.749 0 0 1 0 1.06l-4.25 4.25a.749.749 0 0 1-1.06 0L3.22 6.28a.749.749 0 1 1 1.06-1.06L8 8.939l3.72-3.719a.749.749 0 0 1 1.06 0Z"></path> </svg> </button> <div class="HeaderMenu-dropdown dropdown-menu rounded m-0 p-0 pt-2 pt-lg-4 position-relative position-lg-absolute left-0 left-lg-n3 pb-2 pb-lg-4 px-lg-4"> <div class="HeaderMenu-column"> <div class="border-bottom pb-3 pb-lg-0 pb-lg-3 mb-3 mb-lg-0 mb-lg-3"> <ul class="list-style-none f5" > <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary d-flex flex-items-center Link--has-description" data-analytics-event="{"location":"navbar","action":"github_sponsors","context":"open_source","tag":"link","label":"github_sponsors_link_open_source_navbar"}" href="/sponsors"> <div> <div class="color-fg-default h4">GitHub Sponsors</div> Fund open source developers </div> </a></li> </ul> </div> <div class="border-bottom pb-3 pb-lg-0 pb-lg-3 mb-3 mb-lg-0 mb-lg-3"> <ul class="list-style-none f5" > <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary d-flex flex-items-center Link--has-description" data-analytics-event="{"location":"navbar","action":"the_readme_project","context":"open_source","tag":"link","label":"the_readme_project_link_open_source_navbar"}" href="https://github.com/readme"> <div> <div class="color-fg-default h4">The ReadME Project</div> GitHub community articles </div> </a></li> </ul> </div> <div class="border-bottom pb-3 pb-lg-0 border-bottom-0"> <span class="d-block h4 color-fg-default my-1" id="open-source-repositories-heading">Repositories</span> <ul class="list-style-none f5" aria-labelledby="open-source-repositories-heading"> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary" data-analytics-event="{"location":"navbar","action":"topics","context":"open_source","tag":"link","label":"topics_link_open_source_navbar"}" href="https://github.com/topics"> Topics </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary" data-analytics-event="{"location":"navbar","action":"trending","context":"open_source","tag":"link","label":"trending_link_open_source_navbar"}" href="https://github.com/trending"> Trending </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary" data-analytics-event="{"location":"navbar","action":"collections","context":"open_source","tag":"link","label":"collections_link_open_source_navbar"}" href="https://github.com/collections"> Collections </a></li> </ul> </div> </div> </div> </li> <li class="HeaderMenu-item position-relative flex-wrap flex-justify-between flex-items-center d-block d-lg-flex flex-lg-nowrap flex-lg-items-center js-details-container js-header-menu-item"> <button type="button" class="HeaderMenu-link border-0 width-full width-lg-auto px-0 px-lg-2 py-lg-2 no-wrap d-flex flex-items-center flex-justify-between js-details-target" aria-expanded="false"> Enterprise <svg opacity="0.5" aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-chevron-down HeaderMenu-icon ml-1"> <path d="M12.78 5.22a.749.749 0 0 1 0 1.06l-4.25 4.25a.749.749 0 0 1-1.06 0L3.22 6.28a.749.749 0 1 1 1.06-1.06L8 8.939l3.72-3.719a.749.749 0 0 1 1.06 0Z"></path> </svg> </button> <div class="HeaderMenu-dropdown dropdown-menu rounded m-0 p-0 pt-2 pt-lg-4 position-relative position-lg-absolute left-0 left-lg-n3 pb-2 pb-lg-4 px-lg-4"> <div class="HeaderMenu-column"> <div class="border-bottom pb-3 pb-lg-0 pb-lg-3 mb-3 mb-lg-0 mb-lg-3"> <ul class="list-style-none f5" > <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary d-flex flex-items-center Link--has-description" data-analytics-event="{"location":"navbar","action":"enterprise_platform","context":"enterprise","tag":"link","label":"enterprise_platform_link_enterprise_navbar"}" href="/enterprise"> <svg aria-hidden="true" height="24" viewBox="0 0 24 24" version="1.1" width="24" data-view-component="true" class="octicon octicon-stack color-fg-subtle mr-3"> <path d="M11.063 1.456a1.749 1.749 0 0 1 1.874 0l8.383 5.316a1.751 1.751 0 0 1 0 2.956l-8.383 5.316a1.749 1.749 0 0 1-1.874 0L2.68 9.728a1.751 1.751 0 0 1 0-2.956Zm1.071 1.267a.25.25 0 0 0-.268 0L3.483 8.039a.25.25 0 0 0 0 .422l8.383 5.316a.25.25 0 0 0 .268 0l8.383-5.316a.25.25 0 0 0 0-.422Z"></path><path d="M1.867 12.324a.75.75 0 0 1 1.035-.232l8.964 5.685a.25.25 0 0 0 .268 0l8.964-5.685a.75.75 0 0 1 .804 1.267l-8.965 5.685a1.749 1.749 0 0 1-1.874 0l-8.965-5.685a.75.75 0 0 1-.231-1.035Z"></path><path d="M1.867 16.324a.75.75 0 0 1 1.035-.232l8.964 5.685a.25.25 0 0 0 .268 0l8.964-5.685a.75.75 0 0 1 .804 1.267l-8.965 5.685a1.749 1.749 0 0 1-1.874 0l-8.965-5.685a.75.75 0 0 1-.231-1.035Z"></path> </svg> <div> <div class="color-fg-default h4">Enterprise platform</div> AI-powered developer platform </div> </a></li> </ul> </div> <div class="border-bottom pb-3 pb-lg-0 border-bottom-0"> <span class="d-block h4 color-fg-default my-1" id="enterprise-available-add-ons-heading">Available add-ons</span> <ul class="list-style-none f5" aria-labelledby="enterprise-available-add-ons-heading"> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary d-flex flex-items-center Link--has-description pb-lg-3" data-analytics-event="{"location":"navbar","action":"advanced_security","context":"enterprise","tag":"link","label":"advanced_security_link_enterprise_navbar"}" href="https://github.com/enterprise/advanced-security"> <svg aria-hidden="true" height="24" viewBox="0 0 24 24" version="1.1" width="24" data-view-component="true" class="octicon octicon-shield-check color-fg-subtle mr-3"> <path d="M16.53 9.78a.75.75 0 0 0-1.06-1.06L11 13.19l-1.97-1.97a.75.75 0 0 0-1.06 1.06l2.5 2.5a.75.75 0 0 0 1.06 0l5-5Z"></path><path d="m12.54.637 8.25 2.675A1.75 1.75 0 0 1 22 4.976V10c0 6.19-3.771 10.704-9.401 12.83a1.704 1.704 0 0 1-1.198 0C5.77 20.705 2 16.19 2 10V4.976c0-.758.489-1.43 1.21-1.664L11.46.637a1.748 1.748 0 0 1 1.08 0Zm-.617 1.426-8.25 2.676a.249.249 0 0 0-.173.237V10c0 5.46 3.28 9.483 8.43 11.426a.199.199 0 0 0 .14 0C17.22 19.483 20.5 15.461 20.5 10V4.976a.25.25 0 0 0-.173-.237l-8.25-2.676a.253.253 0 0 0-.154 0Z"></path> </svg> <div> <div class="color-fg-default h4">Advanced Security</div> Enterprise-grade security features </div> </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary d-flex flex-items-center Link--has-description pb-lg-3" data-analytics-event="{"location":"navbar","action":"github_copilot","context":"enterprise","tag":"link","label":"github_copilot_link_enterprise_navbar"}" href="/features/copilot#enterprise"> <svg aria-hidden="true" height="24" viewBox="0 0 24 24" version="1.1" width="24" data-view-component="true" class="octicon octicon-copilot color-fg-subtle mr-3"> <path d="M23.922 16.992c-.861 1.495-5.859 5.023-11.922 5.023-6.063 0-11.061-3.528-11.922-5.023A.641.641 0 0 1 0 16.736v-2.869a.841.841 0 0 1 .053-.22c.372-.935 1.347-2.292 2.605-2.656.167-.429.414-1.055.644-1.517a10.195 10.195 0 0 1-.052-1.086c0-1.331.282-2.499 1.132-3.368.397-.406.89-.717 1.474-.952 1.399-1.136 3.392-2.093 6.122-2.093 2.731 0 4.767.957 6.166 2.093.584.235 1.077.546 1.474.952.85.869 1.132 2.037 1.132 3.368 0 .368-.014.733-.052 1.086.23.462.477 1.088.644 1.517 1.258.364 2.233 1.721 2.605 2.656a.832.832 0 0 1 .053.22v2.869a.641.641 0 0 1-.078.256ZM12.172 11h-.344a4.323 4.323 0 0 1-.355.508C10.703 12.455 9.555 13 7.965 13c-1.725 0-2.989-.359-3.782-1.259a2.005 2.005 0 0 1-.085-.104L4 11.741v6.585c1.435.779 4.514 2.179 8 2.179 3.486 0 6.565-1.4 8-2.179v-6.585l-.098-.104s-.033.045-.085.104c-.793.9-2.057 1.259-3.782 1.259-1.59 0-2.738-.545-3.508-1.492a4.323 4.323 0 0 1-.355-.508h-.016.016Zm.641-2.935c.136 1.057.403 1.913.878 2.497.442.544 1.134.938 2.344.938 1.573 0 2.292-.337 2.657-.751.384-.435.558-1.15.558-2.361 0-1.14-.243-1.847-.705-2.319-.477-.488-1.319-.862-2.824-1.025-1.487-.161-2.192.138-2.533.529-.269.307-.437.808-.438 1.578v.021c0 .265.021.562.063.893Zm-1.626 0c.042-.331.063-.628.063-.894v-.02c-.001-.77-.169-1.271-.438-1.578-.341-.391-1.046-.69-2.533-.529-1.505.163-2.347.537-2.824 1.025-.462.472-.705 1.179-.705 2.319 0 1.211.175 1.926.558 2.361.365.414 1.084.751 2.657.751 1.21 0 1.902-.394 2.344-.938.475-.584.742-1.44.878-2.497Z"></path><path d="M14.5 14.25a1 1 0 0 1 1 1v2a1 1 0 0 1-2 0v-2a1 1 0 0 1 1-1Zm-5 0a1 1 0 0 1 1 1v2a1 1 0 0 1-2 0v-2a1 1 0 0 1 1-1Z"></path> </svg> <div> <div class="color-fg-default h4">GitHub Copilot</div> Enterprise-grade AI features </div> </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary d-flex flex-items-center Link--has-description" data-analytics-event="{"location":"navbar","action":"premium_support","context":"enterprise","tag":"link","label":"premium_support_link_enterprise_navbar"}" href="/premium-support"> <svg aria-hidden="true" height="24" viewBox="0 0 24 24" version="1.1" width="24" data-view-component="true" class="octicon octicon-comment-discussion color-fg-subtle mr-3"> <path d="M1.75 1h12.5c.966 0 1.75.784 1.75 1.75v9.5A1.75 1.75 0 0 1 14.25 14H8.061l-2.574 2.573A1.458 1.458 0 0 1 3 15.543V14H1.75A1.75 1.75 0 0 1 0 12.25v-9.5C0 1.784.784 1 1.75 1ZM1.5 2.75v9.5c0 .138.112.25.25.25h2a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h6.5a.25.25 0 0 0 .25-.25v-9.5a.25.25 0 0 0-.25-.25H1.75a.25.25 0 0 0-.25.25Z"></path><path d="M22.5 8.75a.25.25 0 0 0-.25-.25h-3.5a.75.75 0 0 1 0-1.5h3.5c.966 0 1.75.784 1.75 1.75v9.5A1.75 1.75 0 0 1 22.25 20H21v1.543a1.457 1.457 0 0 1-2.487 1.03L15.939 20H10.75A1.75 1.75 0 0 1 9 18.25v-1.465a.75.75 0 0 1 1.5 0v1.465c0 .138.112.25.25.25h5.5a.75.75 0 0 1 .53.22l2.72 2.72v-2.19a.75.75 0 0 1 .75-.75h2a.25.25 0 0 0 .25-.25v-9.5Z"></path> </svg> <div> <div class="color-fg-default h4">Premium Support</div> Enterprise-grade 24/7 support </div> </a></li> </ul> </div> </div> </div> </li> <li class="HeaderMenu-item position-relative flex-wrap flex-justify-between flex-items-center d-block d-lg-flex flex-lg-nowrap flex-lg-items-center js-details-container js-header-menu-item"> <a class="HeaderMenu-link no-underline px-0 px-lg-2 py-3 py-lg-2 d-block d-lg-inline-block" data-analytics-event="{"location":"navbar","action":"pricing","context":"global","tag":"link","label":"pricing_link_global_navbar"}" href="https://github.com/pricing">Pricing</a> </li> </ul> </nav> <div class="d-flex flex-column flex-lg-row width-full flex-justify-end flex-lg-items-center text-center mt-3 mt-lg-0 text-lg-left ml-lg-3"> <qbsearch-input class="search-input" data-scope="repo:gocode1702/headless-gatsby-multilang" data-custom-scopes-path="/search/custom_scopes" data-delete-custom-scopes-csrf="QEAOi6MoiOp7H0miKo9Wu40ALx29-_1yl0QhpL3cyK9vE0urzTgewebqB8b-eEGRVXM3qFPetJ90AKq5U3BI1g" data-max-custom-scopes="10" data-header-redesign-enabled="false" data-initial-value="" data-blackbird-suggestions-path="/search/suggestions" data-jump-to-suggestions-path="/_graphql/GetSuggestedNavigationDestinations" data-current-repository="gocode1702/headless-gatsby-multilang" data-current-org="" data-current-owner="gocode1702" data-logged-in="false" data-copilot-chat-enabled="false" data-nl-search-enabled="false" data-retain-scroll-position="true"> <div class="search-input-container search-with-dialog position-relative d-flex flex-row flex-items-center mr-4 rounded" data-action="click:qbsearch-input#searchInputContainerClicked" > <button type="button" class="header-search-button placeholder input-button form-control d-flex flex-1 flex-self-stretch flex-items-center no-wrap width-full py-0 pl-2 pr-0 text-left border-0 box-shadow-none" data-target="qbsearch-input.inputButton" aria-label="Search or jump to…" aria-haspopup="dialog" placeholder="Search or jump to..." data-hotkey=s,/ autocapitalize="off" data-analytics-event="{"location":"navbar","action":"searchbar","context":"global","tag":"input","label":"searchbar_input_global_navbar"}" data-action="click:qbsearch-input#handleExpand" > <div class="mr-2 color-fg-muted"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-search"> <path d="M10.68 11.74a6 6 0 0 1-7.922-8.982 6 6 0 0 1 8.982 7.922l3.04 3.04a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215ZM11.5 7a4.499 4.499 0 1 0-8.997 0A4.499 4.499 0 0 0 11.5 7Z"></path> </svg> </div> <span class="flex-1" data-target="qbsearch-input.inputButtonText">Search or jump to...</span> <div class="d-flex" data-target="qbsearch-input.hotkeyIndicator"> <svg xmlns="http://www.w3.org/2000/svg" width="22" height="20" aria-hidden="true" class="mr-1"><path fill="none" stroke="#979A9C" opacity=".4" d="M3.5.5h12c1.7 0 3 1.3 3 3v13c0 1.7-1.3 3-3 3h-12c-1.7 0-3-1.3-3-3v-13c0-1.7 1.3-3 3-3z"></path><path fill="#979A9C" d="M11.8 6L8 15.1h-.9L10.8 6h1z"></path></svg> </div> </button> <input type="hidden" name="type" class="js-site-search-type-field"> <div class="Overlay--hidden " data-modal-dialog-overlay> <modal-dialog data-action="close:qbsearch-input#handleClose cancel:qbsearch-input#handleClose" data-target="qbsearch-input.searchSuggestionsDialog" role="dialog" id="search-suggestions-dialog" aria-modal="true" aria-labelledby="search-suggestions-dialog-header" data-view-component="true" class="Overlay Overlay--width-large Overlay--height-auto"> <h1 id="search-suggestions-dialog-header" class="sr-only">Search code, repositories, users, issues, pull requests...</h1> <div class="Overlay-body Overlay-body--paddingNone"> <div data-view-component="true"> <div class="search-suggestions position-fixed width-full color-shadow-large border color-fg-default color-bg-default overflow-hidden d-flex flex-column query-builder-container" style="border-radius: 12px;" data-target="qbsearch-input.queryBuilderContainer" hidden > <!-- '"` --><!-- </textarea></xmp> --></option></form><form id="query-builder-test-form" action="" accept-charset="UTF-8" method="get"> <query-builder data-target="qbsearch-input.queryBuilder" id="query-builder-query-builder-test" data-filter-key=":" data-view-component="true" class="QueryBuilder search-query-builder"> <div class="FormControl FormControl--fullWidth"> <label id="query-builder-test-label" for="query-builder-test" class="FormControl-label sr-only"> Search </label> <div class="QueryBuilder-StyledInput width-fit " data-target="query-builder.styledInput" > <span id="query-builder-test-leadingvisual-wrap" class="FormControl-input-leadingVisualWrap QueryBuilder-leadingVisualWrap"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-search FormControl-input-leadingVisual"> <path d="M10.68 11.74a6 6 0 0 1-7.922-8.982 6 6 0 0 1 8.982 7.922l3.04 3.04a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215ZM11.5 7a4.499 4.499 0 1 0-8.997 0A4.499 4.499 0 0 0 11.5 7Z"></path> </svg> </span> <div data-target="query-builder.styledInputContainer" class="QueryBuilder-StyledInputContainer"> <div aria-hidden="true" class="QueryBuilder-StyledInputContent" data-target="query-builder.styledInputContent" ></div> <div class="QueryBuilder-InputWrapper"> <div aria-hidden="true" class="QueryBuilder-Sizer" data-target="query-builder.sizer"></div> <input id="query-builder-test" name="query-builder-test" value="" autocomplete="off" type="text" role="combobox" spellcheck="false" aria-expanded="false" aria-describedby="validation-1574523a-6f0d-4989-b952-1e264b1f8d11" data-target="query-builder.input" data-action=" input:query-builder#inputChange blur:query-builder#inputBlur keydown:query-builder#inputKeydown focus:query-builder#inputFocus " data-view-component="true" class="FormControl-input QueryBuilder-Input FormControl-medium" /> </div> </div> <span class="sr-only" id="query-builder-test-clear">Clear</span> <button role="button" id="query-builder-test-clear-button" aria-labelledby="query-builder-test-clear query-builder-test-label" data-target="query-builder.clearButton" data-action=" click:query-builder#clear focus:query-builder#clearButtonFocus blur:query-builder#clearButtonBlur " variant="small" hidden="hidden" type="button" data-view-component="true" class="Button Button--iconOnly Button--invisible Button--medium mr-1 px-2 py-0 d-flex flex-items-center rounded-1 color-fg-muted"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-x-circle-fill Button-visual"> <path d="M2.343 13.657A8 8 0 1 1 13.658 2.343 8 8 0 0 1 2.343 13.657ZM6.03 4.97a.751.751 0 0 0-1.042.018.751.751 0 0 0-.018 1.042L6.94 8 4.97 9.97a.749.749 0 0 0 .326 1.275.749.749 0 0 0 .734-.215L8 9.06l1.97 1.97a.749.749 0 0 0 1.275-.326.749.749 0 0 0-.215-.734L9.06 8l1.97-1.97a.749.749 0 0 0-.326-1.275.749.749 0 0 0-.734.215L8 6.94Z"></path> </svg> </button> </div> <template id="search-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-search"> <path d="M10.68 11.74a6 6 0 0 1-7.922-8.982 6 6 0 0 1 8.982 7.922l3.04 3.04a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215ZM11.5 7a4.499 4.499 0 1 0-8.997 0A4.499 4.499 0 0 0 11.5 7Z"></path> </svg> </template> <template id="code-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-code"> <path d="m11.28 3.22 4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.749.749 0 0 1-1.275-.326.749.749 0 0 1 .215-.734L13.94 8l-3.72-3.72a.749.749 0 0 1 .326-1.275.749.749 0 0 1 .734.215Zm-6.56 0a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042L2.06 8l3.72 3.72a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L.47 8.53a.75.75 0 0 1 0-1.06Z"></path> </svg> </template> <template id="file-code-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-file-code"> <path d="M4 1.75C4 .784 4.784 0 5.75 0h5.586c.464 0 .909.184 1.237.513l2.914 2.914c.329.328.513.773.513 1.237v8.586A1.75 1.75 0 0 1 14.25 15h-9a.75.75 0 0 1 0-1.5h9a.25.25 0 0 0 .25-.25V6h-2.75A1.75 1.75 0 0 1 10 4.25V1.5H5.75a.25.25 0 0 0-.25.25v2.5a.75.75 0 0 1-1.5 0Zm1.72 4.97a.75.75 0 0 1 1.06 0l2 2a.75.75 0 0 1 0 1.06l-2 2a.749.749 0 0 1-1.275-.326.749.749 0 0 1 .215-.734l1.47-1.47-1.47-1.47a.75.75 0 0 1 0-1.06ZM3.28 7.78 1.81 9.25l1.47 1.47a.751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018l-2-2a.75.75 0 0 1 0-1.06l2-2a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042Zm8.22-6.218V4.25c0 .138.112.25.25.25h2.688l-.011-.013-2.914-2.914-.013-.011Z"></path> </svg> </template> <template id="history-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-history"> <path d="m.427 1.927 1.215 1.215a8.002 8.002 0 1 1-1.6 5.685.75.75 0 1 1 1.493-.154 6.5 6.5 0 1 0 1.18-4.458l1.358 1.358A.25.25 0 0 1 3.896 6H.25A.25.25 0 0 1 0 5.75V2.104a.25.25 0 0 1 .427-.177ZM7.75 4a.75.75 0 0 1 .75.75v2.992l2.028.812a.75.75 0 0 1-.557 1.392l-2.5-1A.751.751 0 0 1 7 8.25v-3.5A.75.75 0 0 1 7.75 4Z"></path> </svg> </template> <template id="repo-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-repo"> <path d="M2 2.5A2.5 2.5 0 0 1 4.5 0h8.75a.75.75 0 0 1 .75.75v12.5a.75.75 0 0 1-.75.75h-2.5a.75.75 0 0 1 0-1.5h1.75v-2h-8a1 1 0 0 0-.714 1.7.75.75 0 1 1-1.072 1.05A2.495 2.495 0 0 1 2 11.5Zm10.5-1h-8a1 1 0 0 0-1 1v6.708A2.486 2.486 0 0 1 4.5 9h8ZM5 12.25a.25.25 0 0 1 .25-.25h3.5a.25.25 0 0 1 .25.25v3.25a.25.25 0 0 1-.4.2l-1.45-1.087a.249.249 0 0 0-.3 0L5.4 15.7a.25.25 0 0 1-.4-.2Z"></path> </svg> </template> <template id="bookmark-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-bookmark"> <path d="M3 2.75C3 1.784 3.784 1 4.75 1h6.5c.966 0 1.75.784 1.75 1.75v11.5a.75.75 0 0 1-1.227.579L8 11.722l-3.773 3.107A.751.751 0 0 1 3 14.25Zm1.75-.25a.25.25 0 0 0-.25.25v9.91l3.023-2.489a.75.75 0 0 1 .954 0l3.023 2.49V2.75a.25.25 0 0 0-.25-.25Z"></path> </svg> </template> <template id="plus-circle-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-plus-circle"> <path d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0ZM1.5 8a6.5 6.5 0 1 0 13 0 6.5 6.5 0 0 0-13 0Zm7.25-3.25v2.5h2.5a.75.75 0 0 1 0 1.5h-2.5v2.5a.75.75 0 0 1-1.5 0v-2.5h-2.5a.75.75 0 0 1 0-1.5h2.5v-2.5a.75.75 0 0 1 1.5 0Z"></path> </svg> </template> <template id="circle-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-dot-fill"> <path d="M8 4a4 4 0 1 1 0 8 4 4 0 0 1 0-8Z"></path> </svg> </template> <template id="trash-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-trash"> <path d="M11 1.75V3h2.25a.75.75 0 0 1 0 1.5H2.75a.75.75 0 0 1 0-1.5H5V1.75C5 .784 5.784 0 6.75 0h2.5C10.216 0 11 .784 11 1.75ZM4.496 6.675l.66 6.6a.25.25 0 0 0 .249.225h5.19a.25.25 0 0 0 .249-.225l.66-6.6a.75.75 0 0 1 1.492.149l-.66 6.6A1.748 1.748 0 0 1 10.595 15h-5.19a1.75 1.75 0 0 1-1.741-1.575l-.66-6.6a.75.75 0 1 1 1.492-.15ZM6.5 1.75V3h3V1.75a.25.25 0 0 0-.25-.25h-2.5a.25.25 0 0 0-.25.25Z"></path> </svg> </template> <template id="team-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-people"> <path d="M2 5.5a3.5 3.5 0 1 1 5.898 2.549 5.508 5.508 0 0 1 3.034 4.084.75.75 0 1 1-1.482.235 4 4 0 0 0-7.9 0 .75.75 0 0 1-1.482-.236A5.507 5.507 0 0 1 3.102 8.05 3.493 3.493 0 0 1 2 5.5ZM11 4a3.001 3.001 0 0 1 2.22 5.018 5.01 5.01 0 0 1 2.56 3.012.749.749 0 0 1-.885.954.752.752 0 0 1-.549-.514 3.507 3.507 0 0 0-2.522-2.372.75.75 0 0 1-.574-.73v-.352a.75.75 0 0 1 .416-.672A1.5 1.5 0 0 0 11 5.5.75.75 0 0 1 11 4Zm-5.5-.5a2 2 0 1 0-.001 3.999A2 2 0 0 0 5.5 3.5Z"></path> </svg> </template> <template id="project-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-project"> <path d="M1.75 0h12.5C15.216 0 16 .784 16 1.75v12.5A1.75 1.75 0 0 1 14.25 16H1.75A1.75 1.75 0 0 1 0 14.25V1.75C0 .784.784 0 1.75 0ZM1.5 1.75v12.5c0 .138.112.25.25.25h12.5a.25.25 0 0 0 .25-.25V1.75a.25.25 0 0 0-.25-.25H1.75a.25.25 0 0 0-.25.25ZM11.75 3a.75.75 0 0 1 .75.75v7.5a.75.75 0 0 1-1.5 0v-7.5a.75.75 0 0 1 .75-.75Zm-8.25.75a.75.75 0 0 1 1.5 0v5.5a.75.75 0 0 1-1.5 0ZM8 3a.75.75 0 0 1 .75.75v3.5a.75.75 0 0 1-1.5 0v-3.5A.75.75 0 0 1 8 3Z"></path> </svg> </template> <template id="pencil-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-pencil"> <path d="M11.013 1.427a1.75 1.75 0 0 1 2.474 0l1.086 1.086a1.75 1.75 0 0 1 0 2.474l-8.61 8.61c-.21.21-.47.364-.756.445l-3.251.93a.75.75 0 0 1-.927-.928l.929-3.25c.081-.286.235-.547.445-.758l8.61-8.61Zm.176 4.823L9.75 4.81l-6.286 6.287a.253.253 0 0 0-.064.108l-.558 1.953 1.953-.558a.253.253 0 0 0 .108-.064Zm1.238-3.763a.25.25 0 0 0-.354 0L10.811 3.75l1.439 1.44 1.263-1.263a.25.25 0 0 0 0-.354Z"></path> </svg> </template> <template id="copilot-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-copilot"> <path d="M7.998 15.035c-4.562 0-7.873-2.914-7.998-3.749V9.338c.085-.628.677-1.686 1.588-2.065.013-.07.024-.143.036-.218.029-.183.06-.384.126-.612-.201-.508-.254-1.084-.254-1.656 0-.87.128-1.769.693-2.484.579-.733 1.494-1.124 2.724-1.261 1.206-.134 2.262.034 2.944.765.05.053.096.108.139.165.044-.057.094-.112.143-.165.682-.731 1.738-.899 2.944-.765 1.23.137 2.145.528 2.724 1.261.566.715.693 1.614.693 2.484 0 .572-.053 1.148-.254 1.656.066.228.098.429.126.612.012.076.024.148.037.218.924.385 1.522 1.471 1.591 2.095v1.872c0 .766-3.351 3.795-8.002 3.795Zm0-1.485c2.28 0 4.584-1.11 5.002-1.433V7.862l-.023-.116c-.49.21-1.075.291-1.727.291-1.146 0-2.059-.327-2.71-.991A3.222 3.222 0 0 1 8 6.303a3.24 3.24 0 0 1-.544.743c-.65.664-1.563.991-2.71.991-.652 0-1.236-.081-1.727-.291l-.023.116v4.255c.419.323 2.722 1.433 5.002 1.433ZM6.762 2.83c-.193-.206-.637-.413-1.682-.297-1.019.113-1.479.404-1.713.7-.247.312-.369.789-.369 1.554 0 .793.129 1.171.308 1.371.162.181.519.379 1.442.379.853 0 1.339-.235 1.638-.54.315-.322.527-.827.617-1.553.117-.935-.037-1.395-.241-1.614Zm4.155-.297c-1.044-.116-1.488.091-1.681.297-.204.219-.359.679-.242 1.614.091.726.303 1.231.618 1.553.299.305.784.54 1.638.54.922 0 1.28-.198 1.442-.379.179-.2.308-.578.308-1.371 0-.765-.123-1.242-.37-1.554-.233-.296-.693-.587-1.713-.7Z"></path><path d="M6.25 9.037a.75.75 0 0 1 .75.75v1.501a.75.75 0 0 1-1.5 0V9.787a.75.75 0 0 1 .75-.75Zm4.25.75v1.501a.75.75 0 0 1-1.5 0V9.787a.75.75 0 0 1 1.5 0Z"></path> </svg> </template> <template id="copilot-error-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-copilot-error"> <path d="M16 11.24c0 .112-.072.274-.21.467L13 9.688V7.862l-.023-.116c-.49.21-1.075.291-1.727.291-.198 0-.388-.009-.571-.029L6.833 5.226a4.01 4.01 0 0 0 .17-.782c.117-.935-.037-1.395-.241-1.614-.193-.206-.637-.413-1.682-.297-.683.076-1.115.231-1.395.415l-1.257-.91c.579-.564 1.413-.877 2.485-.996 1.206-.134 2.262.034 2.944.765.05.053.096.108.139.165.044-.057.094-.112.143-.165.682-.731 1.738-.899 2.944-.765 1.23.137 2.145.528 2.724 1.261.566.715.693 1.614.693 2.484 0 .572-.053 1.148-.254 1.656.066.228.098.429.126.612.012.076.024.148.037.218.924.385 1.522 1.471 1.591 2.095Zm-5.083-8.707c-1.044-.116-1.488.091-1.681.297-.204.219-.359.679-.242 1.614.091.726.303 1.231.618 1.553.299.305.784.54 1.638.54.922 0 1.28-.198 1.442-.379.179-.2.308-.578.308-1.371 0-.765-.123-1.242-.37-1.554-.233-.296-.693-.587-1.713-.7Zm2.511 11.074c-1.393.776-3.272 1.428-5.43 1.428-4.562 0-7.873-2.914-7.998-3.749V9.338c.085-.628.677-1.686 1.588-2.065.013-.07.024-.143.036-.218.029-.183.06-.384.126-.612-.18-.455-.241-.963-.252-1.475L.31 4.107A.747.747 0 0 1 0 3.509V3.49a.748.748 0 0 1 .625-.73c.156-.026.306.047.435.139l14.667 10.578a.592.592 0 0 1 .227.264.752.752 0 0 1 .046.249v.022a.75.75 0 0 1-1.19.596Zm-1.367-.991L5.635 7.964a5.128 5.128 0 0 1-.889.073c-.652 0-1.236-.081-1.727-.291l-.023.116v4.255c.419.323 2.722 1.433 5.002 1.433 1.539 0 3.089-.505 4.063-.934Z"></path> </svg> </template> <template id="workflow-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-workflow"> <path d="M0 1.75C0 .784.784 0 1.75 0h3.5C6.216 0 7 .784 7 1.75v3.5A1.75 1.75 0 0 1 5.25 7H4v4a1 1 0 0 0 1 1h4v-1.25C9 9.784 9.784 9 10.75 9h3.5c.966 0 1.75.784 1.75 1.75v3.5A1.75 1.75 0 0 1 14.25 16h-3.5A1.75 1.75 0 0 1 9 14.25v-.75H5A2.5 2.5 0 0 1 2.5 11V7h-.75A1.75 1.75 0 0 1 0 5.25Zm1.75-.25a.25.25 0 0 0-.25.25v3.5c0 .138.112.25.25.25h3.5a.25.25 0 0 0 .25-.25v-3.5a.25.25 0 0 0-.25-.25Zm9 9a.25.25 0 0 0-.25.25v3.5c0 .138.112.25.25.25h3.5a.25.25 0 0 0 .25-.25v-3.5a.25.25 0 0 0-.25-.25Z"></path> </svg> </template> <template id="book-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-book"> <path d="M0 1.75A.75.75 0 0 1 .75 1h4.253c1.227 0 2.317.59 3 1.501A3.743 3.743 0 0 1 11.006 1h4.245a.75.75 0 0 1 .75.75v10.5a.75.75 0 0 1-.75.75h-4.507a2.25 2.25 0 0 0-1.591.659l-.622.621a.75.75 0 0 1-1.06 0l-.622-.621A2.25 2.25 0 0 0 5.258 13H.75a.75.75 0 0 1-.75-.75Zm7.251 10.324.004-5.073-.002-2.253A2.25 2.25 0 0 0 5.003 2.5H1.5v9h3.757a3.75 3.75 0 0 1 1.994.574ZM8.755 4.75l-.004 7.322a3.752 3.752 0 0 1 1.992-.572H14.5v-9h-3.495a2.25 2.25 0 0 0-2.25 2.25Z"></path> </svg> </template> <template id="code-review-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-code-review"> <path d="M1.75 1h12.5c.966 0 1.75.784 1.75 1.75v8.5A1.75 1.75 0 0 1 14.25 13H8.061l-2.574 2.573A1.458 1.458 0 0 1 3 14.543V13H1.75A1.75 1.75 0 0 1 0 11.25v-8.5C0 1.784.784 1 1.75 1ZM1.5 2.75v8.5c0 .138.112.25.25.25h2a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h6.5a.25.25 0 0 0 .25-.25v-8.5a.25.25 0 0 0-.25-.25H1.75a.25.25 0 0 0-.25.25Zm5.28 1.72a.75.75 0 0 1 0 1.06L5.31 7l1.47 1.47a.751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018l-2-2a.75.75 0 0 1 0-1.06l2-2a.75.75 0 0 1 1.06 0Zm2.44 0a.75.75 0 0 1 1.06 0l2 2a.75.75 0 0 1 0 1.06l-2 2a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L10.69 7 9.22 5.53a.75.75 0 0 1 0-1.06Z"></path> </svg> </template> <template id="codespaces-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-codespaces"> <path d="M0 11.25c0-.966.784-1.75 1.75-1.75h12.5c.966 0 1.75.784 1.75 1.75v3A1.75 1.75 0 0 1 14.25 16H1.75A1.75 1.75 0 0 1 0 14.25Zm2-9.5C2 .784 2.784 0 3.75 0h8.5C13.216 0 14 .784 14 1.75v5a1.75 1.75 0 0 1-1.75 1.75h-8.5A1.75 1.75 0 0 1 2 6.75Zm1.75-.25a.25.25 0 0 0-.25.25v5c0 .138.112.25.25.25h8.5a.25.25 0 0 0 .25-.25v-5a.25.25 0 0 0-.25-.25Zm-2 9.5a.25.25 0 0 0-.25.25v3c0 .138.112.25.25.25h12.5a.25.25 0 0 0 .25-.25v-3a.25.25 0 0 0-.25-.25Z"></path><path d="M7 12.75a.75.75 0 0 1 .75-.75h4.5a.75.75 0 0 1 0 1.5h-4.5a.75.75 0 0 1-.75-.75Zm-4 0a.75.75 0 0 1 .75-.75h.5a.75.75 0 0 1 0 1.5h-.5a.75.75 0 0 1-.75-.75Z"></path> </svg> </template> <template id="comment-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-comment"> <path d="M1 2.75C1 1.784 1.784 1 2.75 1h10.5c.966 0 1.75.784 1.75 1.75v7.5A1.75 1.75 0 0 1 13.25 12H9.06l-2.573 2.573A1.458 1.458 0 0 1 4 13.543V12H2.75A1.75 1.75 0 0 1 1 10.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h2a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h4.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z"></path> </svg> </template> <template id="comment-discussion-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-comment-discussion"> <path d="M1.75 1h8.5c.966 0 1.75.784 1.75 1.75v5.5A1.75 1.75 0 0 1 10.25 10H7.061l-2.574 2.573A1.458 1.458 0 0 1 2 11.543V10h-.25A1.75 1.75 0 0 1 0 8.25v-5.5C0 1.784.784 1 1.75 1ZM1.5 2.75v5.5c0 .138.112.25.25.25h1a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h3.5a.25.25 0 0 0 .25-.25v-5.5a.25.25 0 0 0-.25-.25h-8.5a.25.25 0 0 0-.25.25Zm13 2a.25.25 0 0 0-.25-.25h-.5a.75.75 0 0 1 0-1.5h.5c.966 0 1.75.784 1.75 1.75v5.5A1.75 1.75 0 0 1 14.25 12H14v1.543a1.458 1.458 0 0 1-2.487 1.03L9.22 12.28a.749.749 0 0 1 .326-1.275.749.749 0 0 1 .734.215l2.22 2.22v-2.19a.75.75 0 0 1 .75-.75h1a.25.25 0 0 0 .25-.25Z"></path> </svg> </template> <template id="organization-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-organization"> <path d="M1.75 16A1.75 1.75 0 0 1 0 14.25V1.75C0 .784.784 0 1.75 0h8.5C11.216 0 12 .784 12 1.75v12.5c0 .085-.006.168-.018.25h2.268a.25.25 0 0 0 .25-.25V8.285a.25.25 0 0 0-.111-.208l-1.055-.703a.749.749 0 1 1 .832-1.248l1.055.703c.487.325.779.871.779 1.456v5.965A1.75 1.75 0 0 1 14.25 16h-3.5a.766.766 0 0 1-.197-.026c-.099.017-.2.026-.303.026h-3a.75.75 0 0 1-.75-.75V14h-1v1.25a.75.75 0 0 1-.75.75Zm-.25-1.75c0 .138.112.25.25.25H4v-1.25a.75.75 0 0 1 .75-.75h2.5a.75.75 0 0 1 .75.75v1.25h2.25a.25.25 0 0 0 .25-.25V1.75a.25.25 0 0 0-.25-.25h-8.5a.25.25 0 0 0-.25.25ZM3.75 6h.5a.75.75 0 0 1 0 1.5h-.5a.75.75 0 0 1 0-1.5ZM3 3.75A.75.75 0 0 1 3.75 3h.5a.75.75 0 0 1 0 1.5h-.5A.75.75 0 0 1 3 3.75Zm4 3A.75.75 0 0 1 7.75 6h.5a.75.75 0 0 1 0 1.5h-.5A.75.75 0 0 1 7 6.75ZM7.75 3h.5a.75.75 0 0 1 0 1.5h-.5a.75.75 0 0 1 0-1.5ZM3 9.75A.75.75 0 0 1 3.75 9h.5a.75.75 0 0 1 0 1.5h-.5A.75.75 0 0 1 3 9.75ZM7.75 9h.5a.75.75 0 0 1 0 1.5h-.5a.75.75 0 0 1 0-1.5Z"></path> </svg> </template> <template id="rocket-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-rocket"> <path d="M14.064 0h.186C15.216 0 16 .784 16 1.75v.186a8.752 8.752 0 0 1-2.564 6.186l-.458.459c-.314.314-.641.616-.979.904v3.207c0 .608-.315 1.172-.833 1.49l-2.774 1.707a.749.749 0 0 1-1.11-.418l-.954-3.102a1.214 1.214 0 0 1-.145-.125L3.754 9.816a1.218 1.218 0 0 1-.124-.145L.528 8.717a.749.749 0 0 1-.418-1.11l1.71-2.774A1.748 1.748 0 0 1 3.31 4h3.204c.288-.338.59-.665.904-.979l.459-.458A8.749 8.749 0 0 1 14.064 0ZM8.938 3.623h-.002l-.458.458c-.76.76-1.437 1.598-2.02 2.5l-1.5 2.317 2.143 2.143 2.317-1.5c.902-.583 1.74-1.26 2.499-2.02l.459-.458a7.25 7.25 0 0 0 2.123-5.127V1.75a.25.25 0 0 0-.25-.25h-.186a7.249 7.249 0 0 0-5.125 2.123ZM3.56 14.56c-.732.732-2.334 1.045-3.005 1.148a.234.234 0 0 1-.201-.064.234.234 0 0 1-.064-.201c.103-.671.416-2.273 1.15-3.003a1.502 1.502 0 1 1 2.12 2.12Zm6.94-3.935c-.088.06-.177.118-.266.175l-2.35 1.521.548 1.783 1.949-1.2a.25.25 0 0 0 .119-.213ZM3.678 8.116 5.2 5.766c.058-.09.117-.178.176-.266H3.309a.25.25 0 0 0-.213.119l-1.2 1.95ZM12 5a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path> </svg> </template> <template id="shield-check-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-shield-check"> <path d="m8.533.133 5.25 1.68A1.75 1.75 0 0 1 15 3.48V7c0 1.566-.32 3.182-1.303 4.682-.983 1.498-2.585 2.813-5.032 3.855a1.697 1.697 0 0 1-1.33 0c-2.447-1.042-4.049-2.357-5.032-3.855C1.32 10.182 1 8.566 1 7V3.48a1.75 1.75 0 0 1 1.217-1.667l5.25-1.68a1.748 1.748 0 0 1 1.066 0Zm-.61 1.429.001.001-5.25 1.68a.251.251 0 0 0-.174.237V7c0 1.36.275 2.666 1.057 3.859.784 1.194 2.121 2.342 4.366 3.298a.196.196 0 0 0 .154 0c2.245-.957 3.582-2.103 4.366-3.297C13.225 9.666 13.5 8.358 13.5 7V3.48a.25.25 0 0 0-.174-.238l-5.25-1.68a.25.25 0 0 0-.153 0ZM11.28 6.28l-3.5 3.5a.75.75 0 0 1-1.06 0l-1.5-1.5a.749.749 0 0 1 .326-1.275.749.749 0 0 1 .734.215l.97.97 2.97-2.97a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042Z"></path> </svg> </template> <template id="heart-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-heart"> <path d="m8 14.25.345.666a.75.75 0 0 1-.69 0l-.008-.004-.018-.01a7.152 7.152 0 0 1-.31-.17 22.055 22.055 0 0 1-3.434-2.414C2.045 10.731 0 8.35 0 5.5 0 2.836 2.086 1 4.25 1 5.797 1 7.153 1.802 8 3.02 8.847 1.802 10.203 1 11.75 1 13.914 1 16 2.836 16 5.5c0 2.85-2.045 5.231-3.885 6.818a22.066 22.066 0 0 1-3.744 2.584l-.018.01-.006.003h-.002ZM4.25 2.5c-1.336 0-2.75 1.164-2.75 3 0 2.15 1.58 4.144 3.365 5.682A20.58 20.58 0 0 0 8 13.393a20.58 20.58 0 0 0 3.135-2.211C12.92 9.644 14.5 7.65 14.5 5.5c0-1.836-1.414-3-2.75-3-1.373 0-2.609.986-3.029 2.456a.749.749 0 0 1-1.442 0C6.859 3.486 5.623 2.5 4.25 2.5Z"></path> </svg> </template> <template id="server-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-server"> <path d="M1.75 1h12.5c.966 0 1.75.784 1.75 1.75v4c0 .372-.116.717-.314 1 .198.283.314.628.314 1v4a1.75 1.75 0 0 1-1.75 1.75H1.75A1.75 1.75 0 0 1 0 12.75v-4c0-.358.109-.707.314-1a1.739 1.739 0 0 1-.314-1v-4C0 1.784.784 1 1.75 1ZM1.5 2.75v4c0 .138.112.25.25.25h12.5a.25.25 0 0 0 .25-.25v-4a.25.25 0 0 0-.25-.25H1.75a.25.25 0 0 0-.25.25Zm.25 5.75a.25.25 0 0 0-.25.25v4c0 .138.112.25.25.25h12.5a.25.25 0 0 0 .25-.25v-4a.25.25 0 0 0-.25-.25ZM7 4.75A.75.75 0 0 1 7.75 4h4.5a.75.75 0 0 1 0 1.5h-4.5A.75.75 0 0 1 7 4.75ZM7.75 10h4.5a.75.75 0 0 1 0 1.5h-4.5a.75.75 0 0 1 0-1.5ZM3 4.75A.75.75 0 0 1 3.75 4h.5a.75.75 0 0 1 0 1.5h-.5A.75.75 0 0 1 3 4.75ZM3.75 10h.5a.75.75 0 0 1 0 1.5h-.5a.75.75 0 0 1 0-1.5Z"></path> </svg> </template> <template id="globe-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-globe"> <path d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0ZM5.78 8.75a9.64 9.64 0 0 0 1.363 4.177c.255.426.542.832.857 1.215.245-.296.551-.705.857-1.215A9.64 9.64 0 0 0 10.22 8.75Zm4.44-1.5a9.64 9.64 0 0 0-1.363-4.177c-.307-.51-.612-.919-.857-1.215a9.927 9.927 0 0 0-.857 1.215A9.64 9.64 0 0 0 5.78 7.25Zm-5.944 1.5H1.543a6.507 6.507 0 0 0 4.666 5.5c-.123-.181-.24-.365-.352-.552-.715-1.192-1.437-2.874-1.581-4.948Zm-2.733-1.5h2.733c.144-2.074.866-3.756 1.58-4.948.12-.197.237-.381.353-.552a6.507 6.507 0 0 0-4.666 5.5Zm10.181 1.5c-.144 2.074-.866 3.756-1.58 4.948-.12.197-.237.381-.353.552a6.507 6.507 0 0 0 4.666-5.5Zm2.733-1.5a6.507 6.507 0 0 0-4.666-5.5c.123.181.24.365.353.552.714 1.192 1.436 2.874 1.58 4.948Z"></path> </svg> </template> <template id="issue-opened-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-issue-opened"> <path d="M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"></path><path d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0ZM1.5 8a6.5 6.5 0 1 0 13 0 6.5 6.5 0 0 0-13 0Z"></path> </svg> </template> <template id="device-mobile-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-device-mobile"> <path d="M3.75 0h8.5C13.216 0 14 .784 14 1.75v12.5A1.75 1.75 0 0 1 12.25 16h-8.5A1.75 1.75 0 0 1 2 14.25V1.75C2 .784 2.784 0 3.75 0ZM3.5 1.75v12.5c0 .138.112.25.25.25h8.5a.25.25 0 0 0 .25-.25V1.75a.25.25 0 0 0-.25-.25h-8.5a.25.25 0 0 0-.25.25ZM8 13a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z"></path> </svg> </template> <template id="package-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-package"> <path d="m8.878.392 5.25 3.045c.54.314.872.89.872 1.514v6.098a1.75 1.75 0 0 1-.872 1.514l-5.25 3.045a1.75 1.75 0 0 1-1.756 0l-5.25-3.045A1.75 1.75 0 0 1 1 11.049V4.951c0-.624.332-1.201.872-1.514L7.122.392a1.75 1.75 0 0 1 1.756 0ZM7.875 1.69l-4.63 2.685L8 7.133l4.755-2.758-4.63-2.685a.248.248 0 0 0-.25 0ZM2.5 5.677v5.372c0 .09.047.171.125.216l4.625 2.683V8.432Zm6.25 8.271 4.625-2.683a.25.25 0 0 0 .125-.216V5.677L8.75 8.432Z"></path> </svg> </template> <template id="credit-card-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-credit-card"> <path d="M10.75 9a.75.75 0 0 0 0 1.5h1.5a.75.75 0 0 0 0-1.5h-1.5Z"></path><path d="M0 3.75C0 2.784.784 2 1.75 2h12.5c.966 0 1.75.784 1.75 1.75v8.5A1.75 1.75 0 0 1 14.25 14H1.75A1.75 1.75 0 0 1 0 12.25ZM14.5 6.5h-13v5.75c0 .138.112.25.25.25h12.5a.25.25 0 0 0 .25-.25Zm0-2.75a.25.25 0 0 0-.25-.25H1.75a.25.25 0 0 0-.25.25V5h13Z"></path> </svg> </template> <template id="play-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-play"> <path d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0ZM1.5 8a6.5 6.5 0 1 0 13 0 6.5 6.5 0 0 0-13 0Zm4.879-2.773 4.264 2.559a.25.25 0 0 1 0 .428l-4.264 2.559A.25.25 0 0 1 6 10.559V5.442a.25.25 0 0 1 .379-.215Z"></path> </svg> </template> <template id="gift-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-gift"> <path d="M2 2.75A2.75 2.75 0 0 1 4.75 0c.983 0 1.873.42 2.57 1.232.268.318.497.668.68 1.042.183-.375.411-.725.68-1.044C9.376.42 10.266 0 11.25 0a2.75 2.75 0 0 1 2.45 4h.55c.966 0 1.75.784 1.75 1.75v2c0 .698-.409 1.301-1 1.582v4.918A1.75 1.75 0 0 1 13.25 16H2.75A1.75 1.75 0 0 1 1 14.25V9.332C.409 9.05 0 8.448 0 7.75v-2C0 4.784.784 4 1.75 4h.55c-.192-.375-.3-.8-.3-1.25ZM7.25 9.5H2.5v4.75c0 .138.112.25.25.25h4.5Zm1.5 0v5h4.5a.25.25 0 0 0 .25-.25V9.5Zm0-4V8h5.5a.25.25 0 0 0 .25-.25v-2a.25.25 0 0 0-.25-.25Zm-7 0a.25.25 0 0 0-.25.25v2c0 .138.112.25.25.25h5.5V5.5h-5.5Zm3-4a1.25 1.25 0 0 0 0 2.5h2.309c-.233-.818-.542-1.401-.878-1.793-.43-.502-.915-.707-1.431-.707ZM8.941 4h2.309a1.25 1.25 0 0 0 0-2.5c-.516 0-1 .205-1.43.707-.337.392-.646.975-.879 1.793Z"></path> </svg> </template> <template id="code-square-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-code-square"> <path d="M0 1.75C0 .784.784 0 1.75 0h12.5C15.216 0 16 .784 16 1.75v12.5A1.75 1.75 0 0 1 14.25 16H1.75A1.75 1.75 0 0 1 0 14.25Zm1.75-.25a.25.25 0 0 0-.25.25v12.5c0 .138.112.25.25.25h12.5a.25.25 0 0 0 .25-.25V1.75a.25.25 0 0 0-.25-.25Zm7.47 3.97a.75.75 0 0 1 1.06 0l2 2a.75.75 0 0 1 0 1.06l-2 2a.749.749 0 0 1-1.275-.326.749.749 0 0 1 .215-.734L10.69 8 9.22 6.53a.75.75 0 0 1 0-1.06ZM6.78 6.53 5.31 8l1.47 1.47a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215l-2-2a.75.75 0 0 1 0-1.06l2-2a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042Z"></path> </svg> </template> <template id="device-desktop-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-device-desktop"> <path d="M14.25 1c.966 0 1.75.784 1.75 1.75v7.5A1.75 1.75 0 0 1 14.25 12h-3.727c.099 1.041.52 1.872 1.292 2.757A.752.752 0 0 1 11.25 16h-6.5a.75.75 0 0 1-.565-1.243c.772-.885 1.192-1.716 1.292-2.757H1.75A1.75 1.75 0 0 1 0 10.25v-7.5C0 1.784.784 1 1.75 1ZM1.75 2.5a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h12.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25ZM9.018 12H6.982a5.72 5.72 0 0 1-.765 2.5h3.566a5.72 5.72 0 0 1-.765-2.5Z"></path> </svg> </template> <div class="position-relative"> <ul role="listbox" class="ActionListWrap QueryBuilder-ListWrap" aria-label="Suggestions" data-action=" combobox-commit:query-builder#comboboxCommit mousedown:query-builder#resultsMousedown " data-target="query-builder.resultsList" data-persist-list=false id="query-builder-test-results" ></ul> </div> <div class="FormControl-inlineValidation" id="validation-1574523a-6f0d-4989-b952-1e264b1f8d11" hidden="hidden"> <span class="FormControl-inlineValidation--visual"> <svg aria-hidden="true" height="12" viewBox="0 0 12 12" version="1.1" width="12" data-view-component="true" class="octicon octicon-alert-fill"> <path d="M4.855.708c.5-.896 1.79-.896 2.29 0l4.675 8.351a1.312 1.312 0 0 1-1.146 1.954H1.33A1.313 1.313 0 0 1 .183 9.058ZM7 7V3H5v4Zm-1 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"></path> </svg> </span> <span></span> </div> </div> <div data-target="query-builder.screenReaderFeedback" aria-live="polite" aria-atomic="true" class="sr-only"></div> </query-builder></form> <div class="d-flex flex-row color-fg-muted px-3 text-small color-bg-default search-feedback-prompt"> <a target="_blank" href="https://docs.github.com/search-github/github-code-search/understanding-github-code-search-syntax" data-view-component="true" class="Link color-fg-accent text-normal ml-2"> Search syntax tips </a> <div class="d-flex flex-1"></div> </div> </div> </div> </div> </modal-dialog></div> </div> <div data-action="click:qbsearch-input#retract" class="dark-backdrop position-fixed" hidden data-target="qbsearch-input.darkBackdrop"></div> <div class="color-fg-default"> <dialog-helper> <dialog data-target="qbsearch-input.feedbackDialog" data-action="close:qbsearch-input#handleDialogClose cancel:qbsearch-input#handleDialogClose" id="feedback-dialog" aria-modal="true" aria-labelledby="feedback-dialog-title" aria-describedby="feedback-dialog-description" data-view-component="true" class="Overlay Overlay-whenNarrow Overlay--size-medium Overlay--motion-scaleFade Overlay--disableScroll"> <div data-view-component="true" class="Overlay-header"> <div class="Overlay-headerContentWrap"> <div class="Overlay-titleWrap"> <h1 class="Overlay-title " id="feedback-dialog-title"> Provide feedback </h1> </div> <div class="Overlay-actionWrap"> <button data-close-dialog-id="feedback-dialog" aria-label="Close" type="button" data-view-component="true" class="close-button Overlay-closeButton"><svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-x"> <path d="M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L9.06 8l3.22 3.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L8 9.06l-3.22 3.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06Z"></path> </svg></button> </div> </div> </div> <scrollable-region data-labelled-by="feedback-dialog-title"> <div data-view-component="true" class="Overlay-body"> <!-- '"` --><!-- </textarea></xmp> --></option></form><form id="code-search-feedback-form" data-turbo="false" action="/search/feedback" accept-charset="UTF-8" method="post"><input type="hidden" data-csrf="true" name="authenticity_token" value="rou2WI7YQM6hbEsuH7zmOTHJt0nP1DAQ3qVCN+IqBfyrfhqgwPA3vSvANY4q87ix/DoWSG1v5fnnK52Q19R3dA==" /> <p>We read every piece of feedback, and take your input very seriously.</p> <textarea name="feedback" class="form-control width-full mb-2" style="height: 120px" id="feedback"></textarea> <input name="include_email" id="include_email" aria-label="Include my email address so I can be contacted" class="form-control mr-2" type="checkbox"> <label for="include_email" style="font-weight: normal">Include my email address so I can be contacted</label> </form></div> </scrollable-region> <div data-view-component="true" class="Overlay-footer Overlay-footer--alignEnd"> <button data-close-dialog-id="feedback-dialog" type="button" data-view-component="true" class="btn"> Cancel </button> <button form="code-search-feedback-form" data-action="click:qbsearch-input#submitFeedback" type="submit" data-view-component="true" class="btn-primary btn"> Submit feedback </button> </div> </dialog></dialog-helper> <custom-scopes data-target="qbsearch-input.customScopesManager"> <dialog-helper> <dialog data-target="custom-scopes.customScopesModalDialog" data-action="close:qbsearch-input#handleDialogClose cancel:qbsearch-input#handleDialogClose" id="custom-scopes-dialog" aria-modal="true" aria-labelledby="custom-scopes-dialog-title" aria-describedby="custom-scopes-dialog-description" data-view-component="true" class="Overlay Overlay-whenNarrow Overlay--size-medium Overlay--motion-scaleFade Overlay--disableScroll"> <div data-view-component="true" class="Overlay-header Overlay-header--divided"> <div class="Overlay-headerContentWrap"> <div class="Overlay-titleWrap"> <h1 class="Overlay-title " id="custom-scopes-dialog-title"> Saved searches </h1> <h2 id="custom-scopes-dialog-description" class="Overlay-description">Use saved searches to filter your results more quickly</h2> </div> <div class="Overlay-actionWrap"> <button data-close-dialog-id="custom-scopes-dialog" aria-label="Close" type="button" data-view-component="true" class="close-button Overlay-closeButton"><svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-x"> <path d="M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L9.06 8l3.22 3.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L8 9.06l-3.22 3.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06Z"></path> </svg></button> </div> </div> </div> <scrollable-region data-labelled-by="custom-scopes-dialog-title"> <div data-view-component="true" class="Overlay-body"> <div data-target="custom-scopes.customScopesModalDialogFlash"></div> <div hidden class="create-custom-scope-form" data-target="custom-scopes.createCustomScopeForm"> <!-- '"` --><!-- </textarea></xmp> --></option></form><form id="custom-scopes-dialog-form" data-turbo="false" action="/search/custom_scopes" accept-charset="UTF-8" method="post"><input type="hidden" data-csrf="true" name="authenticity_token" value="uHPUWEv7423Nr726aZW9E/d8yhX6r81vXu03ovvdPPrZipOhJJ0YRSvqXqNeCduxd4xXAna/2D6FmTUbbUtXeQ==" /> <div data-target="custom-scopes.customScopesModalDialogFlash"></div> <input type="hidden" id="custom_scope_id" name="custom_scope_id" data-target="custom-scopes.customScopesIdField"> <div class="form-group"> <label for="custom_scope_name">Name</label> <auto-check src="/search/custom_scopes/check_name" required> <input type="text" name="custom_scope_name" id="custom_scope_name" data-target="custom-scopes.customScopesNameField" class="form-control" autocomplete="off" placeholder="github-ruby" required maxlength="50"> <input type="hidden" data-csrf="true" value="yeBwH0skBABPT6JdTOgRXN3BZfkUjvv4k3ZuEYr7da+qoGow+cdxQ+7RkXmGtkzycdCbMq2IJluIRiyCozZ7Cw==" /> </auto-check> </div> <div class="form-group"> <label for="custom_scope_query">Query</label> <input type="text" name="custom_scope_query" id="custom_scope_query" data-target="custom-scopes.customScopesQueryField" class="form-control" autocomplete="off" placeholder="(repo:mona/a OR repo:mona/b) AND lang:python" required maxlength="500"> </div> <p class="text-small color-fg-muted"> To see all available qualifiers, see our <a class="Link--inTextBlock" href="https://docs.github.com/search-github/github-code-search/understanding-github-code-search-syntax">documentation</a>. </p> </form> </div> <div data-target="custom-scopes.manageCustomScopesForm"> <div data-target="custom-scopes.list"></div> </div> </div> </scrollable-region> <div data-view-component="true" class="Overlay-footer Overlay-footer--alignEnd Overlay-footer--divided"> <button data-action="click:custom-scopes#customScopesCancel" type="button" data-view-component="true" class="btn"> Cancel </button> <button form="custom-scopes-dialog-form" data-action="click:custom-scopes#customScopesSubmit" data-target="custom-scopes.customScopesSubmitButton" type="submit" data-view-component="true" class="btn-primary btn"> Create saved search </button> </div> </dialog></dialog-helper> </custom-scopes> </div> </qbsearch-input> <div class="position-relative HeaderMenu-link-wrap d-lg-inline-block"> <a href="/login?return_to=https%3A%2F%2Fgithub.com%2Fgocode1702%2Fheadless-gatsby-multilang" class="HeaderMenu-link HeaderMenu-link--sign-in HeaderMenu-button flex-shrink-0 no-underline d-none d-lg-inline-flex border border-lg-0 rounded rounded-lg-0 px-2 py-1" style="margin-left: 12px;" data-hydro-click="{"event_type":"authentication.click","payload":{"location_in_page":"site header menu","repository_id":null,"auth_type":"SIGN_UP","originating_url":"https://github.com/gocode1702/headless-gatsby-multilang","user_id":null}}" data-hydro-click-hmac="19951f9050e0cea4ceab7a2097cbfa0099b9c1cf04972e143e5a6e9f72c99d8d" data-analytics-event="{"category":"Marketing nav","action":"click to go to homepage","label":"ref_page:Marketing;ref_cta:Sign in;ref_loc:Header"}" > Sign in </a> </div> <a href="/signup?ref_cta=Sign+up&ref_loc=header+logged+out&ref_page=%2F%3Cuser-name%3E%2F%3Crepo-name%3E&source=header-repo&source_repo=gocode1702%2Fheadless-gatsby-multilang" class="HeaderMenu-link HeaderMenu-link--sign-up HeaderMenu-button flex-shrink-0 d-flex d-lg-inline-flex no-underline border color-border-default rounded px-2 py-1" data-hydro-click="{"event_type":"authentication.click","payload":{"location_in_page":"site header menu","repository_id":null,"auth_type":"SIGN_UP","originating_url":"https://github.com/gocode1702/headless-gatsby-multilang","user_id":null}}" data-hydro-click-hmac="19951f9050e0cea4ceab7a2097cbfa0099b9c1cf04972e143e5a6e9f72c99d8d" data-analytics-event="{"category":"Sign up","action":"click to sign up for account","label":"ref_page:/<user-name>/<repo-name>;ref_cta:Sign up;ref_loc:header logged out"}" > Sign up </a> <button type="button" class="sr-only js-header-menu-focus-trap d-block d-lg-none">Reseting focus</button> </div> </div> </div> </div> </header> <div hidden="hidden" data-view-component="true" class="js-stale-session-flash stale-session-flash flash flash-warn flash-full"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-alert"> <path d="M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path> </svg> <span class="js-stale-session-flash-signed-in" hidden>You signed in with another tab or window. <a class="Link--inTextBlock" href="">Reload</a> to refresh your session.</span> <span class="js-stale-session-flash-signed-out" hidden>You signed out in another tab or window. <a class="Link--inTextBlock" href="">Reload</a> to refresh your session.</span> <span class="js-stale-session-flash-switched" hidden>You switched accounts on another tab or window. <a class="Link--inTextBlock" href="">Reload</a> to refresh your session.</span> <button id="icon-button-3cb60bf7-5dbc-4ada-8daa-34f94ce81c39" aria-labelledby="tooltip-647ce5fc-8cf9-4cc5-afb4-73d2f32b61ff" type="button" data-view-component="true" class="Button Button--iconOnly Button--invisible Button--medium flash-close js-flash-close"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-x Button-visual"> <path d="M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L9.06 8l3.22 3.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L8 9.06l-3.22 3.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06Z"></path> </svg> </button><tool-tip id="tooltip-647ce5fc-8cf9-4cc5-afb4-73d2f32b61ff" for="icon-button-3cb60bf7-5dbc-4ada-8daa-34f94ce81c39" popover="manual" data-direction="s" data-type="label" data-view-component="true" class="sr-only position-absolute">Dismiss alert</tool-tip> </div> </div> <div id="start-of-content" class="show-on-focus"></div> <div id="js-flash-container" class="flash-container" data-turbo-replace> <template class="js-flash-template"> <div class="flash flash-full {{ className }}"> <div > <button autofocus class="flash-close js-flash-close" type="button" aria-label="Dismiss this message"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-x"> <path d="M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L9.06 8l3.22 3.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L8 9.06l-3.22 3.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06Z"></path> </svg> </button> <div aria-atomic="true" role="alert" class="js-flash-alert"> <div>{{ message }}</div> </div> </div> </div> </template> </div> <div class="application-main " data-commit-hovercards-enabled data-discussion-hovercards-enabled data-issue-and-pr-hovercards-enabled > <div itemscope itemtype="http://schema.org/SoftwareSourceCode" class=""> <main id="js-repo-pjax-container" > <div id="repository-container-header" class="pt-3 hide-full-screen" style="background-color: var(--page-header-bgColor, var(--color-page-header-bg));" data-turbo-replace> <div class="d-flex flex-nowrap flex-justify-end mb-3 px-3 px-lg-5" style="gap: 1rem;"> <div class="flex-auto min-width-0 width-fit"> <div class=" d-flex flex-wrap flex-items-center wb-break-word f3 text-normal"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-repo color-fg-muted mr-2"> <path d="M2 2.5A2.5 2.5 0 0 1 4.5 0h8.75a.75.75 0 0 1 .75.75v12.5a.75.75 0 0 1-.75.75h-2.5a.75.75 0 0 1 0-1.5h1.75v-2h-8a1 1 0 0 0-.714 1.7.75.75 0 1 1-1.072 1.05A2.495 2.495 0 0 1 2 11.5Zm10.5-1h-8a1 1 0 0 0-1 1v6.708A2.486 2.486 0 0 1 4.5 9h8ZM5 12.25a.25.25 0 0 1 .25-.25h3.5a.25.25 0 0 1 .25.25v3.25a.25.25 0 0 1-.4.2l-1.45-1.087a.249.249 0 0 0-.3 0L5.4 15.7a.25.25 0 0 1-.4-.2Z"></path> </svg> <span class="author flex-self-stretch" itemprop="author"> <a class="url fn" rel="author" data-hovercard-type="user" data-hovercard-url="/users/gocode1702/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/gocode1702"> gocode1702 </a> </span> <span class="mx-1 flex-self-stretch color-fg-muted">/</span> <strong itemprop="name" class="mr-2 flex-self-stretch"> <a data-pjax="#repo-content-pjax-container" data-turbo-frame="repo-content-turbo-frame" href="/gocode1702/headless-gatsby-multilang">headless-gatsby-multilang</a> </strong> <span></span><span class="Label Label--secondary v-align-middle mr-1">Public</span> </div> </div> <div id="repository-details-container" class="flex-shrink-0" data-turbo-replace style="max-width: 70%;"> <ul class="pagehead-actions flex-shrink-0 d-none d-md-inline" style="padding: 2px 0;"> <li> <a href="/login?return_to=%2Fgocode1702%2Fheadless-gatsby-multilang" rel="nofollow" id="repository-details-watch-button" data-hydro-click="{"event_type":"authentication.click","payload":{"location_in_page":"notification subscription menu watch","repository_id":null,"auth_type":"LOG_IN","originating_url":"https://github.com/gocode1702/headless-gatsby-multilang","user_id":null}}" data-hydro-click-hmac="9fb859bc0b9dadd8890fc9fcf09b47e6094be210d05047a0e92b7c66d0209326" aria-label="You must be signed in to change notification settings" data-view-component="true" class="btn-sm btn"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-bell mr-2"> <path d="M8 16a2 2 0 0 0 1.985-1.75c.017-.137-.097-.25-.235-.25h-3.5c-.138 0-.252.113-.235.25A2 2 0 0 0 8 16ZM3 5a5 5 0 0 1 10 0v2.947c0 .05.015.098.042.139l1.703 2.555A1.519 1.519 0 0 1 13.482 13H2.518a1.516 1.516 0 0 1-1.263-2.36l1.703-2.554A.255.255 0 0 0 3 7.947Zm5-3.5A3.5 3.5 0 0 0 4.5 5v2.947c0 .346-.102.683-.294.97l-1.703 2.556a.017.017 0 0 0-.003.01l.001.006c0 .002.002.004.004.006l.006.004.007.001h10.964l.007-.001.006-.004.004-.006.001-.007a.017.017 0 0 0-.003-.01l-1.703-2.554a1.745 1.745 0 0 1-.294-.97V5A3.5 3.5 0 0 0 8 1.5Z"></path> </svg>Notifications </a> <tool-tip id="tooltip-054bec34-e130-440c-834b-134fbe03147f" for="repository-details-watch-button" popover="manual" data-direction="s" data-type="description" data-view-component="true" class="sr-only position-absolute">You must be signed in to change notification settings</tool-tip> </li> <li> <a icon="repo-forked" id="fork-button" href="/login?return_to=%2Fgocode1702%2Fheadless-gatsby-multilang" rel="nofollow" data-hydro-click="{"event_type":"authentication.click","payload":{"location_in_page":"repo details fork button","repository_id":620384312,"auth_type":"LOG_IN","originating_url":"https://github.com/gocode1702/headless-gatsby-multilang","user_id":null}}" data-hydro-click-hmac="bad6fc388d41a9ccd9b95cd9fee9941dc8e7244f7b3f82141a7adc5e543178ee" data-view-component="true" class="btn-sm btn"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-repo-forked mr-2"> <path d="M5 5.372v.878c0 .414.336.75.75.75h4.5a.75.75 0 0 0 .75-.75v-.878a2.25 2.25 0 1 1 1.5 0v.878a2.25 2.25 0 0 1-2.25 2.25h-1.5v2.128a2.251 2.251 0 1 1-1.5 0V8.5h-1.5A2.25 2.25 0 0 1 3.5 6.25v-.878a2.25 2.25 0 1 1 1.5 0ZM5 3.25a.75.75 0 1 0-1.5 0 .75.75 0 0 0 1.5 0Zm6.75.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Zm-3 8.75a.75.75 0 1 0-1.5 0 .75.75 0 0 0 1.5 0Z"></path> </svg>Fork <span id="repo-network-counter" data-pjax-replace="true" data-turbo-replace="true" title="0" data-view-component="true" class="Counter">0</span> </a> </li> <li> <div data-view-component="true" class="BtnGroup d-flex"> <a href="/login?return_to=%2Fgocode1702%2Fheadless-gatsby-multilang" rel="nofollow" data-hydro-click="{"event_type":"authentication.click","payload":{"location_in_page":"star button","repository_id":620384312,"auth_type":"LOG_IN","originating_url":"https://github.com/gocode1702/headless-gatsby-multilang","user_id":null}}" data-hydro-click-hmac="a0803573db5fd0c89ffdb2e6308b46a8baafb047e341e60f0c9a213fcd290e4a" aria-label="You must be signed in to star a repository" data-view-component="true" class="tooltipped tooltipped-sw btn-sm btn"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-star v-align-text-bottom d-inline-block mr-2"> <path d="M8 .25a.75.75 0 0 1 .673.418l1.882 3.815 4.21.612a.75.75 0 0 1 .416 1.279l-3.046 2.97.719 4.192a.751.751 0 0 1-1.088.791L8 12.347l-3.766 1.98a.75.75 0 0 1-1.088-.79l.72-4.194L.818 6.374a.75.75 0 0 1 .416-1.28l4.21-.611L7.327.668A.75.75 0 0 1 8 .25Zm0 2.445L6.615 5.5a.75.75 0 0 1-.564.41l-3.097.45 2.24 2.184a.75.75 0 0 1 .216.664l-.528 3.084 2.769-1.456a.75.75 0 0 1 .698 0l2.77 1.456-.53-3.084a.75.75 0 0 1 .216-.664l2.24-2.183-3.096-.45a.75.75 0 0 1-.564-.41L8 2.694Z"></path> </svg><span data-view-component="true" class="d-inline"> Star </span> <span id="repo-stars-counter-star" aria-label="1 user starred this repository" data-singular-suffix="user starred this repository" data-plural-suffix="users starred this repository" data-turbo-replace="true" title="1" data-view-component="true" class="Counter js-social-count">1</span> </a></div> </li> </ul> </div> </div> <div id="responsive-meta-container" data-turbo-replace> <div class="d-block d-md-none mb-2 px-3 px-md-4 px-lg-5"> <h3 class="sr-only">License</h3> <div class="mb-2"> <a href="/gocode1702/headless-gatsby-multilang/blob/main/LICENSE" class="Link--muted" data-analytics-event="{"category":"Repository Overview","action":"click","label":"location:sidebar;file:license"}" > <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-law mr-2"> <path d="M8.75.75V2h.985c.304 0 .603.08.867.231l1.29.736c.038.022.08.033.124.033h2.234a.75.75 0 0 1 0 1.5h-.427l2.111 4.692a.75.75 0 0 1-.154.838l-.53-.53.529.531-.001.002-.002.002-.006.006-.006.005-.01.01-.045.04c-.21.176-.441.327-.686.45C14.556 10.78 13.88 11 13 11a4.498 4.498 0 0 1-2.023-.454 3.544 3.544 0 0 1-.686-.45l-.045-.04-.016-.015-.006-.006-.004-.004v-.001a.75.75 0 0 1-.154-.838L12.178 4.5h-.162c-.305 0-.604-.079-.868-.231l-1.29-.736a.245.245 0 0 0-.124-.033H8.75V13h2.5a.75.75 0 0 1 0 1.5h-6.5a.75.75 0 0 1 0-1.5h2.5V3.5h-.984a.245.245 0 0 0-.124.033l-1.289.737c-.265.15-.564.23-.869.23h-.162l2.112 4.692a.75.75 0 0 1-.154.838l-.53-.53.529.531-.001.002-.002.002-.006.006-.016.015-.045.04c-.21.176-.441.327-.686.45C4.556 10.78 3.88 11 3 11a4.498 4.498 0 0 1-2.023-.454 3.544 3.544 0 0 1-.686-.45l-.045-.04-.016-.015-.006-.006-.004-.004v-.001a.75.75 0 0 1-.154-.838L2.178 4.5H1.75a.75.75 0 0 1 0-1.5h2.234a.249.249 0 0 0 .125-.033l1.288-.737c.265-.15.564-.23.869-.23h.984V.75a.75.75 0 0 1 1.5 0Zm2.945 8.477c.285.135.718.273 1.305.273s1.02-.138 1.305-.273L13 6.327Zm-10 0c.285.135.718.273 1.305.273s1.02-.138 1.305-.273L3 6.327Z"></path> </svg> 0BSD license </a> </div> <div class="mb-3"> <a class="Link--secondary no-underline mr-3" href="/gocode1702/headless-gatsby-multilang/stargazers"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-star mr-1"> <path d="M8 .25a.75.75 0 0 1 .673.418l1.882 3.815 4.21.612a.75.75 0 0 1 .416 1.279l-3.046 2.97.719 4.192a.751.751 0 0 1-1.088.791L8 12.347l-3.766 1.98a.75.75 0 0 1-1.088-.79l.72-4.194L.818 6.374a.75.75 0 0 1 .416-1.28l4.21-.611L7.327.668A.75.75 0 0 1 8 .25Zm0 2.445L6.615 5.5a.75.75 0 0 1-.564.41l-3.097.45 2.24 2.184a.75.75 0 0 1 .216.664l-.528 3.084 2.769-1.456a.75.75 0 0 1 .698 0l2.77 1.456-.53-3.084a.75.75 0 0 1 .216-.664l2.24-2.183-3.096-.45a.75.75 0 0 1-.564-.41L8 2.694Z"></path> </svg> <span class="text-bold">1</span> star </a> <a class="Link--secondary no-underline mr-3" href="/gocode1702/headless-gatsby-multilang/forks"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-repo-forked mr-1"> <path d="M5 5.372v.878c0 .414.336.75.75.75h4.5a.75.75 0 0 0 .75-.75v-.878a2.25 2.25 0 1 1 1.5 0v.878a2.25 2.25 0 0 1-2.25 2.25h-1.5v2.128a2.251 2.251 0 1 1-1.5 0V8.5h-1.5A2.25 2.25 0 0 1 3.5 6.25v-.878a2.25 2.25 0 1 1 1.5 0ZM5 3.25a.75.75 0 1 0-1.5 0 .75.75 0 0 0 1.5 0Zm6.75.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Zm-3 8.75a.75.75 0 1 0-1.5 0 .75.75 0 0 0 1.5 0Z"></path> </svg> <span class="text-bold">0</span> forks </a> <a class="Link--secondary no-underline mr-3 d-inline-block" href="/gocode1702/headless-gatsby-multilang/branches"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-git-branch mr-1"> <path d="M9.5 3.25a2.25 2.25 0 1 1 3 2.122V6A2.5 2.5 0 0 1 10 8.5H6a1 1 0 0 0-1 1v1.128a2.251 2.251 0 1 1-1.5 0V5.372a2.25 2.25 0 1 1 1.5 0v1.836A2.493 2.493 0 0 1 6 7h4a1 1 0 0 0 1-1v-.628A2.25 2.25 0 0 1 9.5 3.25Zm-6 0a.75.75 0 1 0 1.5 0 .75.75 0 0 0-1.5 0Zm8.25-.75a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5ZM4.25 12a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Z"></path> </svg> <span>Branches</span> </a> <a class="Link--secondary no-underline d-inline-block" href="/gocode1702/headless-gatsby-multilang/tags"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-tag mr-1"> <path d="M1 7.775V2.75C1 1.784 1.784 1 2.75 1h5.025c.464 0 .91.184 1.238.513l6.25 6.25a1.75 1.75 0 0 1 0 2.474l-5.026 5.026a1.75 1.75 0 0 1-2.474 0l-6.25-6.25A1.752 1.752 0 0 1 1 7.775Zm1.5 0c0 .066.026.13.073.177l6.25 6.25a.25.25 0 0 0 .354 0l5.025-5.025a.25.25 0 0 0 0-.354l-6.25-6.25a.25.25 0 0 0-.177-.073H2.75a.25.25 0 0 0-.25.25ZM6 5a1 1 0 1 1 0 2 1 1 0 0 1 0-2Z"></path> </svg> <span>Tags</span> </a> <a class="Link--secondary no-underline d-inline-block" href="/gocode1702/headless-gatsby-multilang/activity"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-pulse mr-1"> <path d="M6 2c.306 0 .582.187.696.471L10 10.731l1.304-3.26A.751.751 0 0 1 12 7h3.25a.75.75 0 0 1 0 1.5h-2.742l-1.812 4.528a.751.751 0 0 1-1.392 0L6 4.77 4.696 8.03A.75.75 0 0 1 4 8.5H.75a.75.75 0 0 1 0-1.5h2.742l1.812-4.529A.751.751 0 0 1 6 2Z"></path> </svg> <span>Activity</span> </a> </div> <div class="d-flex flex-wrap gap-2"> <div class="flex-1"> <div data-view-component="true" class="BtnGroup d-flex"> <a href="/login?return_to=%2Fgocode1702%2Fheadless-gatsby-multilang" rel="nofollow" data-hydro-click="{"event_type":"authentication.click","payload":{"location_in_page":"star button","repository_id":620384312,"auth_type":"LOG_IN","originating_url":"https://github.com/gocode1702/headless-gatsby-multilang","user_id":null}}" data-hydro-click-hmac="a0803573db5fd0c89ffdb2e6308b46a8baafb047e341e60f0c9a213fcd290e4a" aria-label="You must be signed in to star a repository" data-view-component="true" class="tooltipped tooltipped-sw btn-sm btn btn-block"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-star v-align-text-bottom d-inline-block mr-2"> <path d="M8 .25a.75.75 0 0 1 .673.418l1.882 3.815 4.21.612a.75.75 0 0 1 .416 1.279l-3.046 2.97.719 4.192a.751.751 0 0 1-1.088.791L8 12.347l-3.766 1.98a.75.75 0 0 1-1.088-.79l.72-4.194L.818 6.374a.75.75 0 0 1 .416-1.28l4.21-.611L7.327.668A.75.75 0 0 1 8 .25Zm0 2.445L6.615 5.5a.75.75 0 0 1-.564.41l-3.097.45 2.24 2.184a.75.75 0 0 1 .216.664l-.528 3.084 2.769-1.456a.75.75 0 0 1 .698 0l2.77 1.456-.53-3.084a.75.75 0 0 1 .216-.664l2.24-2.183-3.096-.45a.75.75 0 0 1-.564-.41L8 2.694Z"></path> </svg><span data-view-component="true" class="d-inline"> Star </span> </a></div> </div> <div class="flex-1"> <a href="/login?return_to=%2Fgocode1702%2Fheadless-gatsby-multilang" rel="nofollow" id="files-overview-watch-button" data-hydro-click="{"event_type":"authentication.click","payload":{"location_in_page":"notification subscription menu watch","repository_id":null,"auth_type":"LOG_IN","originating_url":"https://github.com/gocode1702/headless-gatsby-multilang","user_id":null}}" data-hydro-click-hmac="9fb859bc0b9dadd8890fc9fcf09b47e6094be210d05047a0e92b7c66d0209326" aria-label="You must be signed in to change notification settings" data-view-component="true" class="btn-sm btn btn-block"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-bell mr-2"> <path d="M8 16a2 2 0 0 0 1.985-1.75c.017-.137-.097-.25-.235-.25h-3.5c-.138 0-.252.113-.235.25A2 2 0 0 0 8 16ZM3 5a5 5 0 0 1 10 0v2.947c0 .05.015.098.042.139l1.703 2.555A1.519 1.519 0 0 1 13.482 13H2.518a1.516 1.516 0 0 1-1.263-2.36l1.703-2.554A.255.255 0 0 0 3 7.947Zm5-3.5A3.5 3.5 0 0 0 4.5 5v2.947c0 .346-.102.683-.294.97l-1.703 2.556a.017.017 0 0 0-.003.01l.001.006c0 .002.002.004.004.006l.006.004.007.001h10.964l.007-.001.006-.004.004-.006.001-.007a.017.017 0 0 0-.003-.01l-1.703-2.554a1.745 1.745 0 0 1-.294-.97V5A3.5 3.5 0 0 0 8 1.5Z"></path> </svg>Notifications </a> <tool-tip id="tooltip-0e279897-096b-4bff-b7c6-d0578289630d" for="files-overview-watch-button" popover="manual" data-direction="s" data-type="description" data-view-component="true" class="sr-only position-absolute">You must be signed in to change notification settings</tool-tip> </div> <span> </span> </div> </div> </div> <nav data-pjax="#js-repo-pjax-container" aria-label="Repository" data-view-component="true" class="js-repo-nav js-sidenav-container-pjax js-responsive-underlinenav overflow-hidden UnderlineNav px-3 px-md-4 px-lg-5"> <ul data-view-component="true" class="UnderlineNav-body list-style-none"> <li data-view-component="true" class="d-inline-flex"> <a id="code-tab" href="/gocode1702/headless-gatsby-multilang" data-tab-item="i0code-tab" data-selected-links="repo_source repo_downloads repo_commits repo_releases repo_tags repo_branches repo_packages repo_deployments repo_attestations /gocode1702/headless-gatsby-multilang" data-pjax="#repo-content-pjax-container" data-turbo-frame="repo-content-turbo-frame" data-hotkey="g c" data-analytics-event="{"category":"Underline navbar","action":"Click tab","label":"Code","target":"UNDERLINE_NAV.TAB"}" aria-current="page" data-view-component="true" class="UnderlineNav-item no-wrap js-responsive-underlinenav-item js-selected-navigation-item selected"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-code UnderlineNav-octicon d-none d-sm-inline"> <path d="m11.28 3.22 4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.749.749 0 0 1-1.275-.326.749.749 0 0 1 .215-.734L13.94 8l-3.72-3.72a.749.749 0 0 1 .326-1.275.749.749 0 0 1 .734.215Zm-6.56 0a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042L2.06 8l3.72 3.72a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L.47 8.53a.75.75 0 0 1 0-1.06Z"></path> </svg> <span data-content="Code">Code</span> <span id="code-repo-tab-count" data-pjax-replace="" data-turbo-replace="" title="Not available" data-view-component="true" class="Counter"></span> </a></li> <li data-view-component="true" class="d-inline-flex"> <a id="issues-tab" href="/gocode1702/headless-gatsby-multilang/issues" data-tab-item="i1issues-tab" data-selected-links="repo_issues repo_labels repo_milestones /gocode1702/headless-gatsby-multilang/issues" data-pjax="#repo-content-pjax-container" data-turbo-frame="repo-content-turbo-frame" data-hotkey="g i" data-analytics-event="{"category":"Underline navbar","action":"Click tab","label":"Issues","target":"UNDERLINE_NAV.TAB"}" data-view-component="true" class="UnderlineNav-item no-wrap js-responsive-underlinenav-item js-selected-navigation-item"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-issue-opened UnderlineNav-octicon d-none d-sm-inline"> <path d="M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"></path><path d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0ZM1.5 8a6.5 6.5 0 1 0 13 0 6.5 6.5 0 0 0-13 0Z"></path> </svg> <span data-content="Issues">Issues</span> <span id="issues-repo-tab-count" data-pjax-replace="" data-turbo-replace="" title="0" hidden="hidden" data-view-component="true" class="Counter">0</span> </a></li> <li data-view-component="true" class="d-inline-flex"> <a id="pull-requests-tab" href="/gocode1702/headless-gatsby-multilang/pulls" data-tab-item="i2pull-requests-tab" data-selected-links="repo_pulls checks /gocode1702/headless-gatsby-multilang/pulls" data-pjax="#repo-content-pjax-container" data-turbo-frame="repo-content-turbo-frame" data-hotkey="g p" data-analytics-event="{"category":"Underline navbar","action":"Click tab","label":"Pull requests","target":"UNDERLINE_NAV.TAB"}" data-view-component="true" class="UnderlineNav-item no-wrap js-responsive-underlinenav-item js-selected-navigation-item"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-git-pull-request UnderlineNav-octicon d-none d-sm-inline"> <path d="M1.5 3.25a2.25 2.25 0 1 1 3 2.122v5.256a2.251 2.251 0 1 1-1.5 0V5.372A2.25 2.25 0 0 1 1.5 3.25Zm5.677-.177L9.573.677A.25.25 0 0 1 10 .854V2.5h1A2.5 2.5 0 0 1 13.5 5v5.628a2.251 2.251 0 1 1-1.5 0V5a1 1 0 0 0-1-1h-1v1.646a.25.25 0 0 1-.427.177L7.177 3.427a.25.25 0 0 1 0-.354ZM3.75 2.5a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Zm0 9.5a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Zm8.25.75a.75.75 0 1 0 1.5 0 .75.75 0 0 0-1.5 0Z"></path> </svg> <span data-content="Pull requests">Pull requests</span> <span id="pull-requests-repo-tab-count" data-pjax-replace="" data-turbo-replace="" title="0" hidden="hidden" data-view-component="true" class="Counter">0</span> </a></li> <li data-view-component="true" class="d-inline-flex"> <a id="projects-tab" href="/gocode1702/headless-gatsby-multilang/projects" data-tab-item="i3projects-tab" data-selected-links="repo_projects new_repo_project repo_project /gocode1702/headless-gatsby-multilang/projects" data-pjax="#repo-content-pjax-container" data-turbo-frame="repo-content-turbo-frame" data-hotkey="g b" data-analytics-event="{"category":"Underline navbar","action":"Click tab","label":"Projects","target":"UNDERLINE_NAV.TAB"}" data-view-component="true" class="UnderlineNav-item no-wrap js-responsive-underlinenav-item js-selected-navigation-item"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-table UnderlineNav-octicon d-none d-sm-inline"> <path d="M0 1.75C0 .784.784 0 1.75 0h12.5C15.216 0 16 .784 16 1.75v12.5A1.75 1.75 0 0 1 14.25 16H1.75A1.75 1.75 0 0 1 0 14.25ZM6.5 6.5v8h7.75a.25.25 0 0 0 .25-.25V6.5Zm8-1.5V1.75a.25.25 0 0 0-.25-.25H6.5V5Zm-13 1.5v7.75c0 .138.112.25.25.25H5v-8ZM5 5V1.5H1.75a.25.25 0 0 0-.25.25V5Z"></path> </svg> <span data-content="Projects">Projects</span> <span id="projects-repo-tab-count" data-pjax-replace="" data-turbo-replace="" title="0" hidden="hidden" data-view-component="true" class="Counter">0</span> </a></li> <li data-view-component="true" class="d-inline-flex"> <a id="security-tab" href="/gocode1702/headless-gatsby-multilang/security" data-tab-item="i4security-tab" data-selected-links="security overview alerts policy token_scanning code_scanning /gocode1702/headless-gatsby-multilang/security" data-pjax="#repo-content-pjax-container" data-turbo-frame="repo-content-turbo-frame" data-hotkey="g s" data-analytics-event="{"category":"Underline navbar","action":"Click tab","label":"Security","target":"UNDERLINE_NAV.TAB"}" data-view-component="true" class="UnderlineNav-item no-wrap js-responsive-underlinenav-item js-selected-navigation-item"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-shield UnderlineNav-octicon d-none d-sm-inline"> <path d="M7.467.133a1.748 1.748 0 0 1 1.066 0l5.25 1.68A1.75 1.75 0 0 1 15 3.48V7c0 1.566-.32 3.182-1.303 4.682-.983 1.498-2.585 2.813-5.032 3.855a1.697 1.697 0 0 1-1.33 0c-2.447-1.042-4.049-2.357-5.032-3.855C1.32 10.182 1 8.566 1 7V3.48a1.75 1.75 0 0 1 1.217-1.667Zm.61 1.429a.25.25 0 0 0-.153 0l-5.25 1.68a.25.25 0 0 0-.174.238V7c0 1.358.275 2.666 1.057 3.86.784 1.194 2.121 2.34 4.366 3.297a.196.196 0 0 0 .154 0c2.245-.956 3.582-2.104 4.366-3.298C13.225 9.666 13.5 8.36 13.5 7V3.48a.251.251 0 0 0-.174-.237l-5.25-1.68ZM8.75 4.75v3a.75.75 0 0 1-1.5 0v-3a.75.75 0 0 1 1.5 0ZM9 10.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path> </svg> <span data-content="Security">Security</span> <include-fragment src="/gocode1702/headless-gatsby-multilang/security/overall-count" accept="text/fragment+html"></include-fragment> </a></li> <li data-view-component="true" class="d-inline-flex"> <a id="insights-tab" href="/gocode1702/headless-gatsby-multilang/pulse" data-tab-item="i5insights-tab" data-selected-links="repo_graphs repo_contributors dependency_graph dependabot_updates pulse people community /gocode1702/headless-gatsby-multilang/pulse" data-pjax="#repo-content-pjax-container" data-turbo-frame="repo-content-turbo-frame" data-analytics-event="{"category":"Underline navbar","action":"Click tab","label":"Insights","target":"UNDERLINE_NAV.TAB"}" data-view-component="true" class="UnderlineNav-item no-wrap js-responsive-underlinenav-item js-selected-navigation-item"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-graph UnderlineNav-octicon d-none d-sm-inline"> <path d="M1.5 1.75V13.5h13.75a.75.75 0 0 1 0 1.5H.75a.75.75 0 0 1-.75-.75V1.75a.75.75 0 0 1 1.5 0Zm14.28 2.53-5.25 5.25a.75.75 0 0 1-1.06 0L7 7.06 4.28 9.78a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042l3.25-3.25a.75.75 0 0 1 1.06 0L10 7.94l4.72-4.72a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042Z"></path> </svg> <span data-content="Insights">Insights</span> <span id="insights-repo-tab-count" data-pjax-replace="" data-turbo-replace="" title="Not available" data-view-component="true" class="Counter"></span> </a></li> </ul> <div style="visibility:hidden;" data-view-component="true" class="UnderlineNav-actions js-responsive-underlinenav-overflow position-absolute pr-3 pr-md-4 pr-lg-5 right-0"> <action-menu data-select-variant="none" data-view-component="true"> <focus-group direction="vertical" mnemonics retain> <button id="action-menu-2e4d5cb0-2ff6-41fb-8ee9-304d7005fad2-button" popovertarget="action-menu-2e4d5cb0-2ff6-41fb-8ee9-304d7005fad2-overlay" aria-controls="action-menu-2e4d5cb0-2ff6-41fb-8ee9-304d7005fad2-list" aria-haspopup="true" aria-labelledby="tooltip-4305aaf5-de87-4bcd-a98c-fb78c8c705df" type="button" data-view-component="true" class="Button Button--iconOnly Button--secondary Button--medium UnderlineNav-item"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-kebab-horizontal Button-visual"> <path d="M8 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM1.5 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm13 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"></path> </svg> </button><tool-tip id="tooltip-4305aaf5-de87-4bcd-a98c-fb78c8c705df" for="action-menu-2e4d5cb0-2ff6-41fb-8ee9-304d7005fad2-button" popover="manual" data-direction="s" data-type="label" data-view-component="true" class="sr-only position-absolute">Additional navigation options</tool-tip> <anchored-position id="action-menu-2e4d5cb0-2ff6-41fb-8ee9-304d7005fad2-overlay" anchor="action-menu-2e4d5cb0-2ff6-41fb-8ee9-304d7005fad2-button" align="start" side="outside-bottom" anchor-offset="normal" popover="auto" data-view-component="true"> <div data-view-component="true" class="Overlay Overlay--size-auto"> <div data-view-component="true" class="Overlay-body Overlay-body--paddingNone"> <action-list> <div data-view-component="true"> <ul aria-labelledby="action-menu-2e4d5cb0-2ff6-41fb-8ee9-304d7005fad2-button" id="action-menu-2e4d5cb0-2ff6-41fb-8ee9-304d7005fad2-list" role="menu" data-view-component="true" class="ActionListWrap--inset ActionListWrap"> <li hidden="hidden" data-menu-item="i0code-tab" data-targets="action-list.items" role="none" data-view-component="true" class="ActionListItem"> <a tabindex="-1" id="item-9998f2db-fc34-40f6-ad7e-f2d8a0f6f93f" href="/gocode1702/headless-gatsby-multilang" role="menuitem" data-view-component="true" class="ActionListContent ActionListContent--visual16"> <span class="ActionListItem-visual ActionListItem-visual--leading"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-code"> <path d="m11.28 3.22 4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.749.749 0 0 1-1.275-.326.749.749 0 0 1 .215-.734L13.94 8l-3.72-3.72a.749.749 0 0 1 .326-1.275.749.749 0 0 1 .734.215Zm-6.56 0a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042L2.06 8l3.72 3.72a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L.47 8.53a.75.75 0 0 1 0-1.06Z"></path> </svg> </span> <span data-view-component="true" class="ActionListItem-label"> Code </span> </a> </li> <li hidden="hidden" data-menu-item="i1issues-tab" data-targets="action-list.items" role="none" data-view-component="true" class="ActionListItem"> <a tabindex="-1" id="item-0cf7a8b0-7362-4c76-98a6-7da5ff47e0d2" href="/gocode1702/headless-gatsby-multilang/issues" role="menuitem" data-view-component="true" class="ActionListContent ActionListContent--visual16"> <span class="ActionListItem-visual ActionListItem-visual--leading"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-issue-opened"> <path d="M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"></path><path d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0ZM1.5 8a6.5 6.5 0 1 0 13 0 6.5 6.5 0 0 0-13 0Z"></path> </svg> </span> <span data-view-component="true" class="ActionListItem-label"> Issues </span> </a> </li> <li hidden="hidden" data-menu-item="i2pull-requests-tab" data-targets="action-list.items" role="none" data-view-component="true" class="ActionListItem"> <a tabindex="-1" id="item-05552a15-fca7-4fb7-a139-e4f8df1ac361" href="/gocode1702/headless-gatsby-multilang/pulls" role="menuitem" data-view-component="true" class="ActionListContent ActionListContent--visual16"> <span class="ActionListItem-visual ActionListItem-visual--leading"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-git-pull-request"> <path d="M1.5 3.25a2.25 2.25 0 1 1 3 2.122v5.256a2.251 2.251 0 1 1-1.5 0V5.372A2.25 2.25 0 0 1 1.5 3.25Zm5.677-.177L9.573.677A.25.25 0 0 1 10 .854V2.5h1A2.5 2.5 0 0 1 13.5 5v5.628a2.251 2.251 0 1 1-1.5 0V5a1 1 0 0 0-1-1h-1v1.646a.25.25 0 0 1-.427.177L7.177 3.427a.25.25 0 0 1 0-.354ZM3.75 2.5a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Zm0 9.5a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Zm8.25.75a.75.75 0 1 0 1.5 0 .75.75 0 0 0-1.5 0Z"></path> </svg> </span> <span data-view-component="true" class="ActionListItem-label"> Pull requests </span> </a> </li> <li hidden="hidden" data-menu-item="i3projects-tab" data-targets="action-list.items" role="none" data-view-component="true" class="ActionListItem"> <a tabindex="-1" id="item-2fe8ba07-8691-48e0-8ca2-db0e77ac3477" href="/gocode1702/headless-gatsby-multilang/projects" role="menuitem" data-view-component="true" class="ActionListContent ActionListContent--visual16"> <span class="ActionListItem-visual ActionListItem-visual--leading"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-table"> <path d="M0 1.75C0 .784.784 0 1.75 0h12.5C15.216 0 16 .784 16 1.75v12.5A1.75 1.75 0 0 1 14.25 16H1.75A1.75 1.75 0 0 1 0 14.25ZM6.5 6.5v8h7.75a.25.25 0 0 0 .25-.25V6.5Zm8-1.5V1.75a.25.25 0 0 0-.25-.25H6.5V5Zm-13 1.5v7.75c0 .138.112.25.25.25H5v-8ZM5 5V1.5H1.75a.25.25 0 0 0-.25.25V5Z"></path> </svg> </span> <span data-view-component="true" class="ActionListItem-label"> Projects </span> </a> </li> <li hidden="hidden" data-menu-item="i4security-tab" data-targets="action-list.items" role="none" data-view-component="true" class="ActionListItem"> <a tabindex="-1" id="item-8d1b64f5-6832-443b-97a7-3e82a2925da1" href="/gocode1702/headless-gatsby-multilang/security" role="menuitem" data-view-component="true" class="ActionListContent ActionListContent--visual16"> <span class="ActionListItem-visual ActionListItem-visual--leading"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-shield"> <path d="M7.467.133a1.748 1.748 0 0 1 1.066 0l5.25 1.68A1.75 1.75 0 0 1 15 3.48V7c0 1.566-.32 3.182-1.303 4.682-.983 1.498-2.585 2.813-5.032 3.855a1.697 1.697 0 0 1-1.33 0c-2.447-1.042-4.049-2.357-5.032-3.855C1.32 10.182 1 8.566 1 7V3.48a1.75 1.75 0 0 1 1.217-1.667Zm.61 1.429a.25.25 0 0 0-.153 0l-5.25 1.68a.25.25 0 0 0-.174.238V7c0 1.358.275 2.666 1.057 3.86.784 1.194 2.121 2.34 4.366 3.297a.196.196 0 0 0 .154 0c2.245-.956 3.582-2.104 4.366-3.298C13.225 9.666 13.5 8.36 13.5 7V3.48a.251.251 0 0 0-.174-.237l-5.25-1.68ZM8.75 4.75v3a.75.75 0 0 1-1.5 0v-3a.75.75 0 0 1 1.5 0ZM9 10.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path> </svg> </span> <span data-view-component="true" class="ActionListItem-label"> Security </span> </a> </li> <li hidden="hidden" data-menu-item="i5insights-tab" data-targets="action-list.items" role="none" data-view-component="true" class="ActionListItem"> <a tabindex="-1" id="item-30caa516-a9eb-4a43-bfe7-1ec8e8559dd9" href="/gocode1702/headless-gatsby-multilang/pulse" role="menuitem" data-view-component="true" class="ActionListContent ActionListContent--visual16"> <span class="ActionListItem-visual ActionListItem-visual--leading"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-graph"> <path d="M1.5 1.75V13.5h13.75a.75.75 0 0 1 0 1.5H.75a.75.75 0 0 1-.75-.75V1.75a.75.75 0 0 1 1.5 0Zm14.28 2.53-5.25 5.25a.75.75 0 0 1-1.06 0L7 7.06 4.28 9.78a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042l3.25-3.25a.75.75 0 0 1 1.06 0L10 7.94l4.72-4.72a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042Z"></path> </svg> </span> <span data-view-component="true" class="ActionListItem-label"> Insights </span> </a> </li> </ul> </div></action-list> </div> </div></anchored-position> </focus-group> </action-menu></div> </nav> </div> <turbo-frame id="repo-content-turbo-frame" target="_top" data-turbo-action="advance" class=""> <div id="repo-content-pjax-container" class="repository-content " > <h1 class='sr-only'>gocode1702/headless-gatsby-multilang</h1> <div class="clearfix container-xl px-md-4 px-lg-5 px-3"> <div> <div style="max-width: 100%" data-view-component="true" class="Layout Layout--flowRow-until-md react-repos-overview-margin Layout--sidebarPosition-end Layout--sidebarPosition-flowRow-end"> <div data-view-component="true" class="Layout-main"> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/primer-react-765944243383.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/react-core-cd0a67881543.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/react-lib-7b7b5264f6c1.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/octicons-react-45c3a19dd792.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_emotion_is-prop-valid_dist_emotion-is-prop-valid_esm_js-node_modules_emo-62da9f-54c0c921f04b.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_github_mini-throttle_dist_index_js-node_modules_stacktrace-parser_dist_s-e7dcdd-285fc29e9fa5.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_oddbird_popover-polyfill_dist_popover-fn_js-4896ddd4b7bb.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_tanstack_query-core_build_modern_queryObserver_js-node_modules_tanstack_-defd52-585c05e837f3.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_github_hydro-analytics-client_dist_analytics-client_js-node_modules_gith-9002b0-8e5e346f0cbe.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/ui_packages_aria-live_aria-live_ts-ui_packages_promise-with-resolvers-polyfill_promise-with-r-014121-e1792bd5a31e.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/ui_packages_paths_index_ts-193243317670.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/ui_packages_ref-selector_RefSelector_tsx-7a75d9f22fe9.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/ui_packages_hydro-analytics_hydro-analytics_ts-ui_packages_verified-fetch_verified-fetch_ts-u-4672d1-0996d093463a.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/ui_packages_code-view-shared_hooks_use-file-page-payload_ts-ui_packages_code-view-shared_comp-1beb66-b07e414af699.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/ui_packages_commit-attribution_index_ts-ui_packages_commit-checks-status_index_ts-ui_packages-7207c9-0305ce7c88aa.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/repos-overview-ff98ded74203.js"></script> <link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/primer-react.9fa170e9435ed4b922b9.module.css" /> <link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/repos-overview.9cc263aa0716ce801059.module.css" /> <react-partial partial-name="repos-overview" data-ssr="true" data-attempted-ssr="true" > <script type="application/json" data-target="react-partial.embeddedData">{"props":{"initialPayload":{"allShortcutsEnabled":false,"path":"/","repo":{"id":620384312,"defaultBranch":"main","name":"headless-gatsby-multilang","ownerLogin":"gocode1702","currentUserCanPush":false,"isFork":false,"isEmpty":false,"createdAt":"2023-03-28T15:17:39.000Z","ownerAvatar":"https://avatars.githubusercontent.com/u/93603467?v=4","public":true,"private":false,"isOrgOwned":false},"currentUser":null,"refInfo":{"name":"main","listCacheKey":"v0:1680016673.7234108","canEdit":false,"refType":"branch","currentOid":"cda40fe7fffb03a084a9f76dbdacb378b9f7814a"},"tree":{"items":[{"name":"src","path":"src","contentType":"directory"},{"name":".babelrc","path":".babelrc","contentType":"file"},{"name":".eslintrc","path":".eslintrc","contentType":"file"},{"name":".gitignore","path":".gitignore","contentType":"file"},{"name":".npmrc","path":".npmrc","contentType":"file"},{"name":".prettierrc","path":".prettierrc","contentType":"file"},{"name":"LICENSE","path":"LICENSE","contentType":"file"},{"name":"README.md","path":"README.md","contentType":"file"},{"name":"gatsby-browser.jsx","path":"gatsby-browser.jsx","contentType":"file"},{"name":"gatsby-config.js","path":"gatsby-config.js","contentType":"file"},{"name":"gatsby-node.js","path":"gatsby-node.js","contentType":"file"},{"name":"gatsby-ssr.jsx","path":"gatsby-ssr.jsx","contentType":"file"},{"name":"jest.config.js","path":"jest.config.js","contentType":"file"},{"name":"jestPreprocess.js","path":"jestPreprocess.js","contentType":"file"},{"name":"package.json","path":"package.json","contentType":"file"}],"templateDirectorySuggestionUrl":null,"readme":null,"totalCount":15,"showBranchInfobar":false},"fileTree":null,"fileTreeProcessingTime":null,"foldersToFetch":[],"treeExpanded":false,"symbolsExpanded":false,"isOverview":true,"overview":{"banners":{"shouldRecommendReadme":false,"isPersonalRepo":false,"showUseActionBanner":false,"actionSlug":null,"actionId":null,"showProtectBranchBanner":false,"publishBannersInfo":{"dismissActionNoticePath":"/settings/dismiss-notice/publish_action_from_repo","releasePath":"/gocode1702/headless-gatsby-multilang/releases/new?marketplace=true","showPublishActionBanner":false},"interactionLimitBanner":null,"showInvitationBanner":false,"inviterName":null,"actionsMigrationBannerInfo":{"releaseTags":[],"showImmutableActionsMigrationBanner":false,"initialMigrationStatus":null}},"codeButton":{"contactPath":"/contact","isEnterprise":false,"local":{"protocolInfo":{"httpAvailable":true,"sshAvailable":null,"httpUrl":"https://github.com/gocode1702/headless-gatsby-multilang.git","showCloneWarning":null,"sshUrl":null,"sshCertificatesRequired":null,"sshCertificatesAvailable":null,"ghCliUrl":"gh repo clone gocode1702/headless-gatsby-multilang","defaultProtocol":"http","newSshKeyUrl":"/settings/ssh/new","setProtocolPath":"/users/set_protocol"},"platformInfo":{"cloneUrl":"https://desktop.github.com","showVisualStudioCloneButton":false,"visualStudioCloneUrl":"https://windows.github.com","showXcodeCloneButton":false,"xcodeCloneUrl":"xcode://clone?repo=https%3A%2F%2Fgithub.com%2Fgocode1702%2Fheadless-gatsby-multilang","zipballUrl":"/gocode1702/headless-gatsby-multilang/archive/refs/heads/main.zip"}},"newCodespacePath":"/codespaces/new?hide_repo_select=true\u0026repo=620384312"},"popovers":{"rename":null,"renamedParentRepo":null},"commitCount":"46","overviewFiles":[{"displayName":"README.md","repoName":"headless-gatsby-multilang","refName":"main","path":"README.md","preferredFileType":"readme","tabName":"README","richText":"\u003carticle class=\"markdown-body entry-content container-lg\" itemprop=\"text\"\u003e\u003cp dir=\"auto\"\u003e\u003ca target=\"_blank\" rel=\"noopener noreferrer nofollow\" href=\"https://camo.githubusercontent.com/e682c3336422c6bd37745f5337c9771b05156d3fc50d39ddb0f9544b2372f4db/68747470733a2f2f692e6962622e636f2f5742746b3744422f726561646d652e706e67\"\u003e\u003cimg src=\"https://camo.githubusercontent.com/e682c3336422c6bd37745f5337c9771b05156d3fc50d39ddb0f9544b2372f4db/68747470733a2f2f692e6962622e636f2f5742746b3744422f726561646d652e706e67\" alt=\"\" data-canonical-src=\"https://i.ibb.co/WBtk7DB/readme.png\" style=\"max-width: 100%;\"\u003e\u003c/a\u003e\u003c/p\u003e\n\u003cbr\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch1 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eHeadless Multilanguage Starter for Gatsby\u003c/h1\u003e\u003ca id=\"user-content-headless-multilanguage-starter-for-gatsby\" class=\"anchor\" aria-label=\"Permalink: Headless Multilanguage Starter for Gatsby\" href=\"#headless-multilanguage-starter-for-gatsby\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eThe most powerful multilanguage blog starter for Gatsby. Completely headless.\u003c/p\u003e\n\u003cp dir=\"auto\"\u003e\u003ca href=\"https://headlessmultilingual.gatsbyjs.io\" rel=\"nofollow\"\u003eLive Demo\u003c/a\u003e\u003c/p\u003e\n\u003cbr\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch1 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eFeatures\u003c/h1\u003e\u003ca id=\"user-content-features\" class=\"anchor\" aria-label=\"Permalink: Features\" href=\"#features\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cul dir=\"auto\"\u003e\n\u003cli\u003e\u003cstrong\u003e100% Headless\u003c/strong\u003e: Define languages and translate pages, posts, slugs, SEO meta tags and PWA settings directly on DatoCMS.\u003c/li\u003e\n\u003cli\u003eLanguage switcher component swapping between different slugs/paths per locale\u003c/li\u003e\n\u003cli\u003eAutomatic and easy internal links localization using custom Navigator component\u003c/li\u003e\n\u003cli\u003eUser preferred language detection and redirection\u003c/li\u003e\n\u003cli\u003eBuilt-in support for RTL languages such as Arabic or Hebrew\u003c/li\u003e\n\u003cli\u003ePer-locale PWA webmanifest files generation on build time, dynamically injected according to the page locale.\u003c/li\u003e\n\u003cli\u003eSupport for any language code path such as \"/en-GB\" or \"/en\"\u003c/li\u003e\n\u003cli\u003e404 page displaying localized content according to the user preferred language\u003c/li\u003e\n\u003cli\u003eChoose which post or category to translate (and generate) for each locale.\u003c/li\u003e\n\u003cli\u003eRelated posts, social sharing and synthax highlighting.\u003c/li\u003e\n\u003cli\u003eDark mode with CSS variables\u003c/li\u003e\n\u003cli\u003eBuilt without any internationalization plugin, just Gatsby APIs.\u003c/li\u003e\n\u003c/ul\u003e\n\u003cbr\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch1 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eLighthouse scores\u003c/h1\u003e\u003ca id=\"user-content-lighthouse-scores\" class=\"anchor\" aria-label=\"Permalink: Lighthouse scores\" href=\"#lighthouse-scores\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cmarkdown-accessiblity-table\u003e\u003ctable\u003e\n\u003cthead\u003e\n\u003ctr\u003e\n\u003cth\u003ePerformance\u003c/th\u003e\n\u003cth\u003eAccessibility\u003c/th\u003e\n\u003cth\u003eBest Pratices\u003c/th\u003e\n\u003cth\u003eSEO\u003c/th\u003e\n\u003cth\u003ePWA\u003c/th\u003e\n\u003c/tr\u003e\n\u003c/thead\u003e\n\u003ctbody\u003e\n\u003ctr\u003e\n\u003ctd\u003e98 ~ 100\u003c/td\u003e\n\u003ctd\u003e100\u003c/td\u003e\n\u003ctd\u003e100\u003c/td\u003e\n\u003ctd\u003e100\u003c/td\u003e\n\u003ctd\u003e8/9\u003c/td\u003e\n\u003c/tr\u003e\n\u003c/tbody\u003e\n\u003c/table\u003e\u003c/markdown-accessiblity-table\u003e\n\u003cp dir=\"auto\"\u003e\u003ca href=\"https://googlechrome.github.io/lighthouse/viewer/?psiurl=https%3A%2F%2Fheadlessmultilingual.gatsbyjs.io%2F\u0026amp;strategy=mobile\u0026amp;category=performance\u0026amp;category=accessibility\u0026amp;category=best-practices\u0026amp;category=seo\u0026amp;category=pwa\u0026amp;utm_source=lh-chrome-ext\" rel=\"nofollow\"\u003eRun Lighthouse Test\u003c/a\u003e\u003c/p\u003e\n\u003cbr\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch1 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eTable of contents\u003c/h1\u003e\u003ca id=\"user-content-table-of-contents\" class=\"anchor\" aria-label=\"Permalink: Table of contents\" href=\"#table-of-contents\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cul dir=\"auto\"\u003e\n\u003cli\u003e\u003ca href=\"#important-notes\"\u003eImportant notes\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"#configuration\"\u003eConfiguration\u003c/a\u003e\n\u003cul dir=\"auto\"\u003e\n\u003cli\u003e\u003ca href=\"#1-starter-installation\"\u003e1. Starter installation\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"#2-environment-configuration\"\u003e2. Environment configuration\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"#3-environment-testing\"\u003e3. Environment testing\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"#4-understand-content-models-structure\"\u003e4. Understand content models structure\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"#5-finalizing-starter-configuration\"\u003e5. Finalizing starter configuration\u003c/a\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"#managing-content\"\u003eManaging content\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"#styling\"\u003eStyling\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"#seo\"\u003eSEO\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"#pwa\"\u003ePWA\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"#redirect\"\u003eRedirect\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"#404-page\"\u003e404 page\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"#rtl-text-direction-support\"\u003eRTL text direction support\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"#extending-the-starter\"\u003eExtending the starter\u003c/a\u003e\n\u003cul dir=\"auto\"\u003e\n\u003cli\u003e\u003ca href=\"#removing-fields\"\u003eRemoving fields\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"#removing-pages-and-templates\"\u003eRemoving pages and templates\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"#generating-pages\"\u003eGenerating pages\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"#creating-new-templates\"\u003eCreating new templates\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"#internal-link-navigation\"\u003eInternal link navigation\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"#template-design-strategy\"\u003eTemplate design strategy\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"#accessing-languages\"\u003eAccessing languages\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"#formatting-date-and-time\"\u003eFormatting date and time\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"#increase-categories-number-displayed-by-the-dropdown\"\u003eIncrease categories number displayed by the dropdown\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"#seo-1\"\u003eSEO\u003c/a\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"#troubleshooting\"\u003eTroubleshooting\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"#issues\"\u003eIssues\u003c/a\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003cbr\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch1 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eWhy DatoCMS\u003c/h1\u003e\u003ca id=\"user-content-why-datocms\" class=\"anchor\" aria-label=\"Permalink: Why DatoCMS\" href=\"#why-datocms\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eIt is the most powerful headless CMS out there and also, the only one up to the job. You can define app languages directly in the project administration area and query them via GraphQL as well. Moreover, it has dozens of features that give your content editors superpowers.\u003c/p\u003e\n\u003cp dir=\"auto\"\u003eDon't worry about the pricing or any other plan restriction, as long as your website will have less than 300 pages (for each locale 😊) you will never exceed the free developer plan. There are no limits on the locales you can configure in your project.\u003c/p\u003e\n\u003cp dir=\"auto\"\u003eif you are not familiar with DatoCMS, the following links will be useful:\u003c/p\u003e\n\u003cul dir=\"auto\"\u003e\n\u003cli\u003e\u003ca href=\"https://www.gatsbyjs.com/guides/datocms/\" rel=\"nofollow\"\u003eDatoCMS and Gatsby\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://www.datocms.com/docs/content-modelling/validations\" rel=\"nofollow\"\u003eValidations\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://www.datocms.com/docs/content-modelling/blocks\" rel=\"nofollow\"\u003eBlocks\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://www.datocms.com/docs/content-modelling/modular-content\" rel=\"nofollow\"\u003eModular Content Fields\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://www.datocms.com/docs/content-modelling/structured-text\" rel=\"nofollow\"\u003eStructured Text\u003c/a\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp dir=\"auto\"\u003eAlso, you can enjoy instant previews on Gatsby Cloud, without any crazy futher configuration, just save the draft and preview the content.\u003c/p\u003e\n\u003cblockquote\u003e\n\u003cp dir=\"auto\"\u003e\u003cg-emoji class=\"g-emoji\" alias=\"warning\"\u003e⚠️\u003c/g-emoji\u003e This project is not mantained by DatoCMS folks neither I am affiliated with them.\u003c/p\u003e\n\u003c/blockquote\u003e\n\u003cbr\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch1 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eImportant notes\u003c/h1\u003e\u003ca id=\"user-content-important-notes\" class=\"anchor\" aria-label=\"Permalink: Important notes\" href=\"#important-notes\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eThis starter lets you completely focus on \u003cstrong\u003eyour content\u003c/strong\u003e by taking care of all the rest.\u003c/p\u003e\n\u003cp dir=\"auto\"\u003eIf you landed on this repo and your goal is just to setup a multilanguage blog with the same content structure of this starter (articles, category pages and archive pages) all you have to do is to follow all the steps of the \u003ca href=\"#configuration\"\u003econfiguration\u003c/a\u003e section.\u003c/p\u003e\n\u003cp dir=\"auto\"\u003eThe 95% of the whole process is done directly on DatoCMS in a super-friendly environment.\u003c/p\u003e\n\u003cp dir=\"auto\"\u003eOnce new content is translated and published, your website will build accordingly and all the features will work out-of-the-box (page generation, language switcher, internal link navigation, SEO meta tags, PWA webmanifest, redirect, right-to-left text support...).\u003c/p\u003e\n\u003cp dir=\"auto\"\u003eIf you want to deeply customize it, like generating pages with different paths, you can visit the section \u003ca href=\"#extending-the-starter\"\u003eExtending the starter\u003c/a\u003e.\u003c/p\u003e\n\u003cp dir=\"auto\"\u003eIn such case, knowledge of \u003ca href=\"https://www.gatsbyjs.com/docs/how-to/querying-data/page-query/\" rel=\"nofollow\"\u003eGraphQL query variables\u003c/a\u003e and \u003ca href=\"https://www.gatsbyjs.com/docs/reference/config-files/gatsby-node/#createPages\" rel=\"nofollow\"\u003eGatsby createPages API\u003c/a\u003e is \u003cstrong\u003erequired\u003c/strong\u003e.\u003c/p\u003e\n\u003cbr\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch1 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eConfiguration\u003c/h1\u003e\u003ca id=\"user-content-configuration\" class=\"anchor\" aria-label=\"Permalink: Configuration\" href=\"#configuration\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch2 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003e1. Starter installation\u003c/h2\u003e\u003ca id=\"user-content-1-starter-installation\" class=\"anchor\" aria-label=\"Permalink: 1. Starter installation\" href=\"#1-starter-installation\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003col dir=\"auto\"\u003e\n\u003cli\u003eInstall the starter with \u003ca href=\"https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-cli/README.md\"\u003eGatsby CLI\u003c/a\u003e:\u003c/li\u003e\n\u003c/ol\u003e\n\u003cdiv class=\"highlight highlight-text-shell-session notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"gatsby new headless-gatsby-multilang https://github.com/smastrom/headless-gatsby-multilang.git\"\u003e\u003cpre\u003e\u003cspan class=\"pl-c1\"\u003egatsby new headless-gatsby-multilang https://github.com/smastrom/headless-gatsby-multilang.git\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003col start=\"2\" dir=\"auto\"\u003e\n\u003cli\u003e\n\u003cp dir=\"auto\"\u003eLog in to your DatoCMS account and click the button below:\n\u003cbr\u003e\n\u003cbr\u003e\n\u003ca href=\"https://dashboard.datocms.com/clone?projectId=63095\u0026amp;name=Headless+Multilingual\" rel=\"nofollow\"\u003e\u003cimg src=\"https://camo.githubusercontent.com/b0362ceda39754e557723adbf90e9615546e259466c541bb438b963d1d51642c/68747470733a2f2f64617368626f6172642e6461746f636d732e636f6d2f636c6f6e652f627574746f6e2e737667\" alt=\"Clone DatoCMS project\" data-canonical-src=\"https://dashboard.datocms.com/clone/button.svg\" style=\"max-width: 100%;\"\u003e\u003c/a\u003e\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp dir=\"auto\"\u003eIn the cloned project administration area, grab the read-only API token and replace it in your gatsby-config.js file:\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"{\n resolve: 'gatsby-source-datocms',\n options: {\n apiToken: 'YOUR_API_TOKEN',\n },\n},\"\u003e\u003cpre\u003e\u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e\n \u003cspan class=\"pl-c1\"\u003eresolve\u003c/span\u003e: \u003cspan class=\"pl-s\"\u003e'gatsby-source-datocms'\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e\n \u003cspan class=\"pl-c1\"\u003eoptions\u003c/span\u003e: \u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e\n \u003cspan class=\"pl-c1\"\u003eapiToken\u003c/span\u003e: \u003cspan class=\"pl-s\"\u003e'YOUR_API_TOKEN'\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e}\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e\n\u003cspan class=\"pl-kos\"\u003e}\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp dir=\"auto\"\u003eInitialize a new Git repo, commit and push all the files.\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp dir=\"auto\"\u003eSign-in to Gatsby Cloud, add a new site and connect with your Git repo:\u003c/p\u003e\n\u003c/li\u003e\n\u003c/ol\u003e\n\u003cp dir=\"auto\"\u003e\u003ca target=\"_blank\" rel=\"noopener noreferrer nofollow\" href=\"https://camo.githubusercontent.com/dfb96b2511befb50df9e774f2a29f443cc8d7c8bbfc2adcb56d06c7ce0518217/68747470733a2f2f692e6962622e636f2f477876447367382f53636865726d6174612d323032312d30392d32302d616c6c652d31312d34342d30392e706e67\"\u003e\u003cimg src=\"https://camo.githubusercontent.com/dfb96b2511befb50df9e774f2a29f443cc8d7c8bbfc2adcb56d06c7ce0518217/68747470733a2f2f692e6962622e636f2f477876447367382f53636865726d6174612d323032312d30392d32302d616c6c652d31312d34342d30392e706e67\" alt=\"Import to Gatsby Cloud\" data-canonical-src=\"https://i.ibb.co/GxvDsg8/Schermata-2021-09-20-alle-11-44-09.png\" style=\"max-width: 100%;\"\u003e\u003c/a\u003e\u003c/p\u003e\n\u003col start=\"6\" dir=\"auto\"\u003e\n\u003cli\u003eConnect your DatoCMS account to Gatsby Cloud and create the site.\u003c/li\u003e\n\u003c/ol\u003e\n\u003cp dir=\"auto\"\u003e\u003ca target=\"_blank\" rel=\"noopener noreferrer nofollow\" href=\"https://camo.githubusercontent.com/19d923c23540c1cdac3a308ded1474eb50612af4594b61da27ba7e9494dee843/68747470733a2f2f692e6962622e636f2f624651546754732f53636865726d6174612d323032312d30392d32302d616c6c652d31312d35332d34332e706e67\"\u003e\u003cimg src=\"https://camo.githubusercontent.com/19d923c23540c1cdac3a308ded1474eb50612af4594b61da27ba7e9494dee843/68747470733a2f2f692e6962622e636f2f624651546754732f53636865726d6174612d323032312d30392d32302d616c6c652d31312d35332d34332e706e67\" alt=\"Connect DatoCMS\" data-canonical-src=\"https://i.ibb.co/bFQTgTs/Schermata-2021-09-20-alle-11-53-43.png\" style=\"max-width: 100%;\"\u003e\u003c/a\u003e\u003c/p\u003e\n\u003cbr\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch2 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003e2. Environment configuration\u003c/h2\u003e\u003ca id=\"user-content-2-environment-configuration\" class=\"anchor\" aria-label=\"Permalink: 2. Environment configuration\" href=\"#2-environment-configuration\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003ePlease make sure that the development server is not running before following these steps.\u003c/p\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch3 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003e1. Access project languages\u003c/h3\u003e\u003ca id=\"user-content-1-access-project-languages\" class=\"anchor\" aria-label=\"Permalink: 1. Access project languages\" href=\"#1-access-project-languages\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eOn DatoCMS navigate to: \u003cstrong\u003eSettings \u0026gt; Environment \u0026gt; Settings\u003c/strong\u003e and check for the starter default languages:\u003c/p\u003e\n\u003cp dir=\"auto\"\u003e\u003ca target=\"_blank\" rel=\"noopener noreferrer nofollow\" href=\"https://camo.githubusercontent.com/d2cf997ef44497340b1910fe1c61cf4e6a7c9d72775a762efdebadf966fe32bc/68747470733a2f2f692e6962622e636f2f685a43634e74732f53636865726d6174612d323032322d30322d31382d616c6c652d31382d35332d30332e706e67\"\u003e\u003cimg src=\"https://camo.githubusercontent.com/d2cf997ef44497340b1910fe1c61cf4e6a7c9d72775a762efdebadf966fe32bc/68747470733a2f2f692e6962622e636f2f685a43634e74732f53636865726d6174612d323032322d30322d31382d616c6c652d31382d35332d30332e706e67\" alt=\"\" data-canonical-src=\"https://i.ibb.co/hZCcNts/Schermata-2022-02-18-alle-18-53-03.png\" style=\"max-width: 100%;\"\u003e\u003c/a\u003e\u003c/p\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch3 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003e2. Remove unwanted languages and pick a fallback language\u003c/h3\u003e\u003ca id=\"user-content-2-remove-unwanted-languages-and-pick-a-fallback-language\" class=\"anchor\" aria-label=\"Permalink: 2. Remove unwanted languages and pick a fallback language\" href=\"#2-remove-unwanted-languages-and-pick-a-fallback-language\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eIf your website final language list won't include any of the fully translated starter language codes (\u003ccode\u003een\u003c/code\u003e, \u003ccode\u003ees-ES\u003c/code\u003e or \u003ccode\u003eit\u003c/code\u003e), pick one of your choice (for example \u003ccode\u003een\u003c/code\u003e) and \u003cins\u003e\u003cstrong\u003edo not delete it\u003c/strong\u003e\u003c/ins\u003e, just keep it in the list (for the being) and \u003cstrong\u003edelete the others\u003c/strong\u003e.\u003c/p\u003e\n\u003cp dir=\"auto\"\u003eOtherwise, just delete the unnecessary languages, leave the ones you will use and pick \u003cstrong\u003eone of your choice\u003c/strong\u003e.\u003c/p\u003e\n\u003cp dir=\"auto\"\u003eStarting from now this is your \u003cstrong\u003efallback language\u003c/strong\u003e.\u003c/p\u003e\n\u003cblockquote\u003e\n\u003cp dir=\"auto\"\u003eThis starter is using fallbacks for \u003ccode\u003ear-AE\u003c/code\u003e, so do not consider it as a language you can pick.\u003c/p\u003e\n\u003c/blockquote\u003e\n\u003cp dir=\"auto\"\u003e\u003ca target=\"_blank\" rel=\"noopener noreferrer nofollow\" href=\"https://camo.githubusercontent.com/97962f6bb23a632e4fe66ae066bd1b87087f42b7c4499b7788d20086af9ff844/68747470733a2f2f692e6962622e636f2f767334737635462f53636865726d6174612d323032322d30322d31382d616c6c652d31382d35332d35342e706e67\"\u003e\u003cimg src=\"https://camo.githubusercontent.com/97962f6bb23a632e4fe66ae066bd1b87087f42b7c4499b7788d20086af9ff844/68747470733a2f2f692e6962622e636f2f767334737635462f53636865726d6174612d323032322d30322d31382d616c6c652d31382d35332d35342e706e67\" alt=\"\" data-canonical-src=\"https://i.ibb.co/vs4sv5F/Schermata-2022-02-18-alle-18-53-54.png\" style=\"max-width: 100%;\"\u003e\u003c/a\u003e\u003c/p\u003e\n\u003cblockquote\u003e\n\u003cp dir=\"auto\"\u003e\u003cg-emoji class=\"g-emoji\" alias=\"warning\"\u003e⚠️\u003c/g-emoji\u003e If for example, you are planning to add \u003ccode\u003eEnglish (United Kingdom) \"en-GB\"\u003c/code\u003e and to remove \u003ccode\u003e\"en\"\u003c/code\u003e, consider \u003ccode\u003e\"en-GB\"\u003c/code\u003e as a \u003cstrong\u003edifferent language\u003c/strong\u003e and keep \u003ccode\u003e\"en\"\u003c/code\u003e in the list as fallback.\u003c/p\u003e\n\u003c/blockquote\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch3 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003e3. Add new languages\u003c/h3\u003e\u003ca id=\"user-content-3-add-new-languages\" class=\"anchor\" aria-label=\"Permalink: 3. Add new languages\" href=\"#3-add-new-languages\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eChoose any kind of lang code you prefer from the dropdown and add the languages:\u003c/p\u003e\n\u003cp dir=\"auto\"\u003e\u003ca target=\"_blank\" rel=\"noopener noreferrer nofollow\" href=\"https://camo.githubusercontent.com/40554f08d3cd19aedc07f36bbc735801f17208c74b31512c152eb2f4bbb771cd/68747470733a2f2f692e6962622e636f2f4b77326e74666b2f53636865726d6174612d323032322d30322d31382d616c6c652d31382d35362d34342e706e67\"\u003e\u003cimg src=\"https://camo.githubusercontent.com/40554f08d3cd19aedc07f36bbc735801f17208c74b31512c152eb2f4bbb771cd/68747470733a2f2f692e6962622e636f2f4b77326e74666b2f53636865726d6174612d323032322d30322d31382d616c6c652d31382d35362d34342e706e67\" alt=\"\" data-canonical-src=\"https://i.ibb.co/Kw2ntfk/Schermata-2022-02-18-alle-18-56-44.png\" style=\"max-width: 100%;\"\u003e\u003c/a\u003e\u003c/p\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch3 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003e4. Set the default language\u003c/h3\u003e\u003ca id=\"user-content-4-set-the-default-language\" class=\"anchor\" aria-label=\"Permalink: 4. Set the default language\" href=\"#4-set-the-default-language\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eDrag to the left at first position your website \u003cstrong\u003edefault language\u003c/strong\u003e, and rearrange in order of importance the others:\u003c/p\u003e\n\u003cp dir=\"auto\"\u003e\u003ca target=\"_blank\" rel=\"noopener noreferrer nofollow\" href=\"https://camo.githubusercontent.com/de359b2c1f388eb22f2ee8d566fe9bc7a1034d2b76a5639d96c474cdc60930cb/68747470733a2f2f692e6962622e636f2f43573554796d6e2f53636865726d6174612d323032322d30322d31382d616c6c652d31382d35372d34342e706e67\"\u003e\u003cimg src=\"https://camo.githubusercontent.com/de359b2c1f388eb22f2ee8d566fe9bc7a1034d2b76a5639d96c474cdc60930cb/68747470733a2f2f692e6962622e636f2f43573554796d6e2f53636865726d6174612d323032322d30322d31382d616c6c652d31382d35372d34342e706e67\" alt=\"\" data-canonical-src=\"https://i.ibb.co/CW5Tymn/Schermata-2022-02-18-alle-18-57-44.png\" style=\"max-width: 100%;\"\u003e\u003c/a\u003e\u003c/p\u003e\n\u003cp dir=\"auto\"\u003e💾 Save your project settings.\u003c/p\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch3 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003e5. Set the fallbacks\u003c/h3\u003e\u003ca id=\"user-content-5-set-the-fallbacks\" class=\"anchor\" aria-label=\"Permalink: 5. Set the fallbacks\" href=\"#5-set-the-fallbacks\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eOpen \u003cstrong\u003egatsby-config.js\u003c/strong\u003e and set the \u003cstrong\u003efallbacks\u003c/strong\u003e as displayed below:\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"{\n resolve: 'gatsby-source-datocms',\n options: {\n apiToken: '\u0026lt;YOUR_PUBLIC_API_TOKEN\u0026gt;',\n localeFallbacks: {\n 'zh': 'en',\n 'pt-BR' : 'en',\n },\n },\n},\"\u003e\u003cpre\u003e\u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e\n \u003cspan class=\"pl-c1\"\u003eresolve\u003c/span\u003e: \u003cspan class=\"pl-s\"\u003e'gatsby-source-datocms'\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e\n \u003cspan class=\"pl-c1\"\u003eoptions\u003c/span\u003e: \u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e\n \u003cspan class=\"pl-c1\"\u003eapiToken\u003c/span\u003e: \u003cspan class=\"pl-s\"\u003e'\u0026lt;YOUR_PUBLIC_API_TOKEN\u0026gt;'\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e\n \u003cspan class=\"pl-c1\"\u003elocaleFallbacks\u003c/span\u003e: \u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e\n \u003cspan class=\"pl-s\"\u003e'zh'\u003c/span\u003e: \u003cspan class=\"pl-s\"\u003e'en'\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e\n \u003cspan class=\"pl-s\"\u003e'pt-BR'\u003c/span\u003e : \u003cspan class=\"pl-s\"\u003e'en'\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e}\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e}\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e\n\u003cspan class=\"pl-kos\"\u003e}\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eYou should create a property for each new language (not included in the starter) and assign to it the fallback picked before (\"en\").\u003c/p\u003e\n\u003cp dir=\"auto\"\u003e💾 Save the file.\u003c/p\u003e\n\u003cbr\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch2 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003e3. Environment testing\u003c/h2\u003e\u003ca id=\"user-content-3-environment-testing\" class=\"anchor\" aria-label=\"Permalink: 3. Environment testing\" href=\"#3-environment-testing\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch3 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eLocal environment\u003c/h3\u003e\u003ca id=\"user-content-local-environment\" class=\"anchor\" aria-label=\"Permalink: Local environment\" href=\"#local-environment\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eNavigate into your project folder and run \u003ccode\u003egatsby develop\u003c/code\u003e. Check on your terminal, at some point you will see something like:\u003c/p\u003e\n\u003cp dir=\"auto\"\u003e\u003ca target=\"_blank\" rel=\"noopener noreferrer nofollow\" href=\"https://camo.githubusercontent.com/403975ac09dc73a40c6aadc4e4065a6746af77c5e2dba96cdf054cfe90783cea/68747470733a2f2f692e6962622e636f2f714246393357432f53636865726d6174612d323032322d30322d31352d616c6c652d32332d34302d32392e706e67\"\u003e\u003cimg src=\"https://camo.githubusercontent.com/403975ac09dc73a40c6aadc4e4065a6746af77c5e2dba96cdf054cfe90783cea/68747470733a2f2f692e6962622e636f2f714246393357432f53636865726d6174612d323032322d30322d31352d616c6c652d32332d34302d32392e706e67\" alt=\"Console infos\" data-canonical-src=\"https://i.ibb.co/qBF93WC/Schermata-2022-02-15-alle-23-40-29.png\" style=\"max-width: 100%;\"\u003e\u003c/a\u003e\u003c/p\u003e\n\u003cp dir=\"auto\"\u003eBy opening \u003ca href=\"http://localhost:8000\" rel=\"nofollow\"\u003ehttp://localhost:8000\u003c/a\u003e you will notice that your languages are now displayed in the switcher, in the same order as you set before in your administration area:\u003c/p\u003e\n\u003cp dir=\"auto\"\u003e\u003ca target=\"_blank\" rel=\"noopener noreferrer nofollow\" href=\"https://camo.githubusercontent.com/4d3bfc630939b9f3041dfa33191d96f2b31b2d7fe60b65700667b16c9929a27c/68747470733a2f2f692e6962622e636f2f4c52446a4a4a502f53636865726d6174612d323032322d30322d31352d616c6c652d32332d31332d35312e706e67\"\u003e\u003cimg src=\"https://camo.githubusercontent.com/4d3bfc630939b9f3041dfa33191d96f2b31b2d7fe60b65700667b16c9929a27c/68747470733a2f2f692e6962622e636f2f4c52446a4a4a502f53636865726d6174612d323032322d30322d31352d616c6c652d32332d31332d35312e706e67\" alt=\"Switcher\" data-canonical-src=\"https://i.ibb.co/LRDjJJP/Schermata-2022-02-15-alle-23-13-51.png\" style=\"max-width: 100%;\"\u003e\u003c/a\u003e\u003c/p\u003e\n\u003cp dir=\"auto\"\u003eAs you can see pages are generated with proper paths, SEO meta tags and the webmanifest localized are injected to the head for each language.\u003c/p\u003e\n\u003cp dir=\"auto\"\u003eWhenever you will change the languages order on Dato, your website will be generated accordingly.\u003c/p\u003e\n\u003cp dir=\"auto\"\u003eYou can switch language and navigate the website. Content will still be displayed in fallback language.\u003c/p\u003e\n\u003cbr\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch3 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eGatsby Cloud (optional)\u003c/h3\u003e\u003ca id=\"user-content-gatsby-cloud-optional\" class=\"anchor\" aria-label=\"Permalink: Gatsby Cloud (optional)\" href=\"#gatsby-cloud-optional\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eCommit and push your changes. Access Gatsby Cloud and monitor the build trigged by your Git connection, it should be ready soon.\u003c/p\u003e\n\u003cp dir=\"auto\"\u003eOnce the build is completed, if you visit your website (via the free domain assigned by Gatsby Cloud) you should be able to see your website live just like you see it locally.\u003c/p\u003e\n\u003cp dir=\"auto\"\u003eA build will also be triggered by the DatoCMS connection everytime you publish content.\u003c/p\u003e\n\u003cbr\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch2 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003e4. Understand content models structure\u003c/h2\u003e\u003ca id=\"user-content-4-understand-content-models-structure\" class=\"anchor\" aria-label=\"Permalink: 4. Understand content models structure\" href=\"#4-understand-content-models-structure\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eBefore finalizing the starter configuration make sure to have read and understood this section.\u003c/p\u003e\n\u003cp dir=\"auto\"\u003eI have organized the vertical menu of the content editing area according to the content models' \u003ca href=\"https://www.datocms.com/docs/content-modelling\" rel=\"nofollow\"\u003etype\u003c/a\u003e and purpose:\u003c/p\u003e\n\u003cp dir=\"auto\"\u003e\u003ca target=\"_blank\" rel=\"noopener noreferrer nofollow\" href=\"https://camo.githubusercontent.com/a6f3c5bf3650f32498bd9bd4107d2d47bf699e137bac373a345c0b25efc8e7f7/68747470733a2f2f692e6962622e636f2f714644787972672f53636865726d6174612d323032322d30322d31382d616c6c652d31392d30312d35372e706e67\"\u003e\u003cimg src=\"https://camo.githubusercontent.com/a6f3c5bf3650f32498bd9bd4107d2d47bf699e137bac373a345c0b25efc8e7f7/68747470733a2f2f692e6962622e636f2f714644787972672f53636865726d6174612d323032322d30322d31382d616c6c652d31392d30312d35372e706e67\" alt=\"\" data-canonical-src=\"https://i.ibb.co/qFDxyrg/Schermata-2022-02-18-alle-19-01-57.png\" style=\"max-width: 100%;\"\u003e\u003c/a\u003e\u003c/p\u003e\n\u003cp dir=\"auto\"\u003e\u003ccode\u003eGatsby Node\u003c/code\u003e models are queried by \u003ca href=\"https://www.gatsbyjs.com/docs/reference/config-files/gatsby-node/\" rel=\"nofollow\"\u003egatsby-node.js\u003c/a\u003e in order to generate pages and also by the templates (used to generate such pages) in order to render the correspondent data fields.\u003c/p\u003e\n\u003cp dir=\"auto\"\u003e\u003ccode\u003eData-only\u003c/code\u003e models are queried in different JSX files to render some data but they are not used to generate any page (hence the name \u003cem\u003edata-only\u003c/em\u003e).\u003c/p\u003e\n\u003cp dir=\"auto\"\u003eBasically, what differs between the two groups is that \u003ccode\u003eGatsby Node\u003c/code\u003e models have a localizable \u003ccode\u003eslug\u003c/code\u003e field used to build the path and a localizable \u003ccode\u003eseo\u003c/code\u003e field to render the meta tags.\u003c/p\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch3 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003e1. Gatsby Node\u003c/h3\u003e\u003ca id=\"user-content-1-gatsby-node\" class=\"anchor\" aria-label=\"Permalink: 1. Gatsby Node\" href=\"#1-gatsby-node\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003e\u003cstrong\u003e\u003cins\u003eSingle instance\u003c/ins\u003e\u003c/strong\u003e\u003c/p\u003e\n\u003cp dir=\"auto\"\u003e\u003cstrong\u003eHomepage\u003c/strong\u003e - Used to generate the homepage:\u003c/p\u003e\n\u003cul dir=\"auto\"\u003e\n\u003cli\u003eDefault language: \u003ccode\u003e/\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003eOther languages : \u003ccode\u003e/it-IT\u003c/code\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp dir=\"auto\"\u003e\u003cstrong\u003eCategories Archive\u003c/strong\u003e - Used to generate the categories archive page:\u003c/p\u003e\n\u003cul dir=\"auto\"\u003e\n\u003cli\u003eDefault language: \u003ccode\u003e/categories\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003eOther languages : \u003ccode\u003e/it-IT/categorie\u003c/code\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp dir=\"auto\"\u003e\u003cstrong\u003eBlog Root\u003c/strong\u003e - Used to generate the blog root page:\u003c/p\u003e\n\u003cul dir=\"auto\"\u003e\n\u003cli\u003eDefault language: \u003ccode\u003e/blog\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003eOther languages : \u003ccode\u003e/it-IT/articoli\u003c/code\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp dir=\"auto\"\u003e\u003cstrong\u003e\u003cins\u003eCollections\u003c/ins\u003e\u003c/strong\u003e\u003c/p\u003e\n\u003cp dir=\"auto\"\u003e\u003cstrong\u003eOther pages\u003c/strong\u003e - Used to generate pages using a shared template such as \u003ccode\u003e/guide\u003c/code\u003e and \u003ccode\u003e/features\u003c/code\u003e\u003c/p\u003e\n\u003cul dir=\"auto\"\u003e\n\u003cli\u003eDefault language: \u003ccode\u003e/guide\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003eOther languages : \u003ccode\u003e/it-IT/guida\u003c/code\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp dir=\"auto\"\u003e\u003cstrong\u003eCategories\u003c/strong\u003e - Used to generate category pages:\u003c/p\u003e\n\u003cul dir=\"auto\"\u003e\n\u003cli\u003eDefault language: \u003ccode\u003e/blog/react\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003eOther languages : \u003ccode\u003e/it-IT/articoli/react\u003c/code\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp dir=\"auto\"\u003e\u003cstrong\u003ePosts\u003c/strong\u003e - Used to generate post pages:\u003c/p\u003e\n\u003cul dir=\"auto\"\u003e\n\u003cli\u003eDefault language: \u003ccode\u003e/blog/react/rendering-elements\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003eOther languages : \u003ccode\u003e/it-IT/articoli/react/renderizzare-elementi\u003c/code\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003chr\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch3 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003e2. Data-only\u003c/h3\u003e\u003ca id=\"user-content-2-data-only\" class=\"anchor\" aria-label=\"Permalink: 2. Data-only\" href=\"#2-data-only\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003e\u003cstrong\u003e\u003cins\u003eCollections\u003c/ins\u003e\u003c/strong\u003e\u003c/p\u003e\n\u003cp dir=\"auto\"\u003e\u003cstrong\u003eAuthors\u003c/strong\u003e - A collections of records representing the authors of your blog. These records can be linked to any post.\u003c/p\u003e\n\u003cp dir=\"auto\"\u003e\u003cstrong\u003e\u003cins\u003eSingle instance\u003c/ins\u003e\u003c/strong\u003e\u003c/p\u003e\n\u003cp dir=\"auto\"\u003e\u003cstrong\u003eMenu\u003c/strong\u003e - In this content model you can add or remove a menu item. You can order them via drag-n-drop and link to each of them a record of the Gatsby Node group.\u003c/p\u003e\n\u003cp dir=\"auto\"\u003e\u003cstrong\u003eFooter\u003c/strong\u003e - Contains the footer content.\u003c/p\u003e\n\u003cp dir=\"auto\"\u003e\u003cstrong\u003e404 Page\u003c/strong\u003e - 404 page content, fully localizable.\u003c/p\u003e\n\u003cp dir=\"auto\"\u003e\u003cstrong\u003eSeo and PWA\u003c/strong\u003e - Fields related to Global SEO and PWA webmanifest.\u003c/p\u003e\n\u003cp dir=\"auto\"\u003e\u003cstrong\u003eMisc strings\u003c/strong\u003e - String fields used site-wide such as \"Recent posts\" or \"See all categories\".\u003c/p\u003e\n\u003cbr\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch2 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003e5. Finalizing starter configuration\u003c/h2\u003e\u003ca id=\"user-content-5-finalizing-starter-configuration\" class=\"anchor\" aria-label=\"Permalink: 5. Finalizing starter configuration\" href=\"#5-finalizing-starter-configuration\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch3 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003e1. Get rid of blog dummy content\u003c/h3\u003e\u003ca id=\"user-content-1-get-rid-of-blog-dummy-content\" class=\"anchor\" aria-label=\"Permalink: 1. Get rid of blog dummy content\" href=\"#1-get-rid-of-blog-dummy-content\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eMake sure your development server is not running.\u003c/p\u003e\n\u003col dir=\"auto\"\u003e\n\u003cli\u003eDelete any \u003cstrong\u003earticle / category / author\u003c/strong\u003e \u003cstrong\u003e\u003cins\u003erecord\u003c/ins\u003e\u003c/strong\u003e coming with this starter (do not delete the content models!).\u003c/li\u003e\n\u003cli\u003eCreate and publish your first category and author records and translate the fields for any locale.\u003c/li\u003e\n\u003cli\u003eCreate and publish your first post, translate the fields for any locale and \u003ca href=\"#linking-categories-and-authors-to-blog-posts\"\u003elink\u003c/a\u003e the category and the author just created to the post.\u003c/li\u003e\n\u003c/ol\u003e\n\u003cblockquote\u003e\n\u003cp dir=\"auto\"\u003e\u003cg-emoji class=\"g-emoji\" alias=\"warning\"\u003e⚠️\u003c/g-emoji\u003e Since the fallback language picked before is still necessary to finalize the configuration, \u003cstrong\u003etranslate also its fields\u003c/strong\u003e. You can copy-paste from another language or enter some dummy data, it doesn't matter. It will take 30 seconds.\u003c/p\u003e\n\u003c/blockquote\u003e\n\u003col start=\"5\" dir=\"auto\"\u003e\n\u003cli\u003eRun \u003ccode\u003egatsby develop\u003c/code\u003e and test the outcome\u003c/li\u003e\n\u003c/ol\u003e\n\u003cp dir=\"auto\"\u003eFrom now on when you will add a category or a post (or you will edit it) the layout will change accordingly and new pages with proper paths will be generated as well. Usually, it takes 2 to 4 seconds to see the edits live on your dev server.\u003c/p\u003e\n\u003cbr\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch3 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003e2. Translate the starter base content\u003c/h3\u003e\u003ca id=\"user-content-2-translate-the-starter-base-content\" class=\"anchor\" aria-label=\"Permalink: 2. Translate the starter base content\" href=\"#2-translate-the-starter-base-content\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eTranslate any other content models' record and field such as \u003ccode\u003eHomepage\u003c/code\u003e, \u003ccode\u003eCategories archive\u003c/code\u003e, \u003ccode\u003eBlog root\u003c/code\u003e, \u003ccode\u003eGlobal SEO and PWA\u003c/code\u003e, \u003ccode\u003eMisc text strings\u003c/code\u003e etc...\u003c/p\u003e\n\u003cp dir=\"auto\"\u003e\u003cem\u003eYou will always notice which records needs to be translated:\u003c/em\u003e\u003c/p\u003e\n\u003cp dir=\"auto\"\u003e\u003ca target=\"_blank\" rel=\"noopener noreferrer nofollow\" href=\"https://camo.githubusercontent.com/538dc871977e4ff6ba1644a27dd0e9c5c69026c8ef58b70baf490038f02a43dc/68747470733a2f2f692e6962622e636f2f573353735435622f53636865726d6174612d323032322d30322d32302d616c6c652d30312d35372d31392e706e67\"\u003e\u003cimg src=\"https://camo.githubusercontent.com/538dc871977e4ff6ba1644a27dd0e9c5c69026c8ef58b70baf490038f02a43dc/68747470733a2f2f692e6962622e636f2f573353735435622f53636865726d6174612d323032322d30322d32302d616c6c652d30312d35372d31392e706e67\" alt=\"\" data-canonical-src=\"https://i.ibb.co/W3SsT5b/Schermata-2022-02-20-alle-01-57-19.png\" style=\"max-width: 100%;\"\u003e\u003c/a\u003e\u003c/p\u003e\n\u003cmarkdown-accessiblity-table\u003e\u003ctable\u003e\n\u003cthead\u003e\n\u003ctr\u003e\n\u003cth\u003e❌\u003c/th\u003e\n\u003cth\u003e✅\u003c/th\u003e\n\u003c/tr\u003e\n\u003c/thead\u003e\n\u003ctbody\u003e\n\u003ctr\u003e\n\u003ctd\u003e\u003ca target=\"_blank\" rel=\"noopener noreferrer nofollow\" href=\"https://camo.githubusercontent.com/6e1a378c870a8e106fdfdea2a7aca6343f0e34421e32987f86bdb182b159007b/68747470733a2f2f692e6962622e636f2f7470476e464e462f53636865726d6174612d323032322d30322d32302d616c6c652d30312d35392d32302e706e67\"\u003e\u003cimg src=\"https://camo.githubusercontent.com/6e1a378c870a8e106fdfdea2a7aca6343f0e34421e32987f86bdb182b159007b/68747470733a2f2f692e6962622e636f2f7470476e464e462f53636865726d6174612d323032322d30322d32302d616c6c652d30312d35392d32302e706e67\" alt=\"\" data-canonical-src=\"https://i.ibb.co/tpGnFNF/Schermata-2022-02-20-alle-01-59-20.png\" style=\"max-width: 100%;\"\u003e\u003c/a\u003e\u003c/td\u003e\n\u003ctd\u003e\u003ca target=\"_blank\" rel=\"noopener noreferrer nofollow\" href=\"https://camo.githubusercontent.com/f010449b8c3c83430960cc6636a02eb566ff1446b007a1b3f1b87f810daaf65f/68747470733a2f2f692e6962622e636f2f6332627847395a2f53636865726d6174612d323032322d30322d32302d616c6c652d30312d35392d33322e706e67\"\u003e\u003cimg src=\"https://camo.githubusercontent.com/f010449b8c3c83430960cc6636a02eb566ff1446b007a1b3f1b87f810daaf65f/68747470733a2f2f692e6962622e636f2f6332627847395a2f53636865726d6174612d323032322d30322d32302d616c6c652d30312d35392d33322e706e67\" alt=\"\" data-canonical-src=\"https://i.ibb.co/c2bxG9Z/Schermata-2022-02-20-alle-01-59-32.png\" style=\"max-width: 100%;\"\u003e\u003c/a\u003e\u003c/td\u003e\n\u003c/tr\u003e\n\u003c/tbody\u003e\n\u003c/table\u003e\u003c/markdown-accessiblity-table\u003e\n\u003cp dir=\"auto\"\u003e\u003cg-emoji class=\"g-emoji\" alias=\"warning\"\u003e⚠️\u003c/g-emoji\u003e Make also sure that you have at least one record for each content model of type \u003cem\u003ecollection\u003c/em\u003e.\u003c/p\u003e\n\u003cbr\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch3 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003e3. Get rid of the starter fallback language\u003c/h3\u003e\u003ca id=\"user-content-3-get-rid-of-the-starter-fallback-language\" class=\"anchor\" aria-label=\"Permalink: 3. Get rid of the starter fallback language\" href=\"#3-get-rid-of-the-starter-fallback-language\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cblockquote\u003e\n\u003cp dir=\"auto\"\u003e\u003cg-emoji class=\"g-emoji\" alias=\"warning\"\u003e⚠️\u003c/g-emoji\u003e You have to follow this step only if you had to pick as fallback a starter language that won't be included in your website language list.\u003c/p\u003e\n\u003c/blockquote\u003e\n\u003col dir=\"auto\"\u003e\n\u003cli\u003eOnce fields' content has been translated in any language you added, navigate to your administration area and \u003cstrong\u003edelete the fallback language\u003c/strong\u003e \u003ca href=\"#2-Remove-unwanted-languages-and-pick-a-fallback-language\"\u003epicked before\u003c/a\u003e from your languages list:\u003c/li\u003e\n\u003c/ol\u003e\n\u003cp dir=\"auto\"\u003e\u003ca target=\"_blank\" rel=\"noopener noreferrer nofollow\" href=\"https://camo.githubusercontent.com/2fcceb239767b1f9f26303815002bc64076122bdd5e5b766e2f27a75240cabe6/68747470733a2f2f692e6962622e636f2f465736376378332f53636865726d6174612d323032322d30322d31392d616c6c652d31372d35392d35392e706e67\"\u003e\u003cimg src=\"https://camo.githubusercontent.com/2fcceb239767b1f9f26303815002bc64076122bdd5e5b766e2f27a75240cabe6/68747470733a2f2f692e6962622e636f2f465736376378332f53636865726d6174612d323032322d30322d31392d616c6c652d31372d35392d35392e706e67\" alt=\"\" data-canonical-src=\"https://i.ibb.co/FW67cx3/Schermata-2022-02-19-alle-17-59-59.png\" style=\"max-width: 100%;\"\u003e\u003c/a\u003e\u003c/p\u003e\n\u003col start=\"2\" dir=\"auto\"\u003e\n\u003cli\u003eOpen \u003cstrong\u003egatsby-config.js\u003c/strong\u003e and delete the fallback properties:\u003c/li\u003e\n\u003c/ol\u003e\n\u003cdiv class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"{\n resolve: 'gatsby-source-datocms',\n options: {\n apiToken: '\u0026lt;YOUR_PUBLIC_API_TOKEN\u0026gt;',\n localeFallbacks: { // \u0026lt;-- Delete from here\n zh: 'en',\n 'pt-BR' : 'en',\n }, // \u0026lt;-- to here\n },\n},\"\u003e\u003cpre\u003e\u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e\n \u003cspan class=\"pl-c1\"\u003eresolve\u003c/span\u003e: \u003cspan class=\"pl-s\"\u003e'gatsby-source-datocms'\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e\n \u003cspan class=\"pl-c1\"\u003eoptions\u003c/span\u003e: \u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e\n \u003cspan class=\"pl-c1\"\u003eapiToken\u003c/span\u003e: \u003cspan class=\"pl-s\"\u003e'\u0026lt;YOUR_PUBLIC_API_TOKEN\u0026gt;'\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e\n \u003cspan class=\"pl-c1\"\u003elocaleFallbacks\u003c/span\u003e: \u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e \u003cspan class=\"pl-c\"\u003e// \u0026lt;-- Delete from here\u003c/span\u003e\n \u003cspan class=\"pl-c1\"\u003ezh\u003c/span\u003e: \u003cspan class=\"pl-s\"\u003e'en'\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e\n \u003cspan class=\"pl-s\"\u003e'pt-BR'\u003c/span\u003e : \u003cspan class=\"pl-s\"\u003e'en'\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e}\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e \u003cspan class=\"pl-c\"\u003e// \u0026lt;-- to here\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e}\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e\n\u003cspan class=\"pl-kos\"\u003e}\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cbr\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch3 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003e4. Set proper fallbacks (optional)\u003c/h3\u003e\u003ca id=\"user-content-4-set-proper-fallbacks-optional\" class=\"anchor\" aria-label=\"Permalink: 4. Set proper fallbacks (optional)\" href=\"#4-set-proper-fallbacks-optional\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eIf your plan is to publish content in default language and to translate other languages later on, set the fallbacks in gatsby-config.js:\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"{\n resolve: 'gatsby-source-datocms',\n options: {\n apiToken: '\u0026lt;YOUR_PUBLIC_API_TOKEN\u0026gt;',\n localeFallbacks: {\n 'pt-BR': 'zh',\n },\n },\n},\"\u003e\u003cpre\u003e\u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e\n \u003cspan class=\"pl-c1\"\u003eresolve\u003c/span\u003e: \u003cspan class=\"pl-s\"\u003e'gatsby-source-datocms'\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e\n \u003cspan class=\"pl-c1\"\u003eoptions\u003c/span\u003e: \u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e\n \u003cspan class=\"pl-c1\"\u003eapiToken\u003c/span\u003e: \u003cspan class=\"pl-s\"\u003e'\u0026lt;YOUR_PUBLIC_API_TOKEN\u0026gt;'\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e\n \u003cspan class=\"pl-c1\"\u003elocaleFallbacks\u003c/span\u003e: \u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e\n \u003cspan class=\"pl-s\"\u003e'pt-BR'\u003c/span\u003e: \u003cspan class=\"pl-s\"\u003e'zh'\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e}\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e}\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e\n\u003cspan class=\"pl-kos\"\u003e}\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eIn this way pages generation won't fail for untranslated records since any untranslated field queried via GraphQL will return the value of the fallback language you just set.\u003c/p\u003e\n\u003cblockquote\u003e\n\u003cp dir=\"auto\"\u003e😉 By now, you should be able to add and translate posts, categories and any other record you want and the starter will take care of the rest. Check the next section to have a complete overview on how to handle blog content.\u003c/p\u003e\n\u003c/blockquote\u003e\n\u003cbr\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch1 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eManaging content\u003c/h1\u003e\u003ca id=\"user-content-managing-content\" class=\"anchor\" aria-label=\"Permalink: Managing content\" href=\"#managing-content\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch2 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eChoose which content to generate (and translate)\u003c/h2\u003e\u003ca id=\"user-content-choose-which-content-to-generate-and-translate\" class=\"anchor\" aria-label=\"Permalink: Choose which content to generate (and translate)\" href=\"#choose-which-content-to-generate-and-translate\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eWhen you edit records of \u003ccode\u003ePosts\u003c/code\u003e and \u003ccode\u003eCategories\u003c/code\u003e content models, you will notice this \u003cem\u003eboolean\u003c/em\u003e field:\u003c/p\u003e\n\u003cp dir=\"auto\"\u003e\u003ca target=\"_blank\" rel=\"noopener noreferrer nofollow\" href=\"https://camo.githubusercontent.com/fa89c961c62e4ae7e809d97d73508e7659d580ac04b2cadc6d8a551e177edf1c/68747470733a2f2f692e6962622e636f2f54325a5a46364d2f53636865726d6174612d323032322d30322d32302d616c6c652d30322d31312d34342e706e67\"\u003e\u003cimg src=\"https://camo.githubusercontent.com/fa89c961c62e4ae7e809d97d73508e7659d580ac04b2cadc6d8a551e177edf1c/68747470733a2f2f692e6962622e636f2f54325a5a46364d2f53636865726d6174612d323032322d30322d32302d616c6c652d30322d31312d34342e706e67\" alt=\"\" data-canonical-src=\"https://i.ibb.co/T2ZZF6M/Schermata-2022-02-20-alle-02-11-44.png\" style=\"max-width: 100%;\"\u003e\u003c/a\u003e\u003c/p\u003e\n\u003cp dir=\"auto\"\u003eBy setting it to \u003ccode\u003etrue\u003c/code\u003e, the post or category page won't be generated for that language.\u003c/p\u003e\n\u003cblockquote\u003e\n\u003cp dir=\"auto\"\u003e\u003ca href=\"https://headlessmultilingual.gatsbyjs.io/blog/development\" rel=\"nofollow\"\u003eThis\u003c/a\u003e is an example of category not available for \"es\" language.\u003c/p\u003e\n\u003c/blockquote\u003e\n\u003cblockquote\u003e\n\u003cp dir=\"auto\"\u003e\u003ca href=\"https://headlessmultilingual.gatsbyjs.io/blog/react/rendering-elements\" rel=\"nofollow\"\u003eThis\u003c/a\u003e is an example of post not available for \"it\" and \"es\" languages.\u003c/p\u003e\n\u003c/blockquote\u003e\n\u003cp dir=\"auto\"\u003eIf for example, the field is set to true for \"es\" language and the user is viewing that post/category in \"en\", if he tries to switch to \"es\", he will be redirected to the blog root.\u003c/p\u003e\n\u003cp dir=\"auto\"\u003eSame happens for categories.\u003c/p\u003e\n\u003cblockquote\u003e\n\u003cp dir=\"auto\"\u003e\u003cg-emoji class=\"g-emoji\" alias=\"warning\"\u003e⚠️\u003c/g-emoji\u003e If you set this field to true for a \u003cstrong\u003ecategory\u003c/strong\u003e, all the posts linked to that category won't be generated as well for that language, no matter if you have translated them.\u003c/p\u003e\n\u003c/blockquote\u003e\n\u003cblockquote\u003e\n\u003cp dir=\"auto\"\u003e\u003cg-emoji class=\"g-emoji\" alias=\"warning\"\u003e⚠️\u003c/g-emoji\u003e I decided to not enforce field validation on \u003ccode\u003eslug\u003c/code\u003e field for Posts and Categories. Before publishing any content \u003cstrong\u003ealways check\u003c/strong\u003e that such fields are populated for any locale you want to generate the page (unless you have set a fallback).\u003c/p\u003e\n\u003c/blockquote\u003e\n\u003cbr\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch2 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eEditing the menu\u003c/h2\u003e\u003ca id=\"user-content-editing-the-menu\" class=\"anchor\" aria-label=\"Permalink: Editing the menu\" href=\"#editing-the-menu\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eSimply access the content model named \u003ccode\u003eMenu\u003c/code\u003e under the \u003ccode\u003eData-only\u003c/code\u003e group:\u003c/p\u003e\n\u003cp dir=\"auto\"\u003e\u003ca target=\"_blank\" rel=\"noopener noreferrer nofollow\" href=\"https://camo.githubusercontent.com/a19a1a2f4bab29da85f2ad508b1a1933ff59480230ea0187e27f8a51c0eb5ce4/68747470733a2f2f692e6962622e636f2f573567467278572f53636865726d6174612d323032322d30322d32302d616c6c652d30322d31332d31382e706e67\"\u003e\u003cimg src=\"https://camo.githubusercontent.com/a19a1a2f4bab29da85f2ad508b1a1933ff59480230ea0187e27f8a51c0eb5ce4/68747470733a2f2f692e6962622e636f2f573567467278572f53636865726d6174612d323032322d30322d32302d616c6c652d30322d31332d31382e706e67\" alt=\"\" data-canonical-src=\"https://i.ibb.co/W5gFrxW/Schermata-2022-02-20-alle-02-13-18.png\" style=\"max-width: 100%;\"\u003e\u003c/a\u003e\u003c/p\u003e\n\u003cp dir=\"auto\"\u003eAdd a new \"Menu Link\" item and link the record you want to redirect the users. You can change the order of the block items by drag-and-drop and choose to set a complete different menu for each locale.\u003c/p\u003e\n\u003cbr\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch3 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eDisplaying featured posts in the homepage\u003c/h3\u003e\u003ca id=\"user-content-displaying-featured-posts-in-the-homepage\" class=\"anchor\" aria-label=\"Permalink: Displaying featured posts in the homepage\" href=\"#displaying-featured-posts-in-the-homepage\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eIn each post record you see find this \u003cem\u003eboolean\u003c/em\u003e field:\u003c/p\u003e\n\u003cp dir=\"auto\"\u003e\u003ca target=\"_blank\" rel=\"noopener noreferrer nofollow\" href=\"https://camo.githubusercontent.com/d8ebe1b2772b8e5c5cc46f9d439b985a5ab8392491005ce56896a8610cd99caa/68747470733a2f2f692e6962622e636f2f4d446b5652716a2f53636865726d6174612d323032322d30322d31392d616c6c652d31392d30372d34372e706e67\"\u003e\u003cimg src=\"https://camo.githubusercontent.com/d8ebe1b2772b8e5c5cc46f9d439b985a5ab8392491005ce56896a8610cd99caa/68747470733a2f2f692e6962622e636f2f4d446b5652716a2f53636865726d6174612d323032322d30322d31392d616c6c652d31392d30372d34372e706e67\" alt=\"\" data-canonical-src=\"https://i.ibb.co/MDkVRqj/Schermata-2022-02-19-alle-19-07-47.png\" style=\"max-width: 100%;\"\u003e\u003c/a\u003e\u003c/p\u003e\n\u003cp dir=\"auto\"\u003eIf set to \u003ccode\u003etrue\u003c/code\u003e it will display that post in the homepage. You can select up to 6 posts, they will be ordered according to the update time.\u003c/p\u003e\n\u003cbr\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch3 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eDisplaying the categories dropdown\u003c/h3\u003e\u003ca id=\"user-content-displaying-the-categories-dropdown\" class=\"anchor\" aria-label=\"Permalink: Displaying the categories dropdown\" href=\"#displaying-the-categories-dropdown\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eFor each menu item there's this \u003cem\u003eboolean\u003c/em\u003e field:\u003c/p\u003e\n\u003cp dir=\"auto\"\u003e\u003ca target=\"_blank\" rel=\"noopener noreferrer nofollow\" href=\"https://camo.githubusercontent.com/2dfae77e9e17a145a2131af39bc6077afa1db2b7b426a0eefd8b9ab9e462baa7/68747470733a2f2f692e6962622e636f2f625143766363372f53636865726d6174612d323032322d30322d32302d616c6c652d30322d31342d31322e706e67\"\u003e\u003cimg src=\"https://camo.githubusercontent.com/2dfae77e9e17a145a2131af39bc6077afa1db2b7b426a0eefd8b9ab9e462baa7/68747470733a2f2f692e6962622e636f2f625143766363372f53636865726d6174612d323032322d30322d32302d616c6c652d30322d31342d31322e706e67\" alt=\"\" data-canonical-src=\"https://i.ibb.co/bQCvcc7/Schermata-2022-02-20-alle-02-14-12.png\" style=\"max-width: 100%;\"\u003e\u003c/a\u003e\u003c/p\u003e\n\u003cp dir=\"auto\"\u003eIf set to \u003ccode\u003etrue\u003c/code\u003e it will render the categories dropdown in both desktop and mobile menus.\u003c/p\u003e\n\u003cp dir=\"auto\"\u003eIf you want to change the order, simply sort the records in the \u003ccode\u003eCategories\u003c/code\u003e content model via drap-and-drop:\u003c/p\u003e\n\u003cp dir=\"auto\"\u003e\u003ca target=\"_blank\" rel=\"noopener noreferrer nofollow\" href=\"https://camo.githubusercontent.com/ec70a3e6d6b03c4e66b0279ac76361c48c93970620af13dce2023f0a1f5d4cb7/68747470733a2f2f692e6962622e636f2f6e505a5666796d2f53636865726d6174612d323032322d30322d31372d616c6c652d31312d32352d32382e706e67\"\u003e\u003cimg src=\"https://camo.githubusercontent.com/ec70a3e6d6b03c4e66b0279ac76361c48c93970620af13dce2023f0a1f5d4cb7/68747470733a2f2f692e6962622e636f2f6e505a5666796d2f53636865726d6174612d323032322d30322d31372d616c6c652d31312d32352d32382e706e67\" alt=\"\" data-canonical-src=\"https://i.ibb.co/nPZVfym/Schermata-2022-02-17-alle-11-25-28.png\" style=\"max-width: 100%;\"\u003e\u003c/a\u003e\u003c/p\u003e\n\u003cblockquote\u003e\n\u003cp dir=\"auto\"\u003e\u003cg-emoji class=\"g-emoji\" alias=\"warning\"\u003e⚠️\u003c/g-emoji\u003e By default the dropdown will display the first six categories of your blog and a link at the bottom to redirect the user to the categories archive page. If you want to increase the number of categories shown, you can check \u003ca href=\"#increase-categories-number-displayed-by-the-dropdown\"\u003ethis section\u003c/a\u003e.\u003c/p\u003e\n\u003c/blockquote\u003e\n\u003cbr\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch2 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eEditing the categories menu\u003c/h2\u003e\u003ca id=\"user-content-editing-the-categories-menu\" class=\"anchor\" aria-label=\"Permalink: Editing the categories menu\" href=\"#editing-the-categories-menu\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eEach category page and the blog root page, displays a scrollable menu where you can navigate the categories:\u003c/p\u003e\n\u003cp dir=\"auto\"\u003e\u003ca target=\"_blank\" rel=\"noopener noreferrer nofollow\" href=\"https://camo.githubusercontent.com/460473a8ab670715a1d2ea3ae266c5d08a713f0d0794f88180c5dd19642640e7/68747470733a2f2f692e6962622e636f2f325733777772702f53636865726d6174612d323032322d30322d31372d616c6c652d31312d32332d32372e706e67\"\u003e\u003cimg src=\"https://camo.githubusercontent.com/460473a8ab670715a1d2ea3ae266c5d08a713f0d0794f88180c5dd19642640e7/68747470733a2f2f692e6962622e636f2f325733777772702f53636865726d6174612d323032322d30322d31372d616c6c652d31312d32332d32372e706e67\" alt=\"\" data-canonical-src=\"https://i.ibb.co/2W3wwrp/Schermata-2022-02-17-alle-11-23-27.png\" style=\"max-width: 100%;\"\u003e\u003c/a\u003e\u003c/p\u003e\n\u003cp dir=\"auto\"\u003eIf you want to change the order, simply rearrange the records order as explained in the previous section.\u003c/p\u003e\n\u003cp dir=\"auto\"\u003eOnce your categories number will increase and overflow the menu, a scrollbar with a gradient will appear:\u003c/p\u003e\n\u003cp dir=\"auto\"\u003e\u003ca target=\"_blank\" rel=\"noopener noreferrer nofollow\" href=\"https://camo.githubusercontent.com/771df2005eb99b190f70e22027ee2ab74ff141ed512f1438f976c026a7f36095/68747470733a2f2f692e6962622e636f2f543133354a37532f53636865726d6174612d323032322d30322d31372d616c6c652d31312d32392d31312e706e67\"\u003e\u003cimg src=\"https://camo.githubusercontent.com/771df2005eb99b190f70e22027ee2ab74ff141ed512f1438f976c026a7f36095/68747470733a2f2f692e6962622e636f2f543133354a37532f53636865726d6174612d323032322d30322d31372d616c6c652d31312d32392d31312e706e67\" alt=\"\" data-canonical-src=\"https://i.ibb.co/T135J7S/Schermata-2022-02-17-alle-11-29-11.png\" style=\"max-width: 100%;\"\u003e\u003c/a\u003e\u003c/p\u003e\n\u003cbr\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch2 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eLinking categories and authors to blog posts\u003c/h2\u003e\u003ca id=\"user-content-linking-categories-and-authors-to-blog-posts\" class=\"anchor\" aria-label=\"Permalink: Linking categories and authors to blog posts\" href=\"#linking-categories-and-authors-to-blog-posts\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eEdit the \u003ccode\u003ecategory_link\u003c/code\u003e field in each post by selecting a category from the dropdown:\u003c/p\u003e\n\u003cp dir=\"auto\"\u003e\u003ca target=\"_blank\" rel=\"noopener noreferrer nofollow\" href=\"https://camo.githubusercontent.com/fcb78bbfaa105d7dfce882ebcc3d3feea9a16f4c7bbfd566ec6b4ebef3cec25c/68747470733a2f2f692e6962622e636f2f444d56364e5a6d2f53636865726d6174612d323032322d30322d32302d616c6c652d30322d31352d35312e706e67\"\u003e\u003cimg src=\"https://camo.githubusercontent.com/fcb78bbfaa105d7dfce882ebcc3d3feea9a16f4c7bbfd566ec6b4ebef3cec25c/68747470733a2f2f692e6962622e636f2f444d56364e5a6d2f53636865726d6174612d323032322d30322d32302d616c6c652d30322d31352d35312e706e67\" alt=\"\" data-canonical-src=\"https://i.ibb.co/DMV6NZm/Schermata-2022-02-20-alle-02-15-51.png\" style=\"max-width: 100%;\"\u003e\u003c/a\u003e\u003c/p\u003e\n\u003cp dir=\"auto\"\u003eAs soon as you add a new category it will be available for selection and your page paths generated accordingly.\u003c/p\u003e\n\u003cp dir=\"auto\"\u003eYou can also decide to not assign a category to a post, simply that post won't be rendered inside the category pages and the card won't display the category box:\u003c/p\u003e\n\u003cp dir=\"auto\"\u003e\u003ca target=\"_blank\" rel=\"noopener noreferrer nofollow\" href=\"https://camo.githubusercontent.com/78b5b712c51a6aff414fb0d9e9ddc18976ebd9e1d1b7074075430a92109bac1e/68747470733a2f2f692e6962622e636f2f794668705a46312f53636865726d6174612d323032322d30322d31372d616c6c652d31322d31372d33342e706e67\"\u003e\u003cimg src=\"https://camo.githubusercontent.com/78b5b712c51a6aff414fb0d9e9ddc18976ebd9e1d1b7074075430a92109bac1e/68747470733a2f2f692e6962622e636f2f794668705a46312f53636865726d6174612d323032322d30322d31372d616c6c652d31322d31372d33342e706e67\" alt=\"\" data-canonical-src=\"https://i.ibb.co/yFhpZF1/Schermata-2022-02-17-alle-12-17-34.png\" style=\"max-width: 100%;\"\u003e\u003c/a\u003e\u003c/p\u003e\n\u003cp dir=\"auto\"\u003eThe same happens for the authors, just add a new record in the \u003ccode\u003eAuthors\u003c/code\u003e content model and update the record.\u003c/p\u003e\n\u003cblockquote\u003e\n\u003cp dir=\"auto\"\u003e\u003ca href=\"http://localhost:8000/blog/components-and-props\" rel=\"nofollow\"\u003eThis\u003c/a\u003e is an example of uncategorized post.\u003c/p\u003e\n\u003c/blockquote\u003e\n\u003cbr\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch2 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eRelated posts\u003c/h2\u003e\u003ca id=\"user-content-related-posts\" class=\"anchor\" aria-label=\"Permalink: Related posts\" href=\"#related-posts\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eYou can choose up to two posts to display below the article body:\u003c/p\u003e\n\u003cp dir=\"auto\"\u003e\u003ca target=\"_blank\" rel=\"noopener noreferrer nofollow\" href=\"https://camo.githubusercontent.com/d3f63e8f0015e711d6f7fd72e4dfa861ddc78249aab29dae755b9c03179643f1/68747470733a2f2f692e6962622e636f2f673758304e6d392f53636865726d6174612d323032322d30322d32302d616c6c652d30322d35382d34322e706e67\"\u003e\u003cimg src=\"https://camo.githubusercontent.com/d3f63e8f0015e711d6f7fd72e4dfa861ddc78249aab29dae755b9c03179643f1/68747470733a2f2f692e6962622e636f2f673758304e6d392f53636865726d6174612d323032322d30322d32302d616c6c652d30322d35382d34322e706e67\" alt=\"\" data-canonical-src=\"https://i.ibb.co/g7X0Nm9/Schermata-2022-02-20-alle-02-58-42.png\" style=\"max-width: 100%;\"\u003e\u003c/a\u003e\u003c/p\u003e\n\u003cp dir=\"auto\"\u003eAll you have to do is to select the records in the link field of the \u003ccode\u003ePost\u003c/code\u003e content model.\u003c/p\u003e\n\u003cp dir=\"auto\"\u003e\u003ca target=\"_blank\" rel=\"noopener noreferrer nofollow\" href=\"https://camo.githubusercontent.com/5ff389253dc6175689547ee105403667f9e9bf45bb383c92a670da18e4ec46c8/68747470733a2f2f692e6962622e636f2f6a7a4633475a722f53636865726d6174612d323032322d30322d32302d616c6c652d30332d30332d33332e706e67\"\u003e\u003cimg src=\"https://camo.githubusercontent.com/5ff389253dc6175689547ee105403667f9e9bf45bb383c92a670da18e4ec46c8/68747470733a2f2f692e6962622e636f2f6a7a4633475a722f53636865726d6174612d323032322d30322d32302d616c6c652d30332d30332d33332e706e67\" alt=\"\" data-canonical-src=\"https://i.ibb.co/jzF3GZr/Schermata-2022-02-20-alle-03-03-33.png\" style=\"max-width: 100%;\"\u003e\u003c/a\u003e\u003c/p\u003e\n\u003cp dir=\"auto\"\u003eIf no posts are set, the section won't be displayed.\u003c/p\u003e\n\u003cbr\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch1 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eStyling\u003c/h1\u003e\u003ca id=\"user-content-styling\" class=\"anchor\" aria-label=\"Permalink: Styling\" href=\"#styling\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch2 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eColors\u003c/h2\u003e\u003ca id=\"user-content-colors\" class=\"anchor\" aria-label=\"Permalink: Colors\" href=\"#colors\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eNavigate to \u003ccode\u003esrc/components/Layout/sharedStyles/globalStyles.js\u003c/code\u003e and change the css variables \u003cstrong\u003e\u003cins\u003evalues\u003c/ins\u003e\u003c/strong\u003e for the two following classes:\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-css notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\".lightTheme {\n --primaryColor: #0067fa;\n --headingsColor: #4d4d4d;\n --baseTextColor: #6e7581;\n --dividerColor: #e2e2e2;\n --markBackgroundColor: #fdffb4;\n --markTextColor: #4d4d4d;\n --inlineCodeTextColor: #4d4d4d;\n --inlineCodeBackgroundColor: #dbefff;\n --backgroundColor: #ffffff;\n --backgroundTransparentColor: rgba(255, 255, 255, 0);\n --backgroundColorAlt: #ffffff;\n --codeBlockBackgroundColor: #181b22;\n}\n\n.darkTheme {\n --primaryColor: #5995ea;\n --headingsColor: #eeeeee;\n --baseTextColor: #aaaaaa;\n --dividerColor: #242a31;\n --markBackgroundColor: #b2dbff;\n --markTextColor: #181b22;\n --inlineCodeTextColor: #ffffff;\n --inlineCodeBackgroundColor: #293b4a;\n --backgroundColor: #181b22;\n --backgroundTransparentColor: rgba(24, 27, 34, 0);\n --backgroundColorAlt: #1d2028;\n --codeBlockBackgroundColor: #181b22;\n}\"\u003e\u003cpre\u003e.\u003cspan class=\"pl-c1\"\u003elightTheme\u003c/span\u003e {\n \u003cspan class=\"pl-c1\"\u003e--primaryColor\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e:\u003c/span\u003e \u003cspan class=\"pl-pds\"\u003e\u003cspan class=\"pl-kos\"\u003e#\u003c/span\u003e0067fa\u003c/span\u003e;\n \u003cspan class=\"pl-c1\"\u003e--headingsColor\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e:\u003c/span\u003e \u003cspan class=\"pl-pds\"\u003e\u003cspan class=\"pl-kos\"\u003e#\u003c/span\u003e4d4d4d\u003c/span\u003e;\n \u003cspan class=\"pl-c1\"\u003e--baseTextColor\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e:\u003c/span\u003e \u003cspan class=\"pl-pds\"\u003e\u003cspan class=\"pl-kos\"\u003e#\u003c/span\u003e6e7581\u003c/span\u003e;\n \u003cspan class=\"pl-c1\"\u003e--dividerColor\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e:\u003c/span\u003e \u003cspan class=\"pl-pds\"\u003e\u003cspan class=\"pl-kos\"\u003e#\u003c/span\u003ee2e2e2\u003c/span\u003e;\n \u003cspan class=\"pl-c1\"\u003e--markBackgroundColor\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e:\u003c/span\u003e \u003cspan class=\"pl-pds\"\u003e\u003cspan class=\"pl-kos\"\u003e#\u003c/span\u003efdffb4\u003c/span\u003e;\n \u003cspan class=\"pl-c1\"\u003e--markTextColor\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e:\u003c/span\u003e \u003cspan class=\"pl-pds\"\u003e\u003cspan class=\"pl-kos\"\u003e#\u003c/span\u003e4d4d4d\u003c/span\u003e;\n \u003cspan class=\"pl-c1\"\u003e--inlineCodeTextColor\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e:\u003c/span\u003e \u003cspan class=\"pl-pds\"\u003e\u003cspan class=\"pl-kos\"\u003e#\u003c/span\u003e4d4d4d\u003c/span\u003e;\n \u003cspan class=\"pl-c1\"\u003e--inlineCodeBackgroundColor\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e:\u003c/span\u003e \u003cspan class=\"pl-pds\"\u003e\u003cspan class=\"pl-kos\"\u003e#\u003c/span\u003edbefff\u003c/span\u003e;\n \u003cspan class=\"pl-c1\"\u003e--backgroundColor\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e:\u003c/span\u003e \u003cspan class=\"pl-pds\"\u003e\u003cspan class=\"pl-kos\"\u003e#\u003c/span\u003effffff\u003c/span\u003e;\n \u003cspan class=\"pl-c1\"\u003e--backgroundTransparentColor\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e:\u003c/span\u003e \u003cspan class=\"pl-en\"\u003ergba\u003c/span\u003e(\u003cspan class=\"pl-c1\"\u003e255\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e255\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e255\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e0\u003c/span\u003e);\n \u003cspan class=\"pl-c1\"\u003e--backgroundColorAlt\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e:\u003c/span\u003e \u003cspan class=\"pl-pds\"\u003e\u003cspan class=\"pl-kos\"\u003e#\u003c/span\u003effffff\u003c/span\u003e;\n \u003cspan class=\"pl-c1\"\u003e--codeBlockBackgroundColor\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e:\u003c/span\u003e \u003cspan class=\"pl-pds\"\u003e\u003cspan class=\"pl-kos\"\u003e#\u003c/span\u003e181b22\u003c/span\u003e;\n}\n\n.\u003cspan class=\"pl-c1\"\u003edarkTheme\u003c/span\u003e {\n \u003cspan class=\"pl-c1\"\u003e--primaryColor\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e:\u003c/span\u003e \u003cspan class=\"pl-pds\"\u003e\u003cspan class=\"pl-kos\"\u003e#\u003c/span\u003e5995ea\u003c/span\u003e;\n \u003cspan class=\"pl-c1\"\u003e--headingsColor\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e:\u003c/span\u003e \u003cspan class=\"pl-pds\"\u003e\u003cspan class=\"pl-kos\"\u003e#\u003c/span\u003eeeeeee\u003c/span\u003e;\n \u003cspan class=\"pl-c1\"\u003e--baseTextColor\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e:\u003c/span\u003e \u003cspan class=\"pl-pds\"\u003e\u003cspan class=\"pl-kos\"\u003e#\u003c/span\u003eaaaaaa\u003c/span\u003e;\n \u003cspan class=\"pl-c1\"\u003e--dividerColor\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e:\u003c/span\u003e \u003cspan class=\"pl-pds\"\u003e\u003cspan class=\"pl-kos\"\u003e#\u003c/span\u003e242a31\u003c/span\u003e;\n \u003cspan class=\"pl-c1\"\u003e--markBackgroundColor\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e:\u003c/span\u003e \u003cspan class=\"pl-pds\"\u003e\u003cspan class=\"pl-kos\"\u003e#\u003c/span\u003eb2dbff\u003c/span\u003e;\n \u003cspan class=\"pl-c1\"\u003e--markTextColor\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e:\u003c/span\u003e \u003cspan class=\"pl-pds\"\u003e\u003cspan class=\"pl-kos\"\u003e#\u003c/span\u003e181b22\u003c/span\u003e;\n \u003cspan class=\"pl-c1\"\u003e--inlineCodeTextColor\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e:\u003c/span\u003e \u003cspan class=\"pl-pds\"\u003e\u003cspan class=\"pl-kos\"\u003e#\u003c/span\u003effffff\u003c/span\u003e;\n \u003cspan class=\"pl-c1\"\u003e--inlineCodeBackgroundColor\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e:\u003c/span\u003e \u003cspan class=\"pl-pds\"\u003e\u003cspan class=\"pl-kos\"\u003e#\u003c/span\u003e293b4a\u003c/span\u003e;\n \u003cspan class=\"pl-c1\"\u003e--backgroundColor\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e:\u003c/span\u003e \u003cspan class=\"pl-pds\"\u003e\u003cspan class=\"pl-kos\"\u003e#\u003c/span\u003e181b22\u003c/span\u003e;\n \u003cspan class=\"pl-c1\"\u003e--backgroundTransparentColor\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e:\u003c/span\u003e \u003cspan class=\"pl-en\"\u003ergba\u003c/span\u003e(\u003cspan class=\"pl-c1\"\u003e24\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e27\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e34\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e0\u003c/span\u003e);\n \u003cspan class=\"pl-c1\"\u003e--backgroundColorAlt\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e:\u003c/span\u003e \u003cspan class=\"pl-pds\"\u003e\u003cspan class=\"pl-kos\"\u003e#\u003c/span\u003e1d2028\u003c/span\u003e;\n \u003cspan class=\"pl-c1\"\u003e--codeBlockBackgroundColor\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e:\u003c/span\u003e \u003cspan class=\"pl-pds\"\u003e\u003cspan class=\"pl-kos\"\u003e#\u003c/span\u003e181b22\u003c/span\u003e;\n}\u003c/pre\u003e\u003c/div\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch2 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003euseTheme hook\u003c/h2\u003e\u003ca id=\"user-content-usetheme-hook\" class=\"anchor\" aria-label=\"Permalink: useTheme hook\" href=\"#usetheme-hook\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eIf for any reason CSS variables are not enough to style both themes, you can import the \u003ccode\u003euseTheme\u003c/code\u003e hook:\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"import { useTheme } from 'src/hooks/useTheme';\"\u003e\u003cpre\u003e\u003cspan class=\"pl-k\"\u003eimport\u003c/span\u003e \u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e \u003cspan class=\"pl-s1\"\u003euseTheme\u003c/span\u003e \u003cspan class=\"pl-kos\"\u003e}\u003c/span\u003e \u003cspan class=\"pl-k\"\u003efrom\u003c/span\u003e \u003cspan class=\"pl-s\"\u003e'src/hooks/useTheme'\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eAnd use it in any component / template:\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"const { isDark } = useTheme();\n\nreturn \u0026lt;Header\u0026gt;{isDark ? \u0026lt;LogoBlack /\u0026gt; : \u0026lt;LogoWhite /\u0026gt;}\u0026lt;/Header\u0026gt;;\"\u003e\u003cpre\u003e\u003cspan class=\"pl-k\"\u003econst\u003c/span\u003e \u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e isDark \u003cspan class=\"pl-kos\"\u003e}\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e=\u003c/span\u003e \u003cspan class=\"pl-en\"\u003euseTheme\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\n\n\u003cspan class=\"pl-k\"\u003ereturn\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003eHeader\u003c/span\u003e\u003cspan class=\"pl-c1\"\u003e\u0026gt;\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e\u003cspan class=\"pl-s1\"\u003eisDark\u003c/span\u003e ? \u003cspan class=\"pl-c1\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003eLogoBlack\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e/\u003c/span\u003e\u003cspan class=\"pl-c1\"\u003e\u0026gt;\u003c/span\u003e : \u003cspan class=\"pl-c1\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003eLogoWhite\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e/\u003c/span\u003e\u003cspan class=\"pl-c1\"\u003e\u0026gt;\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e}\u003c/span\u003e\u003cspan class=\"pl-c1\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-c1\"\u003e/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003eHeader\u003c/span\u003e\u003cspan class=\"pl-c1\"\u003e\u0026gt;\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cbr\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch2 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eLogo\u003c/h2\u003e\u003ca id=\"user-content-logo\" class=\"anchor\" aria-label=\"Permalink: Logo\" href=\"#logo\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eYou can import and replace the logo in \u003ccode\u003esrc/components/Layout/Header/Full\u003c/code\u003e.\u003c/p\u003e\n\u003cbr\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch2 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eCustom fonts\u003c/h2\u003e\u003ca id=\"user-content-custom-fonts\" class=\"anchor\" aria-label=\"Permalink: Custom fonts\" href=\"#custom-fonts\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003ePlease check this \u003ca href=\"https://github.com/smastrom/headless-gatsby-multilang/issues/8\"\u003eissue\u003c/a\u003e for a guide on how to change the default (safe) fonts.\u003c/p\u003e\n\u003cbr\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch2 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eBlog synthax highlighting\u003c/h2\u003e\u003ca id=\"user-content-blog-synthax-highlighting\" class=\"anchor\" aria-label=\"Permalink: Blog synthax highlighting\" href=\"#blog-synthax-highlighting\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eBy using \u003ca href=\"https://github.com/datocms/react-datocms\"\u003ereact-datocms\u003c/a\u003e' \u003ccode\u003e\u0026lt;StructuredText /\u0026gt;\u003c/code\u003e component, a custom \u003cstrong\u003erender rule\u003c/strong\u003e for the \u003ccode\u003ecode\u003c/code\u003e node has been set using the amazing package \u003ca href=\"https://www.npmjs.com/package/react-syntax-highlighter\" rel=\"nofollow\"\u003ereact-synthax-hightlighter\u003c/a\u003e.\u003c/p\u003e\n\u003cp dir=\"auto\"\u003eTo change the theme, simply replace the import in \u003ccode\u003esrc/templates/Article.jsx\u003c/code\u003e with your favourite style. Complete documentation and styles reference can be found \u003ca href=\"https://github.com/react-syntax-highlighter/react-syntax-highlighter\"\u003ehere\u003c/a\u003e.\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';\nimport { atomDark } from 'react-syntax-highlighter/dist/esm/styles/prism'; // \u0026lt;-- Import your favourite style\"\u003e\u003cpre\u003e\u003cspan class=\"pl-k\"\u003eimport\u003c/span\u003e \u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e \u003cspan class=\"pl-v\"\u003ePrism\u003c/span\u003e \u003cspan class=\"pl-k\"\u003eas\u003c/span\u003e \u003cspan class=\"pl-v\"\u003eSyntaxHighlighter\u003c/span\u003e \u003cspan class=\"pl-kos\"\u003e}\u003c/span\u003e \u003cspan class=\"pl-k\"\u003efrom\u003c/span\u003e \u003cspan class=\"pl-s\"\u003e'react-syntax-highlighter'\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\n\u003cspan class=\"pl-k\"\u003eimport\u003c/span\u003e \u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e \u003cspan class=\"pl-s1\"\u003eatomDark\u003c/span\u003e \u003cspan class=\"pl-kos\"\u003e}\u003c/span\u003e \u003cspan class=\"pl-k\"\u003efrom\u003c/span\u003e \u003cspan class=\"pl-s\"\u003e'react-syntax-highlighter/dist/esm/styles/prism'\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e \u003cspan class=\"pl-c\"\u003e// \u0026lt;-- Import your favourite style\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eIf you want to override some styles from the original theme, you can do that by editing css rules in \u003ccode\u003esrc/components/Layout/Blog/ArticleBody/styles.js\u003c/code\u003e.\u003c/p\u003e\n\u003cp dir=\"auto\"\u003eIf you wish to use another synthax highlighter, you can set your own \u003ccode\u003erenderNodeRule\u003c/code\u003e by following react-datocms \u003ca href=\"https://github.com/datocms/react-datocms\"\u003edocumentation\u003c/a\u003e.\u003c/p\u003e\n\u003cbr\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch1 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eSEO\u003c/h1\u003e\u003ca id=\"user-content-seo\" class=\"anchor\" aria-label=\"Permalink: SEO\" href=\"#seo\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eAccess the \u003cstrong\u003eWebsite Settings\u003c/strong\u003e content model and set the Global SEO fields.\u003c/p\u003e\n\u003cp dir=\"auto\"\u003e\u003ca target=\"_blank\" rel=\"noopener noreferrer nofollow\" href=\"https://camo.githubusercontent.com/8744a2566a115939972474e78b38039d9b24e141775bce01e02ffa6e920d2481/68747470733a2f2f692e6962622e636f2f4a3268775372592f53636865726d6174612d323032322d30322d31362d616c6c652d31322d31382d30322e706e67\"\u003e\u003cimg src=\"https://camo.githubusercontent.com/8744a2566a115939972474e78b38039d9b24e141775bce01e02ffa6e920d2481/68747470733a2f2f692e6962622e636f2f4a3268775372592f53636865726d6174612d323032322d30322d31362d616c6c652d31322d31382d30322e706e67\" alt=\"Global SEO 1\" data-canonical-src=\"https://i.ibb.co/J2hwSrY/Schermata-2022-02-16-alle-12-18-02.png\" style=\"max-width: 100%;\"\u003e\u003c/a\u003e\u003c/p\u003e\n\u003cp dir=\"auto\"\u003eOnce you have updated and localized the fields according to your content, you can edit any \u003ccode\u003eseo\u003c/code\u003e field of any content model of the \u003ccode\u003eGatsby Node\u003c/code\u003e group.\u003c/p\u003e\n\u003cp dir=\"auto\"\u003e\u003ca target=\"_blank\" rel=\"noopener noreferrer nofollow\" href=\"https://camo.githubusercontent.com/f97acba42f5f8901907d577546a9cf242cc5a2a1fde84336ac3c74072c211ef3/68747470733a2f2f692e6962622e636f2f73314d734a47762f53636865726d6174612d323032322d30322d31362d616c6c652d31372d33312d30352e706e67\"\u003e\u003cimg src=\"https://camo.githubusercontent.com/f97acba42f5f8901907d577546a9cf242cc5a2a1fde84336ac3c74072c211ef3/68747470733a2f2f692e6962622e636f2f73314d734a47762f53636865726d6174612d323032322d30322d31362d616c6c652d31372d33312d30352e706e67\" alt=\"\" data-canonical-src=\"https://i.ibb.co/s1MsJGv/Schermata-2022-02-16-alle-17-31-05.png\" style=\"max-width: 100%;\"\u003e\u003c/a\u003e\u003c/p\u003e\n\u003cp dir=\"auto\"\u003eA sitemap will automatically be generated on build time by \u003ca href=\"https://www.gatsbyjs.com/plugins/gatsby-plugin-sitemap/\" rel=\"nofollow\"\u003egatsby-plugin-sitemap\u003c/a\u003e, all you need to do is to write your website address in the \u003ccode\u003esiteMetadata\u003c/code\u003e object in \u003cem\u003egatsby-config.js\u003c/em\u003e. The sitemap will be available at \u003ca href=\"https://yourwebsite.com/sitemap/sitemap-0.xml\" rel=\"nofollow\"\u003ehttps://yourwebsite.com/sitemap/sitemap-0.xml\u003c/a\u003e\u003c/p\u003e\n\u003cbr\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch1 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003ePWA\u003c/h1\u003e\u003ca id=\"user-content-pwa\" class=\"anchor\" aria-label=\"Permalink: PWA\" href=\"#pwa\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003ePWA support for any configured languages works out-of-the-box. All you need to do is to edit and localize the related settings fields in the content model named \u003ccode\u003eSEO and PWA\u003c/code\u003e:\u003c/p\u003e\n\u003cp dir=\"auto\"\u003e\u003ca target=\"_blank\" rel=\"noopener noreferrer nofollow\" href=\"https://camo.githubusercontent.com/471bea765cbd58699991f9675df75a27950c91bf81ceb8593920334fea9b35c5/68747470733a2f2f692e6962622e636f2f5750774b4d74512f53636865726d6174612d323032312d30392d31312d616c6c652d31372d34342d32312e706e67\"\u003e\u003cimg src=\"https://camo.githubusercontent.com/471bea765cbd58699991f9675df75a27950c91bf81ceb8593920334fea9b35c5/68747470733a2f2f692e6962622e636f2f5750774b4d74512f53636865726d6174612d323032312d30392d31312d616c6c652d31372d34342d32312e706e67\" alt=\"PWA Settings\" data-canonical-src=\"https://i.ibb.co/WPwKMtQ/Schermata-2021-09-11-alle-17-44-21.png\" style=\"max-width: 100%;\"\u003e\u003c/a\u003e\u003c/p\u003e\n\u003cp dir=\"auto\"\u003eAs soon as you will add a new language on Dato and localize its PWA settings, a new webmanifest file named \u003ccode\u003emanifest_\u0026lt;lang-code\u0026gt;.webmanifest\u003c/code\u003e will be exported to the /public folder and dynamically injected to the \u003ccode\u003e\u0026lt;head\u0026gt;\u003c/code\u003e. Instead, the default language webmanifest will always be named \u003ccode\u003emanifest.webmanifest\u003c/code\u003e.\u003c/p\u003e\n\u003cp dir=\"auto\"\u003e\u003ca target=\"_blank\" rel=\"noopener noreferrer nofollow\" href=\"https://camo.githubusercontent.com/847fc42bf901f9b44a0c4aee79fd232dfd118b1517dcfefef106a3a13884ed04/68747470733a2f2f692e6962622e636f2f564e394a6d36762f69636f6e2e706e67\"\u003e\u003cimg src=\"https://camo.githubusercontent.com/847fc42bf901f9b44a0c4aee79fd232dfd118b1517dcfefef106a3a13884ed04/68747470733a2f2f692e6962622e636f2f564e394a6d36762f69636f6e2e706e67\" alt=\"PWA Icon\" data-canonical-src=\"https://i.ibb.co/VN9Jm6v/icon.png\" style=\"max-width: 100%;\"\u003e\u003c/a\u003e \u003ca target=\"_blank\" rel=\"noopener noreferrer nofollow\" href=\"https://camo.githubusercontent.com/cf47114a189834b23249c950a20b20ae04c1dbf65827e2a7d78b1663f020c294/68747470733a2f2f692e6962622e636f2f76636e6b4667572f53636865726d6174612d323032312d30392d31312d616c6c652d31372d35372d32332e706e67\"\u003e\u003cimg src=\"https://camo.githubusercontent.com/cf47114a189834b23249c950a20b20ae04c1dbf65827e2a7d78b1663f020c294/68747470733a2f2f692e6962622e636f2f76636e6b4667572f53636865726d6174612d323032312d30392d31312d616c6c652d31372d35372d32332e706e67\" alt=\"Webmanifest files\" data-canonical-src=\"https://i.ibb.co/vcnkFgW/Schermata-2021-09-11-alle-17-57-23.png\" style=\"max-width: 100%;\"\u003e\u003c/a\u003e\u003c/p\u003e\n\u003cp dir=\"auto\"\u003eFavicon will be generated automatically, based on the above icon. PWA meta tags are already inserted manually to the \u003ccode\u003e\u0026lt;Helmet /\u0026gt;\u003c/code\u003e component in \u003cem\u003e/src/components/pageWrapper.jsx\u003c/em\u003e.\u003c/p\u003e\n\u003cp dir=\"auto\"\u003eIf you wish to customize the manifest JSON schema, you can edit the \u003ccode\u003emanifest\u003c/code\u003e object variables in \u003cem\u003egatsby-node.js\u003c/em\u003e, bear in mind that icons are downloaded in different sizes by using different \u003ccode\u003eimgixParams\u003c/code\u003e and aliases in the dedicated query in \u003cem\u003egatsby-node.js\u003c/em\u003e.\u003c/p\u003e\n\u003cbr\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch1 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eRedirect\u003c/h1\u003e\u003ca id=\"user-content-redirect\" class=\"anchor\" aria-label=\"Permalink: Redirect\" href=\"#redirect\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eWhen the user visits the homepage in default language (\"/\") a redirect will always take place if the language included in the \u003ccode\u003eAccept-Language\u003c/code\u003e request header matches one of the website's \u003cstrong\u003esecondary languages\u003c/strong\u003e.\u003c/p\u003e\n\u003cp dir=\"auto\"\u003eThe redirect will be performed server-side and not in the browser.\u003c/p\u003e\n\u003cp dir=\"auto\"\u003e\u003cstrong\u003eWhen starting the development server you will notice a warning like:\u003c/strong\u003e\u003c/p\u003e\n\u003cblockquote\u003e\n\u003cp dir=\"auto\"\u003eThere are routes that match both page and redirect. Pages take precedence over redirects so the redirect will\nnot work:\u003c/p\u003e\n\u003cul dir=\"auto\"\u003e\n\u003cli\u003epage: \"/\" and redirect: \"/\" -\u0026gt; \"/it/\"\u003c/li\u003e\n\u003cli\u003epage: \"/\" and redirect: \"/\" -\u0026gt; \"/es-ES/\"\u003c/li\u003e\n\u003cli\u003epage: \"/\" and redirect: \"/\" -\u0026gt; \"/ar-AE/\"\u003c/li\u003e\n\u003c/ul\u003e\n\u003c/blockquote\u003e\n\u003cp dir=\"auto\"\u003eDo not worry, the redirect will take place as expected 😃\u003c/p\u003e\n\u003cp dir=\"auto\"\u003ePlease take note that the redirect will work only once the website has been deployed to Gatsby Cloud and not during local development.\u003c/p\u003e\n\u003cblockquote\u003e\n\u003cp dir=\"auto\"\u003eIf for any reason you want to disable the redirect you can remove the lines ~45 to 60 in gatsby-node.js.\u003c/p\u003e\n\u003c/blockquote\u003e\n\u003cbr\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch1 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003e404 page\u003c/h1\u003e\u003ca id=\"user-content-404-page\" class=\"anchor\" aria-label=\"Permalink: 404 page\" href=\"#404-page\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eContent for 404 page can be localized on DatoCMS in the content model named \u003ccode\u003e404 Page\u003c/code\u003e.\u003c/p\u003e\n\u003cp dir=\"auto\"\u003eUnfortunately, Gatsby doesn't allow to server-side render the 404 page on each request. Such page must be statically generated on each build.\u003c/p\u003e\n\u003cp dir=\"auto\"\u003eHowever, content will always be rendered in correct language by following a different approach (in the browser):\u003c/p\u003e\n\u003cp dir=\"auto\"\u003e\u003cstrong\u003eCase 1 - Visiting a non-existent page for the very first time\u003c/strong\u003e\u003c/p\u003e\n\u003cp dir=\"auto\"\u003eAssuming that the user never visited the website and tries to access a non-existent page, we try to find a match among the website languages and the browser available languages.\u003c/p\u003e\n\u003cp dir=\"auto\"\u003e\u003cstrong\u003eExample:\u003c/strong\u003e\u003c/p\u003e\n\u003cul dir=\"auto\"\u003e\n\u003cli\u003e\n\u003cp dir=\"auto\"\u003eBrowser Languages: \u003ccode\u003e[\"de-CH\", \"en-US\"]\u003c/code\u003e\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp dir=\"auto\"\u003eWebsite Languages: \u003ccode\u003e[\"fr\", \"en\", \"de\"]\u003c/code\u003e\u003c/p\u003e\n\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp dir=\"auto\"\u003eIn such case \u003ccode\u003ede\u003c/code\u003e is considered as the user's preferred language and they will see the correct localized content in German.\u003c/p\u003e\n\u003cp dir=\"auto\"\u003eIf there is no match, content in website default language will be rendered.\u003c/p\u003e\n\u003cp dir=\"auto\"\u003eThe preferred language is always evaluated according to the order priority of the browser (user) languages.\u003c/p\u003e\n\u003cp dir=\"auto\"\u003e\u003cstrong\u003eCase 2 - Visiting a non-existent page after having already browsed the website\u003c/strong\u003e\u003c/p\u003e\n\u003cp dir=\"auto\"\u003eWhen the user switches the language a new \u003ccode\u003epreferred_lang\u003c/code\u003e value is stored/overwritten in \u003ccode\u003elocalStorage\u003c/code\u003e and it will be used to render the correspondent localized data for the 404 page.\u003c/p\u003e\n\u003cp dir=\"auto\"\u003eIf the user never switched the language, we assume their preferred language is the website default language and content will be rendered accordingly.\u003c/p\u003e\n\u003cbr\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch1 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eRTL text direction support\u003c/h1\u003e\u003ca id=\"user-content-rtl-text-direction-support\" class=\"anchor\" aria-label=\"Permalink: RTL text direction support\" href=\"#rtl-text-direction-support\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eThis starter has built-in support for any right-to-left language such as Hebrew or Arabic.\u003c/p\u003e\n\u003cp dir=\"auto\"\u003eAll you need to do is to add the language code to your DatoCMS languages list, set the fallbacks and start the dev server as explained above. If the language code matches one these \u003ca href=\"https://meta.wikimedia.org/wiki/Template:List_of_language_names_ordered_by_code\" rel=\"nofollow\"\u003elang codes\u003c/a\u003e, once you switch the language, the layout direction will change accordingly.\u003c/p\u003e\n\u003cp dir=\"auto\"\u003eIt doesn't matter if you choose \"ar\" or \"ar-AE\", the correct language direction will always be identified and injected to the \u003ccode\u003e\u0026lt;html\u0026gt;\u003c/code\u003e \u003cem\u003edir\u003c/em\u003e attribute.\u003c/p\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch2 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003euseTextDirection hook\u003c/h2\u003e\u003ca id=\"user-content-usetextdirection-hook\" class=\"anchor\" aria-label=\"Permalink: useTextDirection hook\" href=\"#usetextdirection-hook\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eIf for any reason you need to deeply style and change elements behavior according to the language direction, you can import the \u003ccode\u003euseTextDirection\u003c/code\u003e hook:\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"import { useTextDirection } from '../../hooks/useTextDirection';\"\u003e\u003cpre\u003e\u003cspan class=\"pl-k\"\u003eimport\u003c/span\u003e \u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e \u003cspan class=\"pl-s1\"\u003euseTextDirection\u003c/span\u003e \u003cspan class=\"pl-kos\"\u003e}\u003c/span\u003e \u003cspan class=\"pl-k\"\u003efrom\u003c/span\u003e \u003cspan class=\"pl-s\"\u003e'../../hooks/useTextDirection'\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eAnd use it in any component / template:\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"const { isRtl } = useTextDirection();\n\nreturn \u0026lt;span className={isRtl ? 'menuRight' : 'menuLeft'} /\u0026gt;;\"\u003e\u003cpre\u003e\u003cspan class=\"pl-k\"\u003econst\u003c/span\u003e \u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e isRtl \u003cspan class=\"pl-kos\"\u003e}\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e=\u003c/span\u003e \u003cspan class=\"pl-en\"\u003euseTextDirection\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\n\n\u003cspan class=\"pl-k\"\u003ereturn\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003espan\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eclassName\u003c/span\u003e\u003cspan class=\"pl-c1\"\u003e=\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e\u003cspan class=\"pl-s1\"\u003eisRtl\u003c/span\u003e ? \u003cspan class=\"pl-s\"\u003e'menuRight'\u003c/span\u003e : \u003cspan class=\"pl-s\"\u003e'menuLeft'\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e}\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e/\u003c/span\u003e\u003cspan class=\"pl-c1\"\u003e\u0026gt;\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cbr\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch1 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eExtending the starter\u003c/h1\u003e\u003ca id=\"user-content-extending-the-starter\" class=\"anchor\" aria-label=\"Permalink: Extending the starter\" href=\"#extending-the-starter\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eIf you are ok with the content structure of the starter you most likely won't need to extend it and follow those steps. In any case everything is explained below.\u003c/p\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch2 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eRemoving fields\u003c/h2\u003e\u003ca id=\"user-content-removing-fields\" class=\"anchor\" aria-label=\"Permalink: Removing fields\" href=\"#removing-fields\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003e99% of the times that an issue occurs is because the fields or content models queried in the project files are not available anymore on DatoCMS. Gatsby can't find them and throws an error.\u003c/p\u003e\n\u003cp dir=\"auto\"\u003eThis can happen because:\u003c/p\u003e\n\u003cul dir=\"auto\"\u003e\n\u003cli\u003eYou renamed the field ID\u003c/li\u003e\n\u003cli\u003eYou deleted the field\u003c/li\u003e\n\u003cli\u003eYou renamed the content model ID\u003c/li\u003e\n\u003cli\u003eYou deleted the content model\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp dir=\"auto\"\u003eWithout deleting the field or renaming the field Id \u003cstrong\u003efrom the project files.\u003c/strong\u003e\u003c/p\u003e\n\u003chr\u003e\n\u003cp dir=\"auto\"\u003eFor example, if you don't want the \u003ccode\u003eauthor\u003c/code\u003e field of the content model \u003ccode\u003eblog_post\u003c/code\u003e to be displayed in your post pages:\u003c/p\u003e\n\u003cp dir=\"auto\"\u003e\u003ca target=\"_blank\" rel=\"noopener noreferrer nofollow\" href=\"https://camo.githubusercontent.com/25d0512097b4e80fa3b45f76bc8d13e6ba8abd459bc4db9bfac1679aacf5af21/68747470733a2f2f692e6962622e636f2f515868426654722f53636865726d6174612d323032322d30322d31362d616c6c652d30312d34372d33372e706e67\"\u003e\u003cimg src=\"https://camo.githubusercontent.com/25d0512097b4e80fa3b45f76bc8d13e6ba8abd459bc4db9bfac1679aacf5af21/68747470733a2f2f692e6962622e636f2f515868426654722f53636865726d6174612d323032322d30322d31362d616c6c652d30312d34372d33372e706e67\" alt=\"\" data-canonical-src=\"https://i.ibb.co/QXhBfTr/Schermata-2022-02-16-alle-01-47-37.png\" style=\"max-width: 100%;\"\u003e\u003c/a\u003e\u003c/p\u003e\n\u003cp dir=\"auto\"\u003e\u003cstrong\u003e1. Remove from any query the \u003ccode\u003eauthor\u003c/code\u003e field node:\u003c/strong\u003e\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"export const query = graphql`\n query BlogPostTemplateQuery(\n $id: String!\n $locale: String!\n ) {\n datoCmsBlogPost(id: { eq: $id }, locale: { eq: $locale }) {\n title\n subtitle\n author { // \u0026lt;--- Delete from here\n authorName: name\n }\n } // \u0026lt;--- To here\n ...\"\u003e\u003cpre\u003e\u003cspan class=\"pl-k\"\u003eexport\u003c/span\u003e \u003cspan class=\"pl-k\"\u003econst\u003c/span\u003e \u003cspan class=\"pl-s1\"\u003equery\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e=\u003c/span\u003e \u003cspan class=\"pl-s1\"\u003egraphql\u003c/span\u003e`\n \u003cspan class=\"pl-s1\"\u003equery\u003c/span\u003e \u003cspan class=\"pl-v\"\u003eBlogPostTemplateQuery\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\n \u003cspan class=\"pl-s1\"\u003e$id\u003c/span\u003e: \u003cspan class=\"pl-v\"\u003eString\u003c/span\u003e\u003cspan class=\"pl-c1\"\u003e!\u003c/span\u003e\n \u003cspan class=\"pl-s1\"\u003e$locale\u003c/span\u003e: \u003cspan class=\"pl-v\"\u003eString\u003c/span\u003e\u003cspan class=\"pl-c1\"\u003e!\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e \u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e\n \u003cspan class=\"pl-en\"\u003edatoCmsBlogPost\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-s1\"\u003eid\u003c/span\u003e: \u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eeq\u003c/span\u003e: \u003cspan class=\"pl-s1\"\u003e$id\u003c/span\u003e \u003cspan class=\"pl-kos\"\u003e}\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e \u003cspan class=\"pl-s1\"\u003elocale\u003c/span\u003e: \u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eeq\u003c/span\u003e: \u003cspan class=\"pl-s1\"\u003e$locale\u003c/span\u003e \u003cspan class=\"pl-kos\"\u003e}\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e \u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e\n \u003cspan class=\"pl-s1\"\u003etitle\u003c/span\u003e\n \u003cspan class=\"pl-s1\"\u003esubtitle\u003c/span\u003e\n \u003cspan class=\"pl-s1\"\u003eauthor\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u003c/span\u003e \u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e \u003cspan class=\"pl-c\"\u003e// \u0026lt;--- Delete from here\u003c/span\u003e\n authorName: \u003cspan class=\"pl-s1\"\u003ename\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e}\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e}\u003c/span\u003e \u003cspan class=\"pl-c\"\u003e// \u0026lt;--- To here\u003c/span\u003e\n ...\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003e\u003cstrong\u003e2. Delete any destructured prop:\u003c/strong\u003e\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"const BlogPostTemplate = ({\n data: {\n datoCmsBlogPost: {\n title,\n subtitle,\n author: { // \u0026lt;-- Delete from here\n authorName,\n }, // \u0026lt;-- to here\n ...\"\u003e\u003cpre\u003e\u003cspan class=\"pl-k\"\u003econst\u003c/span\u003e \u003cspan class=\"pl-v\"\u003eBlogPostTemplate\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e=\u003c/span\u003e \u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e\n \u003cspan class=\"pl-c1\"\u003edata\u003c/span\u003e: \u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e\n \u003cspan class=\"pl-c1\"\u003edatoCmsBlogPost\u003c/span\u003e: \u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e\n \u003cspan class=\"pl-s1\"\u003etitle\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e\n subtitle\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e\n \u003cspan class=\"pl-c1\"\u003eauthor\u003c/span\u003e: \u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e \u003cspan class=\"pl-c\"\u003e// \u0026lt;-- Delete from here\u003c/span\u003e\n authorName\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e}\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e \u003cspan class=\"pl-c\"\u003e// \u0026lt;-- to here\u003c/span\u003e\n ...\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003e\u003cstrong\u003e3. Then remove any expression/variable displaying the data you were querying:\u003c/strong\u003e\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\" return (\n \u0026lt;Header\u0026gt;\n \u0026lt;AuthorDateContainer\u0026gt;\n \u0026lt;Author\u0026gt;{authorName}\u0026lt;/Author\u0026gt; {/* \u0026lt;-- Delete this */}\n ...\"\u003e\u003cpre\u003e \u003cspan class=\"pl-k\"\u003ereturn\u003c/span\u003e \u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\n \u003cspan class=\"pl-c1\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003eHeader\u003c/span\u003e\u003cspan class=\"pl-c1\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-c1\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003eAuthorDateContainer\u003c/span\u003e\u003cspan class=\"pl-c1\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-c1\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003eAuthor\u003c/span\u003e\u003cspan class=\"pl-c1\"\u003e\u0026gt;\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e\u003cspan class=\"pl-s1\"\u003eauthorName\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e}\u003c/span\u003e\u003cspan class=\"pl-c1\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-c1\"\u003e/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003eAuthor\u003c/span\u003e\u003cspan class=\"pl-c1\"\u003e\u0026gt;\u003c/span\u003e \u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e\u003cspan class=\"pl-c\"\u003e/* \u0026lt;-- Delete this */\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e}\u003c/span\u003e\n ...\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eBy taking advantage of your code editor search you can easily check if the field is still queried or rendered anywhere.\u003c/p\u003e\n\u003cp dir=\"auto\"\u003e\u003cstrong\u003e4. Once done that, you can safely delete the field from the content model on DatoCMS.\u003c/strong\u003e\u003c/p\u003e\n\u003cblockquote\u003e\n\u003cp dir=\"auto\"\u003e\u003cg-emoji class=\"g-emoji\" alias=\"warning\"\u003e⚠️\u003c/g-emoji\u003e The only field you should never delete or rename the Id is the \u003ccode\u003eslug\u003c/code\u003e one. It is used to build the paths and by deleting/renaming it \u003cem\u003egatsby-node\u003c/em\u003e will throw an error. For any other field as long as you understood its purpose, you can safely get rid of it.\u003c/p\u003e\n\u003c/blockquote\u003e\n\u003cbr\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch2 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eRemoving pages and templates\u003c/h2\u003e\u003ca id=\"user-content-removing-pages-and-templates\" class=\"anchor\" aria-label=\"Permalink: Removing pages and templates\" href=\"#removing-pages-and-templates\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eIf for example you want to remove any page included in the starter follow these steps:\u003c/p\u003e\n\u003col dir=\"auto\"\u003e\n\u003cli\u003eIdentify the related content model on Dato and check where its fields are queried in the project files.\u003c/li\u003e\n\u003c/ol\u003e\n\u003cp dir=\"auto\"\u003eIf the content model has this ID on Dato: \u003ccode\u003eother_page\u003c/code\u003e - The GraphQL fields to identify would be:\u003c/p\u003e\n\u003cul dir=\"auto\"\u003e\n\u003cli\u003e\u003ccode\u003edatoCmsOtherPage\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003eallDatoCmsOtherPage\u003c/code\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp dir=\"auto\"\u003eHence the \u003ccode\u003edatoCms\u003c/code\u003e prefix and the snake_case converted to camelCase.\u003c/p\u003e\n\u003col start=\"2\" dir=\"auto\"\u003e\n\u003cli\u003e\n\u003cp dir=\"auto\"\u003eWith you code editor search for both field names among your project files and delete any prop destructuring, query or prop assignment.\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp dir=\"auto\"\u003eAccess \u003ccode\u003egatsby-node.js\u003c/code\u003e and delete the block containing the query, the loop and the template declaration. You will find them grouped and preceded by a comment.\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp dir=\"auto\"\u003eDelete the template used to generate such page.\u003c/p\u003e\n\u003c/li\u003e\n\u003c/ol\u003e\n\u003cbr\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch2 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eGenerating pages\u003c/h2\u003e\u003ca id=\"user-content-generating-pages\" class=\"anchor\" aria-label=\"Permalink: Generating pages\" href=\"#generating-pages\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eIf you wish to generate pages with your own path structure, the best thing you can do is to \u003cstrong\u003efollow the comments\u003c/strong\u003e in \u003ccode\u003egatsby-node.js\u003c/code\u003e file.\u003c/p\u003e\n\u003cp dir=\"auto\"\u003eThe process is very quick and in short, all you have to do is to:\u003c/p\u003e\n\u003cul dir=\"auto\"\u003e\n\u003cli\u003eCreate a content model on DatoCMS\n\u003cul dir=\"auto\"\u003e\n\u003cli\u003eDefine and localize the \u003ccode\u003eslug\u003c/code\u003e field\u003c/li\u003e\n\u003cli\u003eDefine and localze a \u003ccode\u003eseo\u003c/code\u003e field\u003c/li\u003e\n\u003cli\u003eDefine and localize all content fields\u003c/li\u003e\n\u003c/ul\u003e\n\u003c/li\u003e\n\u003cli\u003eCreate a dummy JSX template in \u003ccode\u003esrc/templates\u003c/code\u003e just to test page generation\u003c/li\u003e\n\u003cli\u003eGenerate pages in \u003ccode\u003egatsby-node.js\u003c/code\u003e using the dummy template and by querying the content model \u003ccode\u003eoriginalId\u003c/code\u003e and \u003ccode\u003eslug\u003c/code\u003e.\u003c/li\u003e\n\u003cli\u003eOnce pages and paths are generated properly, edit and build the template by querying and filtering the correct data.\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp dir=\"auto\"\u003eAs soon as pages are generated correctly you can switch between languages as this feature \u003cstrong\u003eis already set up\u003c/strong\u003e.\u003c/p\u003e\n\u003cbr\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch2 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eCreating new templates\u003c/h2\u003e\u003ca id=\"user-content-creating-new-templates\" class=\"anchor\" aria-label=\"Permalink: Creating new templates\" href=\"#creating-new-templates\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eWhen creating new templates, always import and wrap your template around the \u003ccode\u003ePageWrapper\u003c/code\u003e component.\u003c/p\u003e\n\u003cp dir=\"auto\"\u003ePass to the \u003ccode\u003epageData\u003c/code\u003e prop the entire \u003ccode\u003epageContext\u003c/code\u003e object:\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"import { PageWrapper } from '../Layout/PageWrapper';\n\nconst BlogPostTemplate = ({ data, pageContext }) =\u0026gt; (\n \u0026lt;PageWrapper pageData={pageContext}\u0026gt;\n ...\"\u003e\u003cpre\u003e\u003cspan class=\"pl-k\"\u003eimport\u003c/span\u003e \u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e \u003cspan class=\"pl-v\"\u003ePageWrapper\u003c/span\u003e \u003cspan class=\"pl-kos\"\u003e}\u003c/span\u003e \u003cspan class=\"pl-k\"\u003efrom\u003c/span\u003e \u003cspan class=\"pl-s\"\u003e'../Layout/PageWrapper'\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\n\n\u003cspan class=\"pl-k\"\u003econst\u003c/span\u003e \u003cspan class=\"pl-v\"\u003eBlogPostTemplate\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e=\u003c/span\u003e \u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e data\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e pageContext \u003cspan class=\"pl-kos\"\u003e}\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e=\u0026gt;\u003c/span\u003e \u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\n \u003cspan class=\"pl-c1\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ePageWrapper\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003epageData\u003c/span\u003e\u003cspan class=\"pl-c1\"\u003e=\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e\u003cspan class=\"pl-s1\"\u003epageContext\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e}\u003c/span\u003e\u003cspan class=\"pl-c1\"\u003e\u0026gt;\u003c/span\u003e\n ...\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eThen any child component will have access to the page locale exported to the pageContext object during build time by \u003ccode\u003egatsby-node.js\u003c/code\u003e. This is required in order to render proper links in any \u003ccode\u003eNavigator\u003c/code\u003e component and in \u003ccode\u003eLanguageSwitcher\u003c/code\u003e as well.\u003c/p\u003e\n\u003cbr\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch2 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eInternal link navigation\u003c/h2\u003e\u003ca id=\"user-content-internal-link-navigation\" class=\"anchor\" aria-label=\"Permalink: Internal link navigation\" href=\"#internal-link-navigation\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch3 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eNavigator component\u003c/h3\u003e\u003ca id=\"user-content-navigator-component\" class=\"anchor\" aria-label=\"Permalink: Navigator component\" href=\"#navigator-component\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eWhen you need to render localized paths you have to use the built-in \u003cstrong\u003eNavigator\u003c/strong\u003e component. It's built on top of \u003ca href=\"https://www.gatsbyjs.com/docs/reference/built-in-components/gatsby-link/\" rel=\"nofollow\"\u003eGatsby Link\u003c/a\u003e and supports any prop you would normally add to it such as \u003ccode\u003eactiveClassName\u003c/code\u003e.\u003c/p\u003e\n\u003cp dir=\"auto\"\u003eThere are only two props in addition:\u003c/p\u003e\n\u003cmarkdown-accessiblity-table\u003e\u003ctable\u003e\n\u003cthead\u003e\n\u003ctr\u003e\n\u003cth\u003eProp\u003c/th\u003e\n\u003cth\u003eDescription\u003c/th\u003e\n\u003cth\u003eRequired\u003c/th\u003e\n\u003c/tr\u003e\n\u003c/thead\u003e\n\u003ctbody\u003e\n\u003ctr\u003e\n\u003ctd\u003erecordId\u003c/td\u003e\n\u003ctd\u003eThe originalId field value of the record used to generate the page\u003c/td\u003e\n\u003ctd\u003eYes\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003epassRef\u003c/td\u003e\n\u003ctd\u003eIn case you need to pass a ref\u003c/td\u003e\n\u003ctd\u003eNo\u003c/td\u003e\n\u003c/tr\u003e\n\u003c/tbody\u003e\n\u003c/table\u003e\u003c/markdown-accessiblity-table\u003e\n\u003cp dir=\"auto\"\u003eThe component will take care of retrieving and render the proper path according to the page language.\u003c/p\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch3 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eSingle link\u003c/h3\u003e\u003ca id=\"user-content-single-link\" class=\"anchor\" aria-label=\"Permalink: Single link\" href=\"#single-link\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eImport the \u003cstrong\u003eNavigator\u003c/strong\u003e component in any of your template/component:\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"import { Navigator } from '../../../Navigator';\"\u003e\u003cpre\u003e\u003cspan class=\"pl-k\"\u003eimport\u003c/span\u003e \u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e \u003cspan class=\"pl-v\"\u003eNavigator\u003c/span\u003e \u003cspan class=\"pl-kos\"\u003e}\u003c/span\u003e \u003cspan class=\"pl-k\"\u003efrom\u003c/span\u003e \u003cspan class=\"pl-s\"\u003e'../../../Navigator'\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eQuery the \u003ccode\u003eoriginalId\u003c/code\u003e field of your record or content model (if a single instance) with GraphQL. You can use \u003ccode\u003euseStaticQuery\u003c/code\u003e as well:\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"export const query = graphql`\n query HomePageTemplate($locale: String!) {\n datoCmsBlogRoot(locale: { eq: $locale }) {\n id: originalId\n title\n }\n ...\"\u003e\u003cpre\u003e\u003cspan class=\"pl-k\"\u003eexport\u003c/span\u003e \u003cspan class=\"pl-k\"\u003econst\u003c/span\u003e \u003cspan class=\"pl-s1\"\u003equery\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e=\u003c/span\u003e \u003cspan class=\"pl-s1\"\u003egraphql\u003c/span\u003e`\n \u003cspan class=\"pl-s1\"\u003equery\u003c/span\u003e \u003cspan class=\"pl-v\"\u003eHomePageTemplate\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-s1\"\u003e$locale\u003c/span\u003e: \u003cspan class=\"pl-v\"\u003eString\u003c/span\u003e\u003cspan class=\"pl-c1\"\u003e!\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e \u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e\n \u003cspan class=\"pl-en\"\u003edatoCmsBlogRoot\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-s1\"\u003elocale\u003c/span\u003e: \u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eeq\u003c/span\u003e: \u003cspan class=\"pl-s1\"\u003e$locale\u003c/span\u003e \u003cspan class=\"pl-kos\"\u003e}\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e \u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e\n id: \u003cspan class=\"pl-s1\"\u003eoriginalId\u003c/span\u003e\n \u003cspan class=\"pl-s1\"\u003etitle\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e}\u003c/span\u003e\n ...\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eThen pass the field value to the prop \u003ccode\u003erecordId\u003c/code\u003e:\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"\u0026lt;Navigator recordId={data.datoCmsBlogRoot.id}\u0026gt;\n {data.datoCmsBlogRoot.title}\n\u0026lt;/Navigator\u0026gt;\"\u003e\u003cpre\u003e\u003cspan class=\"pl-c1\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003eNavigator\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003erecordId\u003c/span\u003e\u003cspan class=\"pl-c1\"\u003e=\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e\u003cspan class=\"pl-s1\"\u003edata\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-c1\"\u003edatoCmsBlogRoot\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-c1\"\u003eid\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e}\u003c/span\u003e\u003cspan class=\"pl-c1\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e\u003cspan class=\"pl-s1\"\u003edata\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-c1\"\u003edatoCmsBlogRoot\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-c1\"\u003etitle\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e}\u003c/span\u003e\n\u003cspan class=\"pl-c1\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-c1\"\u003e/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003eNavigator\u003c/span\u003e\u003cspan class=\"pl-c1\"\u003e\u0026gt;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eThat's it. Now in any page the link is displayed with the proper path according to the page language.\u003c/p\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch3 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eDynamic link with StructuredText\u003c/h3\u003e\u003ca id=\"user-content-dynamic-link-with-structuredtext\" class=\"anchor\" aria-label=\"Permalink: Dynamic link with StructuredText\" href=\"#dynamic-link-with-structuredtext\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eSince DatoCMS provides a set of \u003ca href=\"https://www.npmjs.com/package/react-datocms\" rel=\"nofollow\"\u003ecomponents\u003c/a\u003e to work faster with React, it is possible to automate the rendering of any link or block \u003cstrong\u003eincluded\u003c/strong\u003e in a Structured Text Field with a custom component. The complete documentation can be found \u003ca href=\"https://github.com/datocms/react-datocms#custom-renderers\"\u003ehere\u003c/a\u003e.\u003c/p\u003e\n\u003cp dir=\"auto\"\u003eThis is so far the best approach because you will set the template only once, then your content editors will add new records and create links with no further intervention on your behalf.\u003c/p\u003e\n\u003cp dir=\"auto\"\u003eOf course this is \u003cstrong\u003ealready set up for you\u003c/strong\u003e in the starter templates but in case you want to create new ones, those are the steps you have to follow:\u003c/p\u003e\n\u003col dir=\"auto\"\u003e\n\u003cli\u003eAdd a structured text field to your content model:\u003c/li\u003e\n\u003c/ol\u003e\n\u003cp dir=\"auto\"\u003e\u003ca target=\"_blank\" rel=\"noopener noreferrer nofollow\" href=\"https://camo.githubusercontent.com/0c9c258be0f41ed3214f0759cdc839dfec1f7179b8360f59bcf20a8f831951a6/68747470733a2f2f692e6962622e636f2f7251596a64777a2f53636865726d6174612d323032322d30322d31362d616c6c652d31312d34382d35382e706e67\"\u003e\u003cimg src=\"https://camo.githubusercontent.com/0c9c258be0f41ed3214f0759cdc839dfec1f7179b8360f59bcf20a8f831951a6/68747470733a2f2f692e6962622e636f2f7251596a64777a2f53636865726d6174612d323032322d30322d31362d616c6c652d31312d34382d35382e706e67\" alt=\"\" data-canonical-src=\"https://i.ibb.co/rQYjdwz/Schermata-2022-02-16-alle-11-48-58.png\" style=\"max-width: 100%;\"\u003e\u003c/a\u003e\u003c/p\u003e\n\u003cp dir=\"auto\"\u003eIn the field settings specify from which content models the editors are allowed to add links:\u003c/p\u003e\n\u003cp dir=\"auto\"\u003e\u003ca target=\"_blank\" rel=\"noopener noreferrer nofollow\" href=\"https://camo.githubusercontent.com/839ece3ae000268a21631215bdb66c9f7f880e73879e06b3cdb69a5c24a8d43d/68747470733a2f2f692e6962622e636f2f463031666379352f53636865726d6174612d323032312d30382d30322d616c6c652d31312d32352d31352e706e67\"\u003e\u003cimg src=\"https://camo.githubusercontent.com/839ece3ae000268a21631215bdb66c9f7f880e73879e06b3cdb69a5c24a8d43d/68747470733a2f2f692e6962622e636f2f463031666379352f53636865726d6174612d323032312d30382d30322d616c6c652d31312d32352d31352e706e67\" alt=\"\" data-canonical-src=\"https://i.ibb.co/F01fcy5/Schermata-2021-08-02-alle-11-25-15.png\" style=\"max-width: 100%;\"\u003e\u003c/a\u003e\u003c/p\u003e\n\u003cp dir=\"auto\"\u003eLinks will be available for selection to your content editors when writing posts:\u003c/p\u003e\n\u003cp dir=\"auto\"\u003e\u003ca target=\"_blank\" rel=\"noopener noreferrer nofollow\" href=\"https://camo.githubusercontent.com/94c6b9d89e79fa2b63e2fd658ccbb092ff479c3a9f419dd5ad06fc0f54e2bfaa/68747470733a2f2f692e706f7374696d672e63632f71525035344e4d782f496c2d6d696f2d66696c6d61746f2e676966\"\u003e\u003cimg src=\"https://camo.githubusercontent.com/94c6b9d89e79fa2b63e2fd658ccbb092ff479c3a9f419dd5ad06fc0f54e2bfaa/68747470733a2f2f692e706f7374696d672e63632f71525035344e4d782f496c2d6d696f2d66696c6d61746f2e676966\" width=\"600px\" data-animated-image=\"\" data-canonical-src=\"https://i.postimg.cc/qRP54NMx/Il-mio-filmato.gif\" style=\"max-width: 100%;\"\u003e\u003c/a\u003e\u003c/p\u003e\n\u003cbr\u003e\n\u003col start=\"2\" dir=\"auto\"\u003e\n\u003cli\u003eQuery the structured text field:\u003c/li\u003e\n\u003c/ol\u003e\n\u003cdiv class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"export const query = graphql`\n query BlogPostTemplateQuery(\n $id: String!\n $locale: String!\n ) {\n datoCmsBlogPost(originalId: { eq: $id }, locale: { eq: $locale }) {\n structuredText {\n value\n links {\n ... on DatoCmsBlogPost {\n id: originalId\n }\n ... on DatoCmsOtherPage {\n id: originalId\n }\n ... on DatoCmsHomepage {\n id: originalId\n }\n ... on DatoCmsBlogRoot {\n id: originalId\n }\n }\n value\n }\n ...\"\u003e\u003cpre\u003e\u003cspan class=\"pl-k\"\u003eexport\u003c/span\u003e \u003cspan class=\"pl-k\"\u003econst\u003c/span\u003e \u003cspan class=\"pl-s1\"\u003equery\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e=\u003c/span\u003e \u003cspan class=\"pl-s1\"\u003egraphql\u003c/span\u003e`\n \u003cspan class=\"pl-s1\"\u003equery\u003c/span\u003e \u003cspan class=\"pl-v\"\u003eBlogPostTemplateQuery\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\n \u003cspan class=\"pl-s1\"\u003e$id\u003c/span\u003e: \u003cspan class=\"pl-v\"\u003eString\u003c/span\u003e\u003cspan class=\"pl-c1\"\u003e!\u003c/span\u003e\n \u003cspan class=\"pl-s1\"\u003e$locale\u003c/span\u003e: \u003cspan class=\"pl-v\"\u003eString\u003c/span\u003e\u003cspan class=\"pl-c1\"\u003e!\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e \u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e\n \u003cspan class=\"pl-en\"\u003edatoCmsBlogPost\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-s1\"\u003eoriginalId\u003c/span\u003e: \u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eeq\u003c/span\u003e: \u003cspan class=\"pl-s1\"\u003e$id\u003c/span\u003e \u003cspan class=\"pl-kos\"\u003e}\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e \u003cspan class=\"pl-s1\"\u003elocale\u003c/span\u003e: \u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eeq\u003c/span\u003e: \u003cspan class=\"pl-s1\"\u003e$locale\u003c/span\u003e \u003cspan class=\"pl-kos\"\u003e}\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e \u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e\n \u003cspan class=\"pl-s1\"\u003estructuredText\u003c/span\u003e \u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e\n \u003cspan class=\"pl-s1\"\u003evalue\u003c/span\u003e\n \u003cspan class=\"pl-s1\"\u003elinks\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u003c/span\u003e \u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e\n ... \u003cspan class=\"pl-s1\"\u003eon\u003c/span\u003e \u003cspan class=\"pl-v\"\u003eDatoCmsBlogPost\u003c/span\u003e \u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e\n \u003cspan class=\"pl-s1\"\u003eid\u003c/span\u003e: \u003cspan class=\"pl-s1\"\u003eoriginalId\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e}\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eon\u003c/span\u003e \u003cspan class=\"pl-v\"\u003eDatoCmsOtherPage\u003c/span\u003e \u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e\n \u003cspan class=\"pl-c1\"\u003eid\u003c/span\u003e: \u003cspan class=\"pl-s1\"\u003eoriginalId\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e}\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eon\u003c/span\u003e \u003cspan class=\"pl-v\"\u003eDatoCmsHomepage\u003c/span\u003e \u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e\n \u003cspan class=\"pl-c1\"\u003eid\u003c/span\u003e: \u003cspan class=\"pl-s1\"\u003eoriginalId\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e}\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eon\u003c/span\u003e \u003cspan class=\"pl-v\"\u003eDatoCmsBlogRoot\u003c/span\u003e \u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e\n id: \u003cspan class=\"pl-s1\"\u003eoriginalId\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e}\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e}\u003c/span\u003e\n \u003cspan class=\"pl-s1\"\u003evalue\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e}\u003c/span\u003e\n ...\u003c/pre\u003e\u003c/div\u003e\n\u003cblockquote\u003e\n\u003cp dir=\"auto\"\u003e\u003cg-emoji class=\"g-emoji\" alias=\"warning\"\u003e⚠️\u003c/g-emoji\u003e You will always have to query the \u003ccode\u003eoriginalId\u003c/code\u003e field with the \u003cstrong\u003e\u003cins\u003ealias id\u003c/ins\u003e\u003c/strong\u003e for each fragment representing the content models you allowed to be linked in the Structured text field:\u003c/p\u003e\n\u003c/blockquote\u003e\n\u003col start=\"2\" dir=\"auto\"\u003e\n\u003cli\u003eImport both StructuredText and Navigator in your template/component:\u003c/li\u003e\n\u003c/ol\u003e\n\u003cdiv class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"import { StructuredText } from 'react-datocms';\nimport { Navigator } from '../components/LanguageHelpers/Navigator';\"\u003e\u003cpre\u003e\u003cspan class=\"pl-k\"\u003eimport\u003c/span\u003e \u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e \u003cspan class=\"pl-v\"\u003eStructuredText\u003c/span\u003e \u003cspan class=\"pl-kos\"\u003e}\u003c/span\u003e \u003cspan class=\"pl-k\"\u003efrom\u003c/span\u003e \u003cspan class=\"pl-s\"\u003e'react-datocms'\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\n\u003cspan class=\"pl-k\"\u003eimport\u003c/span\u003e \u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e \u003cspan class=\"pl-v\"\u003eNavigator\u003c/span\u003e \u003cspan class=\"pl-kos\"\u003e}\u003c/span\u003e \u003cspan class=\"pl-k\"\u003efrom\u003c/span\u003e \u003cspan class=\"pl-s\"\u003e'../components/LanguageHelpers/Navigator'\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003col start=\"3\" dir=\"auto\"\u003e\n\u003cli\u003eUse Navigator as renderer for the \u003ccode\u003erenderLinkToRecord\u003c/code\u003e prop and pass the id field to it:\u003c/li\u003e\n\u003c/ol\u003e\n\u003cdiv class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"const BlogPostTemplate = ({ data, pageContext }) =\u0026gt; (\n \u0026lt;PageWrapper pageData={pageContext}\u0026gt;\n \u0026lt;ArticleBody\u0026gt;\n {data.datoCmsBlogPost.structuredText?.value \u0026amp;\u0026amp; (\n \u0026lt;StructuredText\n key={id}\n data={structuredText}\n renderLinkToRecord={({\n record,\n children,\n transformedMeta,\n }) =\u0026gt; (\n \u0026lt;Navigator {...transformedMeta} recordId={record.id}\u0026gt;\n {children}\n \u0026lt;/Navigator\u0026gt;\n )}\n /\u0026gt;\n )}\n \u0026lt;/ArticleBody\u0026gt;\n...\"\u003e\u003cpre\u003e\u003cspan class=\"pl-k\"\u003econst\u003c/span\u003e \u003cspan class=\"pl-v\"\u003eBlogPostTemplate\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e=\u003c/span\u003e \u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e data\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e pageContext \u003cspan class=\"pl-kos\"\u003e}\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e=\u0026gt;\u003c/span\u003e \u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\n \u003cspan class=\"pl-c1\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ePageWrapper\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003epageData\u003c/span\u003e\u003cspan class=\"pl-c1\"\u003e=\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e\u003cspan class=\"pl-s1\"\u003epageContext\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e}\u003c/span\u003e\u003cspan class=\"pl-c1\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-c1\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003eArticleBody\u003c/span\u003e\u003cspan class=\"pl-c1\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e\u003cspan class=\"pl-s1\"\u003edata\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-c1\"\u003edatoCmsBlogPost\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-c1\"\u003estructuredText\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e?.\u003c/span\u003e\u003cspan class=\"pl-c1\"\u003evalue\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e\u0026amp;\u0026amp;\u003c/span\u003e \u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\n \u003cspan class=\"pl-c1\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003eStructuredText\u003c/span\u003e\n \u003cspan class=\"pl-c1\"\u003ekey\u003c/span\u003e\u003cspan class=\"pl-c1\"\u003e=\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e\u003cspan class=\"pl-s1\"\u003eid\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e}\u003c/span\u003e\n \u003cspan class=\"pl-c1\"\u003edata\u003c/span\u003e\u003cspan class=\"pl-c1\"\u003e=\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e\u003cspan class=\"pl-s1\"\u003estructuredText\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e}\u003c/span\u003e\n \u003cspan class=\"pl-c1\"\u003erenderLinkToRecord\u003c/span\u003e\u003cspan class=\"pl-c1\"\u003e=\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e\n record\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e\n children\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e\n transformedMeta\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e}\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e=\u0026gt;\u003c/span\u003e \u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\n \u003cspan class=\"pl-c1\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003eNavigator\u003c/span\u003e \u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e...\u003cspan class=\"pl-s1\"\u003etransformedMeta\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e}\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003erecordId\u003c/span\u003e\u003cspan class=\"pl-c1\"\u003e=\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e\u003cspan class=\"pl-s1\"\u003erecord\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-c1\"\u003eid\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e}\u003c/span\u003e\u003cspan class=\"pl-c1\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e\u003cspan class=\"pl-s1\"\u003echildren\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e}\u003c/span\u003e\n \u003cspan class=\"pl-c1\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-c1\"\u003e/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003eNavigator\u003c/span\u003e\u003cspan class=\"pl-c1\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e}\u003c/span\u003e\n \u003cspan class=\"pl-c1\"\u003e/\u003c/span\u003e\u003cspan class=\"pl-c1\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e}\u003c/span\u003e\n \u003cspan class=\"pl-c1\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-c1\"\u003e/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003eArticleBody\u003c/span\u003e\u003cspan class=\"pl-c1\"\u003e\u0026gt;\u003c/span\u003e\n...\u003c/pre\u003e\u003c/div\u003e\n\u003cblockquote\u003e\n\u003cp dir=\"auto\"\u003eSpread \u003ccode\u003e{...transformedMeta}\u003c/code\u003e to render any custom attribute you set on Dato when adding the link. Of course you can localize those attributes as long as the Structured Text field is set as localizable.\u003c/p\u003e\n\u003c/blockquote\u003e\n\u003cbr\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch2 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eTemplate design strategy\u003c/h2\u003e\u003ca id=\"user-content-template-design-strategy\" class=\"anchor\" aria-label=\"Permalink: Template design strategy\" href=\"#template-design-strategy\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cblockquote\u003e\n\u003cp dir=\"auto\"\u003e\u003cins\u003eExample case\u003c/ins\u003e: You are going to create three pages with different layout and content: \u003ccode\u003e/contact, /about, /mission\u003c/code\u003e.\u003c/p\u003e\n\u003c/blockquote\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch3 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eTypical approach\u003c/h3\u003e\u003ca id=\"user-content-typical-approach\" class=\"anchor\" aria-label=\"Permalink: Typical approach\" href=\"#typical-approach\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eYou create a single instance content model for each page with its own data fields or blocks, and then query, filter and render those fields in three different templates like \u003ccode\u003eContactPage.jsx\u003c/code\u003e, \u003ccode\u003eAboutPage.jsx\u003c/code\u003e and \u003ccode\u003eMission.jsx\u003c/code\u003e.\u003c/p\u003e\n\u003cp dir=\"auto\"\u003eThe template file will render the data of each single field of the content model:\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"const ContactPageTemplate = ({ data, pageContext }) =\u0026gt; (\n \u0026lt;PageWrapper pageData={pageContext}\u0026gt;\n \u0026lt;Heading\u0026gt;{data.datoCmsContactPage.title}\u0026lt;/Heading\u0026gt;\n \u0026lt;SubHeading\u0026gt;{data.datoCmsContactPage.subtitle}\u0026lt;/SubHeading\u0026gt;\n \u0026lt;Hero\n title={data.datoCmsContactPage.hero.heroTitle}\n subtitle={data.datoCmsContactPage.hero.heroTitle}\n \u0026gt;\n \u0026lt;/PageWrapper\u0026gt;\n);\n\nexport default ContactPageTemplate;\n\nexport const query = graphql`\n query ContactPageQuery() {\n datoCmsContactPage(locale: $locale) {\n title\n subtitle\n hero {\n heroTitle\n heroSubtitle\n }\n }\n }\n`;\"\u003e\u003cpre\u003e\u003cspan class=\"pl-k\"\u003econst\u003c/span\u003e \u003cspan class=\"pl-v\"\u003eContactPageTemplate\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e=\u003c/span\u003e \u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e data\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e pageContext \u003cspan class=\"pl-kos\"\u003e}\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e=\u0026gt;\u003c/span\u003e \u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\n \u003cspan class=\"pl-c1\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ePageWrapper\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003epageData\u003c/span\u003e\u003cspan class=\"pl-c1\"\u003e=\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e\u003cspan class=\"pl-s1\"\u003epageContext\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e}\u003c/span\u003e\u003cspan class=\"pl-c1\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-c1\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003eHeading\u003c/span\u003e\u003cspan class=\"pl-c1\"\u003e\u0026gt;\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e\u003cspan class=\"pl-s1\"\u003edata\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-c1\"\u003edatoCmsContactPage\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-c1\"\u003etitle\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e}\u003c/span\u003e\u003cspan class=\"pl-c1\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-c1\"\u003e/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003eHeading\u003c/span\u003e\u003cspan class=\"pl-c1\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-c1\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003eSubHeading\u003c/span\u003e\u003cspan class=\"pl-c1\"\u003e\u0026gt;\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e\u003cspan class=\"pl-s1\"\u003edata\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-c1\"\u003edatoCmsContactPage\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-c1\"\u003esubtitle\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e}\u003c/span\u003e\u003cspan class=\"pl-c1\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-c1\"\u003e/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003eSubHeading\u003c/span\u003e\u003cspan class=\"pl-c1\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-c1\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003eHero\u003c/span\u003e\n \u003cspan class=\"pl-c1\"\u003etitle\u003c/span\u003e\u003cspan class=\"pl-c1\"\u003e=\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e\u003cspan class=\"pl-s1\"\u003edata\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-c1\"\u003edatoCmsContactPage\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-c1\"\u003ehero\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-c1\"\u003eheroTitle\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e}\u003c/span\u003e\n \u003cspan class=\"pl-c1\"\u003esubtitle\u003c/span\u003e\u003cspan class=\"pl-c1\"\u003e=\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e\u003cspan class=\"pl-s1\"\u003edata\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-c1\"\u003edatoCmsContactPage\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-c1\"\u003ehero\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-c1\"\u003eheroTitle\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e}\u003c/span\u003e\n \u003cspan class=\"pl-c1\"\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-c1\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-c1\"\u003e/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ePageWrapper\u003c/span\u003e\u003cspan class=\"pl-c1\"\u003e\u0026gt;\u003c/span\u003e\n);\n\nexport default ContactPageTemplate;\n\nexport const query = graphql`\n query ContactPageQuery() \u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e\n \u003cspan class=\"pl-en\"\u003edatoCmsContactPage\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-s1\"\u003elocale\u003c/span\u003e: \u003cspan class=\"pl-s1\"\u003e$locale\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u003c/span\u003e \u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e\n \u003cspan class=\"pl-s1\"\u003etitle\u003c/span\u003e\n \u003cspan class=\"pl-s1\"\u003esubtitle\u003c/span\u003e\n \u003cspan class=\"pl-s1\"\u003ehero\u003c/span\u003e \u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e\n \u003cspan class=\"pl-s1\"\u003eheroTitle\u003c/span\u003e\n \u003cspan class=\"pl-s1\"\u003eheroSubtitle\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e}\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e}\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e}\u003c/span\u003e\n`\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eThen you repeat those steps for any other page like \u003ccode\u003e/about\u003c/code\u003e and \u003ccode\u003e/mission\u003c/code\u003e.\u003c/p\u003e\n\u003cp dir=\"auto\"\u003eSo at the end of your journey you will have \u003cins\u003ethree\u003c/ins\u003e different single-instance content models on Dato, \u003cins\u003ethree\u003c/ins\u003e different templates in your project folder and \u003cins\u003ethree\u003c/ins\u003e different queries for each template.\u003c/p\u003e\n\u003cblockquote\u003e\n\u003cp dir=\"auto\"\u003eThis approach has been used to generate the homepage, the categories archive page and the blog root page of this starter.\u003c/p\u003e\n\u003c/blockquote\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch3 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eStructured text approach\u003c/h3\u003e\u003ca id=\"user-content-structured-text-approach\" class=\"anchor\" aria-label=\"Permalink: Structured text approach\" href=\"#structured-text-approach\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eInstead of creating a single-instance content model for each page, you can create \u003cins\u003eone\u003c/ins\u003e content model of type \u003cins\u003ecollection\u003c/ins\u003e, add the mandatory shared fields such as \u003ccode\u003eseo\u003c/code\u003e and \u003ccode\u003eslug\u003c/code\u003e and then add a \u003cins\u003esingle\u003c/ins\u003e Structured text field to hold all your content.\u003c/p\u003e\n\u003cp dir=\"auto\"\u003eThen you can create one record for each page you want to generate and inside each Structured Text field add \u003cstrong\u003edifferent blocks\u003c/strong\u003e according to the page layout and content.\u003c/p\u003e\n\u003cp dir=\"auto\"\u003eOnce your records are ready with different content per Structured Text field you can set \u003cstrong\u003ecustom renderers\u003c/strong\u003e inside the StructuredText component in a \u003cstrong\u003esingle shared template file\u003c/strong\u003e.\u003c/p\u003e\n\u003cp dir=\"auto\"\u003eAt the end of this journey you will have, \u003cins\u003eone\u003c/ins\u003e template for all the pages you are going to generate, \u003cins\u003eone\u003c/ins\u003e query to retrieve all different data and \u003cins\u003eone\u003c/ins\u003e model of type collection.\u003c/p\u003e\n\u003cblockquote\u003e\n\u003cp dir=\"auto\"\u003eThis approach has been used to generate the \u003ccode\u003e/guide\u003c/code\u003e and \u003ccode\u003e/features\u003c/code\u003e pages of this starter by using the template \u003ccode\u003eOtherPages.jsx\u003c/code\u003e.\u003c/p\u003e\n\u003c/blockquote\u003e\n\u003cp dir=\"auto\"\u003eThe best way to understand how it works is to read this \u003ca href=\"https://www.cantierecreativo.net/blog/how-to-use-datocms-s-awesome-structured-text-field-in-a-nextjs-app/\" rel=\"nofollow\"\u003earticle\u003c/a\u003e from the authors of DatoCMS and also to check the project files.\u003c/p\u003e\n\u003cp dir=\"auto\"\u003eThis opens the doors to different scenarios where for example, your content editors create pages, build the layout using a friendly UI completely without any developer intervention, just like they used to do with many Wordpress page builders.\u003c/p\u003e\n\u003cbr\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch2 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eAccessing languages\u003c/h2\u003e\u003ca id=\"user-content-accessing-languages\" class=\"anchor\" aria-label=\"Permalink: Accessing languages\" href=\"#accessing-languages\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eYou most like won't need to but if you want to access the \u003ccode\u003epageLocale\u003c/code\u003e, you can call this hook in any component file used in any of your templates:\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"import { usePageLocale } from '/src/hooks/usePageLocale';\"\u003e\u003cpre\u003e\u003cspan class=\"pl-k\"\u003eimport\u003c/span\u003e \u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e \u003cspan class=\"pl-s1\"\u003eusePageLocale\u003c/span\u003e \u003cspan class=\"pl-kos\"\u003e}\u003c/span\u003e \u003cspan class=\"pl-k\"\u003efrom\u003c/span\u003e \u003cspan class=\"pl-s\"\u003e'/src/hooks/usePageLocale'\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eAnd use it:\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"const { pageLocale } = usePageLocale();\n\nconsole.log(pageLocale); // Logs \u0026quot;es-ES\u0026quot;\"\u003e\u003cpre\u003e\u003cspan class=\"pl-k\"\u003econst\u003c/span\u003e \u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e pageLocale \u003cspan class=\"pl-kos\"\u003e}\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e=\u003c/span\u003e \u003cspan class=\"pl-en\"\u003eusePageLocale\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\n\n\u003cspan class=\"pl-smi\"\u003econsole\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-en\"\u003elog\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-s1\"\u003epageLocale\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e \u003cspan class=\"pl-c\"\u003e// Logs \"es-ES\"\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cblockquote\u003e\n\u003cp dir=\"auto\"\u003e\u003cg-emoji class=\"g-emoji\" alias=\"warning\"\u003e⚠️\u003c/g-emoji\u003e Do not call this hook in your template files, call it in any component file and use it in your templates.\u003c/p\u003e\n\u003c/blockquote\u003e\n\u003cp dir=\"auto\"\u003eSame for the website languages:\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"import { useLocales } from '/src/hooks/useLocales';\"\u003e\u003cpre\u003e\u003cspan class=\"pl-k\"\u003eimport\u003c/span\u003e \u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e \u003cspan class=\"pl-s1\"\u003euseLocales\u003c/span\u003e \u003cspan class=\"pl-kos\"\u003e}\u003c/span\u003e \u003cspan class=\"pl-k\"\u003efrom\u003c/span\u003e \u003cspan class=\"pl-s\"\u003e'/src/hooks/useLocales'\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cdiv class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"const { locales, defaultLocale } = usedefaultLocale();\n\nconsole.log(locales); // Logs [\u0026quot;en\u0026quot;, \u0026quot;es\u0026quot;, \u0026quot;it\u0026quot;]\nconsole.log(defaultLocale); // Logs \u0026quot;en\u0026quot;\"\u003e\u003cpre\u003e\u003cspan class=\"pl-k\"\u003econst\u003c/span\u003e \u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e locales\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e defaultLocale \u003cspan class=\"pl-kos\"\u003e}\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e=\u003c/span\u003e \u003cspan class=\"pl-en\"\u003eusedefaultLocale\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\n\n\u003cspan class=\"pl-smi\"\u003econsole\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-en\"\u003elog\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-s1\"\u003elocales\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e \u003cspan class=\"pl-c\"\u003e// Logs [\"en\", \"es\", \"it\"]\u003c/span\u003e\n\u003cspan class=\"pl-smi\"\u003econsole\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-en\"\u003elog\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-s1\"\u003edefaultLocale\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e \u003cspan class=\"pl-c\"\u003e// Logs \"en\"\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cbr\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch2 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eFormatting date and time\u003c/h2\u003e\u003ca id=\"user-content-formatting-date-and-time\" class=\"anchor\" aria-label=\"Permalink: Formatting date and time\" href=\"#formatting-date-and-time\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eBy default date strings coming from GraphQL queries:\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"query {\n datoCmsBlogPost {\n meta {\n firstPublishedAt // \u0026lt;-- Always returns \u0026quot;2021-07-19T12:12:15.597+02:00\u0026quot;\n }\n }\n}\"\u003e\u003cpre\u003e\u003cspan class=\"pl-s1\"\u003equery\u003c/span\u003e \u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e\n \u003cspan class=\"pl-s1\"\u003edatoCmsBlogPost\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u003c/span\u003e \u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e\n \u003cspan class=\"pl-s1\"\u003emeta\u003c/span\u003e \u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e\n \u003cspan class=\"pl-s1\"\u003efirstPublishedAt\u003c/span\u003e \u003cspan class=\"pl-c\"\u003e// \u0026lt;-- Always returns \"2021-07-19T12:12:15.597+02:00\"\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e}\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e}\u003c/span\u003e\n\u003cspan class=\"pl-kos\"\u003e}\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eAre formatted according to the \u003cstrong\u003epage language\u003c/strong\u003e and the following \u003ca href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleString\" rel=\"nofollow\"\u003eoptions\u003c/a\u003e:\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"const timeOptions = {\n hour: '2-digit',\n minute: '2-digit',\n};\n\n// Time: 23:30 (\u0026quot;it\u0026quot;) or 11:30 PM (\u0026quot;en\u0026quot;)\n\nconst dateOptions = {\n year: 'numeric',\n month: 'short',\n day: 'numeric',\n};\n\n// Date: 23 Nov 2020 (\u0026quot;it\u0026quot;) or Nov 23, 2020 (\u0026quot;en\u0026quot;)\"\u003e\u003cpre\u003e\u003cspan class=\"pl-k\"\u003econst\u003c/span\u003e \u003cspan class=\"pl-s1\"\u003etimeOptions\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e=\u003c/span\u003e \u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e\n \u003cspan class=\"pl-c1\"\u003ehour\u003c/span\u003e: \u003cspan class=\"pl-s\"\u003e'2-digit'\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e\n \u003cspan class=\"pl-c1\"\u003eminute\u003c/span\u003e: \u003cspan class=\"pl-s\"\u003e'2-digit'\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e\n\u003cspan class=\"pl-kos\"\u003e}\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\n\n\u003cspan class=\"pl-c\"\u003e// Time: 23:30 (\"it\") or 11:30 PM (\"en\")\u003c/span\u003e\n\n\u003cspan class=\"pl-k\"\u003econst\u003c/span\u003e \u003cspan class=\"pl-s1\"\u003edateOptions\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e=\u003c/span\u003e \u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e\n \u003cspan class=\"pl-c1\"\u003eyear\u003c/span\u003e: \u003cspan class=\"pl-s\"\u003e'numeric'\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e\n \u003cspan class=\"pl-c1\"\u003emonth\u003c/span\u003e: \u003cspan class=\"pl-s\"\u003e'short'\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e\n \u003cspan class=\"pl-c1\"\u003eday\u003c/span\u003e: \u003cspan class=\"pl-s\"\u003e'numeric'\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e\n\u003cspan class=\"pl-kos\"\u003e}\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\n\n\u003cspan class=\"pl-c\"\u003e// Date: 23 Nov 2020 (\"it\") or Nov 23, 2020 (\"en\")\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eOptions can be edited in \u003ccode\u003esrc/functions/formatDateTime.js\u003c/code\u003e.\u003c/p\u003e\n\u003cp dir=\"auto\"\u003eThere are two functions in the above mentioned file:\u003c/p\u003e\n\u003cp dir=\"auto\"\u003e\u003ccode\u003eformatDate(dateString, pageLocale)\u003c/code\u003e - Returns \u003ccode\u003eJul 17, 2021\u003c/code\u003e or \u003ccode\u003e17 lug 2021\u003c/code\u003e according to the page locale\u003c/p\u003e\n\u003cp dir=\"auto\"\u003e\u003ccode\u003eformatDateTime(dateString, pageLocale)\u003c/code\u003e - Returns \u003ccode\u003eFeb 10, 2022, 12:20 PM\u003c/code\u003e or \u003ccode\u003e10 feb 2022, 12:21\u003c/code\u003e\u003c/p\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch3 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003euseFormattedDate hook\u003c/h3\u003e\u003ca id=\"user-content-useformatteddate-hook\" class=\"anchor\" aria-label=\"Permalink: useFormattedDate hook\" href=\"#useformatteddate-hook\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eTo quickly format the date coming from any DatoCMS / GraphQL field, import the hook:\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"import { useFormattedDate } from '../hooks/useFormattedDate';\"\u003e\u003cpre\u003e\u003cspan class=\"pl-k\"\u003eimport\u003c/span\u003e \u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e \u003cspan class=\"pl-s1\"\u003euseFormattedDate\u003c/span\u003e \u003cspan class=\"pl-kos\"\u003e}\u003c/span\u003e \u003cspan class=\"pl-k\"\u003efrom\u003c/span\u003e \u003cspan class=\"pl-s\"\u003e'../hooks/useFormattedDate'\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eAnd use it:\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"datoCmsBlogPost(originalId: { eq: $id }, locale: { eq: $locale }) {\n meta {\n updatedAt\n }\n ...\n\nconst { formattedDate } = useFormattedDate(data.datoCmsBlogPost.meta.updatedAt);\n\n\u0026lt;time\u0026gt;{formattedDate}\u0026lt;/time\u0026gt;\"\u003e\u003cpre\u003e\u003cspan class=\"pl-en\"\u003edatoCmsBlogPost\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-s1\"\u003eoriginalId\u003c/span\u003e: \u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eeq\u003c/span\u003e: \u003cspan class=\"pl-s1\"\u003e$id\u003c/span\u003e \u003cspan class=\"pl-kos\"\u003e}\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e \u003cspan class=\"pl-s1\"\u003elocale\u003c/span\u003e: \u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eeq\u003c/span\u003e: \u003cspan class=\"pl-s1\"\u003e$locale\u003c/span\u003e \u003cspan class=\"pl-kos\"\u003e}\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u003c/span\u003e \u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e\n \u003cspan class=\"pl-s1\"\u003emeta\u003c/span\u003e \u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e\n \u003cspan class=\"pl-s1\"\u003eupdatedAt\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e}\u003c/span\u003e\n ...\n\n\u003cspan class=\"pl-k\"\u003econst\u003c/span\u003e \u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e formattedDate \u003cspan class=\"pl-kos\"\u003e}\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e=\u003c/span\u003e \u003cspan class=\"pl-en\"\u003euseFormattedDate\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-s1\"\u003edata\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-c1\"\u003edatoCmsBlogPost\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-c1\"\u003emeta\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-c1\"\u003eupdatedAt\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e\n\n\u003cspan class=\"pl-c1\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etime\u003c/span\u003e\u003cspan class=\"pl-c1\"\u003e\u0026gt;\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e\u003cspan class=\"pl-s1\"\u003eformattedDate\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e}\u003c/span\u003e\u003cspan class=\"pl-c1\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-c1\"\u003e/\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003etime\u003c/span\u003e\u003cspan class=\"pl-c1\"\u003e\u0026gt;\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cbr\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch2 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eIncrease categories number displayed by the dropdown\u003c/h2\u003e\u003ca id=\"user-content-increase-categories-number-displayed-by-the-dropdown\" class=\"anchor\" aria-label=\"Permalink: Increase categories number displayed by the dropdown\" href=\"#increase-categories-number-displayed-by-the-dropdown\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eIf you want to increase the number of categories displayed by the dropdown, you can edit the file \u003ccode\u003esrc/components/Layout/Header/Full\u003c/code\u003e and increase the \u003ccode\u003eend\u003c/code\u003e parameter of the \u003ccode\u003eArray.prototype.slice()\u003c/code\u003e of the following variable:\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"const categoryNodesMatch = categoryNodes\n .filter(({ locale }) =\u0026gt; locale === pageLocale)\n .slice(0, 6); // \u0026lt;-- Increase it\"\u003e\u003cpre\u003e\u003cspan class=\"pl-k\"\u003econst\u003c/span\u003e \u003cspan class=\"pl-s1\"\u003ecategoryNodesMatch\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e=\u003c/span\u003e \u003cspan class=\"pl-s1\"\u003ecategoryNodes\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-en\"\u003efilter\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e locale \u003cspan class=\"pl-kos\"\u003e}\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e=\u0026gt;\u003c/span\u003e \u003cspan class=\"pl-s1\"\u003elocale\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e===\u003c/span\u003e \u003cspan class=\"pl-s1\"\u003epageLocale\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-en\"\u003eslice\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-c1\"\u003e0\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e6\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e;\u003c/span\u003e \u003cspan class=\"pl-c\"\u003e// \u0026lt;-- Increase it\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cbr\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch2 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eSEO\u003c/h2\u003e\u003ca id=\"user-content-seo-1\" class=\"anchor\" aria-label=\"Permalink: SEO\" href=\"#seo-1\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eEach template must be wrapped in the component named \u003ccode\u003e\u0026lt;PageWrapper /\u0026gt;\u003c/code\u003e which accepts also three SEO-related props:\u003c/p\u003e\n\u003cmarkdown-accessiblity-table\u003e\u003ctable\u003e\n\u003cthead\u003e\n\u003ctr\u003e\n\u003cth\u003eprop\u003c/th\u003e\n\u003cth\u003etype\u003c/th\u003e\n\u003cth\u003edescription\u003c/th\u003e\n\u003c/tr\u003e\n\u003c/thead\u003e\n\u003ctbody\u003e\n\u003ctr\u003e\n\u003ctd\u003e\u003ccode\u003eseoTitle\u003c/code\u003e\u003c/td\u003e\n\u003ctd\u003estring\u003c/td\u003e\n\u003ctd\u003eAccepts the title defined in the \u003ccode\u003eseo\u003c/code\u003e field on any content model\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003e\u003ccode\u003eseoDescription\u003c/code\u003e\u003c/td\u003e\n\u003ctd\u003estring\u003c/td\u003e\n\u003ctd\u003eAccepts the description defined in the \u003ccode\u003eseo\u003c/code\u003e field on any content model\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003e\u003ccode\u003eseoImage\u003c/code\u003e\u003c/td\u003e\n\u003ctd\u003estring\u003c/td\u003e\n\u003ctd\u003eAccepts the image url uploaded in the \u003ccode\u003eseo\u003c/code\u003e field on any content model\u003c/td\u003e\n\u003c/tr\u003e\n\u003c/tbody\u003e\n\u003c/table\u003e\u003c/markdown-accessiblity-table\u003e\n\u003cp dir=\"auto\"\u003eIf the fields return undefined or you don't set the props at all, global SEO fields will be rendered.\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"const HomePageTemplate = ({ data, pageContext }) =\u0026gt; (\n \u0026lt;PageWrapper\n pageData={pageContext}\n seoTitle={data.datoCmsHomepage.seo?.title}\n seoDescription={data.datoCmsHomepage.seo?.description}\n seoImage={data.datoCmsHomepage.seo?.image?.url}\n \u0026gt;\n ...\n\n\nexport const query = graphql`\n query HomePageTemplate($locale: String!) {\n datoCmsHomepage(locale: { eq: $locale }) {\n seo {\n title\n description\n image {\n url\n }\n }\n ...\"\u003e\u003cpre\u003e\u003cspan class=\"pl-k\"\u003econst\u003c/span\u003e \u003cspan class=\"pl-v\"\u003eHomePageTemplate\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e=\u003c/span\u003e \u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e data\u003cspan class=\"pl-kos\"\u003e,\u003c/span\u003e pageContext \u003cspan class=\"pl-kos\"\u003e}\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e=\u0026gt;\u003c/span\u003e \u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\n \u003cspan class=\"pl-c1\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-ent\"\u003ePageWrapper\u003c/span\u003e\n \u003cspan class=\"pl-c1\"\u003epageData\u003c/span\u003e\u003cspan class=\"pl-c1\"\u003e=\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e\u003cspan class=\"pl-s1\"\u003epageContext\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e}\u003c/span\u003e\n \u003cspan class=\"pl-c1\"\u003eseoTitle\u003c/span\u003e\u003cspan class=\"pl-c1\"\u003e=\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e\u003cspan class=\"pl-s1\"\u003edata\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-c1\"\u003edatoCmsHomepage\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-c1\"\u003eseo\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e?.\u003c/span\u003e\u003cspan class=\"pl-c1\"\u003etitle\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e}\u003c/span\u003e\n \u003cspan class=\"pl-c1\"\u003eseoDescription\u003c/span\u003e\u003cspan class=\"pl-c1\"\u003e=\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e\u003cspan class=\"pl-s1\"\u003edata\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-c1\"\u003edatoCmsHomepage\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-c1\"\u003eseo\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e?.\u003c/span\u003e\u003cspan class=\"pl-c1\"\u003edescription\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e}\u003c/span\u003e\n \u003cspan class=\"pl-c1\"\u003eseoImage\u003c/span\u003e\u003cspan class=\"pl-c1\"\u003e=\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e\u003cspan class=\"pl-s1\"\u003edata\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-c1\"\u003edatoCmsHomepage\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e.\u003c/span\u003e\u003cspan class=\"pl-c1\"\u003eseo\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e?.\u003c/span\u003e\u003cspan class=\"pl-c1\"\u003eimage\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e?.\u003c/span\u003e\u003cspan class=\"pl-c1\"\u003eurl\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e}\u003c/span\u003e\n \u003cspan class=\"pl-c1\"\u003e\u0026gt;\u003c/span\u003e\n ...\n\n\nexport const query = graphql`\n query HomePageTemplate($locale: String!) \u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e\n \u003cspan class=\"pl-en\"\u003edatoCmsHomepage\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-s1\"\u003elocale\u003c/span\u003e: \u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eeq\u003c/span\u003e: \u003cspan class=\"pl-s1\"\u003e$locale\u003c/span\u003e \u003cspan class=\"pl-kos\"\u003e}\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e\u003c/span\u003e \u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e\n \u003cspan class=\"pl-s1\"\u003eseo\u003c/span\u003e \u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e\n \u003cspan class=\"pl-s1\"\u003etitle\u003c/span\u003e\n \u003cspan class=\"pl-s1\"\u003edescription\u003c/span\u003e\n \u003cspan class=\"pl-s1\"\u003eimage\u003c/span\u003e \u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e\n url\n \u003cspan class=\"pl-kos\"\u003e}\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e}\u003c/span\u003e\n ...\u003c/pre\u003e\u003c/div\u003e\n\u003cbr\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch1 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eTroubleshooting\u003c/h1\u003e\u003ca id=\"user-content-troubleshooting\" class=\"anchor\" aria-label=\"Permalink: Troubleshooting\" href=\"#troubleshooting\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch2 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eNavigator\u003c/h2\u003e\u003ca id=\"user-content-navigator\" class=\"anchor\" aria-label=\"Permalink: Navigator\" href=\"#navigator\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003e\u003ca target=\"_blank\" rel=\"noopener noreferrer nofollow\" href=\"https://camo.githubusercontent.com/8e800b23af8249e17fa898df1b9174cf4445979dcc640328a28c6dc94d38f0b6/68747470733a2f2f692e6962622e636f2f4c703062777a792f53636865726d6174612d323032322d30322d31382d616c6c652d31372d33312d34342e706e67\"\u003e\u003cimg src=\"https://camo.githubusercontent.com/8e800b23af8249e17fa898df1b9174cf4445979dcc640328a28c6dc94d38f0b6/68747470733a2f2f692e6962622e636f2f4c703062777a792f53636865726d6174612d323032322d30322d31382d616c6c652d31372d33312d34342e706e67\" alt=\"\" data-canonical-src=\"https://i.ibb.co/Lp0bwzy/Schermata-2022-02-18-alle-17-31-44.png\" style=\"max-width: 100%;\"\u003e\u003c/a\u003e\u003c/p\u003e\n\u003cp dir=\"auto\"\u003eThis error will appear whenever the Navigator component is trying to render a link to a record which has never been generated as page by gatsby-node.js for that locale.\u003c/p\u003e\n\u003cp dir=\"auto\"\u003eIf the error for example appears in: \u003ccode\u003elocalhost:8000/es/guia\u003c/code\u003e, there's a problem with Navigator component inside that page in Spanish.\u003c/p\u003e\n\u003cp dir=\"auto\"\u003eThis can happen for many different reasons:\u003c/p\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch3 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eGeneral\u003c/h3\u003e\u003ca id=\"user-content-general\" class=\"anchor\" aria-label=\"Permalink: General\" href=\"#general\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cul dir=\"auto\"\u003e\n\u003cli\u003eYou are passing the \u003ccode\u003eid\u003c/code\u003e field and not \u003ccode\u003eoriginalId\u003c/code\u003e (with the alias \u003ccode\u003eid\u003c/code\u003e).\u003c/li\u003e\n\u003cli\u003eYou forgot to export the \u003ccode\u003eoriginalId\u003c/code\u003e field with the alias \u003ccode\u003eid\u003c/code\u003e to the pageContext object when generating pages.\u003c/li\u003e\n\u003c/ul\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch3 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eStructured Text\u003c/h3\u003e\u003ca id=\"user-content-structured-text\" class=\"anchor\" aria-label=\"Permalink: Structured Text\" href=\"#structured-text\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cul dir=\"auto\"\u003e\n\u003cli\u003eYou linked in a Structured Text field (on DatoCMS) a post/category which has been marked as non-translatable.\u003c/li\u003e\n\u003cli\u003eYou linked in a Structured Text a post whose category has been marked as non-translatable.\u003c/li\u003e\n\u003cli\u003eYou passed to the \u003ccode\u003erenderLinkToRecord\u003c/code\u003e StructuredText component prop the \u003ccode\u003eoriginalId\u003c/code\u003e of the StructuredText field itself.\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp dir=\"auto\"\u003eCheck the StructuredText field content on DatoCMS for that locale and make sure of it.\u003c/p\u003e\n\u003cp dir=\"auto\"\u003eAlso, always filter any post or category query, by excluding any record marked as non-translatable:\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"query {\n allDatoCmsCategory(filter: { noTranslate: { ne: true } }) {\n categoryNodes: nodes {\n id: originalId\n }\n }\n}\"\u003e\u003cpre\u003e\u003cspan class=\"pl-s1\"\u003equery\u003c/span\u003e \u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e\n \u003cspan class=\"pl-en\"\u003eallDatoCmsCategory\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e(\u003c/span\u003e\u003cspan class=\"pl-s1\"\u003efilter\u003c/span\u003e: \u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003enoTranslate\u003c/span\u003e: \u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003ene\u003c/span\u003e: \u003cspan class=\"pl-s1\"\u003etrue\u003c/span\u003e \u003cspan class=\"pl-kos\"\u003e}\u003c/span\u003e \u003cspan class=\"pl-kos\"\u003e}\u003c/span\u003e\u003cspan class=\"pl-kos\"\u003e)\u003c/span\u003e \u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e\n categoryNodes: \u003cspan class=\"pl-s1\"\u003enodes\u003c/span\u003e \u003cspan class=\"pl-kos\"\u003e{\u003c/span\u003e\n \u003cspan class=\"pl-c1\"\u003eid\u003c/span\u003e: \u003cspan class=\"pl-s1\"\u003eoriginalId\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e}\u003c/span\u003e\n \u003cspan class=\"pl-kos\"\u003e}\u003c/span\u003e\n\u003cspan class=\"pl-kos\"\u003e}\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cbr\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch2 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eGraphQL\u003c/h2\u003e\u003ca id=\"user-content-graphql\" class=\"anchor\" aria-label=\"Permalink: GraphQL\" href=\"#graphql\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cdiv class=\"highlight highlight-text-shell-session notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"Cannot query field \u0026quot;datoCmsContactPage\u0026quot; on type ...\"\u003e\u003cpre\u003e\u003cspan class=\"pl-c1\"\u003eCannot query field \"datoCmsContactPage\" on type ...\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eYou can encounter this error both during build time and development.\u003c/p\u003e\n\u003cp dir=\"auto\"\u003eWhat happened here is that you removed a field or content model on DatoCMS and forgot to remove any query or variable referring to it in the project files. Please check \u003ca href=\"#removing-fields\"\u003ethis\u003c/a\u003e section on how to fix this issue.\u003c/p\u003e\n\u003cbr\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch1 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eIssues\u003c/h1\u003e\u003ca id=\"user-content-issues\" class=\"anchor\" aria-label=\"Permalink: Issues\" href=\"#issues\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eIf you encounter any different issue or you have any kind of request, please open an issue or contact me via \u003ca href=\"/gocode1702/headless-gatsby-multilang/blob/main/smastrom@protonmail.com\"\u003eemail\u003c/a\u003e. I will be happy to help you as soon as I can.\u003c/p\u003e\n\u003c/article\u003e","loaded":true,"timedOut":false,"errorMessage":null,"headerInfo":{"toc":[{"level":1,"text":"Headless Multilanguage Starter for Gatsby","anchor":"headless-multilanguage-starter-for-gatsby","htmlText":"Headless Multilanguage Starter for Gatsby"},{"level":1,"text":"Features","anchor":"features","htmlText":"Features"},{"level":1,"text":"Lighthouse scores","anchor":"lighthouse-scores","htmlText":"Lighthouse scores"},{"level":1,"text":"Table of contents","anchor":"table-of-contents","htmlText":"Table of contents"},{"level":1,"text":"Why DatoCMS","anchor":"why-datocms","htmlText":"Why DatoCMS"},{"level":1,"text":"Important notes","anchor":"important-notes","htmlText":"Important notes"},{"level":1,"text":"Configuration","anchor":"configuration","htmlText":"Configuration"},{"level":2,"text":"1. Starter installation","anchor":"1-starter-installation","htmlText":"1. Starter installation"},{"level":2,"text":"2. Environment configuration","anchor":"2-environment-configuration","htmlText":"2. Environment configuration"},{"level":3,"text":"1. Access project languages","anchor":"1-access-project-languages","htmlText":"1. Access project languages"},{"level":3,"text":"2. Remove unwanted languages and pick a fallback language","anchor":"2-remove-unwanted-languages-and-pick-a-fallback-language","htmlText":"2. Remove unwanted languages and pick a fallback language"},{"level":3,"text":"3. Add new languages","anchor":"3-add-new-languages","htmlText":"3. Add new languages"},{"level":3,"text":"4. Set the default language","anchor":"4-set-the-default-language","htmlText":"4. Set the default language"},{"level":3,"text":"5. Set the fallbacks","anchor":"5-set-the-fallbacks","htmlText":"5. Set the fallbacks"},{"level":2,"text":"3. Environment testing","anchor":"3-environment-testing","htmlText":"3. Environment testing"},{"level":3,"text":"Local environment","anchor":"local-environment","htmlText":"Local environment"},{"level":3,"text":"Gatsby Cloud (optional)","anchor":"gatsby-cloud-optional","htmlText":"Gatsby Cloud (optional)"},{"level":2,"text":"4. Understand content models structure","anchor":"4-understand-content-models-structure","htmlText":"4. Understand content models structure"},{"level":3,"text":"1. Gatsby Node","anchor":"1-gatsby-node","htmlText":"1. Gatsby Node"},{"level":3,"text":"2. Data-only","anchor":"2-data-only","htmlText":"2. Data-only"},{"level":2,"text":"5. Finalizing starter configuration","anchor":"5-finalizing-starter-configuration","htmlText":"5. Finalizing starter configuration"},{"level":3,"text":"1. Get rid of blog dummy content","anchor":"1-get-rid-of-blog-dummy-content","htmlText":"1. Get rid of blog dummy content"},{"level":3,"text":"2. Translate the starter base content","anchor":"2-translate-the-starter-base-content","htmlText":"2. Translate the starter base content"},{"level":3,"text":"3. Get rid of the starter fallback language","anchor":"3-get-rid-of-the-starter-fallback-language","htmlText":"3. Get rid of the starter fallback language"},{"level":3,"text":"4. Set proper fallbacks (optional)","anchor":"4-set-proper-fallbacks-optional","htmlText":"4. Set proper fallbacks (optional)"},{"level":1,"text":"Managing content","anchor":"managing-content","htmlText":"Managing content"},{"level":2,"text":"Choose which content to generate (and translate)","anchor":"choose-which-content-to-generate-and-translate","htmlText":"Choose which content to generate (and translate)"},{"level":2,"text":"Editing the menu","anchor":"editing-the-menu","htmlText":"Editing the menu"},{"level":3,"text":"Displaying featured posts in the homepage","anchor":"displaying-featured-posts-in-the-homepage","htmlText":"Displaying featured posts in the homepage"},{"level":3,"text":"Displaying the categories dropdown","anchor":"displaying-the-categories-dropdown","htmlText":"Displaying the categories dropdown"},{"level":2,"text":"Editing the categories menu","anchor":"editing-the-categories-menu","htmlText":"Editing the categories menu"},{"level":2,"text":"Linking categories and authors to blog posts","anchor":"linking-categories-and-authors-to-blog-posts","htmlText":"Linking categories and authors to blog posts"},{"level":2,"text":"Related posts","anchor":"related-posts","htmlText":"Related posts"},{"level":1,"text":"Styling","anchor":"styling","htmlText":"Styling"},{"level":2,"text":"Colors","anchor":"colors","htmlText":"Colors"},{"level":2,"text":"useTheme hook","anchor":"usetheme-hook","htmlText":"useTheme hook"},{"level":2,"text":"Logo","anchor":"logo","htmlText":"Logo"},{"level":2,"text":"Custom fonts","anchor":"custom-fonts","htmlText":"Custom fonts"},{"level":2,"text":"Blog synthax highlighting","anchor":"blog-synthax-highlighting","htmlText":"Blog synthax highlighting"},{"level":1,"text":"SEO","anchor":"seo","htmlText":"SEO"},{"level":1,"text":"PWA","anchor":"pwa","htmlText":"PWA"},{"level":1,"text":"Redirect","anchor":"redirect","htmlText":"Redirect"},{"level":1,"text":"404 page","anchor":"404-page","htmlText":"404 page"},{"level":1,"text":"RTL text direction support","anchor":"rtl-text-direction-support","htmlText":"RTL text direction support"},{"level":2,"text":"useTextDirection hook","anchor":"usetextdirection-hook","htmlText":"useTextDirection hook"},{"level":1,"text":"Extending the starter","anchor":"extending-the-starter","htmlText":"Extending the starter"},{"level":2,"text":"Removing fields","anchor":"removing-fields","htmlText":"Removing fields"},{"level":2,"text":"Removing pages and templates","anchor":"removing-pages-and-templates","htmlText":"Removing pages and templates"},{"level":2,"text":"Generating pages","anchor":"generating-pages","htmlText":"Generating pages"},{"level":2,"text":"Creating new templates","anchor":"creating-new-templates","htmlText":"Creating new templates"},{"level":2,"text":"Internal link navigation","anchor":"internal-link-navigation","htmlText":"Internal link navigation"},{"level":3,"text":"Navigator component","anchor":"navigator-component","htmlText":"Navigator component"},{"level":3,"text":"Single link","anchor":"single-link","htmlText":"Single link"},{"level":3,"text":"Dynamic link with StructuredText","anchor":"dynamic-link-with-structuredtext","htmlText":"Dynamic link with StructuredText"},{"level":2,"text":"Template design strategy","anchor":"template-design-strategy","htmlText":"Template design strategy"},{"level":3,"text":"Typical approach","anchor":"typical-approach","htmlText":"Typical approach"},{"level":3,"text":"Structured text approach","anchor":"structured-text-approach","htmlText":"Structured text approach"},{"level":2,"text":"Accessing languages","anchor":"accessing-languages","htmlText":"Accessing languages"},{"level":2,"text":"Formatting date and time","anchor":"formatting-date-and-time","htmlText":"Formatting date and time"},{"level":3,"text":"useFormattedDate hook","anchor":"useformatteddate-hook","htmlText":"useFormattedDate hook"},{"level":2,"text":"Increase categories number displayed by the dropdown","anchor":"increase-categories-number-displayed-by-the-dropdown","htmlText":"Increase categories number displayed by the dropdown"},{"level":2,"text":"SEO","anchor":"seo-1","htmlText":"SEO"},{"level":1,"text":"Troubleshooting","anchor":"troubleshooting","htmlText":"Troubleshooting"},{"level":2,"text":"Navigator","anchor":"navigator","htmlText":"Navigator"},{"level":3,"text":"General","anchor":"general","htmlText":"General"},{"level":3,"text":"Structured Text","anchor":"structured-text","htmlText":"Structured Text"},{"level":2,"text":"GraphQL","anchor":"graphql","htmlText":"GraphQL"},{"level":1,"text":"Issues","anchor":"issues","htmlText":"Issues"}],"siteNavLoginPath":"/login?return_to=https%3A%2F%2Fgithub.com%2Fgocode1702%2Fheadless-gatsby-multilang"}},{"displayName":"LICENSE","repoName":"headless-gatsby-multilang","refName":"main","path":"LICENSE","preferredFileType":"license","tabName":"0BSD","richText":null,"loaded":false,"timedOut":false,"errorMessage":null,"headerInfo":{"toc":null,"siteNavLoginPath":"/login?return_to=https%3A%2F%2Fgithub.com%2Fgocode1702%2Fheadless-gatsby-multilang"}}],"overviewFilesProcessingTime":0}},"appPayload":{"helpUrl":"https://docs.github.com","findFileWorkerPath":"/assets-cdn/worker/find-file-worker-1583894afd38.js","findInFileWorkerPath":"/assets-cdn/worker/find-in-file-worker-67668e8c2caa.js","githubDevUrl":null,"enabled_features":{"code_nav_ui_events":false,"overview_shared_code_dropdown_button":false,"react_blob_overlay":false,"copilot_conversational_ux_embedding_update":false,"copilot_smell_icebreaker_ux":true,"copilot_workspace":false,"blob_edit_unsaved_changes_storage":true,"accessible_code_button":true}}}}</script> <div data-target="react-partial.reactRoot"><style data-styled="true" data-styled-version="5.3.11">.iVEunk{margin-top:16px;margin-bottom:16px;}/*!sc*/ .jzuOtQ{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;}/*!sc*/ .bGojzy{margin-bottom:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;row-gap:16px;}/*!sc*/ .iNSVHo{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;padding-bottom:16px;padding-top:8px;}/*!sc*/ .bVgnfw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;gap:8px;}/*!sc*/ @media screen and (max-width:320px){.bVgnfw{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}}/*!sc*/ .CEgMp{position:relative;}/*!sc*/ @media screen and (max-width:380px){.CEgMp .ref-selector-button-text-container{max-width:80px;}}/*!sc*/ @media screen and (max-width:320px){.CEgMp{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}.CEgMp .overview-ref-selector{width:100%;}.CEgMp .overview-ref-selector > span{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;}.CEgMp .overview-ref-selector > span > span[data-component="text"]{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}}/*!sc*/ .gUkoLg{-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;}/*!sc*/ .bZBlpz{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;width:100%;}/*!sc*/ .lhTYNA{margin-right:4px;color:var(--fgColor-muted,var(--color-fg-muted,#656d76));}/*!sc*/ .ffLUq{font-size:14px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}/*!sc*/ .hzSPyu{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;pointer-events:none;}/*!sc*/ .fLXEGX{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}/*!sc*/ @media screen and (max-width:1079px){.fLXEGX{display:none;}}/*!sc*/ .dqfxud{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}/*!sc*/ @media screen and (min-width:1080px){.dqfxud{display:none;}}/*!sc*/ @media screen and (max-width:543px){.dqfxud{display:none;}}/*!sc*/ .jxTzTd{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;padding-left:8px;gap:8px;}/*!sc*/ .gqqBXN{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;gap:8px;}/*!sc*/ @media screen and (max-width:543px){.gqqBXN{display:none;}}/*!sc*/ .dzXgxt{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}/*!sc*/ @media screen and (max-width:1011px){.dzXgxt{display:none;}}/*!sc*/ .iWFGlI{margin-left:8px;margin-right:8px;margin:0;}/*!sc*/ .YUPas{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}/*!sc*/ @media screen and (min-width:1012px){.YUPas{display:none;}}/*!sc*/ .izFOf{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}/*!sc*/ @media screen and (min-width:544px){.izFOf{display:none;}}/*!sc*/ .vIPPs{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;gap:16px;}/*!sc*/ .fdROMU{width:100%;border-collapse:separate;border-spacing:0;border:1px solid;border-color:var(--borderColor-default,var(--color-border-default,#d0d7de));border-radius:6px;table-layout:fixed;overflow:unset;}/*!sc*/ .jGKpsv{height:0px;line-height:0px;}/*!sc*/ .jGKpsv tr{height:0px;font-size:0px;}/*!sc*/ .jdgHnn{padding:16px;color:var(--fgColor-muted,var(--color-fg-muted,#656d76));font-size:12px;text-align:left;height:40px;}/*!sc*/ .jdgHnn th{padding-left:16px;background-color:var(--bgColor-muted,var(--color-canvas-subtle,#f6f8fa));}/*!sc*/ .bQivRW{width:100%;border-top-left-radius:6px;}/*!sc*/ @media screen and (min-width:544px){.bQivRW{display:none;}}/*!sc*/ .ldkMIO{width:40%;border-top-left-radius:6px;}/*!sc*/ @media screen and (max-width:543px){.ldkMIO{display:none;}}/*!sc*/ .jMbWeI{text-align:right;padding-right:16px;width:136px;border-top-right-radius:6px;}/*!sc*/ .gpqjiB{color:var(--fgColor-muted,var(--color-fg-muted,#656d76));font-size:12px;height:40px;}/*!sc*/ .dzCJzi{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:8px;min-width:273px;padding:8px;}/*!sc*/ @media screen and (min-width:544px){.dzCJzi{-webkit-flex-wrap:nowrap;-ms-flex-wrap:nowrap;flex-wrap:nowrap;}}/*!sc*/ .eNCcrz{text-align:center;vertical-align:center;height:40px;border-top:1px solid;border-color:var(--borderColor-default,var(--color-border-default,#d0d7de));}/*!sc*/ .bHTcCe{border-top:1px solid var(--borderColor-default,var(--color-border-default));cursor:pointer;}/*!sc*/ .csrIcr{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;gap:16px;}/*!sc*/ .bUQNHB{border:1px solid;border-color:var(--borderColor-default,var(--color-border-default,#d0d7de));border-radius:6px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}/*!sc*/ @media screen and (max-width:543px){.bUQNHB{margin-left:-16px;margin-right:-16px;max-width:calc(100% + 32px);}}/*!sc*/ @media screen and (min-width:544px){.bUQNHB{max-width:100%;}}/*!sc*/ .jPdcfu{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;border-bottom:1px solid;border-bottom-color:var(--borderColor-default,var(--color-border-default,#d0d7de));-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding-right:8px;position:-webkit-sticky;position:sticky;top:0;background-color:var(--bgColor-default,var(--color-canvas-default,#ffffff));z-index:1;border-top-left-radius:6px;border-top-right-radius:6px;}/*!sc*/ .hUCRAk{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}/*!sc*/ .QkQOb{padding:32px;overflow:auto;}/*!sc*/ data-styled.g1[id="Box-sc-g0xbh4-0"]{content:"iVEunk,jzuOtQ,bGojzy,iNSVHo,bVgnfw,CEgMp,gUkoLg,bZBlpz,lhTYNA,ffLUq,hzSPyu,fLXEGX,dqfxud,jxTzTd,gqqBXN,dzXgxt,iWFGlI,YUPas,izFOf,vIPPs,fdROMU,jGKpsv,jdgHnn,bQivRW,ldkMIO,jMbWeI,gpqjiB,dzCJzi,eNCcrz,bHTcCe,csrIcr,bUQNHB,jPdcfu,hUCRAk,QkQOb,"}/*!sc*/ .eMMFM{min-width:0;}/*!sc*/ .eMMFM:where([data-size='small']){font-size:var(--text-body-size-small,0.75rem);line-height:var(--text-body-lineHeight-small,1.6666);}/*!sc*/ .eMMFM:where([data-size='medium']){font-size:var(--text-body-size-medium,0.875rem);line-height:var(--text-body-lineHeight-medium,1.4285);}/*!sc*/ .eMMFM:where([data-size='large']){font-size:var(--text-body-size-large,1rem);line-height:var(--text-body-lineHeight-large,1.5);}/*!sc*/ .eMMFM:where([data-weight='light']){font-weight:var(--base-text-weight-light,300);}/*!sc*/ .eMMFM:where([data-weight='normal']){font-weight:var(--base-text-weight-normal,400);}/*!sc*/ .eMMFM:where([data-weight='medium']){font-weight:var(--base-text-weight-medium,500);}/*!sc*/ .eMMFM:where([data-weight='semibold']){font-weight:var(--base-text-weight-semibold,600);}/*!sc*/ data-styled.g3[id="Text__StyledText-sc-17v1xeu-0"]{content:"eMMFM,"}/*!sc*/ .brGdpi{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;-webkit-clip:rect(0,0,0,0);clip:rect(0,0,0,0);white-space:nowrap;border-width:0;}/*!sc*/ data-styled.g4[id="_VisuallyHidden__VisuallyHidden-sc-11jhm7a-0"]{content:"brGdpi,"}/*!sc*/ .gwqFqs{font-size:14px;line-height:20px;color:var(--fgColor-default,var(--color-fg-default,#1F2328));vertical-align:middle;background-color:var(--bgColor-default,var(--color-canvas-default,#ffffff));border:1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));border-radius:6px;outline:none;box-shadow:var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:stretch;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;min-height:32px;overflow:hidden;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;min-width:160px;}/*!sc*/ .gwqFqs input,.gwqFqs textarea{cursor:text;}/*!sc*/ .gwqFqs select{cursor:pointer;}/*!sc*/ .gwqFqs input::-webkit-input-placeholder,.gwqFqs textarea::-webkit-input-placeholder,.gwqFqs select::-webkit-input-placeholder{color:var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));}/*!sc*/ .gwqFqs input::-moz-placeholder,.gwqFqs textarea::-moz-placeholder,.gwqFqs select::-moz-placeholder{color:var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));}/*!sc*/ .gwqFqs input:-ms-input-placeholder,.gwqFqs textarea:-ms-input-placeholder,.gwqFqs select:-ms-input-placeholder{color:var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));}/*!sc*/ .gwqFqs input::placeholder,.gwqFqs textarea::placeholder,.gwqFqs select::placeholder{color:var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));}/*!sc*/ .gwqFqs:focus-within{border-color:var(--fgColor-accent,var(--color-accent-fg,#0969da));outline:2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));outline-offset:-1px;}/*!sc*/ .gwqFqs > textarea{padding:12px;}/*!sc*/ @media (min-width:768px){.gwqFqs{font-size:14px;}}/*!sc*/ data-styled.g9[id="TextInputWrapper__TextInputBaseWrapper-sc-1mqhpbi-0"]{content:"gwqFqs,"}/*!sc*/ .decvaq{background-repeat:no-repeat;background-position:right 8px center;padding-left:12px;padding-right:12px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;min-width:160px;}/*!sc*/ .decvaq > :not(:last-child){margin-right:8px;}/*!sc*/ .decvaq .TextInput-icon,.decvaq .TextInput-action{-webkit-align-self:center;-ms-flex-item-align:center;align-self:center;color:var(--fgColor-muted,var(--color-fg-muted,#656d76));-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}/*!sc*/ .decvaq > input,.decvaq > select{padding-left:0;padding-right:0;}/*!sc*/ data-styled.g10[id="TextInputWrapper-sc-1mqhpbi-1"]{content:"decvaq,"}/*!sc*/ .gVXRRg{border-radius:6px;border:1px solid;border-color:var(--button-default-borderColor-rest,var(--button-default-borderColor-rest,var(--color-btn-border,rgba(31,35,40,0.15))));font-family:inherit;font-weight:500;font-size:14px;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-text-decoration:none;text-decoration:none;text-align:center;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;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;height:32px;padding:0 12px;gap:8px;min-width:-webkit-max-content;min-width:-moz-max-content;min-width:max-content;-webkit-transition:80ms cubic-bezier(0.65,0,0.35,1);transition:80ms cubic-bezier(0.65,0,0.35,1);-webkit-transition-property:color,fill,background-color,border-color;transition-property:color,fill,background-color,border-color;color:var(--button-default-fgColor-rest,var(--color-btn-text,#24292f));background-color:var(--button-default-bgColor-rest,var(--color-btn-bg,#f6f8fa));box-shadow:var(--button-default-shadow-resting,var(--color-btn-shadow,0 1px 0 rgba(31,35,40,0.04))),var(--button-default-shadow-inset,var(--color-btn-inset-shadow,inset 0 1px 0 rgba(255,255,255,0.25)));}/*!sc*/ .gVXRRg:focus:not(:disabled){box-shadow:none;outline:2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));outline-offset:-2px;}/*!sc*/ .gVXRRg:focus:not(:disabled):not(:focus-visible){outline:solid 1px transparent;}/*!sc*/ .gVXRRg:focus-visible:not(:disabled){box-shadow:none;outline:2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));outline-offset:-2px;}/*!sc*/ .gVXRRg[href]{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}/*!sc*/ .gVXRRg[href]:hover{-webkit-text-decoration:none;text-decoration:none;}/*!sc*/ .gVXRRg:hover{-webkit-transition-duration:80ms;transition-duration:80ms;}/*!sc*/ .gVXRRg:active{-webkit-transition:none;transition:none;}/*!sc*/ .gVXRRg[data-inactive]{cursor:auto;}/*!sc*/ .gVXRRg:disabled{cursor:not-allowed;box-shadow:none;color:var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));border-color:var(--button-default-borderColor-disabled,var(--button-default-borderColor-rest,var(--color-btn-border,rgba(31,35,40,0.15))));background-color:var(--button-default-bgColor-disabled,var(--control-bgColor-disabled,var(--color-input-disabled-bg,rgba(175,184,193,0.2))));}/*!sc*/ .gVXRRg:disabled [data-component=ButtonCounter]{color:inherit;}/*!sc*/ @media (forced-colors:active){.gVXRRg:focus{outline:solid 1px transparent;}}/*!sc*/ .gVXRRg [data-component=ButtonCounter]{font-size:12px;background-color:var(--buttonCounter-default-bgColor-rest,var(--color-btn-counter-bg,rgba(31,35,40,0.08)));}/*!sc*/ .gVXRRg[data-component=IconButton]{display:inline-grid;padding:unset;place-content:center;width:32px;min-width:unset;}/*!sc*/ .gVXRRg[data-size="small"]{padding:0 8px;height:28px;gap:4px;font-size:12px;}/*!sc*/ .gVXRRg[data-size="small"] [data-component="text"]{line-height:1.6666667;}/*!sc*/ .gVXRRg[data-size="small"] [data-component=ButtonCounter]{font-size:12px;}/*!sc*/ .gVXRRg[data-size="small"] [data-component="buttonContent"] > :not(:last-child){margin-right:4px;}/*!sc*/ .gVXRRg[data-size="small"][data-component=IconButton]{width:28px;padding:unset;}/*!sc*/ .gVXRRg[data-size="large"]{padding:0 16px;height:40px;gap:8px;}/*!sc*/ .gVXRRg[data-size="large"] [data-component="buttonContent"] > :not(:last-child){margin-right:8px;}/*!sc*/ .gVXRRg[data-size="large"][data-component=IconButton]{width:40px;padding:unset;}/*!sc*/ .gVXRRg[data-block="block"]{width:100%;}/*!sc*/ .gVXRRg[data-label-wrap="true"]{min-width:-webkit-fit-content;min-width:-moz-fit-content;min-width:fit-content;height:unset;min-height:var(--control-medium-size,2rem);}/*!sc*/ .gVXRRg[data-label-wrap="true"] [data-component="buttonContent"]{-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;-webkit-align-self:stretch;-ms-flex-item-align:stretch;align-self:stretch;padding-block:calc(var(--control-medium-paddingBlock,0.375rem) - 2px);}/*!sc*/ .gVXRRg[data-label-wrap="true"] [data-component="text"]{white-space:unset;word-break:break-word;}/*!sc*/ .gVXRRg[data-label-wrap="true"][data-size="small"]{height:unset;min-height:var(--control-small-size,1.75rem);}/*!sc*/ .gVXRRg[data-label-wrap="true"][data-size="small"] [data-component="buttonContent"]{padding-block:calc(var(--control-small-paddingBlock,0.25rem) - 2px);}/*!sc*/ .gVXRRg[data-label-wrap="true"][data-size="large"]{height:unset;min-height:var(--control-large-size,2.5rem);padding-inline:var(--control-large-paddingInline-spacious,1rem);}/*!sc*/ .gVXRRg[data-label-wrap="true"][data-size="large"] [data-component="buttonContent"]{padding-block:calc(var(--control-large-paddingBlock,0.625rem) - 2px);}/*!sc*/ .gVXRRg[data-inactive]:not([disabled]){background-color:var(--button-inactive-bgColor,var(--button-inactive-bgColor-rest,var(--color-btn-inactive-bg,#eaeef2)));border-color:var(--button-inactive-bgColor,var(--button-inactive-bgColor-rest,var(--color-btn-inactive-bg,#eaeef2)));color:var(--button-inactive-fgColor,var(--button-inactive-fgColor-rest,var(--color-btn-inactive-text,#57606a)));}/*!sc*/ .gVXRRg[data-inactive]:not([disabled]):focus-visible{box-shadow:none;}/*!sc*/ .gVXRRg [data-component="leadingVisual"]{grid-area:leadingVisual;}/*!sc*/ .gVXRRg [data-component="text"]{grid-area:text;line-height:1.4285714;white-space:nowrap;}/*!sc*/ .gVXRRg [data-component="trailingVisual"]{grid-area:trailingVisual;}/*!sc*/ .gVXRRg [data-component="trailingAction"]{margin-right:-4px;}/*!sc*/ .gVXRRg [data-component="buttonContent"]{-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;display:grid;grid-template-areas:"leadingVisual text trailingVisual";grid-template-columns:min-content minmax(0,auto) min-content;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-align-content:center;-ms-flex-line-pack:center;align-content:center;}/*!sc*/ .gVXRRg [data-component="buttonContent"] > :not(:last-child){margin-right:8px;}/*!sc*/ .gVXRRg [data-component="loadingSpinner"]{grid-area:text;margin-right:0px !important;place-self:center;color:var(--fgColor-muted,var(--color-fg-muted,#656d76));}/*!sc*/ .gVXRRg [data-component="loadingSpinner"] + [data-component="text"]{visibility:hidden;}/*!sc*/ .gVXRRg:hover:not([disabled]):not([data-inactive]){background-color:var(--button-default-bgColor-hover,var(--color-btn-hover-bg,#f3f4f6));border-color:var(--button-default-borderColor-hover,var(--button-default-borderColor-hover,var(--color-btn-hover-border,rgba(31,35,40,0.15))));}/*!sc*/ .gVXRRg:active:not([disabled]):not([data-inactive]){background-color:var(--button-default-bgColor-active,var(--color-btn-active-bg,hsla(220,14%,93%,1)));border-color:var(--button-default-borderColor-active,var(--button-default-borderColor-active,var(--color-btn-active-border,rgba(31,35,40,0.15))));}/*!sc*/ .gVXRRg[aria-expanded=true]{background-color:var(--button-default-bgColor-active,var(--color-btn-active-bg,hsla(220,14%,93%,1)));border-color:var(--button-default-borderColor-active,var(--button-default-borderColor-active,var(--color-btn-active-border,rgba(31,35,40,0.15))));}/*!sc*/ .gVXRRg [data-component="leadingVisual"],.gVXRRg [data-component="trailingVisual"],.gVXRRg [data-component="trailingAction"]{color:var(--button-color,var(--fgColor-muted,var(--color-fg-muted,#656d76)));}/*!sc*/ .gVXRRg[data-component="IconButton"][data-no-visuals]:not(:disabled){color:var(--fgColor-muted,var(--color-fg-muted,#656d76));}/*!sc*/ .gVXRRg[data-size="medium"]{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;min-width:0;}/*!sc*/ .gVXRRg[data-size="medium"] svg{color:var(--fgColor-muted,var(--color-fg-muted,#656d76));}/*!sc*/ .gVXRRg[data-size="medium"] > span{width:inherit;}/*!sc*/ .loAzyw{border-radius:6px;border:1px solid;border-color:transparent;font-family:inherit;font-weight:500;font-size:14px;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-text-decoration:none;text-decoration:none;text-align:center;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;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;height:32px;padding:0 12px;gap:8px;min-width:-webkit-max-content;min-width:-moz-max-content;min-width:max-content;-webkit-transition:80ms cubic-bezier(0.65,0,0.35,1);transition:80ms cubic-bezier(0.65,0,0.35,1);-webkit-transition-property:color,fill,background-color,border-color;transition-property:color,fill,background-color,border-color;color:var(--button-invisible-fgColor-rest,var(--button-default-fgColor-rest,var(--color-btn-text,#24292f)));background-color:transparent;box-shadow:none;}/*!sc*/ .loAzyw:focus:not(:disabled){box-shadow:none;outline:2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));outline-offset:-2px;}/*!sc*/ .loAzyw:focus:not(:disabled):not(:focus-visible){outline:solid 1px transparent;}/*!sc*/ .loAzyw:focus-visible:not(:disabled){box-shadow:none;outline:2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));outline-offset:-2px;}/*!sc*/ .loAzyw[href]{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}/*!sc*/ .loAzyw[href]:hover{-webkit-text-decoration:none;text-decoration:none;}/*!sc*/ .loAzyw:hover{-webkit-transition-duration:80ms;transition-duration:80ms;}/*!sc*/ .loAzyw:active{-webkit-transition:none;transition:none;}/*!sc*/ .loAzyw[data-inactive]{cursor:auto;}/*!sc*/ .loAzyw:disabled{cursor:not-allowed;box-shadow:none;color:var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));background-color:var(--button-invisible-bgColor-disabled,transparent);}/*!sc*/ .loAzyw:disabled [data-component=ButtonCounter],.loAzyw:disabled [data-component="leadingVisual"],.loAzyw:disabled [data-component="trailingAction"]{color:inherit;}/*!sc*/ @media (forced-colors:active){.loAzyw:focus{outline:solid 1px transparent;}}/*!sc*/ .loAzyw [data-component=ButtonCounter]{font-size:12px;}/*!sc*/ .loAzyw[data-component=IconButton]{display:inline-grid;padding:unset;place-content:center;width:32px;min-width:unset;}/*!sc*/ .loAzyw[data-size="small"]{padding:0 8px;height:28px;gap:4px;font-size:12px;}/*!sc*/ .loAzyw[data-size="small"] [data-component="text"]{line-height:1.6666667;}/*!sc*/ .loAzyw[data-size="small"] [data-component=ButtonCounter]{font-size:12px;}/*!sc*/ .loAzyw[data-size="small"] [data-component="buttonContent"] > :not(:last-child){margin-right:4px;}/*!sc*/ .loAzyw[data-size="small"][data-component=IconButton]{width:28px;padding:unset;}/*!sc*/ .loAzyw[data-size="large"]{padding:0 16px;height:40px;gap:8px;}/*!sc*/ .loAzyw[data-size="large"] [data-component="buttonContent"] > :not(:last-child){margin-right:8px;}/*!sc*/ .loAzyw[data-size="large"][data-component=IconButton]{width:40px;padding:unset;}/*!sc*/ .loAzyw[data-block="block"]{width:100%;}/*!sc*/ .loAzyw[data-label-wrap="true"]{min-width:-webkit-fit-content;min-width:-moz-fit-content;min-width:fit-content;height:unset;min-height:var(--control-medium-size,2rem);}/*!sc*/ .loAzyw[data-label-wrap="true"] [data-component="buttonContent"]{-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;-webkit-align-self:stretch;-ms-flex-item-align:stretch;align-self:stretch;padding-block:calc(var(--control-medium-paddingBlock,0.375rem) - 2px);}/*!sc*/ .loAzyw[data-label-wrap="true"] [data-component="text"]{white-space:unset;word-break:break-word;}/*!sc*/ .loAzyw[data-label-wrap="true"][data-size="small"]{height:unset;min-height:var(--control-small-size,1.75rem);}/*!sc*/ .loAzyw[data-label-wrap="true"][data-size="small"] [data-component="buttonContent"]{padding-block:calc(var(--control-small-paddingBlock,0.25rem) - 2px);}/*!sc*/ .loAzyw[data-label-wrap="true"][data-size="large"]{height:unset;min-height:var(--control-large-size,2.5rem);padding-inline:var(--control-large-paddingInline-spacious,1rem);}/*!sc*/ .loAzyw[data-label-wrap="true"][data-size="large"] [data-component="buttonContent"]{padding-block:calc(var(--control-large-paddingBlock,0.625rem) - 2px);}/*!sc*/ .loAzyw[data-inactive]:not([disabled]){background-color:var(--button-inactive-bgColor,var(--button-inactive-bgColor-rest,var(--color-btn-inactive-bg,#eaeef2)));border-color:var(--button-inactive-bgColor,var(--button-inactive-bgColor-rest,var(--color-btn-inactive-bg,#eaeef2)));color:var(--button-inactive-fgColor,var(--button-inactive-fgColor-rest,var(--color-btn-inactive-text,#57606a)));}/*!sc*/ .loAzyw[data-inactive]:not([disabled]):focus-visible{box-shadow:none;}/*!sc*/ .loAzyw [data-component="leadingVisual"]{grid-area:leadingVisual;color:var(--button-invisible-iconColor-rest,var(--fgColor-muted,var(--color-fg-muted,#656d76)));}/*!sc*/ .loAzyw [data-component="text"]{grid-area:text;line-height:1.4285714;white-space:nowrap;}/*!sc*/ .loAzyw [data-component="trailingVisual"]{grid-area:trailingVisual;color:var(--button-invisible-iconColor-rest,var(--fgColor-muted,var(--color-fg-muted,#656d76)));}/*!sc*/ .loAzyw [data-component="trailingAction"]{margin-right:-4px;color:var(--button-invisible-iconColor-rest,var(--fgColor-muted,var(--color-fg-muted,#656d76)));}/*!sc*/ .loAzyw [data-component="buttonContent"]{-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;display:grid;grid-template-areas:"leadingVisual text trailingVisual";grid-template-columns:min-content minmax(0,auto) min-content;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-align-content:center;-ms-flex-line-pack:center;align-content:center;}/*!sc*/ .loAzyw [data-component="buttonContent"] > :not(:last-child){margin-right:8px;}/*!sc*/ .loAzyw [data-component="loadingSpinner"]{grid-area:text;margin-right:0px !important;place-self:center;color:var(--fgColor-muted,var(--color-fg-muted,#656d76));}/*!sc*/ .loAzyw [data-component="loadingSpinner"] + [data-component="text"]{visibility:hidden;}/*!sc*/ .loAzyw:hover:not([disabled]){background-color:var(--control-transparent-bgColor-hover,var(--color-action-list-item-default-hover-bg,rgba(208,215,222,0.32)));}/*!sc*/ .loAzyw:active:not([disabled]){background-color:var(--control-transparent-bgColor-active,var(--color-action-list-item-default-active-bg,rgba(208,215,222,0.48)));}/*!sc*/ .loAzyw[aria-expanded=true]{background-color:var(--control-transparent-bgColor-selected,var(--color-action-list-item-default-selected-bg,rgba(208,215,222,0.24)));}/*!sc*/ .loAzyw[data-component="IconButton"][data-no-visuals]{color:var(--button-invisible-iconColor-rest,var(--fgColor-muted,var(--color-fg-muted,#656d76)));}/*!sc*/ .loAzyw[data-no-visuals]{color:var(--button-invisible-fgColor-rest,var(--button-default-fgColor-rest,var(--color-btn-text,#24292f)));}/*!sc*/ .loAzyw:has([data-component="ButtonCounter"]){color:var(--button-invisible-fgColor-rest,var(--button-default-fgColor-rest,var(--color-btn-text,#24292f)));}/*!sc*/ .loAzyw:disabled[data-no-visuals]{color:var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));}/*!sc*/ .loAzyw:disabled[data-no-visuals] [data-component=ButtonCounter]{color:inherit;}/*!sc*/ .loAzyw[data-size="medium"]{color:var(--fgColor-muted,var(--color-fg-muted,#656d76));padding-left:4px;padding-right:4px;}/*!sc*/ .loAzyw[data-size="medium"] span[data-component="leadingVisual"]{margin-right:4px !important;}/*!sc*/ .cXsOlJ{border-radius:6px;border:1px solid;border-color:transparent;font-family:inherit;font-weight:500;font-size:14px;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-text-decoration:none;text-decoration:none;text-align:center;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;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;height:32px;padding:0 12px;gap:8px;min-width:-webkit-max-content;min-width:-moz-max-content;min-width:max-content;-webkit-transition:80ms cubic-bezier(0.65,0,0.35,1);transition:80ms cubic-bezier(0.65,0,0.35,1);-webkit-transition-property:color,fill,background-color,border-color;transition-property:color,fill,background-color,border-color;color:var(--button-invisible-fgColor-rest,var(--button-default-fgColor-rest,var(--color-btn-text,#24292f)));background-color:transparent;box-shadow:none;}/*!sc*/ .cXsOlJ:focus:not(:disabled){box-shadow:none;outline:2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));outline-offset:-2px;}/*!sc*/ .cXsOlJ:focus:not(:disabled):not(:focus-visible){outline:solid 1px transparent;}/*!sc*/ .cXsOlJ:focus-visible:not(:disabled){box-shadow:none;outline:2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));outline-offset:-2px;}/*!sc*/ .cXsOlJ[href]{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}/*!sc*/ .cXsOlJ[href]:hover{-webkit-text-decoration:none;text-decoration:none;}/*!sc*/ .cXsOlJ:hover{-webkit-transition-duration:80ms;transition-duration:80ms;}/*!sc*/ .cXsOlJ:active{-webkit-transition:none;transition:none;}/*!sc*/ .cXsOlJ[data-inactive]{cursor:auto;}/*!sc*/ .cXsOlJ:disabled{cursor:not-allowed;box-shadow:none;color:var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));background-color:var(--button-invisible-bgColor-disabled,transparent);}/*!sc*/ .cXsOlJ:disabled [data-component=ButtonCounter],.cXsOlJ:disabled [data-component="leadingVisual"],.cXsOlJ:disabled [data-component="trailingAction"]{color:inherit;}/*!sc*/ @media (forced-colors:active){.cXsOlJ:focus{outline:solid 1px transparent;}}/*!sc*/ .cXsOlJ [data-component=ButtonCounter]{font-size:12px;}/*!sc*/ .cXsOlJ[data-component=IconButton]{display:inline-grid;padding:unset;place-content:center;width:32px;min-width:unset;}/*!sc*/ .cXsOlJ[data-size="small"]{padding:0 8px;height:28px;gap:4px;font-size:12px;}/*!sc*/ .cXsOlJ[data-size="small"] [data-component="text"]{line-height:1.6666667;}/*!sc*/ .cXsOlJ[data-size="small"] [data-component=ButtonCounter]{font-size:12px;}/*!sc*/ .cXsOlJ[data-size="small"] [data-component="buttonContent"] > :not(:last-child){margin-right:4px;}/*!sc*/ .cXsOlJ[data-size="small"][data-component=IconButton]{width:28px;padding:unset;}/*!sc*/ .cXsOlJ[data-size="large"]{padding:0 16px;height:40px;gap:8px;}/*!sc*/ .cXsOlJ[data-size="large"] [data-component="buttonContent"] > :not(:last-child){margin-right:8px;}/*!sc*/ .cXsOlJ[data-size="large"][data-component=IconButton]{width:40px;padding:unset;}/*!sc*/ .cXsOlJ[data-block="block"]{width:100%;}/*!sc*/ .cXsOlJ[data-label-wrap="true"]{min-width:-webkit-fit-content;min-width:-moz-fit-content;min-width:fit-content;height:unset;min-height:var(--control-medium-size,2rem);}/*!sc*/ .cXsOlJ[data-label-wrap="true"] [data-component="buttonContent"]{-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;-webkit-align-self:stretch;-ms-flex-item-align:stretch;align-self:stretch;padding-block:calc(var(--control-medium-paddingBlock,0.375rem) - 2px);}/*!sc*/ .cXsOlJ[data-label-wrap="true"] [data-component="text"]{white-space:unset;word-break:break-word;}/*!sc*/ .cXsOlJ[data-label-wrap="true"][data-size="small"]{height:unset;min-height:var(--control-small-size,1.75rem);}/*!sc*/ .cXsOlJ[data-label-wrap="true"][data-size="small"] [data-component="buttonContent"]{padding-block:calc(var(--control-small-paddingBlock,0.25rem) - 2px);}/*!sc*/ .cXsOlJ[data-label-wrap="true"][data-size="large"]{height:unset;min-height:var(--control-large-size,2.5rem);padding-inline:var(--control-large-paddingInline-spacious,1rem);}/*!sc*/ .cXsOlJ[data-label-wrap="true"][data-size="large"] [data-component="buttonContent"]{padding-block:calc(var(--control-large-paddingBlock,0.625rem) - 2px);}/*!sc*/ .cXsOlJ[data-inactive]:not([disabled]){background-color:var(--button-inactive-bgColor,var(--button-inactive-bgColor-rest,var(--color-btn-inactive-bg,#eaeef2)));border-color:var(--button-inactive-bgColor,var(--button-inactive-bgColor-rest,var(--color-btn-inactive-bg,#eaeef2)));color:var(--button-inactive-fgColor,var(--button-inactive-fgColor-rest,var(--color-btn-inactive-text,#57606a)));}/*!sc*/ .cXsOlJ[data-inactive]:not([disabled]):focus-visible{box-shadow:none;}/*!sc*/ .cXsOlJ [data-component="leadingVisual"]{grid-area:leadingVisual;color:var(--button-invisible-iconColor-rest,var(--fgColor-muted,var(--color-fg-muted,#656d76)));}/*!sc*/ .cXsOlJ [data-component="text"]{grid-area:text;line-height:1.4285714;white-space:nowrap;}/*!sc*/ .cXsOlJ [data-component="trailingVisual"]{grid-area:trailingVisual;color:var(--button-invisible-iconColor-rest,var(--fgColor-muted,var(--color-fg-muted,#656d76)));}/*!sc*/ .cXsOlJ [data-component="trailingAction"]{margin-right:-4px;color:var(--button-invisible-iconColor-rest,var(--fgColor-muted,var(--color-fg-muted,#656d76)));}/*!sc*/ .cXsOlJ [data-component="buttonContent"]{-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;display:grid;grid-template-areas:"leadingVisual text trailingVisual";grid-template-columns:min-content minmax(0,auto) min-content;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-align-content:center;-ms-flex-line-pack:center;align-content:center;}/*!sc*/ .cXsOlJ [data-component="buttonContent"] > :not(:last-child){margin-right:8px;}/*!sc*/ .cXsOlJ [data-component="loadingSpinner"]{grid-area:text;margin-right:0px !important;place-self:center;color:var(--fgColor-muted,var(--color-fg-muted,#656d76));}/*!sc*/ .cXsOlJ [data-component="loadingSpinner"] + [data-component="text"]{visibility:hidden;}/*!sc*/ .cXsOlJ:hover:not([disabled]){background-color:var(--control-transparent-bgColor-hover,var(--color-action-list-item-default-hover-bg,rgba(208,215,222,0.32)));}/*!sc*/ .cXsOlJ:active:not([disabled]){background-color:var(--control-transparent-bgColor-active,var(--color-action-list-item-default-active-bg,rgba(208,215,222,0.48)));}/*!sc*/ .cXsOlJ[aria-expanded=true]{background-color:var(--control-transparent-bgColor-selected,var(--color-action-list-item-default-selected-bg,rgba(208,215,222,0.24)));}/*!sc*/ .cXsOlJ[data-component="IconButton"][data-no-visuals]{color:var(--button-invisible-iconColor-rest,var(--fgColor-muted,var(--color-fg-muted,#656d76)));}/*!sc*/ .cXsOlJ[data-no-visuals]{color:var(--button-invisible-fgColor-rest,var(--button-default-fgColor-rest,var(--color-btn-text,#24292f)));}/*!sc*/ .cXsOlJ:has([data-component="ButtonCounter"]){color:var(--button-invisible-fgColor-rest,var(--button-default-fgColor-rest,var(--color-btn-text,#24292f)));}/*!sc*/ .cXsOlJ:disabled[data-no-visuals]{color:var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));}/*!sc*/ .cXsOlJ:disabled[data-no-visuals] [data-component=ButtonCounter]{color:inherit;}/*!sc*/ .cXsOlJ[data-size="medium"][data-no-visuals]{color:var(--fgColor-muted,var(--color-fg-muted,#656d76));}/*!sc*/ .gGdPyq{border-radius:6px;border:1px solid;border-color:var(--button-default-borderColor-rest,var(--button-default-borderColor-rest,var(--color-btn-border,rgba(31,35,40,0.15))));font-family:inherit;font-weight:500;font-size:14px;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-text-decoration:none;text-decoration:none;text-align:center;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;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;height:32px;padding:0 12px;gap:8px;min-width:-webkit-max-content;min-width:-moz-max-content;min-width:max-content;-webkit-transition:80ms cubic-bezier(0.65,0,0.35,1);transition:80ms cubic-bezier(0.65,0,0.35,1);-webkit-transition-property:color,fill,background-color,border-color;transition-property:color,fill,background-color,border-color;color:var(--button-default-fgColor-rest,var(--color-btn-text,#24292f));background-color:var(--button-default-bgColor-rest,var(--color-btn-bg,#f6f8fa));box-shadow:var(--button-default-shadow-resting,var(--color-btn-shadow,0 1px 0 rgba(31,35,40,0.04))),var(--button-default-shadow-inset,var(--color-btn-inset-shadow,inset 0 1px 0 rgba(255,255,255,0.25)));}/*!sc*/ .gGdPyq:focus:not(:disabled){box-shadow:none;outline:2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));outline-offset:-2px;}/*!sc*/ .gGdPyq:focus:not(:disabled):not(:focus-visible){outline:solid 1px transparent;}/*!sc*/ .gGdPyq:focus-visible:not(:disabled){box-shadow:none;outline:2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));outline-offset:-2px;}/*!sc*/ .gGdPyq[href]{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}/*!sc*/ .gGdPyq[href]:hover{-webkit-text-decoration:none;text-decoration:none;}/*!sc*/ .gGdPyq:hover{-webkit-transition-duration:80ms;transition-duration:80ms;}/*!sc*/ .gGdPyq:active{-webkit-transition:none;transition:none;}/*!sc*/ .gGdPyq[data-inactive]{cursor:auto;}/*!sc*/ .gGdPyq:disabled{cursor:not-allowed;box-shadow:none;color:var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));border-color:var(--button-default-borderColor-disabled,var(--button-default-borderColor-rest,var(--color-btn-border,rgba(31,35,40,0.15))));background-color:var(--button-default-bgColor-disabled,var(--control-bgColor-disabled,var(--color-input-disabled-bg,rgba(175,184,193,0.2))));}/*!sc*/ .gGdPyq:disabled [data-component=ButtonCounter]{color:inherit;}/*!sc*/ @media (forced-colors:active){.gGdPyq:focus{outline:solid 1px transparent;}}/*!sc*/ .gGdPyq [data-component=ButtonCounter]{font-size:12px;background-color:var(--buttonCounter-default-bgColor-rest,var(--color-btn-counter-bg,rgba(31,35,40,0.08)));}/*!sc*/ .gGdPyq[data-component=IconButton]{display:inline-grid;padding:unset;place-content:center;width:32px;min-width:unset;}/*!sc*/ .gGdPyq[data-size="small"]{padding:0 8px;height:28px;gap:4px;font-size:12px;}/*!sc*/ .gGdPyq[data-size="small"] [data-component="text"]{line-height:1.6666667;}/*!sc*/ .gGdPyq[data-size="small"] [data-component=ButtonCounter]{font-size:12px;}/*!sc*/ .gGdPyq[data-size="small"] [data-component="buttonContent"] > :not(:last-child){margin-right:4px;}/*!sc*/ .gGdPyq[data-size="small"][data-component=IconButton]{width:28px;padding:unset;}/*!sc*/ .gGdPyq[data-size="large"]{padding:0 16px;height:40px;gap:8px;}/*!sc*/ .gGdPyq[data-size="large"] [data-component="buttonContent"] > :not(:last-child){margin-right:8px;}/*!sc*/ .gGdPyq[data-size="large"][data-component=IconButton]{width:40px;padding:unset;}/*!sc*/ .gGdPyq[data-block="block"]{width:100%;}/*!sc*/ .gGdPyq[data-label-wrap="true"]{min-width:-webkit-fit-content;min-width:-moz-fit-content;min-width:fit-content;height:unset;min-height:var(--control-medium-size,2rem);}/*!sc*/ .gGdPyq[data-label-wrap="true"] [data-component="buttonContent"]{-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;-webkit-align-self:stretch;-ms-flex-item-align:stretch;align-self:stretch;padding-block:calc(var(--control-medium-paddingBlock,0.375rem) - 2px);}/*!sc*/ .gGdPyq[data-label-wrap="true"] [data-component="text"]{white-space:unset;word-break:break-word;}/*!sc*/ .gGdPyq[data-label-wrap="true"][data-size="small"]{height:unset;min-height:var(--control-small-size,1.75rem);}/*!sc*/ .gGdPyq[data-label-wrap="true"][data-size="small"] [data-component="buttonContent"]{padding-block:calc(var(--control-small-paddingBlock,0.25rem) - 2px);}/*!sc*/ .gGdPyq[data-label-wrap="true"][data-size="large"]{height:unset;min-height:var(--control-large-size,2.5rem);padding-inline:var(--control-large-paddingInline-spacious,1rem);}/*!sc*/ .gGdPyq[data-label-wrap="true"][data-size="large"] [data-component="buttonContent"]{padding-block:calc(var(--control-large-paddingBlock,0.625rem) - 2px);}/*!sc*/ .gGdPyq[data-inactive]:not([disabled]){background-color:var(--button-inactive-bgColor,var(--button-inactive-bgColor-rest,var(--color-btn-inactive-bg,#eaeef2)));border-color:var(--button-inactive-bgColor,var(--button-inactive-bgColor-rest,var(--color-btn-inactive-bg,#eaeef2)));color:var(--button-inactive-fgColor,var(--button-inactive-fgColor-rest,var(--color-btn-inactive-text,#57606a)));}/*!sc*/ .gGdPyq[data-inactive]:not([disabled]):focus-visible{box-shadow:none;}/*!sc*/ .gGdPyq [data-component="leadingVisual"]{grid-area:leadingVisual;}/*!sc*/ .gGdPyq [data-component="text"]{grid-area:text;line-height:1.4285714;white-space:nowrap;}/*!sc*/ .gGdPyq [data-component="trailingVisual"]{grid-area:trailingVisual;}/*!sc*/ .gGdPyq [data-component="trailingAction"]{margin-right:-4px;}/*!sc*/ .gGdPyq [data-component="buttonContent"]{-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;display:grid;grid-template-areas:"leadingVisual text trailingVisual";grid-template-columns:min-content minmax(0,auto) min-content;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-align-content:center;-ms-flex-line-pack:center;align-content:center;}/*!sc*/ .gGdPyq [data-component="buttonContent"] > :not(:last-child){margin-right:8px;}/*!sc*/ .gGdPyq [data-component="loadingSpinner"]{grid-area:text;margin-right:0px !important;place-self:center;color:var(--fgColor-muted,var(--color-fg-muted,#656d76));}/*!sc*/ .gGdPyq [data-component="loadingSpinner"] + [data-component="text"]{visibility:hidden;}/*!sc*/ .gGdPyq:hover:not([disabled]):not([data-inactive]){background-color:var(--button-default-bgColor-hover,var(--color-btn-hover-bg,#f3f4f6));border-color:var(--button-default-borderColor-hover,var(--button-default-borderColor-hover,var(--color-btn-hover-border,rgba(31,35,40,0.15))));}/*!sc*/ .gGdPyq:active:not([disabled]):not([data-inactive]){background-color:var(--button-default-bgColor-active,var(--color-btn-active-bg,hsla(220,14%,93%,1)));border-color:var(--button-default-borderColor-active,var(--button-default-borderColor-active,var(--color-btn-active-border,rgba(31,35,40,0.15))));}/*!sc*/ .gGdPyq[aria-expanded=true]{background-color:var(--button-default-bgColor-active,var(--color-btn-active-bg,hsla(220,14%,93%,1)));border-color:var(--button-default-borderColor-active,var(--button-default-borderColor-active,var(--color-btn-active-border,rgba(31,35,40,0.15))));}/*!sc*/ .gGdPyq [data-component="leadingVisual"],.gGdPyq [data-component="trailingVisual"],.gGdPyq [data-component="trailingAction"]{color:var(--button-color,var(--fgColor-muted,var(--color-fg-muted,#656d76)));}/*!sc*/ .gGdPyq[data-component="IconButton"][data-no-visuals]:not(:disabled){color:var(--fgColor-muted,var(--color-fg-muted,#656d76));}/*!sc*/ .bmlmSe{border-radius:6px;border:1px solid;border-color:var(--button-primary-borderColor-rest,var(--color-btn-primary-border,rgba(31,35,40,0.15)));font-family:inherit;font-weight:500;font-size:14px;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-text-decoration:none;text-decoration:none;text-align:center;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;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;height:32px;padding:0 12px;gap:8px;min-width:-webkit-max-content;min-width:-moz-max-content;min-width:max-content;-webkit-transition:80ms cubic-bezier(0.65,0,0.35,1);transition:80ms cubic-bezier(0.65,0,0.35,1);-webkit-transition-property:color,fill,background-color,border-color;transition-property:color,fill,background-color,border-color;color:var(--button-primary-fgColor-rest,var(--color-btn-primary-text,#ffffff));background-color:var(--button-primary-bgColor-rest,var(--color-btn-primary-bg,#1f883d));box-shadow:var(--shadow-resting-small,var(--color-btn-primary-shadow,0 1px 0 rgba(31,35,40,0.1)));}/*!sc*/ .bmlmSe:focus:not(:disabled){box-shadow:none;outline:2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));outline-offset:-2px;}/*!sc*/ .bmlmSe:focus:not(:disabled):not(:focus-visible){outline:solid 1px transparent;}/*!sc*/ .bmlmSe:focus-visible:not(:disabled){box-shadow:none;outline:2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));outline-offset:-2px;}/*!sc*/ .bmlmSe[href]{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}/*!sc*/ .bmlmSe[href]:hover{-webkit-text-decoration:none;text-decoration:none;}/*!sc*/ .bmlmSe:hover{-webkit-transition-duration:80ms;transition-duration:80ms;}/*!sc*/ .bmlmSe:active{-webkit-transition:none;transition:none;}/*!sc*/ .bmlmSe[data-inactive]{cursor:auto;}/*!sc*/ .bmlmSe:disabled{cursor:not-allowed;box-shadow:none;color:var(--button-primary-fgColor-disabled,var(--color-btn-primary-disabled-text,rgba(255,255,255,0.8)));background-color:var(--button-primary-bgColor-disabled,var(--color-btn-primary-disabled-bg,#94d3a2));border-color:var(--button-primary-borderColor-disabled,var(--color-btn-primary-disabled-border,rgba(31,35,40,0.15)));}/*!sc*/ .bmlmSe:disabled [data-component=ButtonCounter]{color:inherit;}/*!sc*/ @media (forced-colors:active){.bmlmSe:focus{outline:solid 1px transparent;}}/*!sc*/ .bmlmSe [data-component=ButtonCounter]{font-size:12px;background-color:var(--buttonCounter-primary-bgColor-rest,var(--color-btn-primary-counter-bg,rgba(0,45,17,0.2)));color:var(--button-primary-fgColor-rest,var(--color-btn-primary-text,#ffffff));}/*!sc*/ .bmlmSe[data-component=IconButton]{display:inline-grid;padding:unset;place-content:center;width:32px;min-width:unset;}/*!sc*/ .bmlmSe[data-size="small"]{padding:0 8px;height:28px;gap:4px;font-size:12px;}/*!sc*/ .bmlmSe[data-size="small"] [data-component="text"]{line-height:1.6666667;}/*!sc*/ .bmlmSe[data-size="small"] [data-component=ButtonCounter]{font-size:12px;}/*!sc*/ .bmlmSe[data-size="small"] [data-component="buttonContent"] > :not(:last-child){margin-right:4px;}/*!sc*/ .bmlmSe[data-size="small"][data-component=IconButton]{width:28px;padding:unset;}/*!sc*/ .bmlmSe[data-size="large"]{padding:0 16px;height:40px;gap:8px;}/*!sc*/ .bmlmSe[data-size="large"] [data-component="buttonContent"] > :not(:last-child){margin-right:8px;}/*!sc*/ .bmlmSe[data-size="large"][data-component=IconButton]{width:40px;padding:unset;}/*!sc*/ .bmlmSe[data-block="block"]{width:100%;}/*!sc*/ .bmlmSe[data-label-wrap="true"]{min-width:-webkit-fit-content;min-width:-moz-fit-content;min-width:fit-content;height:unset;min-height:var(--control-medium-size,2rem);}/*!sc*/ .bmlmSe[data-label-wrap="true"] [data-component="buttonContent"]{-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;-webkit-align-self:stretch;-ms-flex-item-align:stretch;align-self:stretch;padding-block:calc(var(--control-medium-paddingBlock,0.375rem) - 2px);}/*!sc*/ .bmlmSe[data-label-wrap="true"] [data-component="text"]{white-space:unset;word-break:break-word;}/*!sc*/ .bmlmSe[data-label-wrap="true"][data-size="small"]{height:unset;min-height:var(--control-small-size,1.75rem);}/*!sc*/ .bmlmSe[data-label-wrap="true"][data-size="small"] [data-component="buttonContent"]{padding-block:calc(var(--control-small-paddingBlock,0.25rem) - 2px);}/*!sc*/ .bmlmSe[data-label-wrap="true"][data-size="large"]{height:unset;min-height:var(--control-large-size,2.5rem);padding-inline:var(--control-large-paddingInline-spacious,1rem);}/*!sc*/ .bmlmSe[data-label-wrap="true"][data-size="large"] [data-component="buttonContent"]{padding-block:calc(var(--control-large-paddingBlock,0.625rem) - 2px);}/*!sc*/ .bmlmSe[data-inactive]:not([disabled]){background-color:var(--button-inactive-bgColor,var(--button-inactive-bgColor-rest,var(--color-btn-inactive-bg,#eaeef2)));border-color:var(--button-inactive-bgColor,var(--button-inactive-bgColor-rest,var(--color-btn-inactive-bg,#eaeef2)));color:var(--button-inactive-fgColor,var(--button-inactive-fgColor-rest,var(--color-btn-inactive-text,#57606a)));}/*!sc*/ .bmlmSe[data-inactive]:not([disabled]):focus-visible{box-shadow:none;}/*!sc*/ .bmlmSe [data-component="leadingVisual"]{grid-area:leadingVisual;}/*!sc*/ .bmlmSe [data-component="text"]{grid-area:text;line-height:1.4285714;white-space:nowrap;}/*!sc*/ .bmlmSe [data-component="trailingVisual"]{grid-area:trailingVisual;}/*!sc*/ .bmlmSe [data-component="trailingAction"]{margin-right:-4px;}/*!sc*/ .bmlmSe [data-component="buttonContent"]{-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;display:grid;grid-template-areas:"leadingVisual text trailingVisual";grid-template-columns:min-content minmax(0,auto) min-content;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-align-content:center;-ms-flex-line-pack:center;align-content:center;}/*!sc*/ .bmlmSe [data-component="buttonContent"] > :not(:last-child){margin-right:8px;}/*!sc*/ .bmlmSe [data-component="loadingSpinner"]{grid-area:text;margin-right:0px !important;place-self:center;color:var(--fgColor-muted,var(--color-fg-muted,#656d76));}/*!sc*/ .bmlmSe [data-component="loadingSpinner"] + [data-component="text"]{visibility:hidden;}/*!sc*/ .bmlmSe:hover:not([disabled]):not([data-inactive]){color:btn.primary.hoverText;background-color:var(--button-primary-bgColor-hover,var(--color-btn-primary-hover-bg,#1a7f37));}/*!sc*/ .bmlmSe:focus:not([disabled]){box-shadow:inset 0 0 0 3px;}/*!sc*/ .bmlmSe:focus-visible:not([disabled]){box-shadow:inset 0 0 0 3px;}/*!sc*/ .bmlmSe:active:not([disabled]):not([data-inactive]){background-color:var(--button-primary-bgColor-active,var(--color-btn-primary-selected-bg,hsla(137,66%,28%,1)));box-shadow:var(--button-primary-shadow-selected,var(--color-btn-primary-selected-shadow,inset 0 1px 0 rgba(0,45,17,0.2)));}/*!sc*/ .bmlmSe[aria-expanded=true]{background-color:var(--button-primary-bgColor-active,var(--color-btn-primary-selected-bg,hsla(137,66%,28%,1)));box-shadow:var(--button-primary-shadow-selected,var(--color-btn-primary-selected-shadow,inset 0 1px 0 rgba(0,45,17,0.2)));}/*!sc*/ .dPmZyJ{border-radius:6px;border:1px solid;border-color:transparent;font-family:inherit;font-weight:500;font-size:14px;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-text-decoration:none;text-decoration:none;text-align:center;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;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;height:32px;padding:0 12px;gap:8px;min-width:-webkit-max-content;min-width:-moz-max-content;min-width:max-content;-webkit-transition:80ms cubic-bezier(0.65,0,0.35,1);transition:80ms cubic-bezier(0.65,0,0.35,1);-webkit-transition-property:color,fill,background-color,border-color;transition-property:color,fill,background-color,border-color;color:var(--button-invisible-fgColor-rest,var(--button-default-fgColor-rest,var(--color-btn-text,#24292f)));background-color:transparent;box-shadow:none;}/*!sc*/ .dPmZyJ:focus:not(:disabled){box-shadow:none;outline:2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));outline-offset:-2px;}/*!sc*/ .dPmZyJ:focus:not(:disabled):not(:focus-visible){outline:solid 1px transparent;}/*!sc*/ .dPmZyJ:focus-visible:not(:disabled){box-shadow:none;outline:2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));outline-offset:-2px;}/*!sc*/ .dPmZyJ[href]{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}/*!sc*/ .dPmZyJ[href]:hover{-webkit-text-decoration:none;text-decoration:none;}/*!sc*/ .dPmZyJ:hover{-webkit-transition-duration:80ms;transition-duration:80ms;}/*!sc*/ .dPmZyJ:active{-webkit-transition:none;transition:none;}/*!sc*/ .dPmZyJ[data-inactive]{cursor:auto;}/*!sc*/ .dPmZyJ:disabled{cursor:not-allowed;box-shadow:none;color:var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));background-color:var(--button-invisible-bgColor-disabled,transparent);}/*!sc*/ .dPmZyJ:disabled [data-component=ButtonCounter],.dPmZyJ:disabled [data-component="leadingVisual"],.dPmZyJ:disabled [data-component="trailingAction"]{color:inherit;}/*!sc*/ @media (forced-colors:active){.dPmZyJ:focus{outline:solid 1px transparent;}}/*!sc*/ .dPmZyJ [data-component=ButtonCounter]{font-size:12px;}/*!sc*/ .dPmZyJ[data-component=IconButton]{display:inline-grid;padding:unset;place-content:center;width:32px;min-width:unset;}/*!sc*/ .dPmZyJ[data-size="small"]{padding:0 8px;height:28px;gap:4px;font-size:12px;}/*!sc*/ .dPmZyJ[data-size="small"] [data-component="text"]{line-height:1.6666667;}/*!sc*/ .dPmZyJ[data-size="small"] [data-component=ButtonCounter]{font-size:12px;}/*!sc*/ .dPmZyJ[data-size="small"] [data-component="buttonContent"] > :not(:last-child){margin-right:4px;}/*!sc*/ .dPmZyJ[data-size="small"][data-component=IconButton]{width:28px;padding:unset;}/*!sc*/ .dPmZyJ[data-size="large"]{padding:0 16px;height:40px;gap:8px;}/*!sc*/ .dPmZyJ[data-size="large"] [data-component="buttonContent"] > :not(:last-child){margin-right:8px;}/*!sc*/ .dPmZyJ[data-size="large"][data-component=IconButton]{width:40px;padding:unset;}/*!sc*/ .dPmZyJ[data-block="block"]{width:100%;}/*!sc*/ .dPmZyJ[data-label-wrap="true"]{min-width:-webkit-fit-content;min-width:-moz-fit-content;min-width:fit-content;height:unset;min-height:var(--control-medium-size,2rem);}/*!sc*/ .dPmZyJ[data-label-wrap="true"] [data-component="buttonContent"]{-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;-webkit-align-self:stretch;-ms-flex-item-align:stretch;align-self:stretch;padding-block:calc(var(--control-medium-paddingBlock,0.375rem) - 2px);}/*!sc*/ .dPmZyJ[data-label-wrap="true"] [data-component="text"]{white-space:unset;word-break:break-word;}/*!sc*/ .dPmZyJ[data-label-wrap="true"][data-size="small"]{height:unset;min-height:var(--control-small-size,1.75rem);}/*!sc*/ .dPmZyJ[data-label-wrap="true"][data-size="small"] [data-component="buttonContent"]{padding-block:calc(var(--control-small-paddingBlock,0.25rem) - 2px);}/*!sc*/ .dPmZyJ[data-label-wrap="true"][data-size="large"]{height:unset;min-height:var(--control-large-size,2.5rem);padding-inline:var(--control-large-paddingInline-spacious,1rem);}/*!sc*/ .dPmZyJ[data-label-wrap="true"][data-size="large"] [data-component="buttonContent"]{padding-block:calc(var(--control-large-paddingBlock,0.625rem) - 2px);}/*!sc*/ .dPmZyJ[data-inactive]:not([disabled]){background-color:var(--button-inactive-bgColor,var(--button-inactive-bgColor-rest,var(--color-btn-inactive-bg,#eaeef2)));border-color:var(--button-inactive-bgColor,var(--button-inactive-bgColor-rest,var(--color-btn-inactive-bg,#eaeef2)));color:var(--button-inactive-fgColor,var(--button-inactive-fgColor-rest,var(--color-btn-inactive-text,#57606a)));}/*!sc*/ .dPmZyJ[data-inactive]:not([disabled]):focus-visible{box-shadow:none;}/*!sc*/ .dPmZyJ [data-component="leadingVisual"]{grid-area:leadingVisual;color:var(--button-invisible-iconColor-rest,var(--fgColor-muted,var(--color-fg-muted,#656d76)));}/*!sc*/ .dPmZyJ [data-component="text"]{grid-area:text;line-height:1.4285714;white-space:nowrap;}/*!sc*/ .dPmZyJ [data-component="trailingVisual"]{grid-area:trailingVisual;color:var(--button-invisible-iconColor-rest,var(--fgColor-muted,var(--color-fg-muted,#656d76)));}/*!sc*/ .dPmZyJ [data-component="trailingAction"]{margin-right:-4px;color:var(--button-invisible-iconColor-rest,var(--fgColor-muted,var(--color-fg-muted,#656d76)));}/*!sc*/ .dPmZyJ [data-component="buttonContent"]{-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;display:grid;grid-template-areas:"leadingVisual text trailingVisual";grid-template-columns:min-content minmax(0,auto) min-content;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-align-content:center;-ms-flex-line-pack:center;align-content:center;}/*!sc*/ .dPmZyJ [data-component="buttonContent"] > :not(:last-child){margin-right:8px;}/*!sc*/ .dPmZyJ [data-component="loadingSpinner"]{grid-area:text;margin-right:0px !important;place-self:center;color:var(--fgColor-muted,var(--color-fg-muted,#656d76));}/*!sc*/ .dPmZyJ [data-component="loadingSpinner"] + [data-component="text"]{visibility:hidden;}/*!sc*/ .dPmZyJ:hover:not([disabled]){background-color:var(--control-transparent-bgColor-hover,var(--color-action-list-item-default-hover-bg,rgba(208,215,222,0.32)));}/*!sc*/ .dPmZyJ:active:not([disabled]){background-color:var(--control-transparent-bgColor-active,var(--color-action-list-item-default-active-bg,rgba(208,215,222,0.48)));}/*!sc*/ .dPmZyJ[aria-expanded=true]{background-color:var(--control-transparent-bgColor-selected,var(--color-action-list-item-default-selected-bg,rgba(208,215,222,0.24)));}/*!sc*/ .dPmZyJ[data-component="IconButton"][data-no-visuals]{color:var(--button-invisible-iconColor-rest,var(--fgColor-muted,var(--color-fg-muted,#656d76)));}/*!sc*/ .dPmZyJ[data-no-visuals]{color:var(--button-invisible-fgColor-rest,var(--button-default-fgColor-rest,var(--color-btn-text,#24292f)));}/*!sc*/ .dPmZyJ:has([data-component="ButtonCounter"]){color:var(--button-invisible-fgColor-rest,var(--button-default-fgColor-rest,var(--color-btn-text,#24292f)));}/*!sc*/ .dPmZyJ:disabled[data-no-visuals]{color:var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));}/*!sc*/ .dPmZyJ:disabled[data-no-visuals] [data-component=ButtonCounter]{color:inherit;}/*!sc*/ .gXPTqA{border-radius:6px;border:1px solid;border-color:transparent;font-family:inherit;font-weight:500;font-size:14px;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-text-decoration:none;text-decoration:none;text-align:center;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;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;height:32px;padding:0 12px;gap:8px;min-width:-webkit-max-content;min-width:-moz-max-content;min-width:max-content;-webkit-transition:80ms cubic-bezier(0.65,0,0.35,1);transition:80ms cubic-bezier(0.65,0,0.35,1);-webkit-transition-property:color,fill,background-color,border-color;transition-property:color,fill,background-color,border-color;color:var(--button-invisible-fgColor-rest,var(--button-default-fgColor-rest,var(--color-btn-text,#24292f)));background-color:transparent;box-shadow:none;}/*!sc*/ .gXPTqA:focus:not(:disabled){box-shadow:none;outline:2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));outline-offset:-2px;}/*!sc*/ .gXPTqA:focus:not(:disabled):not(:focus-visible){outline:solid 1px transparent;}/*!sc*/ .gXPTqA:focus-visible:not(:disabled){box-shadow:none;outline:2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));outline-offset:-2px;}/*!sc*/ .gXPTqA[href]{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}/*!sc*/ .gXPTqA[href]:hover{-webkit-text-decoration:none;text-decoration:none;}/*!sc*/ .gXPTqA:hover{-webkit-transition-duration:80ms;transition-duration:80ms;}/*!sc*/ .gXPTqA:active{-webkit-transition:none;transition:none;}/*!sc*/ .gXPTqA[data-inactive]{cursor:auto;}/*!sc*/ .gXPTqA:disabled{cursor:not-allowed;box-shadow:none;color:var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));background-color:var(--button-invisible-bgColor-disabled,transparent);}/*!sc*/ .gXPTqA:disabled [data-component=ButtonCounter],.gXPTqA:disabled [data-component="leadingVisual"],.gXPTqA:disabled [data-component="trailingAction"]{color:inherit;}/*!sc*/ @media (forced-colors:active){.gXPTqA:focus{outline:solid 1px transparent;}}/*!sc*/ .gXPTqA [data-component=ButtonCounter]{font-size:12px;}/*!sc*/ .gXPTqA[data-component=IconButton]{display:inline-grid;padding:unset;place-content:center;width:32px;min-width:unset;}/*!sc*/ .gXPTqA[data-size="small"]{padding:0 8px;height:28px;gap:4px;font-size:12px;}/*!sc*/ .gXPTqA[data-size="small"] [data-component="text"]{line-height:1.6666667;}/*!sc*/ .gXPTqA[data-size="small"] [data-component=ButtonCounter]{font-size:12px;}/*!sc*/ .gXPTqA[data-size="small"] [data-component="buttonContent"] > :not(:last-child){margin-right:4px;}/*!sc*/ .gXPTqA[data-size="small"][data-component=IconButton]{width:28px;padding:unset;}/*!sc*/ .gXPTqA[data-size="large"]{padding:0 16px;height:40px;gap:8px;}/*!sc*/ .gXPTqA[data-size="large"] [data-component="buttonContent"] > :not(:last-child){margin-right:8px;}/*!sc*/ .gXPTqA[data-size="large"][data-component=IconButton]{width:40px;padding:unset;}/*!sc*/ .gXPTqA[data-block="block"]{width:100%;}/*!sc*/ .gXPTqA[data-label-wrap="true"]{min-width:-webkit-fit-content;min-width:-moz-fit-content;min-width:fit-content;height:unset;min-height:var(--control-medium-size,2rem);}/*!sc*/ .gXPTqA[data-label-wrap="true"] [data-component="buttonContent"]{-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;-webkit-align-self:stretch;-ms-flex-item-align:stretch;align-self:stretch;padding-block:calc(var(--control-medium-paddingBlock,0.375rem) - 2px);}/*!sc*/ .gXPTqA[data-label-wrap="true"] [data-component="text"]{white-space:unset;word-break:break-word;}/*!sc*/ .gXPTqA[data-label-wrap="true"][data-size="small"]{height:unset;min-height:var(--control-small-size,1.75rem);}/*!sc*/ .gXPTqA[data-label-wrap="true"][data-size="small"] [data-component="buttonContent"]{padding-block:calc(var(--control-small-paddingBlock,0.25rem) - 2px);}/*!sc*/ .gXPTqA[data-label-wrap="true"][data-size="large"]{height:unset;min-height:var(--control-large-size,2.5rem);padding-inline:var(--control-large-paddingInline-spacious,1rem);}/*!sc*/ .gXPTqA[data-label-wrap="true"][data-size="large"] [data-component="buttonContent"]{padding-block:calc(var(--control-large-paddingBlock,0.625rem) - 2px);}/*!sc*/ .gXPTqA[data-inactive]:not([disabled]){background-color:var(--button-inactive-bgColor,var(--button-inactive-bgColor-rest,var(--color-btn-inactive-bg,#eaeef2)));border-color:var(--button-inactive-bgColor,var(--button-inactive-bgColor-rest,var(--color-btn-inactive-bg,#eaeef2)));color:var(--button-inactive-fgColor,var(--button-inactive-fgColor-rest,var(--color-btn-inactive-text,#57606a)));}/*!sc*/ .gXPTqA[data-inactive]:not([disabled]):focus-visible{box-shadow:none;}/*!sc*/ .gXPTqA [data-component="leadingVisual"]{grid-area:leadingVisual;color:var(--button-invisible-iconColor-rest,var(--fgColor-muted,var(--color-fg-muted,#656d76)));}/*!sc*/ .gXPTqA [data-component="text"]{grid-area:text;line-height:1.4285714;white-space:nowrap;}/*!sc*/ .gXPTqA [data-component="trailingVisual"]{grid-area:trailingVisual;color:var(--button-invisible-iconColor-rest,var(--fgColor-muted,var(--color-fg-muted,#656d76)));}/*!sc*/ .gXPTqA [data-component="trailingAction"]{margin-right:-4px;color:var(--button-invisible-iconColor-rest,var(--fgColor-muted,var(--color-fg-muted,#656d76)));}/*!sc*/ .gXPTqA [data-component="buttonContent"]{-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;display:grid;grid-template-areas:"leadingVisual text trailingVisual";grid-template-columns:min-content minmax(0,auto) min-content;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-align-content:center;-ms-flex-line-pack:center;align-content:center;}/*!sc*/ .gXPTqA [data-component="buttonContent"] > :not(:last-child){margin-right:8px;}/*!sc*/ .gXPTqA [data-component="loadingSpinner"]{grid-area:text;margin-right:0px !important;place-self:center;color:var(--fgColor-muted,var(--color-fg-muted,#656d76));}/*!sc*/ .gXPTqA [data-component="loadingSpinner"] + [data-component="text"]{visibility:hidden;}/*!sc*/ .gXPTqA:hover:not([disabled]){background-color:var(--control-transparent-bgColor-hover,var(--color-action-list-item-default-hover-bg,rgba(208,215,222,0.32)));}/*!sc*/ .gXPTqA:active:not([disabled]){background-color:var(--control-transparent-bgColor-active,var(--color-action-list-item-default-active-bg,rgba(208,215,222,0.48)));}/*!sc*/ .gXPTqA[aria-expanded=true]{background-color:var(--control-transparent-bgColor-selected,var(--color-action-list-item-default-selected-bg,rgba(208,215,222,0.24)));}/*!sc*/ .gXPTqA[data-component="IconButton"][data-no-visuals]{color:var(--button-invisible-iconColor-rest,var(--fgColor-muted,var(--color-fg-muted,#656d76)));}/*!sc*/ .gXPTqA[data-no-visuals]{color:var(--button-invisible-fgColor-rest,var(--button-default-fgColor-rest,var(--color-btn-text,#24292f)));}/*!sc*/ .gXPTqA:has([data-component="ButtonCounter"]){color:var(--button-invisible-fgColor-rest,var(--button-default-fgColor-rest,var(--color-btn-text,#24292f)));}/*!sc*/ .gXPTqA:disabled[data-no-visuals]{color:var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));}/*!sc*/ .gXPTqA:disabled[data-no-visuals] [data-component=ButtonCounter]{color:inherit;}/*!sc*/ .gXPTqA[data-size="medium"]{color:var(--fgColor-muted,var(--color-fg-subtle,#6e7781));padding-left:8px;padding-right:8px;}/*!sc*/ data-styled.g11[id="types__StyledButton-sc-ws60qy-0"]{content:"gVXRRg,loAzyw,cXsOlJ,gGdPyq,bmlmSe,dPmZyJ,gXPTqA,"}/*!sc*/ .hWlpPn{position:relative;display:inline-block;}/*!sc*/ .hWlpPn::after{position:absolute;z-index:1000000;display:none;padding:0.5em 0.75em;font:normal normal 11px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";-webkit-font-smoothing:subpixel-antialiased;color:var(--tooltip-fgColor,var(--fgColor-onEmphasis,var(--color-fg-on-emphasis,#ffffff)));text-align:center;-webkit-text-decoration:none;text-decoration:none;text-shadow:none;text-transform:none;-webkit-letter-spacing:normal;-moz-letter-spacing:normal;-ms-letter-spacing:normal;letter-spacing:normal;word-wrap:break-word;white-space:pre;pointer-events:none;content:attr(aria-label);background:var(--tooltip-bgColor,var(--bgColor-emphasis,var(--color-neutral-emphasis-plus,#24292f)));border-radius:6px;opacity:0;}/*!sc*/ @-webkit-keyframes tooltip-appear{from{opacity:0;}to{opacity:1;}}/*!sc*/ @keyframes tooltip-appear{from{opacity:0;}to{opacity:1;}}/*!sc*/ .hWlpPn:hover::after,.hWlpPn:active::after,.hWlpPn:focus::after,.hWlpPn:focus-within::after{display:inline-block;-webkit-text-decoration:none;text-decoration:none;-webkit-animation-name:tooltip-appear;animation-name:tooltip-appear;-webkit-animation-duration:0.1s;animation-duration:0.1s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;-webkit-animation-delay:0s;animation-delay:0s;}/*!sc*/ .hWlpPn.tooltipped-no-delay:hover::after,.hWlpPn.tooltipped-no-delay:active::after,.hWlpPn.tooltipped-no-delay:focus::after,.hWlpPn.tooltipped-no-delay:focus-within::after{-webkit-animation-delay:0s;animation-delay:0s;}/*!sc*/ .hWlpPn.tooltipped-multiline:hover::after,.hWlpPn.tooltipped-multiline:active::after,.hWlpPn.tooltipped-multiline:focus::after,.hWlpPn.tooltipped-multiline:focus-within::after{display:table-cell;}/*!sc*/ .hWlpPn.tooltipped-s::after,.hWlpPn.tooltipped-se::after,.hWlpPn.tooltipped-sw::after{top:100%;right:50%;margin-top:6px;}/*!sc*/ .hWlpPn.tooltipped-se::after{right:auto;left:50%;margin-left:-16px;}/*!sc*/ .hWlpPn.tooltipped-sw::after{margin-right:-16px;}/*!sc*/ .hWlpPn.tooltipped-n::after,.hWlpPn.tooltipped-ne::after,.hWlpPn.tooltipped-nw::after{right:50%;bottom:100%;margin-bottom:6px;}/*!sc*/ .hWlpPn.tooltipped-ne::after{right:auto;left:50%;margin-left:-16px;}/*!sc*/ .hWlpPn.tooltipped-nw::after{margin-right:-16px;}/*!sc*/ .hWlpPn.tooltipped-s::after,.hWlpPn.tooltipped-n::after{-webkit-transform:translateX(50%);-ms-transform:translateX(50%);transform:translateX(50%);}/*!sc*/ .hWlpPn.tooltipped-w::after{right:100%;bottom:50%;margin-right:6px;-webkit-transform:translateY(50%);-ms-transform:translateY(50%);transform:translateY(50%);}/*!sc*/ .hWlpPn.tooltipped-e::after{bottom:50%;left:100%;margin-left:6px;-webkit-transform:translateY(50%);-ms-transform:translateY(50%);transform:translateY(50%);}/*!sc*/ .hWlpPn.tooltipped-multiline::after{width:-webkit-max-content;width:-moz-max-content;width:max-content;max-width:250px;word-wrap:break-word;white-space:pre-line;border-collapse:separate;}/*!sc*/ .hWlpPn.tooltipped-multiline.tooltipped-s::after,.hWlpPn.tooltipped-multiline.tooltipped-n::after{right:auto;left:50%;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);}/*!sc*/ .hWlpPn.tooltipped-multiline.tooltipped-w::after,.hWlpPn.tooltipped-multiline.tooltipped-e::after{right:100%;}/*!sc*/ .hWlpPn.tooltipped-align-right-2::after{right:0;margin-right:0;}/*!sc*/ .hWlpPn.tooltipped-align-left-2::after{left:0;margin-left:0;}/*!sc*/ data-styled.g14[id="Tooltip__TooltipBase-sc-17tf59c-0"]{content:"hWlpPn,"}/*!sc*/ .kbCLEG{border:0;font-size:inherit;font-family:inherit;background-color:transparent;-webkit-appearance:none;color:inherit;width:100%;}/*!sc*/ .kbCLEG:focus{outline:0;}/*!sc*/ data-styled.g15[id="UnstyledTextInput-sc-14ypya-0"]{content:"kbCLEG,"}/*!sc*/ .liVpTx{display:inline-block;overflow:hidden;text-overflow:ellipsis;vertical-align:top;white-space:nowrap;max-width:125px;}/*!sc*/ data-styled.g17[id="Truncate__StyledTruncate-sc-23o1d2-0"]{content:"liVpTx,"}/*!sc*/ .iBVwpg{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;padding-inline:var(--stack-padding-normal,16px);-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;min-height:var(--control-xlarge-size,48px);box-shadow:inset 0px -1px var(--borderColor-muted,var(--borderColor-muted,var(--color-border-muted,hsla(210,18%,87%,1))));-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;border-bottom:none;max-width:100%;padding-left:8px;padding-right:8px;}/*!sc*/ data-styled.g92[id="UnderlineTabbedInterface__StyledUnderlineWrapper-sc-4ilrg0-0"]{content:"iBVwpg,"}/*!sc*/ .gJyWUl{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;list-style:none;white-space:nowrap;padding:0;margin:0;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:8px;position:relative;}/*!sc*/ data-styled.g93[id="UnderlineTabbedInterface__StyledUnderlineItemList-sc-4ilrg0-1"]{content:"gJyWUl,"}/*!sc*/ .beOdPj{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border:0;cursor:pointer;font:inherit;position:relative;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;color:var(--fgColor-default,var(--color-fg-default,#1F2328));text-align:center;-webkit-text-decoration:none;text-decoration:none;line-height:var(--text-body-lineHeight-medium,1.4285);border-radius:var(--borderRadius-medium,6px);font-size:var(--text-body-size-medium,14px);padding-inline:var(--control-medium-paddingInline-condensed,8px);padding-block:var(--control-medium-paddingBlock,6px);-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}/*!sc*/ @media (hover:hover){.beOdPj:hover{background-color:var(--bgColor-neutral-muted,var(--bgColor-neutral-muted,var(--color-neutral-subtle,rgba(234,238,242,0.5))));-webkit-transition:background 0.12s ease-out;transition:background 0.12s ease-out;-webkit-text-decoration:none;text-decoration:none;}}/*!sc*/ .beOdPj:focus:{outline:2px solid transparent;box-shadow:inset 0 0 0 2px var(--fgColor-accent,var(--fgColor-accent,var(--color-accent-fg,#0969da)));}/*!sc*/ .beOdPj:focus::not(:focus-visible){box-shadow:none;}/*!sc*/ .beOdPj:focus-visible{outline:2px solid transparent;box-shadow:inset 0 0 0 2px var(--fgColor-accent,var(--fgColor-accent,var(--color-accent-fg,#0969da)));}/*!sc*/ .beOdPj [data-content]::before{content:attr(data-content);display:block;height:0;font-weight:var(--base-text-weight-semibold,500);visibility:hidden;white-space:nowrap;}/*!sc*/ .beOdPj [data-component='icon']{color:var(--fgColor-muted,var(--fgColor-muted,var(--color-fg-muted,#656d76)));-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;margin-inline-end:var(--control-medium-gap,8px);}/*!sc*/ .beOdPj [data-component='counter']{margin-inline-start:var(--control-medium-gap,8px);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;}/*!sc*/ .beOdPj::after{position:absolute;right:50%;bottom:calc(50% - calc(var(--control-xlarge-size,48px) / 2 + 1px));width:100%;height:2px;content:'';background-color:transparent;border-radius:0;-webkit-transform:translate(50%,-50%);-ms-transform:translate(50%,-50%);transform:translate(50%,-50%);}/*!sc*/ .beOdPj[aria-current]:not([aria-current='false']) [data-component='text'],.beOdPj[aria-selected='true'] [data-component='text']{font-weight:var(--base-text-weight-semibold,500);}/*!sc*/ .beOdPj[aria-current]:not([aria-current='false'])::after,.beOdPj[aria-selected='true']::after{background-color:var(--underlineNav-borderColor-active,var(--color-primer-border-active,#fd8c73));}/*!sc*/ @media (forced-colors:active){.beOdPj[aria-current]:not([aria-current='false'])::after,.beOdPj[aria-selected='true']::after{background-color:LinkText;}}/*!sc*/ data-styled.g94[id="UnderlineTabbedInterface__StyledUnderlineItem-sc-4ilrg0-2"]{content:"beOdPj,"}/*!sc*/ </style> <!-- --> <!-- --> <div class="Box-sc-g0xbh4-0 iVEunk"><div class="Box-sc-g0xbh4-0 jzuOtQ"><div class="Box-sc-g0xbh4-0 bGojzy"></div></div><div class="Box-sc-g0xbh4-0 iNSVHo"><div class="Box-sc-g0xbh4-0 bVgnfw"><div class="Box-sc-g0xbh4-0 CEgMp"><button type="button" aria-haspopup="true" aria-expanded="false" tabindex="0" aria-label="main branch" data-testid="anchor-button" class="types__StyledButton-sc-ws60qy-0 gVXRRg overview-ref-selector width-full" data-loading="false" data-size="medium" aria-describedby="branch-picker-repos-header-ref-selector-loading-announcement" id="branch-picker-repos-header-ref-selector"><span data-component="buttonContent" class="Box-sc-g0xbh4-0 gUkoLg"><span data-component="text"><div class="Box-sc-g0xbh4-0 bZBlpz"><div class="Box-sc-g0xbh4-0 lhTYNA"><svg aria-hidden="true" focusable="false" class="octicon octicon-git-branch" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" style="display:inline-block;user-select:none;vertical-align:text-bottom;overflow:visible"><path d="M9.5 3.25a2.25 2.25 0 1 1 3 2.122V6A2.5 2.5 0 0 1 10 8.5H6a1 1 0 0 0-1 1v1.128a2.251 2.251 0 1 1-1.5 0V5.372a2.25 2.25 0 1 1 1.5 0v1.836A2.493 2.493 0 0 1 6 7h4a1 1 0 0 0 1-1v-.628A2.25 2.25 0 0 1 9.5 3.25Zm-6 0a.75.75 0 1 0 1.5 0 .75.75 0 0 0-1.5 0Zm8.25-.75a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5ZM4.25 12a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Z"></path></svg></div><div class="Box-sc-g0xbh4-0 ffLUq ref-selector-button-text-container"><span class="Text__StyledText-sc-17v1xeu-0 eMMFM"> <!-- -->main</span></div></div></span><span data-component="trailingVisual" class="Box-sc-g0xbh4-0 hzSPyu"><svg aria-hidden="true" focusable="false" class="octicon octicon-triangle-down" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" style="display:inline-block;user-select:none;vertical-align:text-bottom;overflow:visible"><path d="m4.427 7.427 3.396 3.396a.25.25 0 0 0 .354 0l3.396-3.396A.25.25 0 0 0 11.396 7H4.604a.25.25 0 0 0-.177.427Z"></path></svg></span></span></button><button hidden="" data-hotkey-scope="read-only-cursor-text-area"></button></div><div class="Box-sc-g0xbh4-0 fLXEGX"><a style="--button-color:fg.muted" type="button" href="/gocode1702/headless-gatsby-multilang/branches" class="types__StyledButton-sc-ws60qy-0 loAzyw" data-loading="false" data-size="medium" aria-describedby=":Rclab:-loading-announcement"><span data-component="buttonContent" class="Box-sc-g0xbh4-0 gUkoLg"><span data-component="leadingVisual" class="Box-sc-g0xbh4-0 hzSPyu"><svg aria-hidden="true" focusable="false" class="octicon octicon-git-branch" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" style="display:inline-block;user-select:none;vertical-align:text-bottom;overflow:visible"><path d="M9.5 3.25a2.25 2.25 0 1 1 3 2.122V6A2.5 2.5 0 0 1 10 8.5H6a1 1 0 0 0-1 1v1.128a2.251 2.251 0 1 1-1.5 0V5.372a2.25 2.25 0 1 1 1.5 0v1.836A2.493 2.493 0 0 1 6 7h4a1 1 0 0 0 1-1v-.628A2.25 2.25 0 0 1 9.5 3.25Zm-6 0a.75.75 0 1 0 1.5 0 .75.75 0 0 0-1.5 0Zm8.25-.75a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5ZM4.25 12a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Z"></path></svg></span><span data-component="text">Branches</span></span></a><a style="--button-color:fg.muted" type="button" href="/gocode1702/headless-gatsby-multilang/tags" class="types__StyledButton-sc-ws60qy-0 loAzyw" data-loading="false" data-size="medium" aria-describedby=":Rklab:-loading-announcement"><span data-component="buttonContent" class="Box-sc-g0xbh4-0 gUkoLg"><span data-component="leadingVisual" class="Box-sc-g0xbh4-0 hzSPyu"><svg aria-hidden="true" focusable="false" class="octicon octicon-tag" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" style="display:inline-block;user-select:none;vertical-align:text-bottom;overflow:visible"><path d="M1 7.775V2.75C1 1.784 1.784 1 2.75 1h5.025c.464 0 .91.184 1.238.513l6.25 6.25a1.75 1.75 0 0 1 0 2.474l-5.026 5.026a1.75 1.75 0 0 1-2.474 0l-6.25-6.25A1.752 1.752 0 0 1 1 7.775Zm1.5 0c0 .066.026.13.073.177l6.25 6.25a.25.25 0 0 0 .354 0l5.025-5.025a.25.25 0 0 0 0-.354l-6.25-6.25a.25.25 0 0 0-.177-.073H2.75a.25.25 0 0 0-.25.25ZM6 5a1 1 0 1 1 0 2 1 1 0 0 1 0-2Z"></path></svg></span><span data-component="text">Tags</span></span></a></div><div class="Box-sc-g0xbh4-0 dqfxud"><a style="--button-color:fg.muted" type="button" aria-label="Go to Branches page" href="/gocode1702/headless-gatsby-multilang/branches" class="types__StyledButton-sc-ws60qy-0 cXsOlJ" data-loading="false" data-no-visuals="true" data-size="medium" aria-describedby=":Relab:-loading-announcement"><svg aria-hidden="true" focusable="false" class="octicon octicon-git-branch" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" style="display:inline-block;user-select:none;vertical-align:text-bottom;overflow:visible"><path d="M9.5 3.25a2.25 2.25 0 1 1 3 2.122V6A2.5 2.5 0 0 1 10 8.5H6a1 1 0 0 0-1 1v1.128a2.251 2.251 0 1 1-1.5 0V5.372a2.25 2.25 0 1 1 1.5 0v1.836A2.493 2.493 0 0 1 6 7h4a1 1 0 0 0 1-1v-.628A2.25 2.25 0 0 1 9.5 3.25Zm-6 0a.75.75 0 1 0 1.5 0 .75.75 0 0 0-1.5 0Zm8.25-.75a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5ZM4.25 12a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Z"></path></svg></a><a style="--button-color:fg.muted" type="button" aria-label="Go to Tags page" href="/gocode1702/headless-gatsby-multilang/tags" class="types__StyledButton-sc-ws60qy-0 cXsOlJ" data-loading="false" data-no-visuals="true" data-size="medium" aria-describedby=":Rmlab:-loading-announcement"><svg aria-hidden="true" focusable="false" class="octicon octicon-tag" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" style="display:inline-block;user-select:none;vertical-align:text-bottom;overflow:visible"><path d="M1 7.775V2.75C1 1.784 1.784 1 2.75 1h5.025c.464 0 .91.184 1.238.513l6.25 6.25a1.75 1.75 0 0 1 0 2.474l-5.026 5.026a1.75 1.75 0 0 1-2.474 0l-6.25-6.25A1.752 1.752 0 0 1 1 7.775Zm1.5 0c0 .066.026.13.073.177l6.25 6.25a.25.25 0 0 0 .354 0l5.025-5.025a.25.25 0 0 0 0-.354l-6.25-6.25a.25.25 0 0 0-.177-.073H2.75a.25.25 0 0 0-.25.25ZM6 5a1 1 0 1 1 0 2 1 1 0 0 1 0-2Z"></path></svg></a></div></div><div class="Box-sc-g0xbh4-0 jxTzTd"><div class="Box-sc-g0xbh4-0 gqqBXN"><div class="Box-sc-g0xbh4-0 dzXgxt"><!--$--><div class="Box-sc-g0xbh4-0 iWFGlI"><span class="TextInputWrapper__TextInputBaseWrapper-sc-1mqhpbi-0 TextInputWrapper-sc-1mqhpbi-1 gwqFqs decvaq TextInput-wrapper" aria-busy="false"><span class="TextInput-icon" id=":R2j5ab:" aria-hidden="true"><svg aria-hidden="true" focusable="false" class="octicon octicon-search" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" style="display:inline-block;user-select:none;vertical-align:text-bottom;overflow:visible"><path d="M10.68 11.74a6 6 0 0 1-7.922-8.982 6 6 0 0 1 8.982 7.922l3.04 3.04a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215ZM11.5 7a4.499 4.499 0 1 0-8.997 0A4.499 4.499 0 0 0 11.5 7Z"></path></svg></span><input type="text" aria-label="Go to file" role="combobox" aria-controls="file-results-list" aria-expanded="false" aria-haspopup="dialog" autoCorrect="off" spellcheck="false" placeholder="Go to file" aria-describedby=":R2j5ab: :R2j5abH1:" data-component="input" class="UnstyledTextInput-sc-14ypya-0 kbCLEG" value=""/><span class="TextInput-icon" id=":R2j5abH1:" aria-hidden="true"></span></span></div><!--/$--></div><div class="Box-sc-g0xbh4-0 YUPas"><button type="button" class="types__StyledButton-sc-ws60qy-0 gGdPyq" data-loading="false" data-no-visuals="true" data-size="medium" aria-describedby=":Rr5ab:-loading-announcement"><span data-component="buttonContent" class="Box-sc-g0xbh4-0 gUkoLg"><span data-component="text">Go to file</span></span></button></div><div class="react-directory-add-file-icon"></div><div class="react-directory-remove-file-icon"></div></div><button type="button" aria-haspopup="true" aria-expanded="false" tabindex="0" class="types__StyledButton-sc-ws60qy-0 bmlmSe" data-loading="false" data-size="medium" aria-describedby=":R55ab:-loading-announcement" id=":R55ab:"><span data-component="buttonContent" class="Box-sc-g0xbh4-0 gUkoLg"><span data-component="leadingVisual" class="Box-sc-g0xbh4-0 hzSPyu"><svg aria-hidden="true" focusable="false" class="hide-sm" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" style="display:inline-block;user-select:none;vertical-align:text-bottom;overflow:visible"><path d="m11.28 3.22 4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.749.749 0 0 1-1.275-.326.749.749 0 0 1 .215-.734L13.94 8l-3.72-3.72a.749.749 0 0 1 .326-1.275.749.749 0 0 1 .734.215Zm-6.56 0a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042L2.06 8l3.72 3.72a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L.47 8.53a.75.75 0 0 1 0-1.06Z"></path></svg></span><span data-component="text">Code</span><span data-component="trailingVisual" class="Box-sc-g0xbh4-0 hzSPyu"><svg aria-hidden="true" focusable="false" class="octicon octicon-triangle-down" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" style="display:inline-block;user-select:none;vertical-align:text-bottom;overflow:visible"><path d="m4.427 7.427 3.396 3.396a.25.25 0 0 0 .354 0l3.396-3.396A.25.25 0 0 0 11.396 7H4.604a.25.25 0 0 0-.177.427Z"></path></svg></span></span></button><div class="Box-sc-g0xbh4-0 izFOf"><button data-component="IconButton" type="button" aria-label="Open more actions menu" aria-haspopup="true" aria-expanded="false" tabindex="0" class="types__StyledButton-sc-ws60qy-0 gGdPyq prc-Button-IconButton-szpyj" data-loading="false" data-no-visuals="true" data-size="medium" aria-describedby=":R75ab:-loading-announcement" id=":R75ab:"><svg aria-hidden="true" focusable="false" class="octicon octicon-kebab-horizontal" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" style="display:inline-block;user-select:none;vertical-align:text-bottom;overflow:visible"><path d="M8 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM1.5 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm13 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"></path></svg></button></div></div></div><div class="Box-sc-g0xbh4-0 vIPPs"><div data-hpc="true"><button hidden="" data-testid="focus-next-element-button" data-hotkey="j"></button><button hidden="" data-testid="focus-previous-element-button" data-hotkey="k"></button><h2 class="sr-only prc-Heading-Heading-6CmGO" data-testid="screen-reader-heading" id="folders-and-files">Folders and files</h2><table aria-labelledby="folders-and-files" class="Box-sc-g0xbh4-0 fdROMU"><thead class="Box-sc-g0xbh4-0 jGKpsv"><tr class="Box-sc-g0xbh4-0 jdgHnn"><th colSpan="2" class="Box-sc-g0xbh4-0 bQivRW"><span class="text-bold">Name</span></th><th colSpan="1" class="Box-sc-g0xbh4-0 ldkMIO"><span class="text-bold">Name</span></th><th class="hide-sm"><div title="Last commit message" class="Truncate__StyledTruncate-sc-23o1d2-0 liVpTx width-fit"><span class="text-bold">Last commit message</span></div></th><th colSpan="1" class="Box-sc-g0xbh4-0 jMbWeI"><div title="Last commit date" class="Truncate__StyledTruncate-sc-23o1d2-0 liVpTx width-fit"><span class="text-bold">Last commit date</span></div></th></tr></thead><tbody><tr class="Box-sc-g0xbh4-0 gpqjiB"><td colSpan="3" class="bgColor-muted p-1 rounded-top-2"><div class="Box-sc-g0xbh4-0 dzCJzi"><h2 class="sr-only prc-Heading-Heading-6CmGO" data-testid="screen-reader-heading">Latest commit</h2><div style="width:120px" class="Skeleton Skeleton--text" data-testid="loading"> </div><div class="d-flex flex-shrink-0 gap-2"><div data-testid="latest-commit-details" class="d-none d-sm-flex flex-items-center"></div><div class="d-flex gap-2"><h2 class="sr-only prc-Heading-Heading-6CmGO" data-testid="screen-reader-heading">History</h2><a href="/gocode1702/headless-gatsby-multilang/commits/main/" class="types__StyledButton-sc-ws60qy-0 dPmZyJ d-none d-lg-flex LinkButton-module__code-view-link-button--xvCGA flex-items-center fgColor-default" data-loading="false" data-size="small" aria-describedby=":Raqj8pab:-loading-announcement"><span data-component="buttonContent" class="Box-sc-g0xbh4-0 gUkoLg"><span data-component="leadingVisual" class="Box-sc-g0xbh4-0 hzSPyu"><svg aria-hidden="true" focusable="false" class="octicon octicon-history" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" style="display:inline-block;user-select:none;vertical-align:text-bottom;overflow:visible"><path d="m.427 1.927 1.215 1.215a8.002 8.002 0 1 1-1.6 5.685.75.75 0 1 1 1.493-.154 6.5 6.5 0 1 0 1.18-4.458l1.358 1.358A.25.25 0 0 1 3.896 6H.25A.25.25 0 0 1 0 5.75V2.104a.25.25 0 0 1 .427-.177ZM7.75 4a.75.75 0 0 1 .75.75v2.992l2.028.812a.75.75 0 0 1-.557 1.392l-2.5-1A.751.751 0 0 1 7 8.25v-3.5A.75.75 0 0 1 7.75 4Z"></path></svg></span><span data-component="text"><span class="fgColor-default">46 Commits</span></span></span></a><div class="d-sm-none"></div><div class="d-flex d-lg-none"><span role="tooltip" aria-label="46 Commits" id="history-icon-button-tooltip" class="Tooltip__TooltipBase-sc-17tf59c-0 hWlpPn tooltipped-n"><a href="/gocode1702/headless-gatsby-multilang/commits/main/" class="types__StyledButton-sc-ws60qy-0 dPmZyJ LinkButton-module__code-view-link-button--xvCGA flex-items-center fgColor-default" data-loading="false" data-size="small" aria-describedby=":R1iqj8pab:-loading-announcement history-icon-button-tooltip"><span data-component="buttonContent" class="Box-sc-g0xbh4-0 gUkoLg"><span data-component="leadingVisual" class="Box-sc-g0xbh4-0 hzSPyu"><svg aria-hidden="true" focusable="false" class="octicon octicon-history" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" style="display:inline-block;user-select:none;vertical-align:text-bottom;overflow:visible"><path d="m.427 1.927 1.215 1.215a8.002 8.002 0 1 1-1.6 5.685.75.75 0 1 1 1.493-.154 6.5 6.5 0 1 0 1.18-4.458l1.358 1.358A.25.25 0 0 1 3.896 6H.25A.25.25 0 0 1 0 5.75V2.104a.25.25 0 0 1 .427-.177ZM7.75 4a.75.75 0 0 1 .75.75v2.992l2.028.812a.75.75 0 0 1-.557 1.392l-2.5-1A.751.751 0 0 1 7 8.25v-3.5A.75.75 0 0 1 7.75 4Z"></path></svg></span></span></a></span></div></div></div></div></td></tr><tr class="react-directory-row undefined" id="folder-row-0"><td class="react-directory-row-name-cell-small-screen" colSpan="2"><div class="react-directory-filename-column"><svg aria-hidden="true" focusable="false" class="icon-directory" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" style="display:inline-block;user-select:none;vertical-align:text-bottom;overflow:visible"><path d="M1.75 1A1.75 1.75 0 0 0 0 2.75v10.5C0 14.216.784 15 1.75 15h12.5A1.75 1.75 0 0 0 16 13.25v-8.5A1.75 1.75 0 0 0 14.25 3H7.5a.25.25 0 0 1-.2-.1l-.9-1.2C6.07 1.26 5.55 1 5 1H1.75Z"></path></svg><div class="overflow-hidden"><div class="react-directory-filename-cell"><div class="react-directory-truncate"><a title="src" aria-label="src, (Directory)" class="Link--primary" href="/gocode1702/headless-gatsby-multilang/tree/main/src">src</a></div></div></div></div></td><td class="react-directory-row-name-cell-large-screen" colSpan="1"><div class="react-directory-filename-column"><svg aria-hidden="true" focusable="false" class="icon-directory" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" style="display:inline-block;user-select:none;vertical-align:text-bottom;overflow:visible"><path d="M1.75 1A1.75 1.75 0 0 0 0 2.75v10.5C0 14.216.784 15 1.75 15h12.5A1.75 1.75 0 0 0 16 13.25v-8.5A1.75 1.75 0 0 0 14.25 3H7.5a.25.25 0 0 1-.2-.1l-.9-1.2C6.07 1.26 5.55 1 5 1H1.75Z"></path></svg><div class="overflow-hidden"><div class="react-directory-filename-cell"><div class="react-directory-truncate"><a title="src" aria-label="src, (Directory)" class="Link--primary" href="/gocode1702/headless-gatsby-multilang/tree/main/src">src</a></div></div></div></div></td><td class="react-directory-row-commit-cell"><div class="Skeleton Skeleton--text"> </div></td><td><div class="Skeleton Skeleton--text"> </div></td></tr><tr class="react-directory-row undefined" id="folder-row-1"><td class="react-directory-row-name-cell-small-screen" colSpan="2"><div class="react-directory-filename-column"><svg aria-hidden="true" focusable="false" class="color-fg-muted" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" style="display:inline-block;user-select:none;vertical-align:text-bottom;overflow:visible"><path d="M2 1.75C2 .784 2.784 0 3.75 0h6.586c.464 0 .909.184 1.237.513l2.914 2.914c.329.328.513.773.513 1.237v9.586A1.75 1.75 0 0 1 13.25 16h-9.5A1.75 1.75 0 0 1 2 14.25Zm1.75-.25a.25.25 0 0 0-.25.25v12.5c0 .138.112.25.25.25h9.5a.25.25 0 0 0 .25-.25V6h-2.75A1.75 1.75 0 0 1 9 4.25V1.5Zm6.75.062V4.25c0 .138.112.25.25.25h2.688l-.011-.013-2.914-2.914-.013-.011Z"></path></svg><div class="overflow-hidden"><div class="react-directory-filename-cell"><div class="react-directory-truncate"><a title=".babelrc" aria-label=".babelrc, (File)" class="Link--primary" href="/gocode1702/headless-gatsby-multilang/blob/main/.babelrc">.babelrc</a></div></div></div></div></td><td class="react-directory-row-name-cell-large-screen" colSpan="1"><div class="react-directory-filename-column"><svg aria-hidden="true" focusable="false" class="color-fg-muted" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" style="display:inline-block;user-select:none;vertical-align:text-bottom;overflow:visible"><path d="M2 1.75C2 .784 2.784 0 3.75 0h6.586c.464 0 .909.184 1.237.513l2.914 2.914c.329.328.513.773.513 1.237v9.586A1.75 1.75 0 0 1 13.25 16h-9.5A1.75 1.75 0 0 1 2 14.25Zm1.75-.25a.25.25 0 0 0-.25.25v12.5c0 .138.112.25.25.25h9.5a.25.25 0 0 0 .25-.25V6h-2.75A1.75 1.75 0 0 1 9 4.25V1.5Zm6.75.062V4.25c0 .138.112.25.25.25h2.688l-.011-.013-2.914-2.914-.013-.011Z"></path></svg><div class="overflow-hidden"><div class="react-directory-filename-cell"><div class="react-directory-truncate"><a title=".babelrc" aria-label=".babelrc, (File)" class="Link--primary" href="/gocode1702/headless-gatsby-multilang/blob/main/.babelrc">.babelrc</a></div></div></div></div></td><td class="react-directory-row-commit-cell"><div class="Skeleton Skeleton--text"> </div></td><td><div class="Skeleton Skeleton--text"> </div></td></tr><tr class="react-directory-row undefined" id="folder-row-2"><td class="react-directory-row-name-cell-small-screen" colSpan="2"><div class="react-directory-filename-column"><svg aria-hidden="true" focusable="false" class="color-fg-muted" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" style="display:inline-block;user-select:none;vertical-align:text-bottom;overflow:visible"><path d="M2 1.75C2 .784 2.784 0 3.75 0h6.586c.464 0 .909.184 1.237.513l2.914 2.914c.329.328.513.773.513 1.237v9.586A1.75 1.75 0 0 1 13.25 16h-9.5A1.75 1.75 0 0 1 2 14.25Zm1.75-.25a.25.25 0 0 0-.25.25v12.5c0 .138.112.25.25.25h9.5a.25.25 0 0 0 .25-.25V6h-2.75A1.75 1.75 0 0 1 9 4.25V1.5Zm6.75.062V4.25c0 .138.112.25.25.25h2.688l-.011-.013-2.914-2.914-.013-.011Z"></path></svg><div class="overflow-hidden"><div class="react-directory-filename-cell"><div class="react-directory-truncate"><a title=".eslintrc" aria-label=".eslintrc, (File)" class="Link--primary" href="/gocode1702/headless-gatsby-multilang/blob/main/.eslintrc">.eslintrc</a></div></div></div></div></td><td class="react-directory-row-name-cell-large-screen" colSpan="1"><div class="react-directory-filename-column"><svg aria-hidden="true" focusable="false" class="color-fg-muted" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" style="display:inline-block;user-select:none;vertical-align:text-bottom;overflow:visible"><path d="M2 1.75C2 .784 2.784 0 3.75 0h6.586c.464 0 .909.184 1.237.513l2.914 2.914c.329.328.513.773.513 1.237v9.586A1.75 1.75 0 0 1 13.25 16h-9.5A1.75 1.75 0 0 1 2 14.25Zm1.75-.25a.25.25 0 0 0-.25.25v12.5c0 .138.112.25.25.25h9.5a.25.25 0 0 0 .25-.25V6h-2.75A1.75 1.75 0 0 1 9 4.25V1.5Zm6.75.062V4.25c0 .138.112.25.25.25h2.688l-.011-.013-2.914-2.914-.013-.011Z"></path></svg><div class="overflow-hidden"><div class="react-directory-filename-cell"><div class="react-directory-truncate"><a title=".eslintrc" aria-label=".eslintrc, (File)" class="Link--primary" href="/gocode1702/headless-gatsby-multilang/blob/main/.eslintrc">.eslintrc</a></div></div></div></div></td><td class="react-directory-row-commit-cell"><div class="Skeleton Skeleton--text"> </div></td><td><div class="Skeleton Skeleton--text"> </div></td></tr><tr class="react-directory-row undefined" id="folder-row-3"><td class="react-directory-row-name-cell-small-screen" colSpan="2"><div class="react-directory-filename-column"><svg aria-hidden="true" focusable="false" class="color-fg-muted" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" style="display:inline-block;user-select:none;vertical-align:text-bottom;overflow:visible"><path d="M2 1.75C2 .784 2.784 0 3.75 0h6.586c.464 0 .909.184 1.237.513l2.914 2.914c.329.328.513.773.513 1.237v9.586A1.75 1.75 0 0 1 13.25 16h-9.5A1.75 1.75 0 0 1 2 14.25Zm1.75-.25a.25.25 0 0 0-.25.25v12.5c0 .138.112.25.25.25h9.5a.25.25 0 0 0 .25-.25V6h-2.75A1.75 1.75 0 0 1 9 4.25V1.5Zm6.75.062V4.25c0 .138.112.25.25.25h2.688l-.011-.013-2.914-2.914-.013-.011Z"></path></svg><div class="overflow-hidden"><div class="react-directory-filename-cell"><div class="react-directory-truncate"><a title=".gitignore" aria-label=".gitignore, (File)" class="Link--primary" href="/gocode1702/headless-gatsby-multilang/blob/main/.gitignore">.gitignore</a></div></div></div></div></td><td class="react-directory-row-name-cell-large-screen" colSpan="1"><div class="react-directory-filename-column"><svg aria-hidden="true" focusable="false" class="color-fg-muted" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" style="display:inline-block;user-select:none;vertical-align:text-bottom;overflow:visible"><path d="M2 1.75C2 .784 2.784 0 3.75 0h6.586c.464 0 .909.184 1.237.513l2.914 2.914c.329.328.513.773.513 1.237v9.586A1.75 1.75 0 0 1 13.25 16h-9.5A1.75 1.75 0 0 1 2 14.25Zm1.75-.25a.25.25 0 0 0-.25.25v12.5c0 .138.112.25.25.25h9.5a.25.25 0 0 0 .25-.25V6h-2.75A1.75 1.75 0 0 1 9 4.25V1.5Zm6.75.062V4.25c0 .138.112.25.25.25h2.688l-.011-.013-2.914-2.914-.013-.011Z"></path></svg><div class="overflow-hidden"><div class="react-directory-filename-cell"><div class="react-directory-truncate"><a title=".gitignore" aria-label=".gitignore, (File)" class="Link--primary" href="/gocode1702/headless-gatsby-multilang/blob/main/.gitignore">.gitignore</a></div></div></div></div></td><td class="react-directory-row-commit-cell"><div class="Skeleton Skeleton--text"> </div></td><td><div class="Skeleton Skeleton--text"> </div></td></tr><tr class="react-directory-row undefined" id="folder-row-4"><td class="react-directory-row-name-cell-small-screen" colSpan="2"><div class="react-directory-filename-column"><svg aria-hidden="true" focusable="false" class="color-fg-muted" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" style="display:inline-block;user-select:none;vertical-align:text-bottom;overflow:visible"><path d="M2 1.75C2 .784 2.784 0 3.75 0h6.586c.464 0 .909.184 1.237.513l2.914 2.914c.329.328.513.773.513 1.237v9.586A1.75 1.75 0 0 1 13.25 16h-9.5A1.75 1.75 0 0 1 2 14.25Zm1.75-.25a.25.25 0 0 0-.25.25v12.5c0 .138.112.25.25.25h9.5a.25.25 0 0 0 .25-.25V6h-2.75A1.75 1.75 0 0 1 9 4.25V1.5Zm6.75.062V4.25c0 .138.112.25.25.25h2.688l-.011-.013-2.914-2.914-.013-.011Z"></path></svg><div class="overflow-hidden"><div class="react-directory-filename-cell"><div class="react-directory-truncate"><a title=".npmrc" aria-label=".npmrc, (File)" class="Link--primary" href="/gocode1702/headless-gatsby-multilang/blob/main/.npmrc">.npmrc</a></div></div></div></div></td><td class="react-directory-row-name-cell-large-screen" colSpan="1"><div class="react-directory-filename-column"><svg aria-hidden="true" focusable="false" class="color-fg-muted" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" style="display:inline-block;user-select:none;vertical-align:text-bottom;overflow:visible"><path d="M2 1.75C2 .784 2.784 0 3.75 0h6.586c.464 0 .909.184 1.237.513l2.914 2.914c.329.328.513.773.513 1.237v9.586A1.75 1.75 0 0 1 13.25 16h-9.5A1.75 1.75 0 0 1 2 14.25Zm1.75-.25a.25.25 0 0 0-.25.25v12.5c0 .138.112.25.25.25h9.5a.25.25 0 0 0 .25-.25V6h-2.75A1.75 1.75 0 0 1 9 4.25V1.5Zm6.75.062V4.25c0 .138.112.25.25.25h2.688l-.011-.013-2.914-2.914-.013-.011Z"></path></svg><div class="overflow-hidden"><div class="react-directory-filename-cell"><div class="react-directory-truncate"><a title=".npmrc" aria-label=".npmrc, (File)" class="Link--primary" href="/gocode1702/headless-gatsby-multilang/blob/main/.npmrc">.npmrc</a></div></div></div></div></td><td class="react-directory-row-commit-cell"><div class="Skeleton Skeleton--text"> </div></td><td><div class="Skeleton Skeleton--text"> </div></td></tr><tr class="react-directory-row undefined" id="folder-row-5"><td class="react-directory-row-name-cell-small-screen" colSpan="2"><div class="react-directory-filename-column"><svg aria-hidden="true" focusable="false" class="color-fg-muted" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" style="display:inline-block;user-select:none;vertical-align:text-bottom;overflow:visible"><path d="M2 1.75C2 .784 2.784 0 3.75 0h6.586c.464 0 .909.184 1.237.513l2.914 2.914c.329.328.513.773.513 1.237v9.586A1.75 1.75 0 0 1 13.25 16h-9.5A1.75 1.75 0 0 1 2 14.25Zm1.75-.25a.25.25 0 0 0-.25.25v12.5c0 .138.112.25.25.25h9.5a.25.25 0 0 0 .25-.25V6h-2.75A1.75 1.75 0 0 1 9 4.25V1.5Zm6.75.062V4.25c0 .138.112.25.25.25h2.688l-.011-.013-2.914-2.914-.013-.011Z"></path></svg><div class="overflow-hidden"><div class="react-directory-filename-cell"><div class="react-directory-truncate"><a title=".prettierrc" aria-label=".prettierrc, (File)" class="Link--primary" href="/gocode1702/headless-gatsby-multilang/blob/main/.prettierrc">.prettierrc</a></div></div></div></div></td><td class="react-directory-row-name-cell-large-screen" colSpan="1"><div class="react-directory-filename-column"><svg aria-hidden="true" focusable="false" class="color-fg-muted" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" style="display:inline-block;user-select:none;vertical-align:text-bottom;overflow:visible"><path d="M2 1.75C2 .784 2.784 0 3.75 0h6.586c.464 0 .909.184 1.237.513l2.914 2.914c.329.328.513.773.513 1.237v9.586A1.75 1.75 0 0 1 13.25 16h-9.5A1.75 1.75 0 0 1 2 14.25Zm1.75-.25a.25.25 0 0 0-.25.25v12.5c0 .138.112.25.25.25h9.5a.25.25 0 0 0 .25-.25V6h-2.75A1.75 1.75 0 0 1 9 4.25V1.5Zm6.75.062V4.25c0 .138.112.25.25.25h2.688l-.011-.013-2.914-2.914-.013-.011Z"></path></svg><div class="overflow-hidden"><div class="react-directory-filename-cell"><div class="react-directory-truncate"><a title=".prettierrc" aria-label=".prettierrc, (File)" class="Link--primary" href="/gocode1702/headless-gatsby-multilang/blob/main/.prettierrc">.prettierrc</a></div></div></div></div></td><td class="react-directory-row-commit-cell"><div class="Skeleton Skeleton--text"> </div></td><td><div class="Skeleton Skeleton--text"> </div></td></tr><tr class="react-directory-row undefined" id="folder-row-6"><td class="react-directory-row-name-cell-small-screen" colSpan="2"><div class="react-directory-filename-column"><svg aria-hidden="true" focusable="false" class="color-fg-muted" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" style="display:inline-block;user-select:none;vertical-align:text-bottom;overflow:visible"><path d="M2 1.75C2 .784 2.784 0 3.75 0h6.586c.464 0 .909.184 1.237.513l2.914 2.914c.329.328.513.773.513 1.237v9.586A1.75 1.75 0 0 1 13.25 16h-9.5A1.75 1.75 0 0 1 2 14.25Zm1.75-.25a.25.25 0 0 0-.25.25v12.5c0 .138.112.25.25.25h9.5a.25.25 0 0 0 .25-.25V6h-2.75A1.75 1.75 0 0 1 9 4.25V1.5Zm6.75.062V4.25c0 .138.112.25.25.25h2.688l-.011-.013-2.914-2.914-.013-.011Z"></path></svg><div class="overflow-hidden"><div class="react-directory-filename-cell"><div class="react-directory-truncate"><a title="LICENSE" aria-label="LICENSE, (File)" class="Link--primary" href="/gocode1702/headless-gatsby-multilang/blob/main/LICENSE">LICENSE</a></div></div></div></div></td><td class="react-directory-row-name-cell-large-screen" colSpan="1"><div class="react-directory-filename-column"><svg aria-hidden="true" focusable="false" class="color-fg-muted" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" style="display:inline-block;user-select:none;vertical-align:text-bottom;overflow:visible"><path d="M2 1.75C2 .784 2.784 0 3.75 0h6.586c.464 0 .909.184 1.237.513l2.914 2.914c.329.328.513.773.513 1.237v9.586A1.75 1.75 0 0 1 13.25 16h-9.5A1.75 1.75 0 0 1 2 14.25Zm1.75-.25a.25.25 0 0 0-.25.25v12.5c0 .138.112.25.25.25h9.5a.25.25 0 0 0 .25-.25V6h-2.75A1.75 1.75 0 0 1 9 4.25V1.5Zm6.75.062V4.25c0 .138.112.25.25.25h2.688l-.011-.013-2.914-2.914-.013-.011Z"></path></svg><div class="overflow-hidden"><div class="react-directory-filename-cell"><div class="react-directory-truncate"><a title="LICENSE" aria-label="LICENSE, (File)" class="Link--primary" href="/gocode1702/headless-gatsby-multilang/blob/main/LICENSE">LICENSE</a></div></div></div></div></td><td class="react-directory-row-commit-cell"><div class="Skeleton Skeleton--text"> </div></td><td><div class="Skeleton Skeleton--text"> </div></td></tr><tr class="react-directory-row undefined" id="folder-row-7"><td class="react-directory-row-name-cell-small-screen" colSpan="2"><div class="react-directory-filename-column"><svg aria-hidden="true" focusable="false" class="color-fg-muted" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" style="display:inline-block;user-select:none;vertical-align:text-bottom;overflow:visible"><path d="M2 1.75C2 .784 2.784 0 3.75 0h6.586c.464 0 .909.184 1.237.513l2.914 2.914c.329.328.513.773.513 1.237v9.586A1.75 1.75 0 0 1 13.25 16h-9.5A1.75 1.75 0 0 1 2 14.25Zm1.75-.25a.25.25 0 0 0-.25.25v12.5c0 .138.112.25.25.25h9.5a.25.25 0 0 0 .25-.25V6h-2.75A1.75 1.75 0 0 1 9 4.25V1.5Zm6.75.062V4.25c0 .138.112.25.25.25h2.688l-.011-.013-2.914-2.914-.013-.011Z"></path></svg><div class="overflow-hidden"><div class="react-directory-filename-cell"><div class="react-directory-truncate"><a title="README.md" aria-label="README.md, (File)" class="Link--primary" href="/gocode1702/headless-gatsby-multilang/blob/main/README.md">README.md</a></div></div></div></div></td><td class="react-directory-row-name-cell-large-screen" colSpan="1"><div class="react-directory-filename-column"><svg aria-hidden="true" focusable="false" class="color-fg-muted" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" style="display:inline-block;user-select:none;vertical-align:text-bottom;overflow:visible"><path d="M2 1.75C2 .784 2.784 0 3.75 0h6.586c.464 0 .909.184 1.237.513l2.914 2.914c.329.328.513.773.513 1.237v9.586A1.75 1.75 0 0 1 13.25 16h-9.5A1.75 1.75 0 0 1 2 14.25Zm1.75-.25a.25.25 0 0 0-.25.25v12.5c0 .138.112.25.25.25h9.5a.25.25 0 0 0 .25-.25V6h-2.75A1.75 1.75 0 0 1 9 4.25V1.5Zm6.75.062V4.25c0 .138.112.25.25.25h2.688l-.011-.013-2.914-2.914-.013-.011Z"></path></svg><div class="overflow-hidden"><div class="react-directory-filename-cell"><div class="react-directory-truncate"><a title="README.md" aria-label="README.md, (File)" class="Link--primary" href="/gocode1702/headless-gatsby-multilang/blob/main/README.md">README.md</a></div></div></div></div></td><td class="react-directory-row-commit-cell"><div class="Skeleton Skeleton--text"> </div></td><td><div class="Skeleton Skeleton--text"> </div></td></tr><tr class="react-directory-row undefined" id="folder-row-8"><td class="react-directory-row-name-cell-small-screen" colSpan="2"><div class="react-directory-filename-column"><svg aria-hidden="true" focusable="false" class="color-fg-muted" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" style="display:inline-block;user-select:none;vertical-align:text-bottom;overflow:visible"><path d="M2 1.75C2 .784 2.784 0 3.75 0h6.586c.464 0 .909.184 1.237.513l2.914 2.914c.329.328.513.773.513 1.237v9.586A1.75 1.75 0 0 1 13.25 16h-9.5A1.75 1.75 0 0 1 2 14.25Zm1.75-.25a.25.25 0 0 0-.25.25v12.5c0 .138.112.25.25.25h9.5a.25.25 0 0 0 .25-.25V6h-2.75A1.75 1.75 0 0 1 9 4.25V1.5Zm6.75.062V4.25c0 .138.112.25.25.25h2.688l-.011-.013-2.914-2.914-.013-.011Z"></path></svg><div class="overflow-hidden"><div class="react-directory-filename-cell"><div class="react-directory-truncate"><a title="gatsby-browser.jsx" aria-label="gatsby-browser.jsx, (File)" class="Link--primary" href="/gocode1702/headless-gatsby-multilang/blob/main/gatsby-browser.jsx">gatsby-browser.jsx</a></div></div></div></div></td><td class="react-directory-row-name-cell-large-screen" colSpan="1"><div class="react-directory-filename-column"><svg aria-hidden="true" focusable="false" class="color-fg-muted" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" style="display:inline-block;user-select:none;vertical-align:text-bottom;overflow:visible"><path d="M2 1.75C2 .784 2.784 0 3.75 0h6.586c.464 0 .909.184 1.237.513l2.914 2.914c.329.328.513.773.513 1.237v9.586A1.75 1.75 0 0 1 13.25 16h-9.5A1.75 1.75 0 0 1 2 14.25Zm1.75-.25a.25.25 0 0 0-.25.25v12.5c0 .138.112.25.25.25h9.5a.25.25 0 0 0 .25-.25V6h-2.75A1.75 1.75 0 0 1 9 4.25V1.5Zm6.75.062V4.25c0 .138.112.25.25.25h2.688l-.011-.013-2.914-2.914-.013-.011Z"></path></svg><div class="overflow-hidden"><div class="react-directory-filename-cell"><div class="react-directory-truncate"><a title="gatsby-browser.jsx" aria-label="gatsby-browser.jsx, (File)" class="Link--primary" href="/gocode1702/headless-gatsby-multilang/blob/main/gatsby-browser.jsx">gatsby-browser.jsx</a></div></div></div></div></td><td class="react-directory-row-commit-cell"><div class="Skeleton Skeleton--text"> </div></td><td><div class="Skeleton Skeleton--text"> </div></td></tr><tr class="react-directory-row undefined" id="folder-row-9"><td class="react-directory-row-name-cell-small-screen" colSpan="2"><div class="react-directory-filename-column"><svg aria-hidden="true" focusable="false" class="color-fg-muted" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" style="display:inline-block;user-select:none;vertical-align:text-bottom;overflow:visible"><path d="M2 1.75C2 .784 2.784 0 3.75 0h6.586c.464 0 .909.184 1.237.513l2.914 2.914c.329.328.513.773.513 1.237v9.586A1.75 1.75 0 0 1 13.25 16h-9.5A1.75 1.75 0 0 1 2 14.25Zm1.75-.25a.25.25 0 0 0-.25.25v12.5c0 .138.112.25.25.25h9.5a.25.25 0 0 0 .25-.25V6h-2.75A1.75 1.75 0 0 1 9 4.25V1.5Zm6.75.062V4.25c0 .138.112.25.25.25h2.688l-.011-.013-2.914-2.914-.013-.011Z"></path></svg><div class="overflow-hidden"><div class="react-directory-filename-cell"><div class="react-directory-truncate"><a title="gatsby-config.js" aria-label="gatsby-config.js, (File)" class="Link--primary" href="/gocode1702/headless-gatsby-multilang/blob/main/gatsby-config.js">gatsby-config.js</a></div></div></div></div></td><td class="react-directory-row-name-cell-large-screen" colSpan="1"><div class="react-directory-filename-column"><svg aria-hidden="true" focusable="false" class="color-fg-muted" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" style="display:inline-block;user-select:none;vertical-align:text-bottom;overflow:visible"><path d="M2 1.75C2 .784 2.784 0 3.75 0h6.586c.464 0 .909.184 1.237.513l2.914 2.914c.329.328.513.773.513 1.237v9.586A1.75 1.75 0 0 1 13.25 16h-9.5A1.75 1.75 0 0 1 2 14.25Zm1.75-.25a.25.25 0 0 0-.25.25v12.5c0 .138.112.25.25.25h9.5a.25.25 0 0 0 .25-.25V6h-2.75A1.75 1.75 0 0 1 9 4.25V1.5Zm6.75.062V4.25c0 .138.112.25.25.25h2.688l-.011-.013-2.914-2.914-.013-.011Z"></path></svg><div class="overflow-hidden"><div class="react-directory-filename-cell"><div class="react-directory-truncate"><a title="gatsby-config.js" aria-label="gatsby-config.js, (File)" class="Link--primary" href="/gocode1702/headless-gatsby-multilang/blob/main/gatsby-config.js">gatsby-config.js</a></div></div></div></div></td><td class="react-directory-row-commit-cell"><div class="Skeleton Skeleton--text"> </div></td><td><div class="Skeleton Skeleton--text"> </div></td></tr><tr class="react-directory-row truncate-for-mobile" id="folder-row-10"><td class="react-directory-row-name-cell-small-screen" colSpan="2"><div class="react-directory-filename-column"><svg aria-hidden="true" focusable="false" class="color-fg-muted" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" style="display:inline-block;user-select:none;vertical-align:text-bottom;overflow:visible"><path d="M2 1.75C2 .784 2.784 0 3.75 0h6.586c.464 0 .909.184 1.237.513l2.914 2.914c.329.328.513.773.513 1.237v9.586A1.75 1.75 0 0 1 13.25 16h-9.5A1.75 1.75 0 0 1 2 14.25Zm1.75-.25a.25.25 0 0 0-.25.25v12.5c0 .138.112.25.25.25h9.5a.25.25 0 0 0 .25-.25V6h-2.75A1.75 1.75 0 0 1 9 4.25V1.5Zm6.75.062V4.25c0 .138.112.25.25.25h2.688l-.011-.013-2.914-2.914-.013-.011Z"></path></svg><div class="overflow-hidden"><div class="react-directory-filename-cell"><div class="react-directory-truncate"><a title="gatsby-node.js" aria-label="gatsby-node.js, (File)" class="Link--primary" href="/gocode1702/headless-gatsby-multilang/blob/main/gatsby-node.js">gatsby-node.js</a></div></div></div></div></td><td class="react-directory-row-name-cell-large-screen" colSpan="1"><div class="react-directory-filename-column"><svg aria-hidden="true" focusable="false" class="color-fg-muted" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" style="display:inline-block;user-select:none;vertical-align:text-bottom;overflow:visible"><path d="M2 1.75C2 .784 2.784 0 3.75 0h6.586c.464 0 .909.184 1.237.513l2.914 2.914c.329.328.513.773.513 1.237v9.586A1.75 1.75 0 0 1 13.25 16h-9.5A1.75 1.75 0 0 1 2 14.25Zm1.75-.25a.25.25 0 0 0-.25.25v12.5c0 .138.112.25.25.25h9.5a.25.25 0 0 0 .25-.25V6h-2.75A1.75 1.75 0 0 1 9 4.25V1.5Zm6.75.062V4.25c0 .138.112.25.25.25h2.688l-.011-.013-2.914-2.914-.013-.011Z"></path></svg><div class="overflow-hidden"><div class="react-directory-filename-cell"><div class="react-directory-truncate"><a title="gatsby-node.js" aria-label="gatsby-node.js, (File)" class="Link--primary" href="/gocode1702/headless-gatsby-multilang/blob/main/gatsby-node.js">gatsby-node.js</a></div></div></div></div></td><td class="react-directory-row-commit-cell"><div class="Skeleton Skeleton--text"> </div></td><td><div class="Skeleton Skeleton--text"> </div></td></tr><tr class="react-directory-row truncate-for-mobile" id="folder-row-11"><td class="react-directory-row-name-cell-small-screen" colSpan="2"><div class="react-directory-filename-column"><svg aria-hidden="true" focusable="false" class="color-fg-muted" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" style="display:inline-block;user-select:none;vertical-align:text-bottom;overflow:visible"><path d="M2 1.75C2 .784 2.784 0 3.75 0h6.586c.464 0 .909.184 1.237.513l2.914 2.914c.329.328.513.773.513 1.237v9.586A1.75 1.75 0 0 1 13.25 16h-9.5A1.75 1.75 0 0 1 2 14.25Zm1.75-.25a.25.25 0 0 0-.25.25v12.5c0 .138.112.25.25.25h9.5a.25.25 0 0 0 .25-.25V6h-2.75A1.75 1.75 0 0 1 9 4.25V1.5Zm6.75.062V4.25c0 .138.112.25.25.25h2.688l-.011-.013-2.914-2.914-.013-.011Z"></path></svg><div class="overflow-hidden"><div class="react-directory-filename-cell"><div class="react-directory-truncate"><a title="gatsby-ssr.jsx" aria-label="gatsby-ssr.jsx, (File)" class="Link--primary" href="/gocode1702/headless-gatsby-multilang/blob/main/gatsby-ssr.jsx">gatsby-ssr.jsx</a></div></div></div></div></td><td class="react-directory-row-name-cell-large-screen" colSpan="1"><div class="react-directory-filename-column"><svg aria-hidden="true" focusable="false" class="color-fg-muted" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" style="display:inline-block;user-select:none;vertical-align:text-bottom;overflow:visible"><path d="M2 1.75C2 .784 2.784 0 3.75 0h6.586c.464 0 .909.184 1.237.513l2.914 2.914c.329.328.513.773.513 1.237v9.586A1.75 1.75 0 0 1 13.25 16h-9.5A1.75 1.75 0 0 1 2 14.25Zm1.75-.25a.25.25 0 0 0-.25.25v12.5c0 .138.112.25.25.25h9.5a.25.25 0 0 0 .25-.25V6h-2.75A1.75 1.75 0 0 1 9 4.25V1.5Zm6.75.062V4.25c0 .138.112.25.25.25h2.688l-.011-.013-2.914-2.914-.013-.011Z"></path></svg><div class="overflow-hidden"><div class="react-directory-filename-cell"><div class="react-directory-truncate"><a title="gatsby-ssr.jsx" aria-label="gatsby-ssr.jsx, (File)" class="Link--primary" href="/gocode1702/headless-gatsby-multilang/blob/main/gatsby-ssr.jsx">gatsby-ssr.jsx</a></div></div></div></div></td><td class="react-directory-row-commit-cell"><div class="Skeleton Skeleton--text"> </div></td><td><div class="Skeleton Skeleton--text"> </div></td></tr><tr class="react-directory-row truncate-for-mobile" id="folder-row-12"><td class="react-directory-row-name-cell-small-screen" colSpan="2"><div class="react-directory-filename-column"><svg aria-hidden="true" focusable="false" class="color-fg-muted" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" style="display:inline-block;user-select:none;vertical-align:text-bottom;overflow:visible"><path d="M2 1.75C2 .784 2.784 0 3.75 0h6.586c.464 0 .909.184 1.237.513l2.914 2.914c.329.328.513.773.513 1.237v9.586A1.75 1.75 0 0 1 13.25 16h-9.5A1.75 1.75 0 0 1 2 14.25Zm1.75-.25a.25.25 0 0 0-.25.25v12.5c0 .138.112.25.25.25h9.5a.25.25 0 0 0 .25-.25V6h-2.75A1.75 1.75 0 0 1 9 4.25V1.5Zm6.75.062V4.25c0 .138.112.25.25.25h2.688l-.011-.013-2.914-2.914-.013-.011Z"></path></svg><div class="overflow-hidden"><div class="react-directory-filename-cell"><div class="react-directory-truncate"><a title="jest.config.js" aria-label="jest.config.js, (File)" class="Link--primary" href="/gocode1702/headless-gatsby-multilang/blob/main/jest.config.js">jest.config.js</a></div></div></div></div></td><td class="react-directory-row-name-cell-large-screen" colSpan="1"><div class="react-directory-filename-column"><svg aria-hidden="true" focusable="false" class="color-fg-muted" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" style="display:inline-block;user-select:none;vertical-align:text-bottom;overflow:visible"><path d="M2 1.75C2 .784 2.784 0 3.75 0h6.586c.464 0 .909.184 1.237.513l2.914 2.914c.329.328.513.773.513 1.237v9.586A1.75 1.75 0 0 1 13.25 16h-9.5A1.75 1.75 0 0 1 2 14.25Zm1.75-.25a.25.25 0 0 0-.25.25v12.5c0 .138.112.25.25.25h9.5a.25.25 0 0 0 .25-.25V6h-2.75A1.75 1.75 0 0 1 9 4.25V1.5Zm6.75.062V4.25c0 .138.112.25.25.25h2.688l-.011-.013-2.914-2.914-.013-.011Z"></path></svg><div class="overflow-hidden"><div class="react-directory-filename-cell"><div class="react-directory-truncate"><a title="jest.config.js" aria-label="jest.config.js, (File)" class="Link--primary" href="/gocode1702/headless-gatsby-multilang/blob/main/jest.config.js">jest.config.js</a></div></div></div></div></td><td class="react-directory-row-commit-cell"><div class="Skeleton Skeleton--text"> </div></td><td><div class="Skeleton Skeleton--text"> </div></td></tr><tr class="react-directory-row truncate-for-mobile" id="folder-row-13"><td class="react-directory-row-name-cell-small-screen" colSpan="2"><div class="react-directory-filename-column"><svg aria-hidden="true" focusable="false" class="color-fg-muted" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" style="display:inline-block;user-select:none;vertical-align:text-bottom;overflow:visible"><path d="M2 1.75C2 .784 2.784 0 3.75 0h6.586c.464 0 .909.184 1.237.513l2.914 2.914c.329.328.513.773.513 1.237v9.586A1.75 1.75 0 0 1 13.25 16h-9.5A1.75 1.75 0 0 1 2 14.25Zm1.75-.25a.25.25 0 0 0-.25.25v12.5c0 .138.112.25.25.25h9.5a.25.25 0 0 0 .25-.25V6h-2.75A1.75 1.75 0 0 1 9 4.25V1.5Zm6.75.062V4.25c0 .138.112.25.25.25h2.688l-.011-.013-2.914-2.914-.013-.011Z"></path></svg><div class="overflow-hidden"><div class="react-directory-filename-cell"><div class="react-directory-truncate"><a title="jestPreprocess.js" aria-label="jestPreprocess.js, (File)" class="Link--primary" href="/gocode1702/headless-gatsby-multilang/blob/main/jestPreprocess.js">jestPreprocess.js</a></div></div></div></div></td><td class="react-directory-row-name-cell-large-screen" colSpan="1"><div class="react-directory-filename-column"><svg aria-hidden="true" focusable="false" class="color-fg-muted" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" style="display:inline-block;user-select:none;vertical-align:text-bottom;overflow:visible"><path d="M2 1.75C2 .784 2.784 0 3.75 0h6.586c.464 0 .909.184 1.237.513l2.914 2.914c.329.328.513.773.513 1.237v9.586A1.75 1.75 0 0 1 13.25 16h-9.5A1.75 1.75 0 0 1 2 14.25Zm1.75-.25a.25.25 0 0 0-.25.25v12.5c0 .138.112.25.25.25h9.5a.25.25 0 0 0 .25-.25V6h-2.75A1.75 1.75 0 0 1 9 4.25V1.5Zm6.75.062V4.25c0 .138.112.25.25.25h2.688l-.011-.013-2.914-2.914-.013-.011Z"></path></svg><div class="overflow-hidden"><div class="react-directory-filename-cell"><div class="react-directory-truncate"><a title="jestPreprocess.js" aria-label="jestPreprocess.js, (File)" class="Link--primary" href="/gocode1702/headless-gatsby-multilang/blob/main/jestPreprocess.js">jestPreprocess.js</a></div></div></div></div></td><td class="react-directory-row-commit-cell"><div class="Skeleton Skeleton--text"> </div></td><td><div class="Skeleton Skeleton--text"> </div></td></tr><tr class="react-directory-row truncate-for-mobile" id="folder-row-14"><td class="react-directory-row-name-cell-small-screen" colSpan="2"><div class="react-directory-filename-column"><svg aria-hidden="true" focusable="false" class="color-fg-muted" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" style="display:inline-block;user-select:none;vertical-align:text-bottom;overflow:visible"><path d="M2 1.75C2 .784 2.784 0 3.75 0h6.586c.464 0 .909.184 1.237.513l2.914 2.914c.329.328.513.773.513 1.237v9.586A1.75 1.75 0 0 1 13.25 16h-9.5A1.75 1.75 0 0 1 2 14.25Zm1.75-.25a.25.25 0 0 0-.25.25v12.5c0 .138.112.25.25.25h9.5a.25.25 0 0 0 .25-.25V6h-2.75A1.75 1.75 0 0 1 9 4.25V1.5Zm6.75.062V4.25c0 .138.112.25.25.25h2.688l-.011-.013-2.914-2.914-.013-.011Z"></path></svg><div class="overflow-hidden"><div class="react-directory-filename-cell"><div class="react-directory-truncate"><a title="package.json" aria-label="package.json, (File)" class="Link--primary" href="/gocode1702/headless-gatsby-multilang/blob/main/package.json">package.json</a></div></div></div></div></td><td class="react-directory-row-name-cell-large-screen" colSpan="1"><div class="react-directory-filename-column"><svg aria-hidden="true" focusable="false" class="color-fg-muted" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" style="display:inline-block;user-select:none;vertical-align:text-bottom;overflow:visible"><path d="M2 1.75C2 .784 2.784 0 3.75 0h6.586c.464 0 .909.184 1.237.513l2.914 2.914c.329.328.513.773.513 1.237v9.586A1.75 1.75 0 0 1 13.25 16h-9.5A1.75 1.75 0 0 1 2 14.25Zm1.75-.25a.25.25 0 0 0-.25.25v12.5c0 .138.112.25.25.25h9.5a.25.25 0 0 0 .25-.25V6h-2.75A1.75 1.75 0 0 1 9 4.25V1.5Zm6.75.062V4.25c0 .138.112.25.25.25h2.688l-.011-.013-2.914-2.914-.013-.011Z"></path></svg><div class="overflow-hidden"><div class="react-directory-filename-cell"><div class="react-directory-truncate"><a title="package.json" aria-label="package.json, (File)" class="Link--primary" href="/gocode1702/headless-gatsby-multilang/blob/main/package.json">package.json</a></div></div></div></div></td><td class="react-directory-row-commit-cell"><div class="Skeleton Skeleton--text"> </div></td><td><div class="Skeleton Skeleton--text"> </div></td></tr><tr class="Box-sc-g0xbh4-0 eNCcrz show-for-mobile" data-testid="view-all-files-row"><td colSpan="3" class="Box-sc-g0xbh4-0 bHTcCe"><div><button class="prc-Link-Link-85e08">View all files</button></div></td></tr></tbody></table></div><div class="Box-sc-g0xbh4-0 csrIcr"><div class="Box-sc-g0xbh4-0 bUQNHB"><div itemscope="" itemType="https://schema.org/abstract" class="Box-sc-g0xbh4-0 jPdcfu"><h2 class="_VisuallyHidden__VisuallyHidden-sc-11jhm7a-0 brGdpi">Repository files navigation</h2><nav aria-label="Repository files" class="UnderlineTabbedInterface__StyledUnderlineWrapper-sc-4ilrg0-0 iBVwpg"><ul role="list" class="UnderlineTabbedInterface__StyledUnderlineItemList-sc-4ilrg0-1 gJyWUl"><li class="Box-sc-g0xbh4-0 hUCRAk"><a href="#" aria-current="page" class="UnderlineTabbedInterface__StyledUnderlineItem-sc-4ilrg0-2 beOdPj"><span data-component="icon"><svg aria-hidden="true" focusable="false" class="octicon octicon-book" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" style="display:inline-block;user-select:none;vertical-align:text-bottom;overflow:visible"><path d="M0 1.75A.75.75 0 0 1 .75 1h4.253c1.227 0 2.317.59 3 1.501A3.743 3.743 0 0 1 11.006 1h4.245a.75.75 0 0 1 .75.75v10.5a.75.75 0 0 1-.75.75h-4.507a2.25 2.25 0 0 0-1.591.659l-.622.621a.75.75 0 0 1-1.06 0l-.622-.621A2.25 2.25 0 0 0 5.258 13H.75a.75.75 0 0 1-.75-.75Zm7.251 10.324.004-5.073-.002-2.253A2.25 2.25 0 0 0 5.003 2.5H1.5v9h3.757a3.75 3.75 0 0 1 1.994.574ZM8.755 4.75l-.004 7.322a3.752 3.752 0 0 1 1.992-.572H14.5v-9h-3.495a2.25 2.25 0 0 0-2.25 2.25Z"></path></svg></span><span data-component="text" data-content="README">README</span></a></li><li class="Box-sc-g0xbh4-0 hUCRAk"><a href="#" class="UnderlineTabbedInterface__StyledUnderlineItem-sc-4ilrg0-2 beOdPj"><span data-component="icon"><svg aria-hidden="true" focusable="false" class="octicon octicon-law" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" style="display:inline-block;user-select:none;vertical-align:text-bottom;overflow:visible"><path d="M8.75.75V2h.985c.304 0 .603.08.867.231l1.29.736c.038.022.08.033.124.033h2.234a.75.75 0 0 1 0 1.5h-.427l2.111 4.692a.75.75 0 0 1-.154.838l-.53-.53.529.531-.001.002-.002.002-.006.006-.006.005-.01.01-.045.04c-.21.176-.441.327-.686.45C14.556 10.78 13.88 11 13 11a4.498 4.498 0 0 1-2.023-.454 3.544 3.544 0 0 1-.686-.45l-.045-.04-.016-.015-.006-.006-.004-.004v-.001a.75.75 0 0 1-.154-.838L12.178 4.5h-.162c-.305 0-.604-.079-.868-.231l-1.29-.736a.245.245 0 0 0-.124-.033H8.75V13h2.5a.75.75 0 0 1 0 1.5h-6.5a.75.75 0 0 1 0-1.5h2.5V3.5h-.984a.245.245 0 0 0-.124.033l-1.289.737c-.265.15-.564.23-.869.23h-.162l2.112 4.692a.75.75 0 0 1-.154.838l-.53-.53.529.531-.001.002-.002.002-.006.006-.016.015-.045.04c-.21.176-.441.327-.686.45C4.556 10.78 3.88 11 3 11a4.498 4.498 0 0 1-2.023-.454 3.544 3.544 0 0 1-.686-.45l-.045-.04-.016-.015-.006-.006-.004-.004v-.001a.75.75 0 0 1-.154-.838L2.178 4.5H1.75a.75.75 0 0 1 0-1.5h2.234a.249.249 0 0 0 .125-.033l1.288-.737c.265-.15.564-.23.869-.23h.984V.75a.75.75 0 0 1 1.5 0Zm2.945 8.477c.285.135.718.273 1.305.273s1.02-.138 1.305-.273L13 6.327Zm-10 0c.285.135.718.273 1.305.273s1.02-.138 1.305-.273L3 6.327Z"></path></svg></span><span data-component="text" data-content="0BSD license">0BSD license</span></a></li></ul></nav><button style="--button-color:fg.subtle" type="button" aria-label="Outline" aria-haspopup="true" aria-expanded="false" tabindex="0" class="types__StyledButton-sc-ws60qy-0 gXPTqA" data-loading="false" data-size="medium" aria-describedby=":Rr9ab:-loading-announcement" id=":Rr9ab:"><svg aria-hidden="true" focusable="false" class="octicon octicon-list-unordered" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" style="display:inline-block;user-select:none;vertical-align:text-bottom;overflow:visible"><path d="M5.75 2.5h8.5a.75.75 0 0 1 0 1.5h-8.5a.75.75 0 0 1 0-1.5Zm0 5h8.5a.75.75 0 0 1 0 1.5h-8.5a.75.75 0 0 1 0-1.5Zm0 5h8.5a.75.75 0 0 1 0 1.5h-8.5a.75.75 0 0 1 0-1.5ZM2 14a1 1 0 1 1 0-2 1 1 0 0 1 0 2Zm1-6a1 1 0 1 1-2 0 1 1 0 0 1 2 0ZM2 4a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z"></path></svg></button></div><div class="Box-sc-g0xbh4-0 QkQOb js-snippet-clipboard-copy-unpositioned" data-hpc="true"><article class="markdown-body entry-content container-lg" itemprop="text"><p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://camo.githubusercontent.com/e682c3336422c6bd37745f5337c9771b05156d3fc50d39ddb0f9544b2372f4db/68747470733a2f2f692e6962622e636f2f5742746b3744422f726561646d652e706e67"><img src="https://camo.githubusercontent.com/e682c3336422c6bd37745f5337c9771b05156d3fc50d39ddb0f9544b2372f4db/68747470733a2f2f692e6962622e636f2f5742746b3744422f726561646d652e706e67" alt="" data-canonical-src="https://i.ibb.co/WBtk7DB/readme.png" style="max-width: 100%;"></a></p> <br> <div class="markdown-heading" dir="auto"><h1 tabindex="-1" class="heading-element" dir="auto">Headless Multilanguage Starter for Gatsby</h1><a id="user-content-headless-multilanguage-starter-for-gatsby" class="anchor" aria-label="Permalink: Headless Multilanguage Starter for Gatsby" href="#headless-multilanguage-starter-for-gatsby"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <p dir="auto">The most powerful multilanguage blog starter for Gatsby. Completely headless.</p> <p dir="auto"><a href="https://headlessmultilingual.gatsbyjs.io" rel="nofollow">Live Demo</a></p> <br> <div class="markdown-heading" dir="auto"><h1 tabindex="-1" class="heading-element" dir="auto">Features</h1><a id="user-content-features" class="anchor" aria-label="Permalink: Features" href="#features"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <ul dir="auto"> <li><strong>100% Headless</strong>: Define languages and translate pages, posts, slugs, SEO meta tags and PWA settings directly on DatoCMS.</li> <li>Language switcher component swapping between different slugs/paths per locale</li> <li>Automatic and easy internal links localization using custom Navigator component</li> <li>User preferred language detection and redirection</li> <li>Built-in support for RTL languages such as Arabic or Hebrew</li> <li>Per-locale PWA webmanifest files generation on build time, dynamically injected according to the page locale.</li> <li>Support for any language code path such as "/en-GB" or "/en"</li> <li>404 page displaying localized content according to the user preferred language</li> <li>Choose which post or category to translate (and generate) for each locale.</li> <li>Related posts, social sharing and synthax highlighting.</li> <li>Dark mode with CSS variables</li> <li>Built without any internationalization plugin, just Gatsby APIs.</li> </ul> <br> <div class="markdown-heading" dir="auto"><h1 tabindex="-1" class="heading-element" dir="auto">Lighthouse scores</h1><a id="user-content-lighthouse-scores" class="anchor" aria-label="Permalink: Lighthouse scores" href="#lighthouse-scores"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <markdown-accessiblity-table><table> <thead> <tr> <th>Performance</th> <th>Accessibility</th> <th>Best Pratices</th> <th>SEO</th> <th>PWA</th> </tr> </thead> <tbody> <tr> <td>98 ~ 100</td> <td>100</td> <td>100</td> <td>100</td> <td>8/9</td> </tr> </tbody> </table></markdown-accessiblity-table> <p dir="auto"><a href="https://googlechrome.github.io/lighthouse/viewer/?psiurl=https%3A%2F%2Fheadlessmultilingual.gatsbyjs.io%2F&strategy=mobile&category=performance&category=accessibility&category=best-practices&category=seo&category=pwa&utm_source=lh-chrome-ext" rel="nofollow">Run Lighthouse Test</a></p> <br> <div class="markdown-heading" dir="auto"><h1 tabindex="-1" class="heading-element" dir="auto">Table of contents</h1><a id="user-content-table-of-contents" class="anchor" aria-label="Permalink: Table of contents" href="#table-of-contents"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <ul dir="auto"> <li><a href="#important-notes">Important notes</a></li> <li><a href="#configuration">Configuration</a> <ul dir="auto"> <li><a href="#1-starter-installation">1. Starter installation</a></li> <li><a href="#2-environment-configuration">2. Environment configuration</a></li> <li><a href="#3-environment-testing">3. Environment testing</a></li> <li><a href="#4-understand-content-models-structure">4. Understand content models structure</a></li> <li><a href="#5-finalizing-starter-configuration">5. Finalizing starter configuration</a></li> </ul> </li> <li><a href="#managing-content">Managing content</a></li> <li><a href="#styling">Styling</a></li> <li><a href="#seo">SEO</a></li> <li><a href="#pwa">PWA</a></li> <li><a href="#redirect">Redirect</a></li> <li><a href="#404-page">404 page</a></li> <li><a href="#rtl-text-direction-support">RTL text direction support</a></li> <li><a href="#extending-the-starter">Extending the starter</a> <ul dir="auto"> <li><a href="#removing-fields">Removing fields</a></li> <li><a href="#removing-pages-and-templates">Removing pages and templates</a></li> <li><a href="#generating-pages">Generating pages</a></li> <li><a href="#creating-new-templates">Creating new templates</a></li> <li><a href="#internal-link-navigation">Internal link navigation</a></li> <li><a href="#template-design-strategy">Template design strategy</a></li> <li><a href="#accessing-languages">Accessing languages</a></li> <li><a href="#formatting-date-and-time">Formatting date and time</a></li> <li><a href="#increase-categories-number-displayed-by-the-dropdown">Increase categories number displayed by the dropdown</a></li> <li><a href="#seo-1">SEO</a></li> </ul> </li> <li><a href="#troubleshooting">Troubleshooting</a></li> <li><a href="#issues">Issues</a></li> </ul> <br> <div class="markdown-heading" dir="auto"><h1 tabindex="-1" class="heading-element" dir="auto">Why DatoCMS</h1><a id="user-content-why-datocms" class="anchor" aria-label="Permalink: Why DatoCMS" href="#why-datocms"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <p dir="auto">It is the most powerful headless CMS out there and also, the only one up to the job. You can define app languages directly in the project administration area and query them via GraphQL as well. Moreover, it has dozens of features that give your content editors superpowers.</p> <p dir="auto">Don't worry about the pricing or any other plan restriction, as long as your website will have less than 300 pages (for each locale 😊) you will never exceed the free developer plan. There are no limits on the locales you can configure in your project.</p> <p dir="auto">if you are not familiar with DatoCMS, the following links will be useful:</p> <ul dir="auto"> <li><a href="https://www.gatsbyjs.com/guides/datocms/" rel="nofollow">DatoCMS and Gatsby</a></li> <li><a href="https://www.datocms.com/docs/content-modelling/validations" rel="nofollow">Validations</a></li> <li><a href="https://www.datocms.com/docs/content-modelling/blocks" rel="nofollow">Blocks</a></li> <li><a href="https://www.datocms.com/docs/content-modelling/modular-content" rel="nofollow">Modular Content Fields</a></li> <li><a href="https://www.datocms.com/docs/content-modelling/structured-text" rel="nofollow">Structured Text</a></li> </ul> <p dir="auto">Also, you can enjoy instant previews on Gatsby Cloud, without any crazy futher configuration, just save the draft and preview the content.</p> <blockquote> <p dir="auto"><g-emoji class="g-emoji" alias="warning">⚠️</g-emoji> This project is not mantained by DatoCMS folks neither I am affiliated with them.</p> </blockquote> <br> <div class="markdown-heading" dir="auto"><h1 tabindex="-1" class="heading-element" dir="auto">Important notes</h1><a id="user-content-important-notes" class="anchor" aria-label="Permalink: Important notes" href="#important-notes"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <p dir="auto">This starter lets you completely focus on <strong>your content</strong> by taking care of all the rest.</p> <p dir="auto">If you landed on this repo and your goal is just to setup a multilanguage blog with the same content structure of this starter (articles, category pages and archive pages) all you have to do is to follow all the steps of the <a href="#configuration">configuration</a> section.</p> <p dir="auto">The 95% of the whole process is done directly on DatoCMS in a super-friendly environment.</p> <p dir="auto">Once new content is translated and published, your website will build accordingly and all the features will work out-of-the-box (page generation, language switcher, internal link navigation, SEO meta tags, PWA webmanifest, redirect, right-to-left text support...).</p> <p dir="auto">If you want to deeply customize it, like generating pages with different paths, you can visit the section <a href="#extending-the-starter">Extending the starter</a>.</p> <p dir="auto">In such case, knowledge of <a href="https://www.gatsbyjs.com/docs/how-to/querying-data/page-query/" rel="nofollow">GraphQL query variables</a> and <a href="https://www.gatsbyjs.com/docs/reference/config-files/gatsby-node/#createPages" rel="nofollow">Gatsby createPages API</a> is <strong>required</strong>.</p> <br> <div class="markdown-heading" dir="auto"><h1 tabindex="-1" class="heading-element" dir="auto">Configuration</h1><a id="user-content-configuration" class="anchor" aria-label="Permalink: Configuration" href="#configuration"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <div class="markdown-heading" dir="auto"><h2 tabindex="-1" class="heading-element" dir="auto">1. Starter installation</h2><a id="user-content-1-starter-installation" class="anchor" aria-label="Permalink: 1. Starter installation" href="#1-starter-installation"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <ol dir="auto"> <li>Install the starter with <a href="https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-cli/README.md">Gatsby CLI</a>:</li> </ol> <div class="highlight highlight-text-shell-session notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="gatsby new headless-gatsby-multilang https://github.com/smastrom/headless-gatsby-multilang.git"><pre><span class="pl-c1">gatsby new headless-gatsby-multilang https://github.com/smastrom/headless-gatsby-multilang.git</span></pre></div> <ol start="2" dir="auto"> <li> <p dir="auto">Log in to your DatoCMS account and click the button below: <br> <br> <a href="https://dashboard.datocms.com/clone?projectId=63095&name=Headless+Multilingual" rel="nofollow"><img src="https://camo.githubusercontent.com/b0362ceda39754e557723adbf90e9615546e259466c541bb438b963d1d51642c/68747470733a2f2f64617368626f6172642e6461746f636d732e636f6d2f636c6f6e652f627574746f6e2e737667" alt="Clone DatoCMS project" data-canonical-src="https://dashboard.datocms.com/clone/button.svg" style="max-width: 100%;"></a></p> </li> <li> <p dir="auto">In the cloned project administration area, grab the read-only API token and replace it in your gatsby-config.js file:</p> <div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="{ resolve: 'gatsby-source-datocms', options: { apiToken: 'YOUR_API_TOKEN', }, },"><pre><span class="pl-kos">{</span> <span class="pl-c1">resolve</span>: <span class="pl-s">'gatsby-source-datocms'</span><span class="pl-kos">,</span> <span class="pl-c1">options</span>: <span class="pl-kos">{</span> <span class="pl-c1">apiToken</span>: <span class="pl-s">'YOUR_API_TOKEN'</span><span class="pl-kos">,</span> <span class="pl-kos">}</span><span class="pl-kos">,</span> <span class="pl-kos">}</span><span class="pl-kos">,</span></pre></div> </li> <li> <p dir="auto">Initialize a new Git repo, commit and push all the files.</p> </li> <li> <p dir="auto">Sign-in to Gatsby Cloud, add a new site and connect with your Git repo:</p> </li> </ol> <p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://camo.githubusercontent.com/dfb96b2511befb50df9e774f2a29f443cc8d7c8bbfc2adcb56d06c7ce0518217/68747470733a2f2f692e6962622e636f2f477876447367382f53636865726d6174612d323032312d30392d32302d616c6c652d31312d34342d30392e706e67"><img src="https://camo.githubusercontent.com/dfb96b2511befb50df9e774f2a29f443cc8d7c8bbfc2adcb56d06c7ce0518217/68747470733a2f2f692e6962622e636f2f477876447367382f53636865726d6174612d323032312d30392d32302d616c6c652d31312d34342d30392e706e67" alt="Import to Gatsby Cloud" data-canonical-src="https://i.ibb.co/GxvDsg8/Schermata-2021-09-20-alle-11-44-09.png" style="max-width: 100%;"></a></p> <ol start="6" dir="auto"> <li>Connect your DatoCMS account to Gatsby Cloud and create the site.</li> </ol> <p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://camo.githubusercontent.com/19d923c23540c1cdac3a308ded1474eb50612af4594b61da27ba7e9494dee843/68747470733a2f2f692e6962622e636f2f624651546754732f53636865726d6174612d323032312d30392d32302d616c6c652d31312d35332d34332e706e67"><img src="https://camo.githubusercontent.com/19d923c23540c1cdac3a308ded1474eb50612af4594b61da27ba7e9494dee843/68747470733a2f2f692e6962622e636f2f624651546754732f53636865726d6174612d323032312d30392d32302d616c6c652d31312d35332d34332e706e67" alt="Connect DatoCMS" data-canonical-src="https://i.ibb.co/bFQTgTs/Schermata-2021-09-20-alle-11-53-43.png" style="max-width: 100%;"></a></p> <br> <div class="markdown-heading" dir="auto"><h2 tabindex="-1" class="heading-element" dir="auto">2. Environment configuration</h2><a id="user-content-2-environment-configuration" class="anchor" aria-label="Permalink: 2. Environment configuration" href="#2-environment-configuration"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <p dir="auto">Please make sure that the development server is not running before following these steps.</p> <div class="markdown-heading" dir="auto"><h3 tabindex="-1" class="heading-element" dir="auto">1. Access project languages</h3><a id="user-content-1-access-project-languages" class="anchor" aria-label="Permalink: 1. Access project languages" href="#1-access-project-languages"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <p dir="auto">On DatoCMS navigate to: <strong>Settings > Environment > Settings</strong> and check for the starter default languages:</p> <p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://camo.githubusercontent.com/d2cf997ef44497340b1910fe1c61cf4e6a7c9d72775a762efdebadf966fe32bc/68747470733a2f2f692e6962622e636f2f685a43634e74732f53636865726d6174612d323032322d30322d31382d616c6c652d31382d35332d30332e706e67"><img src="https://camo.githubusercontent.com/d2cf997ef44497340b1910fe1c61cf4e6a7c9d72775a762efdebadf966fe32bc/68747470733a2f2f692e6962622e636f2f685a43634e74732f53636865726d6174612d323032322d30322d31382d616c6c652d31382d35332d30332e706e67" alt="" data-canonical-src="https://i.ibb.co/hZCcNts/Schermata-2022-02-18-alle-18-53-03.png" style="max-width: 100%;"></a></p> <div class="markdown-heading" dir="auto"><h3 tabindex="-1" class="heading-element" dir="auto">2. Remove unwanted languages and pick a fallback language</h3><a id="user-content-2-remove-unwanted-languages-and-pick-a-fallback-language" class="anchor" aria-label="Permalink: 2. Remove unwanted languages and pick a fallback language" href="#2-remove-unwanted-languages-and-pick-a-fallback-language"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <p dir="auto">If your website final language list won't include any of the fully translated starter language codes (<code>en</code>, <code>es-ES</code> or <code>it</code>), pick one of your choice (for example <code>en</code>) and <ins><strong>do not delete it</strong></ins>, just keep it in the list (for the being) and <strong>delete the others</strong>.</p> <p dir="auto">Otherwise, just delete the unnecessary languages, leave the ones you will use and pick <strong>one of your choice</strong>.</p> <p dir="auto">Starting from now this is your <strong>fallback language</strong>.</p> <blockquote> <p dir="auto">This starter is using fallbacks for <code>ar-AE</code>, so do not consider it as a language you can pick.</p> </blockquote> <p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://camo.githubusercontent.com/97962f6bb23a632e4fe66ae066bd1b87087f42b7c4499b7788d20086af9ff844/68747470733a2f2f692e6962622e636f2f767334737635462f53636865726d6174612d323032322d30322d31382d616c6c652d31382d35332d35342e706e67"><img src="https://camo.githubusercontent.com/97962f6bb23a632e4fe66ae066bd1b87087f42b7c4499b7788d20086af9ff844/68747470733a2f2f692e6962622e636f2f767334737635462f53636865726d6174612d323032322d30322d31382d616c6c652d31382d35332d35342e706e67" alt="" data-canonical-src="https://i.ibb.co/vs4sv5F/Schermata-2022-02-18-alle-18-53-54.png" style="max-width: 100%;"></a></p> <blockquote> <p dir="auto"><g-emoji class="g-emoji" alias="warning">⚠️</g-emoji> If for example, you are planning to add <code>English (United Kingdom) "en-GB"</code> and to remove <code>"en"</code>, consider <code>"en-GB"</code> as a <strong>different language</strong> and keep <code>"en"</code> in the list as fallback.</p> </blockquote> <div class="markdown-heading" dir="auto"><h3 tabindex="-1" class="heading-element" dir="auto">3. Add new languages</h3><a id="user-content-3-add-new-languages" class="anchor" aria-label="Permalink: 3. Add new languages" href="#3-add-new-languages"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <p dir="auto">Choose any kind of lang code you prefer from the dropdown and add the languages:</p> <p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://camo.githubusercontent.com/40554f08d3cd19aedc07f36bbc735801f17208c74b31512c152eb2f4bbb771cd/68747470733a2f2f692e6962622e636f2f4b77326e74666b2f53636865726d6174612d323032322d30322d31382d616c6c652d31382d35362d34342e706e67"><img src="https://camo.githubusercontent.com/40554f08d3cd19aedc07f36bbc735801f17208c74b31512c152eb2f4bbb771cd/68747470733a2f2f692e6962622e636f2f4b77326e74666b2f53636865726d6174612d323032322d30322d31382d616c6c652d31382d35362d34342e706e67" alt="" data-canonical-src="https://i.ibb.co/Kw2ntfk/Schermata-2022-02-18-alle-18-56-44.png" style="max-width: 100%;"></a></p> <div class="markdown-heading" dir="auto"><h3 tabindex="-1" class="heading-element" dir="auto">4. Set the default language</h3><a id="user-content-4-set-the-default-language" class="anchor" aria-label="Permalink: 4. Set the default language" href="#4-set-the-default-language"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <p dir="auto">Drag to the left at first position your website <strong>default language</strong>, and rearrange in order of importance the others:</p> <p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://camo.githubusercontent.com/de359b2c1f388eb22f2ee8d566fe9bc7a1034d2b76a5639d96c474cdc60930cb/68747470733a2f2f692e6962622e636f2f43573554796d6e2f53636865726d6174612d323032322d30322d31382d616c6c652d31382d35372d34342e706e67"><img src="https://camo.githubusercontent.com/de359b2c1f388eb22f2ee8d566fe9bc7a1034d2b76a5639d96c474cdc60930cb/68747470733a2f2f692e6962622e636f2f43573554796d6e2f53636865726d6174612d323032322d30322d31382d616c6c652d31382d35372d34342e706e67" alt="" data-canonical-src="https://i.ibb.co/CW5Tymn/Schermata-2022-02-18-alle-18-57-44.png" style="max-width: 100%;"></a></p> <p dir="auto">💾 Save your project settings.</p> <div class="markdown-heading" dir="auto"><h3 tabindex="-1" class="heading-element" dir="auto">5. Set the fallbacks</h3><a id="user-content-5-set-the-fallbacks" class="anchor" aria-label="Permalink: 5. Set the fallbacks" href="#5-set-the-fallbacks"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <p dir="auto">Open <strong>gatsby-config.js</strong> and set the <strong>fallbacks</strong> as displayed below:</p> <div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="{ resolve: 'gatsby-source-datocms', options: { apiToken: '<YOUR_PUBLIC_API_TOKEN>', localeFallbacks: { 'zh': 'en', 'pt-BR' : 'en', }, }, },"><pre><span class="pl-kos">{</span> <span class="pl-c1">resolve</span>: <span class="pl-s">'gatsby-source-datocms'</span><span class="pl-kos">,</span> <span class="pl-c1">options</span>: <span class="pl-kos">{</span> <span class="pl-c1">apiToken</span>: <span class="pl-s">'<YOUR_PUBLIC_API_TOKEN>'</span><span class="pl-kos">,</span> <span class="pl-c1">localeFallbacks</span>: <span class="pl-kos">{</span> <span class="pl-s">'zh'</span>: <span class="pl-s">'en'</span><span class="pl-kos">,</span> <span class="pl-s">'pt-BR'</span> : <span class="pl-s">'en'</span><span class="pl-kos">,</span> <span class="pl-kos">}</span><span class="pl-kos">,</span> <span class="pl-kos">}</span><span class="pl-kos">,</span> <span class="pl-kos">}</span><span class="pl-kos">,</span></pre></div> <p dir="auto">You should create a property for each new language (not included in the starter) and assign to it the fallback picked before ("en").</p> <p dir="auto">💾 Save the file.</p> <br> <div class="markdown-heading" dir="auto"><h2 tabindex="-1" class="heading-element" dir="auto">3. Environment testing</h2><a id="user-content-3-environment-testing" class="anchor" aria-label="Permalink: 3. Environment testing" href="#3-environment-testing"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <div class="markdown-heading" dir="auto"><h3 tabindex="-1" class="heading-element" dir="auto">Local environment</h3><a id="user-content-local-environment" class="anchor" aria-label="Permalink: Local environment" href="#local-environment"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <p dir="auto">Navigate into your project folder and run <code>gatsby develop</code>. Check on your terminal, at some point you will see something like:</p> <p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://camo.githubusercontent.com/403975ac09dc73a40c6aadc4e4065a6746af77c5e2dba96cdf054cfe90783cea/68747470733a2f2f692e6962622e636f2f714246393357432f53636865726d6174612d323032322d30322d31352d616c6c652d32332d34302d32392e706e67"><img src="https://camo.githubusercontent.com/403975ac09dc73a40c6aadc4e4065a6746af77c5e2dba96cdf054cfe90783cea/68747470733a2f2f692e6962622e636f2f714246393357432f53636865726d6174612d323032322d30322d31352d616c6c652d32332d34302d32392e706e67" alt="Console infos" data-canonical-src="https://i.ibb.co/qBF93WC/Schermata-2022-02-15-alle-23-40-29.png" style="max-width: 100%;"></a></p> <p dir="auto">By opening <a href="http://localhost:8000" rel="nofollow">http://localhost:8000</a> you will notice that your languages are now displayed in the switcher, in the same order as you set before in your administration area:</p> <p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://camo.githubusercontent.com/4d3bfc630939b9f3041dfa33191d96f2b31b2d7fe60b65700667b16c9929a27c/68747470733a2f2f692e6962622e636f2f4c52446a4a4a502f53636865726d6174612d323032322d30322d31352d616c6c652d32332d31332d35312e706e67"><img src="https://camo.githubusercontent.com/4d3bfc630939b9f3041dfa33191d96f2b31b2d7fe60b65700667b16c9929a27c/68747470733a2f2f692e6962622e636f2f4c52446a4a4a502f53636865726d6174612d323032322d30322d31352d616c6c652d32332d31332d35312e706e67" alt="Switcher" data-canonical-src="https://i.ibb.co/LRDjJJP/Schermata-2022-02-15-alle-23-13-51.png" style="max-width: 100%;"></a></p> <p dir="auto">As you can see pages are generated with proper paths, SEO meta tags and the webmanifest localized are injected to the head for each language.</p> <p dir="auto">Whenever you will change the languages order on Dato, your website will be generated accordingly.</p> <p dir="auto">You can switch language and navigate the website. Content will still be displayed in fallback language.</p> <br> <div class="markdown-heading" dir="auto"><h3 tabindex="-1" class="heading-element" dir="auto">Gatsby Cloud (optional)</h3><a id="user-content-gatsby-cloud-optional" class="anchor" aria-label="Permalink: Gatsby Cloud (optional)" href="#gatsby-cloud-optional"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <p dir="auto">Commit and push your changes. Access Gatsby Cloud and monitor the build trigged by your Git connection, it should be ready soon.</p> <p dir="auto">Once the build is completed, if you visit your website (via the free domain assigned by Gatsby Cloud) you should be able to see your website live just like you see it locally.</p> <p dir="auto">A build will also be triggered by the DatoCMS connection everytime you publish content.</p> <br> <div class="markdown-heading" dir="auto"><h2 tabindex="-1" class="heading-element" dir="auto">4. Understand content models structure</h2><a id="user-content-4-understand-content-models-structure" class="anchor" aria-label="Permalink: 4. Understand content models structure" href="#4-understand-content-models-structure"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <p dir="auto">Before finalizing the starter configuration make sure to have read and understood this section.</p> <p dir="auto">I have organized the vertical menu of the content editing area according to the content models' <a href="https://www.datocms.com/docs/content-modelling" rel="nofollow">type</a> and purpose:</p> <p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://camo.githubusercontent.com/a6f3c5bf3650f32498bd9bd4107d2d47bf699e137bac373a345c0b25efc8e7f7/68747470733a2f2f692e6962622e636f2f714644787972672f53636865726d6174612d323032322d30322d31382d616c6c652d31392d30312d35372e706e67"><img src="https://camo.githubusercontent.com/a6f3c5bf3650f32498bd9bd4107d2d47bf699e137bac373a345c0b25efc8e7f7/68747470733a2f2f692e6962622e636f2f714644787972672f53636865726d6174612d323032322d30322d31382d616c6c652d31392d30312d35372e706e67" alt="" data-canonical-src="https://i.ibb.co/qFDxyrg/Schermata-2022-02-18-alle-19-01-57.png" style="max-width: 100%;"></a></p> <p dir="auto"><code>Gatsby Node</code> models are queried by <a href="https://www.gatsbyjs.com/docs/reference/config-files/gatsby-node/" rel="nofollow">gatsby-node.js</a> in order to generate pages and also by the templates (used to generate such pages) in order to render the correspondent data fields.</p> <p dir="auto"><code>Data-only</code> models are queried in different JSX files to render some data but they are not used to generate any page (hence the name <em>data-only</em>).</p> <p dir="auto">Basically, what differs between the two groups is that <code>Gatsby Node</code> models have a localizable <code>slug</code> field used to build the path and a localizable <code>seo</code> field to render the meta tags.</p> <div class="markdown-heading" dir="auto"><h3 tabindex="-1" class="heading-element" dir="auto">1. Gatsby Node</h3><a id="user-content-1-gatsby-node" class="anchor" aria-label="Permalink: 1. Gatsby Node" href="#1-gatsby-node"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <p dir="auto"><strong><ins>Single instance</ins></strong></p> <p dir="auto"><strong>Homepage</strong> - Used to generate the homepage:</p> <ul dir="auto"> <li>Default language: <code>/</code></li> <li>Other languages : <code>/it-IT</code></li> </ul> <p dir="auto"><strong>Categories Archive</strong> - Used to generate the categories archive page:</p> <ul dir="auto"> <li>Default language: <code>/categories</code></li> <li>Other languages : <code>/it-IT/categorie</code></li> </ul> <p dir="auto"><strong>Blog Root</strong> - Used to generate the blog root page:</p> <ul dir="auto"> <li>Default language: <code>/blog</code></li> <li>Other languages : <code>/it-IT/articoli</code></li> </ul> <p dir="auto"><strong><ins>Collections</ins></strong></p> <p dir="auto"><strong>Other pages</strong> - Used to generate pages using a shared template such as <code>/guide</code> and <code>/features</code></p> <ul dir="auto"> <li>Default language: <code>/guide</code></li> <li>Other languages : <code>/it-IT/guida</code></li> </ul> <p dir="auto"><strong>Categories</strong> - Used to generate category pages:</p> <ul dir="auto"> <li>Default language: <code>/blog/react</code></li> <li>Other languages : <code>/it-IT/articoli/react</code></li> </ul> <p dir="auto"><strong>Posts</strong> - Used to generate post pages:</p> <ul dir="auto"> <li>Default language: <code>/blog/react/rendering-elements</code></li> <li>Other languages : <code>/it-IT/articoli/react/renderizzare-elementi</code></li> </ul> <hr> <div class="markdown-heading" dir="auto"><h3 tabindex="-1" class="heading-element" dir="auto">2. Data-only</h3><a id="user-content-2-data-only" class="anchor" aria-label="Permalink: 2. Data-only" href="#2-data-only"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <p dir="auto"><strong><ins>Collections</ins></strong></p> <p dir="auto"><strong>Authors</strong> - A collections of records representing the authors of your blog. These records can be linked to any post.</p> <p dir="auto"><strong><ins>Single instance</ins></strong></p> <p dir="auto"><strong>Menu</strong> - In this content model you can add or remove a menu item. You can order them via drag-n-drop and link to each of them a record of the Gatsby Node group.</p> <p dir="auto"><strong>Footer</strong> - Contains the footer content.</p> <p dir="auto"><strong>404 Page</strong> - 404 page content, fully localizable.</p> <p dir="auto"><strong>Seo and PWA</strong> - Fields related to Global SEO and PWA webmanifest.</p> <p dir="auto"><strong>Misc strings</strong> - String fields used site-wide such as "Recent posts" or "See all categories".</p> <br> <div class="markdown-heading" dir="auto"><h2 tabindex="-1" class="heading-element" dir="auto">5. Finalizing starter configuration</h2><a id="user-content-5-finalizing-starter-configuration" class="anchor" aria-label="Permalink: 5. Finalizing starter configuration" href="#5-finalizing-starter-configuration"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <div class="markdown-heading" dir="auto"><h3 tabindex="-1" class="heading-element" dir="auto">1. Get rid of blog dummy content</h3><a id="user-content-1-get-rid-of-blog-dummy-content" class="anchor" aria-label="Permalink: 1. Get rid of blog dummy content" href="#1-get-rid-of-blog-dummy-content"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <p dir="auto">Make sure your development server is not running.</p> <ol dir="auto"> <li>Delete any <strong>article / category / author</strong> <strong><ins>record</ins></strong> coming with this starter (do not delete the content models!).</li> <li>Create and publish your first category and author records and translate the fields for any locale.</li> <li>Create and publish your first post, translate the fields for any locale and <a href="#linking-categories-and-authors-to-blog-posts">link</a> the category and the author just created to the post.</li> </ol> <blockquote> <p dir="auto"><g-emoji class="g-emoji" alias="warning">⚠️</g-emoji> Since the fallback language picked before is still necessary to finalize the configuration, <strong>translate also its fields</strong>. You can copy-paste from another language or enter some dummy data, it doesn't matter. It will take 30 seconds.</p> </blockquote> <ol start="5" dir="auto"> <li>Run <code>gatsby develop</code> and test the outcome</li> </ol> <p dir="auto">From now on when you will add a category or a post (or you will edit it) the layout will change accordingly and new pages with proper paths will be generated as well. Usually, it takes 2 to 4 seconds to see the edits live on your dev server.</p> <br> <div class="markdown-heading" dir="auto"><h3 tabindex="-1" class="heading-element" dir="auto">2. Translate the starter base content</h3><a id="user-content-2-translate-the-starter-base-content" class="anchor" aria-label="Permalink: 2. Translate the starter base content" href="#2-translate-the-starter-base-content"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <p dir="auto">Translate any other content models' record and field such as <code>Homepage</code>, <code>Categories archive</code>, <code>Blog root</code>, <code>Global SEO and PWA</code>, <code>Misc text strings</code> etc...</p> <p dir="auto"><em>You will always notice which records needs to be translated:</em></p> <p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://camo.githubusercontent.com/538dc871977e4ff6ba1644a27dd0e9c5c69026c8ef58b70baf490038f02a43dc/68747470733a2f2f692e6962622e636f2f573353735435622f53636865726d6174612d323032322d30322d32302d616c6c652d30312d35372d31392e706e67"><img src="https://camo.githubusercontent.com/538dc871977e4ff6ba1644a27dd0e9c5c69026c8ef58b70baf490038f02a43dc/68747470733a2f2f692e6962622e636f2f573353735435622f53636865726d6174612d323032322d30322d32302d616c6c652d30312d35372d31392e706e67" alt="" data-canonical-src="https://i.ibb.co/W3SsT5b/Schermata-2022-02-20-alle-01-57-19.png" style="max-width: 100%;"></a></p> <markdown-accessiblity-table><table> <thead> <tr> <th>❌</th> <th>✅</th> </tr> </thead> <tbody> <tr> <td><a target="_blank" rel="noopener noreferrer nofollow" href="https://camo.githubusercontent.com/6e1a378c870a8e106fdfdea2a7aca6343f0e34421e32987f86bdb182b159007b/68747470733a2f2f692e6962622e636f2f7470476e464e462f53636865726d6174612d323032322d30322d32302d616c6c652d30312d35392d32302e706e67"><img src="https://camo.githubusercontent.com/6e1a378c870a8e106fdfdea2a7aca6343f0e34421e32987f86bdb182b159007b/68747470733a2f2f692e6962622e636f2f7470476e464e462f53636865726d6174612d323032322d30322d32302d616c6c652d30312d35392d32302e706e67" alt="" data-canonical-src="https://i.ibb.co/tpGnFNF/Schermata-2022-02-20-alle-01-59-20.png" style="max-width: 100%;"></a></td> <td><a target="_blank" rel="noopener noreferrer nofollow" href="https://camo.githubusercontent.com/f010449b8c3c83430960cc6636a02eb566ff1446b007a1b3f1b87f810daaf65f/68747470733a2f2f692e6962622e636f2f6332627847395a2f53636865726d6174612d323032322d30322d32302d616c6c652d30312d35392d33322e706e67"><img src="https://camo.githubusercontent.com/f010449b8c3c83430960cc6636a02eb566ff1446b007a1b3f1b87f810daaf65f/68747470733a2f2f692e6962622e636f2f6332627847395a2f53636865726d6174612d323032322d30322d32302d616c6c652d30312d35392d33322e706e67" alt="" data-canonical-src="https://i.ibb.co/c2bxG9Z/Schermata-2022-02-20-alle-01-59-32.png" style="max-width: 100%;"></a></td> </tr> </tbody> </table></markdown-accessiblity-table> <p dir="auto"><g-emoji class="g-emoji" alias="warning">⚠️</g-emoji> Make also sure that you have at least one record for each content model of type <em>collection</em>.</p> <br> <div class="markdown-heading" dir="auto"><h3 tabindex="-1" class="heading-element" dir="auto">3. Get rid of the starter fallback language</h3><a id="user-content-3-get-rid-of-the-starter-fallback-language" class="anchor" aria-label="Permalink: 3. Get rid of the starter fallback language" href="#3-get-rid-of-the-starter-fallback-language"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <blockquote> <p dir="auto"><g-emoji class="g-emoji" alias="warning">⚠️</g-emoji> You have to follow this step only if you had to pick as fallback a starter language that won't be included in your website language list.</p> </blockquote> <ol dir="auto"> <li>Once fields' content has been translated in any language you added, navigate to your administration area and <strong>delete the fallback language</strong> <a href="#2-Remove-unwanted-languages-and-pick-a-fallback-language">picked before</a> from your languages list:</li> </ol> <p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://camo.githubusercontent.com/2fcceb239767b1f9f26303815002bc64076122bdd5e5b766e2f27a75240cabe6/68747470733a2f2f692e6962622e636f2f465736376378332f53636865726d6174612d323032322d30322d31392d616c6c652d31372d35392d35392e706e67"><img src="https://camo.githubusercontent.com/2fcceb239767b1f9f26303815002bc64076122bdd5e5b766e2f27a75240cabe6/68747470733a2f2f692e6962622e636f2f465736376378332f53636865726d6174612d323032322d30322d31392d616c6c652d31372d35392d35392e706e67" alt="" data-canonical-src="https://i.ibb.co/FW67cx3/Schermata-2022-02-19-alle-17-59-59.png" style="max-width: 100%;"></a></p> <ol start="2" dir="auto"> <li>Open <strong>gatsby-config.js</strong> and delete the fallback properties:</li> </ol> <div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="{ resolve: 'gatsby-source-datocms', options: { apiToken: '<YOUR_PUBLIC_API_TOKEN>', localeFallbacks: { // <-- Delete from here zh: 'en', 'pt-BR' : 'en', }, // <-- to here }, },"><pre><span class="pl-kos">{</span> <span class="pl-c1">resolve</span>: <span class="pl-s">'gatsby-source-datocms'</span><span class="pl-kos">,</span> <span class="pl-c1">options</span>: <span class="pl-kos">{</span> <span class="pl-c1">apiToken</span>: <span class="pl-s">'<YOUR_PUBLIC_API_TOKEN>'</span><span class="pl-kos">,</span> <span class="pl-c1">localeFallbacks</span>: <span class="pl-kos">{</span> <span class="pl-c">// <-- Delete from here</span> <span class="pl-c1">zh</span>: <span class="pl-s">'en'</span><span class="pl-kos">,</span> <span class="pl-s">'pt-BR'</span> : <span class="pl-s">'en'</span><span class="pl-kos">,</span> <span class="pl-kos">}</span><span class="pl-kos">,</span> <span class="pl-c">// <-- to here</span> <span class="pl-kos">}</span><span class="pl-kos">,</span> <span class="pl-kos">}</span><span class="pl-kos">,</span></pre></div> <br> <div class="markdown-heading" dir="auto"><h3 tabindex="-1" class="heading-element" dir="auto">4. Set proper fallbacks (optional)</h3><a id="user-content-4-set-proper-fallbacks-optional" class="anchor" aria-label="Permalink: 4. Set proper fallbacks (optional)" href="#4-set-proper-fallbacks-optional"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <p dir="auto">If your plan is to publish content in default language and to translate other languages later on, set the fallbacks in gatsby-config.js:</p> <div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="{ resolve: 'gatsby-source-datocms', options: { apiToken: '<YOUR_PUBLIC_API_TOKEN>', localeFallbacks: { 'pt-BR': 'zh', }, }, },"><pre><span class="pl-kos">{</span> <span class="pl-c1">resolve</span>: <span class="pl-s">'gatsby-source-datocms'</span><span class="pl-kos">,</span> <span class="pl-c1">options</span>: <span class="pl-kos">{</span> <span class="pl-c1">apiToken</span>: <span class="pl-s">'<YOUR_PUBLIC_API_TOKEN>'</span><span class="pl-kos">,</span> <span class="pl-c1">localeFallbacks</span>: <span class="pl-kos">{</span> <span class="pl-s">'pt-BR'</span>: <span class="pl-s">'zh'</span><span class="pl-kos">,</span> <span class="pl-kos">}</span><span class="pl-kos">,</span> <span class="pl-kos">}</span><span class="pl-kos">,</span> <span class="pl-kos">}</span><span class="pl-kos">,</span></pre></div> <p dir="auto">In this way pages generation won't fail for untranslated records since any untranslated field queried via GraphQL will return the value of the fallback language you just set.</p> <blockquote> <p dir="auto">😉 By now, you should be able to add and translate posts, categories and any other record you want and the starter will take care of the rest. Check the next section to have a complete overview on how to handle blog content.</p> </blockquote> <br> <div class="markdown-heading" dir="auto"><h1 tabindex="-1" class="heading-element" dir="auto">Managing content</h1><a id="user-content-managing-content" class="anchor" aria-label="Permalink: Managing content" href="#managing-content"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <div class="markdown-heading" dir="auto"><h2 tabindex="-1" class="heading-element" dir="auto">Choose which content to generate (and translate)</h2><a id="user-content-choose-which-content-to-generate-and-translate" class="anchor" aria-label="Permalink: Choose which content to generate (and translate)" href="#choose-which-content-to-generate-and-translate"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <p dir="auto">When you edit records of <code>Posts</code> and <code>Categories</code> content models, you will notice this <em>boolean</em> field:</p> <p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://camo.githubusercontent.com/fa89c961c62e4ae7e809d97d73508e7659d580ac04b2cadc6d8a551e177edf1c/68747470733a2f2f692e6962622e636f2f54325a5a46364d2f53636865726d6174612d323032322d30322d32302d616c6c652d30322d31312d34342e706e67"><img src="https://camo.githubusercontent.com/fa89c961c62e4ae7e809d97d73508e7659d580ac04b2cadc6d8a551e177edf1c/68747470733a2f2f692e6962622e636f2f54325a5a46364d2f53636865726d6174612d323032322d30322d32302d616c6c652d30322d31312d34342e706e67" alt="" data-canonical-src="https://i.ibb.co/T2ZZF6M/Schermata-2022-02-20-alle-02-11-44.png" style="max-width: 100%;"></a></p> <p dir="auto">By setting it to <code>true</code>, the post or category page won't be generated for that language.</p> <blockquote> <p dir="auto"><a href="https://headlessmultilingual.gatsbyjs.io/blog/development" rel="nofollow">This</a> is an example of category not available for "es" language.</p> </blockquote> <blockquote> <p dir="auto"><a href="https://headlessmultilingual.gatsbyjs.io/blog/react/rendering-elements" rel="nofollow">This</a> is an example of post not available for "it" and "es" languages.</p> </blockquote> <p dir="auto">If for example, the field is set to true for "es" language and the user is viewing that post/category in "en", if he tries to switch to "es", he will be redirected to the blog root.</p> <p dir="auto">Same happens for categories.</p> <blockquote> <p dir="auto"><g-emoji class="g-emoji" alias="warning">⚠️</g-emoji> If you set this field to true for a <strong>category</strong>, all the posts linked to that category won't be generated as well for that language, no matter if you have translated them.</p> </blockquote> <blockquote> <p dir="auto"><g-emoji class="g-emoji" alias="warning">⚠️</g-emoji> I decided to not enforce field validation on <code>slug</code> field for Posts and Categories. Before publishing any content <strong>always check</strong> that such fields are populated for any locale you want to generate the page (unless you have set a fallback).</p> </blockquote> <br> <div class="markdown-heading" dir="auto"><h2 tabindex="-1" class="heading-element" dir="auto">Editing the menu</h2><a id="user-content-editing-the-menu" class="anchor" aria-label="Permalink: Editing the menu" href="#editing-the-menu"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <p dir="auto">Simply access the content model named <code>Menu</code> under the <code>Data-only</code> group:</p> <p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://camo.githubusercontent.com/a19a1a2f4bab29da85f2ad508b1a1933ff59480230ea0187e27f8a51c0eb5ce4/68747470733a2f2f692e6962622e636f2f573567467278572f53636865726d6174612d323032322d30322d32302d616c6c652d30322d31332d31382e706e67"><img src="https://camo.githubusercontent.com/a19a1a2f4bab29da85f2ad508b1a1933ff59480230ea0187e27f8a51c0eb5ce4/68747470733a2f2f692e6962622e636f2f573567467278572f53636865726d6174612d323032322d30322d32302d616c6c652d30322d31332d31382e706e67" alt="" data-canonical-src="https://i.ibb.co/W5gFrxW/Schermata-2022-02-20-alle-02-13-18.png" style="max-width: 100%;"></a></p> <p dir="auto">Add a new "Menu Link" item and link the record you want to redirect the users. You can change the order of the block items by drag-and-drop and choose to set a complete different menu for each locale.</p> <br> <div class="markdown-heading" dir="auto"><h3 tabindex="-1" class="heading-element" dir="auto">Displaying featured posts in the homepage</h3><a id="user-content-displaying-featured-posts-in-the-homepage" class="anchor" aria-label="Permalink: Displaying featured posts in the homepage" href="#displaying-featured-posts-in-the-homepage"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <p dir="auto">In each post record you see find this <em>boolean</em> field:</p> <p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://camo.githubusercontent.com/d8ebe1b2772b8e5c5cc46f9d439b985a5ab8392491005ce56896a8610cd99caa/68747470733a2f2f692e6962622e636f2f4d446b5652716a2f53636865726d6174612d323032322d30322d31392d616c6c652d31392d30372d34372e706e67"><img src="https://camo.githubusercontent.com/d8ebe1b2772b8e5c5cc46f9d439b985a5ab8392491005ce56896a8610cd99caa/68747470733a2f2f692e6962622e636f2f4d446b5652716a2f53636865726d6174612d323032322d30322d31392d616c6c652d31392d30372d34372e706e67" alt="" data-canonical-src="https://i.ibb.co/MDkVRqj/Schermata-2022-02-19-alle-19-07-47.png" style="max-width: 100%;"></a></p> <p dir="auto">If set to <code>true</code> it will display that post in the homepage. You can select up to 6 posts, they will be ordered according to the update time.</p> <br> <div class="markdown-heading" dir="auto"><h3 tabindex="-1" class="heading-element" dir="auto">Displaying the categories dropdown</h3><a id="user-content-displaying-the-categories-dropdown" class="anchor" aria-label="Permalink: Displaying the categories dropdown" href="#displaying-the-categories-dropdown"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <p dir="auto">For each menu item there's this <em>boolean</em> field:</p> <p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://camo.githubusercontent.com/2dfae77e9e17a145a2131af39bc6077afa1db2b7b426a0eefd8b9ab9e462baa7/68747470733a2f2f692e6962622e636f2f625143766363372f53636865726d6174612d323032322d30322d32302d616c6c652d30322d31342d31322e706e67"><img src="https://camo.githubusercontent.com/2dfae77e9e17a145a2131af39bc6077afa1db2b7b426a0eefd8b9ab9e462baa7/68747470733a2f2f692e6962622e636f2f625143766363372f53636865726d6174612d323032322d30322d32302d616c6c652d30322d31342d31322e706e67" alt="" data-canonical-src="https://i.ibb.co/bQCvcc7/Schermata-2022-02-20-alle-02-14-12.png" style="max-width: 100%;"></a></p> <p dir="auto">If set to <code>true</code> it will render the categories dropdown in both desktop and mobile menus.</p> <p dir="auto">If you want to change the order, simply sort the records in the <code>Categories</code> content model via drap-and-drop:</p> <p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://camo.githubusercontent.com/ec70a3e6d6b03c4e66b0279ac76361c48c93970620af13dce2023f0a1f5d4cb7/68747470733a2f2f692e6962622e636f2f6e505a5666796d2f53636865726d6174612d323032322d30322d31372d616c6c652d31312d32352d32382e706e67"><img src="https://camo.githubusercontent.com/ec70a3e6d6b03c4e66b0279ac76361c48c93970620af13dce2023f0a1f5d4cb7/68747470733a2f2f692e6962622e636f2f6e505a5666796d2f53636865726d6174612d323032322d30322d31372d616c6c652d31312d32352d32382e706e67" alt="" data-canonical-src="https://i.ibb.co/nPZVfym/Schermata-2022-02-17-alle-11-25-28.png" style="max-width: 100%;"></a></p> <blockquote> <p dir="auto"><g-emoji class="g-emoji" alias="warning">⚠️</g-emoji> By default the dropdown will display the first six categories of your blog and a link at the bottom to redirect the user to the categories archive page. If you want to increase the number of categories shown, you can check <a href="#increase-categories-number-displayed-by-the-dropdown">this section</a>.</p> </blockquote> <br> <div class="markdown-heading" dir="auto"><h2 tabindex="-1" class="heading-element" dir="auto">Editing the categories menu</h2><a id="user-content-editing-the-categories-menu" class="anchor" aria-label="Permalink: Editing the categories menu" href="#editing-the-categories-menu"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <p dir="auto">Each category page and the blog root page, displays a scrollable menu where you can navigate the categories:</p> <p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://camo.githubusercontent.com/460473a8ab670715a1d2ea3ae266c5d08a713f0d0794f88180c5dd19642640e7/68747470733a2f2f692e6962622e636f2f325733777772702f53636865726d6174612d323032322d30322d31372d616c6c652d31312d32332d32372e706e67"><img src="https://camo.githubusercontent.com/460473a8ab670715a1d2ea3ae266c5d08a713f0d0794f88180c5dd19642640e7/68747470733a2f2f692e6962622e636f2f325733777772702f53636865726d6174612d323032322d30322d31372d616c6c652d31312d32332d32372e706e67" alt="" data-canonical-src="https://i.ibb.co/2W3wwrp/Schermata-2022-02-17-alle-11-23-27.png" style="max-width: 100%;"></a></p> <p dir="auto">If you want to change the order, simply rearrange the records order as explained in the previous section.</p> <p dir="auto">Once your categories number will increase and overflow the menu, a scrollbar with a gradient will appear:</p> <p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://camo.githubusercontent.com/771df2005eb99b190f70e22027ee2ab74ff141ed512f1438f976c026a7f36095/68747470733a2f2f692e6962622e636f2f543133354a37532f53636865726d6174612d323032322d30322d31372d616c6c652d31312d32392d31312e706e67"><img src="https://camo.githubusercontent.com/771df2005eb99b190f70e22027ee2ab74ff141ed512f1438f976c026a7f36095/68747470733a2f2f692e6962622e636f2f543133354a37532f53636865726d6174612d323032322d30322d31372d616c6c652d31312d32392d31312e706e67" alt="" data-canonical-src="https://i.ibb.co/T135J7S/Schermata-2022-02-17-alle-11-29-11.png" style="max-width: 100%;"></a></p> <br> <div class="markdown-heading" dir="auto"><h2 tabindex="-1" class="heading-element" dir="auto">Linking categories and authors to blog posts</h2><a id="user-content-linking-categories-and-authors-to-blog-posts" class="anchor" aria-label="Permalink: Linking categories and authors to blog posts" href="#linking-categories-and-authors-to-blog-posts"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <p dir="auto">Edit the <code>category_link</code> field in each post by selecting a category from the dropdown:</p> <p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://camo.githubusercontent.com/fcb78bbfaa105d7dfce882ebcc3d3feea9a16f4c7bbfd566ec6b4ebef3cec25c/68747470733a2f2f692e6962622e636f2f444d56364e5a6d2f53636865726d6174612d323032322d30322d32302d616c6c652d30322d31352d35312e706e67"><img src="https://camo.githubusercontent.com/fcb78bbfaa105d7dfce882ebcc3d3feea9a16f4c7bbfd566ec6b4ebef3cec25c/68747470733a2f2f692e6962622e636f2f444d56364e5a6d2f53636865726d6174612d323032322d30322d32302d616c6c652d30322d31352d35312e706e67" alt="" data-canonical-src="https://i.ibb.co/DMV6NZm/Schermata-2022-02-20-alle-02-15-51.png" style="max-width: 100%;"></a></p> <p dir="auto">As soon as you add a new category it will be available for selection and your page paths generated accordingly.</p> <p dir="auto">You can also decide to not assign a category to a post, simply that post won't be rendered inside the category pages and the card won't display the category box:</p> <p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://camo.githubusercontent.com/78b5b712c51a6aff414fb0d9e9ddc18976ebd9e1d1b7074075430a92109bac1e/68747470733a2f2f692e6962622e636f2f794668705a46312f53636865726d6174612d323032322d30322d31372d616c6c652d31322d31372d33342e706e67"><img src="https://camo.githubusercontent.com/78b5b712c51a6aff414fb0d9e9ddc18976ebd9e1d1b7074075430a92109bac1e/68747470733a2f2f692e6962622e636f2f794668705a46312f53636865726d6174612d323032322d30322d31372d616c6c652d31322d31372d33342e706e67" alt="" data-canonical-src="https://i.ibb.co/yFhpZF1/Schermata-2022-02-17-alle-12-17-34.png" style="max-width: 100%;"></a></p> <p dir="auto">The same happens for the authors, just add a new record in the <code>Authors</code> content model and update the record.</p> <blockquote> <p dir="auto"><a href="http://localhost:8000/blog/components-and-props" rel="nofollow">This</a> is an example of uncategorized post.</p> </blockquote> <br> <div class="markdown-heading" dir="auto"><h2 tabindex="-1" class="heading-element" dir="auto">Related posts</h2><a id="user-content-related-posts" class="anchor" aria-label="Permalink: Related posts" href="#related-posts"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <p dir="auto">You can choose up to two posts to display below the article body:</p> <p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://camo.githubusercontent.com/d3f63e8f0015e711d6f7fd72e4dfa861ddc78249aab29dae755b9c03179643f1/68747470733a2f2f692e6962622e636f2f673758304e6d392f53636865726d6174612d323032322d30322d32302d616c6c652d30322d35382d34322e706e67"><img src="https://camo.githubusercontent.com/d3f63e8f0015e711d6f7fd72e4dfa861ddc78249aab29dae755b9c03179643f1/68747470733a2f2f692e6962622e636f2f673758304e6d392f53636865726d6174612d323032322d30322d32302d616c6c652d30322d35382d34322e706e67" alt="" data-canonical-src="https://i.ibb.co/g7X0Nm9/Schermata-2022-02-20-alle-02-58-42.png" style="max-width: 100%;"></a></p> <p dir="auto">All you have to do is to select the records in the link field of the <code>Post</code> content model.</p> <p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://camo.githubusercontent.com/5ff389253dc6175689547ee105403667f9e9bf45bb383c92a670da18e4ec46c8/68747470733a2f2f692e6962622e636f2f6a7a4633475a722f53636865726d6174612d323032322d30322d32302d616c6c652d30332d30332d33332e706e67"><img src="https://camo.githubusercontent.com/5ff389253dc6175689547ee105403667f9e9bf45bb383c92a670da18e4ec46c8/68747470733a2f2f692e6962622e636f2f6a7a4633475a722f53636865726d6174612d323032322d30322d32302d616c6c652d30332d30332d33332e706e67" alt="" data-canonical-src="https://i.ibb.co/jzF3GZr/Schermata-2022-02-20-alle-03-03-33.png" style="max-width: 100%;"></a></p> <p dir="auto">If no posts are set, the section won't be displayed.</p> <br> <div class="markdown-heading" dir="auto"><h1 tabindex="-1" class="heading-element" dir="auto">Styling</h1><a id="user-content-styling" class="anchor" aria-label="Permalink: Styling" href="#styling"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <div class="markdown-heading" dir="auto"><h2 tabindex="-1" class="heading-element" dir="auto">Colors</h2><a id="user-content-colors" class="anchor" aria-label="Permalink: Colors" href="#colors"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <p dir="auto">Navigate to <code>src/components/Layout/sharedStyles/globalStyles.js</code> and change the css variables <strong><ins>values</ins></strong> for the two following classes:</p> <div class="highlight highlight-source-css notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content=".lightTheme { --primaryColor: #0067fa; --headingsColor: #4d4d4d; --baseTextColor: #6e7581; --dividerColor: #e2e2e2; --markBackgroundColor: #fdffb4; --markTextColor: #4d4d4d; --inlineCodeTextColor: #4d4d4d; --inlineCodeBackgroundColor: #dbefff; --backgroundColor: #ffffff; --backgroundTransparentColor: rgba(255, 255, 255, 0); --backgroundColorAlt: #ffffff; --codeBlockBackgroundColor: #181b22; } .darkTheme { --primaryColor: #5995ea; --headingsColor: #eeeeee; --baseTextColor: #aaaaaa; --dividerColor: #242a31; --markBackgroundColor: #b2dbff; --markTextColor: #181b22; --inlineCodeTextColor: #ffffff; --inlineCodeBackgroundColor: #293b4a; --backgroundColor: #181b22; --backgroundTransparentColor: rgba(24, 27, 34, 0); --backgroundColorAlt: #1d2028; --codeBlockBackgroundColor: #181b22; }"><pre>.<span class="pl-c1">lightTheme</span> { <span class="pl-c1">--primaryColor</span><span class="pl-kos">:</span> <span class="pl-pds"><span class="pl-kos">#</span>0067fa</span>; <span class="pl-c1">--headingsColor</span><span class="pl-kos">:</span> <span class="pl-pds"><span class="pl-kos">#</span>4d4d4d</span>; <span class="pl-c1">--baseTextColor</span><span class="pl-kos">:</span> <span class="pl-pds"><span class="pl-kos">#</span>6e7581</span>; <span class="pl-c1">--dividerColor</span><span class="pl-kos">:</span> <span class="pl-pds"><span class="pl-kos">#</span>e2e2e2</span>; <span class="pl-c1">--markBackgroundColor</span><span class="pl-kos">:</span> <span class="pl-pds"><span class="pl-kos">#</span>fdffb4</span>; <span class="pl-c1">--markTextColor</span><span class="pl-kos">:</span> <span class="pl-pds"><span class="pl-kos">#</span>4d4d4d</span>; <span class="pl-c1">--inlineCodeTextColor</span><span class="pl-kos">:</span> <span class="pl-pds"><span class="pl-kos">#</span>4d4d4d</span>; <span class="pl-c1">--inlineCodeBackgroundColor</span><span class="pl-kos">:</span> <span class="pl-pds"><span class="pl-kos">#</span>dbefff</span>; <span class="pl-c1">--backgroundColor</span><span class="pl-kos">:</span> <span class="pl-pds"><span class="pl-kos">#</span>ffffff</span>; <span class="pl-c1">--backgroundTransparentColor</span><span class="pl-kos">:</span> <span class="pl-en">rgba</span>(<span class="pl-c1">255</span><span class="pl-kos">,</span> <span class="pl-c1">255</span><span class="pl-kos">,</span> <span class="pl-c1">255</span><span class="pl-kos">,</span> <span class="pl-c1">0</span>); <span class="pl-c1">--backgroundColorAlt</span><span class="pl-kos">:</span> <span class="pl-pds"><span class="pl-kos">#</span>ffffff</span>; <span class="pl-c1">--codeBlockBackgroundColor</span><span class="pl-kos">:</span> <span class="pl-pds"><span class="pl-kos">#</span>181b22</span>; } .<span class="pl-c1">darkTheme</span> { <span class="pl-c1">--primaryColor</span><span class="pl-kos">:</span> <span class="pl-pds"><span class="pl-kos">#</span>5995ea</span>; <span class="pl-c1">--headingsColor</span><span class="pl-kos">:</span> <span class="pl-pds"><span class="pl-kos">#</span>eeeeee</span>; <span class="pl-c1">--baseTextColor</span><span class="pl-kos">:</span> <span class="pl-pds"><span class="pl-kos">#</span>aaaaaa</span>; <span class="pl-c1">--dividerColor</span><span class="pl-kos">:</span> <span class="pl-pds"><span class="pl-kos">#</span>242a31</span>; <span class="pl-c1">--markBackgroundColor</span><span class="pl-kos">:</span> <span class="pl-pds"><span class="pl-kos">#</span>b2dbff</span>; <span class="pl-c1">--markTextColor</span><span class="pl-kos">:</span> <span class="pl-pds"><span class="pl-kos">#</span>181b22</span>; <span class="pl-c1">--inlineCodeTextColor</span><span class="pl-kos">:</span> <span class="pl-pds"><span class="pl-kos">#</span>ffffff</span>; <span class="pl-c1">--inlineCodeBackgroundColor</span><span class="pl-kos">:</span> <span class="pl-pds"><span class="pl-kos">#</span>293b4a</span>; <span class="pl-c1">--backgroundColor</span><span class="pl-kos">:</span> <span class="pl-pds"><span class="pl-kos">#</span>181b22</span>; <span class="pl-c1">--backgroundTransparentColor</span><span class="pl-kos">:</span> <span class="pl-en">rgba</span>(<span class="pl-c1">24</span><span class="pl-kos">,</span> <span class="pl-c1">27</span><span class="pl-kos">,</span> <span class="pl-c1">34</span><span class="pl-kos">,</span> <span class="pl-c1">0</span>); <span class="pl-c1">--backgroundColorAlt</span><span class="pl-kos">:</span> <span class="pl-pds"><span class="pl-kos">#</span>1d2028</span>; <span class="pl-c1">--codeBlockBackgroundColor</span><span class="pl-kos">:</span> <span class="pl-pds"><span class="pl-kos">#</span>181b22</span>; }</pre></div> <div class="markdown-heading" dir="auto"><h2 tabindex="-1" class="heading-element" dir="auto">useTheme hook</h2><a id="user-content-usetheme-hook" class="anchor" aria-label="Permalink: useTheme hook" href="#usetheme-hook"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <p dir="auto">If for any reason CSS variables are not enough to style both themes, you can import the <code>useTheme</code> hook:</p> <div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import { useTheme } from 'src/hooks/useTheme';"><pre><span class="pl-k">import</span> <span class="pl-kos">{</span> <span class="pl-s1">useTheme</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'src/hooks/useTheme'</span><span class="pl-kos">;</span></pre></div> <p dir="auto">And use it in any component / template:</p> <div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="const { isDark } = useTheme(); return <Header>{isDark ? <LogoBlack /> : <LogoWhite />}</Header>;"><pre><span class="pl-k">const</span> <span class="pl-kos">{</span> isDark <span class="pl-kos">}</span> <span class="pl-c1">=</span> <span class="pl-en">useTheme</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span> <span class="pl-k">return</span> <span class="pl-c1"><</span><span class="pl-ent">Header</span><span class="pl-c1">></span><span class="pl-kos">{</span><span class="pl-s1">isDark</span> ? <span class="pl-c1"><</span><span class="pl-ent">LogoBlack</span> <span class="pl-c1">/</span><span class="pl-c1">></span> : <span class="pl-c1"><</span><span class="pl-ent">LogoWhite</span> <span class="pl-c1">/</span><span class="pl-c1">></span><span class="pl-kos">}</span><span class="pl-c1"><</span><span class="pl-c1">/</span><span class="pl-ent">Header</span><span class="pl-c1">></span><span class="pl-kos">;</span></pre></div> <br> <div class="markdown-heading" dir="auto"><h2 tabindex="-1" class="heading-element" dir="auto">Logo</h2><a id="user-content-logo" class="anchor" aria-label="Permalink: Logo" href="#logo"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <p dir="auto">You can import and replace the logo in <code>src/components/Layout/Header/Full</code>.</p> <br> <div class="markdown-heading" dir="auto"><h2 tabindex="-1" class="heading-element" dir="auto">Custom fonts</h2><a id="user-content-custom-fonts" class="anchor" aria-label="Permalink: Custom fonts" href="#custom-fonts"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <p dir="auto">Please check this <a href="https://github.com/smastrom/headless-gatsby-multilang/issues/8">issue</a> for a guide on how to change the default (safe) fonts.</p> <br> <div class="markdown-heading" dir="auto"><h2 tabindex="-1" class="heading-element" dir="auto">Blog synthax highlighting</h2><a id="user-content-blog-synthax-highlighting" class="anchor" aria-label="Permalink: Blog synthax highlighting" href="#blog-synthax-highlighting"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <p dir="auto">By using <a href="https://github.com/datocms/react-datocms">react-datocms</a>' <code><StructuredText /></code> component, a custom <strong>render rule</strong> for the <code>code</code> node has been set using the amazing package <a href="https://www.npmjs.com/package/react-syntax-highlighter" rel="nofollow">react-synthax-hightlighter</a>.</p> <p dir="auto">To change the theme, simply replace the import in <code>src/templates/Article.jsx</code> with your favourite style. Complete documentation and styles reference can be found <a href="https://github.com/react-syntax-highlighter/react-syntax-highlighter">here</a>.</p> <div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'; import { atomDark } from 'react-syntax-highlighter/dist/esm/styles/prism'; // <-- Import your favourite style"><pre><span class="pl-k">import</span> <span class="pl-kos">{</span> <span class="pl-v">Prism</span> <span class="pl-k">as</span> <span class="pl-v">SyntaxHighlighter</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'react-syntax-highlighter'</span><span class="pl-kos">;</span> <span class="pl-k">import</span> <span class="pl-kos">{</span> <span class="pl-s1">atomDark</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'react-syntax-highlighter/dist/esm/styles/prism'</span><span class="pl-kos">;</span> <span class="pl-c">// <-- Import your favourite style</span></pre></div> <p dir="auto">If you want to override some styles from the original theme, you can do that by editing css rules in <code>src/components/Layout/Blog/ArticleBody/styles.js</code>.</p> <p dir="auto">If you wish to use another synthax highlighter, you can set your own <code>renderNodeRule</code> by following react-datocms <a href="https://github.com/datocms/react-datocms">documentation</a>.</p> <br> <div class="markdown-heading" dir="auto"><h1 tabindex="-1" class="heading-element" dir="auto">SEO</h1><a id="user-content-seo" class="anchor" aria-label="Permalink: SEO" href="#seo"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <p dir="auto">Access the <strong>Website Settings</strong> content model and set the Global SEO fields.</p> <p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://camo.githubusercontent.com/8744a2566a115939972474e78b38039d9b24e141775bce01e02ffa6e920d2481/68747470733a2f2f692e6962622e636f2f4a3268775372592f53636865726d6174612d323032322d30322d31362d616c6c652d31322d31382d30322e706e67"><img src="https://camo.githubusercontent.com/8744a2566a115939972474e78b38039d9b24e141775bce01e02ffa6e920d2481/68747470733a2f2f692e6962622e636f2f4a3268775372592f53636865726d6174612d323032322d30322d31362d616c6c652d31322d31382d30322e706e67" alt="Global SEO 1" data-canonical-src="https://i.ibb.co/J2hwSrY/Schermata-2022-02-16-alle-12-18-02.png" style="max-width: 100%;"></a></p> <p dir="auto">Once you have updated and localized the fields according to your content, you can edit any <code>seo</code> field of any content model of the <code>Gatsby Node</code> group.</p> <p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://camo.githubusercontent.com/f97acba42f5f8901907d577546a9cf242cc5a2a1fde84336ac3c74072c211ef3/68747470733a2f2f692e6962622e636f2f73314d734a47762f53636865726d6174612d323032322d30322d31362d616c6c652d31372d33312d30352e706e67"><img src="https://camo.githubusercontent.com/f97acba42f5f8901907d577546a9cf242cc5a2a1fde84336ac3c74072c211ef3/68747470733a2f2f692e6962622e636f2f73314d734a47762f53636865726d6174612d323032322d30322d31362d616c6c652d31372d33312d30352e706e67" alt="" data-canonical-src="https://i.ibb.co/s1MsJGv/Schermata-2022-02-16-alle-17-31-05.png" style="max-width: 100%;"></a></p> <p dir="auto">A sitemap will automatically be generated on build time by <a href="https://www.gatsbyjs.com/plugins/gatsby-plugin-sitemap/" rel="nofollow">gatsby-plugin-sitemap</a>, all you need to do is to write your website address in the <code>siteMetadata</code> object in <em>gatsby-config.js</em>. The sitemap will be available at <a href="https://yourwebsite.com/sitemap/sitemap-0.xml" rel="nofollow">https://yourwebsite.com/sitemap/sitemap-0.xml</a></p> <br> <div class="markdown-heading" dir="auto"><h1 tabindex="-1" class="heading-element" dir="auto">PWA</h1><a id="user-content-pwa" class="anchor" aria-label="Permalink: PWA" href="#pwa"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <p dir="auto">PWA support for any configured languages works out-of-the-box. All you need to do is to edit and localize the related settings fields in the content model named <code>SEO and PWA</code>:</p> <p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://camo.githubusercontent.com/471bea765cbd58699991f9675df75a27950c91bf81ceb8593920334fea9b35c5/68747470733a2f2f692e6962622e636f2f5750774b4d74512f53636865726d6174612d323032312d30392d31312d616c6c652d31372d34342d32312e706e67"><img src="https://camo.githubusercontent.com/471bea765cbd58699991f9675df75a27950c91bf81ceb8593920334fea9b35c5/68747470733a2f2f692e6962622e636f2f5750774b4d74512f53636865726d6174612d323032312d30392d31312d616c6c652d31372d34342d32312e706e67" alt="PWA Settings" data-canonical-src="https://i.ibb.co/WPwKMtQ/Schermata-2021-09-11-alle-17-44-21.png" style="max-width: 100%;"></a></p> <p dir="auto">As soon as you will add a new language on Dato and localize its PWA settings, a new webmanifest file named <code>manifest_<lang-code>.webmanifest</code> will be exported to the /public folder and dynamically injected to the <code><head></code>. Instead, the default language webmanifest will always be named <code>manifest.webmanifest</code>.</p> <p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://camo.githubusercontent.com/847fc42bf901f9b44a0c4aee79fd232dfd118b1517dcfefef106a3a13884ed04/68747470733a2f2f692e6962622e636f2f564e394a6d36762f69636f6e2e706e67"><img src="https://camo.githubusercontent.com/847fc42bf901f9b44a0c4aee79fd232dfd118b1517dcfefef106a3a13884ed04/68747470733a2f2f692e6962622e636f2f564e394a6d36762f69636f6e2e706e67" alt="PWA Icon" data-canonical-src="https://i.ibb.co/VN9Jm6v/icon.png" style="max-width: 100%;"></a> <a target="_blank" rel="noopener noreferrer nofollow" href="https://camo.githubusercontent.com/cf47114a189834b23249c950a20b20ae04c1dbf65827e2a7d78b1663f020c294/68747470733a2f2f692e6962622e636f2f76636e6b4667572f53636865726d6174612d323032312d30392d31312d616c6c652d31372d35372d32332e706e67"><img src="https://camo.githubusercontent.com/cf47114a189834b23249c950a20b20ae04c1dbf65827e2a7d78b1663f020c294/68747470733a2f2f692e6962622e636f2f76636e6b4667572f53636865726d6174612d323032312d30392d31312d616c6c652d31372d35372d32332e706e67" alt="Webmanifest files" data-canonical-src="https://i.ibb.co/vcnkFgW/Schermata-2021-09-11-alle-17-57-23.png" style="max-width: 100%;"></a></p> <p dir="auto">Favicon will be generated automatically, based on the above icon. PWA meta tags are already inserted manually to the <code><Helmet /></code> component in <em>/src/components/pageWrapper.jsx</em>.</p> <p dir="auto">If you wish to customize the manifest JSON schema, you can edit the <code>manifest</code> object variables in <em>gatsby-node.js</em>, bear in mind that icons are downloaded in different sizes by using different <code>imgixParams</code> and aliases in the dedicated query in <em>gatsby-node.js</em>.</p> <br> <div class="markdown-heading" dir="auto"><h1 tabindex="-1" class="heading-element" dir="auto">Redirect</h1><a id="user-content-redirect" class="anchor" aria-label="Permalink: Redirect" href="#redirect"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <p dir="auto">When the user visits the homepage in default language ("/") a redirect will always take place if the language included in the <code>Accept-Language</code> request header matches one of the website's <strong>secondary languages</strong>.</p> <p dir="auto">The redirect will be performed server-side and not in the browser.</p> <p dir="auto"><strong>When starting the development server you will notice a warning like:</strong></p> <blockquote> <p dir="auto">There are routes that match both page and redirect. Pages take precedence over redirects so the redirect will not work:</p> <ul dir="auto"> <li>page: "/" and redirect: "/" -> "/it/"</li> <li>page: "/" and redirect: "/" -> "/es-ES/"</li> <li>page: "/" and redirect: "/" -> "/ar-AE/"</li> </ul> </blockquote> <p dir="auto">Do not worry, the redirect will take place as expected 😃</p> <p dir="auto">Please take note that the redirect will work only once the website has been deployed to Gatsby Cloud and not during local development.</p> <blockquote> <p dir="auto">If for any reason you want to disable the redirect you can remove the lines ~45 to 60 in gatsby-node.js.</p> </blockquote> <br> <div class="markdown-heading" dir="auto"><h1 tabindex="-1" class="heading-element" dir="auto">404 page</h1><a id="user-content-404-page" class="anchor" aria-label="Permalink: 404 page" href="#404-page"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <p dir="auto">Content for 404 page can be localized on DatoCMS in the content model named <code>404 Page</code>.</p> <p dir="auto">Unfortunately, Gatsby doesn't allow to server-side render the 404 page on each request. Such page must be statically generated on each build.</p> <p dir="auto">However, content will always be rendered in correct language by following a different approach (in the browser):</p> <p dir="auto"><strong>Case 1 - Visiting a non-existent page for the very first time</strong></p> <p dir="auto">Assuming that the user never visited the website and tries to access a non-existent page, we try to find a match among the website languages and the browser available languages.</p> <p dir="auto"><strong>Example:</strong></p> <ul dir="auto"> <li> <p dir="auto">Browser Languages: <code>["de-CH", "en-US"]</code></p> </li> <li> <p dir="auto">Website Languages: <code>["fr", "en", "de"]</code></p> </li> </ul> <p dir="auto">In such case <code>de</code> is considered as the user's preferred language and they will see the correct localized content in German.</p> <p dir="auto">If there is no match, content in website default language will be rendered.</p> <p dir="auto">The preferred language is always evaluated according to the order priority of the browser (user) languages.</p> <p dir="auto"><strong>Case 2 - Visiting a non-existent page after having already browsed the website</strong></p> <p dir="auto">When the user switches the language a new <code>preferred_lang</code> value is stored/overwritten in <code>localStorage</code> and it will be used to render the correspondent localized data for the 404 page.</p> <p dir="auto">If the user never switched the language, we assume their preferred language is the website default language and content will be rendered accordingly.</p> <br> <div class="markdown-heading" dir="auto"><h1 tabindex="-1" class="heading-element" dir="auto">RTL text direction support</h1><a id="user-content-rtl-text-direction-support" class="anchor" aria-label="Permalink: RTL text direction support" href="#rtl-text-direction-support"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <p dir="auto">This starter has built-in support for any right-to-left language such as Hebrew or Arabic.</p> <p dir="auto">All you need to do is to add the language code to your DatoCMS languages list, set the fallbacks and start the dev server as explained above. If the language code matches one these <a href="https://meta.wikimedia.org/wiki/Template:List_of_language_names_ordered_by_code" rel="nofollow">lang codes</a>, once you switch the language, the layout direction will change accordingly.</p> <p dir="auto">It doesn't matter if you choose "ar" or "ar-AE", the correct language direction will always be identified and injected to the <code><html></code> <em>dir</em> attribute.</p> <div class="markdown-heading" dir="auto"><h2 tabindex="-1" class="heading-element" dir="auto">useTextDirection hook</h2><a id="user-content-usetextdirection-hook" class="anchor" aria-label="Permalink: useTextDirection hook" href="#usetextdirection-hook"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <p dir="auto">If for any reason you need to deeply style and change elements behavior according to the language direction, you can import the <code>useTextDirection</code> hook:</p> <div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import { useTextDirection } from '../../hooks/useTextDirection';"><pre><span class="pl-k">import</span> <span class="pl-kos">{</span> <span class="pl-s1">useTextDirection</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'../../hooks/useTextDirection'</span><span class="pl-kos">;</span></pre></div> <p dir="auto">And use it in any component / template:</p> <div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="const { isRtl } = useTextDirection(); return <span className={isRtl ? 'menuRight' : 'menuLeft'} />;"><pre><span class="pl-k">const</span> <span class="pl-kos">{</span> isRtl <span class="pl-kos">}</span> <span class="pl-c1">=</span> <span class="pl-en">useTextDirection</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span> <span class="pl-k">return</span> <span class="pl-c1"><</span><span class="pl-ent">span</span> <span class="pl-c1">className</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-s1">isRtl</span> ? <span class="pl-s">'menuRight'</span> : <span class="pl-s">'menuLeft'</span><span class="pl-kos">}</span> <span class="pl-c1">/</span><span class="pl-c1">></span><span class="pl-kos">;</span></pre></div> <br> <div class="markdown-heading" dir="auto"><h1 tabindex="-1" class="heading-element" dir="auto">Extending the starter</h1><a id="user-content-extending-the-starter" class="anchor" aria-label="Permalink: Extending the starter" href="#extending-the-starter"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <p dir="auto">If you are ok with the content structure of the starter you most likely won't need to extend it and follow those steps. In any case everything is explained below.</p> <div class="markdown-heading" dir="auto"><h2 tabindex="-1" class="heading-element" dir="auto">Removing fields</h2><a id="user-content-removing-fields" class="anchor" aria-label="Permalink: Removing fields" href="#removing-fields"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <p dir="auto">99% of the times that an issue occurs is because the fields or content models queried in the project files are not available anymore on DatoCMS. Gatsby can't find them and throws an error.</p> <p dir="auto">This can happen because:</p> <ul dir="auto"> <li>You renamed the field ID</li> <li>You deleted the field</li> <li>You renamed the content model ID</li> <li>You deleted the content model</li> </ul> <p dir="auto">Without deleting the field or renaming the field Id <strong>from the project files.</strong></p> <hr> <p dir="auto">For example, if you don't want the <code>author</code> field of the content model <code>blog_post</code> to be displayed in your post pages:</p> <p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://camo.githubusercontent.com/25d0512097b4e80fa3b45f76bc8d13e6ba8abd459bc4db9bfac1679aacf5af21/68747470733a2f2f692e6962622e636f2f515868426654722f53636865726d6174612d323032322d30322d31362d616c6c652d30312d34372d33372e706e67"><img src="https://camo.githubusercontent.com/25d0512097b4e80fa3b45f76bc8d13e6ba8abd459bc4db9bfac1679aacf5af21/68747470733a2f2f692e6962622e636f2f515868426654722f53636865726d6174612d323032322d30322d31362d616c6c652d30312d34372d33372e706e67" alt="" data-canonical-src="https://i.ibb.co/QXhBfTr/Schermata-2022-02-16-alle-01-47-37.png" style="max-width: 100%;"></a></p> <p dir="auto"><strong>1. Remove from any query the <code>author</code> field node:</strong></p> <div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="export const query = graphql` query BlogPostTemplateQuery( $id: String! $locale: String! ) { datoCmsBlogPost(id: { eq: $id }, locale: { eq: $locale }) { title subtitle author { // <--- Delete from here authorName: name } } // <--- To here ..."><pre><span class="pl-k">export</span> <span class="pl-k">const</span> <span class="pl-s1">query</span> <span class="pl-c1">=</span> <span class="pl-s1">graphql</span>` <span class="pl-s1">query</span> <span class="pl-v">BlogPostTemplateQuery</span><span class="pl-kos">(</span> <span class="pl-s1">$id</span>: <span class="pl-v">String</span><span class="pl-c1">!</span> <span class="pl-s1">$locale</span>: <span class="pl-v">String</span><span class="pl-c1">!</span> <span class="pl-kos">)</span> <span class="pl-kos">{</span> <span class="pl-en">datoCmsBlogPost</span><span class="pl-kos">(</span><span class="pl-s1">id</span>: <span class="pl-kos">{</span> <span class="pl-c1">eq</span>: <span class="pl-s1">$id</span> <span class="pl-kos">}</span><span class="pl-kos">,</span> <span class="pl-s1">locale</span>: <span class="pl-kos">{</span> <span class="pl-c1">eq</span>: <span class="pl-s1">$locale</span> <span class="pl-kos">}</span><span class="pl-kos">)</span> <span class="pl-kos">{</span> <span class="pl-s1">title</span> <span class="pl-s1">subtitle</span> <span class="pl-s1">author</span><span class="pl-kos"></span> <span class="pl-kos">{</span> <span class="pl-c">// <--- Delete from here</span> authorName: <span class="pl-s1">name</span> <span class="pl-kos">}</span> <span class="pl-kos">}</span> <span class="pl-c">// <--- To here</span> ...</pre></div> <p dir="auto"><strong>2. Delete any destructured prop:</strong></p> <div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="const BlogPostTemplate = ({ data: { datoCmsBlogPost: { title, subtitle, author: { // <-- Delete from here authorName, }, // <-- to here ..."><pre><span class="pl-k">const</span> <span class="pl-v">BlogPostTemplate</span> <span class="pl-c1">=</span> <span class="pl-kos">(</span><span class="pl-kos">{</span> <span class="pl-c1">data</span>: <span class="pl-kos">{</span> <span class="pl-c1">datoCmsBlogPost</span>: <span class="pl-kos">{</span> <span class="pl-s1">title</span><span class="pl-kos">,</span> subtitle<span class="pl-kos">,</span> <span class="pl-c1">author</span>: <span class="pl-kos">{</span> <span class="pl-c">// <-- Delete from here</span> authorName<span class="pl-kos">,</span> <span class="pl-kos">}</span><span class="pl-kos">,</span> <span class="pl-c">// <-- to here</span> ...</pre></div> <p dir="auto"><strong>3. Then remove any expression/variable displaying the data you were querying:</strong></p> <div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content=" return ( <Header> <AuthorDateContainer> <Author>{authorName}</Author> {/* <-- Delete this */} ..."><pre> <span class="pl-k">return</span> <span class="pl-kos">(</span> <span class="pl-c1"><</span><span class="pl-ent">Header</span><span class="pl-c1">></span> <span class="pl-c1"><</span><span class="pl-ent">AuthorDateContainer</span><span class="pl-c1">></span> <span class="pl-c1"><</span><span class="pl-ent">Author</span><span class="pl-c1">></span><span class="pl-kos">{</span><span class="pl-s1">authorName</span><span class="pl-kos">}</span><span class="pl-c1"><</span><span class="pl-c1">/</span><span class="pl-ent">Author</span><span class="pl-c1">></span> <span class="pl-kos">{</span><span class="pl-c">/* <-- Delete this */</span><span class="pl-kos">}</span> ...</pre></div> <p dir="auto">By taking advantage of your code editor search you can easily check if the field is still queried or rendered anywhere.</p> <p dir="auto"><strong>4. Once done that, you can safely delete the field from the content model on DatoCMS.</strong></p> <blockquote> <p dir="auto"><g-emoji class="g-emoji" alias="warning">⚠️</g-emoji> The only field you should never delete or rename the Id is the <code>slug</code> one. It is used to build the paths and by deleting/renaming it <em>gatsby-node</em> will throw an error. For any other field as long as you understood its purpose, you can safely get rid of it.</p> </blockquote> <br> <div class="markdown-heading" dir="auto"><h2 tabindex="-1" class="heading-element" dir="auto">Removing pages and templates</h2><a id="user-content-removing-pages-and-templates" class="anchor" aria-label="Permalink: Removing pages and templates" href="#removing-pages-and-templates"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <p dir="auto">If for example you want to remove any page included in the starter follow these steps:</p> <ol dir="auto"> <li>Identify the related content model on Dato and check where its fields are queried in the project files.</li> </ol> <p dir="auto">If the content model has this ID on Dato: <code>other_page</code> - The GraphQL fields to identify would be:</p> <ul dir="auto"> <li><code>datoCmsOtherPage</code></li> <li><code>allDatoCmsOtherPage</code></li> </ul> <p dir="auto">Hence the <code>datoCms</code> prefix and the snake_case converted to camelCase.</p> <ol start="2" dir="auto"> <li> <p dir="auto">With you code editor search for both field names among your project files and delete any prop destructuring, query or prop assignment.</p> </li> <li> <p dir="auto">Access <code>gatsby-node.js</code> and delete the block containing the query, the loop and the template declaration. You will find them grouped and preceded by a comment.</p> </li> <li> <p dir="auto">Delete the template used to generate such page.</p> </li> </ol> <br> <div class="markdown-heading" dir="auto"><h2 tabindex="-1" class="heading-element" dir="auto">Generating pages</h2><a id="user-content-generating-pages" class="anchor" aria-label="Permalink: Generating pages" href="#generating-pages"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <p dir="auto">If you wish to generate pages with your own path structure, the best thing you can do is to <strong>follow the comments</strong> in <code>gatsby-node.js</code> file.</p> <p dir="auto">The process is very quick and in short, all you have to do is to:</p> <ul dir="auto"> <li>Create a content model on DatoCMS <ul dir="auto"> <li>Define and localize the <code>slug</code> field</li> <li>Define and localze a <code>seo</code> field</li> <li>Define and localize all content fields</li> </ul> </li> <li>Create a dummy JSX template in <code>src/templates</code> just to test page generation</li> <li>Generate pages in <code>gatsby-node.js</code> using the dummy template and by querying the content model <code>originalId</code> and <code>slug</code>.</li> <li>Once pages and paths are generated properly, edit and build the template by querying and filtering the correct data.</li> </ul> <p dir="auto">As soon as pages are generated correctly you can switch between languages as this feature <strong>is already set up</strong>.</p> <br> <div class="markdown-heading" dir="auto"><h2 tabindex="-1" class="heading-element" dir="auto">Creating new templates</h2><a id="user-content-creating-new-templates" class="anchor" aria-label="Permalink: Creating new templates" href="#creating-new-templates"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <p dir="auto">When creating new templates, always import and wrap your template around the <code>PageWrapper</code> component.</p> <p dir="auto">Pass to the <code>pageData</code> prop the entire <code>pageContext</code> object:</p> <div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import { PageWrapper } from '../Layout/PageWrapper'; const BlogPostTemplate = ({ data, pageContext }) => ( <PageWrapper pageData={pageContext}> ..."><pre><span class="pl-k">import</span> <span class="pl-kos">{</span> <span class="pl-v">PageWrapper</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'../Layout/PageWrapper'</span><span class="pl-kos">;</span> <span class="pl-k">const</span> <span class="pl-v">BlogPostTemplate</span> <span class="pl-c1">=</span> <span class="pl-kos">(</span><span class="pl-kos">{</span> data<span class="pl-kos">,</span> pageContext <span class="pl-kos">}</span><span class="pl-kos">)</span> <span class="pl-c1">=></span> <span class="pl-kos">(</span> <span class="pl-c1"><</span><span class="pl-ent">PageWrapper</span> <span class="pl-c1">pageData</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-s1">pageContext</span><span class="pl-kos">}</span><span class="pl-c1">></span> ...</pre></div> <p dir="auto">Then any child component will have access to the page locale exported to the pageContext object during build time by <code>gatsby-node.js</code>. This is required in order to render proper links in any <code>Navigator</code> component and in <code>LanguageSwitcher</code> as well.</p> <br> <div class="markdown-heading" dir="auto"><h2 tabindex="-1" class="heading-element" dir="auto">Internal link navigation</h2><a id="user-content-internal-link-navigation" class="anchor" aria-label="Permalink: Internal link navigation" href="#internal-link-navigation"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <div class="markdown-heading" dir="auto"><h3 tabindex="-1" class="heading-element" dir="auto">Navigator component</h3><a id="user-content-navigator-component" class="anchor" aria-label="Permalink: Navigator component" href="#navigator-component"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <p dir="auto">When you need to render localized paths you have to use the built-in <strong>Navigator</strong> component. It's built on top of <a href="https://www.gatsbyjs.com/docs/reference/built-in-components/gatsby-link/" rel="nofollow">Gatsby Link</a> and supports any prop you would normally add to it such as <code>activeClassName</code>.</p> <p dir="auto">There are only two props in addition:</p> <markdown-accessiblity-table><table> <thead> <tr> <th>Prop</th> <th>Description</th> <th>Required</th> </tr> </thead> <tbody> <tr> <td>recordId</td> <td>The originalId field value of the record used to generate the page</td> <td>Yes</td> </tr> <tr> <td>passRef</td> <td>In case you need to pass a ref</td> <td>No</td> </tr> </tbody> </table></markdown-accessiblity-table> <p dir="auto">The component will take care of retrieving and render the proper path according to the page language.</p> <div class="markdown-heading" dir="auto"><h3 tabindex="-1" class="heading-element" dir="auto">Single link</h3><a id="user-content-single-link" class="anchor" aria-label="Permalink: Single link" href="#single-link"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <p dir="auto">Import the <strong>Navigator</strong> component in any of your template/component:</p> <div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import { Navigator } from '../../../Navigator';"><pre><span class="pl-k">import</span> <span class="pl-kos">{</span> <span class="pl-v">Navigator</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'../../../Navigator'</span><span class="pl-kos">;</span></pre></div> <p dir="auto">Query the <code>originalId</code> field of your record or content model (if a single instance) with GraphQL. You can use <code>useStaticQuery</code> as well:</p> <div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="export const query = graphql` query HomePageTemplate($locale: String!) { datoCmsBlogRoot(locale: { eq: $locale }) { id: originalId title } ..."><pre><span class="pl-k">export</span> <span class="pl-k">const</span> <span class="pl-s1">query</span> <span class="pl-c1">=</span> <span class="pl-s1">graphql</span>` <span class="pl-s1">query</span> <span class="pl-v">HomePageTemplate</span><span class="pl-kos">(</span><span class="pl-s1">$locale</span>: <span class="pl-v">String</span><span class="pl-c1">!</span><span class="pl-kos">)</span> <span class="pl-kos">{</span> <span class="pl-en">datoCmsBlogRoot</span><span class="pl-kos">(</span><span class="pl-s1">locale</span>: <span class="pl-kos">{</span> <span class="pl-c1">eq</span>: <span class="pl-s1">$locale</span> <span class="pl-kos">}</span><span class="pl-kos">)</span> <span class="pl-kos">{</span> id: <span class="pl-s1">originalId</span> <span class="pl-s1">title</span> <span class="pl-kos">}</span> ...</pre></div> <p dir="auto">Then pass the field value to the prop <code>recordId</code>:</p> <div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="<Navigator recordId={data.datoCmsBlogRoot.id}> {data.datoCmsBlogRoot.title} </Navigator>"><pre><span class="pl-c1"><</span><span class="pl-ent">Navigator</span> <span class="pl-c1">recordId</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-s1">data</span><span class="pl-kos">.</span><span class="pl-c1">datoCmsBlogRoot</span><span class="pl-kos">.</span><span class="pl-c1">id</span><span class="pl-kos">}</span><span class="pl-c1">></span> <span class="pl-kos">{</span><span class="pl-s1">data</span><span class="pl-kos">.</span><span class="pl-c1">datoCmsBlogRoot</span><span class="pl-kos">.</span><span class="pl-c1">title</span><span class="pl-kos">}</span> <span class="pl-c1"><</span><span class="pl-c1">/</span><span class="pl-ent">Navigator</span><span class="pl-c1">></span></pre></div> <p dir="auto">That's it. Now in any page the link is displayed with the proper path according to the page language.</p> <div class="markdown-heading" dir="auto"><h3 tabindex="-1" class="heading-element" dir="auto">Dynamic link with StructuredText</h3><a id="user-content-dynamic-link-with-structuredtext" class="anchor" aria-label="Permalink: Dynamic link with StructuredText" href="#dynamic-link-with-structuredtext"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <p dir="auto">Since DatoCMS provides a set of <a href="https://www.npmjs.com/package/react-datocms" rel="nofollow">components</a> to work faster with React, it is possible to automate the rendering of any link or block <strong>included</strong> in a Structured Text Field with a custom component. The complete documentation can be found <a href="https://github.com/datocms/react-datocms#custom-renderers">here</a>.</p> <p dir="auto">This is so far the best approach because you will set the template only once, then your content editors will add new records and create links with no further intervention on your behalf.</p> <p dir="auto">Of course this is <strong>already set up for you</strong> in the starter templates but in case you want to create new ones, those are the steps you have to follow:</p> <ol dir="auto"> <li>Add a structured text field to your content model:</li> </ol> <p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://camo.githubusercontent.com/0c9c258be0f41ed3214f0759cdc839dfec1f7179b8360f59bcf20a8f831951a6/68747470733a2f2f692e6962622e636f2f7251596a64777a2f53636865726d6174612d323032322d30322d31362d616c6c652d31312d34382d35382e706e67"><img src="https://camo.githubusercontent.com/0c9c258be0f41ed3214f0759cdc839dfec1f7179b8360f59bcf20a8f831951a6/68747470733a2f2f692e6962622e636f2f7251596a64777a2f53636865726d6174612d323032322d30322d31362d616c6c652d31312d34382d35382e706e67" alt="" data-canonical-src="https://i.ibb.co/rQYjdwz/Schermata-2022-02-16-alle-11-48-58.png" style="max-width: 100%;"></a></p> <p dir="auto">In the field settings specify from which content models the editors are allowed to add links:</p> <p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://camo.githubusercontent.com/839ece3ae000268a21631215bdb66c9f7f880e73879e06b3cdb69a5c24a8d43d/68747470733a2f2f692e6962622e636f2f463031666379352f53636865726d6174612d323032312d30382d30322d616c6c652d31312d32352d31352e706e67"><img src="https://camo.githubusercontent.com/839ece3ae000268a21631215bdb66c9f7f880e73879e06b3cdb69a5c24a8d43d/68747470733a2f2f692e6962622e636f2f463031666379352f53636865726d6174612d323032312d30382d30322d616c6c652d31312d32352d31352e706e67" alt="" data-canonical-src="https://i.ibb.co/F01fcy5/Schermata-2021-08-02-alle-11-25-15.png" style="max-width: 100%;"></a></p> <p dir="auto">Links will be available for selection to your content editors when writing posts:</p> <p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://camo.githubusercontent.com/94c6b9d89e79fa2b63e2fd658ccbb092ff479c3a9f419dd5ad06fc0f54e2bfaa/68747470733a2f2f692e706f7374696d672e63632f71525035344e4d782f496c2d6d696f2d66696c6d61746f2e676966"><img src="https://camo.githubusercontent.com/94c6b9d89e79fa2b63e2fd658ccbb092ff479c3a9f419dd5ad06fc0f54e2bfaa/68747470733a2f2f692e706f7374696d672e63632f71525035344e4d782f496c2d6d696f2d66696c6d61746f2e676966" width="600px" data-animated-image="" data-canonical-src="https://i.postimg.cc/qRP54NMx/Il-mio-filmato.gif" style="max-width: 100%;"></a></p> <br> <ol start="2" dir="auto"> <li>Query the structured text field:</li> </ol> <div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="export const query = graphql` query BlogPostTemplateQuery( $id: String! $locale: String! ) { datoCmsBlogPost(originalId: { eq: $id }, locale: { eq: $locale }) { structuredText { value links { ... on DatoCmsBlogPost { id: originalId } ... on DatoCmsOtherPage { id: originalId } ... on DatoCmsHomepage { id: originalId } ... on DatoCmsBlogRoot { id: originalId } } value } ..."><pre><span class="pl-k">export</span> <span class="pl-k">const</span> <span class="pl-s1">query</span> <span class="pl-c1">=</span> <span class="pl-s1">graphql</span>` <span class="pl-s1">query</span> <span class="pl-v">BlogPostTemplateQuery</span><span class="pl-kos">(</span> <span class="pl-s1">$id</span>: <span class="pl-v">String</span><span class="pl-c1">!</span> <span class="pl-s1">$locale</span>: <span class="pl-v">String</span><span class="pl-c1">!</span> <span class="pl-kos">)</span> <span class="pl-kos">{</span> <span class="pl-en">datoCmsBlogPost</span><span class="pl-kos">(</span><span class="pl-s1">originalId</span>: <span class="pl-kos">{</span> <span class="pl-c1">eq</span>: <span class="pl-s1">$id</span> <span class="pl-kos">}</span><span class="pl-kos">,</span> <span class="pl-s1">locale</span>: <span class="pl-kos">{</span> <span class="pl-c1">eq</span>: <span class="pl-s1">$locale</span> <span class="pl-kos">}</span><span class="pl-kos">)</span> <span class="pl-kos">{</span> <span class="pl-s1">structuredText</span> <span class="pl-kos">{</span> <span class="pl-s1">value</span> <span class="pl-s1">links</span><span class="pl-kos"></span> <span class="pl-kos">{</span> ... <span class="pl-s1">on</span> <span class="pl-v">DatoCmsBlogPost</span> <span class="pl-kos">{</span> <span class="pl-s1">id</span>: <span class="pl-s1">originalId</span> <span class="pl-kos">}</span> <span class="pl-kos">.</span><span class="pl-kos">.</span><span class="pl-kos">.</span> <span class="pl-c1">on</span> <span class="pl-v">DatoCmsOtherPage</span> <span class="pl-kos">{</span> <span class="pl-c1">id</span>: <span class="pl-s1">originalId</span> <span class="pl-kos">}</span> <span class="pl-kos">.</span><span class="pl-kos">.</span><span class="pl-kos">.</span> <span class="pl-c1">on</span> <span class="pl-v">DatoCmsHomepage</span> <span class="pl-kos">{</span> <span class="pl-c1">id</span>: <span class="pl-s1">originalId</span> <span class="pl-kos">}</span> <span class="pl-kos">.</span><span class="pl-kos">.</span><span class="pl-kos">.</span> <span class="pl-c1">on</span> <span class="pl-v">DatoCmsBlogRoot</span> <span class="pl-kos">{</span> id: <span class="pl-s1">originalId</span> <span class="pl-kos">}</span> <span class="pl-kos">}</span> <span class="pl-s1">value</span> <span class="pl-kos">}</span> ...</pre></div> <blockquote> <p dir="auto"><g-emoji class="g-emoji" alias="warning">⚠️</g-emoji> You will always have to query the <code>originalId</code> field with the <strong><ins>alias id</ins></strong> for each fragment representing the content models you allowed to be linked in the Structured text field:</p> </blockquote> <ol start="2" dir="auto"> <li>Import both StructuredText and Navigator in your template/component:</li> </ol> <div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import { StructuredText } from 'react-datocms'; import { Navigator } from '../components/LanguageHelpers/Navigator';"><pre><span class="pl-k">import</span> <span class="pl-kos">{</span> <span class="pl-v">StructuredText</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'react-datocms'</span><span class="pl-kos">;</span> <span class="pl-k">import</span> <span class="pl-kos">{</span> <span class="pl-v">Navigator</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'../components/LanguageHelpers/Navigator'</span><span class="pl-kos">;</span></pre></div> <ol start="3" dir="auto"> <li>Use Navigator as renderer for the <code>renderLinkToRecord</code> prop and pass the id field to it:</li> </ol> <div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="const BlogPostTemplate = ({ data, pageContext }) => ( <PageWrapper pageData={pageContext}> <ArticleBody> {data.datoCmsBlogPost.structuredText?.value && ( <StructuredText key={id} data={structuredText} renderLinkToRecord={({ record, children, transformedMeta, }) => ( <Navigator {...transformedMeta} recordId={record.id}> {children} </Navigator> )} /> )} </ArticleBody> ..."><pre><span class="pl-k">const</span> <span class="pl-v">BlogPostTemplate</span> <span class="pl-c1">=</span> <span class="pl-kos">(</span><span class="pl-kos">{</span> data<span class="pl-kos">,</span> pageContext <span class="pl-kos">}</span><span class="pl-kos">)</span> <span class="pl-c1">=></span> <span class="pl-kos">(</span> <span class="pl-c1"><</span><span class="pl-ent">PageWrapper</span> <span class="pl-c1">pageData</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-s1">pageContext</span><span class="pl-kos">}</span><span class="pl-c1">></span> <span class="pl-c1"><</span><span class="pl-ent">ArticleBody</span><span class="pl-c1">></span> <span class="pl-kos">{</span><span class="pl-s1">data</span><span class="pl-kos">.</span><span class="pl-c1">datoCmsBlogPost</span><span class="pl-kos">.</span><span class="pl-c1">structuredText</span><span class="pl-kos">?.</span><span class="pl-c1">value</span> <span class="pl-c1">&&</span> <span class="pl-kos">(</span> <span class="pl-c1"><</span><span class="pl-ent">StructuredText</span> <span class="pl-c1">key</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-s1">id</span><span class="pl-kos">}</span> <span class="pl-c1">data</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-s1">structuredText</span><span class="pl-kos">}</span> <span class="pl-c1">renderLinkToRecord</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-kos">(</span><span class="pl-kos">{</span> record<span class="pl-kos">,</span> children<span class="pl-kos">,</span> transformedMeta<span class="pl-kos">,</span> <span class="pl-kos">}</span><span class="pl-kos">)</span> <span class="pl-c1">=></span> <span class="pl-kos">(</span> <span class="pl-c1"><</span><span class="pl-ent">Navigator</span> <span class="pl-kos">{</span>...<span class="pl-s1">transformedMeta</span><span class="pl-kos">}</span> <span class="pl-c1">recordId</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-s1">record</span><span class="pl-kos">.</span><span class="pl-c1">id</span><span class="pl-kos">}</span><span class="pl-c1">></span> <span class="pl-kos">{</span><span class="pl-s1">children</span><span class="pl-kos">}</span> <span class="pl-c1"><</span><span class="pl-c1">/</span><span class="pl-ent">Navigator</span><span class="pl-c1">></span> <span class="pl-kos">)</span><span class="pl-kos">}</span> <span class="pl-c1">/</span><span class="pl-c1">></span> <span class="pl-kos">)</span><span class="pl-kos">}</span> <span class="pl-c1"><</span><span class="pl-c1">/</span><span class="pl-ent">ArticleBody</span><span class="pl-c1">></span> ...</pre></div> <blockquote> <p dir="auto">Spread <code>{...transformedMeta}</code> to render any custom attribute you set on Dato when adding the link. Of course you can localize those attributes as long as the Structured Text field is set as localizable.</p> </blockquote> <br> <div class="markdown-heading" dir="auto"><h2 tabindex="-1" class="heading-element" dir="auto">Template design strategy</h2><a id="user-content-template-design-strategy" class="anchor" aria-label="Permalink: Template design strategy" href="#template-design-strategy"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <blockquote> <p dir="auto"><ins>Example case</ins>: You are going to create three pages with different layout and content: <code>/contact, /about, /mission</code>.</p> </blockquote> <div class="markdown-heading" dir="auto"><h3 tabindex="-1" class="heading-element" dir="auto">Typical approach</h3><a id="user-content-typical-approach" class="anchor" aria-label="Permalink: Typical approach" href="#typical-approach"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <p dir="auto">You create a single instance content model for each page with its own data fields or blocks, and then query, filter and render those fields in three different templates like <code>ContactPage.jsx</code>, <code>AboutPage.jsx</code> and <code>Mission.jsx</code>.</p> <p dir="auto">The template file will render the data of each single field of the content model:</p> <div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="const ContactPageTemplate = ({ data, pageContext }) => ( <PageWrapper pageData={pageContext}> <Heading>{data.datoCmsContactPage.title}</Heading> <SubHeading>{data.datoCmsContactPage.subtitle}</SubHeading> <Hero title={data.datoCmsContactPage.hero.heroTitle} subtitle={data.datoCmsContactPage.hero.heroTitle} > </PageWrapper> ); export default ContactPageTemplate; export const query = graphql` query ContactPageQuery() { datoCmsContactPage(locale: $locale) { title subtitle hero { heroTitle heroSubtitle } } } `;"><pre><span class="pl-k">const</span> <span class="pl-v">ContactPageTemplate</span> <span class="pl-c1">=</span> <span class="pl-kos">(</span><span class="pl-kos">{</span> data<span class="pl-kos">,</span> pageContext <span class="pl-kos">}</span><span class="pl-kos">)</span> <span class="pl-c1">=></span> <span class="pl-kos">(</span> <span class="pl-c1"><</span><span class="pl-ent">PageWrapper</span> <span class="pl-c1">pageData</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-s1">pageContext</span><span class="pl-kos">}</span><span class="pl-c1">></span> <span class="pl-c1"><</span><span class="pl-ent">Heading</span><span class="pl-c1">></span><span class="pl-kos">{</span><span class="pl-s1">data</span><span class="pl-kos">.</span><span class="pl-c1">datoCmsContactPage</span><span class="pl-kos">.</span><span class="pl-c1">title</span><span class="pl-kos">}</span><span class="pl-c1"><</span><span class="pl-c1">/</span><span class="pl-ent">Heading</span><span class="pl-c1">></span> <span class="pl-c1"><</span><span class="pl-ent">SubHeading</span><span class="pl-c1">></span><span class="pl-kos">{</span><span class="pl-s1">data</span><span class="pl-kos">.</span><span class="pl-c1">datoCmsContactPage</span><span class="pl-kos">.</span><span class="pl-c1">subtitle</span><span class="pl-kos">}</span><span class="pl-c1"><</span><span class="pl-c1">/</span><span class="pl-ent">SubHeading</span><span class="pl-c1">></span> <span class="pl-c1"><</span><span class="pl-ent">Hero</span> <span class="pl-c1">title</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-s1">data</span><span class="pl-kos">.</span><span class="pl-c1">datoCmsContactPage</span><span class="pl-kos">.</span><span class="pl-c1">hero</span><span class="pl-kos">.</span><span class="pl-c1">heroTitle</span><span class="pl-kos">}</span> <span class="pl-c1">subtitle</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-s1">data</span><span class="pl-kos">.</span><span class="pl-c1">datoCmsContactPage</span><span class="pl-kos">.</span><span class="pl-c1">hero</span><span class="pl-kos">.</span><span class="pl-c1">heroTitle</span><span class="pl-kos">}</span> <span class="pl-c1">></span> <span class="pl-c1"><</span><span class="pl-c1">/</span><span class="pl-ent">PageWrapper</span><span class="pl-c1">></span> ); export default ContactPageTemplate; export const query = graphql` query ContactPageQuery() <span class="pl-kos">{</span> <span class="pl-en">datoCmsContactPage</span><span class="pl-kos">(</span><span class="pl-s1">locale</span>: <span class="pl-s1">$locale</span><span class="pl-kos">)</span><span class="pl-kos"></span> <span class="pl-kos">{</span> <span class="pl-s1">title</span> <span class="pl-s1">subtitle</span> <span class="pl-s1">hero</span> <span class="pl-kos">{</span> <span class="pl-s1">heroTitle</span> <span class="pl-s1">heroSubtitle</span> <span class="pl-kos">}</span> <span class="pl-kos">}</span> <span class="pl-kos">}</span> `<span class="pl-kos">;</span></pre></div> <p dir="auto">Then you repeat those steps for any other page like <code>/about</code> and <code>/mission</code>.</p> <p dir="auto">So at the end of your journey you will have <ins>three</ins> different single-instance content models on Dato, <ins>three</ins> different templates in your project folder and <ins>three</ins> different queries for each template.</p> <blockquote> <p dir="auto">This approach has been used to generate the homepage, the categories archive page and the blog root page of this starter.</p> </blockquote> <div class="markdown-heading" dir="auto"><h3 tabindex="-1" class="heading-element" dir="auto">Structured text approach</h3><a id="user-content-structured-text-approach" class="anchor" aria-label="Permalink: Structured text approach" href="#structured-text-approach"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <p dir="auto">Instead of creating a single-instance content model for each page, you can create <ins>one</ins> content model of type <ins>collection</ins>, add the mandatory shared fields such as <code>seo</code> and <code>slug</code> and then add a <ins>single</ins> Structured text field to hold all your content.</p> <p dir="auto">Then you can create one record for each page you want to generate and inside each Structured Text field add <strong>different blocks</strong> according to the page layout and content.</p> <p dir="auto">Once your records are ready with different content per Structured Text field you can set <strong>custom renderers</strong> inside the StructuredText component in a <strong>single shared template file</strong>.</p> <p dir="auto">At the end of this journey you will have, <ins>one</ins> template for all the pages you are going to generate, <ins>one</ins> query to retrieve all different data and <ins>one</ins> model of type collection.</p> <blockquote> <p dir="auto">This approach has been used to generate the <code>/guide</code> and <code>/features</code> pages of this starter by using the template <code>OtherPages.jsx</code>.</p> </blockquote> <p dir="auto">The best way to understand how it works is to read this <a href="https://www.cantierecreativo.net/blog/how-to-use-datocms-s-awesome-structured-text-field-in-a-nextjs-app/" rel="nofollow">article</a> from the authors of DatoCMS and also to check the project files.</p> <p dir="auto">This opens the doors to different scenarios where for example, your content editors create pages, build the layout using a friendly UI completely without any developer intervention, just like they used to do with many Wordpress page builders.</p> <br> <div class="markdown-heading" dir="auto"><h2 tabindex="-1" class="heading-element" dir="auto">Accessing languages</h2><a id="user-content-accessing-languages" class="anchor" aria-label="Permalink: Accessing languages" href="#accessing-languages"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <p dir="auto">You most like won't need to but if you want to access the <code>pageLocale</code>, you can call this hook in any component file used in any of your templates:</p> <div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import { usePageLocale } from '/src/hooks/usePageLocale';"><pre><span class="pl-k">import</span> <span class="pl-kos">{</span> <span class="pl-s1">usePageLocale</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'/src/hooks/usePageLocale'</span><span class="pl-kos">;</span></pre></div> <p dir="auto">And use it:</p> <div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="const { pageLocale } = usePageLocale(); console.log(pageLocale); // Logs "es-ES""><pre><span class="pl-k">const</span> <span class="pl-kos">{</span> pageLocale <span class="pl-kos">}</span> <span class="pl-c1">=</span> <span class="pl-en">usePageLocale</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span> <span class="pl-smi">console</span><span class="pl-kos">.</span><span class="pl-en">log</span><span class="pl-kos">(</span><span class="pl-s1">pageLocale</span><span class="pl-kos">)</span><span class="pl-kos">;</span> <span class="pl-c">// Logs "es-ES"</span></pre></div> <blockquote> <p dir="auto"><g-emoji class="g-emoji" alias="warning">⚠️</g-emoji> Do not call this hook in your template files, call it in any component file and use it in your templates.</p> </blockquote> <p dir="auto">Same for the website languages:</p> <div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import { useLocales } from '/src/hooks/useLocales';"><pre><span class="pl-k">import</span> <span class="pl-kos">{</span> <span class="pl-s1">useLocales</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'/src/hooks/useLocales'</span><span class="pl-kos">;</span></pre></div> <div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="const { locales, defaultLocale } = usedefaultLocale(); console.log(locales); // Logs ["en", "es", "it"] console.log(defaultLocale); // Logs "en""><pre><span class="pl-k">const</span> <span class="pl-kos">{</span> locales<span class="pl-kos">,</span> defaultLocale <span class="pl-kos">}</span> <span class="pl-c1">=</span> <span class="pl-en">usedefaultLocale</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span> <span class="pl-smi">console</span><span class="pl-kos">.</span><span class="pl-en">log</span><span class="pl-kos">(</span><span class="pl-s1">locales</span><span class="pl-kos">)</span><span class="pl-kos">;</span> <span class="pl-c">// Logs ["en", "es", "it"]</span> <span class="pl-smi">console</span><span class="pl-kos">.</span><span class="pl-en">log</span><span class="pl-kos">(</span><span class="pl-s1">defaultLocale</span><span class="pl-kos">)</span><span class="pl-kos">;</span> <span class="pl-c">// Logs "en"</span></pre></div> <br> <div class="markdown-heading" dir="auto"><h2 tabindex="-1" class="heading-element" dir="auto">Formatting date and time</h2><a id="user-content-formatting-date-and-time" class="anchor" aria-label="Permalink: Formatting date and time" href="#formatting-date-and-time"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <p dir="auto">By default date strings coming from GraphQL queries:</p> <div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="query { datoCmsBlogPost { meta { firstPublishedAt // <-- Always returns "2021-07-19T12:12:15.597+02:00" } } }"><pre><span class="pl-s1">query</span> <span class="pl-kos">{</span> <span class="pl-s1">datoCmsBlogPost</span><span class="pl-kos"></span> <span class="pl-kos">{</span> <span class="pl-s1">meta</span> <span class="pl-kos">{</span> <span class="pl-s1">firstPublishedAt</span> <span class="pl-c">// <-- Always returns "2021-07-19T12:12:15.597+02:00"</span> <span class="pl-kos">}</span> <span class="pl-kos">}</span> <span class="pl-kos">}</span></pre></div> <p dir="auto">Are formatted according to the <strong>page language</strong> and the following <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleString" rel="nofollow">options</a>:</p> <div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="const timeOptions = { hour: '2-digit', minute: '2-digit', }; // Time: 23:30 ("it") or 11:30 PM ("en") const dateOptions = { year: 'numeric', month: 'short', day: 'numeric', }; // Date: 23 Nov 2020 ("it") or Nov 23, 2020 ("en")"><pre><span class="pl-k">const</span> <span class="pl-s1">timeOptions</span> <span class="pl-c1">=</span> <span class="pl-kos">{</span> <span class="pl-c1">hour</span>: <span class="pl-s">'2-digit'</span><span class="pl-kos">,</span> <span class="pl-c1">minute</span>: <span class="pl-s">'2-digit'</span><span class="pl-kos">,</span> <span class="pl-kos">}</span><span class="pl-kos">;</span> <span class="pl-c">// Time: 23:30 ("it") or 11:30 PM ("en")</span> <span class="pl-k">const</span> <span class="pl-s1">dateOptions</span> <span class="pl-c1">=</span> <span class="pl-kos">{</span> <span class="pl-c1">year</span>: <span class="pl-s">'numeric'</span><span class="pl-kos">,</span> <span class="pl-c1">month</span>: <span class="pl-s">'short'</span><span class="pl-kos">,</span> <span class="pl-c1">day</span>: <span class="pl-s">'numeric'</span><span class="pl-kos">,</span> <span class="pl-kos">}</span><span class="pl-kos">;</span> <span class="pl-c">// Date: 23 Nov 2020 ("it") or Nov 23, 2020 ("en")</span></pre></div> <p dir="auto">Options can be edited in <code>src/functions/formatDateTime.js</code>.</p> <p dir="auto">There are two functions in the above mentioned file:</p> <p dir="auto"><code>formatDate(dateString, pageLocale)</code> - Returns <code>Jul 17, 2021</code> or <code>17 lug 2021</code> according to the page locale</p> <p dir="auto"><code>formatDateTime(dateString, pageLocale)</code> - Returns <code>Feb 10, 2022, 12:20 PM</code> or <code>10 feb 2022, 12:21</code></p> <div class="markdown-heading" dir="auto"><h3 tabindex="-1" class="heading-element" dir="auto">useFormattedDate hook</h3><a id="user-content-useformatteddate-hook" class="anchor" aria-label="Permalink: useFormattedDate hook" href="#useformatteddate-hook"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <p dir="auto">To quickly format the date coming from any DatoCMS / GraphQL field, import the hook:</p> <div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import { useFormattedDate } from '../hooks/useFormattedDate';"><pre><span class="pl-k">import</span> <span class="pl-kos">{</span> <span class="pl-s1">useFormattedDate</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'../hooks/useFormattedDate'</span><span class="pl-kos">;</span></pre></div> <p dir="auto">And use it:</p> <div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="datoCmsBlogPost(originalId: { eq: $id }, locale: { eq: $locale }) { meta { updatedAt } ... const { formattedDate } = useFormattedDate(data.datoCmsBlogPost.meta.updatedAt); <time>{formattedDate}</time>"><pre><span class="pl-en">datoCmsBlogPost</span><span class="pl-kos">(</span><span class="pl-s1">originalId</span>: <span class="pl-kos">{</span> <span class="pl-c1">eq</span>: <span class="pl-s1">$id</span> <span class="pl-kos">}</span><span class="pl-kos">,</span> <span class="pl-s1">locale</span>: <span class="pl-kos">{</span> <span class="pl-c1">eq</span>: <span class="pl-s1">$locale</span> <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos"></span> <span class="pl-kos">{</span> <span class="pl-s1">meta</span> <span class="pl-kos">{</span> <span class="pl-s1">updatedAt</span> <span class="pl-kos">}</span> ... <span class="pl-k">const</span> <span class="pl-kos">{</span> formattedDate <span class="pl-kos">}</span> <span class="pl-c1">=</span> <span class="pl-en">useFormattedDate</span><span class="pl-kos">(</span><span class="pl-s1">data</span><span class="pl-kos">.</span><span class="pl-c1">datoCmsBlogPost</span><span class="pl-kos">.</span><span class="pl-c1">meta</span><span class="pl-kos">.</span><span class="pl-c1">updatedAt</span><span class="pl-kos">)</span><span class="pl-kos">;</span> <span class="pl-c1"><</span><span class="pl-ent">time</span><span class="pl-c1">></span><span class="pl-kos">{</span><span class="pl-s1">formattedDate</span><span class="pl-kos">}</span><span class="pl-c1"><</span><span class="pl-c1">/</span><span class="pl-ent">time</span><span class="pl-c1">></span><span class="pl-kos"></span></pre></div> <br> <div class="markdown-heading" dir="auto"><h2 tabindex="-1" class="heading-element" dir="auto">Increase categories number displayed by the dropdown</h2><a id="user-content-increase-categories-number-displayed-by-the-dropdown" class="anchor" aria-label="Permalink: Increase categories number displayed by the dropdown" href="#increase-categories-number-displayed-by-the-dropdown"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <p dir="auto">If you want to increase the number of categories displayed by the dropdown, you can edit the file <code>src/components/Layout/Header/Full</code> and increase the <code>end</code> parameter of the <code>Array.prototype.slice()</code> of the following variable:</p> <div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="const categoryNodesMatch = categoryNodes .filter(({ locale }) => locale === pageLocale) .slice(0, 6); // <-- Increase it"><pre><span class="pl-k">const</span> <span class="pl-s1">categoryNodesMatch</span> <span class="pl-c1">=</span> <span class="pl-s1">categoryNodes</span> <span class="pl-kos">.</span><span class="pl-en">filter</span><span class="pl-kos">(</span><span class="pl-kos">(</span><span class="pl-kos">{</span> locale <span class="pl-kos">}</span><span class="pl-kos">)</span> <span class="pl-c1">=></span> <span class="pl-s1">locale</span> <span class="pl-c1">===</span> <span class="pl-s1">pageLocale</span><span class="pl-kos">)</span> <span class="pl-kos">.</span><span class="pl-en">slice</span><span class="pl-kos">(</span><span class="pl-c1">0</span><span class="pl-kos">,</span> <span class="pl-c1">6</span><span class="pl-kos">)</span><span class="pl-kos">;</span> <span class="pl-c">// <-- Increase it</span></pre></div> <br> <div class="markdown-heading" dir="auto"><h2 tabindex="-1" class="heading-element" dir="auto">SEO</h2><a id="user-content-seo-1" class="anchor" aria-label="Permalink: SEO" href="#seo-1"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <p dir="auto">Each template must be wrapped in the component named <code><PageWrapper /></code> which accepts also three SEO-related props:</p> <markdown-accessiblity-table><table> <thead> <tr> <th>prop</th> <th>type</th> <th>description</th> </tr> </thead> <tbody> <tr> <td><code>seoTitle</code></td> <td>string</td> <td>Accepts the title defined in the <code>seo</code> field on any content model</td> </tr> <tr> <td><code>seoDescription</code></td> <td>string</td> <td>Accepts the description defined in the <code>seo</code> field on any content model</td> </tr> <tr> <td><code>seoImage</code></td> <td>string</td> <td>Accepts the image url uploaded in the <code>seo</code> field on any content model</td> </tr> </tbody> </table></markdown-accessiblity-table> <p dir="auto">If the fields return undefined or you don't set the props at all, global SEO fields will be rendered.</p> <div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="const HomePageTemplate = ({ data, pageContext }) => ( <PageWrapper pageData={pageContext} seoTitle={data.datoCmsHomepage.seo?.title} seoDescription={data.datoCmsHomepage.seo?.description} seoImage={data.datoCmsHomepage.seo?.image?.url} > ... export const query = graphql` query HomePageTemplate($locale: String!) { datoCmsHomepage(locale: { eq: $locale }) { seo { title description image { url } } ..."><pre><span class="pl-k">const</span> <span class="pl-v">HomePageTemplate</span> <span class="pl-c1">=</span> <span class="pl-kos">(</span><span class="pl-kos">{</span> data<span class="pl-kos">,</span> pageContext <span class="pl-kos">}</span><span class="pl-kos">)</span> <span class="pl-c1">=></span> <span class="pl-kos">(</span> <span class="pl-c1"><</span><span class="pl-ent">PageWrapper</span> <span class="pl-c1">pageData</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-s1">pageContext</span><span class="pl-kos">}</span> <span class="pl-c1">seoTitle</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-s1">data</span><span class="pl-kos">.</span><span class="pl-c1">datoCmsHomepage</span><span class="pl-kos">.</span><span class="pl-c1">seo</span><span class="pl-kos">?.</span><span class="pl-c1">title</span><span class="pl-kos">}</span> <span class="pl-c1">seoDescription</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-s1">data</span><span class="pl-kos">.</span><span class="pl-c1">datoCmsHomepage</span><span class="pl-kos">.</span><span class="pl-c1">seo</span><span class="pl-kos">?.</span><span class="pl-c1">description</span><span class="pl-kos">}</span> <span class="pl-c1">seoImage</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-s1">data</span><span class="pl-kos">.</span><span class="pl-c1">datoCmsHomepage</span><span class="pl-kos">.</span><span class="pl-c1">seo</span><span class="pl-kos">?.</span><span class="pl-c1">image</span><span class="pl-kos">?.</span><span class="pl-c1">url</span><span class="pl-kos">}</span> <span class="pl-c1">></span> ... export const query = graphql` query HomePageTemplate($locale: String!) <span class="pl-kos">{</span> <span class="pl-en">datoCmsHomepage</span><span class="pl-kos">(</span><span class="pl-s1">locale</span>: <span class="pl-kos">{</span> <span class="pl-c1">eq</span>: <span class="pl-s1">$locale</span> <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos"></span> <span class="pl-kos">{</span> <span class="pl-s1">seo</span> <span class="pl-kos">{</span> <span class="pl-s1">title</span> <span class="pl-s1">description</span> <span class="pl-s1">image</span> <span class="pl-kos">{</span> url <span class="pl-kos">}</span> <span class="pl-kos">}</span> ...</pre></div> <br> <div class="markdown-heading" dir="auto"><h1 tabindex="-1" class="heading-element" dir="auto">Troubleshooting</h1><a id="user-content-troubleshooting" class="anchor" aria-label="Permalink: Troubleshooting" href="#troubleshooting"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <div class="markdown-heading" dir="auto"><h2 tabindex="-1" class="heading-element" dir="auto">Navigator</h2><a id="user-content-navigator" class="anchor" aria-label="Permalink: Navigator" href="#navigator"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://camo.githubusercontent.com/8e800b23af8249e17fa898df1b9174cf4445979dcc640328a28c6dc94d38f0b6/68747470733a2f2f692e6962622e636f2f4c703062777a792f53636865726d6174612d323032322d30322d31382d616c6c652d31372d33312d34342e706e67"><img src="https://camo.githubusercontent.com/8e800b23af8249e17fa898df1b9174cf4445979dcc640328a28c6dc94d38f0b6/68747470733a2f2f692e6962622e636f2f4c703062777a792f53636865726d6174612d323032322d30322d31382d616c6c652d31372d33312d34342e706e67" alt="" data-canonical-src="https://i.ibb.co/Lp0bwzy/Schermata-2022-02-18-alle-17-31-44.png" style="max-width: 100%;"></a></p> <p dir="auto">This error will appear whenever the Navigator component is trying to render a link to a record which has never been generated as page by gatsby-node.js for that locale.</p> <p dir="auto">If the error for example appears in: <code>localhost:8000/es/guia</code>, there's a problem with Navigator component inside that page in Spanish.</p> <p dir="auto">This can happen for many different reasons:</p> <div class="markdown-heading" dir="auto"><h3 tabindex="-1" class="heading-element" dir="auto">General</h3><a id="user-content-general" class="anchor" aria-label="Permalink: General" href="#general"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <ul dir="auto"> <li>You are passing the <code>id</code> field and not <code>originalId</code> (with the alias <code>id</code>).</li> <li>You forgot to export the <code>originalId</code> field with the alias <code>id</code> to the pageContext object when generating pages.</li> </ul> <div class="markdown-heading" dir="auto"><h3 tabindex="-1" class="heading-element" dir="auto">Structured Text</h3><a id="user-content-structured-text" class="anchor" aria-label="Permalink: Structured Text" href="#structured-text"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <ul dir="auto"> <li>You linked in a Structured Text field (on DatoCMS) a post/category which has been marked as non-translatable.</li> <li>You linked in a Structured Text a post whose category has been marked as non-translatable.</li> <li>You passed to the <code>renderLinkToRecord</code> StructuredText component prop the <code>originalId</code> of the StructuredText field itself.</li> </ul> <p dir="auto">Check the StructuredText field content on DatoCMS for that locale and make sure of it.</p> <p dir="auto">Also, always filter any post or category query, by excluding any record marked as non-translatable:</p> <div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="query { allDatoCmsCategory(filter: { noTranslate: { ne: true } }) { categoryNodes: nodes { id: originalId } } }"><pre><span class="pl-s1">query</span> <span class="pl-kos">{</span> <span class="pl-en">allDatoCmsCategory</span><span class="pl-kos">(</span><span class="pl-s1">filter</span>: <span class="pl-kos">{</span> <span class="pl-c1">noTranslate</span>: <span class="pl-kos">{</span> <span class="pl-c1">ne</span>: <span class="pl-s1">true</span> <span class="pl-kos">}</span> <span class="pl-kos">}</span><span class="pl-kos">)</span> <span class="pl-kos">{</span> categoryNodes: <span class="pl-s1">nodes</span> <span class="pl-kos">{</span> <span class="pl-c1">id</span>: <span class="pl-s1">originalId</span> <span class="pl-kos">}</span> <span class="pl-kos">}</span> <span class="pl-kos">}</span></pre></div> <br> <div class="markdown-heading" dir="auto"><h2 tabindex="-1" class="heading-element" dir="auto">GraphQL</h2><a id="user-content-graphql" class="anchor" aria-label="Permalink: GraphQL" href="#graphql"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <div class="highlight highlight-text-shell-session notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="Cannot query field "datoCmsContactPage" on type ..."><pre><span class="pl-c1">Cannot query field "datoCmsContactPage" on type ...</span></pre></div> <p dir="auto">You can encounter this error both during build time and development.</p> <p dir="auto">What happened here is that you removed a field or content model on DatoCMS and forgot to remove any query or variable referring to it in the project files. Please check <a href="#removing-fields">this</a> section on how to fix this issue.</p> <br> <div class="markdown-heading" dir="auto"><h1 tabindex="-1" class="heading-element" dir="auto">Issues</h1><a id="user-content-issues" class="anchor" aria-label="Permalink: Issues" href="#issues"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <p dir="auto">If you encounter any different issue or you have any kind of request, please open an issue or contact me via <a href="/gocode1702/headless-gatsby-multilang/blob/main/smastrom@protonmail.com">email</a>. I will be happy to help you as soon as I can.</p> </article></div></div></div></div></div> <!-- --> <!-- --> <script type="application/json" id="__PRIMER_DATA_:R0:__">{"resolvedServerColorMode":"day"}</script></div> </react-partial> <input type="hidden" data-csrf="true" value="F3fCNgvsKIsLqEqfGUdUGmc7rH/HZLKbo0q4DN1TTEvqQ40C7jd3dB+PqamlLnhc3zsdNYo0Upuchburr51aTg==" /> </div> <div data-view-component="true" class="Layout-sidebar"> <div class="BorderGrid about-margin" data-pjax> <div class="BorderGrid-row"> <div class="BorderGrid-cell"> <div class="hide-sm hide-md"> <h2 class="mb-3 h4">About</h2> <div class="f4 my-3 color-fg-muted text-italic"> No description, website, or topics provided. </div> <h3 class="sr-only">Resources</h3> <div class="mt-2"> <a class="Link--muted" data-analytics-event="{"category":"Repository Overview","action":"click","label":"location:sidebar;file:readme"}" href="#readme-ov-file"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-book mr-2"> <path d="M0 1.75A.75.75 0 0 1 .75 1h4.253c1.227 0 2.317.59 3 1.501A3.743 3.743 0 0 1 11.006 1h4.245a.75.75 0 0 1 .75.75v10.5a.75.75 0 0 1-.75.75h-4.507a2.25 2.25 0 0 0-1.591.659l-.622.621a.75.75 0 0 1-1.06 0l-.622-.621A2.25 2.25 0 0 0 5.258 13H.75a.75.75 0 0 1-.75-.75Zm7.251 10.324.004-5.073-.002-2.253A2.25 2.25 0 0 0 5.003 2.5H1.5v9h3.757a3.75 3.75 0 0 1 1.994.574ZM8.755 4.75l-.004 7.322a3.752 3.752 0 0 1 1.992-.572H14.5v-9h-3.495a2.25 2.25 0 0 0-2.25 2.25Z"></path> </svg> Readme </a> </div> <h3 class="sr-only">License</h3> <div class="mt-2"> <a href="#0BSD-1-ov-file" class="Link--muted" data-analytics-event="{"category":"Repository Overview","action":"click","label":"location:sidebar;file:license"}" > <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-law mr-2"> <path d="M8.75.75V2h.985c.304 0 .603.08.867.231l1.29.736c.038.022.08.033.124.033h2.234a.75.75 0 0 1 0 1.5h-.427l2.111 4.692a.75.75 0 0 1-.154.838l-.53-.53.529.531-.001.002-.002.002-.006.006-.006.005-.01.01-.045.04c-.21.176-.441.327-.686.45C14.556 10.78 13.88 11 13 11a4.498 4.498 0 0 1-2.023-.454 3.544 3.544 0 0 1-.686-.45l-.045-.04-.016-.015-.006-.006-.004-.004v-.001a.75.75 0 0 1-.154-.838L12.178 4.5h-.162c-.305 0-.604-.079-.868-.231l-1.29-.736a.245.245 0 0 0-.124-.033H8.75V13h2.5a.75.75 0 0 1 0 1.5h-6.5a.75.75 0 0 1 0-1.5h2.5V3.5h-.984a.245.245 0 0 0-.124.033l-1.289.737c-.265.15-.564.23-.869.23h-.162l2.112 4.692a.75.75 0 0 1-.154.838l-.53-.53.529.531-.001.002-.002.002-.006.006-.016.015-.045.04c-.21.176-.441.327-.686.45C4.556 10.78 3.88 11 3 11a4.498 4.498 0 0 1-2.023-.454 3.544 3.544 0 0 1-.686-.45l-.045-.04-.016-.015-.006-.006-.004-.004v-.001a.75.75 0 0 1-.154-.838L2.178 4.5H1.75a.75.75 0 0 1 0-1.5h2.234a.249.249 0 0 0 .125-.033l1.288-.737c.265-.15.564-.23.869-.23h.984V.75a.75.75 0 0 1 1.5 0Zm2.945 8.477c.285.135.718.273 1.305.273s1.02-.138 1.305-.273L13 6.327Zm-10 0c.285.135.718.273 1.305.273s1.02-.138 1.305-.273L3 6.327Z"></path> </svg> 0BSD license </a> </div> <include-fragment src="/gocode1702/headless-gatsby-multilang/hovercards/citation/sidebar_partial?tree_name=main"> </include-fragment> <div class="mt-2"> <a href="/gocode1702/headless-gatsby-multilang/activity" data-view-component="true" class="Link Link--muted"> <svg text="gray" aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-pulse mr-2"> <path d="M6 2c.306 0 .582.187.696.471L10 10.731l1.304-3.26A.751.751 0 0 1 12 7h3.25a.75.75 0 0 1 0 1.5h-2.742l-1.812 4.528a.751.751 0 0 1-1.392 0L6 4.77 4.696 8.03A.75.75 0 0 1 4 8.5H.75a.75.75 0 0 1 0-1.5h2.742l1.812-4.529A.751.751 0 0 1 6 2Z"></path> </svg> <span class="color-fg-muted">Activity</span> </a> </div> <h3 class="sr-only">Stars</h3> <div class="mt-2"> <a href="/gocode1702/headless-gatsby-multilang/stargazers" data-view-component="true" class="Link Link--muted"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-star mr-2"> <path d="M8 .25a.75.75 0 0 1 .673.418l1.882 3.815 4.21.612a.75.75 0 0 1 .416 1.279l-3.046 2.97.719 4.192a.751.751 0 0 1-1.088.791L8 12.347l-3.766 1.98a.75.75 0 0 1-1.088-.79l.72-4.194L.818 6.374a.75.75 0 0 1 .416-1.28l4.21-.611L7.327.668A.75.75 0 0 1 8 .25Zm0 2.445L6.615 5.5a.75.75 0 0 1-.564.41l-3.097.45 2.24 2.184a.75.75 0 0 1 .216.664l-.528 3.084 2.769-1.456a.75.75 0 0 1 .698 0l2.77 1.456-.53-3.084a.75.75 0 0 1 .216-.664l2.24-2.183-3.096-.45a.75.75 0 0 1-.564-.41L8 2.694Z"></path> </svg> <strong>1</strong> star </a> </div> <h3 class="sr-only">Watchers</h3> <div class="mt-2"> <a href="/gocode1702/headless-gatsby-multilang/watchers" data-view-component="true" class="Link Link--muted"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-eye mr-2"> <path d="M8 2c1.981 0 3.671.992 4.933 2.078 1.27 1.091 2.187 2.345 2.637 3.023a1.62 1.62 0 0 1 0 1.798c-.45.678-1.367 1.932-2.637 3.023C11.67 13.008 9.981 14 8 14c-1.981 0-3.671-.992-4.933-2.078C1.797 10.83.88 9.576.43 8.898a1.62 1.62 0 0 1 0-1.798c.45-.677 1.367-1.931 2.637-3.022C4.33 2.992 6.019 2 8 2ZM1.679 7.932a.12.12 0 0 0 0 .136c.411.622 1.241 1.75 2.366 2.717C5.176 11.758 6.527 12.5 8 12.5c1.473 0 2.825-.742 3.955-1.715 1.124-.967 1.954-2.096 2.366-2.717a.12.12 0 0 0 0-.136c-.412-.621-1.242-1.75-2.366-2.717C10.824 4.242 9.473 3.5 8 3.5c-1.473 0-2.825.742-3.955 1.715-1.124.967-1.954 2.096-2.366 2.717ZM8 10a2 2 0 1 1-.001-3.999A2 2 0 0 1 8 10Z"></path> </svg> <strong>1</strong> watching </a> </div> <h3 class="sr-only">Forks</h3> <div class="mt-2"> <a href="/gocode1702/headless-gatsby-multilang/forks" data-view-component="true" class="Link Link--muted"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-repo-forked mr-2"> <path d="M5 5.372v.878c0 .414.336.75.75.75h4.5a.75.75 0 0 0 .75-.75v-.878a2.25 2.25 0 1 1 1.5 0v.878a2.25 2.25 0 0 1-2.25 2.25h-1.5v2.128a2.251 2.251 0 1 1-1.5 0V8.5h-1.5A2.25 2.25 0 0 1 3.5 6.25v-.878a2.25 2.25 0 1 1 1.5 0ZM5 3.25a.75.75 0 1 0-1.5 0 .75.75 0 0 0 1.5 0Zm6.75.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Zm-3 8.75a.75.75 0 1 0-1.5 0 .75.75 0 0 0 1.5 0Z"></path> </svg> <strong>0</strong> forks </a> </div> <div class="mt-2"> <a class="Link--muted" href="/contact/report-content?content_url=https%3A%2F%2Fgithub.com%2Fgocode1702%2Fheadless-gatsby-multilang&report=gocode1702+%28user%29"> Report repository </a> </div> </div> </div> </div> <div class="BorderGrid-row"> <div class="BorderGrid-cell"> <h2 class="h4 mb-3" data-pjax="#repo-content-pjax-container" data-turbo-frame="repo-content-turbo-frame"> <a href="/gocode1702/headless-gatsby-multilang/releases" data-view-component="true" class="Link--primary no-underline Link"> Releases </a></h2> <div class="text-small color-fg-muted">No releases published</div> </div> </div> <div class="BorderGrid-row"> <div class="BorderGrid-cell"> <h2 class="h4 mb-3"> <a href="/users/gocode1702/packages?repo_name=headless-gatsby-multilang" data-view-component="true" class="Link--primary no-underline Link d-flex flex-items-center"> Packages <span title="0" hidden="hidden" data-view-component="true" class="Counter ml-1">0</span> </a></h2> <div class="text-small color-fg-muted" > No packages published <br> </div> </div> </div> <div class="BorderGrid-row" hidden> <div class="BorderGrid-cell"> <include-fragment src="/gocode1702/headless-gatsby-multilang/used_by_list" accept="text/fragment+html"> </include-fragment> </div> </div> <div class="BorderGrid-row"> <div class="BorderGrid-cell"> <h2 class="h4 mb-3">Languages</h2> <div class="mb-2"> <span data-view-component="true" class="Progress"> <span style="background-color:#f1e05a !important;;width: 100.0%;" itemprop="keywords" aria-label="JavaScript 100.0" data-view-component="true" class="Progress-item color-bg-success-emphasis"></span> </span></div> <ul class="list-style-none"> <li class="d-inline"> <a class="d-inline-flex flex-items-center flex-nowrap Link--secondary no-underline text-small mr-3" href="/gocode1702/headless-gatsby-multilang/search?l=javascript" data-ga-click="Repository, language stats search click, location:repo overview"> <svg style="color:#f1e05a;" aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-dot-fill mr-2"> <path d="M8 4a4 4 0 1 1 0 8 4 4 0 0 1 0-8Z"></path> </svg> <span class="color-fg-default text-bold mr-1">JavaScript</span> <span>100.0%</span> </a> </li> </ul> </div> </div> </div> </div> </div></div> </div> </div> </turbo-frame> </main> </div> </div> <footer class="footer pt-8 pb-6 f6 color-fg-muted p-responsive" role="contentinfo" > <h2 class='sr-only'>Footer</h2> <div class="d-flex flex-justify-center flex-items-center flex-column-reverse flex-lg-row flex-wrap flex-lg-nowrap"> <div class="d-flex flex-items-center flex-shrink-0 mx-2"> <a aria-label="Homepage" title="GitHub" class="footer-octicon mr-2" href="https://github.com"> <svg aria-hidden="true" height="24" viewBox="0 0 24 24" version="1.1" width="24" data-view-component="true" class="octicon octicon-mark-github"> <path d="M12.5.75C6.146.75 1 5.896 1 12.25c0 5.089 3.292 9.387 7.863 10.91.575.101.79-.244.79-.546 0-.273-.014-1.178-.014-2.142-2.889.532-3.636-.704-3.866-1.35-.13-.331-.69-1.352-1.18-1.625-.402-.216-.977-.748-.014-.762.906-.014 1.553.834 1.769 1.179 1.035 1.74 2.688 1.25 3.349.948.1-.747.402-1.25.733-1.538-2.559-.287-5.232-1.279-5.232-5.678 0-1.25.445-2.285 1.178-3.09-.115-.288-.517-1.467.115-3.048 0 0 .963-.302 3.163 1.179.92-.259 1.897-.388 2.875-.388.977 0 1.955.13 2.875.388 2.2-1.495 3.162-1.179 3.162-1.179.633 1.581.23 2.76.115 3.048.733.805 1.179 1.825 1.179 3.09 0 4.413-2.688 5.39-5.247 5.678.417.36.776 1.05.776 2.128 0 1.538-.014 2.774-.014 3.162 0 .302.216.662.79.547C20.709 21.637 24 17.324 24 12.25 24 5.896 18.854.75 12.5.75Z"></path> </svg> </a> <span> © 2024 GitHub, Inc. </span> </div> <nav aria-label="Footer"> <h3 class="sr-only" id="sr-footer-heading">Footer navigation</h3> <ul class="list-style-none d-flex flex-justify-center flex-wrap mb-2 mb-lg-0" aria-labelledby="sr-footer-heading"> <li class="mx-2"> <a data-analytics-event="{"category":"Footer","action":"go to Terms","label":"text:terms"}" href="https://docs.github.com/site-policy/github-terms/github-terms-of-service" data-view-component="true" class="Link--secondary Link">Terms</a> </li> <li class="mx-2"> <a data-analytics-event="{"category":"Footer","action":"go to privacy","label":"text:privacy"}" href="https://docs.github.com/site-policy/privacy-policies/github-privacy-statement" data-view-component="true" class="Link--secondary Link">Privacy</a> </li> <li class="mx-2"> <a data-analytics-event="{"category":"Footer","action":"go to security","label":"text:security"}" href="https://github.com/security" data-view-component="true" class="Link--secondary Link">Security</a> </li> <li class="mx-2"> <a data-analytics-event="{"category":"Footer","action":"go to status","label":"text:status"}" href="https://www.githubstatus.com/" data-view-component="true" class="Link--secondary Link">Status</a> </li> <li class="mx-2"> <a data-analytics-event="{"category":"Footer","action":"go to docs","label":"text:docs"}" href="https://docs.github.com/" data-view-component="true" class="Link--secondary Link">Docs</a> </li> <li class="mx-2"> <a data-analytics-event="{"category":"Footer","action":"go to contact","label":"text:contact"}" href="https://support.github.com?tags=dotcom-footer" data-view-component="true" class="Link--secondary Link">Contact</a> </li> <li class="mx-2" > <cookie-consent-link> <button type="button" class="Link--secondary underline-on-hover border-0 p-0 color-bg-transparent" data-action="click:cookie-consent-link#showConsentManagement" data-analytics-event="{"location":"footer","action":"cookies","context":"subfooter","tag":"link","label":"cookies_link_subfooter_footer"}" > Manage cookies </button> </cookie-consent-link> </li> <li class="mx-2"> <cookie-consent-link> <button type="button" class="Link--secondary underline-on-hover border-0 p-0 color-bg-transparent" data-action="click:cookie-consent-link#showConsentManagement" data-analytics-event="{"location":"footer","action":"dont_share_info","context":"subfooter","tag":"link","label":"dont_share_info_link_subfooter_footer"}" > Do not share my personal information </button> </cookie-consent-link> </li> </ul> </nav> </div> </footer> <ghcc-consent id="ghcc" class="position-fixed bottom-0 left-0" style="z-index: 999999" data-initial-cookie-consent-allowed="" data-cookie-consent-required="false"></ghcc-consent> <div id="ajax-error-message" class="ajax-error-message flash flash-error" hidden> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-alert"> <path d="M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path> </svg> <button type="button" class="flash-close js-ajax-error-dismiss" aria-label="Dismiss error"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-x"> <path d="M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L9.06 8l3.22 3.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L8 9.06l-3.22 3.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06Z"></path> </svg> </button> You can’t perform that action at this time. </div> <template id="site-details-dialog"> <details class="details-reset details-overlay details-overlay-dark lh-default color-fg-default hx_rsm" open> <summary role="button" aria-label="Close dialog"></summary> <details-dialog class="Box Box--overlay d-flex flex-column anim-fade-in fast hx_rsm-dialog hx_rsm-modal"> <button class="Box-btn-octicon m-0 btn-octicon position-absolute right-0 top-0" type="button" aria-label="Close dialog" data-close-dialog> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-x"> <path d="M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L9.06 8l3.22 3.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L8 9.06l-3.22 3.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06Z"></path> </svg> </button> <div class="octocat-spinner my-6 js-details-dialog-spinner"></div> </details-dialog> </details> </template> <div class="Popover js-hovercard-content position-absolute" style="display: none; outline: none;"> <div class="Popover-message Popover-message--bottom-left Popover-message--large Box color-shadow-large" style="width:360px;"> </div> </div> <template id="snippet-clipboard-copy-button"> <div class="zeroclipboard-container position-absolute right-0 top-0"> <clipboard-copy aria-label="Copy" class="ClipboardButton btn js-clipboard-copy m-2 p-0" data-copy-feedback="Copied!" data-tooltip-direction="w"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-copy js-clipboard-copy-icon m-2"> <path d="M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 0 1 0 1.5h-1.5a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-1.5a.75.75 0 0 1 1.5 0v1.5A1.75 1.75 0 0 1 9.25 16h-7.5A1.75 1.75 0 0 1 0 14.25Z"></path><path d="M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0 1 14.25 11h-7.5A1.75 1.75 0 0 1 5 9.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z"></path> </svg> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-check js-clipboard-check-icon color-fg-success d-none m-2"> <path d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"></path> </svg> </clipboard-copy> </div> </template> <template id="snippet-clipboard-copy-button-unpositioned"> <div class="zeroclipboard-container"> <clipboard-copy aria-label="Copy" class="ClipboardButton btn btn-invisible js-clipboard-copy m-2 p-0 d-flex flex-justify-center flex-items-center" data-copy-feedback="Copied!" data-tooltip-direction="w"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-copy js-clipboard-copy-icon"> <path d="M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 0 1 0 1.5h-1.5a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-1.5a.75.75 0 0 1 1.5 0v1.5A1.75 1.75 0 0 1 9.25 16h-7.5A1.75 1.75 0 0 1 0 14.25Z"></path><path d="M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0 1 14.25 11h-7.5A1.75 1.75 0 0 1 5 9.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z"></path> </svg> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-check js-clipboard-check-icon color-fg-success d-none"> <path d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"></path> </svg> </clipboard-copy> </div> </template> </div> <div id="js-global-screen-reader-notice" class="sr-only mt-n1" aria-live="polite" aria-atomic="true" ></div> <div id="js-global-screen-reader-notice-assertive" class="sr-only mt-n1" aria-live="assertive" aria-atomic="true"></div> </body> </html>