feat(v2): Add Interpolate / interpolate APIs + complete theme translations

[slorber]

Motivation

To provide exhaustive Docusaurus classic theme translations, we need a way to interpolate a string containing placeholders with string or JSX values.

This is particularly useful with the Translate component, when we need to wrap some placeholders in additional JSX like a Docusaurus Link, or have a substring being translated independently...

<Translate
  id="team.profile.SebastienLorber.body"
  values={{
    website: (
      <Link to="https://sebastienlorber.com/">
        <Translate id="team.profile.SebastienLorber.body.websiteLinkLabel">
          website
        </Translate>
      </Link>
    ),
    devto: <Link to="https://dev.to/sebastienlorber">Dev.to</Link>
  }}
>
  {
    "React lover since 2014. Freelance, helping Facebook ship Docusaurus v2. He writes regularly, on his {{website}} and {{devto}}."
  }
</Translate>

Note:

• Most Docusaurus sites won't need this, so we only ship a very minimalistic and very lightweight solution with a home-made implementation.
• The goal is only to provide simple interpolation, not ship an advanced i18n runtime with pluralization, genders etc...
• If you need something more advanced for i18n, you'd rather use a library like React-Intl FormattedMessage
• It was considered to ship a lightweight client-side markdown parser, but it is heavier

Sources of inspirations:

• https://github.com/Doist/react-interpolate
• https://github.com/Automattic/interpolate-components
• https://twitter.com/sebastienlorber/status/1364214597608230918

Other studied solutions:

• https://github.com/berezh/react-string-format
• https://github.com/developit/snarkdown
• https://github.com/probablyup/markdown-to-jsx
• https://github.com/Khan/simple-markdown
• https://github.com/janl/mustache.js/
• https://github.com/martinandert/react-interpolate-component
• https://react.i18next.com/legacy-v9/interpolate
• https://github.com/i18next/i18next/blob/685aa0feb47d027e72033a566d17e5f5b216bd0e/src/Interpolator.js

---

Also complete the theme translations

Also add a script to manage the default theme translations more easily for maintainers:

yarn workspace @docusaurus/theme-classic update-code-translations

Have you read the Contributing Guidelines on pull requests?

yes

Test Plan

tests + dogfooding

[netlify]

Deploy preview for docusaurus-2 ready!

Built with commit 86e6b98

https://deploy-preview-4295--docusaurus-2.netlify.app

[netlify]

[V1] Deploy preview success

Built with commit 86e6b98

https://deploy-preview-4295--docusaurus-1.netlify.app

[github-actions]

Size Change: +11.9 kB (+2%)

Total Size: 544 kB

Filename	Size	Change
website/build/assets/css/styles.********.css	87.1 kB	+46 B (0%)
website/build/assets/js/main.********.js	370 kB	+11.5 kB (+3%)
website/build/blog/2017/12/14/introducing-docusaurus/index.html	60.5 kB	+184 B (0%)
website/build/index.html	25.6 kB	+184 B (+1%)

ℹ️ View Unchanged

Filename	Size	Change
website/build/docs/introduction/index.html	235 B	0 B

_{compressed-size-action}

[github-actions]

⚡️ Lighthouse report for the changes in this PR:

Category	Score
🟠 Performance	81
🟢 Accessibility	96
🟢 Best practices	100
🟢 SEO	100
🟢 PWA	95

Lighthouse ran on https://deploy-preview-4295--docusaurus-2.netlify.app/classic/

[slorber]

Going to use {placeholder} syntax instead of {{placeholder}}.

This way, the current is more compatible with the ICU format (subset of it).

If we need to support more ICU features in the future it won't require any breaking change, and will likely be better understood by translation softwares supporting ICU.