fix: #4065 Case Studies page table is now mobile responsive #4289
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. |
WalkthroughThe update refactors the Case Studies page by converting single quotes to double quotes in JSX attributes, reformatting elements for consistent indentation, and restructuring the Adopters table for improved mobile responsiveness. Additional accessibility and styling enhancements were applied to anchor tags and list elements. No logic or data flow changes were made. Changes
Estimated code review effort🎯 1 (Trivial) | ⏱️ ~3 minutes Assessment against linked issues
Suggested labels
Suggested reviewers
Poem
Note ⚡️ Unit Test Generation is now available in beta!Learn more here, or try it out under "Finishing Touches" below. ✨ 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-4289--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 (3)
pages/casestudies/index.tsx (3)
110-118: Border style is inconsistent across columns.
<th>#1 usesborderwhile the others useborder-2. Stick to one style for visual consistency:-<th className="border p-2 font-bold text-left">Company name</th> +<th className='border-2 p-2 font-bold text-left'>Company name</th>
94-99: PreferTextLinkcomponent for external link.For consistency and accessibility (automatic
rel='noreferrer noopener') use the project'sTextLinkinstead of a raw<a>:-<a className='underline' href='https://github.com/asyncapi/website/blob/master/config/adopters.yml'> - submit a pull request -</a> +<TextLink href='https://github.com/asyncapi/website/blob/master/config/adopters.yml'> + submit a pull request +</TextLink>
30-33: Unneeded explicit type annotations.
const description: string = '...'is redundant—TypeScript infersstring. Dropping the annotation keeps the code concise:-const description: string = - 'Learn about different case studies based on AsyncAPI spec and related tools.'; +const description = + 'Learn about different case studies based on AsyncAPI spec and related tools.';
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
pages/casestudies/index.tsx(1 hunks)
🧰 Additional context used
🧠 Learnings (2)
📓 Common learnings
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.
pages/casestudies/index.tsx (4)
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/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: #3101
File: tests/fixtures/rssData.js:1-57
Timestamp: 2024-11-01T13:32:15.472Z
Learning: In the tests/fixtures/rssData.js file of the @asyncapi/website project, tests for edge cases such as empty strings for title or excerpt, very long text content, international characters (UTF-8), or malformed URLs in slug or cover are not necessary because these cases will not occur.
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.
🧬 Code Graph Analysis (1)
pages/casestudies/index.tsx (5)
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/typography/TextLink.tsx (1)
TextLink(21-42)components/CaseStudyCard.tsx (1)
CaseStudyCard(16-40)
🪛 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 jsx-quotes: Unexpected usage of doublequote.
[error] 39-39: Prettier formatting error: Replace double quotes with single quotes. (prettier/prettier) and jsx-quotes: Unexpected usage of doublequote.
[error] 41-41: Prettier formatting error: Replace double quotes with single quotes. (prettier/prettier) and jsx-quotes: Unexpected usage of doublequote.
[error] 42-42: Prettier formatting error: Replace double quotes with single quotes. (prettier/prettier) and jsx-quotes: Unexpected usage of doublequote.
[error] 46-48: Prettier formatting error: Replace multiline JSX props with single line and use single quotes. (prettier/prettier) and jsx-quotes: Unexpected usage of doublequote.
[error] 50-50: Prettier formatting error: Replace multiline text with corrected line breaks. (prettier/prettier)
[error] 56-58: Prettier formatting error: Replace multiline JSX props with single line and use single quotes. (prettier/prettier) and jsx-quotes: Unexpected usage of doublequote.
[error] 60-60: Prettier formatting error: Delete newline and spaces. (prettier/prettier)
[error] 62-64: Prettier formatting error: Replace multiline JSX props with single line and use single quotes. (prettier/prettier) and jsx-quotes: Unexpected usage of doublequote.
[error] 72-72: Prettier formatting error: Replace double quotes with single quotes. (prettier/prettier) and jsx-quotes: Unexpected usage of doublequote.
[error] 76-78: Prettier formatting error: Replace double quotes with single quotes. (prettier/prettier) and jsx-quotes: Unexpected usage of doublequote.
[error] 82-84: Prettier formatting error: Replace multiline JSX props with single line and use single quotes. (prettier/prettier) and jsx-quotes: Unexpected usage of doublequote.
[error] 86-86: Prettier formatting error: Delete newline and spaces. (prettier/prettier)
[error] 89-91: Prettier formatting error: Replace multiline JSX props with single line and use single quotes. (prettier/prettier) and jsx-quotes: Unexpected usage of doublequote.
[error] 94-96: Prettier formatting error: Replace multiline JSX props with single line and use single quotes. (prettier/prettier) and jsx-quotes: Unexpected usage of doublequote.
[error] 100-100: Prettier formatting error: Replace multiline text with corrected line breaks. (prettier/prettier)
[error] 110-111: Prettier formatting error: Replace double quotes with single quotes. (prettier/prettier) and jsx-quotes: Unexpected usage of doublequote.
[error] 114-116: Prettier formatting error: Replace double quotes with single quotes. (prettier/prettier) and jsx-quotes: Unexpected usage of doublequote.
[error] 121-122: Prettier formatting error: Replace double quotes with single quotes. (prettier/prettier) and jsx-quotes: Unexpected usage of doublequote.
[error] 125-127: Prettier formatting error: Replace double quotes with single quotes. (prettier/prettier) and jsx-quotes: Unexpected usage of doublequote.
[error] 128-131: Prettier formatting error: Delete extra spaces and newlines. (prettier/prettier)
[error] 132-134: Prettier formatting error: Replace double quotes with single quotes. (prettier/prettier) and jsx-quotes: Unexpected usage of doublequote.
[error] 135-135: Prettier formatting error: Replace double quotes with single quotes. (prettier/prettier) and jsx-quotes: Unexpected usage of doublequote.
[error] 136-139: Prettier formatting error: Delete extra spaces and newlines. (prettier/prettier)
[error] 140-140: Prettier formatting error: Unexpected trailing comma. (comma-dangle)
⏰ 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
| 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" |
There was a problem hiding this comment.
CI is red – fix Prettier/ESLint violations (quotes & prop formatting).
The project’s lint rules expect single quotes in JSX and to avoid unnecessary multi-line props. The newly-added lines use double quotes and break the pipeline (see GH-Actions log).
Run npm run lint -- --fix (or prettier --write) and commit the auto-formatted file.
Example of the required change:
-<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'>📝 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="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" | |
| <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="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" |
🧰 Tools
🪛 GitHub Actions: PR testing - if Node project
[error] 38-38: Prettier formatting error: Replace double quotes with single quotes. (prettier/prettier) and jsx-quotes: Unexpected usage of doublequote.
[error] 39-39: Prettier formatting error: Replace double quotes with single quotes. (prettier/prettier) and jsx-quotes: Unexpected usage of doublequote.
[error] 41-41: Prettier formatting error: Replace double quotes with single quotes. (prettier/prettier) and jsx-quotes: Unexpected usage of doublequote.
[error] 42-42: Prettier formatting error: Replace double quotes with single quotes. (prettier/prettier) and jsx-quotes: Unexpected usage of doublequote.
[error] 46-48: Prettier formatting error: Replace multiline JSX props with single line and use single quotes. (prettier/prettier) and jsx-quotes: Unexpected usage of doublequote.
🤖 Prompt for AI Agents
In pages/casestudies/index.tsx around lines 38 to 48, the code uses double
quotes in JSX attributes and breaks props into multiple lines, causing
Prettier/ESLint violations. To fix this, replace double quotes with single
quotes in JSX attributes and consolidate multi-line props into single lines
where possible. Run the project's lint auto-fix command (npm run lint -- --fix
or prettier --write) to automatically format the file and then commit the
changes.
| {entry.resources.map( | ||
| (resource: Resource, resourceIndex: number) => ( | ||
| <li key={resourceIndex}> | ||
| <a | ||
| className="text-cyan-600 hover:underline break-all" | ||
| href={resource.link} | ||
| target="_blank" | ||
| rel="noopener noreferrer" | ||
| > | ||
| {resource.title} | ||
| </a> | ||
| </li> | ||
| ))} | ||
| </ul> | ||
| </td> | ||
| </tr> | ||
| ))} | ||
| </tbody> | ||
| </table> | ||
| </div> | ||
| </center> | ||
| ), | ||
| )} |
There was a problem hiding this comment.
Remove dangling comma – linter error.
There is a trailing comma after the closing parenthesis of the map callback which Prettier flags (comma-dangle). Drop it:
- ),
- )}
+ )
+ )}📝 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.
| {entry.resources.map( | |
| (resource: Resource, resourceIndex: number) => ( | |
| <li key={resourceIndex}> | |
| <a | |
| className="text-cyan-600 hover:underline break-all" | |
| href={resource.link} | |
| target="_blank" | |
| rel="noopener noreferrer" | |
| > | |
| {resource.title} | |
| </a> | |
| </li> | |
| ))} | |
| </ul> | |
| </td> | |
| </tr> | |
| ))} | |
| </tbody> | |
| </table> | |
| </div> | |
| </center> | |
| ), | |
| )} | |
| {entry.resources.map( | |
| (resource: Resource, resourceIndex: number) => ( | |
| <li key={resourceIndex}> | |
| <a | |
| className="text-cyan-600 hover:underline break-all" | |
| href={resource.link} | |
| target="_blank" | |
| rel="noopener noreferrer" | |
| > | |
| {resource.title} | |
| </a> | |
| </li> | |
| ) | |
| )} |
🧰 Tools
🪛 GitHub Actions: PR testing - if Node project
[error] 128-131: Prettier formatting error: Delete extra spaces and newlines. (prettier/prettier)
[error] 132-134: Prettier formatting error: Replace double quotes with single quotes. (prettier/prettier) and jsx-quotes: Unexpected usage of doublequote.
[error] 135-135: Prettier formatting error: Replace double quotes with single quotes. (prettier/prettier) and jsx-quotes: Unexpected usage of doublequote.
[error] 136-139: Prettier formatting error: Delete extra spaces and newlines. (prettier/prettier)
[error] 140-140: Prettier formatting error: Unexpected trailing comma. (comma-dangle)
🤖 Prompt for AI Agents
In pages/casestudies/index.tsx around lines 128 to 141, remove the trailing
comma after the closing parenthesis of the map callback function to fix the
Prettier linter error. Simply delete the comma following the closing parenthesis
of the map method.
2 participants
fix: #4065
Description
fix: #4065
Summary by CodeRabbit