feat: enable i18n support for AsyncAPI website #2184
Conversation
Signed-off-by: Ansh Goyal <[email protected]>
Signed-off-by: Ansh Goyal <[email protected]>
Signed-off-by: Ansh Goyal <[email protected]>
anshgoyalevil
requested review from
derberg,
akshatnema,
magicmatatjahu,
Mayaleeeee and
asyncapi-bot-eve
as code owners
✅ Deploy Preview for asyncapi-website ready!Built without sensitive environment variables
To edit notification comments on pull requests, go to your Netlify site configuration. |
anshgoyalevil
changed the title
|
// @magicmatatjahu 🚀 |
anshgoyalevil
changed the title
anshgoyalevil
changed the title
|
⚡️ Lighthouse report for the changes in this PR:
Lighthouse ran on https://deploy-preview-2184--asyncapi-website.netlify.app/ |
Signed-off-by: Ansh Goyal <[email protected]>
There was a problem hiding this comment.
Hmm, I tested that in preview and if I change the default one to the de I see the new content but selector isn't changed and also I cannot change back to the en. Also browser is freezed, probably by some long time operation - probably we have in code the infinite recursion (saving to localstorage?). Could you check that?
Signed-off-by: Ansh Goyal <[email protected]>
|
I just checked the code. The About that freeze thing, It is due to the static site rendering. It won't happen when deployed on Netlify, or when viewing the website from the build folder rather than the development preview. Actually, what happens is:
In production built, all pages in all locales are pre-built, so this won't happen |
|
This is recommended to be merged after: #2131 |
Signed-off-by: Ansh Goyal <[email protected]>
Signed-off-by: Ansh Goyal <[email protected]>
|
@akshatnema I have fixed that infinite loop issue, and have added the comments to other functions as well 🚀 |
components/navigation/NavBar.js
Outdated
| // First param: Passes the language based on the browser's defalt language | ||
| // Second param: Prevents the language change from being saved in the local storage |
There was a problem hiding this comment.
Don't add the function description here. Instead specify, what is the main functionality done by useEffect at initial render.
| // If no unique languages are found, default to ["EN"] | ||
| return uniqueLangs.length === 0 ? ["EN"] : uniqueLangs; | ||
| } | ||
| const uniqueLangs = getUniqueLangs().map((lang) => ({ |
There was a problem hiding this comment.
| const uniqueLangs = getUniqueLangs().map((lang) => ({ | |
| const uniqueLangs = getUniqueLangs().map((lang) => ({ |
| text: lang, | ||
| value: lang | ||
| })); | ||
|
|
||
| const changeLanguage = async (locale, langPicker) => { |
There was a problem hiding this comment.
Add jsdocs to specify the functionality and params of this function.
Signed-off-by: Ansh Goyal <[email protected]>
…into enable-i18n
|
@anshgoyalevil have you covered the changes of #2181 ? |
pages/index.js
Outdated
| <Head /> | ||
| <StickyNavbar> | ||
| <NavBar className="max-w-screen-xl block px-4 sm:px-6 lg:px-8 mx-auto" /> | ||
| </StickyNavbar> |
There was a problem hiding this comment.
Don't remove Head and Navbar on initial render. They should be shown on when user first visits on the website. The preloader should be part of main section of the website and also it should be centrally placed over the screen.
components/navigation/NavBar.js
Outdated
| /* | ||
| useEffect to set the initial language on component mount | ||
| Detects the user's preferred language using browserLanguageDetector | ||
| and updates the language without affecting the localStorage. | ||
| This ensures the components renders with the correct initial language. | ||
| */ |
There was a problem hiding this comment.
| /* | |
| useEffect to set the initial language on component mount | |
| Detects the user's preferred language using browserLanguageDetector | |
| and updates the language without affecting the localStorage. | |
| This ensures the components renders with the correct initial language. | |
| */ | |
| /** | |
| * useEffect to set the initial language on component mount | |
| * Detects the user's preferred language using browserLanguageDetector | |
| * and updates the language without affecting the localStorage. | |
| * This ensures the components renders with the correct initial language. | |
| */ |
No, I think we should keep the separation of concerns. |
Signed-off-by: Ansh Goyal <[email protected]>
Sorry, I'm talking about #2131 . I see similar changes in both of them. |
Oh yes that one. Yes, all changes are synced with this PR. The infinite loop issue again occurred. I don't know why that happens when we have elements like NavBar on the |
Do let me know once it's fixed. |
Signed-off-by: Ansh Goyal <[email protected]>
|
@akshatnema I have fixed that. Please check :) |
|
@akshatnema Should we merge this in? 🚀 |
Description
This PR aims to finally enable the i18n for all users.
How to test?
Use the language picker at the top right corner to play with
ENandDElanguages.Related issue(s)