Fallback page for missing translations

[maxackerman]

Looking for a way to have missing translations fall back to English until they are added.

Take this structure for example:

├─ src
   └─ en-GB
       ├─ about.njk
       └─ index.njk
   └─ es-ES
       └─ index.njk

Spanish is missing the about page. Is there a way to have that page fall back to the English version, so visiting example.com/es-ES/about would render the English about page?

[adamduncan]

Great question! This is a super interesting challenge that we're exploring in some of our work at the moment. It raises some interesting technical and UX considerations.

One approach might be to leverage server config or redirects, depending on your infrastructure. Here's one approach to explore. Given it's a static site though, would a user find it strange to be switched automatically back and forth between languages? I.e. The main layout (i.e. header nav) would be in English as you "fall back" from the missing about.njk page on the Spanish site.

Also, one might consider a prebuild script to duplicate "missing" pages from the root language (i.e. en-GB) into the supporting language sites. This would likely provide better UX, given the page's contents would be in English but the layout would still appear as if you were on the Spanish site. Although the copied files would need to be cleaned up to ensure they're not duped nor in version control.

Keen to hear any other thoughts you might have. I'll let you know how we approached it when we land on an approach 👍

[maxackerman]

Hey Adam! Thanks for sharing your thoughts on this. I like the prebuild approach a lot, and will look into it if I get some time. That feels more inline with the static site setup, not depending on server to make it all work. I imagine the "generated" fallback language pages would go into the site dist folder, so they could stay out of version control. We could even inject a notice on the page that the translated content is missing.

It's also interesting how the files are structured in the Apache approach you shared. I really like that you could have all the translated files in the same directory, and not need to replicate the site folder structure for each language.
That is similar to how Kirby CMS handles this. It's not a static site generator, but the content is stored in markdown/text files. The files would look like /home/home.en.txt /home/home.de.txt but the corresponding urls are example.com/home example.com/de/home

[Ryuno-Ki]

In Internationalization And Localization For Static Sites @Snugug proposed an approach using Service Worker and intercept the request (plus, redirects to a fallback page if necessary).

[maxackerman]

Yes! lots of good ideas in that article, also helpful to see the source code here:
https://github.com/chromeos/chromeos.dev

and here:
https://github.com/chromeos/static-site-scaffold

[zachleat]

Sorry to butt in here but the new upcoming locale_url filter handles this use case! https://www.11ty.dev/docs/plugins/i18n/#locale_url-filter (AND this eleventy-plugin-i18n plugin and the official i18n plugin should complement each other nicely)