Displaying "Under translation" banner for untranslated i18n pages

[allenscha]

This question is loosely related to #9645.

In Docusarurus, i18n pages that are not yet translated (and without the corresponding file) are filled with the content of the default language. I'd like to know if it is possible to display a banner ("Under translation") on the top of the page in such situations, probably with swizzling.

[slorber]

Here's a solution I shared previously: #9947 (comment)

I use it on my own website and plan to provide first-class feature for this in the future:

https://thisweekinreact.com/fr/newsletter/187

The implementation is a bit weird atm but here's what's working for me:

{
  markdown: {
    parseFrontMatter: async (params) => {
      // Reuse the default parser
      const result = await params.defaultParseFrontMatter(params);

      const isPartial =
        params.filePath.includes("/_") || params.filePath.includes("\\_");

      if (isPartial) {
        return result;
      }

      // TODO fix weird undefined case!
      const isDefaultLocale =
        process.env.DOCUSAURUS_CURRENT_LOCALE === "undefined" ||
        typeof process.env.DOCUSAURUS_CURRENT_LOCALE === "undefined" ||
        process.env.DOCUSAURUS_CURRENT_LOCALE === "en";
      const isI18n = params.filePath.includes("/i18n/");

      if (isDefaultLocale) {
        result.frontMatter.isTranslationMissing = false;
      } else {
        result.frontMatter.isTranslationMissing = !isI18n;
      }

      return result;
    },
  },

[allenscha]

Thank you. Could you confirm the following two points?

• This solution works in Docusaurus 3.1 or higher.
• It works without any front matter setting even though it's handled through the parseFrontMatter hook.

Unfortunately, we've not migrated to 3.x yet. So if the first one is true, we'll have to rely on some other manual way.

[slorber]

Yes it requires 3.1 to automate this, however you can assign the front matter manually in earlier versions if you want to show a banner. You can provide custom front matter in both original and translated files.

I don't understand the 2nd part sorry

[allenscha]

Could you elaborate the following part?

however you can assign the front matter manually in earlier versions if you want to show a banner. You can provide custom front matter in both original and translated files.

Let's suppose we have a website with three languages, en (default), fr, and de. The fr docs have been translated and the files exist under /i18n/fr, but the de docs have not been translated and the files don't exist under /i18n/de. In this case, we want to show a banner on the untranslated de pages only, which will be populated with the content of en docs when the user switches to de. How can we set a custom front matter manually and make the banner show up on de pages only?

[slorber]

You can put front matter "is_original: true"

If de + is_original, then show the banner