i18n feature for MD/MDX

[ThuKieuIC2]

Hello and Thanks much @robisim74 for lovely Qwik i18n package

I am trying to apply Qwik-speak and found that it may miss/hard-to-apply for MD/MDX file.
MD/MDX files are built-in supported by Qwik or 3rd lib markdown-it.
Please give me your advice.
Thanks

[robisim74]

The problem is that Qwik Optimizer supports mdx files, but it doesn't support the context and the hooks inside them: so you can't use the translation functions directly in the mdx files.

What you can do is create the components, and import them into mdx files, for example:

index.mdx

import { MyComponent } from './my-component.tsx';

<MyComponent />
{/* other components */}

export const head = {
  title: 'runtime.head.my-page.title',
  meta: [{ name: 'description', content: 'runtime.head.my-page.description' }]
};

If you are using some plugin instead, and want to import mdx files into Qwik components, you should be able to pass t or inlineTranslate functions to the mdx files: https://stackoverflow.com/questions/53119525/how-to-use-i18next-react-i18next-inside-mdx-markdown-files-with-mdxjs

In this case, I should add support for mdx files inside Extract and Inline tools of this library.

Could you post the configuration of the mdx plugins you are using, and some examples of what you would like to achieve?

[ThuKieuIC2]

Thanks much @robisim74 for your quite clear advice.
I am using (Qwind template)
It uses MD plugins "markdown-it": "^13.0.1", "gray-matter": "^4.0.3" not built-in Qwik.

Qwik-Speak plays great role in almost use-cases I apply/test.
I use MD for multi-lang updatable contents: privacy policy, terms, blog.
I am new to Qwik and MD in Qwik, not sure built-in or external MD plugin is better. But markdown-it and gray-matter are easy to use, performace may slower.

Please help more.

[robisim74]

I think if use MD for privacy policy, terms, blog, it would be better to have one MD file for each translation, instead of cluttering translation files.
At this point you have several alternatives, for example:

• Depending on the language, show the corresponding MD file inside a Qwik component:

import PrivacyEn from './privacy/index.mdx';
import PrivacyIt from './it-IT/privacy/index.mdx';

export const Privacy= component$(() => {
  const lang = useSpeakLocale().lang;

  return (
    <div>
      {lang === 'it-IT' && <PrivacyIt />}
      {lang === 'en-US' && <PrivacyEn />}
    </div>
  );
});

• If you use a localized router, create a folder for each language:

src\routes\privacy\index.mdx
src\routes\it-IT\privacy\index.mdx

Ok, in the latter case you have to update plugin.ts and change-locale.tsx to handle the language also in pathname:

export const onRequest: RequestHandler = ({ pathname, params, locale }) => {
    let lang: string | undefined = params.lang;

    if (!lang) {
        const param = pathname.split('/')[1];
        lang = config.supportedLocales.find(x => x.lang === param)?.lang;
    }

    // Set Qwik locale
    locale(lang || config.defaultLocale.lang);
};

const navigateByLocale$ = $((newLocale: SpeakLocale) => {
    const url = new URL(location.href);
    const param = loc.url.pathname.split('/')[1];
    const lang = loc.params.lang || config.supportedLocales.find(x => x.lang === param)?.lang;
    if (lang) {
      if (newLocale.lang !== config.defaultLocale.lang) {
        url.pathname = url.pathname.replace(lang, newLocale.lang);
      } else {
        url.pathname = url.pathname.replace(new RegExp(`(/${lang}/)|(/${lang}$)`), '/');
      }
    } else if (newLocale.lang !== config.defaultLocale.lang) {
      url.pathname = `/${newLocale.lang}${url.pathname}`;
    }

    location.href = url.toString();
  });

Hope this helps

[ThuKieuIC2]

Yeah, the MD contents are 20-odd Word pages. Thus, your solution is the best to target editor and maintainer easy to use.
I will try and release this CMS template powered by Qwik, Qwik-Speak, Tailwind for comunity SME sites.
Thank you very much indeed.