fix: correct alignment and navbar overlap in generator page #4412
Conversation
mahesh-gsoc-dev
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. |
WalkthroughThis PR adjusts layout spacing and markup. GenericLayout increases AnnouncementHero’s top margin while keeping banner visibility logic unchanged. The Generator page undergoes JSX formatting refactors and a minor layout tweak adding ml-8 to the renderButtons container. No exported/public APIs change. Changes
Sequence Diagram(s)Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Possibly related PRs
Suggested labels
Suggested reviewers
Pre-merge checks (4 passed, 1 warning)❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
Poem
Tip 👮 Agentic pre-merge checks are now available in preview!Pro plan users can now enable pre-merge checks in their settings to enforce checklists before merging PRs.
Please see the documentation for more information. Example: reviews:
pre_merge_checks:
custom_checks:
- name: "Undocumented Breaking Changes"
mode: "warning"
instructions: |
Pass/fail criteria: All breaking changes to public APIs, CLI flags, environment variables, configuration keys, database schemas, or HTTP/GraphQL endpoints must be documented in the "Breaking Change" section of the PR description and in CHANGELOG.md. Exclude purely internal or private changes (e.g., code not exported from package entry points or explicitly marked as internal).Please share your feedback with us on this Discord post. ✨ Finishing touches
🧪 Generate unit tests
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 |
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
There was a problem hiding this comment.
Welcome to AsyncAPI. Thanks a lot for creating your first pull request. Please check out our contributors guide useful for opening a pull request.
Keep in mind there are also other channels you can use to interact with AsyncAPI community. For more details check out this issue.
asyncapi-bot
requested review from
CBID2,
bandantonio,
devilkiller-ag and
vishvamsinh28
mahesh-gsoc-dev
changed the title
mahesh-gsoc-dev
changed the title
|
⚡️ Lighthouse report for the changes in this PR:
Lighthouse ran on https://deploy-preview-4412--asyncapi-website.netlify.app/ |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 7
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
pages/tools/generator.tsx (1)
21-39: Fix jsx-quotes and improve copy on GitHub label (CI blocker + nit).Repo enforces single quotes in JSX. Also use the correct “GitHub” capitalization.
- <div className="mt-8 flex flex-wrap gap-4"> + <div className='mt-8 flex flex-wrap gap-4'> ... - <GithubButton - text="View on Github" - className="w-full text-center sm:w-fit sm:text-left" - href="https://www.github.com/asyncapi/generator" - /> + <GithubButton + text='View on GitHub' + className='w-full text-center sm:w-fit sm:text-left' + href='https://www.github.com/asyncapi/generator' + /> - <Button - text="View Docs" - href="/docs/tools/generator" - className="w-full text-center sm:w-fit sm:text-left" - /> + <Button + text='View Docs' + href='/docs/tools/generator' + className='w-full text-center sm:w-fit sm:text-left' + />
🧹 Nitpick comments (3)
components/layout/GenericLayout.tsx (1)
46-46: Consider using clsx/twMerge for safer class composition.This keeps class lists clean and avoids conflicts. Optional if you prefer the ternary.
+ import { twMerge } from 'tailwind-merge'; + import clsx from 'clsx'; ... - className={`m-4 text-center ${hideBanner ? 'hidden' : 'mt-6'}`} + className={twMerge('m-4 text-center', clsx({ hidden: hideBanner, 'mt-6': !hideBanner }))}pages/tools/generator.tsx (2)
200-200: Avoid hard-coded left margin on mobile; make it responsive.
ml-8on the base breakpoint can misalign buttons on small screens.- <div className="mt-16 ml-8 text-center">{renderButtons()}</div> + <div className='mt-16 text-center md:ml-0 lg:ml-8'>{renderButtons()}</div>
21-21: One-shot lint fix suggestion (optional).If you prefer a single patch, apply all jsx-quotes and small text fixes across the changed ranges.
I can push a unified patch if you enable maintainers to edit.
Also applies to: 30-32, 34-34, 59-61, 65-66, 73-75, 81-82, 91-93, 99-101, 104-110, 114-116, 120-123, 131-134, 139-141, 146-148, 157-160, 165-167, 171-174, 186-189, 191-195, 200-200
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
components/layout/GenericLayout.tsx(1 hunks)pages/tools/generator.tsx(3 hunks)
🧰 Additional context used
🧬 Code graph analysis (2)
components/layout/GenericLayout.tsx (1)
components/campaigns/AnnouncementHero.tsx (1)
AnnouncementHero(21-112)
pages/tools/generator.tsx (8)
components/buttons/Button.tsx (1)
Button(53-106)components/layout/GenericLayout.tsx (1)
GenericLayout(25-56)components/typography/Heading.tsx (1)
Heading(30-85)components/typography/Paragraph.tsx (1)
Paragraph(28-56)components/GeneratorInstallation.tsx (1)
GeneratorInstallation(23-98)components/icons/Documents.tsx (1)
IconDocuments(7-13)components/icons/Code.tsx (1)
IconCode(7-13)components/icons/PowerPlug.tsx (1)
IconPowerPlug(7-13)
🪛 GitHub Actions: PR testing - if Node project
components/layout/GenericLayout.tsx
[error] 32-32: Delete , (prettier/prettier)
[error] 32-32: Prettier: Unexpected trailing comma. (comma-dangle)
[error] 35-35: Prettier: Props 'title', 'description', and 'image' are required at GenericLayout component. (prettier/prettier)
[error] 50-50: Prettier: Use single quotes for string: 'GenericLayout'.
pages/tools/generator.tsx
[error] 21-21: Prettier: Replace 'mt-8 flex flex-wrap gap-4' with 'mt-8 flex flex-wrap gap-4'. (prettier/prettier)
[error] 21-21: JSX quotes: Unexpected usage of double quotes. (jsx-quotes)
[error] 30-30: Prettier: Replace 'View on Github' with 'View on Github'. (prettier/prettier)
[error] 30-30: JSX quotes: Unexpected usage of double quotes. (jsx-quotes)
[error] 31-31: Prettier: Replace 'w-full text-center sm:w-fit sm:text-left' with 'w-full text-center sm:w-fit sm:text-left'. (prettier/prettier)
[error] 31-31: JSX quotes: Unexpected usage of double quotes. (jsx-quotes)
[error] 32-32: Prettier: Replace 'https://www.github.com/asyncapi/generator' with 'https://www.github.com/asyncapi/generator'. (prettier/prettier)
[error] 32-32: JSX quotes: Unexpected usage of double quotes. (jsx-quotes)
[error] 34-34: Prettier: Format multi-line JSX snippet. (prettier/prettier)
[error] 34-34: JSX quotes: Unexpected usage of double quotes. (jsx-quotes)
[error] 59-59: Prettier: Replace 'overflow-hidden py-12' with 'overflow-hidden py-12'. (prettier/prettier)
[error] 60-60: Prettier: Replace 'relative mx-auto max-w-xl px-4 sm:px-6 lg:max-w-screen-xl lg:px-8' with 'relative mx-auto max-w-xl px-4 sm:px-6 lg:max-w-screen-xl lg:px-8'. (prettier/prettier)
[error] 61-61: Prettier: Replace 'relative text-center' with 'relative text-center'. (prettier/prettier)
[error] 65-65: Prettier: Replace 'mt-4' with 'mt-4'. (prettier/prettier)
[error] 66-66: JSX quotes: Unexpected usage of double quotes. (jsx-quotes)
🔇 Additional comments (2)
components/layout/GenericLayout.tsx (1)
46-49: Action: ensure pages that hide the AnnouncementHero also get top padding to avoid navbar overlapAnnouncementHero's m-4 mt-6 is ineffective when hideBanner=true (element gets 'hidden'); add equivalent top padding to main-content on pages that hide the banner or preserve spacing while visually hiding it.
Found: pages/community/ambassadors/[id].tsx sets hideBanner={true} (line 67); pages/casestudies/[id].tsx sets hideBanner={false} (line 193); GenericLayout default hideBanner=false (components/layout/GenericLayout.tsx:32).pages/tools/generator.tsx (1)
1-204: Quick CI verification — manual verification required (sandbox lint failed)Sandbox lint failed with "next: not found" (no lint output). Run locally and fix regressions: pnpm -s lint || npm run -s lint || yarn -s lint
- Visual QA (check locally / on preview): breakpoints 375px, 414px, 768px, 1024px, 1280px — navbar must not overlap hero/main content; top and bottom "View on GitHub" / "View Docs" align consistently.
- Ensure no horizontal scrollbars.
- Re-run Lighthouse: confirm Performance improvement (images lazy-loaded) and no Accessibility regressions.
| // eslint-disable-next-line unused-imports/no-unused-vars, no-unused-vars | ||
| hideBanner = false | ||
| hideBanner = false, | ||
| }: IGenericLayoutProps) { |
There was a problem hiding this comment.
Remove unnecessary ESLint disable and trailing comma in props destructuring (CI blocker).
hideBanner is used; the disable is redundant. Also, the trailing comma after the last prop violates the repo’s Prettier config.
Apply:
- // eslint-disable-next-line unused-imports/no-unused-vars, no-unused-vars
- hideBanner = false,
+ hideBanner = false📝 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.
| // eslint-disable-next-line unused-imports/no-unused-vars, no-unused-vars | |
| hideBanner = false | |
| hideBanner = false, | |
| }: IGenericLayoutProps) { | |
| hideBanner = false | |
| }: IGenericLayoutProps) { |
🧰 Tools
🪛 GitHub Actions: PR testing - if Node project
[error] 32-32: Delete , (prettier/prettier)
[error] 32-32: Prettier: Unexpected trailing comma. (comma-dangle)
🤖 Prompt for AI Agents
In components/layout/GenericLayout.tsx around lines 31 to 33, remove the
unnecessary ESLint disable comment and the trailing comma in the props
destructuring: delete the "// eslint-disable-next-line
unused-imports/no-unused-vars, no-unused-vars" line since hideBanner is actually
used, and remove the comma after "hideBanner = false" so the destructuring
conforms to Prettier and CI rules.
| throw new Error( | ||
| 'Props `title`, `description`, and `image` are required at GenericLayout component.', | ||
| ); |
There was a problem hiding this comment.
Fix trailing comma in new Error(...) call (CI blocker).
Prettier flags the dangling comma in a single-argument call.
- throw new Error(
- 'Props `title`, `description`, and `image` are required at GenericLayout component.',
- );
+ throw new Error(
+ 'Props `title`, `description`, and `image` are required at GenericLayout component.'
+ );📝 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.
| throw new Error( | |
| 'Props `title`, `description`, and `image` are required at GenericLayout component.', | |
| ); | |
| throw new Error( | |
| 'Props `title`, `description`, and `image` are required at GenericLayout component.' | |
| ); |
🧰 Tools
🪛 GitHub Actions: PR testing - if Node project
[error] 35-35: Prettier: Props 'title', 'description', and 'image' are required at GenericLayout component. (prettier/prettier)
🤖 Prompt for AI Agents
In components/layout/GenericLayout.tsx around lines 35 to 37, the throw new
Error(...) call contains a trailing comma after the single string argument which
Prettier rejects; remove the dangling comma so the Error constructor is called
with a single string literal (no trailing comma) or collapse the string to one
line, ensuring no extra punctuation remains.
|
|
||
| return ( | ||
| <div data-testid='GenericLayout'> | ||
| <div data-testid="GenericLayout"> |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Use single quotes in JSX attributes per repo style (CI blocker) and fix className boolean interpolation.
Switch JSX attributes to single quotes. Also avoid injecting a literal "false" into className; use a ternary.
- <div data-testid="GenericLayout">
+ <div data-testid='GenericLayout'>
...
- <div data-testid="GenericLayout-banner">
+ <div data-testid='GenericLayout-banner'>
<AnnouncementHero
- className={`m-4 mt-6 text-center ${hideBanner && 'hidden'}`}
- small={true}
+ className={`m-4 text-center ${hideBanner ? 'hidden' : 'mt-6'}`}
+ small
/>
</div>
- <div id="main-content" data-testid="Generic-main">
+ <div
+ id='main-content'
+ data-testid='Generic-main'
+ className={hideBanner ? 'pt-16 md:pt-20' : ''}
+ >- The added conditional top padding ensures content isn’t overlapped by a fixed navbar when the banner is hidden.
Also applies to: 44-49, 50-50
🤖 Prompt for AI Agents
In components/layout/GenericLayout.tsx around lines 41 (and also 44-49, 50), JSX
attributes must use single quotes and the current className is interpolating a
boolean which can inject the literal "false"; change attribute quotes to single
quotes and replace boolean interpolation with a ternary expression that returns
either the padding class string or an empty string so className never receives
"false". Ensure all JSX attributes on these lines use single quotes and update
the conditional className logic accordingly.
| <GenericLayout | ||
| title="Generator" | ||
| description={description} | ||
| image={image} | ||
| wide | ||
| > | ||
| <div className="overflow-hidden py-12"> |
There was a problem hiding this comment.
Fix jsx-quotes in GenericLayout usage (CI blocker).
- <GenericLayout
- title="Generator"
- description={description}
- image={image}
- wide
- >
+ <GenericLayout
+ title='Generator'
+ description={description}
+ image={image}
+ wide
+ >📝 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.
| <GenericLayout | |
| title="Generator" | |
| description={description} | |
| image={image} | |
| wide | |
| > | |
| <div className="overflow-hidden py-12"> | |
| <GenericLayout | |
| title='Generator' | |
| description={description} | |
| image={image} | |
| wide | |
| > | |
| <div className="overflow-hidden py-12"> |
🧰 Tools
🪛 GitHub Actions: PR testing - if Node project
[error] 59-59: Prettier: Replace 'overflow-hidden py-12' with 'overflow-hidden py-12'. (prettier/prettier)
🤖 Prompt for AI Agents
In pages/tools/generator.tsx around lines 53 to 59, the GenericLayout JSX usage
is triggering the jsx-quotes lint rule; update the JSX attribute quoting to use
double quotes for literal string props (e.g., title="Generator"), ensure
expression props remain in curly braces (description={description},
image={image}), and remove any single-quoted attribute values or replace boolean
attributes with either the bare attribute (wide) or wide={true} so all JSX
attributes conform to the project's jsx-quotes rule.
| <div className="overflow-hidden py-12"> | ||
| <div className="relative mx-auto max-w-xl px-4 sm:px-6 lg:max-w-screen-xl lg:px-8"> | ||
| <div className="relative text-center"> | ||
| <Heading level={HeadingLevel.h1} typeStyle={HeadingTypeStyle.lg}> | ||
| Docs, Code, Anything! | ||
| </Heading> | ||
| <Paragraph className='mt-4'>{description}</Paragraph> | ||
| <img src={generatorimage} alt='generator diagram' className=' mx-auto h-auto object-cover lg:w-1/2' /> | ||
| <Paragraph className="mt-4">{description}</Paragraph> | ||
| <img | ||
| src={generatorimage} | ||
| alt="generator diagram" | ||
| className=" mx-auto h-auto object-cover lg:w-1/2" | ||
| /> | ||
| </div> |
There was a problem hiding this comment.
Fix jsx-quotes and a stray leading space; keep markup identical.
- <div className="overflow-hidden py-12">
- <div className="relative mx-auto max-w-xl px-4 sm:px-6 lg:max-w-screen-xl lg:px-8">
- <div className="relative text-center">
+ <div className='overflow-hidden py-12'>
+ <div className='relative mx-auto max-w-xl px-4 sm:px-6 lg:max-w-screen-xl lg:px-8'>
+ <div className='relative text-center'>
...
- <Paragraph className="mt-4">{description}</Paragraph>
- <img
- src={generatorimage}
- alt="generator diagram"
- className=" mx-auto h-auto object-cover lg:w-1/2"
- />
+ <Paragraph className='mt-4'>{description}</Paragraph>
+ <img
+ src={generatorimage}
+ alt='generator diagram'
+ className='mx-auto h-auto object-cover lg:w-1/2'
+ />📝 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.
| <div className="overflow-hidden py-12"> | |
| <div className="relative mx-auto max-w-xl px-4 sm:px-6 lg:max-w-screen-xl lg:px-8"> | |
| <div className="relative text-center"> | |
| <Heading level={HeadingLevel.h1} typeStyle={HeadingTypeStyle.lg}> | |
| Docs, Code, Anything! | |
| </Heading> | |
| <Paragraph className='mt-4'>{description}</Paragraph> | |
| <img src={generatorimage} alt='generator diagram' className=' mx-auto h-auto object-cover lg:w-1/2' /> | |
| <Paragraph className="mt-4">{description}</Paragraph> | |
| <img | |
| src={generatorimage} | |
| alt="generator diagram" | |
| className=" mx-auto h-auto object-cover lg:w-1/2" | |
| /> | |
| </div> | |
| <div className='overflow-hidden py-12'> | |
| <div className='relative mx-auto max-w-xl px-4 sm:px-6 lg:max-w-screen-xl lg:px-8'> | |
| <div className='relative text-center'> | |
| <Heading level={HeadingLevel.h1} typeStyle={HeadingTypeStyle.lg}> | |
| Docs, Code, Anything! | |
| </Heading> | |
| <Paragraph className='mt-4'>{description}</Paragraph> | |
| <img | |
| src={generatorimage} | |
| alt='generator diagram' | |
| className='mx-auto h-auto object-cover lg:w-1/2' | |
| /> | |
| </div> |
🧰 Tools
🪛 GitHub Actions: PR testing - if Node project
[error] 59-59: Prettier: Replace 'overflow-hidden py-12' with 'overflow-hidden py-12'. (prettier/prettier)
[error] 60-60: Prettier: Replace 'relative mx-auto max-w-xl px-4 sm:px-6 lg:max-w-screen-xl lg:px-8' with 'relative mx-auto max-w-xl px-4 sm:px-6 lg:max-w-screen-xl lg:px-8'. (prettier/prettier)
[error] 61-61: Prettier: Replace 'relative text-center' with 'relative text-center'. (prettier/prettier)
[error] 65-65: Prettier: Replace 'mt-4' with 'mt-4'. (prettier/prettier)
[error] 66-66: JSX quotes: Unexpected usage of double quotes. (jsx-quotes)
🤖 Prompt for AI Agents
In pages/tools/generator.tsx around lines 59 to 71, the img element has a stray
leading space in its className value and violates jsx-quotes; remove the leading
space so the className reads "mx-auto h-auto object-cover lg:w-1/2" (ensuring
double quotes are used consistently for JSX attributes) and keep the markup
otherwise identical.
| <div className="relative mt-12 lg:mt-20 lg:grid lg:grid-cols-2 lg:items-center lg:gap-8"> | ||
| <div className="relative lg:mt-8"> | ||
| <Heading | ||
| level={HeadingLevel.h2} | ||
| typeStyle={HeadingTypeStyle.mdSemibold} | ||
| > | ||
| Installation & Usage | ||
| </Heading> | ||
| <Paragraph className='mt-3 lg:pr-4'> | ||
| Start using Generator really quickly. Select one of the multiple templates we offer and start generating | ||
| documentation and code in a few seconds. | ||
| <Paragraph className="mt-3 lg:pr-4"> | ||
| Start using Generator really quickly. Select one of the multiple | ||
| templates we offer and start generating documentation and code | ||
| in a few seconds. | ||
| </Paragraph> | ||
| {renderButtons()} |
There was a problem hiding this comment.
Fix jsx-quotes across feature sections (CI blocker).
No functional change; just align with lint rules.
- <div className="relative mt-12 lg:mt-20 lg:grid lg:grid-cols-2 lg:items-center lg:gap-8">
- <div className="relative lg:mt-8">
+ <div className='relative mt-12 lg:mt-20 lg:grid lg:grid-cols-2 lg:items-center lg:gap-8'>
+ <div className='relative lg:mt-8'>
...
- <Paragraph className="mt-3 lg:pr-4">
+ <Paragraph className='mt-3 lg:pr-4'>
...
- <Paragraph className="mt-3 lg:pr-4">
+ <Paragraph className='mt-3 lg:pr-4'>
...
- <ul className="mt-10 lg:pr-4">
+ <ul className='mt-10 lg:pr-4'>
...
- <div className="shrink-0">
- <div className="flex size-12 items-center justify-center rounded-md border border-gray-900 bg-secondary-100 text-gray-900">
- <IconDocuments className="size-6" />
+ <div className='shrink-0'>
+ <div className='flex size-12 items-center justify-center rounded-md border border-gray-900 bg-secondary-100 text-gray-900'>
+ <IconDocuments className='size-6' />
...
- <div className="ml-4">
+ <div className='ml-4'>
...
- <Paragraph
- typeStyle={ParagraphTypeStyle.md}
- className="mt-2"
- >
+ <Paragraph
+ typeStyle={ParagraphTypeStyle.md}
+ className='mt-2'
+ >
...
- <li className="mt-10">
+ <li className='mt-10'>
...
- <div className="flex size-12 items-center justify-center rounded-md border border-gray-900 bg-secondary-100 text-gray-900">
- <IconCode className="size-6" />
+ <div className='flex size-12 items-center justify-center rounded-md border border-gray-900 bg-secondary-100 text-gray-900'>
+ <IconCode className='size-6' />
...
- <div className="ml-4">
+ <div className='ml-4'>
...
- <Paragraph
- typeStyle={ParagraphTypeStyle.md}
- className="mt-2"
- >
+ <Paragraph
+ typeStyle={ParagraphTypeStyle.md}
+ className='mt-2'
+ >
...
- <li className="mt-10">
+ <li className='mt-10'>
...
- <div className="flex size-12 items-center justify-center rounded-md border border-gray-900 bg-secondary-100 text-gray-900">
- <IconPowerPlug className="size-6" />
+ <div className='flex size-12 items-center justify-center rounded-md border border-gray-900 bg-secondary-100 text-gray-900'>
+ <IconPowerPlug className='size-6' />
...
- <div className="ml-4">
+ <div className='ml-4'>
...
- <Paragraph
- typeStyle={ParagraphTypeStyle.md}
- className="mt-2"
- >
+ <Paragraph
+ typeStyle={ParagraphTypeStyle.md}
+ className='mt-2'
+ >Also applies to: 91-103, 104-129, 131-156, 157-181
🤖 Prompt for AI Agents
In pages/tools/generator.tsx around lines 73-86 (also apply to 91-103, 104-129,
131-156, 157-181): fix lint failures for the jsx-quotes rule by normalizing all
JSX attribute string quotes to the project's expected style (use double quotes
for literal JSX attributes), leaving JS expressions and template literals
unchanged; update any JSX prop values and className strings that use single
quotes to use double quotes, and run the linter to confirm no remaining
jsx-quotes violations.
| <div className="relative -mx-4 mt-10 lg:mt-0"> | ||
| <img | ||
| className="relative mx-auto rounded shadow-lg" | ||
| src="/img/tools/generator-1.png" | ||
| alt="" | ||
| /> | ||
| <img | ||
| className="relative mx-auto mt-8 rounded shadow-lg" | ||
| src="/img/tools/generator-2.png" | ||
| alt="" | ||
| /> | ||
| </div> |
There was a problem hiding this comment.
Lazy-load below-the-fold images and fix jsx-quotes (perf + CI).
Improves Lighthouse Performance without changing layout.
- <div className="relative -mx-4 mt-10 lg:mt-0">
- <img
- className="relative mx-auto rounded shadow-lg"
- src="/img/tools/generator-1.png"
- alt=""
- />
- <img
- className="relative mx-auto mt-8 rounded shadow-lg"
- src="/img/tools/generator-2.png"
- alt=""
- />
+ <div className='relative -mx-4 mt-10 lg:mt-0'>
+ <img
+ className='relative mx-auto rounded shadow-lg'
+ src='/img/tools/generator-1.png'
+ alt='AsyncAPI Generator screenshot 1'
+ loading='lazy'
+ decoding='async'
+ />
+ <img
+ className='relative mx-auto mt-8 rounded shadow-lg'
+ src='/img/tools/generator-2.png'
+ alt='AsyncAPI Generator screenshot 2'
+ loading='lazy'
+ decoding='async'
+ />📝 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.
| <div className="relative -mx-4 mt-10 lg:mt-0"> | |
| <img | |
| className="relative mx-auto rounded shadow-lg" | |
| src="/img/tools/generator-1.png" | |
| alt="" | |
| /> | |
| <img | |
| className="relative mx-auto mt-8 rounded shadow-lg" | |
| src="/img/tools/generator-2.png" | |
| alt="" | |
| /> | |
| </div> | |
| <div className='relative -mx-4 mt-10 lg:mt-0'> | |
| <img | |
| className='relative mx-auto rounded shadow-lg' | |
| src='/img/tools/generator-1.png' | |
| alt='AsyncAPI Generator screenshot 1' | |
| loading='lazy' | |
| decoding='async' | |
| /> | |
| <img | |
| className='relative mx-auto mt-8 rounded shadow-lg' | |
| src='/img/tools/generator-2.png' | |
| alt='AsyncAPI Generator screenshot 2' | |
| loading='lazy' | |
| decoding='async' | |
| /> | |
| </div> |
🤖 Prompt for AI Agents
In pages/tools/generator.tsx around lines 185 to 196, add lazy-loading to the
below-the-fold images and ensure JSX attribute quotes match the project's
jsx-quotes rule; specifically, add loading="lazy" to each <img> element to defer
offscreen image loading and update any JSX attribute quoting to the configured
style (e.g., double quotes) so the linter passes, then run the linter/formatter
to confirm no remaining jsx-quotes errors.
2 participants
Description
This PR fixes the margin and alignment issue in the tools page where the navbar overlaps the hero/card section and buttons appear misaligned at bottom of the generator page.
Ensures proper spacing between the navbar and carousel/card.
Corrects button alignment for consistent rendering across devices (desktop + mobile).
Adds responsive adjustments so that layout behaves as expected on different screen sizes.
Related issue(s)
Closes #4381
Notes
There is another PRs (#4390) ,(#4391),( #4406 ) attempting to resolve the same issue. However, that implementation doesn’t fully solve the margin/overlap problem across devices.
This PR provides a complete solution by addressing:
Top margin for the hero/card under the navbar.
Alignment of buttons in the generator page.
Cross-device consistency (desktop + mobile).
Before
After
Summary by CodeRabbit
Style
Refactor