fix: #4381 make the buttons responsive #4390
Conversation
Priyank0703
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. |
WalkthroughAdded a Next.js route types reference to next-env.d.ts and adjusted JSX/layout classes in pages/tools/generator.tsx to modify spacing and alignment of UI elements, including responsive container classes around the action buttons. No functional logic or exported API changes. Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Assessment against linked issues
Assessment against linked issues: Out-of-scope changes
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
✨ 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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. CodeRabbit Commands (Invoked using PR/Issue comments)Type Other keywords and placeholders
Status, Documentation and Community
|
|
⚡️ Lighthouse report for the changes in this PR:
Lighthouse ran on https://deploy-preview-4390--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: 4
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)
1-1: Remove unused React value import (likely causing ESLint error).You’re only using the React namespace as a type in
renderButtons. With the automatic JSX runtime, the value import isn’t needed and will tripno-unused-vars.-import React from 'react'; +// React import not required with the automatic JSX runtime
🧹 Nitpick comments (4)
next-env.d.ts (1)
3-3: Typed routes reference is brittle; prefer the recommended pattern.Hardcoding
./.next/types/routes.d.tsmay break when Next updates the generated types. Use the Next.js recommended reference so all generated route type files are picked up.Consider this change:
-/// <reference path="./.next/types/routes.d.ts" /> +/// <reference path="./.next/types/**/*.ts" />Please confirm your Next.js version supports typed routes and that CI/type-checks pass with this reference.
pages/tools/generator.tsx (3)
65-71: Alt text: make it descriptive or mark decorative.“generator diagram” is vague. Either describe the content or set
alt=""if the image is decorative and already explained by nearby headings.Example:
- alt="generator diagram" + alt="AsyncAPI Generator architecture diagram" # or - alt="generator diagram" + alt=""
104-112: Decorative icons should be hidden from assistive tech.These icons are purely visual; add
aria-hidden="true"on the SVGs to reduce noise for screen readers. This requires updating the icon components to forward props.Proposed change in each icon component (e.g., components/icons/Documents.tsx):
-export default function IconDocuments({ className = '' }) { +export default function IconDocuments({ className = '', ...props }) { return ( - <svg className={className || 'inline-block'} fill='currentColor' viewBox='0 0 20 20'> + <svg + className={className || 'inline-block'} + fill='currentColor' + viewBox='0 0 20 20' + aria-hidden='true' + focusable='false' + {...props} + >I can open a follow-up PR if you like.
Also applies to: 131-136, 157-163
21-21: Optional: center buttons on mobile for consistency with the bottom CTA.This matches the bottom section’s centering and looks better on narrow screens.
- <div className="mt-8 flex flex-wrap gap-4"> + <div className="mt-8 flex flex-wrap justify-center gap-4 sm:justify-start">
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
💡 Knowledge Base configuration:
- MCP integration is disabled by default for public repositories
- Jira integration is disabled by default for public repositories
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (2)
next-env.d.ts(1 hunks)pages/tools/generator.tsx(3 hunks)
🧰 Additional context used
🧬 Code graph analysis (1)
pages/tools/generator.tsx (8)
components/buttons/Button.tsx (1)
Button(53-106)components/layout/GenericLayout.tsx (1)
GenericLayout(25-51)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
pages/tools/generator.tsx
[error] 21-200: Prettier/ESLint formatting errors detected in pages/tools/generator.tsx. Run 'prettier --write' and fix ESLint issues.
⏰ Context from checks skipped due to timeout of 180000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: Lighthouse CI
🔇 Additional comments (3)
pages/tools/generator.tsx (3)
21-39: Nice: responsive button layout reads well.
w-fullon mobile andsm:w-fitwith flex/gap achieves the objective of responsive stacking and spacing.
200-203: Good: repeated CTA is centered on small screens.
sm:flex sm:justify-centerplus the innerw-full/sm:w-fitgives consistent alignment across breakpoints.
29-33: No changes needed for GitHub button link behavior
GithubButtonalready defaults totarget="_blank", and the underlyingButtoncomponent renders links withrel="noopener noreferrer".
| function renderButtons(): React.JSX.Element { | ||
| return ( |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Drop explicit React.JSX.Element return type or switch to a type-only import.
Avoid pulling in a value import just for the type. Keep it simple and let TS infer the return type.
-function renderButtons(): React.JSX.Element {
+function renderButtons() {Alternatively:
- import React from 'react';
+ import type { JSX } from 'react';
- function renderButtons(): React.JSX.Element {
+ function renderButtons(): JSX.Element {📝 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.
| function renderButtons(): React.JSX.Element { | |
| return ( | |
| function renderButtons() { | |
| return ( |
🤖 Prompt for AI Agents
In pages/tools/generator.tsx around lines 19-20, remove the explicit value
import-based return type "React.JSX.Element" from the renderButtons signature so
TypeScript infers the return type (i.e., change to function renderButtons() {
... }), or if you must keep an explicit type, replace the value import with a
type-only import and use a type from React (e.g., import type { JSX } from
'react' and annotate as (): JSX.Element) — implement one of these two fixes and
ensure no runtime value import is pulled in solely for typing.
| text="View on Github" | ||
| className="w-full text-center sm:w-fit sm:text-left" |
There was a problem hiding this comment.
Fix brand capitalization: GitHub.
User-facing copy should use “GitHub”.
- text="View on Github"
+ text="View on GitHub"📝 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.
| text="View on Github" | |
| className="w-full text-center sm:w-fit sm:text-left" | |
| text="View on GitHub" | |
| className="w-full text-center sm:w-fit sm:text-left" |
🤖 Prompt for AI Agents
In pages/tools/generator.tsx around lines 30 to 31, the user-facing copy uses
the incorrect brand capitalization "Github"; update the string value to "GitHub"
(e.g., change text="View on Github" to text="View on GitHub") so the UI displays
the correct brand name.
| 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" | ||
| /> |
There was a problem hiding this comment.
💡 Verification agent
🧩 Analysis chain
Verify Tailwind version supports w-fit and align with project’s quote style.
- Ensure Tailwind ≥ v3 for
w-fit. Otherwise usew-auto. - Repo codebase uses single quotes in JSX; this file switched to double quotes and is causing the CI failure.
Run:
🏁 Script executed:
#!/bin/bash
# Check Tailwind version
rg -n '"tailwindcss"\s*:\s*"' -n package.json -C1
# Show Prettier JSX quote setting
rg -n '"jsxSingleQuote"\s*:\s*true' -S --glob '{.prettierrc,.prettierrc.*,package.json}'
# Auto-fix formatting issues in this file
npx prettier --write pages/tools/generator.tsx
npx eslint pages/tools/generator.tsx --fixLength of output: 1056
🏁 Script executed:
#!/bin/bash
set -eux
# List Prettier config files
ls -1 .prettierrc* || true
grep -R '"prettier"' -n package.json || true
# If .prettierrc*.json exists, dump its contents
for file in .prettierrc .prettierrc.json .prettierrc.js .prettierrc.yaml .prettierrc.yml; do
[ -f "$file" ] && echo "==== $file ====" && sed -n '1,200p' "$file"
done
# Inspect quote usage in other JSX/TSX files
echo "---- pages/index.tsx ----"
rg -n "className=" -C2 pages/index.tsx || true
echo "---- components/Header.tsx (if exists) ----"
rg -n "className=" -C2 components/Header.tsx || true
echo "---- pages/tools/generator.tsx ----"
rg -n "className=" -C2 pages/tools/generator.tsx || trueLength of output: 7125
Use single quotes for JSX attributes; Tailwind’s w-fit is supported
- Tailwind CSS is at v3.4.3, so
w-fitis valid—no fallback needed. - In
pages/tools/generator.tsx(lines 31–38), replace double quotes with single quotes to match the rest of the codebase. For example:- className="w-full text-center sm:w-fit sm:text-left" + className='w-full text-center sm:w-fit sm:text-left'
📝 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.
| 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" | |
| /> | |
| 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' | |
| /> |
🤖 Prompt for AI Agents
In pages/tools/generator.tsx around lines 31 to 38, the JSX attributes use
double quotes while the codebase standard is single quotes; update all JSX
attribute strings in this block (className and href values on both Button
components) to use single quotes instead, keeping the same values (retain the
Tailwind w-fit utility as-is).
| <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> |
There was a problem hiding this comment.
Grammar: “seat” → “sit”.
Minor but user-facing.
- that will seat along with your code? Perfect!
+ that will sit alongside your code? Perfect!Also applies to: 124-127
🤖 Prompt for AI Agents
In pages/tools/generator.tsx around lines 81-85 (and also apply same change at
lines 124-127), there is a grammar issue: replace the word "seat" with "sit"
where used in the UI copy; update the text strings accordingly so they read
"sit" instead of "seat" in both locations.
2 participants
fix: #4381
Description
fix: #4381
Summary by CodeRabbit
Style
Refactor
Chores