fix: fix translation of footer section #3793
Conversation
Related to #3716 Fixes #3720 Add language support to the footer section to address the issue of the footer text not changing when the language is switched. * **Footer Component (`components/footer/Footer.tsx`)** - Import `useTranslation` hook from `next-i18next`. - Use `useTranslation` hook to get the `t` function. - Replace hardcoded text with `t` function calls for translation. - Add `currentLanguage` prop to the `Footer` component. - Use `currentLanguage` prop to determine the language for translations. * **Next-i18next Configuration (`next-i18next.config.js`)** - Add `footer` to the `namespaces` array. * **App Component (`pages/_app.tsx`)** - Pass the current language as a prop to the `Footer` component. * **Translation Files** - Add English translations for the footer section in `public/locales/en/footer.json`. - Add German translations for the footer section in `public/locales/de/footer.json`.
Recxsmacx
requested review from
Mayaleeeee,
akshatnema,
anshgoyalevil,
asyncapi-bot-eve and
derberg
as code owners
|
Warning Rate limit exceeded@Recxsmacx has exceeded the limit for the number of commits or files that can be reviewed per hour. Please wait 1 minutes and 1 seconds before requesting another review. ⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. 📒 Files selected for processing (2)
WalkthroughThe pull request updates the footer components and i18n configuration to enhance internationalization. The Footer component now accepts a Changes
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
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 failed.Built without sensitive environment variables
|
Recxsmacx
changed the title
![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 (5)
components/footer/FooterList.ts (1)
9-9: Adjust import order according to the project's guidelines.The
useTranslationimport should appear before the component imports according to the linting rules.-import IconGithub from '../icons/Github'; -import IconLinkedIn from '../icons/LinkedIn'; -import IconSlack from '../icons/Slack'; -import IconTwitch from '../icons/Twitch'; -import IconTwitter from '../icons/Twitter'; -import IconYoutubeGray from '../icons/YouTubeGray'; -import { useTranslation } from 'next-i18next'; +import { useTranslation } from 'next-i18next'; + +import IconGithub from '../icons/Github'; +import IconLinkedIn from '../icons/LinkedIn'; +import IconSlack from '../icons/Slack'; +import IconTwitch from '../icons/Twitch'; +import IconTwitter from '../icons/Twitter'; +import IconYoutubeGray from '../icons/YouTubeGray';🧰 Tools
🪛 ESLint
[error] 1-9: Run autofix to sort these imports!
(simple-import-sort/imports)
[error] 9-9:
next-i18nextimport should occur before import of../icons/Github(import/order)
next-i18next.config.cjs (1)
7-7: Fix trailing comma formatting.The linter is flagging formatting inconsistencies with trailing commas. This should be standardized according to project formatting rules.
- react: { useSuspense: false },// this line + react: { useSuspense: false } // this line- de: 'Deutsch', - }, + de: 'Deutsch' + }Also applies to: 11-12
🧰 Tools
🪛 ESLint
[error] 7-7: Replace
,with·(prettier/prettier)
components/footer/Footer.tsx (3)
3-3: Remove unused import.The
useRouterimport is declared but never used in this component.-import { useRouter } from 'next/router';🧰 Tools
🪛 ESLint
[error] 3-3: 'useRouter' is defined but never used.
(unused-imports/no-unused-imports)
[error] 3-3: 'useRouter' is defined but never used.
(no-unused-vars)
9-13: Fix import ordering and structure.The component interface and imports should follow a consistent order. All imports should be at the top of the file, followed by interface definitions.
import type { InitiativeLink, SocialMediaLink } from './FooterList'; +import { initiativeLinks, socialMediaLinks } from './FooterList'; interface FooterProps { currentLanguage: string; } -import { initiativeLinks, socialMediaLinks } from './FooterList';🧰 Tools
🪛 ESLint
[error] 9-9: Expected 1 empty line after import statement not followed by another import.
(import/newline-after-import)
[error] 13-13: Import in body of module; reorder to top.
(import/first)
94-103: Fix formatting issues in the Netlify deployment section.There are multiple formatting issues in the Netlify deployment section including trailing spaces and inconsistent indentation that should be addressed.
- <a - href='https://netlify.com' - target='_blank' - rel='noopener noreferrer'> - <img - src='https://www.netlify.com/img/global/badges/netlify-color-bg.svg' - className='h-6' - alt='Deploys by Netlify' - /> - </a> + <a + href='https://netlify.com' + target='_blank' + rel='noopener noreferrer' + > + <img + src='https://www.netlify.com/img/global/badges/netlify-color-bg.svg' + className='h-6' + alt='Deploys by Netlify' + /> + </a>🧰 Tools
🪛 ESLint
[error] 94-94: Trailing spaces not allowed.
(no-trailing-spaces)
[error] 94-97: Replace
⏎············href='https://netlify.com'·⏎············target='_blank'⏎············withhref='https://netlify.com'·target='_blank'(prettier/prettier)
[error] 95-95: Trailing spaces not allowed.
(no-trailing-spaces)
[error] 98-98: Insert
··(prettier/prettier)
[error] 99-99: Insert
···(prettier/prettier)
[error] 100-100: Insert
··(prettier/prettier)
[error] 101-101: Insert
·(prettier/prettier)
[error] 102-102: Replace
················/>··········with··············/>(prettier/prettier)
[error] 102-102: Trailing spaces not allowed.
(no-trailing-spaces)
[error] 103-103: Delete
······(prettier/prettier)
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (5)
components/footer/Footer.tsx(2 hunks)components/footer/FooterList.ts(2 hunks)next-i18next.config.cjs(1 hunks)public/locales/de/footer.json(1 hunks)public/locales/en/footer.json(1 hunks)
✅ Files skipped from review due to trivial changes (2)
- public/locales/de/footer.json
- public/locales/en/footer.json
🧰 Additional context used
🪛 ESLint
components/footer/FooterList.ts
[error] 1-9: Run autofix to sort these imports!
(simple-import-sort/imports)
[error] 9-9: next-i18next import should occur before import of ../icons/Github
(import/order)
components/footer/Footer.tsx
[error] 3-3: 'useRouter' is defined but never used.
(unused-imports/no-unused-imports)
[error] 3-3: 'useRouter' is defined but never used.
(no-unused-vars)
[error] 9-9: Expected 1 empty line after import statement not followed by another import.
(import/newline-after-import)
[error] 13-13: Import in body of module; reorder to top.
(import/first)
[error] 15-15: 'currentLanguage' is defined but never used. Allowed unused args must match /^_/u.
(unused-imports/no-unused-vars)
[error] 15-15: 'currentLanguage' is defined but never used.
(no-unused-vars)
[error] 76-76: Replace ·href={link.url}·target='_blank'·rel='noopener·noreferrer'·className='flex·items-center·gap-2·text-cool-gray·transition·hover:text-white' with ⏎······················href={link.url}⏎······················target='_blank'⏎······················rel='noopener·noreferrer'⏎······················className='flex·items-center·gap-2·text-cool-gray·transition·hover:text-white'⏎····················
(prettier/prettier)
[error] 94-94: Trailing spaces not allowed.
(no-trailing-spaces)
[error] 94-97: Replace ⏎············href='https://netlify.com'·⏎············target='_blank'⏎············ with href='https://netlify.com'·target='_blank'
(prettier/prettier)
[error] 95-95: Trailing spaces not allowed.
(no-trailing-spaces)
[error] 98-98: Insert ··
(prettier/prettier)
[error] 99-99: Insert ···
(prettier/prettier)
[error] 100-100: Insert ··
(prettier/prettier)
[error] 101-101: Insert ·
(prettier/prettier)
[error] 102-102: Replace ················/>·········· with ··············/>
(prettier/prettier)
[error] 102-102: Trailing spaces not allowed.
(no-trailing-spaces)
[error] 103-103: Delete ······
(prettier/prettier)
next-i18next.config.cjs
[error] 7-7: Replace , with ·
(prettier/prettier)
[error] 11-11: Delete ,
(prettier/prettier)
[error] 12-12: Delete ,
(prettier/prettier)
⏰ Context from checks skipped due to timeout of 180000ms (1)
- GitHub Check: Lighthouse CI
🔇 Additional comments (4)
components/footer/FooterList.ts (1)
78-85: Well-implemented translation function.The
TranslatedInitiativeLinksfunction elegantly handles translations while preserving the original structure of the links objects. This is a clean approach to internationalizing the navigation items.next-i18next.config.cjs (1)
5-5: Successfully added footer namespace to i18n configuration.Adding the 'footer' namespace to the configuration is the correct approach for enabling translations in the footer component.
components/footer/Footer.tsx (2)
10-12: Verify usage of the currentLanguage prop.The
currentLanguageprop is defined and passed to the Footer component but isn't actually used within the component. Consider removing it if not needed, or document its purpose if it's intended for future use.Also applies to: 15-15
16-16: Excellent implementation of internationalization.The translation functionality has been properly implemented throughout the footer component using the
tfunction. All static text can now be properly translated based on the selected language, which greatly enhances the user experience for non-English speakers.Also applies to: 30-30, 39-40, 46-47, 57-58, 62-63, 71-72, 90-91
1 participant
Related to #3716
Fixes #3720
Add language support to the footer section to address the issue of the footer text not changing when the language is switched.
Footer Component (
components/footer/Footer.tsx)useTranslationhook fromnext-i18next.useTranslationhook to get thetfunction.tfunction calls for translation.currentLanguageprop to theFootercomponent.currentLanguageprop to determine the language for translations.Next-i18next Configuration (
next-i18next.config.js)footerto thenamespacesarray.App Component (
pages/_app.tsx)Footercomponent.Translation Files
public/locales/en/footer.json.public/locales/de/footer.json.Summary by CodeRabbit