Gatsby: Language toggle UI

[tesseralis]

Summary

Add a UI component (such as a dropdown or a languages page) so that users can toggle between languages

Basic example

• A Spanish-speaking user opens a link to "quick-start" in English
• The user clicks the "Languages" icon in the toolbar
• The user clicks the "Español (es)" link
• The user is sent to the Spanish version of the Quick Start page

Motivation

Users should be able to switch to their preferred language and remain on the same page.

Steps

1. Language toggle
2. Language settings page
3. "Always view in this language" popup

Examples from other websites

Electron

Yarn

MDN

[antonfrolovsky]

@tesseralis @fk ✋Hi, i would try make it.

[fk]

Hey there @tesseralis, and @antonfrolovsky! 👋 🤗

Here's a first shot (finally! :pray:) that hopefully solves our rudimentary UI needs …
and _maybe_ some more; I explored a little further, inspired by the excellent resources you provided:

Clickable prototype:

• Click the _Languages_ item in the main navigation to see the dropdown.
• Select _Spanish_ in the dropdown to switch the current page's language.
• I went for the dropdown because it provides a direct result without the need to switch to an intermediate "Language" page, and then go back to the original page.
  
  
  
  • IMO a dropdown is a good way to start out and should serve us well for the time we do have less than ~10 translations available, and/or do not have all content translated for a language.
  
  
  • I like how https://electronjs.org/languages handles a the (larger) amount of translations they offer, and think once we reach that point, this is the way to go (at least for the most requested/visited translations).
  
  
• You'll note a notification modal on the spanish version of the page, inspired by what MDN does to handle setting a language preference. I understand we do not need this for now, but wanted to include it to spark a discussion. IMO being able to set a default could be a "nice to have" feature, but things should just work fine without.
• Click _Settings and language details_ in the dropdown to go to a page that could provide
  
  
  
  • an overview of all available languages (and potentially their translation status)
  
  
  • a way to set the default language (see above)
  
  
  • information irt how to help with translations
  
  
  • links to the GitHub pages for each language/translation
  
  

Figma designs

[gatsbot[bot]]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.

If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!

As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks for being a part of the Gatsby community! 💪💜

[muescha]

Amazon Web Services has also translated documentation. if there is no translation available then an info is displayed and then the english content

[tesseralis]

Split this up into three separate concrete issues based on @fk's design: #21750 #21746 #21751