Generate multilingual documents

[steve02081504]

Search Terms

muti lang i18n multilingual

Problem

I have a project where the code comments are all in Chinese, but it has Japanese and English users.
So I was wondering if there was any way to generate pages with a language selection function like the documentation from the big companies, and then get a language cross-reference by maintaining multiple versions of the d.ts file or something, so we can have documentation in different languages?

Suggested Solution

idk.

[Gerrit0]

Currently, no, TypeDoc doesn't do this. There is typedoc-plugin-localization which does something somewhat similar.

I suspect a more sustainable solution for this would be using tags suffixed with the language identifier (e.g. @summary-zn which can be maintained alongside the other comments) which also results in a new dropdown added to the settings tab which includes the available language options.

[steve02081504]

I maintain multiple versions of the d.ts file to get multiple versions of the d.ts output, and make it possible for users of different languages to get different language editor hints in exports (even though a new version of the npm package isn't currently available)
https://github.com/ukatech/jsstp-lib/blob/f3f4bdd204f2f21fb3e376b8714b960dbfe33a42/src/.decls
https://github.com/ukatech/jsstp-lib/blob/f3f4bdd204f2f21fb3e376b8714b960dbfe33a42/package.json#L21L50

With multiple versions of the d.ts file I can make multiple versions of the typedoc website
https://github.com/ukatech/jsstp-lib/blob/f3f4bdd204f2f21fb3e376b8714b960dbfe33a42/.github/pages/doc/index.html
The only unfortunate thing about this approach is that there is no drop-down menu in the website for selecting a language

The others seem to be working well so far
XD

[Gerrit0]

I'm not sure a better solution than generating multiple versions of the docs is ever going to exist -- it's really hard to beat it without sacrificing other functionality...

I think my recommendation here is going to be using a hook that injects a dropdown on either pageSidebar.begin or sidebar.begin for the language.

I put together an example of one way this could be done for the site you linked above, a plugin that uses the htmlLang option to determine what the current language is, and has a hardcoded set of other languages:

// CC0
// @ts-check
import td from "typedoc";
import path from "path";

const template = `
<select onchange="location.href = event.target.selectedOptions[0].dataset.url">
  <option data-url="{ROOT}/JP/{PAGE}" lang="ja">日本語</option>
  <option data-url="{ROOT}/EN/{PAGE}" lang="en">English</option>
  <option data-url="{ROOT}/CN/{PAGE}" lang="zh-CN">中文 (简体)</option>
</select>
`;

/** @param {td.Application} app */
export function load(app) {
  app.renderer.hooks.on("pageSidebar.begin", (context) => {
    const language = app.options.getValue("htmlLang");

    const root = path.posix.join(context.relativeURL("./"), "..");
    const html = template
      .trim()
      .replace(/\{ROOT\}/g, root)
      .replace(/\{PAGE\}/g, context.page.url)
      .replace(`lang="${language}"`, `lang="${language}" selected`);

    return td.JSX.createElement(td.JSX.Raw, { html });
  });
}