Skip to content
Gatsby starter for an internationalized website
JavaScript CSS
Branch: master
Clone or download
Latest commit 6c7a1c9 Jun 3, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src rename Footer.js to Footer.jsx Jun 2, 2019
.editorconfig init starter May 29, 2019
.gitignore init starter May 29, 2019
Jenkinsfile add development to Jenkinsfile May 30, 2019
LICENSE Initial commit May 29, 2019
README.md Update README.md Jun 3, 2019
gatsby-config.js init starter May 29, 2019
gatsby-node.js restructure i18n folder Jun 2, 2019
package-lock.json add Jenkinsfile May 30, 2019
package.json init starter May 29, 2019

README.md

Gatsby

Gatsby Starter Internationalized

Gatsby v2 starter based on gatsby-starter-intl.

Checkout the demo!

Features

  • internationalized page content - via react-intl

  • internationalized routes - via language configuration

  • lightweight - includes only internationalization code

  • LocalizedLink - built-in link component handling route generation

  • LanguageSwitcher - built-in language switcher component

The starter includes only code important for internationalization, the rest is up to you

How to start

To use Gatsby you have to install Gatsby CLI

npm install global gatsby-cli

Then use it to start new project based on gatsby-starter-internationalized

gatsby new your-project-name https://github.com/AckeeCZ/gatsby-starter-internationalized
cd your-project-name/
gatsby develop

Your site is running at localhost:8000.

If you want to compile production build just run gatsby build.

How it works

Gatsby creates static pages for every language sets in the configuration in src/i18n/config/languages.js.

Say you have two languages:

  • cs ,
  • en and is a default language,

Gatsby then creates:

  • /cs/stranka1,
  • /page1,

names depend on your configuration.

Translations

Translations are set in src/i18n/translations. We use flat structure set in yaml files. There should be a yaml file for every language (cs.yaml, en.yaml etc.)

<FormattedMessage id="home.title" />

Translation is in src/i18n/translations/en.yaml and looks like:

home.title: "Homepage"

Languages

Language list is in src/i18n/config/languages.js. Elements of array have following attributes:

  • locale - a key to identify your locale,
  • label - a locale name,
  • default - a flag if the language is default (routes won't be prepend with locale),
  • routes - an object with translations for app routes,

Example:

{
        locale: "cs",
        label: "Čeština",
        routes: {
            "/": "/",
            "/page1": "/stranka1",
            "/subpage/page1": "/podstranka/stranka1",
        }
    },
    {
        locale: "en",
        label: "English",
        default: true,
        routes: {
            "/": "/",
            "/page1": "/page1",
            "/subpage/page1": "/subpage/page1",
        }
    },

React Intl locales

Don't forget to add react-intl locales for your languages in src/i18n/config/reactIntl.js.

PageContext

PageContext includes locale and originalPath you can use in your pages. It is used by LocalizedLink to create correct link and by LanguageSwitcher to switch to correct language version of a page.

withPageContext wraps your page with react-intl provider and our own PageContext provider.

// src/pages/my-page.jsx

import withPageContext from "../pageContext";

const IndexPage = ({ intl }) => (
    <React.Fragment>
        <h1>
            <FormattedMessage id="home.title" />
        </h1>
    </React.Fragment>
);

export default withPageContext(IndexPage);

Contributing

If you have any question, see bugs or you think some feature can be written better - just open pull request or issue. I will be happy to help and learn from you.

License

MIT

You can’t perform that action at this time.