feat: add i18n support

[NftTopBest]

🔗 Linked issue

i18n feature issue item from docus: nuxt-themes/docus#770

❓ Type of change

• 📖 Documentation (updates to the documentation or readme)
• 🐞 Bug fix (a non-breaking change that fixes an issue)
• 👌 Enhancement (improving an existing functionality like performance)
• ✨ New feature (a non-breaking change that adds functionality)
• ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

The PR adds i18n features.
The idea comes from here: nuxt-themes/docus#770
After some more deep digs, I find out the solution is to make a PR here. And nothing to do with the docus project.

• Add playground/i18n example
• Add dev:i18n command in package.json

📝 Checklist

• I have linked an issue or discussion.
• I have updated the documentation accordingly.

[nuxt-studio]

✅ Live Preview ready!

Name	Edit	Preview	Latest Commit
content	Edit on Studio ↗︎	View Live Preview	2fa859d

[nuxt-studio]

✅ Live Preview ready!

Name	Edit	Preview	Latest Commit
content	Edit on Studio ↗︎	View Live Preview	564d21e

[netlify]

✅ Deploy Preview for nuxt-content canceled.

Built without sensitive environment variables

Name	Link
🔨 Latest commit	2fa859d
🔍 Latest deploy log	https://app.netlify.com/sites/nuxt-content/deploys/646b5c3abf9e7c00081cad85

[Tahul]

@farnabaz @Atinux ;

This looks reasonable, I briefly checked the code and it seem to only be built for Document Driven mode.

As I think this behavior can easily be achieved via regular prefixed content queries, what do you think in including this in Document Driven mode?

We could also move that code somewhere in Docus I guess.

[Atinux]

I don't think useI18n() is the correct name, I would at least name it useContentI18n() to avoid conflict with other libraries.

Before changing the document driven mode, I believe we need first to have an upgrade of it to avoid using a middleware but a plugin to inject the page to vue-router itself, this way we can leverage payload extraction as well as better i18n support.

[NftTopBest]

We could also move that code somewhere in Docus I guess.

This is why we can not make it in Docus.

1. At the beginning, I try to make it in Docus, then find out that I have to update the code here
2. And finally all the code setup in Content is enough, no more code for Docus then.
3. And only changing the code in Docus can not have the ability to update the navigation update to a new lang, check the code here: https://github.com/nuxt/content/pull/2075/files#diff-655e26ed4032bc6928b3b3838a699902e421b1838fadf34ed6d78decdfdfa69dR52-R64

The target features:

1. user can have a lang switcher to switch to multiple langs with the top and sidebar nav change correspond
2. user just simply setup the locales and defaultLocale in the nuxt.config.ts to turn on the feature in Docus or any other nuxt app that use the Content, there is no need to install the nuxt-i18n module
3. nuxt-i18n module maybe not suit for this as it seems auto-generate new lang route for every lang, and in the content case

Just add an online demo here: https://nuxt-content-i18n.vercel.app/, pls check the result @Tahul @Atinux

[productdevbook]

This issue is extremely important to me, I hope it will be resolved for a moment. Thank you @NftTopBest pr.

[NftTopBest]

This issue is extremely important to me, I hope it will be resolved for a moment. Thank you @NftTopBest pr.

@Tahul @Atinux Is that I need another update to make this PR works?

[truesteps]

Any progress?

[NftTopBest]

@truesteps

Check out the demo here: https://nuxt-content-i18n.vercel.app/

For now, I am not sure what I should do further.

[truesteps]

@NftTopBest I love the implementation, I meant any progress on the maintainers side :) thanks for the quick work, it looks amazing

[XenBG]

I'd like to use that soon.

[Barbapapazes]

Whooo, awesome. Thanks for this! Can't wait to try it in my portfolio because it's currently written in French but many wants to read it in English.

[NftTopBest]

Hi @farnabaz , is there anything I need to modify for the code?

[Barbapapazes]

Before changing the document driven mode, I believe we need first to have an upgrade of it to avoid using a middleware but a plugin to inject the page to vue-router itself, this way we can leverage payload extraction as well as better i18n support.

Hello @Atinux, could you explain more "inject the page to vue-router"? Thanks.

[Barbapapazes]

Hi @farnabaz , is there anything I need to modify for the code?

Hello, I think that the support for i18n could also be add for non DocumentDriven mode. Using ContentDoc, ContentFetch and ContentNavigation.

[XeniaLu]

Hello, maintainers. May I inquire if there have been any recent updates regarding the timeline for merging this feature?

[mathieunicolas]

Hi ! Thanks a lot for this PR, I hope it will be added to this project soon ! Can we do anything to help things going forward ? @farnabaz ?

[DraftProducts]

Another change is needed to support i18n : the parseMarkdown() function (L19-L33) should be called with some i18n options for the remark-rehype plugin :

const parsed = await parseMarkdown(content as string, {
      highlight: options.highlight,
      remark: {
        plugins: config.remarkPlugins
      },
      rehype: {
        options: {
+         footnoteLabel: 'Footprints'
          handlers: {
            link: link as any
          }
        },
        plugins: config.rehypePlugins
      },
      toc: config.toc
    }
})

ℹ️ The footnote option is documented here : https://github.com/remarkjs/remark-rehype#fields

The current way to configure without i18n is through the nuxt.config.ts file with redefining the plugin to force options :

content: {
  markdown: {
    remarkPlugins: [
      ['remark-rehype', {
        footnoteLabel: 'Footprints'
      }]
    ]
  }
},