feat: implement redesign of the home page #3600
Conversation
vishvamsinh28
requested review from
derberg,
akshatnema,
magicmatatjahu,
anshgoyalevil,
Mayaleeeee and
asyncapi-bot-eve
as code owners
WalkthroughThis pull request introduces several new components and functions to enhance the AsyncAPI website. Key additions include the Changes
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
✨ Finishing Touches
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 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: 19
🔭 Outside diff range comments (1)
pages/[lang]/index.tsx (1)
Line range hint
1-18: Fix import sorting to resolve pipeline failureThe import statements in this file are not properly sorted, which is causing the pipeline to fail. Please run the autofix command to sort the imports according to the project's coding standards.
To fix this issue, run the following command:
npx eslint 'pages/[lang]/index.tsx' --fix
🧹 Nitpick comments (8)
components/CodeAnimation/Documentation.tsx (1)
1-6: Associate JSDoc comment directly with the functionThe JSDoc comment should be placed immediately before the function declaration to ensure it's correctly associated with the function by the linter.
Apply this diff to reposition the JSDoc comment:
/** * @description Renders the documentation content in a styled container. * This is used as the content for the "Documentation" tab in the DemoAnimation component. */ - -export default function renderDocumentation() { +export default function renderDocumentation() { // function body }🧰 Tools
🪛 GitHub Actions: PR testing - if Node project
[warning] 6-6: Missing JSDoc comment
components/CodeAnimation/AsyncAPIcontent.tsx (1)
2-2: Remove trailing spaces in JSDoc commentThere's a trailing space at the end of line 2. Trailing spaces can cause linter errors.
Apply this diff to remove the trailing space:
/** - * @description Renders the content related to AsyncAPI in a styled div container. + * @description Renders the content related to AsyncAPI in a styled div container. * This is used as the default content for the "AsyncAPI Document" tab in the DemoAnimation component. */🧰 Tools
🪛 eslint
[error] 2-2: Trailing spaces not allowed.
(no-trailing-spaces)
[error] 2-2: Delete
·(prettier/prettier)
🪛 GitHub Actions: PR testing - if Node project
[error] 2-2: Trailing spaces not allowed
components/CodeAnimation/CodeGeneration.tsx (1)
6-12: Add TypeScript type annotations.Consider adding proper TypeScript types to improve code maintainability and catch potential issues early:
-export default function renderCodeGeneration() { +export default function renderCodeGeneration(): JSX.Element {🧰 Tools
🪛 eslint
[error] 7-7: Delete
··(prettier/prettier)
[error] 8-8: Replace
········<div·className="font-mono·text-sm·leading-relaxed"with····<div·className='font-mono·text-sm·leading-relaxed'(prettier/prettier)
[error] 8-8: Unexpected usage of doublequote.
(jsx-quotes)
[error] 9-9: Replace
············<h1·className="text-[#98c379]"with······<h1·className='text-[#98c379]'(prettier/prettier)
[error] 9-9: Unexpected usage of doublequote.
(jsx-quotes)
[error] 10-10: Replace
········with····(prettier/prettier)
[error] 11-11: Replace
··)with);(prettier/prettier)
[error] 11-12: Missing semicolon.
(semi)
[error] 12-12: Newline required at end of file but not found.
(eol-last)
[error] 12-12: Insert
⏎(prettier/prettier)
components/sponsors/DiamondSponsorsList.ts (1)
9-9: Standardize image heights for consistency.The image heights are inconsistent (h-12, h-14, h-18). Consider standardizing them for a more uniform appearance.
- imageClass: 'inline-block px-4 sm:h-12' + imageClass: 'inline-block px-4 sm:h-14'Also applies to: 16-16, 23-23
components/CodeAnimation/DemoAnimation.tsx (1)
14-16: Add TypeScript types and extract tab configuration.Consider adding proper TypeScript types and extracting tab configuration:
+type Tab = 'AsyncAPI Document' | 'Code Generation' | 'Documentation'; + +const TABS: Tab[] = ['AsyncAPI Document', 'Code Generation', 'Documentation'] as const; + -export default function DemoAnimation() { - const [activeTab, setActiveTab] = useState('AsyncAPI Document'); - const tabs = ['AsyncAPI Document', 'Code Generation', 'Documentation']; +export default function DemoAnimation(): JSX.Element { + const [activeTab, setActiveTab] = useState<Tab>('AsyncAPI Document');components/features/index.tsx (1)
29-33: Consider improving grid responsiveness.The grid layout could be more fluid on medium-sized screens.
- <ul - className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3" - data-testid="Feature-ul" - > + <ul + className="grid grid-cols-1 gap-6 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-3" + data-testid="Feature-ul" + >🧰 Tools
🪛 eslint
[error] 29-29: Replace
"mt-12"with'mt-12'(prettier/prettier)
[error] 29-29: Unexpected usage of doublequote.
(jsx-quotes)
[error] 30-33: Replace
⏎············className="grid·grid-cols-1·gap-6·sm:grid-cols-2·lg:grid-cols-3"⏎············data-testid="Feature-ul"⏎··········with·className='grid·grid-cols-1·gap-6·sm:grid-cols-2·lg:grid-cols-3'·data-testid='Feature-ul'(prettier/prettier)
[error] 31-31: Unexpected usage of doublequote.
(jsx-quotes)
[error] 32-32: Unexpected usage of doublequote.
(jsx-quotes)
components/SupportUs/SupportUs.tsx (1)
28-34: Enhance email link accessibility.The email link should indicate that it opens in a new tab and is an email action.
<TextLink className='text-gray-700' href='mailto:[email protected]' target='_blank' + aria-label='Email us at [email protected] (opens email client)' > Email us + <span className="sr-only"> (opens email client)</span> </TextLink>🧰 Tools
🪛 eslint
[error] 28-32: Replace
⏎··········className='text-gray-700'⏎··········href='mailto:[email protected]'⏎··········target='_blank'⏎········with·className='text-gray-700'·href='mailto:[email protected]'·target='_blank'(prettier/prettier)
[error] 34-34: Insert
{'·'}⏎·······(prettier/prettier)
components/sponsors/DiamondSponsors.tsx (1)
30-30: Remove unnecessary optional chaining.The optional chaining operator on
sponsor?.imageClassis unnecessary as the sponsor object is guaranteed to exist within the map callback.- className={sponsor?.imageClass} + className={sponsor.imageClass}
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (16)
components/CodeAnimation/AsyncAPIcontent.tsx(1 hunks)components/CodeAnimation/CodeGeneration.tsx(1 hunks)components/CodeAnimation/DemoAnimation.tsx(1 hunks)components/CodeAnimation/Documentation.tsx(1 hunks)components/DemoAnimation.tsx(0 hunks)components/Hero.tsx(2 hunks)components/SupportUs/SupportUs.tsx(2 hunks)components/buttons/GoogleCalendarButton.tsx(0 hunks)components/buttons/ICSFileButton.tsx(0 hunks)components/features/FeatureList.ts(1 hunks)components/features/index.tsx(1 hunks)components/sponsors/DiamondSponsors.tsx(1 hunks)components/sponsors/DiamondSponsorsList.ts(1 hunks)pages/[lang]/index.tsx(2 hunks)public/locales/de/landing-page.json(2 hunks)public/locales/en/landing-page.json(2 hunks)
💤 Files with no reviewable changes (3)
- components/buttons/ICSFileButton.tsx
- components/buttons/GoogleCalendarButton.tsx
- components/DemoAnimation.tsx
🧰 Additional context used
🪛 eslint
components/CodeAnimation/CodeGeneration.tsx
[error] 7-7: Delete ··
(prettier/prettier)
[error] 8-8: Replace ········<div·className="font-mono·text-sm·leading-relaxed" with ····<div·className='font-mono·text-sm·leading-relaxed'
(prettier/prettier)
[error] 8-8: Unexpected usage of doublequote.
(jsx-quotes)
[error] 9-9: Replace ············<h1·className="text-[#98c379]" with ······<h1·className='text-[#98c379]'
(prettier/prettier)
[error] 9-9: Unexpected usage of doublequote.
(jsx-quotes)
[error] 10-10: Replace ········ with ····
(prettier/prettier)
[error] 11-11: Replace ··) with );
(prettier/prettier)
[error] 11-12: Missing semicolon.
(semi)
[error] 12-12: Newline required at end of file but not found.
(eol-last)
[error] 12-12: Insert ⏎
(prettier/prettier)
components/CodeAnimation/Documentation.tsx
[error] 7-7: Delete ··
(prettier/prettier)
[error] 8-8: Replace ········<div·className="text-white·font-sans" with ····<div·className='text-white·font-sans'
(prettier/prettier)
[error] 8-8: Unexpected usage of doublequote.
(jsx-quotes)
[error] 9-9: Replace ············<h1·className="text-xl·font-semibold·mb-4" with ······<h1·className='text-xl·font-semibold·mb-4'
(prettier/prettier)
[error] 9-9: Unexpected usage of doublequote.
(jsx-quotes)
[error] 10-10: Replace ········ with ····
(prettier/prettier)
[error] 11-11: Replace ··) with );
(prettier/prettier)
[error] 11-12: Missing semicolon.
(semi)
[error] 12-12: Newline required at end of file but not found.
(eol-last)
[error] 12-12: Insert ⏎
(prettier/prettier)
components/SupportUs/SupportUs.tsx
[error] 1-6: Run autofix to sort these imports!
(simple-import-sort/imports)
[error] 22-24: Replace ⏎········Supporters⏎······ with Supporters
(prettier/prettier)
[error] 26-27: Delete ⏎·······
(prettier/prettier)
[error] 28-32: Replace ⏎··········className='text-gray-700'⏎··········href='mailto:[email protected]'⏎··········target='_blank'⏎········ with ·className='text-gray-700'·href='mailto:[email protected]'·target='_blank'
(prettier/prettier)
[error] 34-34: Insert {'·'}⏎·······
(prettier/prettier)
components/CodeAnimation/AsyncAPIcontent.tsx
[error] 2-2: Trailing spaces not allowed.
(no-trailing-spaces)
[error] 2-2: Delete ·
(prettier/prettier)
[error] 7-10: Replace ··return·(⏎········<div·className="font-mono·text-sm·text-[#98c379]·leading-relaxed">⏎··········content·here⏎········</div> with return·<div·className='font-mono·text-sm·text-[#98c379]·leading-relaxed'>content·here</div>;
(prettier/prettier)
[error] 8-8: Unexpected usage of doublequote.
(jsx-quotes)
[error] 11-11: Replace ····) with }
(prettier/prettier)
[error] 11-12: Missing semicolon.
(semi)
[error] 12-12: Delete }
(prettier/prettier)
[error] 12-12: Newline required at end of file but not found.
(eol-last)
components/CodeAnimation/DemoAnimation.tsx
[error] 1-5: Run autofix to sort these imports!
(simple-import-sort/imports)
[error] 8-8: Trailing spaces not allowed.
(no-trailing-spaces)
[error] 8-8: Delete ·
(prettier/prettier)
[error] 9-9: Trailing spaces not allowed.
(no-trailing-spaces)
[error] 9-9: Delete ·
(prettier/prettier)
[error] 11-11: Trailing spaces not allowed.
(no-trailing-spaces)
[error] 11-11: Delete ·
(prettier/prettier)
[error] 16-17: Delete ⏎
(prettier/prettier)
[error] 18-19: More than 1 blank line not allowed.
(no-multiple-empty-lines)
[error] 35-35: Replace "relative·left-1/2·right-1/2·-mx-[50vw]·w-screen·bg-blue-100·p-6·font-sans" with 'relative·left-1/2·right-1/2·-mx-[50vw]·w-screen·bg-blue-100·p-6·font-sans'
(prettier/prettier)
[error] 35-35: Unexpected usage of doublequote.
(jsx-quotes)
[error] 37-39: Replace <h1·className="text-2xl·font-medium·text-center·mb-2">⏎········Sneak·Peek·Into·The·Real·Process⏎······ with ··<h1·className='text-2xl·font-medium·text-center·mb-2'>Sneak·Peek·Into·The·Real·Process
(prettier/prettier)
[error] 37-37: Unexpected usage of doublequote.
(jsx-quotes)
[error] 40-40: Replace ······<p·className="text-center·text-gray-600·text-sm·mb-6" with ········<p·className='text-center·text-gray-600·text-sm·mb-6'
(prettier/prettier)
[error] 40-40: Unexpected usage of doublequote.
(jsx-quotes)
[error] 41-41: Replace ········One·of·our·main·goals·is·to·improve·the·current·state·of·Event with ··········One·of·our·main·goals·is·to·improve·the·current·state·of·Event⏎··········
(prettier/prettier)
[error] 42-42: Insert ··
(prettier/prettier)
[error] 43-43: Insert ··
(prettier/prettier)
[error] 45-45: Replace ······<div·className="flex·flex-wrap·mb-4·bg-black·rounded-lg·overflow-hidden" with ········<div·className='flex·flex-wrap·mb-4·bg-black·rounded-lg·overflow-hidden'
(prettier/prettier)
[error] 45-45: Unexpected usage of doublequote.
(jsx-quotes)
[error] 46-46: Replace ········ with ··········
(prettier/prettier)
[error] 47-47: Insert ··
(prettier/prettier)
[error] 48-48: Insert ··
(prettier/prettier)
[error] 49-51: Replace className={flex-1·py-2·px-4·m-2·text-center·rounded·text-sm·transition-colors·duration-200·${activeTab·===·tab⏎················?·'bg-white·text-black'⏎···············with··className={flex-1·py-2·px-4·m-2·text-center·rounded·text-sm·transition-colors·duration-200·${⏎················activeTab·===·tab·?·'bg-white·text-black'
(prettier/prettier)
[error] 53-53: Insert ··
(prettier/prettier)
[error] 54-54: Replace ·········· with ············
(prettier/prettier)
[error] 55-55: Insert ··
(prettier/prettier)
[error] 56-56: Insert ··
(prettier/prettier)
[error] 57-57: Insert ··
(prettier/prettier)
[error] 58-58: Insert ··
(prettier/prettier)
[error] 60-60: Replace ······<div·className="bg-[#1a1b26]·rounded-lg·p-6·min-h-[400px]·transition-all·duration-200" with ········<div·className='bg-[#1a1b26]·rounded-lg·p-6·min-h-[400px]·transition-all·duration-200'
(prettier/prettier)
[error] 60-60: Unexpected usage of doublequote.
(jsx-quotes)
[error] 61-61: Replace "overflow-auto·max-w-full" with 'overflow-auto·max-w-full'
(prettier/prettier)
[error] 61-61: Unexpected usage of doublequote.
(jsx-quotes)
[error] 62-64: Replace "overflow-x-auto·whitespace-pre-wrap">⏎··············{renderContent()}⏎············ with 'overflow-x-auto·whitespace-pre-wrap'>{renderContent()}
(prettier/prettier)
[error] 62-62: Unexpected usage of doublequote.
(jsx-quotes)
[error] 70-70: Replace ; with ⏎
(prettier/prettier)
[error] 70-70: Newline required at end of file but not found.
(eol-last)
pages/[lang]/index.tsx
[error] 1-18: Run autofix to sort these imports!
(simple-import-sort/imports)
[error] 32-32: Replace "AsyncAPI·Initiative·for·event-driven·APIs" with 'AsyncAPI·Initiative·for·event-driven·APIs'
(prettier/prettier)
[error] 32-32: Unexpected usage of doublequote.
(jsx-quotes)
[error] 33-33: Replace "main-content"·className="scroll-mt-5" with 'main-content'·className='scroll-mt-5'
(prettier/prettier)
[error] 33-33: Unexpected usage of doublequote.
(jsx-quotes)
[error] 33-33: Unexpected usage of doublequote.
(jsx-quotes)
[error] 34-34: Replace "w-screen·bg-blue-100·flex·justify-center·items-center·py-2" with 'w-screen·bg-blue-100·flex·justify-center·items-center·py-2'
(prettier/prettier)
[error] 34-34: Unexpected usage of doublequote.
(jsx-quotes)
[error] 35-39: Replace ⏎············className="h-8·w-auto·mr-4"⏎············src="/img/logos/LFX.svg"⏎············alt="Linux·Foundation"⏎········· with ·className='h-8·w-auto·mr-4'·src='/img/logos/LFX.svg'·alt='Linux·Foundation'
(prettier/prettier)
[error] 36-36: Unexpected usage of doublequote.
(jsx-quotes)
[error] 37-37: Unexpected usage of doublequote.
(jsx-quotes)
[error] 38-38: Unexpected usage of doublequote.
(jsx-quotes)
[error] 40-40: Replace "font-semibold" with 'font-semibold'
(prettier/prettier)
[error] 40-40: Unexpected usage of doublequote.
(jsx-quotes)
[error] 43-43: Replace "mb-24" with 'mb-24'
(prettier/prettier)
[error] 43-43: Unexpected usage of doublequote.
(jsx-quotes)
[error] 46-46: Replace "py-12·text-left"·wide·as="section" with 'py-12·text-left'·wide·as='section'
(prettier/prettier)
[error] 46-46: Unexpected usage of doublequote.
(jsx-quotes)
[error] 46-46: Unexpected usage of doublequote.
(jsx-quotes)
[error] 47-47: Replace "flex·flex-col·lg:flex-row·gap-8·lg:gap-12·px-4·lg:px-0" with 'flex·flex-col·lg:flex-row·gap-8·lg:gap-12·px-4·lg:px-0'
(prettier/prettier)
[error] 47-47: Unexpected usage of doublequote.
(jsx-quotes)
[error] 48-48: Replace "lg:w-1/2·text-center·lg:text-left" with 'lg:w-1/2·text-center·lg:text-left'
(prettier/prettier)
[error] 48-48: Unexpected usage of doublequote.
(jsx-quotes)
[error] 49-53: Replace ⏎················level={HeadingLevel.h3}⏎················typeStyle={HeadingTypeStyle.lg}⏎················className="mb-4"⏎·············· with ·level={HeadingLevel.h3}·typeStyle={HeadingTypeStyle.lg}·className='mb-4'
(prettier/prettier)
[error] 52-52: Unexpected usage of doublequote.
(jsx-quotes)
[error] 56-58: Replace "text-left·mt-2·md:w-2/3·mx-auto·lg:mx-0">⏎················{t('community.subtitle')}⏎·············· with 'text-left·mt-2·md:w-2/3·mx-auto·lg:mx-0'>{t('community.subtitle')}
(prettier/prettier)
[error] 56-56: Unexpected usage of doublequote.
(jsx-quotes)
[error] 59-59: Replace "mt-5·flex·justify-center·lg:justify-start" with 'mt-5·flex·justify-center·lg:justify-start'
(prettier/prettier)
[error] 59-59: Unexpected usage of doublequote.
(jsx-quotes)
[error] 60-64: Replace ⏎··················className="w-full·md:w-auto"⏎··················text={t('community.slackCTABtn')}⏎··················href="/slack-invite"⏎··············· with ·className='w-full·md:w-auto'·text={t('community.slackCTABtn')}·href='/slack-invite'
(prettier/prettier)
[error] 61-61: Unexpected usage of doublequote.
(jsx-quotes)
[error] 63-63: Unexpected usage of doublequote.
(jsx-quotes)
[error] 68-68: Replace "w-full·lg:w-1/2·mt-10·lg:mt-0" with 'w-full·lg:w-1/2·mt-10·lg:mt-0'
(prettier/prettier)
[error] 68-68: Unexpected usage of doublequote.
(jsx-quotes)
[error] 73-73: Replace "text-center·mt-20" with 'text-center·mt-20'
(prettier/prettier)
[error] 73-73: Unexpected usage of doublequote.
(jsx-quotes)
[error] 77-79: Replace "mt-4·lg:mx-36">⏎··············{t('community.meetingDesc')}⏎············ with 'mt-4·lg:mx-36'>{t('community.meetingDesc')}
(prettier/prettier)
[error] 77-77: Unexpected usage of doublequote.
(jsx-quotes)
[error] 80-80: Replace "flex·flex-col·items-center·justify-center·gap-2·md:flex-row·mt-4" with 'flex·flex-col·items-center·justify-center·gap-2·md:flex-row·mt-4'
(prettier/prettier)
[error] 80-80: Unexpected usage of doublequote.
(jsx-quotes)
[error] 82-82: Replace "bg-primary-500·hover:bg-primary-400·text-white" with 'bg-primary-500·hover:bg-primary-400·text-white'
(prettier/prettier)
[error] 82-82: Unexpected usage of doublequote.
(jsx-quotes)
[error] 83-83: Replace "https://calendar.google.com/calendar/u/3?cid=Y19xOXRzZWlnbG9tZHNqNm5qdWh2YnB0czExY0Bncm91cC5jYWxlbmRhci5nb29nbGUuY29t" with 'https://calendar.google.com/calendar/u/3?cid=Y19xOXRzZWlnbG9tZHNqNm5qdWh2YnB0czExY0Bncm91cC5jYWxlbmRhci5nb29nbGUuY29t'
(prettier/prettier)
[error] 83-83: Unexpected usage of doublequote.
(jsx-quotes)
[error] 85-85: Replace "m-2" with 'm-2'
(prettier/prettier)
[error] 85-85: Unexpected usage of doublequote.
(jsx-quotes)
[error] 87-87: Replace "https://calendar.google.com/calendar/ical/c_q9tseiglomdsj6njuhvbpts11c%40group.calendar.google.com/public/basic.ics" with 'https://calendar.google.com/calendar/ical/c_q9tseiglomdsj6njuhvbpts11c%40group.calendar.google.com/public/basic.ics'
(prettier/prettier)
[error] 87-87: Unexpected usage of doublequote.
(jsx-quotes)
[error] 88-88: Replace "block·md:w-auto·bg-white·text-blue-500·border·border-blue-500·hover:bg-white" with 'block·md:w-auto·bg-white·text-blue-500·border·border-blue-500·hover:bg-white'
(prettier/prettier)
[error] 88-88: Unexpected usage of doublequote.
(jsx-quotes)
[error] 94-94: Replace "pb-20"·role="contentinfo"·aria-label="Our·Sponsors" with 'pb-20'·role='contentinfo'·aria-label='Our·Sponsors'
(prettier/prettier)
[error] 94-94: Unexpected usage of doublequote.
(jsx-quotes)
[error] 94-94: Unexpected usage of doublequote.
(jsx-quotes)
[error] 94-94: Unexpected usage of doublequote.
(jsx-quotes)
[error] 95-95: Replace "pb-6·text-center"·wide·as="section" with 'pb-6·text-center'·wide·as='section'
(prettier/prettier)
[error] 95-95: Unexpected usage of doublequote.
(jsx-quotes)
[error] 95-95: Unexpected usage of doublequote.
(jsx-quotes)
[error] 96-100: Replace ⏎··············level={HeadingLevel.h3}⏎··············typeStyle={HeadingTypeStyle.lg}⏎··············className="mb-4"⏎············ with ·level={HeadingLevel.h3}·typeStyle={HeadingTypeStyle.lg}·className='mb-4'
(prettier/prettier)
[error] 99-99: Unexpected usage of doublequote.
(jsx-quotes)
[error] 103-103: Replace "mt-4" with 'mt-4'
(prettier/prettier)
[error] 103-103: Unexpected usage of doublequote.
(jsx-quotes)
[error] 106-106: Replace "pb-6·text-center"·wide·as="section" with 'pb-6·text-center'·wide·as='section'
(prettier/prettier)
[error] 106-106: Unexpected usage of doublequote.
(jsx-quotes)
[error] 106-106: Unexpected usage of doublequote.
(jsx-quotes)
[error] 107-111: Replace ⏎··············level={HeadingLevel.h3}⏎··············typeStyle={HeadingTypeStyle.lg}⏎··············className="mb-4"⏎············ with ·level={HeadingLevel.h3}·typeStyle={HeadingTypeStyle.lg}·className='mb-4'
(prettier/prettier)
[error] 110-110: Unexpected usage of doublequote.
(jsx-quotes)
[error] 114-114: Replace "mt-4" with 'mt-4'
(prettier/prettier)
[error] 114-114: Unexpected usage of doublequote.
(jsx-quotes)
[error] 117-117: Replace "pyb-6·text-center"·wide·as="section" with 'pyb-6·text-center'·wide·as='section'
(prettier/prettier)
[error] 117-117: Unexpected usage of doublequote.
(jsx-quotes)
[error] 117-117: Unexpected usage of doublequote.
(jsx-quotes)
[error] 118-122: Replace ⏎··············level={HeadingLevel.h3}⏎··············typeStyle={HeadingTypeStyle.lg}⏎··············className="mb-4"⏎············ with ·level={HeadingLevel.h3}·typeStyle={HeadingTypeStyle.lg}·className='mb-4'
(prettier/prettier)
[error] 121-121: Unexpected usage of doublequote.
(jsx-quotes)
[error] 125-125: Replace "mt-4" with 'mt-4'
(prettier/prettier)
[error] 125-125: Unexpected usage of doublequote.
(jsx-quotes)
[error] 127-127: Insert ·
(prettier/prettier)
components/features/index.tsx
[error] 19-19: Replace "relative·bg-white·py-16" with 'relative·bg-white·py-16'
(prettier/prettier)
[error] 19-19: Unexpected usage of doublequote.
(jsx-quotes)
[error] 20-20: Replace "mx-auto·max-w-7xl·px-4·sm:px-6·lg:px-8" with 'mx-auto·max-w-7xl·px-4·sm:px-6·lg:px-8'
(prettier/prettier)
[error] 20-20: Unexpected usage of doublequote.
(jsx-quotes)
[error] 21-21: Replace "text-center" with 'text-center'
(prettier/prettier)
[error] 21-21: Unexpected usage of doublequote.
(jsx-quotes)
[error] 22-22: Replace "mt-2" with 'mt-2'
(prettier/prettier)
[error] 22-22: Unexpected usage of doublequote.
(jsx-quotes)
[error] 25-27: Replace "mx-auto·mt-4·max-w-2xl·text-gray-500">⏎············{t('features.description')}⏎·········· with 'mx-auto·mt-4·max-w-2xl·text-gray-500'>{t('features.description')}
(prettier/prettier)
[error] 25-25: Unexpected usage of doublequote.
(jsx-quotes)
[error] 29-29: Replace "mt-12" with 'mt-12'
(prettier/prettier)
[error] 29-29: Unexpected usage of doublequote.
(jsx-quotes)
[error] 30-33: Replace ⏎············className="grid·grid-cols-1·gap-6·sm:grid-cols-2·lg:grid-cols-3"⏎············data-testid="Feature-ul"⏎·········· with ·className='grid·grid-cols-1·gap-6·sm:grid-cols-2·lg:grid-cols-3'·data-testid='Feature-ul'
(prettier/prettier)
[error] 31-31: Unexpected usage of doublequote.
(jsx-quotes)
[error] 32-32: Unexpected usage of doublequote.
(jsx-quotes)
[error] 37-37: Replace "rounded-lg·border·border-gray-200·bg-white·p-6·shadow-lg·transition-all·duration-300·ease-in-out·hover:shadow-xl" with 'rounded-lg·border·border-gray-200·bg-white·p-6·shadow-lg·transition-all·duration-300·ease-in-out·hover:shadow-xl'
(prettier/prettier)
[error] 37-37: Unexpected usage of doublequote.
(jsx-quotes)
[error] 38-38: Replace "Feature-li" with 'Feature-li'
(prettier/prettier)
[error] 38-38: Unexpected usage of doublequote.
(jsx-quotes)
[error] 40-44: Replace ⏎··················level={HeadingLevel.h4}⏎··················typeStyle={HeadingTypeStyle.mdSemibold}⏎··················className="text-gray-900·mb-4"⏎················ with ·level={HeadingLevel.h4}·typeStyle={HeadingTypeStyle.mdSemibold}·className='text-gray-900·mb-4'
(prettier/prettier)
[error] 43-43: Unexpected usage of doublequote.
(jsx-quotes)
[error] 47-47: Replace "mt-4·text-gray-600" with 'mt-4·text-gray-600'
(prettier/prettier)
[error] 47-47: Unexpected usage of doublequote.
(jsx-quotes)
[error] 50-50: Replace "mt-6" with 'mt-6'
(prettier/prettier)
[error] 50-50: Unexpected usage of doublequote.
(jsx-quotes)
[error] 55-55: Replace "text-black·no-underline·font-large·hover:underline" with 'text-black·no-underline·font-large·hover:underline'
(prettier/prettier)
[error] 55-55: Unexpected usage of doublequote.
(jsx-quotes)
components/features/FeatureList.ts
[error] 20-20: Delete ,
(prettier/prettier)
[error] 20-20: Unexpected trailing comma.
(comma-dangle)
[error] 21-21: Delete ,
(prettier/prettier)
[error] 21-21: Unexpected trailing comma.
(comma-dangle)
[error] 29-29: Delete ,
(prettier/prettier)
[error] 29-29: Unexpected trailing comma.
(comma-dangle)
[error] 30-30: Delete ,
(prettier/prettier)
[error] 30-30: Unexpected trailing comma.
(comma-dangle)
[error] 38-38: Delete ,
(prettier/prettier)
[error] 38-38: Unexpected trailing comma.
(comma-dangle)
[error] 39-39: Delete ,
(prettier/prettier)
[error] 39-39: Unexpected trailing comma.
(comma-dangle)
[error] 47-47: Delete ,
(prettier/prettier)
[error] 47-47: Unexpected trailing comma.
(comma-dangle)
[error] 48-48: Delete ,
(prettier/prettier)
[error] 48-48: Unexpected trailing comma.
(comma-dangle)
[error] 56-56: Delete ,
(prettier/prettier)
[error] 56-56: Unexpected trailing comma.
(comma-dangle)
[error] 57-57: Delete ,
(prettier/prettier)
[error] 57-57: Unexpected trailing comma.
(comma-dangle)
[error] 65-65: Delete ,
(prettier/prettier)
[error] 65-65: Unexpected trailing comma.
(comma-dangle)
[error] 66-66: Delete ,
(prettier/prettier)
[error] 66-66: Unexpected trailing comma.
(comma-dangle)
components/Hero.tsx
[error] 1-12: Run autofix to sort these imports!
(simple-import-sort/imports)
[error] 49-49: Replace "" with ''
(prettier/prettier)
[error] 49-49: Strings must use singlequote.
(quotes)
[error] 57-57: Replace "" with ''
(prettier/prettier)
[error] 57-57: Strings must use singlequote.
(quotes)
🪛 GitHub Actions: PR testing - if Node project
components/CodeAnimation/Documentation.tsx
[warning] 6-6: Missing JSDoc comment
components/SupportUs/SupportUs.tsx
[error] 1-1: Import sorting issue: Run autofix to sort imports
components/CodeAnimation/AsyncAPIcontent.tsx
[error] 2-2: Trailing spaces not allowed
components/CodeAnimation/DemoAnimation.tsx
[warning] 35-35: Multiple Tailwind CSS issues: Arbitrary value '-mx-[50vw]' should not start with dash, and classnames 'left-1/2, right-1/2' could use 'inset-x-1/2' shorthand
pages/[lang]/index.tsx
[error] 1-1: Import sorting issue: Run autofix to sort imports
components/features/index.tsx
[error] 19-55: Multiple JSX quote consistency issues: Using double quotes instead of single quotes
components/features/FeatureList.ts
[error] 20-66: Multiple unexpected trailing commas throughout the file
components/Hero.tsx
[error] 1-1: Import sorting issue: Run autofix to sort imports
🔇 Additional comments (5)
components/sponsors/DiamondSponsorsList.ts (1)
7-8: Verify image paths and ensure images exist.The image paths are hardcoded. Let's verify that these images exist in the public directory.
Also applies to: 14-15, 21-22
✅ Verification successful
All sponsor image paths are valid and files exist
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Check if sponsor images exist for img in "sponsors/solace.png" "sponsors/gravitee.io_logo.jpg" "sponsors/postman.png"; do if ! fd -p "public/img/$img" .; then echo "Warning: Image not found: $img" fi doneLength of output: 513
components/features/index.tsx (1)
40-46: Consider semantic heading structure.The heading level changed from
h3toh4which might break the document outline, especially since this is within the Hero section.Let's verify the heading structure in the entire page:
🧰 Tools
🪛 eslint
[error] 40-44: Replace
⏎··················level={HeadingLevel.h4}⏎··················typeStyle={HeadingTypeStyle.mdSemibold}⏎··················className="text-gray-900·mb-4"⏎················with·level={HeadingLevel.h4}·typeStyle={HeadingTypeStyle.mdSemibold}·className='text-gray-900·mb-4'(prettier/prettier)
[error] 43-43: Unexpected usage of doublequote.
(jsx-quotes)
public/locales/en/landing-page.json (3)
8-10: LGTM! Clear and action-oriented button text.The new button text and Linux Foundation reference are well-written and align with the homepage redesign objectives.
51-51: LGTM! Clearer call-to-action.The updated button text "Join us on slack" is more specific and clearer than the previous version.
57-57: LGTM! Consistent sponsor tier naming.The new Diamond sponsor tier follows the existing naming convention.
pages/[lang]/index.tsx
Outdated
| </li> | ||
| <li> | ||
| <SubscribeButton href='/community/meetings' className='mt-2 md:ml-2 md:mt-0' /> | ||
| </li> | ||
| <li> | ||
| <ICSFileButton | ||
| href='https://calendar.google.com/calendar/ical/c_q9tseiglomdsj6njuhvbpts11c%40group.calendar.google.com/public/basic.ics' | ||
| className='mt-2 md:ml-2 md:mt-0' | ||
| /> | ||
| </li> | ||
| </ul> | ||
| </div> | ||
| </section> | ||
| </div> | ||
| </Container> | ||
| <Container wide> | ||
| <NewsroomSection /> | ||
| </Container> | ||
| <div className="w-full lg:w-1/2 mt-10 lg:mt-0"> | ||
| <Slack /> | ||
| </div> | ||
| </div> | ||
|
|
||
| <Container className="text-center mt-20" wide> | ||
| <Heading level={HeadingLevel.h1} typeStyle={HeadingTypeStyle.lg}> | ||
| {t('community.meetingTitle')} | ||
| </Heading> | ||
| <Paragraph className="mt-4 lg:mx-36"> | ||
| {t('community.meetingDesc')} | ||
| </Paragraph> | ||
| <div className="flex flex-col items-center justify-center gap-2 md:flex-row mt-4"> | ||
| <GoogleCalendarButton | ||
| className="bg-primary-500 hover:bg-primary-400 text-white" | ||
| href="https://calendar.google.com/calendar/u/3?cid=Y19xOXRzZWlnbG9tZHNqNm5qdWh2YnB0czExY0Bncm91cC5jYWxlbmRhci5nb29nbGUuY29t" | ||
| /> | ||
| <h1 className="m-2">OR</h1> | ||
| <ICSFileButton | ||
| href="https://calendar.google.com/calendar/ical/c_q9tseiglomdsj6njuhvbpts11c%40group.calendar.google.com/public/basic.ics" | ||
| className="block md:w-auto bg-white text-blue-500 border border-blue-500 hover:bg-white" | ||
| /> | ||
| </div> | ||
| </Container> | ||
| </Container> | ||
|
|
||
| <section className='pb-20' role='contentinfo' aria-label='Our Sponsors'> | ||
| <Container className='pb-6 text-center' wide as='section'> | ||
| <Heading level={HeadingLevel.h3} typeStyle={HeadingTypeStyle.lg} className='mb-4'> | ||
| <section className="pb-20" role="contentinfo" aria-label="Our Sponsors"> | ||
| <Container className="pb-6 text-center" wide as="section"> | ||
| <Heading | ||
| level={HeadingLevel.h3} | ||
| typeStyle={HeadingTypeStyle.lg} | ||
| className="mb-4" | ||
| > | ||
| {t('sponsors.platinumTitle')} | ||
| </Heading> | ||
| <Sponsors className='mt-4' showSupportBanner={false} /> | ||
| <Sponsors className="mt-4" showSupportBanner={false} /> | ||
| </Container> | ||
|
|
||
| <Container className='pb-6 text-center' wide as='section'> | ||
| <Heading level={HeadingLevel.h3} typeStyle={HeadingTypeStyle.lg} className='mb-4'> | ||
| <Container className="pb-6 text-center" wide as="section"> | ||
| <Heading | ||
| level={HeadingLevel.h3} | ||
| typeStyle={HeadingTypeStyle.lg} | ||
| className="mb-4" | ||
| > | ||
| {t('sponsors.goldTitle')} | ||
| </Heading> | ||
| <GoldSponsors className='mt-4' showSupportBanner={false} /> | ||
| <GoldSponsors className="mt-4" showSupportBanner={false} /> | ||
| </Container> | ||
|
|
||
| <Container className='pyb-6 text-center' wide as='section'> | ||
| <Heading level={HeadingLevel.h3} typeStyle={HeadingTypeStyle.lg} className='mb-4'> | ||
| <Container className="pyb-6 text-center" wide as="section"> | ||
| <Heading | ||
| level={HeadingLevel.h3} | ||
| typeStyle={HeadingTypeStyle.lg} | ||
| className="mb-4" | ||
| > | ||
| {t('sponsors.silverTitle')} | ||
| </Heading> | ||
| <SilverSponsors className='mt-4' showSupportBanner={false} /> | ||
| </Container> | ||
|
|
||
| <Container className='py-6 text-center' wide as='section'> | ||
| <Heading level={HeadingLevel.h3} typeStyle={HeadingTypeStyle.mdSemibold} className='mb-4'> | ||
| {t('sponsors.sponsorCTATitle')} | ||
| </Heading> | ||
| <Paragraph className='mt-2 md:mx-auto md:w-1/2'> | ||
| {t('sponsors.sponsorCTADesc')} | ||
| <TextLink href='https://opencollective.com/asyncapi' target='_blank'> | ||
| {t('sponsors.sponsorCTALink')} | ||
| </TextLink> | ||
| </Paragraph> | ||
| <SilverSponsors className="mt-4" showSupportBanner={false} /> | ||
| </Container> | ||
| <SupportUs/> |
There was a problem hiding this comment.
Replace double quotes with single quotes in JSX attributes
The code uses double quotes in JSX attributes, violating the ESLint rule jsx-quotes. Replace double quotes with single quotes throughout the JSX to adhere to the project's coding standards and resolve linter errors.
Apply this diff to fix the quotation style:
-<Head title="AsyncAPI Initiative for event-driven APIs" />
+<Head title='AsyncAPI Initiative for event-driven APIs' />
-<main id="main-content" className="scroll-mt-5">
+<main id='main-content' className='scroll-mt-5'>
-<div className="w-screen bg-blue-100 flex justify-center items-center py-2">
+<div className='w-screen bg-blue-100 flex justify-center items-center py-2'>
-<img
- className="h-8 w-auto mr-4"
- src="/img/logos/LFX.svg"
- alt="Linux Foundation"
-/>
+<img
+ className='h-8 w-auto mr-4'
+ src='/img/logos/LFX.svg'
+ alt='Linux Foundation'
+/>
-<span className="font-semibold">{t('linuxFoundation_txt')}</span>
+<span className='font-semibold'>{t('linuxFoundation_txt')}</span>
<!-- Apply similar changes to all JSX elements using double quotes -->Alternatively, you can run the autofix command:
npx eslint 'pages/[lang]/index.tsx' --fix🧰 Tools
🪛 eslint
[error] 32-32: Replace "AsyncAPI·Initiative·for·event-driven·APIs" with 'AsyncAPI·Initiative·for·event-driven·APIs'
(prettier/prettier)
[error] 32-32: Unexpected usage of doublequote.
(jsx-quotes)
[error] 33-33: Replace "main-content"·className="scroll-mt-5" with 'main-content'·className='scroll-mt-5'
(prettier/prettier)
[error] 33-33: Unexpected usage of doublequote.
(jsx-quotes)
[error] 33-33: Unexpected usage of doublequote.
(jsx-quotes)
[error] 34-34: Replace "w-screen·bg-blue-100·flex·justify-center·items-center·py-2" with 'w-screen·bg-blue-100·flex·justify-center·items-center·py-2'
(prettier/prettier)
[error] 34-34: Unexpected usage of doublequote.
(jsx-quotes)
[error] 35-39: Replace ⏎············className="h-8·w-auto·mr-4"⏎············src="/img/logos/LFX.svg"⏎············alt="Linux·Foundation"⏎········· with ·className='h-8·w-auto·mr-4'·src='/img/logos/LFX.svg'·alt='Linux·Foundation'
(prettier/prettier)
[error] 36-36: Unexpected usage of doublequote.
(jsx-quotes)
[error] 37-37: Unexpected usage of doublequote.
(jsx-quotes)
[error] 38-38: Unexpected usage of doublequote.
(jsx-quotes)
[error] 40-40: Replace "font-semibold" with 'font-semibold'
(prettier/prettier)
[error] 40-40: Unexpected usage of doublequote.
(jsx-quotes)
[error] 43-43: Replace "mb-24" with 'mb-24'
(prettier/prettier)
[error] 43-43: Unexpected usage of doublequote.
(jsx-quotes)
[error] 46-46: Replace "py-12·text-left"·wide·as="section" with 'py-12·text-left'·wide·as='section'
(prettier/prettier)
[error] 46-46: Unexpected usage of doublequote.
(jsx-quotes)
[error] 46-46: Unexpected usage of doublequote.
(jsx-quotes)
[error] 47-47: Replace "flex·flex-col·lg:flex-row·gap-8·lg:gap-12·px-4·lg:px-0" with 'flex·flex-col·lg:flex-row·gap-8·lg:gap-12·px-4·lg:px-0'
(prettier/prettier)
[error] 47-47: Unexpected usage of doublequote.
(jsx-quotes)
[error] 48-48: Replace "lg:w-1/2·text-center·lg:text-left" with 'lg:w-1/2·text-center·lg:text-left'
(prettier/prettier)
[error] 48-48: Unexpected usage of doublequote.
(jsx-quotes)
[error] 49-53: Replace ⏎················level={HeadingLevel.h3}⏎················typeStyle={HeadingTypeStyle.lg}⏎················className="mb-4"⏎·············· with ·level={HeadingLevel.h3}·typeStyle={HeadingTypeStyle.lg}·className='mb-4'
(prettier/prettier)
[error] 52-52: Unexpected usage of doublequote.
(jsx-quotes)
[error] 56-58: Replace "text-left·mt-2·md:w-2/3·mx-auto·lg:mx-0">⏎················{t('community.subtitle')}⏎·············· with 'text-left·mt-2·md:w-2/3·mx-auto·lg:mx-0'>{t('community.subtitle')}
(prettier/prettier)
[error] 56-56: Unexpected usage of doublequote.
(jsx-quotes)
[error] 59-59: Replace "mt-5·flex·justify-center·lg:justify-start" with 'mt-5·flex·justify-center·lg:justify-start'
(prettier/prettier)
[error] 59-59: Unexpected usage of doublequote.
(jsx-quotes)
[error] 60-64: Replace ⏎··················className="w-full·md:w-auto"⏎··················text={t('community.slackCTABtn')}⏎··················href="/slack-invite"⏎··············· with ·className='w-full·md:w-auto'·text={t('community.slackCTABtn')}·href='/slack-invite'
(prettier/prettier)
[error] 61-61: Unexpected usage of doublequote.
(jsx-quotes)
[error] 63-63: Unexpected usage of doublequote.
(jsx-quotes)
[error] 68-68: Replace "w-full·lg:w-1/2·mt-10·lg:mt-0" with 'w-full·lg:w-1/2·mt-10·lg:mt-0'
(prettier/prettier)
[error] 68-68: Unexpected usage of doublequote.
(jsx-quotes)
[error] 73-73: Replace "text-center·mt-20" with 'text-center·mt-20'
(prettier/prettier)
[error] 73-73: Unexpected usage of doublequote.
(jsx-quotes)
[error] 77-79: Replace "mt-4·lg:mx-36">⏎··············{t('community.meetingDesc')}⏎············ with 'mt-4·lg:mx-36'>{t('community.meetingDesc')}
(prettier/prettier)
[error] 77-77: Unexpected usage of doublequote.
(jsx-quotes)
[error] 80-80: Replace "flex·flex-col·items-center·justify-center·gap-2·md:flex-row·mt-4" with 'flex·flex-col·items-center·justify-center·gap-2·md:flex-row·mt-4'
(prettier/prettier)
[error] 80-80: Unexpected usage of doublequote.
(jsx-quotes)
[error] 82-82: Replace "bg-primary-500·hover:bg-primary-400·text-white" with 'bg-primary-500·hover:bg-primary-400·text-white'
(prettier/prettier)
[error] 82-82: Unexpected usage of doublequote.
(jsx-quotes)
[error] 83-83: Replace "https://calendar.google.com/calendar/u/3?cid=Y19xOXRzZWlnbG9tZHNqNm5qdWh2YnB0czExY0Bncm91cC5jYWxlbmRhci5nb29nbGUuY29t" with 'https://calendar.google.com/calendar/u/3?cid=Y19xOXRzZWlnbG9tZHNqNm5qdWh2YnB0czExY0Bncm91cC5jYWxlbmRhci5nb29nbGUuY29t'
(prettier/prettier)
[error] 83-83: Unexpected usage of doublequote.
(jsx-quotes)
[error] 85-85: Replace "m-2" with 'm-2'
(prettier/prettier)
[error] 85-85: Unexpected usage of doublequote.
(jsx-quotes)
[error] 87-87: Replace "https://calendar.google.com/calendar/ical/c_q9tseiglomdsj6njuhvbpts11c%40group.calendar.google.com/public/basic.ics" with 'https://calendar.google.com/calendar/ical/c_q9tseiglomdsj6njuhvbpts11c%40group.calendar.google.com/public/basic.ics'
(prettier/prettier)
[error] 87-87: Unexpected usage of doublequote.
(jsx-quotes)
[error] 88-88: Replace "block·md:w-auto·bg-white·text-blue-500·border·border-blue-500·hover:bg-white" with 'block·md:w-auto·bg-white·text-blue-500·border·border-blue-500·hover:bg-white'
(prettier/prettier)
[error] 88-88: Unexpected usage of doublequote.
(jsx-quotes)
[error] 94-94: Replace "pb-20"·role="contentinfo"·aria-label="Our·Sponsors" with 'pb-20'·role='contentinfo'·aria-label='Our·Sponsors'
(prettier/prettier)
[error] 94-94: Unexpected usage of doublequote.
(jsx-quotes)
[error] 94-94: Unexpected usage of doublequote.
(jsx-quotes)
[error] 94-94: Unexpected usage of doublequote.
(jsx-quotes)
[error] 95-95: Replace "pb-6·text-center"·wide·as="section" with 'pb-6·text-center'·wide·as='section'
(prettier/prettier)
[error] 95-95: Unexpected usage of doublequote.
(jsx-quotes)
[error] 95-95: Unexpected usage of doublequote.
(jsx-quotes)
[error] 96-100: Replace ⏎··············level={HeadingLevel.h3}⏎··············typeStyle={HeadingTypeStyle.lg}⏎··············className="mb-4"⏎············ with ·level={HeadingLevel.h3}·typeStyle={HeadingTypeStyle.lg}·className='mb-4'
(prettier/prettier)
[error] 99-99: Unexpected usage of doublequote.
(jsx-quotes)
[error] 103-103: Replace "mt-4" with 'mt-4'
(prettier/prettier)
[error] 103-103: Unexpected usage of doublequote.
(jsx-quotes)
[error] 106-106: Replace "pb-6·text-center"·wide·as="section" with 'pb-6·text-center'·wide·as='section'
(prettier/prettier)
[error] 106-106: Unexpected usage of doublequote.
(jsx-quotes)
[error] 106-106: Unexpected usage of doublequote.
(jsx-quotes)
[error] 107-111: Replace ⏎··············level={HeadingLevel.h3}⏎··············typeStyle={HeadingTypeStyle.lg}⏎··············className="mb-4"⏎············ with ·level={HeadingLevel.h3}·typeStyle={HeadingTypeStyle.lg}·className='mb-4'
(prettier/prettier)
[error] 110-110: Unexpected usage of doublequote.
(jsx-quotes)
[error] 114-114: Replace "mt-4" with 'mt-4'
(prettier/prettier)
[error] 114-114: Unexpected usage of doublequote.
(jsx-quotes)
[error] 117-117: Replace "pyb-6·text-center"·wide·as="section" with 'pyb-6·text-center'·wide·as='section'
(prettier/prettier)
[error] 117-117: Unexpected usage of doublequote.
(jsx-quotes)
[error] 117-117: Unexpected usage of doublequote.
(jsx-quotes)
[error] 118-122: Replace ⏎··············level={HeadingLevel.h3}⏎··············typeStyle={HeadingTypeStyle.lg}⏎··············className="mb-4"⏎············ with ·level={HeadingLevel.h3}·typeStyle={HeadingTypeStyle.lg}·className='mb-4'
(prettier/prettier)
[error] 121-121: Unexpected usage of doublequote.
(jsx-quotes)
[error] 125-125: Replace "mt-4" with 'mt-4'
(prettier/prettier)
[error] 125-125: Unexpected usage of doublequote.
(jsx-quotes)
[error] 127-127: Insert ·
(prettier/prettier)
| export default function renderDocumentation() { | ||
| return ( | ||
| <div className="text-white font-sans"> | ||
| <h1 className="text-xl font-semibold mb-4">Documentation</h1> | ||
| </div> | ||
| ) | ||
| } |
There was a problem hiding this comment.
Fix syntax and adhere to code style guidelines
There are several issues in this function:
- Missing semicolons at the end of statements.
- Unexpected usage of double quotes in JSX attributes; single quotes are preferred.
- Incorrect indentation.
Apply this diff to correct the issues:
-export default function renderDocumentation() {
- return (
- <div className="text-white font-sans">
- <h1 className="text-xl font-semibold mb-4">Documentation</h1>
- </div>
- )
-}
+export default function renderDocumentation() {
+ return (
+ <div className='text-white font-sans'>
+ <h1 className='text-xl font-semibold mb-4'>Documentation</h1>
+ </div>
+ );
+}📝 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.
| export default function renderDocumentation() { | |
| return ( | |
| <div className="text-white font-sans"> | |
| <h1 className="text-xl font-semibold mb-4">Documentation</h1> | |
| </div> | |
| ) | |
| } | |
| export default function renderDocumentation() { | |
| return ( | |
| <div className='text-white font-sans'> | |
| <h1 className='text-xl font-semibold mb-4'>Documentation</h1> | |
| </div> | |
| ); | |
| } |
🧰 Tools
🪛 eslint
[error] 7-7: Delete ··
(prettier/prettier)
[error] 8-8: Replace ········<div·className="text-white·font-sans" with ····<div·className='text-white·font-sans'
(prettier/prettier)
[error] 8-8: Unexpected usage of doublequote.
(jsx-quotes)
[error] 9-9: Replace ············<h1·className="text-xl·font-semibold·mb-4" with ······<h1·className='text-xl·font-semibold·mb-4'
(prettier/prettier)
[error] 9-9: Unexpected usage of doublequote.
(jsx-quotes)
[error] 10-10: Replace ········ with ····
(prettier/prettier)
[error] 11-11: Replace ··) with );
(prettier/prettier)
[error] 11-12: Missing semicolon.
(semi)
[error] 12-12: Newline required at end of file but not found.
(eol-last)
[error] 12-12: Insert ⏎
(prettier/prettier)
🪛 GitHub Actions: PR testing - if Node project
[warning] 6-6: Missing JSDoc comment
| export default function renderAsyncAPIContent() { | ||
| return ( | ||
| <div className="font-mono text-sm text-[#98c379] leading-relaxed"> | ||
| content here | ||
| </div> | ||
| ) | ||
| } |
There was a problem hiding this comment.
Correct function syntax and code style issues
The function has several problems:
- Missing semicolons.
- Unexpected usage of double quotes in JSX attributes.
- Misplaced braces and indentation.
Apply this diff to fix the issues:
-export default function renderAsyncAPIContent() {
- return (
- <div className="font-mono text-sm text-[#98c379] leading-relaxed">
- content here
- </div>
- )
-}
+export default function renderAsyncAPIContent() {
+ return (
+ <div className='font-mono text-sm text-[#98c379] leading-relaxed'>
+ content here
+ </div>
+ );
+}📝 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.
| export default function renderAsyncAPIContent() { | |
| return ( | |
| <div className="font-mono text-sm text-[#98c379] leading-relaxed"> | |
| content here | |
| </div> | |
| ) | |
| } | |
| export default function renderAsyncAPIContent() { | |
| return ( | |
| <div className='font-mono text-sm text-[#98c379] leading-relaxed'> | |
| content here | |
| </div> | |
| ); | |
| } |
🧰 Tools
🪛 eslint
[error] 7-10: Replace ··return·(⏎········<div·className="font-mono·text-sm·text-[#98c379]·leading-relaxed">⏎··········content·here⏎········</div> with return·<div·className='font-mono·text-sm·text-[#98c379]·leading-relaxed'>content·here</div>;
(prettier/prettier)
[error] 8-8: Unexpected usage of doublequote.
(jsx-quotes)
[error] 11-11: Replace ····) with }
(prettier/prettier)
[error] 11-12: Missing semicolon.
(semi)
[error] 12-12: Delete }
(prettier/prettier)
[error] 12-12: Newline required at end of file but not found.
(eol-last)
| <div className="font-mono text-sm leading-relaxed"> | ||
| <h1 className="text-[#98c379]">content here</h1> | ||
| </div> |
There was a problem hiding this comment.
Add proper content instead of placeholder text.
The component currently displays a placeholder text "content here". Since this is part of the demo animation showcasing code generation features, it should contain meaningful content demonstrating the actual code generation capabilities.
Would you like me to help generate sample content that demonstrates code generation features?
🧰 Tools
🪛 eslint
[error] 8-8: Replace ········<div·className="font-mono·text-sm·leading-relaxed" with ····<div·className='font-mono·text-sm·leading-relaxed'
(prettier/prettier)
[error] 8-8: Unexpected usage of doublequote.
(jsx-quotes)
[error] 9-9: Replace ············<h1·className="text-[#98c379]" with ······<h1·className='text-[#98c379]'
(prettier/prettier)
[error] 9-9: Unexpected usage of doublequote.
(jsx-quotes)
[error] 10-10: Replace ········ with ····
(prettier/prettier)
components/features/FeatureList.ts
Outdated
| id: 'costs-control-read-more-link', | ||
| }, |
There was a problem hiding this comment.
Fix trailing commas per pipeline failure.
The pipeline is failing due to unexpected trailing commas. Let's fix them:
label: 'features.read-more',
href: 'docs/costs-control',
- id: 'costs-control-read-more-link',
+ id: 'costs-control-read-more-link'
- },
+ }Also applies to: 29-30, 38-39, 47-48, 56-57, 65-66
🧰 Tools
🪛 eslint
[error] 20-20: Delete ,
(prettier/prettier)
[error] 20-20: Unexpected trailing comma.
(comma-dangle)
[error] 21-21: Delete ,
(prettier/prettier)
[error] 21-21: Unexpected trailing comma.
(comma-dangle)
🪛 GitHub Actions: PR testing - if Node project
[error] 20-66: Multiple unexpected trailing commas throughout the file
| interface SponsorsProps { | ||
| className: string; | ||
| showSupportBanner: boolean; | ||
| } |
There was a problem hiding this comment.
Fix props interface inconsistency.
The props are marked as required in the interface but have default values in the function parameters.
interface SponsorsProps {
- className: string;
- showSupportBanner: boolean;
+ className?: string;
+ showSupportBanner?: boolean;
}📝 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.
| interface SponsorsProps { | |
| className: string; | |
| showSupportBanner: boolean; | |
| } | |
| interface SponsorsProps { | |
| className?: string; | |
| showSupportBanner?: boolean; | |
| } |
| "costs-control": { | ||
| "name": "Costs Control", | ||
| "description": "Open-Source tools to easily build and maintain your event-driven architecture. All powered by the AsyncAPI specification, the industry standard for defining asynchronous APIs." | ||
| }, | ||
| "publishing-api": { | ||
| "name": "Self-service for Publishing API", | ||
| "description": "Open-Source tools to easily build and maintain your event-driven architecture. All powered by the AsyncAPI specification, the industry standard for defining asynchronous APIs." | ||
| }, | ||
| "code-generation": { | ||
| "name": "Code Generation", | ||
| "description": "Open-Source tools to easily build and maintain your event-driven architecture. All powered by the AsyncAPI specification, the industry standard for defining asynchronous APIs." | ||
| }, | ||
| "infra-as-code": { | ||
| "name": "Infrastructure as Code", | ||
| "description": "Open-Source tools to easily build and maintain your event-driven architecture. All powered by the AsyncAPI specification, the industry standard for defining asynchronous APIs." | ||
| }, | ||
| "governance-consistency": { | ||
| "name": "Governance & Consistency", | ||
| "description": "Open-Source tools to easily build and maintain your event-driven architecture. All powered by the AsyncAPI specification, the industry standard for defining asynchronous APIs." | ||
| }, | ||
| "developer-portal": { | ||
| "name": "Developer Portal", | ||
| "description": "Open-Source tools to easily build and maintain your event-driven architecture. All powered by the AsyncAPI specification, the industry standard for defining asynchronous APIs." | ||
| }, |
There was a problem hiding this comment.
Each feature needs a unique description.
Currently, all features have the same generic description. Each feature should have a unique description that highlights its specific benefits and use cases.
For example, the "Code Generation" feature's description should focus on how AsyncAPI automates code creation, while "Governance & Consistency" should emphasize standardization benefits.
| @@ -57,6 +54,7 @@ | |||
| "meetingLink": "Erfahren Sie mehr über unsere Meetings." | |||
| }, | |||
| "sponsors": { | |||
| "diamondTitle": "Diamond Sponsors", | |||
There was a problem hiding this comment.
German translation needed for Diamond sponsor tier.
The new sponsor tier should be translated to maintain consistency with other sponsor tiers in the file.
-"diamondTitle": "Diamond Sponsors",
+"diamondTitle": "Diamant-Sponsoren",📝 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.
| "diamondTitle": "Diamond Sponsors", | |
| "diamondTitle": "Diamant-Sponsoren", |
| "join_btn": "Join our Community", | ||
| "subscribe_btn": "Subscribe to our Newsletter", | ||
| "linuxFoundation_txt": "Part of the Linux Foundation" |
There was a problem hiding this comment.
German translations needed for new content.
These strings are still in English while the rest of the file is in German. Please provide German translations for:
- "Join our Community"
- "Subscribe to our Newsletter"
- "Part of the Linux Foundation"
Suggested translations:
-"join_btn": "Join our Community",
+"join_btn": "Werden Sie Teil unserer Community",
-"subscribe_btn": "Subscribe to our Newsletter",
+"subscribe_btn": "Abonnieren Sie unseren Newsletter",
-"linuxFoundation_txt": "Part of the Linux Foundation"
+"linuxFoundation_txt": "Teil der Linux Foundation"📝 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.
| "join_btn": "Join our Community", | |
| "subscribe_btn": "Subscribe to our Newsletter", | |
| "linuxFoundation_txt": "Part of the Linux Foundation" | |
| "join_btn": "Werden Sie Teil unserer Community", | |
| "subscribe_btn": "Abonnieren Sie unseren Newsletter", | |
| "linuxFoundation_txt": "Teil der Linux Foundation" |
| "title": "What You Can Use AsyncAPI For", | ||
| "description": "One of our main goals is to improve the current state of Event Driven Architecture (EDA)", | ||
| "costs-control": { | ||
| "name": "Costs Control", | ||
| "description": "Open-Source tools to easily build and maintain your event-driven architecture. All powered by the AsyncAPI specification, the industry standard for defining asynchronous APIs." | ||
| }, | ||
| "publishing-api": { | ||
| "name": "Self-service for Publishing API", | ||
| "description": "Open-Source tools to easily build and maintain your event-driven architecture. All powered by the AsyncAPI specification, the industry standard for defining asynchronous APIs." | ||
| }, | ||
| "code-generation": { | ||
| "name": "Code Generation", | ||
| "description": "Open-Source tools to easily build and maintain your event-driven architecture. All powered by the AsyncAPI specification, the industry standard for defining asynchronous APIs." | ||
| }, | ||
| "infra-as-code": { | ||
| "name": "Infrastructure as Code", | ||
| "description": "Open-Source tools to easily build and maintain your event-driven architecture. All powered by the AsyncAPI specification, the industry standard for defining asynchronous APIs." | ||
| }, | ||
| "governance-consistency": { | ||
| "name": "Governance & Consistency", | ||
| "description": "Open-Source tools to easily build and maintain your event-driven architecture. All powered by the AsyncAPI specification, the industry standard for defining asynchronous APIs." | ||
| }, | ||
| "developer-portal": { | ||
| "name": "Developer Portal", | ||
| "description": "Open-Source tools to easily build and maintain your event-driven architecture. All powered by the AsyncAPI specification, the industry standard for defining asynchronous APIs." | ||
| }, | ||
| "read-more": "Read More" |
There was a problem hiding this comment.
German translations needed for features section.
The entire features section needs to be translated to German, including:
- Title and description
- All feature names and descriptions
- "Read More" text
Additionally, as noted in the English file review, each feature should have a unique description once translated.
Example translation for the title:
-"title": "What You Can Use AsyncAPI For",
+"title": "Wofür Sie AsyncAPI verwenden können",Committable suggestion skipped: line range outside the PR's diff.
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## master #3600 +/- ##
=========================================
Coverage 100.00% 100.00%
=========================================
Files 20 20
Lines 732 732
=========================================
Hits 732 732 ☔ View full report in Codecov by Sentry. |
There was a problem hiding this comment.
Actionable comments posted: 3
🧹 Nitpick comments (4)
components/features/FeatureList.ts (2)
17-21: Consider using specific labels instead of generic 'read-more'All features use the same generic 'features.read-more' label. Consider using feature-specific labels to provide better context and improve accessibility.
Example improvement:
- label: 'features.read-more', + label: `features.${id}.read-more`,Also applies to: 26-30, 35-39, 44-48, 53-57, 62-66
15-66: Ensure consistent naming conventionsThe feature names and IDs follow different casing conventions:
- IDs use kebab-case: 'costs-control'
- Names use Title Case: 'Costs Control'
This is correct, but document these conventions in the codebase to maintain consistency as new features are added.
components/sponsors/DiamondSponsors.tsx (1)
29-34: Consider adding loading state for sponsor images.Add loading="lazy" to the img tag for better performance, especially since these images are likely to be below the fold.
<img className={sponsor?.imageClass} src={sponsor.imageSrc} alt={sponsor.altText} + loading="lazy" data-testid='Sponsors-img' />pages/[lang]/index.tsx (1)
35-38: Prevent layout shift from image loading.Add width and height attributes to the image to prevent layout shift during loading.
- <img className='mr-4 h-8 w-auto' src='/img/logos/LFX.svg' alt='Linux Foundation' /> + <img className='mr-4 h-8 w-auto' src='/img/logos/LFX.svg' alt='Linux Foundation' width="32" height="32" />
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (11)
components/CaseStudyCard.tsx(1 hunks)components/CodeAnimation/AsyncAPIcontent.tsx(1 hunks)components/CodeAnimation/CodeGeneration.tsx(1 hunks)components/CodeAnimation/DemoAnimation.tsx(1 hunks)components/CodeAnimation/Documentation.tsx(1 hunks)components/Hero.tsx(2 hunks)components/SupportUs/SupportUs.tsx(2 hunks)components/features/FeatureList.ts(1 hunks)components/features/index.tsx(1 hunks)components/sponsors/DiamondSponsors.tsx(1 hunks)pages/[lang]/index.tsx(2 hunks)
✅ Files skipped from review due to trivial changes (1)
- components/CaseStudyCard.tsx
🚧 Files skipped from review as they are similar to previous changes (5)
- components/CodeAnimation/CodeGeneration.tsx
- components/CodeAnimation/Documentation.tsx
- components/CodeAnimation/AsyncAPIcontent.tsx
- components/SupportUs/SupportUs.tsx
- components/features/index.tsx
🔇 Additional comments (5)
components/features/FeatureList.ts (2)
19-19: Documentation paths do not match repository structureThe documentation paths need to be updated to match the actual repository structure.
Also applies to: 28-28, 37-37, 46-46, 55-55, 64-64
9-10: Breaking change: Feature interface modificationThe change from
links[]to a singlelinkproperty simplifies the interface but is a breaking change. Ensure all consumers of this interface are updated accordingly.Let's verify the impact:
components/sponsors/DiamondSponsors.tsx (1)
5-16: LGTM! Well-structured component with clear documentation.The component has:
- Clear prop types with optional parameters
- Proper JSDoc documentation
- Good default values
components/CodeAnimation/DemoAnimation.tsx (1)
35-40: 🛠️ Refactor suggestionLocalize hardcoded strings.
The heading and description text should be moved to translation files for better internationalization support.
- <h1 className='mb-2 text-center text-2xl font-medium'>Sneak Peek Into The Real Process</h1> - <p className='mb-6 text-center text-sm text-gray-600'> - One of our main goals is to improve the current state of Event - <br /> - Driven Architecture (EDA!) - </p> + <h1 className='mb-2 text-center text-2xl font-medium'>{t('landing-page.demo.title')}</h1> + <p className='mb-6 text-center text-sm text-gray-600'>{t('landing-page.demo.description')}</p>Likely invalid or redundant comment.
components/Hero.tsx (1)
54-54: 🛠️ Refactor suggestionImprove accessibility of "OR" text.
Using plain text for the separator affects screen reader experience.
- <span className='m-2 text-lg font-medium'>OR</span> + <span className='m-2 text-lg font-medium' aria-hidden="true">OR</span> + <span className="sr-only">or choose another option</span>Likely invalid or redundant comment.
| const renderContent = () => { | ||
| switch (activeTab) { | ||
| case 'Code Generation': | ||
| return renderCodeGeneration() || <p>No content available</p>; | ||
| case 'Documentation': | ||
| return renderDocumentation() || <p>No content available</p>; | ||
| default: | ||
| return renderAsyncAPIContent() || <p>No content available</p>; | ||
| } | ||
| }; |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Add error boundaries for render functions.
The render functions should be wrapped in error boundaries to gracefully handle rendering failures.
const renderContent = () => {
+ try {
switch (activeTab) {
case 'Code Generation':
return renderCodeGeneration() || <p>No content available</p>;
case 'Documentation':
return renderDocumentation() || <p>No content available</p>;
default:
return renderAsyncAPIContent() || <p>No content available</p>;
}
+ } catch (error) {
+ console.error('Failed to render tab content:', error);
+ return <p>Failed to load content</p>;
+ }
};📝 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.
| const renderContent = () => { | |
| switch (activeTab) { | |
| case 'Code Generation': | |
| return renderCodeGeneration() || <p>No content available</p>; | |
| case 'Documentation': | |
| return renderDocumentation() || <p>No content available</p>; | |
| default: | |
| return renderAsyncAPIContent() || <p>No content available</p>; | |
| } | |
| }; | |
| const renderContent = () => { | |
| try { | |
| switch (activeTab) { | |
| case 'Code Generation': | |
| return renderCodeGeneration() || <p>No content available</p>; | |
| case 'Documentation': | |
| return renderDocumentation() || <p>No content available</p>; | |
| default: | |
| return renderAsyncAPIContent() || <p>No content available</p>; | |
| } | |
| } catch (error) { | |
| console.error('Failed to render tab content:', error); | |
| return <p>Failed to load content</p>; | |
| } | |
| }; |
| href='#' | ||
| aria-disabled='true' | ||
| aria-label='Subscribe to our updates' | ||
| data-testid='Subscribe-Button' |
There was a problem hiding this comment.
Fix empty href in Subscribe button.
The Subscribe button has a placeholder href which could lead to poor user experience.
Either:
- Remove the button if the feature isn't ready
- Or implement proper href/onClick handler
- Or add a disabled state with proper styling
| className='bg-primary-500 text-white hover:bg-primary-400' | ||
| href='https://calendar.google.com/calendar/u/3?cid=Y19xOXRzZWlnbG9tZHNqNm5qdWh2YnB0czExY0Bncm91cC5jYWxlbmRhci5nb29nbGUuY29t' | ||
| /> | ||
| <h1 className='m-2'>OR</h1> |
There was a problem hiding this comment.
Fix incorrect heading level.
Using h1 for the "OR" separator is semantically incorrect and affects document outline.
- <h1 className='m-2'>OR</h1>
+ <span className='m-2 text-lg font-medium' aria-hidden="true">OR</span>
+ <span className="sr-only">or choose another option</span>📝 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.
| <h1 className='m-2'>OR</h1> | |
| <span className='m-2 text-lg font-medium' aria-hidden="true">OR</span> | |
| <span className="sr-only">or choose another option</span> |
|
@vishvamsinh28 @derberg @anshgoyalevil Please make sure that we won't be merging this PR directly to the master, as theme of the website has to be changed. We can't change the homepage of the website only. @vishvamsinh28 The ideal way to change the theme of the website would be to configure the tailwindcss with updated design from Figma, and then start changing other pages. |
|
@akshatnema Okay. I just need a design review on this PR because the code part is not complete. @derberg mentioned that he will contribute to this PR with links, card content, etc., and translations are also pending. For the other pages, should I open separate PRs or make the design changes in the same ? |
This PR implements the redesign of the homepage. I have completed the design part, but the work isn't over. I need to add links in a few places. We also need to replace content in some areas, such as the animation and feature cards. Additionally, we need to update the translations. What should be placed in these areas? And lighthouse check is failing.
Once I receive the links, translations, card content, and animation content, I can open child issues and PRs for this, which will make it easier for maintainers to review them. Alternatively, I'm okay with submitting a single PR as well. Everyone can view the deploy preview to see the new design
@derberg @Mayaleeeee @akshatnema @anshgoyalevil
#3192
Summary by CodeRabbit
Release Notes
New Features
DemoAnimationcomponent with interactive tabs for AsyncAPI Document, Code Generation, and Documentation.DiamondSponsorscomponent to showcase and support key sponsors.UI/UX Changes
Localization
Chores