the footnote label "Footnotes" should be able to be translated

[tats-u]

Have you read the Contributing Guidelines on issues?

• I have read the Contributing Guidelines on issues.

Prerequisites

• I'm using the latest version of Docusaurus.
• I have tried the npm run clear or yarn clear command.
• I have tried rm -rf node_modules yarn.lock package-lock.json and re-installing packages.
• I have tried creating a repro with https://new.docusaurus.io.
• I have read the console error message carefully (if applicable).

Description

By the upgrade of the MDX plugin, the border of the document body and the footnotees has been changed from <hr> to the English-fixed heading. I couldn't find a way to change the language of the heading.

Some remark and related plugins can customize the "Footnotes" label by the option passed to mdast-util-to-hast.toHast.

https://github.com/remarkjs/remark-rehype#fields
https://github.com/remarkjs/remark-rehype#example-footnotes-in-languages-other-than-english
https://github.com/remarkjs/remark-html#options
https://github.com/syntax-tree/mdast-util-to-hast#footnotes
https://github.com/micromark/micromark-extension-gfm-footnote#label

Reproducible demo

WIP

Steps to reproduce

1. Set the language of your document as other than English
2. Add a footnote to a page in docs
3. docusaurus start
4. Open the page in your browser

Expected behavior

The footnote label is that in the language of your language (e.g. "脚注" in Japanese)

Actual behavior

Always "Footnotes" regardless of your language

Your environment

• Public source code: WIP
• Public site URL: WIP
• Docusaurus version used: 3.0.0
• Environment name and version (e.g. Chrome 89, Node.js 16.4): Firefox
• Operating system and version (e.g. Ubuntu 20.04.2 LTS): Windows 11

Self-service

• I'd be willing to fix this bug myself.
  ↑ If easy to fix, but doesn't seem

[tats-u]

We have to read defaultLocales and locales in docusaurus.config.* from processor.ts and pass correct MDX options to gfm in response to these Docusaurus config values.

[slorber]

cc @wooorm can we pass footnoteLabel option to remark-gfm?

It doesn't look to be supported atm in remark-gfm and micromark-gfm (outside of gtmHtml). Is there a high-level option to configure it easily?

---

@tats-u until we solve it, I think you can translate it in userland thanks to a rehype plugin

[wooorm]

remark-rehype has the options. Should be in both projects' docs!

[slorber]

Thanks!

Ref: https://github.com/remarkjs/remark-rehype#example-footnotes-in-languages-other-than-english

So it looks like a possible solution:

compile(
  {value: '…'},
  {remarkRehypeOptions: {footnoteLabel: 'Fußnoten'}}
)

I guess we could expose the whole MDX option object and deep merge it for maximum flexibility (although it expose the ability to break things? 🤔 ), or eventually just the remarkRehypeOptions option

[tats-u]

remark-rehype has the options. Should be in both projects' docs!

So it looks like a possible solution:

This is it. I have noticed it too several days ago but forgotten to tell it to correct my misuses guess. I am sorry for that.

I wonder if we should generate processor instances (the return value of (import ("mdx-js/mdx")).createProcessor) for each language.

docusaurus/packages/docusaurus-mdx-loader/src/processor.ts

Lines 159 to 169 in 17c93e4

	const processorOptions: ProcessorOptions & Options = {
	...options,
	remarkPlugins,
	rehypePlugins,
	providerImportSource: '@mdx-js/react',
	};
	const mdxProcessor = createMdxProcessor({
	...processorOptions,
	format,
	});

Shall we add an additional argument language: string to createProcessorFactory? It is going to be transformed to a footnote label for the language that it presents. The most simplest transformer is a hashmap (lazy initialization may be needed).

    const processorOptions: ProcessorOptions & Options = {
      ...options,
      remarkPlugins,
      rehypePlugins,
      remarkRehypeOptions: {
        // this function translaveFootnoteLabel must be defined at another place by ourselves
        footnoteLabel: translateFootnoteLabel(language),
      },
      providerImportSource: '@mdx-js/react',
    };