Add "Languages" navigation and article #6382
Conversation
| }; | ||
| export type Languages = Array<LanguageItem>; | ||
|
|
||
| export const LanguagesContext = createContext<Languages | null>(null); |
There was a problem hiding this comment.
This follows the same pattern as TocContext.ts.
src/components/Seo.tsx
Outdated
| // If you are a maintainer of a language fork, | ||
| // deployedTranslations has been moved to src/utils/deployedTranslations.ts. |
There was a problem hiding this comment.
This had to be extracted to a new module because it is now used by other components as well as cache key calculation.
Size changes📦 Next.js Bundle Analysis for react-devThis analysis was generated by the Next.js Bundle Analysis action. 🤖 Five Pages Changed SizeThe following pages changed size from the code in this PR compared to its base branch:
DetailsOnly 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 Any third party scripts you have added directly to your app using the 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
changed the title
|
@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... |
|
would be better if someone from team merges the PR. Possible that people are on holidays. cc: @mattcarrollcode |
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
@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. |
|
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: 
|
- deployedTranslations => finishedTranslations - showTranslated => progress - English fixes
Co-authored-by: Ricky <[email protected]>
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? |
|
OK no worries, I can fix forward. Maybe we move the github link or something instead |
|
Thank you, then I will leave the rest to you! |
|
Yayyyy I'm so glad to see this merged |
|
@rickhanlonii Thank you! And...could you please take a look at this too? It's preventing us from working on the new blog posts: reactjs/translations.react.dev#315 Making a dummy commit may solve this problem. |
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. ThedeployedLanguagesvariable, now extracted to a separate module (src/utils/deployedLanguages.ts), determines whether the translation has been completed for each language.getStaticPropsto conditionally fetchlangs.jsonwhen 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.deployedLanguagesto the cache key calculation.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