Gatsby starter for internationalized websites. https://habd.as/code/gatsby-starter-i18n-react-i18next/
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
Josh Habdas f5377c3afe
feat: 🎸 improve discovery of language detection
2 months ago
config chore: 🤖 report post build activity to console 2 months ago
docs Initial commit 3 months ago
src feat: 🎸 improve discovery of language detection 2 months ago
static feat: add static folder 2 months ago
typings fix: 🐛 prevent woff2 imports from causing type errors 2 months ago
.browserslistrc perf: ⚡️ decrease bundle sizes 2 months ago
.env.example feat: 🎸 add environment support 2 months ago
.gitignore feat: 🎸 ignore vscode project settings 2 months ago
.prettierignore Initial commit 3 months ago
.prettierrc Initial commit 3 months ago
COPYING Initial commit 3 months ago
README.md feat: 🎸 improve discovery of language detection 2 months ago
gatsby-config.js chore: 🤖 convert gatsby config to typescript 2 months ago
jest.config.js Initial commit 3 months ago
package.json feat: 🎸 add environment support 2 months ago
tsconfig.json chore(tsconfig): remove chakra folder include 2 months ago
yarn.lock chore: 🤖 add type declarations for fs-extra 2 months ago

README.md

gatsby-starter-i18n-react-i18next

Gatsby starter for internationalized websites.

Build great-looking multilingual websites and apps with React using Gatsby.

Screenshot

screenshot

Demo

An online demo of this project is available at https://gatsby-starter-i18n-react-i18next.vercel.app

Included

  • Gatsby configuration written in TypeScript.
  • Chakra UI component library and design system with persistent light/dark color mode toggle.
  • Jest testing framework using Testing Library with integrated test-utils and example tests.
  • Functional React component examples written in TypeScript (strict) and using React Hooks API.
  • Internationalization with react-i18next and button to toggle between English and Bahasa Indonesia.
  • Automatic, in-browser language detection via integrated i18next plugin.
  • SEO component with Open Graph images, Large Twitter Cards, robots meta, keywords and Canonical URLs.
  • 4K rotating background image using Unsplash Source with configurable Collection source.
  • Custom SVG logo icon borrowed from After Dark created using Chakra UI.

Requirements

  • Node
  • TypeScript
  • Yarn

Installation

  1. Copy source code to your machine.
  2. Copy .env.example to .env.development and env.production.
  3. Run yarn to install dependencies.

Usage

  • Run yarn dev to start development server.
  • Run yarn test to run unit tests. Add --watch to watch for changes.
  • Run yarn type-check to run type checker.
  • Run yarn analyze to inspect JS bundle sizes.
  • Run yarn build to build site for production.
  • Run yarn serve to view production build.
  • Run yarn clean to clear cached files.
  • Run yarn format to prettify code.

Language

This starter assumes you don’t want to generate a new page for every language but instead want to translate the interface only. If you’re looking to generate new pages for each language, this may not be the starter you’re looking for.

To deep link to a page in Bahasa Indonesia add ?locale=id to the end of the URL. For English replace id with en. Modify the query string key used along with other language settings in src/lib/i18next.ts.

Browsers

By default Gatsby supports these browsers. This starter customizes the Gatsby defaults and uses the defaults provided by Browserslist instead. Remove .browsersrc if you wish to restore the default Gatsby settings. Note this will affect the size of your bundled JavaScipt files. See Performance for more information on bundle sizes.

Performance

Gatsby uses server-side rendering to generate static HTML files during its build process. In addition to HTML files Gatsby will also generate a number of JavaScript bundles loaded at runtime to perform Hijax. As more code is added to your site it may become bloated which can impede performance and damage search rankings. Here are some tips to help keep your site running fast:

  • Decrease the size of your images with gatsby-image and use SVG graphics whenever possible.
  • Always use WOFF2 for web fonts. Create WOFF2 files from TTF files using woff2 compress.
  • Adjust supported browsers to decrease JS bundle sizes as noted in the Gatsby docs.
  • Use the Offline plugin to more heavily cache in-browser page resources.
  • Try the Bundle Analyzer Gatsby plug-in as an alternative to the included analyze script.
  • Use SpeedTracker to monitor site performance over time.

Don’t optimize too early or you may end up optimizing things you decide you don’t need later on.

SEO

Unlike most starters a keywords field is provided in the siteMetadata.keywords object in config/gatsby-config.ts. While some search engines may not utilize this field to curb keyword stuffing it’s metadata and you may find other uses for it. Keywords may be overridden on a page-by-page basis if desired. To do so pass the keywords prop to the SEO component in your TSX files like:

const PageSpecificKeywords = () => (
  <SEO keywords={['foo', 'bar', 'baz', 'bat']}>
)

To instruct search engines and other spiders not to crawl the website add noindex, nofollow to siteMetadata.robots in config/gatsby-config.ts. You may wish to do this if, for instance, you’re testing your production deployment and do yet wish to appear in search engines. Like keywords this may be set on a page-by-page basis. Use it to prevent legal pages and other low-value pages from appearing in search engines.

Environment

An empty .env.example file has been left in this project. This is where environment variables keys and sample values can be documented and checked in along with the source code. Add actual key names used inside but either leave their values blank or use phony values those keys. Do not place actual key values in this file. Those should be kept outside of source control.

See Environment Variables in the Gatsby docs for more information.

Rights

Copyright © 2020 Josh Habdas jhabdas@protonmail.com

This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.

This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for more details.

You should have received a copy of the GNU Affero General Public License along with this program. If not, see https://www.gnu.org/licenses/.

This work incorporates fonts covered under copyright by Adobe and Sebastian Kosch. See the fonts directory for copyright and permissions notices.