feat: add translation hooks and packages #1980

anshgoyalevil · 2023-07-22T10:32:19Z

Description

This PR adds the translation hooks and packages for configuring the i18n on the AsyncAPI website.
As per conversation with the mentor, the website would initially support i18n for German Language, and would gradually support more languages as the community contributes.
The fallback language is en
I have added the initial translation for the heroHeading on Landing Page to test the package. Would be adding more translations in the subsequent PRs.

Related issue(s)

fixes #1978

…ebsite into add-translations

netlify · 2023-07-22T10:32:25Z

✅ Deploy Preview for asyncapi-website ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	`27dccdf`
🔍 Latest deploy log	https://app.netlify.com/sites/asyncapi-website/deploys/64ca01b65f269e0008dd6c6f
😎 Deploy Preview	https://deploy-preview-1980--asyncapi-website.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

github-actions · 2023-07-22T10:35:07Z

⚡️ Lighthouse report for the changes in this PR:

Category	Score
🔴 Performance	27
🟢 Accessibility	98
🟢 Best practices	100
🟢 SEO	100
🔴 PWA	30

Lighthouse ran on https://deploy-preview-1980--asyncapi-website.netlify.app/

derberg · 2023-07-25T09:47:01Z

German 👀
Is there already someone volunteering to provide translation for German? Cause if it is Polish, we at least have people that could try to provide some simple translations, same for Spanish I guess

anshgoyalevil · 2023-07-25T09:58:09Z

@derberg I was testing the translation thing, and sticked to the German Language.
Though I used Google Translator for that.

Would add Spanish Language (or maybe Polish) in the upcoming PRs.

magicmatatjahu · 2023-07-26T06:59:03Z

@anshgoyalevil @derberg Yeah, it was my fault. I suggested German only for testing (we don't need the proper translation tbh, we can even use lorem ipsum on German texts). However if we wanna go with "production" translations we can go with Spanish or Polish from beginning. Sorry for that misunderstood!

magicmatatjahu

Awesome! 🚀 I see some "problems" but overall it's great start. We need to remember (before merge) to disable the language switcher and also add the proper blockers in the crawler bots config to disable crawling (now) the translations. We will enable that in last PR :)

components/Hero.js

next.config.js

next-i18next-static-site-config.js

locales/en/common.json

pages/[lang]/index.js

components/navigation/NavBar.js

anshgoyalevil · 2023-07-27T16:36:37Z

@magicmatatjahu Done with the changes. Thanks for the inputs 😄

components/navigation/NavBar.js

pages/[lang]/index.js

akshatnema · 2023-08-01T17:19:25Z

pages/[lang]/index.js

If you are migrating the file, can you please do the refactoring of this codebase in terms of formatting and spacing?

akshatnema · 2023-08-01T17:21:00Z

lib/locales.js

+const locales = {};
+languages.map((language) => {
+  locales[language] = {};
+
+  namespaces.map((namespace) => {
+    locales[language][namespace] = require("./../locales/" +
+      language +
+      "/" +
+      namespace +
+      ".json");
+  });
+});


Kindly wrap this in a function and then return the required response from the function.

Actually, this is not my implementation. It is suggested by the plugin author since were in need to use the static site built due to Netlify restrictions.

Can you please share the source you are following to create this file?

IMHO, even if we have to implement such logic, I don't think it will make any difference while implementing it inside functions. Reason why I'm asking for making it as a function is that we should work on code quality as well, instead of just writing it as plain implementation of js. Also, it will be easier to add unit tests (later on) for this file.

Done! I totally agree with your points.

I am following this package. Their one of the examples is what I tried imitating in our project.

The reason to use this package is that previously I was using the next-i18next package to handle the translation-related logic, and everything was going smoothly inside the local dev. environment.
As I pushed that code, it became useless because Netlify cannot process translations on the server, and need pre-generated translations.
Another option was to use a Node.JS environment to host the website, but that doesn't seem viable.

Co-authored-by: Akshat Nema <[email protected]>

anshgoyalevil · 2023-08-01T18:10:16Z

Thanks for the inputs @akshatnema 🚀
I will be making the changes like refactoring in subsequent PRs.
The purpose of this PR is to create a base over the other pages of the project, as you might have seen that currently, only the homepage is moved under [lang] directory, and that is because, as we would move towards translating other pages, they would also be moved under the [lang] folder.

This PR is ready to be merged. The scope of this PR is limited to:

Initialising translation hooks and packages
Creating a base structure for other pages of the project.
Creating the Language Selected in Navbar, which would be un-commented in the last PR, as per @magicmatatjahu

akshatnema · 2023-08-01T19:06:41Z

@anshgoyalevil Kindly resolve the comments only if either the discussion made using the comment satisfies the reviewer or you made changes requested by the reviewer.

magicmatatjahu

Ok for me :) Please only change the label for Github button and we can merge :)

components/buttons/GithubButton.js

Co-authored-by: Maciej Urbańczyk <[email protected]>

anshgoyalevil · 2023-08-02T07:03:59Z

Thanks @magicmatatjahu 😄. Changed the GitHub Button 🚀

magicmatatjahu · 2023-08-02T07:09:01Z

@anshgoyalevil It still has Gtihub text - probably you changed the text inside navbar (and override default text):

Please fix that :)

It has to be:

anshgoyalevil · 2023-08-02T07:12:27Z

@magicmatatjahu Sorry for that. Missed that. Fixed now

magicmatatjahu · 2023-08-02T07:25:28Z

@akshatnema Hi! Could you check PR?

magicmatatjahu · 2023-08-02T08:00:22Z

/rtm

anshgoyalevil added 4 commits July 13, 2023 21:32

Add initial translation hooks

c5f769e

Merge branch 'add-translations' of https://github.com/anshgoyalevil/w…

8e85551

…ebsite into add-translations

add initial configuration

e72be06

add initial hooks and language picker

ab1262c

anshgoyalevil requested review from derberg, akshatnema, magicmatatjahu, Mayaleeeee and asyncapi-bot-eve as code owners July 22, 2023 10:32

magicmatatjahu requested changes Jul 26, 2023

View reviewed changes

components/Hero.js Outdated Show resolved Hide resolved

next.config.js Show resolved Hide resolved

next-i18next-static-site-config.js Outdated Show resolved Hide resolved

locales/en/common.json Outdated Show resolved Hide resolved

pages/[lang]/index.js Outdated Show resolved Hide resolved

magicmatatjahu requested changes Jul 26, 2023

View reviewed changes

components/navigation/NavBar.js Outdated Show resolved Hide resolved

anshgoyalevil added 2 commits July 27, 2023 22:04

add nested keys and improvements

61c4e4b

Merge branch 'master' into ssg

5436b9b

rm extra locales folder

6b7c68c

akshatnema requested changes Aug 1, 2023

View reviewed changes

anshgoyalevil and others added 2 commits August 1, 2023 23:28

Update components/navigation/NavBar.js

0460db0

Co-authored-by: Akshat Nema <[email protected]>

Merge branch 'master' into ssg

4765486

anshgoyalevil added 3 commits August 2, 2023 07:35

wrap loadLocales into a function

2fe7a34

format pages/[lang]index.js

57aab78

Merge branch 'master' into ssg

1a7cd84

magicmatatjahu previously approved these changes Aug 2, 2023

View reviewed changes

components/buttons/GithubButton.js Outdated Show resolved Hide resolved

Update components/buttons/GithubButton.js

7778d3a

Co-authored-by: Maciej Urbańczyk <[email protected]>

anshgoyalevil dismissed magicmatatjahu’s stale review via 7778d3a August 2, 2023 07:02

Update NavBar.js

27dccdf

magicmatatjahu approved these changes Aug 2, 2023

View reviewed changes

magicmatatjahu requested a review from akshatnema August 2, 2023 07:17

akshatnema approved these changes Aug 2, 2023

View reviewed changes

asyncapi-bot added the ready-to-merge label Aug 2, 2023

asyncapi-bot merged commit 97f0446 into asyncapi:master Aug 2, 2023
11 checks passed

anshgoyalevil deleted the ssg branch September 8, 2023 16:18

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: add translation hooks and packages #1980

feat: add translation hooks and packages #1980

anshgoyalevil commented Jul 22, 2023

netlify bot commented Jul 22, 2023 •

edited

Loading

github-actions bot commented Jul 22, 2023 •

edited

Loading

derberg commented Jul 25, 2023

anshgoyalevil commented Jul 25, 2023

magicmatatjahu commented Jul 26, 2023

magicmatatjahu left a comment

anshgoyalevil commented Jul 27, 2023

akshatnema Aug 1, 2023

anshgoyalevil Aug 1, 2023

anshgoyalevil Aug 2, 2023

akshatnema Aug 1, 2023

anshgoyalevil Aug 1, 2023

akshatnema Aug 1, 2023

anshgoyalevil Aug 2, 2023

anshgoyalevil commented Aug 1, 2023

akshatnema commented Aug 1, 2023

magicmatatjahu left a comment

anshgoyalevil commented Aug 2, 2023

magicmatatjahu commented Aug 2, 2023 •

edited

Loading

anshgoyalevil commented Aug 2, 2023

magicmatatjahu commented Aug 2, 2023

magicmatatjahu commented Aug 2, 2023

feat: add translation hooks and packages #1980

feat: add translation hooks and packages #1980

Conversation

anshgoyalevil commented Jul 22, 2023

netlify bot commented Jul 22, 2023 • edited Loading

✅ Deploy Preview for asyncapi-website ready!

github-actions bot commented Jul 22, 2023 • edited Loading

derberg commented Jul 25, 2023

anshgoyalevil commented Jul 25, 2023

magicmatatjahu commented Jul 26, 2023

magicmatatjahu left a comment

Choose a reason for hiding this comment

anshgoyalevil commented Jul 27, 2023

akshatnema Aug 1, 2023

Choose a reason for hiding this comment

anshgoyalevil Aug 1, 2023

Choose a reason for hiding this comment

anshgoyalevil Aug 2, 2023

Choose a reason for hiding this comment

akshatnema Aug 1, 2023

Choose a reason for hiding this comment

anshgoyalevil Aug 1, 2023

Choose a reason for hiding this comment

akshatnema Aug 1, 2023

Choose a reason for hiding this comment

anshgoyalevil Aug 2, 2023

Choose a reason for hiding this comment

anshgoyalevil commented Aug 1, 2023

akshatnema commented Aug 1, 2023

magicmatatjahu left a comment

Choose a reason for hiding this comment

anshgoyalevil commented Aug 2, 2023

magicmatatjahu commented Aug 2, 2023 • edited Loading

anshgoyalevil commented Aug 2, 2023

magicmatatjahu commented Aug 2, 2023

magicmatatjahu commented Aug 2, 2023

netlify bot commented Jul 22, 2023 •

edited

Loading

github-actions bot commented Jul 22, 2023 •

edited

Loading

magicmatatjahu commented Aug 2, 2023 •

edited

Loading