Skip to content

fix: #4381 make the buttons responsive #4390

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
Priyank0703 wants to merge 1 commit into from
Closed

fix: #4381 make the buttons responsive #4390

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions next-env.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
/// <reference types="next" />
/// <reference types="next/image-types/global" />
/// <reference path="./.next/types/routes.d.ts" />

// NOTE: This file should not be edited
// see https://nextjs.org/docs/pages/api-reference/config/typescript for more information.
168 changes: 111 additions & 57 deletions pages/tools/generator.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ import Paragraph from '../../components/typography/Paragraph';
*/
function renderButtons(): React.JSX.Element {
return (
Comment on lines 19 to 20
Copy link
Contributor

@coderabbitai coderabbitai bot Sep 5, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ 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.

Suggested change
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.

<div className='mt-8 flex flex-wrap gap-4'>
<div className="mt-8 flex flex-wrap gap-4">
{/* <Button
text="Learn more"
href="/docs/tools/generator"
Expand All @@ -27,11 +27,15 @@ function renderButtons(): React.JSX.Element {
className="w-full mb-2 sm:w-auto sm:mb-0 sm:mr-2"
/> */}
<GithubButton
text='View on Github'
className='w-full text-center sm:w-fit sm:text-left'
href='https://www.github.com/asyncapi/generator'
text="View on Github"
className="w-full text-center sm:w-fit sm:text-left"
Comment on lines +30 to +31
Copy link
Contributor

@coderabbitai coderabbitai bot Sep 5, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

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.

Suggested change
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.

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"
/>
Comment on lines +31 to 38
Copy link
Contributor

@coderabbitai coderabbitai bot Sep 5, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Verification agent

🧩 Analysis chain

Verify Tailwind version supports w-fit and align with project’s quote style.

  • Ensure Tailwind ≥ v3 for w-fit. Otherwise use w-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 --fix

Length 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 || true

Length of output: 7125

Use single quotes for JSX attributes; Tailwind’s w-fit is supported

  • Tailwind CSS is at v3.4.3, so w-fit is 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.

Suggested change
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).

<Button text='View Docs' href='/docs/tools/generator' className='w-full text-center sm:w-fit sm:text-left' />
</div>
);
}
Expand All @@ -40,112 +44,162 @@ function renderButtons(): React.JSX.Element {
* @description The Generator page component.
*/
export default function GeneratorPage() {
const description = 'Generate documentation, code, and more out of your AsyncAPI files with the Generator.';
const description =
'Generate documentation, code, and more out of your AsyncAPI files with the Generator.';
const image = '/img/social/generator-card.jpg';
const generatorimage = '/img/diagrams/generator.webp';

return (
<GenericLayout title='Generator' description={description} image={image} wide>
<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'>
<GenericLayout
title="Generator"
description={description}
image={image}
wide
>
<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='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}>
<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>
Comment on lines +81 to 85
Copy link
Contributor

@coderabbitai coderabbitai bot Sep 5, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

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.

{renderButtons()}
</div>

<GeneratorInstallation />

<div className='relative mt-20'>
<Heading level={HeadingLevel.h2} typeStyle={HeadingTypeStyle.mdSemibold}>
<div className="relative mt-20">
<Heading
level={HeadingLevel.h2}
typeStyle={HeadingTypeStyle.mdSemibold}
>
Ready to use
</Heading>
<Paragraph className='mt-3 lg:pr-4'>
The Generator is our solution to automatically generate documentation and code from your AsyncAPI files.
It comes packed with lots of cool features you can&apos;t miss. Have a look!
<Paragraph className="mt-3 lg:pr-4">
The Generator is our solution to automatically generate
documentation and code from your AsyncAPI files. It comes packed
with lots of cool features you can&apos;t miss. Have a look!
</Paragraph>

<ul className='mt-10 lg:pr-4'>
<ul className="mt-10 lg:pr-4">
<li>
<div className='flex'>
<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="flex">
<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>
</div>
<div className='ml-4'>
<div className="ml-4">
{/* <Heading level="h4" typeStyle="heading-sm-semibold"> */}
<Heading level={HeadingLevel.h4} typeStyle={HeadingTypeStyle.smSemibold}>
<Heading
level={HeadingLevel.h4}
typeStyle={HeadingTypeStyle.smSemibold}
>
HTML &amp; Markdown
</Heading>
<Paragraph typeStyle={ParagraphTypeStyle.md} className='mt-2'>
Generate beautiful HTML documentation that&apos;s easy to share with your team and customers.
Markdown docs that will seat along with your code? Perfect!
<Paragraph
typeStyle={ParagraphTypeStyle.md}
className="mt-2"
>
Generate beautiful HTML documentation that&apos;s easy
to share with your team and customers. Markdown docs
that will seat along with your code? Perfect!
</Paragraph>
</div>
</div>
</li>
<li className='mt-10'>
<div className='flex'>
<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'>
<IconCode className='size-6' />
<li className="mt-10">
<div className="flex">
<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">
<IconCode className="size-6" />
</div>
</div>
<div className='ml-4'>
<Heading level={HeadingLevel.h4} typeStyle={HeadingTypeStyle.smSemibold}>
<div className="ml-4">
<Heading
level={HeadingLevel.h4}
typeStyle={HeadingTypeStyle.smSemibold}
>
Node.js, Java, Python, and more...
</Heading>
<Paragraph typeStyle={ParagraphTypeStyle.md} className='mt-2'>
Generate code out of your AsyncAPI files in your favourite programming language. Speed up the
time-to-first-prototype. Keep using it even after you wrote your custom business logic.
<Paragraph
typeStyle={ParagraphTypeStyle.md}
className="mt-2"
>
Generate code out of your AsyncAPI files in your
favourite programming language. Speed up the
time-to-first-prototype. Keep using it even after you
wrote your custom business logic.
</Paragraph>
</div>
</div>
</li>
<li className='mt-10'>
<div className='flex'>
<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'>
<IconPowerPlug className='size-6' />
<li className="mt-10">
<div className="flex">
<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">
<IconPowerPlug className="size-6" />
</div>
</div>
<div className='ml-4'>
<Heading level={HeadingLevel.h4} typeStyle={HeadingTypeStyle.smSemibold}>
<div className="ml-4">
<Heading
level={HeadingLevel.h4}
typeStyle={HeadingTypeStyle.smSemibold}
>
Highly extensible
</Heading>
<Paragraph typeStyle={ParagraphTypeStyle.md} className='mt-2'>
Don&apos;t see your programming language of choice? Want to generate docs that meet your brand
look and feel? Create your custom templates or extend existing ones.
<Paragraph
typeStyle={ParagraphTypeStyle.md}
className="mt-2"
>
Don&apos;t see your programming language of choice? Want
to generate docs that meet your brand look and feel?
Create your custom templates or extend existing ones.
</Paragraph>
</div>
</div>
</li>
</ul>
</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='' />
<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=""
/>
<img
className="relative mx-auto mt-8 rounded shadow-lg"
src="/img/tools/generator-2.png"
alt=""
/>
</div>
</div>
</div>

<div className='mt-16 text-center'>{renderButtons()}</div>
<div className="mt-16 text-center sm:text-left sm:flex sm:justify-center">
{renderButtons()}
</div>
</div>
</GenericLayout>
);
Expand Down
Loading