├── src ├── stylesheets │ ├── pages │ │ ├── _module.scss │ │ └── _404.scss │ ├── base │ │ ├── _fonts.scss │ │ ├── _module.scss │ │ ├── _resetr.scss │ │ ├── _base.scss │ │ └── _typography.scss │ ├── _variables.scss │ ├── main.scss │ └── components │ │ ├── _module.scss │ │ ├── _footer.scss │ │ ├── slices │ │ ├── _full-width-image.scss │ │ ├── _text-info.scss │ │ ├── _headline-with-button.scss │ │ ├── _info-with-image.scss │ │ └── _email-signup.scss │ │ └── _header.scss ├── images │ ├── logo.png │ ├── favicon.png │ ├── twitter.png │ ├── facebook.png │ ├── instagram.png │ ├── top-icon.png │ └── full-width-image-background.png ├── pages │ ├── preview.js │ └── 404.js ├── components │ ├── GatsbyLink.js │ ├── Footer.js │ ├── LanguageSwitcher.js │ ├── Layout.js │ └── TopMenu.js ├── slices │ ├── index.js │ ├── TextInfo.js │ ├── FullWidthImage.js │ ├── HeadlineWithButton.js │ ├── EmailSignup.js │ └── InfoWithImage.js ├── utils │ ├── linkResolver.js │ └── prismicPreviews.js └── templates │ ├── homepage.js │ └── page.js ├── .prettierignore ├── documents ├── index.json ├── en-us │ ├── Xs5vWREAACYAIvvr=#=Xs5vWREAACYAIvvs=#=top_menu=#=Xs5vWREAACYAIvvt=#=en-us=#=y.json │ ├── Xs5M1hEAACEAImP9=#=Xs_kqBEAAArQKQMx=#=homepage=#=Xs5M1hEAACEAImP_=#=en-us=#=y.json │ └── Xs5rBhEAACEAIueu=#=Xs_k9REAACEAKQOv=#=page=#=Xs5rBhEAACEAIuew=#=en-us=#=y.json └── fr-fr │ ├── Xs5vkREAAArQIvz4=#=Xs5vkREAAArQIvz5=#=top_menu=#=Xs5vWREAACYAIvvt=#=fr-fr=#=n.json │ ├── Xs5SSREAACQAInz5=#=Xs_kwBEAACEAKQNa=#=homepage=#=Xs5M1hEAACEAImP_=#=fr-fr=#=n.json │ └── Xs5ushEAACQAIvjn=#=Xs_k4REAACYAKQOR=#=page=#=Xs5rBhEAACEAIuew=#=fr-fr=#=n.json ├── .prettierrc ├── .env.example ├── gatsby-ssr.js ├── custom_types ├── index.json ├── top_menu.json ├── homepage.json └── page.json ├── .eslintrc.json ├── prismic-configuration.js ├── gatsby-browser.js ├── gatsby-node.js ├── README.md ├── .gitignore ├── package.json └── gatsby-config.js /src/stylesheets/pages/_module.scss: -------------------------------------------------------------------------------- 1 | @import './404'; 2 | -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | .cache 2 | package.json 3 | package-lock.json 4 | public 5 | -------------------------------------------------------------------------------- /src/stylesheets/base/_fonts.scss: -------------------------------------------------------------------------------- 1 | $font-sans-serif: 'Roboto', sans-serif; 2 | -------------------------------------------------------------------------------- /documents/index.json: -------------------------------------------------------------------------------- 1 | { "signature": "34fbecc5b263e17dba2cd597119489a17b7343d6" } 2 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "semi": false, 3 | "singleQuote": true, 4 | "trailingComma": "all" 5 | } 6 | -------------------------------------------------------------------------------- /src/images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prismicio/gatsby-multi-language-site/master/src/images/logo.png -------------------------------------------------------------------------------- /src/images/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prismicio/gatsby-multi-language-site/master/src/images/favicon.png -------------------------------------------------------------------------------- /src/images/twitter.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prismicio/gatsby-multi-language-site/master/src/images/twitter.png -------------------------------------------------------------------------------- /src/images/facebook.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prismicio/gatsby-multi-language-site/master/src/images/facebook.png -------------------------------------------------------------------------------- /src/images/instagram.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prismicio/gatsby-multi-language-site/master/src/images/instagram.png -------------------------------------------------------------------------------- /src/images/top-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prismicio/gatsby-multi-language-site/master/src/images/top-icon.png -------------------------------------------------------------------------------- /src/stylesheets/_variables.scss: -------------------------------------------------------------------------------- 1 | /* Break points */ 2 | $min-width-md: 610px; 3 | $min-width-l: 1100px; 4 | $min-width-xl: 1200px; 5 | -------------------------------------------------------------------------------- /src/stylesheets/base/_module.scss: -------------------------------------------------------------------------------- 1 | @import './fonts'; 2 | @import './resetr'; 3 | @import './base'; 4 | @import './typography'; 5 | -------------------------------------------------------------------------------- /src/stylesheets/main.scss: -------------------------------------------------------------------------------- 1 | @import './variables'; 2 | @import './base/module'; 3 | @import './pages/module'; 4 | @import './components/module'; 5 | -------------------------------------------------------------------------------- /src/images/full-width-image-background.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prismicio/gatsby-multi-language-site/master/src/images/full-width-image-background.png -------------------------------------------------------------------------------- /.env.example: -------------------------------------------------------------------------------- 1 | # Your Prismic repository access token (if your repository is private). 2 | # See: https://user-guides.prismic.io/en/articles/1036153-generating-an-access-token 3 | PRISMIC_ACCESS_TOKEN=prismic_access_token 4 | 5 | GATSBY_PRISMIC_REPO_NAME=your-repo-name -------------------------------------------------------------------------------- /src/stylesheets/components/_module.scss: -------------------------------------------------------------------------------- 1 | @import './header'; 2 | @import './footer'; 3 | @import './slices/email-signup'; 4 | @import './slices/full-width-image'; 5 | @import './slices/headline-with-button'; 6 | @import './slices/info-with-image'; 7 | @import './slices/text-info'; 8 | -------------------------------------------------------------------------------- /src/pages/preview.js: -------------------------------------------------------------------------------- 1 | import * as React from 'react' 2 | import { withPrismicPreviewResolver } from 'gatsby-plugin-prismic-previews' 3 | 4 | const PreviewPage = ({ isPreview, ...props }) => { 5 | if (isPreview === false) return 'Not a preview!' 6 | 7 | return

Loading

8 | } 9 | 10 | export default withPrismicPreviewResolver(PreviewPage) 11 | -------------------------------------------------------------------------------- /gatsby-ssr.js: -------------------------------------------------------------------------------- 1 | import * as React from 'react' 2 | import { PrismicPreviewProvider } from 'gatsby-plugin-prismic-previews' 3 | import { repositoryConfigs } from './src/utils/prismicPreviews' 4 | import './src/stylesheets/main.scss' 5 | 6 | export const wrapRootElement = ({ element }) => ( 7 | 8 | {element} 9 | 10 | ) 11 | -------------------------------------------------------------------------------- /custom_types/index.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "id": "homepage", 4 | "name": "Homepage", 5 | "repeatable": false, 6 | "value": "homepage.json" 7 | }, 8 | { 9 | "id": "page", 10 | "name": "Page", 11 | "repeatable": true, 12 | "value": "page.json" 13 | }, 14 | { 15 | "id": "top_menu", 16 | "name": "Top Menu", 17 | "repeatable": false, 18 | "value": "top_menu.json" 19 | } 20 | ] 21 | -------------------------------------------------------------------------------- /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": [ 3 | "plugin:react/recommended", 4 | "plugin:react-hooks/recommended", 5 | "plugin:jsx-a11y/recommended" 6 | ], 7 | "env": { 8 | "browser": true, 9 | "es6": true 10 | }, 11 | "parserOptions": { 12 | "ecmaFeatures": { 13 | "jsx": true 14 | }, 15 | "ecmaVersion": 2021, 16 | "sourceType": "module" 17 | }, 18 | "rules": { 19 | "react/prop-types": "off" 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /src/components/GatsbyLink.js: -------------------------------------------------------------------------------- 1 | import * as React from 'react' 2 | import { Link } from 'gatsby' 3 | 4 | import { linkResolver } from '../utils/linkResolver' 5 | 6 | export const GatsbyLink = (type, element, content, children, index) => { 7 | if (element.data.link_type === 'Document') { 8 | return ( 9 | 10 | {content} 11 | 12 | ) 13 | } 14 | return null 15 | } 16 | -------------------------------------------------------------------------------- /src/pages/404.js: -------------------------------------------------------------------------------- 1 | import * as React from 'react' 2 | import { withPrismicUnpublishedPreview } from 'gatsby-plugin-prismic-previews' 3 | 4 | const NotFoundPage = () => ( 5 |
6 |

404

7 |

The page you are looking for was not found

8 |

9 | 10 | 11 | 12 |

13 |
14 | ) 15 | 16 | export default withPrismicUnpublishedPreview(NotFoundPage) 17 | -------------------------------------------------------------------------------- /src/stylesheets/pages/_404.scss: -------------------------------------------------------------------------------- 1 | .not-found { 2 | display: flex; 3 | flex-direction: column; 4 | justify-content: center; 5 | height: 50vw; 6 | align-items: center; 7 | 8 | h1 { 9 | font-size: 8rem; 10 | padding-bottom: 0; 11 | } 12 | 13 | p { 14 | a { 15 | color: inherit; 16 | 17 | button { 18 | padding: 20px 30px; 19 | margin-top: 20px; 20 | border-radius: 20px; 21 | font-size: 20px; 22 | } 23 | } 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /src/slices/index.js: -------------------------------------------------------------------------------- 1 | import { EmailSignup } from './EmailSignup' 2 | import { FullWidthImage } from './FullWidthImage' 3 | import { HeadlineWithButton } from './HeadlineWithButton' 4 | import { InfoWithImage } from './InfoWithImage' 5 | import { TextInfo } from './TextInfo' 6 | 7 | export const components = { 8 | headline_with_button: HeadlineWithButton, 9 | email_signup: EmailSignup, 10 | full_width_image: FullWidthImage, 11 | info_with_image: InfoWithImage, 12 | text_info: TextInfo, 13 | } 14 | -------------------------------------------------------------------------------- /prismic-configuration.js: -------------------------------------------------------------------------------- 1 | /** 2 | * This file is used for setting up and connecting to Prismic. 3 | */ 4 | 5 | module.exports = { 6 | // The domain name of your Prismic repository. This can be found in the URL of 7 | // your repository. 8 | // 9 | // Example: 'my-repo' if your Prismic repository URL is 'my-repo.prismic.io'. 10 | prismicRepo: 'your-repo-name', 11 | 12 | // The default language for content in your Prismic repository. 13 | defaultLanguage: 'en-us', 14 | 15 | // All available languages for content in your Prismic repository. 16 | langs: ['en-us', 'fr-fr'], 17 | } 18 | -------------------------------------------------------------------------------- /src/components/Footer.js: -------------------------------------------------------------------------------- 1 | import * as React from 'react' 2 | 3 | import twitterIcon from '../images/twitter.png' 4 | import instagramIcon from '../images/instagram.png' 5 | import facebookIcon from '../images/facebook.png' 6 | 7 | export const Footer = () => ( 8 | 18 | ) 19 | -------------------------------------------------------------------------------- /src/stylesheets/components/_footer.scss: -------------------------------------------------------------------------------- 1 | footer { 2 | font-style: italic; 3 | text-align: center; 4 | border-top: 1px solid #dadada; 5 | display: flex; 6 | flex-direction: column; 7 | 8 | .copyright { 9 | display: flex; 10 | justify-content: center; 11 | } 12 | 13 | .social { 14 | padding-top: 4%; 15 | display: flex; 16 | justify-content: center; 17 | img { 18 | padding: 5px 16px; 19 | width: 19px; 20 | } 21 | } 22 | } 23 | 24 | /* Extra Small Devices, Phones */ 25 | @media only screen and (min-width: $min-width-md) { 26 | footer { 27 | display: flex; 28 | flex-direction: row; 29 | justify-content: space-between; 30 | .social { 31 | padding-top: 0; 32 | } 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /gatsby-browser.js: -------------------------------------------------------------------------------- 1 | import * as React from 'react' 2 | import { Link } from 'gatsby' 3 | import { PrismicPreviewProvider } from 'gatsby-plugin-prismic-previews' 4 | import { PrismicProvider } from '@prismicio/react' 5 | 6 | import { repositoryConfigs } from './src/utils/prismicPreviews' 7 | import { linkResolver } from './src/utils/linkResolver' 8 | 9 | import './src/stylesheets/main.scss' 10 | 11 | export const wrapRootElement = ({ element }) => ( 12 | ( 15 | 16 | )} 17 | > 18 | 19 | {element} 20 | 21 | 22 | ) 23 | -------------------------------------------------------------------------------- /custom_types/top_menu.json: -------------------------------------------------------------------------------- 1 | { 2 | "Main": { 3 | "display_title": { 4 | "type": "StructuredText", 5 | "config": { 6 | "single": "heading1", 7 | "label": "display_title" 8 | } 9 | }, 10 | "menu_links": { 11 | "type": "Group", 12 | "config": { 13 | "fields": { 14 | "label": { 15 | "type": "StructuredText", 16 | "config": { 17 | "single": "paragraph", 18 | "label": "label" 19 | } 20 | }, 21 | "link": { 22 | "type": "Link", 23 | "config": { 24 | "label": "link", 25 | "placeholder": "Select a Link..." 26 | } 27 | } 28 | }, 29 | "label": "menu_links" 30 | } 31 | } 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /src/components/LanguageSwitcher.js: -------------------------------------------------------------------------------- 1 | import * as React from 'react' 2 | import { navigate } from 'gatsby' 3 | 4 | import { linkResolver } from '../utils/linkResolver' 5 | 6 | export const LanguageSwitcher = ({ activeDocMeta }) => { 7 | const currentLang = activeDocMeta.lang 8 | const currentLangOption = ( 9 | 10 | ) 11 | 12 | const alternateLangOptions = activeDocMeta.alternateLanguages.map( 13 | (altLang, index) => ( 14 | 17 | ), 18 | ) 19 | 20 | const handleLangChange = (event) => { 21 | navigate(event.target.value) 22 | } 23 | 24 | return ( 25 |
  • 26 | 30 |
    • 31 | ) 32 | } 33 | -------------------------------------------------------------------------------- /src/utils/linkResolver.js: -------------------------------------------------------------------------------- 1 | const { defaultLanguage } = require('../../prismic-configuration') 2 | 3 | /** 4 | * The Link Resolver used for the Prismic repository. This function converts a 5 | * Prismic document to a URL within your app. It is used throughout your app to 6 | * resolve document links and support editor previews. 7 | * 8 | * {@link https://prismic.io/docs/technologies/link-resolver-gatsby} 9 | * 10 | * @param doc Prismic document to resolve to a URL within your app. 11 | * 12 | * @returns URL for the provided Prismic document. 13 | * 14 | * @type import('@prismicio/helpers').LinkResolverFunction 15 | */ 16 | exports.linkResolver = (doc) => { 17 | switch (doc.type) { 18 | case 'homepage': { 19 | return doc.lang === defaultLanguage ? '/' : `/${doc.lang}` 20 | } 21 | 22 | case 'page': { 23 | return doc.lang === defaultLanguage 24 | ? `/page/${doc.uid}` 25 | : `/page/${doc.lang}/${doc.uid}` 26 | } 27 | 28 | default: 29 | return '/' 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /src/stylesheets/components/slices/_full-width-image.scss: -------------------------------------------------------------------------------- 1 | .full-width-image { 2 | position: relative; 3 | margin-top: 0; 4 | padding-top: 0; 5 | 6 | @media only screen and (min-width: $min-width-xl) { 7 | position: relative; 8 | margin-top: 50px; 9 | padding-top: 110px; 10 | } 11 | 12 | .main-img { 13 | z-index: 1; 14 | 15 | img { 16 | width: 100%; 17 | } 18 | } 19 | 20 | .background { 21 | display: none; 22 | position: absolute; 23 | top: 0; 24 | 25 | @media only screen and (min-width: $min-width-xl) { 26 | display: flex; 27 | 28 | &.left-bg { 29 | display: flex; 30 | justify-self: start; 31 | left: -100px; 32 | } 33 | 34 | &.right-bg { 35 | display: flex; 36 | justify-self: end; 37 | right: -100px; 38 | 39 | img { 40 | transform: scaleX(-1); 41 | } 42 | } 43 | } 44 | 45 | img { 46 | width: 790px; 47 | height: 608px; 48 | } 49 | } 50 | } 51 | -------------------------------------------------------------------------------- /src/stylesheets/components/slices/_text-info.scss: -------------------------------------------------------------------------------- 1 | .text-info { 2 | @media only screen and (min-width: $min-width-l) { 3 | display: flex; 4 | flex-direction: row; 5 | } 6 | 7 | .left-column { 8 | h1, 9 | h2 { 10 | max-width: 415px; 11 | margin: 30px 0px 20px 0px; 12 | } 13 | 14 | p { 15 | max-width: 1075px; 16 | line-height: 40px; 17 | font-size: 23px; 18 | font-weight: 500; 19 | } 20 | } 21 | 22 | .right-column, 23 | .left-column { 24 | h3 { 25 | font-size: 20px; 26 | line-height: 36px; 27 | 28 | @media only screen and (min-width: $min-width-l) { 29 | font-size: 20px; 30 | line-height: 36px; 31 | } 32 | } 33 | 34 | p { 35 | max-width: 1075px; 36 | margin: 10px 0 20px; 37 | line-height: 30px; 38 | font-size: 16px; 39 | font-weight: 400; 40 | } 41 | } 42 | 43 | .right-column { 44 | margin-left: 0; 45 | 46 | @media only screen and (min-width: $min-width-l) { 47 | margin-left: 135px; 48 | } 49 | } 50 | } 51 | -------------------------------------------------------------------------------- /gatsby-node.js: -------------------------------------------------------------------------------- 1 | const path = require('path') 2 | 3 | exports.createPages = async ({ graphql, actions }) => { 4 | const { createPage } = actions 5 | 6 | const queryData = await graphql(` 7 | { 8 | allPrismicPage { 9 | nodes { 10 | id 11 | lang 12 | url 13 | } 14 | } 15 | allPrismicHomepage { 16 | nodes { 17 | id 18 | lang 19 | url 20 | } 21 | } 22 | } 23 | `) 24 | 25 | queryData.data.allPrismicPage.nodes.forEach((page) => { 26 | createPage({ 27 | path: page.url, 28 | component: path.resolve(__dirname, 'src/templates/page.js'), 29 | context: { 30 | id: page.id, 31 | lang: page.lang, 32 | }, 33 | }) 34 | }) 35 | 36 | queryData.data.allPrismicHomepage.nodes.forEach((page) => { 37 | createPage({ 38 | path: page.url, 39 | component: path.resolve(__dirname, 'src/templates/homepage.js'), 40 | context: { 41 | id: page.id, 42 | lang: page.lang, 43 | }, 44 | }) 45 | }) 46 | } 47 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Prismic & Gatsby multi-language example website 2 | 3 | [Gatsby.js](https://www.gatsbyjs.org/) example Multi-language website with content managed in [Prismic](https://prismic.io) 4 | 5 | ## Check out the dedicated article to get this project up and running 6 | 7 | [Prismic project guide](https://prismic.io/docs/technologies/example-projects-gatsby) 8 | 9 | ## Learn more about using Prismic with Gatsby.js 10 | 11 | [Prismic + Gatsby.js Documentation](https://prismic.io/docs/technologies/gatsby) 12 | 13 | ## License 14 | 15 | This software is licensed under the Apache 2 license, quoted below. 16 | 17 | Copyright 2021 [Prismic](http://prismic.io/). 18 | 19 | Licensed under the Apache License, Version 2.0 (the "License"); you may not use this project except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0. 20 | 21 | Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. 22 | -------------------------------------------------------------------------------- /src/utils/prismicPreviews.js: -------------------------------------------------------------------------------- 1 | /** 2 | * This file contains configuration for `gatsby-plugin-prismic-previews` to 3 | * support preview sessions from Prismic with drafts and unpublished documents. 4 | * 5 | * @see https://prismic.io/docs/technologies/previews-gatsby 6 | */ 7 | 8 | import { componentResolverFromMap } from 'gatsby-plugin-prismic-previews' 9 | 10 | import { prismicRepo } from '../../prismic-configuration' 11 | import { linkResolver } from './linkResolver' 12 | 13 | import PageTemplate from '../templates/page' 14 | import HomepageTemplate from '../templates/homepage' 15 | /** 16 | * Prismic preview configuration for each repository in your app. This set of 17 | * configuration objects will be used with the `PrismicPreviewProvider` 18 | * higher order component. 19 | * 20 | * If your app needs to support multiple Prismic repositories, add each of 21 | * their own configuration objects here as additional elements. 22 | * 23 | */ 24 | export const repositoryConfigs = [ 25 | { 26 | repositoryName: prismicRepo, 27 | linkResolver, 28 | componentResolver: componentResolverFromMap({ 29 | page: PageTemplate, 30 | homepage: HomepageTemplate, 31 | }), 32 | }, 33 | ] 34 | -------------------------------------------------------------------------------- /src/stylesheets/components/slices/_headline-with-button.scss: -------------------------------------------------------------------------------- 1 | .headline-with-button { 2 | display: flex; 3 | flex-direction: column; 4 | justify-content: space-between; 5 | align-items: center; 6 | text-align: center; 7 | 8 | @media only screen and (min-width: $min-width-l) { 9 | display: flex; 10 | flex-direction: row; 11 | padding-top: 40px; 12 | text-align: inherit; 13 | } 14 | 15 | h1 { 16 | line-height: 4rem; 17 | font-size: 43px; 18 | 19 | @media only screen and (min-width: $min-width-l) { 20 | max-width: 645px; 21 | line-height: inherit; 22 | font-size: 100px; 23 | letter-spacing: 0; 24 | font-weight: 600; 25 | } 26 | } 27 | 28 | p { 29 | max-width: 691px; 30 | margin-top: 20px; 31 | line-height: 40px; 32 | font-size: 23px; 33 | font-weight: 500; 34 | 35 | @media only screen and (min-width: $min-width-l) { 36 | max-width: 617px; 37 | } 38 | } 39 | 40 | .button { 41 | display: flex; 42 | align-self: center; 43 | padding-top: 20px; 44 | 45 | @media only screen and (min-width: $min-width-l) { 46 | display: flex; 47 | align-self: flex-end; 48 | justify-content: flex-end; 49 | } 50 | } 51 | } 52 | -------------------------------------------------------------------------------- /src/stylesheets/base/_resetr.scss: -------------------------------------------------------------------------------- 1 | html, 2 | body, 3 | div, 4 | span, 5 | applet, 6 | object, 7 | iframe, 8 | h1, 9 | h2, 10 | h3, 11 | h4, 12 | h5, 13 | h6, 14 | p, 15 | blockquote, 16 | pre, 17 | a, 18 | abbr, 19 | acronym, 20 | address, 21 | big, 22 | cite, 23 | code, 24 | del, 25 | dfn, 26 | em, 27 | img, 28 | ins, 29 | kbd, 30 | q, 31 | s, 32 | samp, 33 | small, 34 | strike, 35 | strong, 36 | sub, 37 | sup, 38 | tt, 39 | var, 40 | b, 41 | u, 42 | i, 43 | center, 44 | dl, 45 | dt, 46 | dd, 47 | ol, 48 | ul, 49 | li, 50 | fieldset, 51 | form, 52 | label, 53 | legend, 54 | table, 55 | caption, 56 | tbody, 57 | tfoot, 58 | thead, 59 | tr, 60 | th, 61 | td, 62 | article, 63 | aside, 64 | canvas, 65 | details, 66 | embed, 67 | figure, 68 | figcaption, 69 | hgroup, 70 | menu, 71 | nav, 72 | output, 73 | ruby, 74 | section, 75 | summary, 76 | time, 77 | mark, 78 | audio, 79 | video { 80 | margin: 0; 81 | padding: 0; 82 | } 83 | 84 | /* HTML5 display-role reset for older browsers */ 85 | article, 86 | aside, 87 | details, 88 | figcaption, 89 | figure, 90 | footer, 91 | header, 92 | hgroup, 93 | menu, 94 | nav, 95 | section { 96 | display: block; 97 | } 98 | 99 | ol, 100 | ul { 101 | list-style: none; 102 | } 103 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | 8 | # Runtime data 9 | pids 10 | *.pid 11 | *.seed 12 | *.pid.lock 13 | 14 | # Directory for instrumented libs generated by jscoverage/JSCover 15 | lib-cov 16 | 17 | # Coverage directory used by tools like istanbul 18 | coverage 19 | 20 | # nyc test coverage 21 | .nyc_output 22 | 23 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 24 | .grunt 25 | 26 | # Bower dependency directory (https://bower.io/) 27 | bower_components 28 | 29 | # node-waf configuration 30 | .lock-wscript 31 | 32 | # Compiled binary addons (http://nodejs.org/api/addons.html) 33 | build/Release 34 | 35 | # Dependency directories 36 | node_modules/ 37 | jspm_packages/ 38 | 39 | # Typescript v1 declaration files 40 | typings/ 41 | 42 | # Optional npm cache directory 43 | .npm 44 | 45 | # Optional eslint cache 46 | .eslintcache 47 | 48 | # Optional REPL history 49 | .node_repl_history 50 | 51 | # Output of 'npm pack' 52 | *.tgz 53 | 54 | # dotenv environment variables file 55 | .env 56 | .env.* 57 | !.env.example 58 | 59 | # gatsby files 60 | .cache/ 61 | public 62 | 63 | # Mac files 64 | .DS_Store 65 | 66 | # Yarn 67 | yarn-error.log 68 | .pnp/ 69 | .pnp.js 70 | # Yarn Integrity file 71 | .yarn-integrity 72 | 73 | # Other 74 | .vscode 75 | -------------------------------------------------------------------------------- /src/slices/TextInfo.js: -------------------------------------------------------------------------------- 1 | import * as React from 'react' 2 | import { graphql } from 'gatsby' 3 | import { PrismicRichText } from '@prismicio/react' 4 | import { StaticImage } from 'gatsby-plugin-image' 5 | 6 | export const TextInfo = ({ slice }) => ( 7 |
    8 |
    9 | 10 | 11 | 12 |
    13 |
    14 | 15 |
    16 |
    17 | ) 18 | 19 | export const query = graphql` 20 | fragment PageDataBodyTextInfo on PrismicPageDataBodyTextInfo { 21 | primary { 22 | left_column_text { 23 | richText 24 | } 25 | right_column_text { 26 | richText 27 | } 28 | section_title { 29 | richText 30 | } 31 | } 32 | } 33 | fragment HomepageDataBodyTextInfo on PrismicHomepageDataBodyTextInfo { 34 | primary { 35 | left_column_text { 36 | richText 37 | } 38 | right_column_text { 39 | richText 40 | } 41 | section_title { 42 | richText 43 | } 44 | } 45 | } 46 | ` 47 | -------------------------------------------------------------------------------- /src/components/Layout.js: -------------------------------------------------------------------------------- 1 | import * as React from 'react' 2 | import { useStaticQuery, graphql } from 'gatsby' 3 | import { Helmet } from 'react-helmet' 4 | 5 | import { TopMenu } from './TopMenu' 6 | import { Footer } from './Footer' 7 | 8 | export const Layout = ({ children, topMenu, activeDocMeta }) => { 9 | const queryData = useStaticQuery(graphql` 10 | query SiteQuery { 11 | site { 12 | siteMetadata { 13 | title 14 | description 15 | } 16 | } 17 | } 18 | `) 19 | 20 | return ( 21 | <> 22 | 23 | 24 | {queryData.site.siteMetadata.title} 25 | 29 | 30 | 35 | 39 | 40 | 41 |
    {children}
    42 |