fix: final home page changes #4485
Conversation
Signed-off-by: Shriya-Chauhan <[email protected]>
Shriya-Chauhan
requested review from
Mayaleeeee,
akshatnema,
anshgoyalevil,
asyncapi-bot-eve,
derberg and
sambhavgupta0705
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 project configuration. |
|
Important Review skippedAuto reviews are disabled on base/target branches other than the default branch. Please check the settings in the CodeRabbit UI or the You can disable this status message by setting the WalkthroughIntroduces the SneakPeek component with multi-tab showcase, refactors AnnouncementHero to use ConferenceBanner, adds dark mode styling to navigation components, enhances responsive layout behavior in DocsLayout, and updates localization strings for English and German landing pages. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 inconclusive)
✅ Passed checks (2 passed)
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. Comment |
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## website-ui #4485 +/- ##
==============================================
Coverage ? 100.00%
==============================================
Files ? 22
Lines ? 778
Branches ? 144
==============================================
Hits ? 778
Misses ? 0
Partials ? 0 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
|
Hi @Shriya-Chauhan, please resolve the merge conflicts. |
done! |
Signed-off-by: Shriya-Chauhan <[email protected]>
Signed-off-by: Shriya-Chauhan <[email protected]>
Signed-off-by: Shriya-Chauhan <[email protected]>
devilkiller-ag
left a comment
devilkiller-ag
left a comment
There was a problem hiding this comment.
These changes LGTM.
Also, when are you planning to work on the Navbar Dropdowns for dark mode?
Also, these Bump.sh and svix logos in dark mode are not visible, make sure to change it in your next PR.
|
@akshatnema Please review and merge this PR. |
| <div> | ||
| <span className='text-teal-400'>asyncapi:</span> <span className='text-white'>3.0.0</span> | ||
| </div> | ||
| <div> | ||
| <span className='text-teal-400'>info:</span> | ||
| </div> | ||
| <div> | ||
| <span className='text-teal-400'> title:</span> <span className='text-white'>Account Service</span> | ||
| </div> | ||
| <div> | ||
| <span className='text-teal-400'> version:</span> <span className='text-white'>1.0.0</span> | ||
| </div> | ||
| <div> | ||
| <span className='text-teal-400'> description:</span>{' '} | ||
| <span className='text-white'>This service is in charge of processing user signups :rocket:</span> |
There was a problem hiding this comment.
Can we somehow refactor this entire file? I see a lot of duplication in the code.
There was a problem hiding this comment.
For now, I’ve kept it similar to the existing file to maintain consistency. I don’t have the bandwidth right now to refactor or change the overall style.
Thanks! For the next PR, I won’t be changing the logos — it’s a bit of manual graphic work to update each one individually. I’ll handle that later |
Signed-off-by: Shriya-Chauhan <[email protected]>
Mayaleeeee
left a comment
Mayaleeeee
left a comment
There was a problem hiding this comment.
The contents here should have a different color effects when users hover over them @Shriya-Chauhan
|
@coderabbitai review |
✅ Actions performedReview triggered.
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
components/campaigns/AnnouncementHero.tsx (1)
6-18: Remove unused props from interface.The
IAnnouncementHeroPropsinterface declaressmallandhideVideoprops (lines 8-9) that are no longer used in the component implementation. The JSDoc comment on line 15 also references these unused props.Apply this diff:
interface IAnnouncementHeroProps { className?: string; - small?: boolean; - hideVideo?: boolean; } /** * @param {string} props.className - The class name of the announcement hero - * @param {Boolean} props.small - Whether the banner is small - * @param {Boolean} props.hideVideo - Whether the video should be hidden * @description The announcement hero - displays one rotating banner that changes every 2 seconds */ export default function AnnouncementHero({ className = '' }: IAnnouncementHeroProps) {
🧹 Nitpick comments (1)
components/SneakPeek.tsx (1)
285-289: Consider extracting tab button className logic.The className expression is complex with nested template literals and ternaries, making it harder to read and maintain.
You could extract the logic into a helper function:
const getTabClassName = (tabId: string, isLast: boolean) => { const baseClasses = 'flex-1 px-3 py-3 sm:px-4 sm:py-4 text-xs sm:text-sm font-medium transition-all duration-200'; const borderClasses = isLast ? '' : 'border-b sm:border-b-0 sm:border-r border-gray-300 dark:border-gray-300'; const activeClasses = activeTab === tabId ? 'bg-white dark:bg-[#1B1B2F] text-gray-900 dark:text-white' : 'bg-[#2D1F3F] dark:bg-[#14111D] text-gray-300 dark:text-gray-400 hover:bg-[#3D2F4F] dark:hover:bg-[#1F1A2F]'; return `${baseClasses} ${borderClasses} ${activeClasses}`; };Then use it in the JSX:
className={getTabClassName(tab.id, index === tabs.length - 1)}
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (13)
.gitignore(1 hunks)components/Hero.tsx(2 hunks)components/SneakPeek.tsx(1 hunks)components/campaigns/AnnouncementHero.tsx(2 hunks)components/campaigns/ConferenceBanner.tsx(1 hunks)components/layout/DocsLayout.tsx(3 hunks)components/navigation/MenuBlocks.tsx(1 hunks)components/navigation/MobileNavMenu.tsx(3 hunks)components/navigation/NavBar.tsx(1 hunks)next-env.d.ts(0 hunks)pages/[lang]/index.tsx(3 hunks)public/locales/de/landing-page.json(2 hunks)public/locales/en/landing-page.json(2 hunks)
💤 Files with no reviewable changes (1)
- next-env.d.ts
🔇 Additional comments (16)
.gitignore (1)
27-27: LGTM!Adding
next-env.d.tsto.gitignoreis the correct practice, as this file is automatically generated by Next.js and should not be version-controlled.pages/[lang]/index.tsx (2)
54-62: LGTM!The button styling updates improve responsive behavior with proper mobile-first approach (
w-full→sm:w-auto), and the new Slack community image provides helpful visual context for users.
109-109: Good dark mode support!The addition of
dark:text-dark-textclasses to the sponsor-related paragraphs ensures proper text readability in dark mode.Also applies to: 121-121
components/Hero.tsx (1)
10-10: LGTM!The replacement of
DemoAnimationwithSneakPeekis a clean component swap that introduces the new multi-tab showcase functionality to the hero section.Also applies to: 65-65
components/navigation/NavBar.tsx (1)
184-206: Excellent mobile navigation enhancements!The addition of
DarkModeToggle, consistent rounded corners (rounded-lg), improved padding (p-2.5), and interactive hover/active scale effects create a polished mobile navigation experience. The explicitaria-label="Open Menu"on Line 199 is a nice accessibility touch.public/locales/de/landing-page.json (1)
45-48: LGTM!The new
sneakpeeksection with German translations is properly structured and will support the new SneakPeek component functionality.components/campaigns/ConferenceBanner.tsx (1)
1-63: Well-structured conference banner component!The component is cleanly implemented with:
- Proper TypeScript interface definition
- Good responsive design patterns
- Security best practices (
rel='noopener noreferrer')- Testing support via
data-testid- Nice visual hierarchy with the "NEW" badge
components/layout/DocsLayout.tsx (2)
126-126: Excellent responsive layout improvements!The addition of
min-w-0andoverflow-hiddenprevents flex layout overflow issues, while the TOC visibility changes (hidden xl:block) significantly improve mobile UX by hiding the table of contents on smaller screens.Also applies to: 143-143, 147-149
201-201: Good content width adjustment.Changing from a constrained width to
max-w-fullallows article content to utilize the full available width within the layout container.components/navigation/MobileNavMenu.tsx (2)
59-90: Excellent mobile menu enhancements!The addition of animations (
animate-in fade-in slide-in-from-top-5), backdrop blur effects,DarkModeToggle, and consistent interactive feedback (hover/active scale effects) creates a polished mobile navigation experience with proper dark mode support.
93-198: Consistent dark mode styling across all menu sections!All navigation sections (Docs, Tools, Community, Others, Language) now have:
- Proper dark mode text colors
- Smooth animations for dropdown content
- Consistent hover states with visual feedback
- Good accessibility with clear active state indicators
public/locales/en/landing-page.json (1)
77-80: LGTM! Translations updated correctly.The events section has been successfully translated from Dutch to English with appropriate content.
components/navigation/MenuBlocks.tsx (1)
45-76: LGTM! Dark mode support implemented consistently.The dark mode variants are properly applied throughout the component, including:
- Background colors for active/hover states
- Border colors
- Text colors for both title and description
- The hover translate effect enhances the user experience
The split into two
Paragraphcomponents provides better control over styling for title vs description.components/campaigns/AnnouncementHero.tsx (1)
22-30: LGTM! Banner rotation logic is correct.The interval management properly handles edge cases:
- Early return when there's 0 or 1 banner
- 2-second rotation with proper cleanup
- Correct modulo arithmetic for cycling through banners
components/SneakPeek.tsx (2)
194-202: LGTM! Excellent keyboard accessibility implementation.The payload toggle properly supports keyboard navigation with:
onClickfor mouse interactiononKeyDownchecking for Enter and Space keysrole='button'for semantic meaningtabIndex={0}for keyboard focus
264-276: LGTM! Responsive and accessible component structure.The component header properly implements:
- Responsive typography with breakpoints (text-2xl sm:text-3xl lg:text-4xl)
- Dark mode support throughout
- Proper semantic heading structure
- Translation support via i18n
| "events": { | ||
| "title": "Unsere Gemeinschafts-Events", | ||
| "description":"AsyncAPI organiseert wekelijks verschillende bijeenkomsten. Deze richten zich op verschillende onderwerpen, soms puur technisch en soms over community-building. Kies er een en doe mee!", | ||
| "meetingTitle":"Lees meer over onze bijeenkomsten." | ||
| } |
There was a problem hiding this comment.
Critical localization error: Dutch text in German locale file.
Lines 78-79 contain Dutch translations instead of German:
- Line 78: "AsyncAPI organiseert wekelijks verschillende bijeenkomsten..." (Dutch)
- Line 79: "Lees meer over onze bijeenkomsten." (Dutch)
These should be translated to German to match the rest of the file.
Apply this diff to correct the translations:
"events": {
"title": "Unsere Gemeinschafts-Events",
- "description":"AsyncAPI organiseert wekelijks verschillende bijeenkomsten. Deze richten zich op verschillende onderwerpen, soms puur technisch en soms over community-building. Kies er een en doe mee!",
- "meetingTitle":"Lees meer over onze bijeenkomsten."
+ "description": "AsyncAPI veranstaltet wöchentlich verschiedene Treffen. Diese konzentrieren sich auf unterschiedliche Themen, manchmal rein technisch und manchmal auf Community-Building. Wählen Sie eines aus und machen Sie mit!",
+ "meetingTitle": "Erfahren Sie mehr über unsere Treffen."
}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| "events": { | |
| "title": "Unsere Gemeinschafts-Events", | |
| "description":"AsyncAPI organiseert wekelijks verschillende bijeenkomsten. Deze richten zich op verschillende onderwerpen, soms puur technisch en soms over community-building. Kies er een en doe mee!", | |
| "meetingTitle":"Lees meer over onze bijeenkomsten." | |
| } | |
| "events": { | |
| "title": "Unsere Gemeinschafts-Events", | |
| "description": "AsyncAPI veranstaltet wöchentlich verschiedene Treffen. Diese konzentrieren sich auf unterschiedliche Themen, manchmal rein technisch und manchmal auf Community-Building. Wählen Sie eines aus und machen Sie mit!", | |
| "meetingTitle": "Erfahren Sie mehr über unsere Treffen." | |
| } |
🤖 Prompt for AI Agents
public/locales/de/landing-page.json around lines 76 to 80: lines 78-79 currently
contain Dutch text and must be replaced with German; update "description" to
"AsyncAPI organisiert wöchentlich verschiedene Treffen. Diese befassen sich mit
unterschiedlichen Themen, manchmal rein technisch und manchmal mit
Community-Building. Wähle eins aus und mach mit!" and update "meetingTitle" to
"Erfahre mehr über unsere Treffen." so the entries are in German and match the
locale.
| "sneakpeek": { | ||
| "title": "Sneak Peek Into The Real Process", | ||
| "description": "One of our main goals is to improve the current state of Event Driven Architecture (EDA))" | ||
| }, |
There was a problem hiding this comment.
Fix typo and update description to be unique.
The sneakpeek.description has two issues:
- Duplicate closing parenthesis:
"EDA))"should be"EDA)" - The description is identical to
features.description(line 16), suggesting a copy-paste that wasn't updated
Apply this diff:
"sneakpeek": {
"title": "Sneak Peek Into The Real Process",
- "description": "One of our main goals is to improve the current state of Event Driven Architecture (EDA))"
+ "description": "See AsyncAPI in action - from specification to code generation and documentation."
},📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| "sneakpeek": { | |
| "title": "Sneak Peek Into The Real Process", | |
| "description": "One of our main goals is to improve the current state of Event Driven Architecture (EDA))" | |
| }, | |
| "sneakpeek": { | |
| "title": "Sneak Peek Into The Real Process", | |
| "description": "See AsyncAPI in action - from specification to code generation and documentation." | |
| }, |
🤖 Prompt for AI Agents
In public/locales/en/landing-page.json around lines 45 to 48, fix the duplicate
closing parenthesis in sneakpeek.description (change "EDA))" to "EDA)") and
replace the copy-pasted text that duplicates features.description with a unique,
concise description that reflects a sneak peek into the real EDA process (e.g.,
summarize what the sneak peek shows or highlights) so the string is both
grammatically correct and distinct from features.description.
| export default function AnnouncementHero({ className = '', small = false }: IAnnouncementHeroProps) { | ||
| const [activeIndex, setActiveIndex] = useState(0); | ||
|
|
||
| export default function AnnouncementHero({ className = '' }: IAnnouncementHeroProps) { |
There was a problem hiding this comment.
Why have we removed small & hideVideo props for this component? If not needed, kindly remove jsDoc for these props.
components/layout/DocsLayout.tsx
Outdated
| </div> | ||
| )} | ||
| <article className='my-12'> | ||
| <article className='my-12 max-w-full'> |
There was a problem hiding this comment.
Any reason why default property of all children is changed?
There was a problem hiding this comment.
yeah, unused at this point, so changed it
components/SneakPeek.tsx
Outdated
| */ | ||
| export default function SneakPeek() { | ||
| const { t } = useTranslation('landing-page'); | ||
| const [activeTab, setActiveTab] = useState<'document' | 'generation' | 'documentation'>('document'); |
There was a problem hiding this comment.
Consider extracting these tabs into some separate constant enums or types, for better usage of these constants.
| <h4 className='mb-4 flex justify-between font-medium text-gray-800'> | ||
| <a className='cursor-pointer'>Others</a> | ||
| <h4 className='mb-4 flex justify-between font-semibold text-gray-800 dark:text-white text-base'> | ||
| <a className='cursor-pointer hover:text-secondary-600 dark:hover:text-secondary-400 transition-colors'> |
There was a problem hiding this comment.
The "Others" menu header uses an tag without an href attribute. Can you please add href attribute in this if it's needed. Else, convert this to a button element.
| <a className='flex cursor-pointer items-center gap-x-2'> | ||
| Language <IconLanguage /> | ||
| <h4 className='mb-4 flex justify-between font-semibold text-gray-800 dark:text-white text-base'> | ||
| <a className='flex cursor-pointer items-center gap-x-2 hover:text-secondary-600 dark:hover:text-secondary-400 transition-colors'> |
Co-authored-by: Akshat Nema <[email protected]>
Signed-off-by: Shriya-Chauhan <[email protected]>
Signed-off-by: Shriya-Chauhan <[email protected]>
|
@akshat-nema @devilkiller-ag Any other changes? |
6 participants
This pr envolves new changes applied on the website homepage
Summary by CodeRabbit
New Features
Improvements