Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 19 commits into from
Feb 26, 2021

Conversation

slorber
Copy link
Collaborator

@slorber slorber commented Feb 25, 2021

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
Copy link

netlify bot commented Feb 25, 2021

Deploy preview for docusaurus-2 ready!

Built with commit 86e6b98

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

@netlify
Copy link

netlify bot commented Feb 25, 2021

[V1] Deploy preview success

Built with commit 86e6b98

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

@github-actions
Copy link

github-actions bot commented Feb 25, 2021

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
Copy link

github-actions bot commented Feb 25, 2021

⚡️ 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
Copy link
Collaborator Author

slorber commented Feb 26, 2021

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
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