fix: #4065 Case Studies page table is now mobile responsive #4284
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. |
WalkthroughThis change updates the Case Studies page by refactoring JSX attribute quotes, improving table styling, and enhancing accessibility. The table is now centered using flexbox, with improved CSS classes for alignment and minimum width. Additionally, a documentation URL in a TypeScript environment file comment is updated. No functional or logic changes are introduced. Changes
Sequence Diagram(s)No sequence diagram generated as the changes are purely stylistic and do not alter control flow or feature logic. Estimated code review effort🎯 1 (Trivial) | ⏱️ ~2 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. 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
|
|
⚡️ Lighthouse report for the changes in this PR:
Lighthouse ran on https://deploy-preview-4284--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: 2
🧹 Nitpick comments (1)
pages/casestudies/index.tsx (1)
110-120: Add a<caption>for screen-reader contextTables without captions are less accessible. A one-line caption such as “AsyncAPI adopters table” improves SR usability.
<table className='my-8 min-w-[600px] w-full border-collapse border'> + <caption className='sr-only'>AsyncAPI adopters</caption>
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
next-env.d.ts(1 hunks)pages/casestudies/index.tsx(1 hunks)
🧰 Additional context used
🧠 Learnings (3)
📓 Common learnings
Learnt from: asyncapi-bot
PR: asyncapi/website#0
File: :0-0
Timestamp: 2025-02-18T12:07:42.211Z
Learning: The following PR commands are supported in the asyncapi/website repository:
- `/please-take-a-look` or `/ptal`: Requests attention from reviewers who haven't reviewed the PR
- `/ready-to-merge` or `/rtm`: Triggers automerge when all conditions are met
- `/do-not-merge` or `/dnm`: Blocks automerge even if all conditions are met
- `/autoupdate` or `/au`: Adds autoupdate label to keep PR in sync with target branch
- `/update` or `/u`: One-time update of PR with latest changes from target branch
Learnt from: akshatnema
PR: asyncapi/website#3262
File: components/Avatar.tsx:35-44
Timestamp: 2024-10-11T10:46:58.882Z
Learning: In Next.js, when avoiding nested `<a>` tags due to hydration issues, use accessible non-link elements like `<button>` or `<span>` with appropriate roles, `tabIndex`, and event handlers to maintain accessibility and SEO.
Learnt from: akshatnema
PR: asyncapi/website#3262
File: components/newsroom/FeaturedBlogPost.tsx:90-92
Timestamp: 2024-10-11T07:38:35.745Z
Learning: In Next.js, nested `<a>` tags cause hydration issues due to invalid HTML. To fix this, avoid nesting `<a>` tags by replacing inner `<a>` tags with non-interactive elements like `<span>`, and use click handlers to maintain interactivity if needed.
next-env.d.ts (5)
Learnt from: anshgoyalevil
PR: #3950
File: scripts/utils/check-locales.ts:122-129
Timestamp: 2025-04-20T16:05:16.482Z
Learning: In the AsyncAPI website project, Next.js throws errors at runtime when locale files are missing, making additional validation for missing files unnecessary in the check-locales script.
Learnt from: akshatnema
PR: #3423
File: tests/index.test.js:2-7
Timestamp: 2025-01-18T08:44:43.614Z
Learning: In the AsyncAPI website project, JavaScript test files must include the .ts extension when importing TypeScript files (e.g., require('../scripts/build-rss.ts')). This is enforced by the project's configuration which uses moduleResolution: "bundler" in tsconfig.json and TypeScript-aware ESLint plugins. The .ts extensions are required even though the files are imported using CommonJS require statements.
Learnt from: akshatnema
PR: #3423
File: tests/index.test.js:2-7
Timestamp: 2025-01-18T08:44:43.614Z
Learning: In the AsyncAPI website project, JavaScript test files must include the .ts extension when importing TypeScript files (e.g., require('../scripts/build-rss.ts')). This is a project-specific requirement enforced by the linting rules and build setup, even though it differs from typical Node.js behavior.
Learnt from: anshgoyalevil
PR: #3557
File: tests/fixtures/markdown/check-edit-links-data.js:3-11
Timestamp: 2025-01-19T04:51:41.255Z
Learning: In the AsyncAPI website repository, the test data in tests/fixtures/markdown/check-edit-links-data.js intentionally includes inconsistent paths (with and without 'docs' prefix) to verify the script's ability to normalize and handle ambiguous path structures.
Learnt from: akshatnema
PR: #3423
File: tests/index.test.js:2-7
Timestamp: 2025-01-18T08:44:43.614Z
Learning: In JavaScript test files within the AsyncAPI website project, TypeScript file imports must include the .ts extension to avoid lint errors, even though the files being imported are JavaScript files.
pages/casestudies/index.tsx (3)
Learnt from: akshatnema
PR: #3262
File: components/Avatar.tsx:35-44
Timestamp: 2024-10-11T10:46:58.882Z
Learning: In Next.js, when avoiding nested <a> tags due to hydration issues, use accessible non-link elements like <button> or <span> with appropriate roles, tabIndex, and event handlers to maintain accessibility and SEO.
Learnt from: akshatnema
PR: #3262
File: components/newsroom/FeaturedBlogPost.tsx:90-92
Timestamp: 2024-10-11T07:38:35.745Z
Learning: In Next.js, nested <a> tags cause hydration issues due to invalid HTML. To fix this, avoid nesting <a> tags by replacing inner <a> tags with non-interactive elements like <span>, and use click handlers to maintain interactivity if needed.
Learnt from: akshatnema
PR: #3262
File: components/navigation/BlogPostItem.tsx:95-119
Timestamp: 2024-10-11T11:32:30.226Z
Learning: In the BlogPostItem component (components/navigation/BlogPostItem.tsx), nesting <a> tags inside the parent Link component leads to hydration issues; therefore, we should avoid nesting <a> tags inside Link components in this component.
🪛 GitHub Actions: PR testing - if Node project
pages/casestudies/index.tsx
[error] 30-30: Prettier formatting error: Delete newline and spaces. (prettier/prettier)
[error] 38-38: Prettier formatting error: Replace double quotes with single quotes. (prettier/prettier) and Unexpected usage of doublequote. (jsx-quotes)
[error] 39-39: Prettier formatting error: Replace double quotes with single quotes. (prettier/prettier) and Unexpected usage of doublequote. (jsx-quotes)
[error] 41-41: Prettier formatting error: Replace double quotes with single quotes. (prettier/prettier) and Unexpected usage of doublequote. (jsx-quotes)
[error] 42-42: Prettier formatting error: Replace double quotes with single quotes. (prettier/prettier) and Unexpected usage of doublequote. (jsx-quotes)
[error] 46-46: Prettier formatting error: Replace multiline with inline and use single quotes. (prettier/prettier)
[error] 48-48: Unexpected usage of doublequote. (jsx-quotes)
[error] 50-50: Prettier formatting error: Replace multiline string with adjusted line breaks. (prettier/prettier)
[error] 56-56: Prettier formatting error: Replace multiline with inline and use single quotes. (prettier/prettier)
[error] 58-58: Unexpected usage of doublequote. (jsx-quotes)
[error] 60-60: Prettier formatting error: Delete newline and spaces. (prettier/prettier)
[error] 62-62: Prettier formatting error: Replace multiline attributes with single quotes. (prettier/prettier)
[error] 63-64: Unexpected usage of doublequote. (jsx-quotes)
[error] 72-72: Prettier formatting error: Replace double quotes with single quotes. (prettier/prettier) and Unexpected usage of doublequote. (jsx-quotes)
[error] 76-78: Prettier formatting error: Replace double quotes with single quotes. (prettier/prettier) and Unexpected usage of doublequote. (jsx-quotes)
[error] 82-82: Prettier formatting error: Replace multiline with inline and use single quotes. (prettier/prettier)
[error] 84-84: Unexpected usage of doublequote. (jsx-quotes)
[error] 86-86: Prettier formatting error: Delete newline and spaces. (prettier/prettier)
[error] 89-89: Prettier formatting error: Replace multiline with inline and use single quotes. (prettier/prettier)
[error] 91-91: Unexpected usage of doublequote. (jsx-quotes)
[error] 94-96: Prettier formatting error: Replace multiline attributes with single quotes. (prettier/prettier) and Unexpected usage of doublequote. (jsx-quotes)
[error] 100-103: Prettier formatting error: Replace multiline string with adjusted line breaks. (prettier/prettier)
[error] 110-111: Prettier formatting error: Replace double quotes with single quotes. (prettier/prettier) and Unexpected usage of doublequote. (jsx-quotes)
[error] 112-112: Prettier formatting error: Replace double quotes with single quotes. (prettier/prettier) and Unexpected usage of doublequote. (jsx-quotes)
[error] 115-115: Prettier formatting error: Replace double quotes with single quotes and remove newline. (prettier/prettier) and Unexpected usage of doublequote. (jsx-quotes)
[error] 118-119: Prettier formatting error: Replace double quotes with single quotes. (prettier/prettier) and Unexpected usage of doublequote. (jsx-quotes)
[error] 124-128: Prettier formatting error: Replace double quotes with single quotes. (prettier/prettier) and Unexpected usage of doublequote. (jsx-quotes)
[error] 129-129: Prettier formatting error: Delete newline and spaces. (prettier/prettier)
[error] 131-131: Prettier formatting error: Replace double quotes with single quotes. (prettier/prettier) and Unexpected usage of doublequote. (jsx-quotes)
[error] 132-132: Prettier formatting error: Delete spaces. (prettier/prettier)
[error] 133-133: Prettier formatting error: Replace double quotes with single quotes. (prettier/prettier) and Unexpected usage of doublequote. (jsx-quotes)
[error] 134-134: Prettier formatting error: Delete spaces. (prettier/prettier)
[error] 135-136: Prettier formatting error: Replace double quotes with single quotes. (prettier/prettier) and Unexpected usage of doublequote. (jsx-quotes)
[error] 137-139: Prettier formatting error: Delete spaces and newlines. (prettier/prettier)
[error] 140-141: Prettier formatting error: Remove trailing comma. (comma-dangle)
🔇 Additional comments (1)
next-env.d.ts (1)
5-5: No issues – doc-link updated correctly
The comment now points to the new Next .js TypeScript config docs; nothing else was touched.
| const description: string = | ||
| 'Learn about different case studies based on AsyncAPI spec and related tools.'; | ||
| const image: string = '/img/social/case-studies.webp'; | ||
| const title: string = 'Case Studies'; | ||
|
|
||
| return ( | ||
| <GenericLayout title={title} description={description} image={image} wide> | ||
| <div | ||
| className='relative mx-auto max-w-xl px-4 py-10 sm:px-6 lg:max-w-screen-xl lg:px-8' | ||
| data-testid='CaseStudy-main' | ||
| className="relative mx-auto max-w-xl px-4 py-10 sm:px-6 lg:max-w-screen-xl lg:px-8" | ||
| data-testid="CaseStudy-main" | ||
| > | ||
| <div className='grid lg:grid-cols-9 lg:gap-8 lg:text-center'> | ||
| <div className='col-span-5 col-start-3'> | ||
| <div className="grid lg:grid-cols-9 lg:gap-8 lg:text-center"> | ||
| <div className="col-span-5 col-start-3"> | ||
| <Heading level={HeadingLevel.h1} typeStyle={HeadingTypeStyle.lg}> | ||
| {title} | ||
| </Heading> | ||
| <Paragraph typeStyle={ParagraphTypeStyle.md} className='my-4 max-w-4xl'> | ||
| The best way to learn how to use AsyncAPI is not only through documentation that usually is focused on | ||
| recommendations and best practices. It is also good to confront with real-life case studies that explain | ||
| how people really use AsyncAPI and what are their flows. | ||
| <Paragraph | ||
| typeStyle={ParagraphTypeStyle.md} | ||
| className="my-4 max-w-4xl" | ||
| > | ||
| The best way to learn how to use AsyncAPI is not only through | ||
| documentation that usually is focused on recommendations and best | ||
| practices. It is also good to confront with real-life case studies | ||
| that explain how people really use AsyncAPI and what are their | ||
| flows. | ||
| </Paragraph> | ||
| <Paragraph typeStyle={ParagraphTypeStyle.md} className='my-4 max-w-4xl'> | ||
| Feel free to submit your case study. We have a template for you. For more details | ||
| <TextLink href='https://github.com/asyncapi/website/blob/master/README.md#case-studies' target='_blank'> | ||
| <Paragraph | ||
| typeStyle={ParagraphTypeStyle.md} | ||
| className="my-4 max-w-4xl" | ||
| > | ||
| Feel free to submit your case study. We have a template for you. | ||
| For more details | ||
| <TextLink | ||
| href="https://github.com/asyncapi/website/blob/master/README.md#case-studies" | ||
| target="_blank" | ||
| > | ||
| read our FAQ | ||
| </TextLink> | ||
| . | ||
| </Paragraph> | ||
| </div> | ||
| </div> | ||
| <div data-testid='CaseStudy-card'> | ||
| <div data-testid="CaseStudy-card"> | ||
| <CaseStudyCard studies={CaseStudiesList as ICaseStudies} /> | ||
| </div> | ||
|
|
||
| <div className='adopters'> | ||
| <div className='mt-8 grid lg:grid-cols-9 lg:gap-8 lg:text-center'> | ||
| <div className='col-span-5 col-start-3'> | ||
| <div className="adopters"> | ||
| <div className="mt-8 grid lg:grid-cols-9 lg:gap-8 lg:text-center"> | ||
| <div className="col-span-5 col-start-3"> | ||
| <Heading level={HeadingLevel.h1} typeStyle={HeadingTypeStyle.lg}> | ||
| Adopters | ||
| </Heading> | ||
| <Paragraph typeStyle={ParagraphTypeStyle.md} className='my-4 max-w-4xl'> | ||
| Check out how different companies use AsyncAPI and what problems they solve. | ||
| <Paragraph | ||
| typeStyle={ParagraphTypeStyle.md} | ||
| className="my-4 max-w-4xl" | ||
| > | ||
| Check out how different companies use AsyncAPI and what problems | ||
| they solve. | ||
| </Paragraph> | ||
| <Paragraph typeStyle={ParagraphTypeStyle.md} className='my-4 max-w-4xl'> | ||
| <Paragraph | ||
| typeStyle={ParagraphTypeStyle.md} | ||
| className="my-4 max-w-4xl" | ||
| > | ||
| Feel free to{' '} | ||
| <a className='underline' href='https://github.com/asyncapi/website/blob/master/config/adopters.yml'> | ||
| <a | ||
| className="underline" | ||
| href="https://github.com/asyncapi/website/blob/master/config/adopters.yml" | ||
| > | ||
| submit a pull request | ||
| </a>{' '} | ||
| with information about how your company uses AsyncAPI. We know that writing an official case study might | ||
| be time consuming and requires too much internal paper work. Let's make sure we can at least | ||
| capture a use case that is already a great learning information for the community. | ||
| with information about how your company uses AsyncAPI. We know | ||
| that writing an official case study might be time consuming and | ||
| requires too much internal paper work. Let's make sure we | ||
| can at least capture a use case that is already a great learning | ||
| information for the community. | ||
| </Paragraph> | ||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
| <center> | ||
| <div className='overflow-x-auto'> | ||
| <table className='my-8 w-full max-w-full border-collapse border'> | ||
| <div className="w-full flex justify-center"> | ||
| <div className="overflow-x-auto w-full"> | ||
| <table className="my-8 min-w-[600px] w-full border-collapse border"> | ||
| <thead> | ||
| <tr> | ||
| <th className='border p-2 font-bold'>Company name</th> | ||
| <th className='border-2 p-2 font-bold'>Use Case</th> | ||
| <th className='border-2 p-2 font-bold'>Resources</th> | ||
| <th className="border p-2 font-bold text-left"> | ||
| Company name | ||
| </th> | ||
| <th className="border p-2 font-bold text-left">Use Case</th> | ||
| <th className="border p-2 font-bold text-left">Resources</th> | ||
| </tr> | ||
| </thead> | ||
| <tbody> | ||
| {AdoptersList.map((entry: Adopter, index: number) => ( | ||
| <tr key={index} data-testid='Adopters'> | ||
| <td className='border-2 p-2'>{entry.companyName}</td> | ||
| <td className='border-2 p-2'>{entry.useCase}</td> | ||
| <td className='border-2 p-2'> | ||
| <ul> | ||
| {entry.resources.map((resource: Resource, resourceIndex: number) => ( | ||
| <li className='p-2' key={resourceIndex}> | ||
| <a className='text-cyan-500 underline' href={resource.link}> | ||
| {resource.title} | ||
| </a> | ||
| </li> | ||
| ))} | ||
| <tr key={index} data-testid="Adopters"> | ||
| <td className="border p-2">{entry.companyName}</td> | ||
| <td className="border p-2">{entry.useCase}</td> | ||
| <td className="border p-2"> | ||
| <ul className="list-disc pl-4"> | ||
| {entry.resources.map( | ||
| (resource: Resource, resourceIndex: number) => ( | ||
| <li key={resourceIndex} className="py-1"> | ||
| <a | ||
| className="text-cyan-500 underline" | ||
| href={resource.link} | ||
| target="_blank" | ||
| rel="noopener noreferrer" | ||
| > | ||
| {resource.title} | ||
| </a> | ||
| </li> | ||
| ), | ||
| )} | ||
| </ul> | ||
| </td> | ||
| </tr> | ||
| ))} | ||
| </tbody> | ||
| </table> | ||
| </div> | ||
| </center> | ||
| </div> |
There was a problem hiding this comment.
Fix massive Prettier / ESLint breakage introduced by double-quoted JSX & multi-line literals
The CI pipeline is red with 30-plus prettier/prettier and jsx-quotes errors. Project conventions require single quotes and Prettier-formatted, single-line attribute blocks. The current patch will block merge.
Minimal fix: run the project formatter (pnpm lint --fix / npm run format) and commit the result.
If you prefer manual edits, convert "..." → '...', collapse multi-line props, and remove trailing commas/newlines flagged in the log.
Example (representative only):
-<div
- className="relative mx-auto max-w-xl px-4 py-10 sm:px-6 lg:max-w-screen-xl lg:px-8"
- data-testid="CaseStudy-main"
->
+<div
+ className='relative mx-auto max-w-xl px-4 py-10 sm:px-6 lg:max-w-screen-xl lg:px-8'
+ data-testid='CaseStudy-main'
+>Until these style errors are fixed the build will continue to fail.
📝 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 description: string = | |
| 'Learn about different case studies based on AsyncAPI spec and related tools.'; | |
| const image: string = '/img/social/case-studies.webp'; | |
| const title: string = 'Case Studies'; | |
| return ( | |
| <GenericLayout title={title} description={description} image={image} wide> | |
| <div | |
| className='relative mx-auto max-w-xl px-4 py-10 sm:px-6 lg:max-w-screen-xl lg:px-8' | |
| data-testid='CaseStudy-main' | |
| className="relative mx-auto max-w-xl px-4 py-10 sm:px-6 lg:max-w-screen-xl lg:px-8" | |
| data-testid="CaseStudy-main" | |
| > | |
| <div className='grid lg:grid-cols-9 lg:gap-8 lg:text-center'> | |
| <div className='col-span-5 col-start-3'> | |
| <div className="grid lg:grid-cols-9 lg:gap-8 lg:text-center"> | |
| <div className="col-span-5 col-start-3"> | |
| <Heading level={HeadingLevel.h1} typeStyle={HeadingTypeStyle.lg}> | |
| {title} | |
| </Heading> | |
| <Paragraph typeStyle={ParagraphTypeStyle.md} className='my-4 max-w-4xl'> | |
| The best way to learn how to use AsyncAPI is not only through documentation that usually is focused on | |
| recommendations and best practices. It is also good to confront with real-life case studies that explain | |
| how people really use AsyncAPI and what are their flows. | |
| <Paragraph | |
| typeStyle={ParagraphTypeStyle.md} | |
| className="my-4 max-w-4xl" | |
| > | |
| The best way to learn how to use AsyncAPI is not only through | |
| documentation that usually is focused on recommendations and best | |
| practices. It is also good to confront with real-life case studies | |
| that explain how people really use AsyncAPI and what are their | |
| flows. | |
| </Paragraph> | |
| <Paragraph typeStyle={ParagraphTypeStyle.md} className='my-4 max-w-4xl'> | |
| Feel free to submit your case study. We have a template for you. For more details | |
| <TextLink href='https://github.com/asyncapi/website/blob/master/README.md#case-studies' target='_blank'> | |
| <Paragraph | |
| typeStyle={ParagraphTypeStyle.md} | |
| className="my-4 max-w-4xl" | |
| > | |
| Feel free to submit your case study. We have a template for you. | |
| For more details | |
| <TextLink | |
| href="https://github.com/asyncapi/website/blob/master/README.md#case-studies" | |
| target="_blank" | |
| > | |
| read our FAQ | |
| </TextLink> | |
| . | |
| </Paragraph> | |
| </div> | |
| </div> | |
| <div data-testid='CaseStudy-card'> | |
| <div data-testid="CaseStudy-card"> | |
| <CaseStudyCard studies={CaseStudiesList as ICaseStudies} /> | |
| </div> | |
| <div className='adopters'> | |
| <div className='mt-8 grid lg:grid-cols-9 lg:gap-8 lg:text-center'> | |
| <div className='col-span-5 col-start-3'> | |
| <div className="adopters"> | |
| <div className="mt-8 grid lg:grid-cols-9 lg:gap-8 lg:text-center"> | |
| <div className="col-span-5 col-start-3"> | |
| <Heading level={HeadingLevel.h1} typeStyle={HeadingTypeStyle.lg}> | |
| Adopters | |
| </Heading> | |
| <Paragraph typeStyle={ParagraphTypeStyle.md} className='my-4 max-w-4xl'> | |
| Check out how different companies use AsyncAPI and what problems they solve. | |
| <Paragraph | |
| typeStyle={ParagraphTypeStyle.md} | |
| className="my-4 max-w-4xl" | |
| > | |
| Check out how different companies use AsyncAPI and what problems | |
| they solve. | |
| </Paragraph> | |
| <Paragraph typeStyle={ParagraphTypeStyle.md} className='my-4 max-w-4xl'> | |
| <Paragraph | |
| typeStyle={ParagraphTypeStyle.md} | |
| className="my-4 max-w-4xl" | |
| > | |
| Feel free to{' '} | |
| <a className='underline' href='https://github.com/asyncapi/website/blob/master/config/adopters.yml'> | |
| <a | |
| className="underline" | |
| href="https://github.com/asyncapi/website/blob/master/config/adopters.yml" | |
| > | |
| submit a pull request | |
| </a>{' '} | |
| with information about how your company uses AsyncAPI. We know that writing an official case study might | |
| be time consuming and requires too much internal paper work. Let's make sure we can at least | |
| capture a use case that is already a great learning information for the community. | |
| with information about how your company uses AsyncAPI. We know | |
| that writing an official case study might be time consuming and | |
| requires too much internal paper work. Let's make sure we | |
| can at least capture a use case that is already a great learning | |
| information for the community. | |
| </Paragraph> | |
| </div> | |
| </div> | |
| </div> | |
| <center> | |
| <div className='overflow-x-auto'> | |
| <table className='my-8 w-full max-w-full border-collapse border'> | |
| <div className="w-full flex justify-center"> | |
| <div className="overflow-x-auto w-full"> | |
| <table className="my-8 min-w-[600px] w-full border-collapse border"> | |
| <thead> | |
| <tr> | |
| <th className='border p-2 font-bold'>Company name</th> | |
| <th className='border-2 p-2 font-bold'>Use Case</th> | |
| <th className='border-2 p-2 font-bold'>Resources</th> | |
| <th className="border p-2 font-bold text-left"> | |
| Company name | |
| </th> | |
| <th className="border p-2 font-bold text-left">Use Case</th> | |
| <th className="border p-2 font-bold text-left">Resources</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| {AdoptersList.map((entry: Adopter, index: number) => ( | |
| <tr key={index} data-testid='Adopters'> | |
| <td className='border-2 p-2'>{entry.companyName}</td> | |
| <td className='border-2 p-2'>{entry.useCase}</td> | |
| <td className='border-2 p-2'> | |
| <ul> | |
| {entry.resources.map((resource: Resource, resourceIndex: number) => ( | |
| <li className='p-2' key={resourceIndex}> | |
| <a className='text-cyan-500 underline' href={resource.link}> | |
| {resource.title} | |
| </a> | |
| </li> | |
| ))} | |
| <tr key={index} data-testid="Adopters"> | |
| <td className="border p-2">{entry.companyName}</td> | |
| <td className="border p-2">{entry.useCase}</td> | |
| <td className="border p-2"> | |
| <ul className="list-disc pl-4"> | |
| {entry.resources.map( | |
| (resource: Resource, resourceIndex: number) => ( | |
| <li key={resourceIndex} className="py-1"> | |
| <a | |
| className="text-cyan-500 underline" | |
| href={resource.link} | |
| target="_blank" | |
| rel="noopener noreferrer" | |
| > | |
| {resource.title} | |
| </a> | |
| </li> | |
| ), | |
| )} | |
| </ul> | |
| </td> | |
| </tr> | |
| ))} | |
| </tbody> | |
| </table> | |
| </div> | |
| </center> | |
| </div> | |
| <div | |
| - className="relative mx-auto max-w-xl px-4 py-10 sm:px-6 lg:max-w-screen-xl lg:px-8" | |
| - data-testid="CaseStudy-main" | |
| + className='relative mx-auto max-w-xl px-4 py-10 sm:px-6 lg:max-w-screen-xl lg:px-8' | |
| + data-testid='CaseStudy-main' | |
| > |
🧰 Tools
🪛 GitHub Actions: PR testing - if Node project
[error] 30-30: Prettier formatting error: Delete newline and spaces. (prettier/prettier)
[error] 38-38: Prettier formatting error: Replace double quotes with single quotes. (prettier/prettier) and Unexpected usage of doublequote. (jsx-quotes)
[error] 39-39: Prettier formatting error: Replace double quotes with single quotes. (prettier/prettier) and Unexpected usage of doublequote. (jsx-quotes)
[error] 41-41: Prettier formatting error: Replace double quotes with single quotes. (prettier/prettier) and Unexpected usage of doublequote. (jsx-quotes)
[error] 42-42: Prettier formatting error: Replace double quotes with single quotes. (prettier/prettier) and Unexpected usage of doublequote. (jsx-quotes)
[error] 46-46: Prettier formatting error: Replace multiline with inline and use single quotes. (prettier/prettier)
[error] 48-48: Unexpected usage of doublequote. (jsx-quotes)
[error] 50-50: Prettier formatting error: Replace multiline string with adjusted line breaks. (prettier/prettier)
[error] 56-56: Prettier formatting error: Replace multiline with inline and use single quotes. (prettier/prettier)
[error] 58-58: Unexpected usage of doublequote. (jsx-quotes)
[error] 60-60: Prettier formatting error: Delete newline and spaces. (prettier/prettier)
[error] 62-62: Prettier formatting error: Replace multiline attributes with single quotes. (prettier/prettier)
[error] 63-64: Unexpected usage of doublequote. (jsx-quotes)
[error] 72-72: Prettier formatting error: Replace double quotes with single quotes. (prettier/prettier) and Unexpected usage of doublequote. (jsx-quotes)
[error] 76-78: Prettier formatting error: Replace double quotes with single quotes. (prettier/prettier) and Unexpected usage of doublequote. (jsx-quotes)
[error] 82-82: Prettier formatting error: Replace multiline with inline and use single quotes. (prettier/prettier)
[error] 84-84: Unexpected usage of doublequote. (jsx-quotes)
[error] 86-86: Prettier formatting error: Delete newline and spaces. (prettier/prettier)
[error] 89-89: Prettier formatting error: Replace multiline with inline and use single quotes. (prettier/prettier)
[error] 91-91: Unexpected usage of doublequote. (jsx-quotes)
[error] 94-96: Prettier formatting error: Replace multiline attributes with single quotes. (prettier/prettier) and Unexpected usage of doublequote. (jsx-quotes)
[error] 100-103: Prettier formatting error: Replace multiline string with adjusted line breaks. (prettier/prettier)
[error] 110-111: Prettier formatting error: Replace double quotes with single quotes. (prettier/prettier) and Unexpected usage of doublequote. (jsx-quotes)
[error] 112-112: Prettier formatting error: Replace double quotes with single quotes. (prettier/prettier) and Unexpected usage of doublequote. (jsx-quotes)
[error] 115-115: Prettier formatting error: Replace double quotes with single quotes and remove newline. (prettier/prettier) and Unexpected usage of doublequote. (jsx-quotes)
[error] 118-119: Prettier formatting error: Replace double quotes with single quotes. (prettier/prettier) and Unexpected usage of doublequote. (jsx-quotes)
[error] 124-128: Prettier formatting error: Replace double quotes with single quotes. (prettier/prettier) and Unexpected usage of doublequote. (jsx-quotes)
[error] 129-129: Prettier formatting error: Delete newline and spaces. (prettier/prettier)
[error] 131-131: Prettier formatting error: Replace double quotes with single quotes. (prettier/prettier) and Unexpected usage of doublequote. (jsx-quotes)
[error] 132-132: Prettier formatting error: Delete spaces. (prettier/prettier)
[error] 133-133: Prettier formatting error: Replace double quotes with single quotes. (prettier/prettier) and Unexpected usage of doublequote. (jsx-quotes)
[error] 134-134: Prettier formatting error: Delete spaces. (prettier/prettier)
[error] 135-136: Prettier formatting error: Replace double quotes with single quotes. (prettier/prettier) and Unexpected usage of doublequote. (jsx-quotes)
[error] 137-139: Prettier formatting error: Delete spaces and newlines. (prettier/prettier)
[error] 140-141: Prettier formatting error: Remove trailing comma. (comma-dangle)
🤖 Prompt for AI Agents
In pages/casestudies/index.tsx from lines 30 to 150, the code has multiple
Prettier and ESLint errors due to double-quoted JSX attributes and multi-line
literals that violate project style conventions requiring single quotes and
properly formatted single-line attributes. To fix this, run the project
formatter using the command `pnpm lint --fix` or `npm run format` to
automatically correct these style issues. Alternatively, manually replace all
double quotes in JSX with single quotes, collapse multi-line attribute blocks
into single lines, and remove any trailing commas or newlines flagged by the
linter to ensure the code passes the style checks and the build succeeds.
| <tr key={index} data-testid="Adopters"> | ||
| <td className="border p-2">{entry.companyName}</td> | ||
| <td className="border p-2">{entry.useCase}</td> | ||
| <td className="border p-2"> | ||
| <ul className="list-disc pl-4"> | ||
| {entry.resources.map( | ||
| (resource: Resource, resourceIndex: number) => ( | ||
| <li key={resourceIndex} className="py-1"> | ||
| <a | ||
| className="text-cyan-500 underline" | ||
| href={resource.link} | ||
| target="_blank" | ||
| rel="noopener noreferrer" | ||
| > | ||
| {resource.title} | ||
| </a> | ||
| </li> | ||
| ), | ||
| )} | ||
| </ul> | ||
| </td> | ||
| </tr> | ||
| ))} |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Replace index as React key with stable identifiers
Using the array index (key={index}) for AdoptersList rows & nested resourceIndex causes unnecessary re-renders and subtle bugs when the list order changes. Prefer a deterministic field (e.g., companyName or resource.link).
-<tr key={index} data-testid='Adopters'>
+<tr key={entry.companyName} data-testid='Adopters'>
…
- <li key={resourceIndex} className='py-1'>
+ <li key={resource.link} className='py-1'>📝 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.
| <tr key={index} data-testid="Adopters"> | |
| <td className="border p-2">{entry.companyName}</td> | |
| <td className="border p-2">{entry.useCase}</td> | |
| <td className="border p-2"> | |
| <ul className="list-disc pl-4"> | |
| {entry.resources.map( | |
| (resource: Resource, resourceIndex: number) => ( | |
| <li key={resourceIndex} className="py-1"> | |
| <a | |
| className="text-cyan-500 underline" | |
| href={resource.link} | |
| target="_blank" | |
| rel="noopener noreferrer" | |
| > | |
| {resource.title} | |
| </a> | |
| </li> | |
| ), | |
| )} | |
| </ul> | |
| </td> | |
| </tr> | |
| ))} | |
| <tr key={entry.companyName} data-testid="Adopters"> | |
| <td className="border p-2">{entry.companyName}</td> | |
| <td className="border p-2">{entry.useCase}</td> | |
| <td className="border p-2"> | |
| <ul className="list-disc pl-4"> | |
| {entry.resources.map( | |
| (resource: Resource, resourceIndex: number) => ( | |
| <li key={resource.link} className="py-1"> | |
| <a | |
| className="text-cyan-500 underline" | |
| href={resource.link} | |
| target="_blank" | |
| rel="noopener noreferrer" | |
| > | |
| {resource.title} | |
| </a> | |
| </li> | |
| ), | |
| )} | |
| </ul> | |
| </td> | |
| </tr> |
🧰 Tools
🪛 GitHub Actions: PR testing - if Node project
[error] 124-128: Prettier formatting error: Replace double quotes with single quotes. (prettier/prettier) and Unexpected usage of doublequote. (jsx-quotes)
[error] 129-129: Prettier formatting error: Delete newline and spaces. (prettier/prettier)
[error] 131-131: Prettier formatting error: Replace double quotes with single quotes. (prettier/prettier) and Unexpected usage of doublequote. (jsx-quotes)
[error] 132-132: Prettier formatting error: Delete spaces. (prettier/prettier)
[error] 133-133: Prettier formatting error: Replace double quotes with single quotes. (prettier/prettier) and Unexpected usage of doublequote. (jsx-quotes)
[error] 134-134: Prettier formatting error: Delete spaces. (prettier/prettier)
[error] 135-136: Prettier formatting error: Replace double quotes with single quotes. (prettier/prettier) and Unexpected usage of doublequote. (jsx-quotes)
[error] 137-139: Prettier formatting error: Delete spaces and newlines. (prettier/prettier)
[error] 140-141: Prettier formatting error: Remove trailing comma. (comma-dangle)
🤖 Prompt for AI Agents
In pages/casestudies/index.tsx around lines 124 to 146, replace the usage of
array indices as React keys for the adopter rows and resource list items.
Instead of key={index} for the <tr> elements, use a stable and unique identifier
like entry.companyName. Similarly, for the resource list items, replace
key={resourceIndex} with a unique and stable key such as resource.link. This
change will prevent unnecessary re-renders and potential bugs when the list
order changes.
2 participants
fix: #4065
Description
fix: #4065
Summary by CodeRabbit
Style
Accessibility
Chores