i18n/localization support for the `learn.svelte.dev`

[mashanz]

Reason

There are non speaking english people.

Benefit

It will be great if we can internationalization this web app. So I can convert non english speaking people to become svelteism 😈

[Zxce3]

Nicee 😂

[tomoam]

I have heard that the Svelte team is planning to work on i18n. But while waiting for the official i18n feature, you can fork this repository, localize it, and publish a tutorial site in your language.

We, the Svelte Japan community, have forked this repository and published a tutorial site in Japanese.

• https://learn.svelte.jp/
• https://github.com/svelte-jp/learn.svelte.dev

In the future, when official i18n feature is released and integrated into the documentation sites, localized contents should be useful for that as well.

For reference, the following is how we did it. This method is based on the translation work of the React and Vue teams. I don't think the React and Vue teams will ever see this issue, but thanks to them.

(In OSS documentation, the requirements for i18n are different from those for a typical web app. In fact, the React team previously tried to use Crowdin for localization, but it did not meet their requirements, so they now use GitHub as their i18n platform. More details here. )

---

Fork this repository

Create a repository on GitHub (and org if necessary)

Create an empty repository {your-org}/learn.svelte.dev on GitHub. If you intend to translate other sites (svelte.dev, kit.svelte.dev), you may want to create an org.

Note: You should not fork by clicking the Fork button on GitHub. You may accidentally create a PR to the original repository.

Clone this repository

git clone https://github.com/sveltejs/learn.svelte.dev.git

and rename remote from origin to head:

git remote rename origin head

and add the repository created above as upstream:

git remote add upstream https://github.com/{your-org}/learn.svelte.dev.git

and push it:

git push -u upstream main

Deploy

learn.svelte.dev is deployed to Vercel, please read this document for configuration and integration with Github.

• https://vercel.com/docs/concepts/get-started
• https://vercel.com/docs/concepts/deployments/git/vercel-for-github

Once the integration is set up, it will run the build and the site will be deployed shortly.

Translation

Now it's time to start translation. First, create a branch for translation in your local:

git fetch --all
# replacing `translate-docs-1` with a suitable name
git checkout -b translate-docs-1 upstream/main

The content of each exercise is located in the content/tutorial directory. For example, for the first tutorial 'Welcome to Svelte', content/tutorial/01-svelte/01-introduction/01-welcome-to-svelte/README.md .

Once translated, commit it:

git add content/tutorial/01-svelte/01-introduction/01-welcome-to-svelte/README.md
# commit message is whatever you like
git commit -m "docs: translate 01-welcome-to-svelte"

push it:

git push upstream translate-docs-1

Submit a PR on GitHub. the Vercel integration should run and you should see a preview. If the translated parts look good, merge them in. And do the same for the other markdown files.

Also, change the lang attribute of the html tag in src/app.html and translate the English text in src/routes/tutorial/[slug]/Sidebar.svelte, if necessary.

Maintenance

Over time, sveltejs/learn.svelte.dev will be updated. Let's get those updates into the translation site as well.

git fetch --all
# create branch from {your-org}/learn.svelte.dev:main
git checkout -b translate-yyyyMMdd upstream/main
# merge from sveltejs/learn.svelte.dev:main
git merge head/main

If you have already translated the file and the file is updated in the head (sveltejs/learn.svelte.dev), there is probably a conflict. So you can jump to the conflicted part, translate it, and resolve the conflict so that you can get the update into it (of course, for newly created files or paragraphs, no conflicts are occured. You will have to see that part yourself).

Once resolved, commit, push, submit a PR, and merge.

Note: React and Vue have a bot that merges from the head repository and creates a branch including the conflicts (for example here). In the future, it would be nice to have such a bot in Svelte.

---

It would be great if you could use this excellent tutorial in your language to learn about Svelte and SvelteKit, which are excellent frameworks!

[Saad5400]

If anyone's interested in doing one for Arabic (like the Japanese one) contact me!