fix: Translation of the page is not working as expected. #3847
Conversation
HeheAnanya
requested review from
Mayaleeeee,
akshatnema,
anshgoyalevil,
asyncapi-bot-eve and
derberg
as code owners
WalkthroughThis pull request introduces internationalization support and static property generation improvements. The Footer, NavBar, and NavItem components now use a unified translation utility instead of hardcoded strings. Additionally, several pages across the site have been updated to include or modify a static generation function (getStaticProps) using a centralized makeStaticProps utility, with the translation keys expanded to include a new "component" key. New locale JSON files have also been added for both English and German. Changes
Sequence Diagram(s)sequenceDiagram
participant C as Component
participant T as useTranslation Hook
participant I as i18n Utility
C->>T: Initialize translation
T->>I: Request translation keys
I-->>T: Return localized strings
T-->>C: Provide translations for rendering
sequenceDiagram
participant U as User Request
participant P as Page Component
participant G as getStaticProps
participant M as makeStaticProps Utility
U->>P: Request page load
P->>G: Invoke getStaticProps (with keys array)
G->>M: Call makeStaticProps([...])
M-->>G: Return static props data
G-->>P: Provide props for page rendering
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
✨ Finishing Touches
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
Documentation and Community
|
✅ Deploy Preview for asyncapi-website ready!Built without sensitive environment variables
To edit notification comments on pull requests, go to your Netlify site configuration. |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
public/locales/de/component.json (1)
1-39: Good addition of German translations for components.The file provides comprehensive translations for navbar and footer elements, directly addressing the translation issues mentioned in the PR objectives.
A few suggestions for improving the translations:
- Line 10: "Um" seems too short for "About", consider using "Über uns"
- Line 17: "Schicken Sie uns eine E-Mail" is correct but "Kontaktieren Sie uns" might be more common
- Line 27: The emoji in the love expression will render correctly, good job keeping this consistent with other locales
pages/community/ambassadors/index.tsx (1)
156-163: Consider translating social media link texts.These social media link texts ("Twitter ↗", "Github ↗", "Linkedin ↗") are currently hardcoded and won't be translated automatically.
- Twitter ↗ + {t('social.twitter')} ↗Similarly for Github and Linkedin links. This would require adding the appropriate translation hook:
+import { useTranslation } from '@/utils/i18n'; export default function Index() { + const { t } = useTranslation(); const image = '/img/social/community-ambassadors.webp';
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (21)
components/footer/Footer.tsx(3 hunks)components/navigation/NavBar.tsx(1 hunks)components/navigation/NavItem.tsx(4 hunks)next-i18next.config.cjs(1 hunks)pages/[lang]/index.tsx(2 hunks)pages/blog/index.tsx(1 hunks)pages/casestudies/index.tsx(2 hunks)pages/community/ambassadors/index.tsx(2 hunks)pages/community/dashboard.tsx(1 hunks)pages/community/events/index.tsx(1 hunks)pages/community/index.tsx(2 hunks)pages/community/newsroom.tsx(1 hunks)pages/community/tsc.tsx(2 hunks)pages/roadmap.tsx(2 hunks)pages/tools/generator.tsx(2 hunks)pages/tools/github-actions.tsx(1 hunks)pages/tools/index.tsx(1 hunks)pages/tools/modelina.tsx(2 hunks)pages/tools/parsers.tsx(1 hunks)public/locales/de/component.json(1 hunks)public/locales/en/component.json(1 hunks)
🔇 Additional comments (35)
next-i18next.config.cjs (1)
11-11: LGTM - Removed unnecessary comment.The removal of the comment doesn't affect functionality while making the code cleaner.
pages/tools/parsers.tsx (1)
4-4: Good addition of internationalization support.Adding
getStaticPropswith the appropriate namespaces will enable proper translation of this page, aligning with the PR objective of fixing translation issues.Note that you're now correctly including the 'component' namespace which contains the navbar and footer translations.
Also applies to: 12-14
pages/community/ambassadors/index.tsx (1)
7-7: Good addition of internationalization support.Adding
getStaticPropswith the appropriate namespaces enables proper translation of the ambassadors page, consistent with the changes made to other pages.The inclusion of the 'component' namespace ensures that navbar and footer elements will be properly translated on this page as well.
Also applies to: 16-18
pages/community/index.tsx (2)
6-6: Import added for internationalization support.This import of
makeStaticPropsis correctly added to enable translation support for this page.
24-26: Internationalization setup added for the Community page.The
getStaticPropsfunction is correctly implemented usingmakeStaticPropswith the appropriate translation namespaces. This enables proper translation of the page content, including the newly added component namespace.pages/community/newsroom.tsx (2)
3-4: Import added for internationalization support.This import of
makeStaticPropsis correctly added to enable translation support for the Newsroom page.
9-12: Internationalization setup added for the Newsroom page.The
getStaticPropsfunction is properly implemented and exported, following the same pattern used throughout the application. This ensures consistent internationalization across all pages.pages/casestudies/index.tsx (2)
6-6: Import added for internationalization support.This import of
makeStaticPropsis correctly added to enable translation support for the Case Studies page.
27-30: Internationalization setup added for the Case Studies page.The
getStaticPropsfunction is properly implemented and exported, with the correct namespaces required for translation, including the new 'component' namespace.public/locales/en/component.json (1)
1-40: New translation file added for component-specific strings.This translation file contains well-structured keys for footer and navbar elements, enabling proper internationalization of these components. The organization is clean, with logical grouping of related UI elements.
The footer section contains all necessary elements including taglines, section labels, and social media links. The navbar section includes all main navigation items. This structure will allow for easy translation to other languages.
pages/tools/github-actions.tsx (2)
4-4: Good addition of the i18n utility import.The addition of
makeStaticPropsimport from '@/utils/getStatic' enables internationalization support for this page.
12-14: Well implemented static props for internationalization.The implementation of
getStaticPropsusingmakeStaticPropswith translation namespaces ('landing-page', 'footer', 'common', 'component') ensures that the page will properly support translations, which aligns with the PR's goal of fixing translation issues.pages/roadmap.tsx (2)
7-7: Good addition of the i18n utility import.The addition of
makeStaticPropsimport from '@/utils/getStatic' enables internationalization support for this page.
17-19: Well implemented static props for internationalization.The implementation of
getStaticPropsusingmakeStaticPropswith translation namespaces ('landing-page', 'footer', 'common', 'component') ensures that the page will properly support translations, which aligns with the PR's goal of fixing translation issues.components/navigation/NavBar.tsx (1)
6-6: Good centralization of i18n utilities.Replacing the direct import from 'next-i18next' with a centralized import from '@/utils/i18n' is a good practice for maintaining consistent internationalization across the application. This change is crucial for fixing the navbar translation issues mentioned in the PR objectives.
pages/tools/index.tsx (2)
5-5: Good addition of the i18n utility import.The addition of
makeStaticPropsimport from '@/utils/getStatic' enables internationalization support for this page.
13-15: Well implemented static props for internationalization.The implementation of
getStaticPropsusingmakeStaticPropswith translation namespaces ('landing-page', 'footer', 'common', 'component') ensures that the page will properly support translations, which aligns with the PR's goal of fixing translation issues.pages/community/dashboard.tsx (2)
3-3: Properly adds internationalization supportThe import of makeStaticProps is appropriate for enabling translations on this page.
11-13: Correctly configures static properties for i18nThe implementation correctly adds the necessary translation namespaces (
landing-page,footer,common, andcomponent) that will enable proper translation of the page components as mentioned in the PR objectives.pages/tools/modelina.tsx (2)
4-4: Good addition of i18n supportThe import of makeStaticProps is consistent with the internationalization approach used throughout the project.
14-16: Correctly implements translation configurationThe implementation follows the project's pattern for enabling translations, using consistent namespaces across pages.
pages/community/tsc.tsx (2)
4-4: Appropriately adds i18n supportThe import statement is correctly added to support translations for this page.
14-16: Consistent translation namespace implementationThe static props configuration uses the same namespaces as other pages, ensuring consistent translation behavior across the site, which aligns with the PR objectives to fix translation issues.
pages/tools/generator.tsx (2)
5-5: Properly integrates i18n supportThe import statement correctly adds makeStaticProps to enable translation capabilities.
17-19: Implements translation support correctlyThe export of getStaticProps with the consistent set of namespaces will enable proper translation of the page elements, addressing the translation issues mentioned in the PR objectives.
components/navigation/NavItem.tsx (3)
5-5: Good addition of internationalization support.Adding the useTranslation hook is the first step to implement i18n for the navigation items.
38-38: Correct implementation of the translation hook.The translation hook is properly initialized with the 'component' namespace which will be used for all navigation-related translations.
50-50: Consistent implementation of translations for all text instances.You've consistently replaced all hardcoded text instances with translation functions using the same pattern
t('navbar.${text}'). This ensures that all navigation items can be properly translated.Also applies to: 72-72, 80-80
pages/blog/index.tsx (1)
16-20: Good addition of internationalization support for static props.Adding 'component' to the static props namespaces ensures that navbar and footer translations will be available on this page.
pages/community/events/index.tsx (1)
18-18: Consistent update to include component namespace.This change ensures that the events page will have access to the component translations, matching the pattern used in other pages.
components/footer/Footer.tsx (3)
6-6: Good implementation of internationalization for the footer.Adding the useTranslation hook from i18n utils and initializing it with the 'component' namespace is consistent with the approach used in the NavItem component.
Also applies to: 16-16
32-32: Comprehensive implementation of translations for all text elements.All static text elements in the footer have been properly replaced with translation function calls, using a consistent naming pattern that follows good i18n practices. This includes section headings and the tagline.
Also applies to: 42-42, 50-50, 61-61, 67-67, 77-77
31-31: Layout adjustments for internationalization.The CSS adjustments (width, padding, margin) are appropriate to accommodate text of different lengths in various languages. This is good practice when implementing internationalization.
Also applies to: 39-39, 58-58, 74-74
pages/[lang]/index.tsx (2)
5-5: Good centralization of translation utilities!Moving from
next-i18nextto a custom utility at@/utils/i18nhelps maintain consistent translation handling across components. This change aligns with fixing the translation issues mentioned in the PR.
32-32: Translation namespace expansion is perfect for fixing component translationsAdding 'component' to the makeStaticProps function arguments ensures that component-specific translations (like those for navbar and footer) are properly loaded during static generation. This directly addresses the translation issues in the navbar and footer mentioned in the PR objectives.
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
There was a problem hiding this comment.
Welcome to AsyncAPI. Thanks a lot for creating your first pull request. Please check out our contributors guide useful for opening a pull request.
Keep in mind there are also other channels you can use to interact with AsyncAPI community. For more details check out this issue.
|
We require all PRs to follow Conventional Commits specification. |
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## master #3847 +/- ##
=========================================
Coverage 100.00% 100.00%
=========================================
Files 21 21
Lines 667 667
Branches 113 113
=========================================
Hits 667 667 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
|
@HeheAnanya There's a lint error—lowercase the title to fix it. I also noticed some design issues, such as the spacing between the AsyncAPI logo and the dropdown next to it. Additionally, 'Blog' and 'Roadmap' are not translated. The 'Star on GitHub' it looks weird in the translated version—can you fix these minor design issues as well? |
|
closing |
4 participants
Before:
After:
Description
Related issue(s)
Fixes #3716
Summary by CodeRabbit