Add "Languages" navigation and article

[smikitky]

trafficstars

This PR adds navigation from the main site (react.dev) to the individual language sites (<lang>.react.dev). It also provides instructions on how to contribute to the translation efforts.

This file will serve as the source of truth for all languages, and the file will be fetched within getStaticProps. The deployedLanguages variable, now extracted to a separate module (src/utils/deployedLanguages.ts), determines whether the translation has been completed for each language.

• Added a new article titled "Translations" in the Community section.
• Modified getStaticProps to conditionally fetch langs.json when the target article is "Translations". Here, I adopted the pattern used to implement the inline TOC to pass down the list of languages via a context. While one HTTP request is added per build, I believe the performance impact is negligible.
• To invalidate MDX cache properly, I incorporated the language list and deployedLanguages to the cache key calculation.
• Introduced a new MDX component called "LanguageList", which will read the language list from the context and renderes the list. The styling is minimal for now, but please let me know if this has to look closer to the legacy site.
• Added a link to the new article in the TopNav. The SVG icon has been copied from the legacy site.

I hope this PR gets attention. Not being linked from the main site means that the translated versions won't have a high page rank, making it harder for people all over the world to discover the new docs in their language. They either don't even know that there are docs available in their language, or if they do, they wonder why they aren't linked from the main site.

Fixes: #5994

[github-actions[bot]]

Size changes

📦 Next.js Bundle Analysis for react-dev

This analysis was generated by the Next.js Bundle Analysis action. 🤖

Five Pages Changed Size

The following pages changed size from the code in this PR compared to its base branch:

Page	Size (compressed)	First Load
/404	81.24 KB (🟡 +562 B)	185.36 KB
/500	81.24 KB (🟡 +562 B)	185.36 KB
/[[...markdownPath]]	83.08 KB (🟡 +586 B)	187.2 KB
/errors	81.45 KB (🟡 +562 B)	185.57 KB
/errors/[errorCode]	81.43 KB (🟡 +562 B)	185.55 KB

Details

Only the gzipped size is provided here based on an expert tip.

First Load is the size of the global bundle plus the bundle for the individual page. If a user were to show up to your website and land on a given page, the first load size represents the amount of javascript that user would need to download. If next/link is used, subsequent page loads would only need to download that page's bundle (the number in the "Size" column), since the global bundle has already been downloaded.

Any third party scripts you have added directly to your app using the <script> tag are not accounted for in this analysis

Next to the size is how much the size has increased or decreased compared with the base branch of this PR. If this percentage has increased by 10% or more, there will be a red status indicator applied, indicating that special attention should be given to this.

[smikitky]

@gaearon Could you please take a look at this or assign someone to do so? I understand that the React team is busy, but it shouldn't take half a year to add links to translations. Besides, at least in Japan, the legacy React documentation still happily sits at the top of Google search results. I suspect this is because the new site is not linked from react.dev yet...

[harish-sethuraman]

would be better if someone from team merges the PR. Possible that people are on holidays. cc: @mattcarrollcode

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
19-react-dev	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	May 1, 2024 4:29pm
react-dev	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	May 1, 2024 4:29pm

[smikitky]

@harish-sethuraman I resolved the conflict, so could you take a look?

I recently came across yet another Japanese SNS post saying, "I didn't know there was a Japanese version of the React docs!" And his surprise is justified. For a project as significant as this, it's hard to imagine that there may be an official translation that is complete but hasn't been linked from the original site for almost a year.

Also, in Japan at least, the old version of the React site still appears at the top of Google search results, and I suspect the lack of a visible link from the main site is one of the reasons.

[rickhanlonii]

Sorry for the delay, this is awesome!!

On mobile, the header is getting pretty busy. What do you think about moving it to the bottom of the menu on mobile? Ideally we would also move the github link too:

[smikitky]

On mobile, the header is getting pretty busy. What do you think about moving it to the bottom of the menu on mobile? Ideally we would also move the github link too

While I can add an icon to an existing header, adding a new area at the bottom of the screen seems difficult to me (I have never used Tailwind). Also, people usually expect to see a language icon somewhere at the top of the page. But maybe we can just reduce the gap between the icons on mobile?

[rickhanlonii]

OK no worries, I can fix forward. Maybe we move the github link or something instead

[smikitky]

Thank you, then I will leave the rest to you!

[Huxpro]

Yayyyy I'm so glad to see this merged

[smikitky]

@rickhanlonii Thank you!

And...could you please take a look at this too? It's preventing us from working on the new blog posts: https://github.com/reactjs/translations.react.dev/issues/315

Making a dummy commit may solve this problem.

[rickhanlonii]

@Huxpro same!

@smikitky commented on the issue!