Website Internationalization Roadmap

[orta]

As the new website is being built out bit-by-bit, we're adding support for internationalized content on a per-section basis. I've been working with l33t speak under the language "vo" to test out the infra as it is built.

I expect there are (at least) four main components for creating content on a per-language basis:

• Website copy (navigation bar, index page, community page etc)
• Website (and handbook) content (markdown files mainly)
• Playground examples content, and on-screen copy
• TSConfig reference content, and on-screen copy

Each one of these needs:

• Working English documentation as reference
• Infra for supporting the creation of internalized content
• Infra for supporting the presentation of internationalized content

Current state of internationalization:

• Website copy.

  • English
  • Creation
  • Users

• Website content (e.g. the handbook).

  • English
  • Creation
  • Users

• Playground examples:

  • English
  • Creation
  • Users

• TSConfig:

  • English
  • Creation
  • Users

How To Contribute

1. Join the TypeScript Discord - come say hi the ts-web-translate

2. Clone the repo. The work will happen on the v2 branch. Deploys of the TS website have this static site set up at http://www.typescriptlang.org/v2/

git clone https://github.com/microsoft/TypeScript-Website
cd TypeScript-Website

code .
code README.md

# Follow setup instructions in README
# then start up the server
yarn start

3. Look below to see the sections, then come back up here

4. Read this PR to see an example of adding a language: Create an example PR which shows how to add a language #181

5. Pick one of the below sections to start with, it might be easiest to work with samples in the Playground first FWIW.

Website

The website supports localization via React-intl, as of today only the navigation bar it translatable, but with time this will grow. The infra just came in with #180

There are a series of keys and values for each language, with a fallback to English if you miss something. The TypeScript compiler will keep it all in check.

Playground

You can cover the examples in the dropdown in the playground (and in the site footer on desktops.) Full docs here

• Make a subfolder with the code of the language in the copy folder of the 'playground-examples'
• Ensure the filename are the same as English, (you can provide a different title via the JSON headers in the ts/js files)

TSConfig

Each TSConfig file is a unique markdown file which can be uniquely handled per language. Any markdown file not found will be replaced with English. Full docs here

• Check out this folder
• Ensure the filename is the same (we can provide a different title via the YML headers in the markdown files)

---

Recommendations

I'm pretty new to the translation game, but here's some notes from working with people so far on how translations can culturally work in the TS website.

Translate code to be a cultural fit. E.g.

const helloWorld = "Hi" 

to

const olaMundo = "Olá`

Translate names in example

const user =  { name: "John" }

to

const usar =  { name: "João" }

Note: we aim to have a diverse set of nationalities and genders in our examples, so I'd recommend not changing all of them, but try keep it feeling like it was written with that in mind also.

Translate Technical Terms, but keep English around

This one is nuanced, but a term like Mapped Type is the name for this:

type MyPartialType<Type> = {
  // For every existing property inside the type of Type
  // convert it to be a ?: version
  [Property in keyof Type]?: Type[Property];
};

So, if you translate it to "mapeada type", then provide a reference to the original name the first time it is used: "mapeada type (Mapped Type em inglês)" so that readers can know how to find the English resources on a topic.

[orta]

My long term goal will be to support the same style of infra which Gatsby and React use. Example. That requires having a full site ready with existing content for folks to work from - so it'll be piecemeal as I built it out

[orta]

#163 adds the ability to create and present internationalized playground samples

[glaucia86]

@orta hi! I was talking to Daniel, that you can count on me about to translate this pages to Portuguese. :)

[orta]

Woooo!

[Naturalclar]

@orta
Hello! I can help translating the website into Japanese :)

[evanSe]

Hey @orta I would like to help out, are there any parts that still need internationalization support? (code wise) as I only know English so translations would be useless 😅