feat: enabling i18n feature for smaller screens #3556
+128
−45
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -30,6 +30,7 @@ import IconGuide from './Guide'; | |
| import IconHome from './Home'; | ||
| import IconHub from './Hub'; | ||
| import InfoIcon from './InfoIcon'; | ||
| import IconLanguage from './Language'; | ||
| import IconLightBulb from './LightBulb'; | ||
| import IconLinkedIn from './LinkedIn'; | ||
| import IconLoupe from './Loupe'; | ||
|
|
@@ -236,6 +237,10 @@ These are the icons used in the AsyncAPI website. | |
| <InfoIcon /> | ||
| </IconItem> | ||
|
|
||
| <IconItem name="Language"> | ||
| <IconLanguage /> | ||
| </IconItem> | ||
|
|
||
| <IconItem name="Light Bulb"> | ||
| <IconLightBulb /> | ||
| </IconItem> | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,24 @@ | ||
| import React from 'react'; | ||
|
|
||
| /* eslint-disable max-len */ | ||
| /** | ||
| * @description Language Icon for language selector component | ||
| */ | ||
| export default function IconLanguage({ className = '' }) { | ||
| return ( | ||
| <svg | ||
| xmlns='http://www.w3.org/2000/svg' | ||
| fill='none' | ||
| viewBox='0 0 24 24' | ||
| strokeWidth={1.5} | ||
| stroke='currentColor' | ||
| className={`size-5 ${className}`} | ||
| > | ||
| <path | ||
| strokeLinecap='round' | ||
| strokeLinejoin='round' | ||
| d='m10.5 21 5.25-11.25L21 21m-9-3h7.5M3 5.621a48.474 48.474 0 0 1 6-.371m0 0c1.12 0 2.233.038 3.334.114M9 5.25V3m3.334 2.364C11.176 10.658 7.69 15.08 3 17.502m9.334-12.138c.896.061 1.785.147 2.666.257m-4.589 8.495a18.023 18.023 0 0 1-3.827-5.802' | ||
| /> | ||
| </svg> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change | ||||
|---|---|---|---|---|---|---|
|
|
@@ -2,6 +2,7 @@ import React from 'react'; | |||||
| import { twMerge } from 'tailwind-merge'; | ||||||
|
|
||||||
| import type { SelectProps } from '../form/Select'; | ||||||
| import IconLanguage from '../icons/Language'; | ||||||
|
|
||||||
| /** | ||||||
| * @description LanguageSelect component for selecting a language. | ||||||
|
|
@@ -10,21 +11,27 @@ import type { SelectProps } from '../form/Select'; | |||||
| * @param {Array} [props.options=[]] - An array of options for the select dropdown. | ||||||
| * @param {string} props.selected - The currently selected option value. | ||||||
| */ | ||||||
| export default function LanguageSelect({ className = '', onChange = () => { }, options = [], selected }: SelectProps) { | ||||||
|
There was a problem hiding this comment. Fix formatting issue. Remove the extra space after the opening curly brace to resolve the prettier error. -export default function LanguageSelect({ className = '', onChange = () => { }, options = [], selected }: SelectProps) {
+export default function LanguageSelect({ className = '', onChange = () => {}, options = [], selected }: SelectProps) {📝 Committable suggestion
Suggested change
🧰 Tools🪛 ESLint[error] 14-14: Delete (prettier/prettier) 🪛 GitHub Actions: PR testing - if Node project[error] 14-14: Delete whitespace (prettier/prettier) |
||||||
| return ( | ||||||
| <div className='relative inline-block'> | ||||||
| <div className='relative flex items-center gap-2'> | ||||||
| {/* Display Icon Next to the Select Box */} | ||||||
| <IconLanguage className='pointer-events-none absolute left-3 text-gray-600' /> | ||||||
| <select | ||||||
| data-testid='Select-form' | ||||||
| onChange={(ev) => onChange(ev.target.value)} | ||||||
| className={twMerge( | ||||||
| `form-select h-full px-10 pr-7 inline-flex justify-center rounded-md border border-gray-300 shadow-sm py-2 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:border-gray-500 focus:outline-none focus:ring-0 focus:ring-black ${className}` | ||||||
| )} | ||||||
| value={selected} | ||||||
| > | ||||||
| {options.map((option, index) => ( | ||||||
| <option key={index} value={option.value} data-testid='Option-form'> | ||||||
| {option.text} | ||||||
| </option> | ||||||
| ))} | ||||||
| </select> | ||||||
| </div> | ||||||
| </div> | ||||||
| ); | ||||||
| } | ||||||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change | ||||
|---|---|---|---|---|---|---|
|
|
@@ -2,6 +2,7 @@ import Link from 'next/link'; | |||||
| import React, { useState } from 'react'; | ||||||
|
|
||||||
| import { SearchButton } from '../AlgoliaSearch'; | ||||||
| import IconLanguage from '../icons/Language'; | ||||||
| import NavItemDropdown from '../icons/NavItemDropdown'; | ||||||
| import SearchIcon from '../icons/SearchIcon'; | ||||||
| import AsyncAPILogo from '../logos/AsyncAPILogo'; | ||||||
|
|
@@ -19,13 +20,21 @@ interface MenuItem { | |||||
|
|
||||||
| interface MobileNavMenuProps { | ||||||
| onClickClose?: () => void; | ||||||
| uniqueLangs: { key: string; text: string; value: string }[]; | ||||||
| currentLanguage: string; | ||||||
| changeLanguage: (locale: string, langPicker: boolean) => void; | ||||||
| } | ||||||
|
|
||||||
| /** | ||||||
| * @description MobileNavMenu component for displaying a responsive navigation menu on mobile devices. | ||||||
| * @param {MobileNavMenuProps} props - The props for the MobileNavMenu component. | ||||||
| */ | ||||||
| export default function MobileNavMenu({ | ||||||
| onClickClose = () => { }, | ||||||
|
There was a problem hiding this comment. Fix formatting issue. Remove the extra space after the opening curly brace to resolve the prettier error. - onClickClose = () => { },
+ onClickClose = () => {},📝 Committable suggestion
Suggested change
🧰 Tools🪛 ESLint[error] 33-33: Delete (prettier/prettier) 🪛 GitHub Actions: PR testing - if Node project[error] 33-33: Delete |
||||||
| uniqueLangs, | ||||||
| currentLanguage, | ||||||
| changeLanguage | ||||||
| }: MobileNavMenuProps) { | ||||||
| const [open, setOpen] = useState<string | null>(null); | ||||||
|
|
||||||
| /** | ||||||
|
|
@@ -104,7 +113,7 @@ export default function MobileNavMenu({ onClickClose = () => {} }: MobileNavMenu | |||||
| </h4> | ||||||
| {open === 'community' && <MenuBlocks items={communityItems} />} | ||||||
| </div> | ||||||
| <div className='space-y-2 px-5 pt-2' onClick={() => showMenu('others')} data-testid='MobileNav-others'> | ||||||
| <div className='grid gap-4'> | ||||||
| <div> | ||||||
| <h4 className='mb-4 flex justify-between font-medium text-gray-800'> | ||||||
|
|
@@ -127,6 +136,29 @@ export default function MobileNavMenu({ onClickClose = () => {} }: MobileNavMenu | |||||
| </div> | ||||||
| </div> | ||||||
| </div> | ||||||
| <div className='space-y-2 px-5 py-2' onClick={() => showMenu('language')}> | ||||||
| <div className='grid gap-4'> | ||||||
| <div> | ||||||
| <h4 className='mb-4 flex justify-between font-medium text-gray-800'> | ||||||
| <a className='flex cursor-pointer items-center gap-x-2'> | ||||||
| Language <IconLanguage /> | ||||||
| </a> | ||||||
| <NavItemDropdown /> | ||||||
| </h4> | ||||||
| {open === 'language' && | ||||||
| uniqueLangs.map((lang) => ( | ||||||
| <button | ||||||
| key={lang.key} | ||||||
| onClick={() => changeLanguage(lang.value.toLowerCase(), true)} | ||||||
| className={`mb-4 ml-2 block w-full rounded-lg py-1 text-start text-sm font-medium leading-6 text-gray-700 transition duration-150 ease-in-out hover:bg-gray-50 ${currentLanguage.toLowerCase() === lang.text.toLowerCase() ? 'text-secondary-500' : ''}`} | ||||||
| data-testid='MobileNav-language-item' | ||||||
| > | ||||||
| {lang.text} | ||||||
| </button> | ||||||
| ))} | ||||||
| </div> | ||||||
| </div> | ||||||
| </div> | ||||||
|
There was a problem hiding this comment. 🛠️ Refactor suggestion Improve accessibility of the language selection menu. The current implementation has two potential accessibility issues:
Consider this improvement: - <div className='space-y-2 px-5 py-2' onClick={() => showMenu('language')}>
+ <div className='space-y-2 px-5 py-2'>
+ <button
+ onClick={() => showMenu('language')}
+ aria-expanded={open === 'language'}
+ aria-controls="language-menu"
+ className="w-full text-left"
+ >
<div className='grid gap-4'>
<div>
<h4 className='mb-4 flex justify-between font-medium text-gray-800'>
<a className='flex cursor-pointer items-center gap-x-2'>
Language <IconLanguage />
</a>
<NavItemDropdown />
</h4>
- {open === 'language' &&
+ <div
+ id="language-menu"
+ role="menu"
+ className={open === 'language' ? 'block' : 'hidden'}
+ >
uniqueLangs.map((lang) => (
<button
key={lang.key}
onClick={() => changeLanguage(lang.value.toLowerCase(), true)}
+ role="menuitem"
className={`mb-4 ml-2 block w-full rounded-lg py-1 text-start text-sm font-medium leading-6 text-gray-700 transition duration-150 ease-in-out hover:bg-gray-50 ${
currentLanguage.toLowerCase() === lang.text.toLowerCase() ? 'text-secondary-500' : ''
}`}
data-testid='MobileNav-language-item'
>
{lang.text}
</button>
- ))}
+ )}
+ </div>
</div>
</div>
+ </button>
</div>
|
||||||
| </div> | ||||||
| </div> | ||||||
| </div> | ||||||
|
|
||||||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change | ||||
|---|---|---|---|---|---|---|
|
|
@@ -43,7 +43,7 @@ export default function NavBar({ className = '', hideLogo = false }: NavBarProps | |||||
| /** | ||||||
| * Retrieves unique language options based on the current path and i18nPaths configuration. | ||||||
| * | ||||||
| * @returns {string[]} - An array of unique language options with first letter in uppercase. | ||||||
|
There was a problem hiding this comment. Fix inconsistent documentation. The JSDoc comment states that the function returns "language options with first letter in uppercase", but the implementation returns lowercase language codes (e.g., 'en'). Update the documentation to match the actual implementation. - * @returns {string[]} - An array of unique language options with first letter in uppercase.
+ * @returns {string[]} - An array of unique language options in lowercase.📝 Committable suggestion
Suggested change
|
||||||
| */ | ||||||
| const getUniqueLangs = (): string[] => { | ||||||
| let pathnameWithoutLocale = pathname; | ||||||
|
|
@@ -147,7 +147,7 @@ export default function NavBar({ className = '', hideLogo = false }: NavBarProps | |||||
|
|
||||||
| return ( | ||||||
| <div className={`bg-white ${className} z-50`}> | ||||||
| <div className='flex w-full items-center justify-between py-6 lg:justify-start lg:space-x-2'> | ||||||
| {!hideLogo && ( | ||||||
| <div className='lg:w-auto lg:flex-1'> | ||||||
| <div className='flex'> | ||||||
|
|
@@ -178,7 +178,7 @@ export default function NavBar({ className = '', hideLogo = false }: NavBarProps | |||||
| </div> | ||||||
|
|
||||||
| <nav | ||||||
| className='hidden w-full space-x-4 lg:flex lg:items-center lg:justify-end xl:space-x-8' | ||||||
| data-testid='Navbar-main' | ||||||
| > | ||||||
| <div className='relative' onMouseLeave={() => showMenu(null)} ref={learningRef}> | ||||||
|
|
@@ -247,7 +247,14 @@ export default function NavBar({ className = '', hideLogo = false }: NavBarProps | |||||
| </div> | ||||||
|
|
||||||
| {/* Mobile menu, show/hide based on mobile menu state. */} | ||||||
| {mobileMenuOpen && ( | ||||||
| <MobileNavMenu | ||||||
| onClickClose={() => setMobileMenuOpen(false)} | ||||||
| uniqueLangs={uniqueLangs} | ||||||
| currentLanguage={i18n.language ? i18n.language.toUpperCase() : 'EN'} | ||||||
| changeLanguage={changeLanguage} | ||||||
| /> | ||||||
| )} | ||||||
| </div> | ||||||
| ); | ||||||
| } | ||||||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -6,5 +6,5 @@ module.exports = { | |
| defaultNamespace: 'landing-page', | ||
| react: { useSuspense: false },// this line | ||
| }, | ||
|
|
||
| }; | ||
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Please revert the changes related to
en->englishhere and in i18n config file since URLs should be having smaller prefixThere was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Okay I will do that!