Skip to content

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

Merged
slorber merged 19 commits into
masterfrom
slorber/format-api
Feb 26, 2021
Merged

feat(v2): Add Interpolate / interpolate APIs + complete theme translations#4295
slorber merged 19 commits into
masterfrom
slorber/format-api

Conversation

@slorber

@slorber slorber commented Feb 25, 2021

Copy link
Copy Markdown
Collaborator

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:

Other studied solutions:


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

@slorber slorber added the pr: new feature This PR adds a new API or behavior. label Feb 25, 2021
@slorber slorber requested a review from lex111 as a code owner February 25, 2021 10:44
@facebook-github-bot facebook-github-bot added the CLA Signed Signed Facebook CLA label Feb 25, 2021
@netlify

netlify Bot commented Feb 25, 2021

Copy link
Copy Markdown

Deploy preview for docusaurus-2 ready!

Built with commit 86e6b98

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

@netlify

netlify Bot commented Feb 25, 2021

Copy link
Copy Markdown

[V1] Deploy preview success

Built with commit 86e6b98

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

@github-actions

github-actions Bot commented Feb 25, 2021

Copy link
Copy Markdown

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

github-actions Bot commented Feb 25, 2021

Copy link
Copy Markdown

⚡️ 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 slorber changed the title feat(v2): Add Interpolate / interpolate APIs feat(v2): Add Interpolate / interpolate APIs + complete theme translations Feb 25, 2021
@slorber

slorber commented Feb 26, 2021

Copy link
Copy Markdown
Collaborator Author

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.

@slorber slorber merged commit 1734975 into master Feb 26, 2021
@lex111 lex111 added this to the v2.0.0-alpha.71 milestone Mar 1, 2021
This was referenced Mar 10, 2021
@slorber slorber deleted the slorber/format-api branch August 17, 2021 17:59
mrizwanashiq pushed a commit to mrizwanashiq/docusaurus that referenced this pull request Jun 25, 2026
…tions (facebook#4295)

* WIP: refactor team profile cards

* Add Interpolate / interpolate APIs

* Add interpolate snapshot test

* comments

* fix Interpolate TS types

* Interpolate should handle numbers and other JS types

* translate BlogPostItem

* interpolate translate() fn + add translations for blog post tag header

* localize the LastUpdated component

* translate DocVersionSuggestions

* fix test

* add some new translations

* Add node script to easily update the theme default translations

* fix translation extractor bug due to translate() dynamic values

* use ICU placeholder syntax

* refactor month key

* order

* team  page translation improvements

* Add interpolation doc + improve i18n doc
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

CLA Signed Signed Facebook CLA pr: new feature This PR adds a new API or behavior.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants