I gave another stab at Gatsby after @Thieffen shared another example of doc i18n over at react-hook-form’s doc repo
Feel free to fork and play with this:
Github: https://github.com/clairefro/learn-rw
Demo: https://sad-nightingale-e647cc.netlify.app/
It is unstyled and just a starting point for conversation. I arbitrarily split up the tutorial for sample pages and stole Thieffen’s French translations
Tech stack
Gatsby
Typescript
Tailwind
How it works
Markdowns are structured in a directory structure that becomes the url path.
A sidebar nav is generated half-manually. We define translations for section titles, and the order we want markdown files to appear in each section via the paths
array.
Titles for each page inside a section is automatically generated from the first header to appear in that markdown file, and links for each language are automatically supplied so you only define the paths once.
const linkPaths: SidebarLinkPaths = {
Tutorial: {
sectionTitle: {
en: "Tutorial",
fr: "Didacticiel",
},
paths: [
"tutorial/welcome-to-redwood",
"tutorial/installation-and-starting-development",
"tutorial/our-first-page",
],
},
}
A language switcher in the navbar updates the selected language in the global state, which can be accessed from any component using a useLanguageContext()
hook.
Caveat
This architecture would rely on all markdown files sharing the same name in every language (hence the same slug in the url). So there wouldn’t be localized urls
/en/tutorial/our-first-page
/fr/tutorial/our-first-page
Interested to hear your impressions/concerns