feat: updated blog card #4087
feat: updated blog card #4087
Conversation
zalabhavy
requested review from
derberg,
akshatnema,
anshgoyalevil,
sambhavgupta0705,
Mayaleeeee and
asyncapi-bot-eve
as code owners
WalkthroughThe BlogPostItem component was visually and structurally revamped. The article container now features enhanced borders and hover effects. The author section is repositioned to the top, styled with a gray background, and displays avatars and names as clickable buttons opening author links in new tabs. The cover image's alt text now uses the post title for accessibility. The post type, title, and excerpt are reorganized for improved hierarchy. The redundant author block at the bottom was removed, and a prominent "Read More" button was added beneath the excerpt, streamlining the call-to-action. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant BlogPostItem
participant AuthorProfile
participant BlogPostPage
User->>BlogPostItem: Views blog post card
BlogPostItem->>AuthorProfile: Renders author avatars/buttons
User->>AuthorProfile: Clicks author name
AuthorProfile->>AuthorProfile: Opens author link in new tab
User->>BlogPostItem: Clicks "Read More" button
BlogPostItem->>BlogPostPage: Navigates to full post
Assessment against linked issues
Suggested labels
Suggested reviewers
Poem
✨ Finishing Touches
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
|
✅ Deploy Preview for asyncapi-website ready!Built without sensitive environment variables
To edit notification comments on pull requests, go to your Netlify site configuration. |
![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
🔭 Outside diff range comments (1)
components/navigation/BlogPostItem.tsx (1)
56-132:⚠️ Potential issueFix quote style across the component
The code has consistent ESLint/Prettier errors throughout regarding quote usage. Replace all double quotes with single quotes to meet the project's style requirements.
These quote style issues are causing CI pipeline failures. Here's a sample of the changes needed:
- <article className="h-full rounded-lg border border-gray-200 shadow-md transition-all duration-300 ease-in-out hover:shadow-lg"> + <article className='h-full rounded-lg border border-gray-200 shadow-md transition-all duration-300 ease-in-out hover:shadow-lg'>Apply this pattern to all className attributes, string literals, and prop values throughout the component.
🧰 Tools
🪛 ESLint
[error] 56-56: Replace
"h-full·rounded-lg·border·border-gray-200·shadow-md·transition-all·duration-300·ease-in-out·hover:shadow-lg"with'h-full·rounded-lg·border·border-gray-200·shadow-md·transition-all·duration-300·ease-in-out·hover:shadow-lg'(prettier/prettier)
[error] 56-56: Unexpected usage of doublequote.
(jsx-quotes)
[error] 58-58: Replace
"flex·h-full·cursor-pointer·flex-col·overflow-hidden·rounded-lg"with'flex·h-full·cursor-pointer·flex-col·overflow-hidden·rounded-lg'(prettier/prettier)
[error] 58-58: Unexpected usage of doublequote.
(jsx-quotes)
[error] 59-64: Replace
⏎··············className="h-48·w-full·object-cover"⏎··············src={post.cover}⏎··············alt={post.title}⏎··············loading="lazy"⏎···········with·className='h-48·w-full·object-cover'·src={post.cover}·alt={post.title}·loading='lazy'(prettier/prettier)
[error] 60-60: Unexpected usage of doublequote.
(jsx-quotes)
[error] 63-63: Unexpected usage of doublequote.
(jsx-quotes)
[error] 65-65: Replace
"flex·items-center·px-6·py-4·bg-gray-50"with'flex·items-center·px-6·py-4·bg-gray-50'(prettier/prettier)
[error] 65-65: Unexpected usage of doublequote.
(jsx-quotes)
[error] 66-66: Replace
"relative·shrink-0"with'relative·shrink-0'(prettier/prettier)
[error] 66-66: Unexpected usage of doublequote.
(jsx-quotes)
[error] 69-69: Replace
"ml-3"with'ml-3'(prettier/prettier)
[error] 69-69: Unexpected usage of doublequote.
(jsx-quotes)
[error] 70-74: Replace
⏎··················level={HeadingLevel.h3}⏎··················typeStyle={HeadingTypeStyle.xsSemibold}⏎··················textColor="text-gray-900"⏎················with·level={HeadingLevel.h3}·typeStyle={HeadingTypeStyle.xsSemibold}·textColor='text-gray-900'(prettier/prettier)
[error] 73-73: Unexpected usage of doublequote.
(jsx-quotes)
[error] 82-82: Replace
"cursor-pointer·border-none·bg-inherit·p-0·hover:underline"with'cursor-pointer·border-none·bg-inherit·p-0·hover:underline'(prettier/prettier)
[error] 82-82: Unexpected usage of doublequote.
(jsx-quotes)
[error] 85-85: Replace
"_blank"with'_blank'(prettier/prettier)
[error] 85-85: Strings must use singlequote.
(quotes)
[error] 101-101: Replace
"text-gray-600"with'text-gray-600'(prettier/prettier)
[error] 101-101: Unexpected usage of doublequote.
(jsx-quotes)
[error] 102-102: Replace
"MMMM·D,·YYYY"with'MMMM·D,·YYYY'(prettier/prettier)
[error] 102-102: Strings must use singlequote.
(quotes)
[error] 103-103: Replace
"mx-1"with'mx-1'(prettier/prettier)
[error] 103-103: Unexpected usage of doublequote.
(jsx-quotes)
[error] 108-108: Replace
"flex·flex-1·flex-col·justify-between·bg-white·p-6"with'flex·flex-1·flex-col·justify-between·bg-white·p-6'(prettier/prettier)
[error] 108-108: Unexpected usage of doublequote.
(jsx-quotes)
[error] 109-109: Replace
"flex-1"with'flex-1'(prettier/prettier)
[error] 109-109: Unexpected usage of doublequote.
(jsx-quotes)
[error] 110-110: Replace
"text-indigo-500"with'text-indigo-500'(prettier/prettier)
[error] 110-110: Unexpected usage of doublequote.
(jsx-quotes)
[error] 111-111: Replace
·className={inline-flex·items-center·rounded-full·px-3·py-0.5·${typeColors[0]}·${typeColors[1]}}with⏎····················className={inline-flex·items-center·rounded-full·px-3·py-0.5·${typeColors[0]}·${typeColors[1]}}⏎··················(prettier/prettier)
[error] 115-115: Replace
"mt-2"with'mt-2'(prettier/prettier)
[error] 115-115: Unexpected usage of doublequote.
(jsx-quotes)
[error] 118-118: Replace
"mt-3·text-gray-700"with'mt-3·text-gray-700'(prettier/prettier)
[error] 118-118: Unexpected usage of doublequote.
(jsx-quotes)
[error] 119-119: Replace
"span"with'span'(prettier/prettier)
[error] 119-119: Unexpected usage of doublequote.
(jsx-quotes)
[error] 122-122: Replace
"mt-4"with'mt-4'(prettier/prettier)
[error] 122-122: Unexpected usage of doublequote.
(jsx-quotes)
[error] 124-124: Replace
"w-full·rounded-md·bg-indigo-600·px-4·py-2·text-white·transition-all·duration-300·hover:bg-indigo-700"with'w-full·rounded-md·bg-indigo-600·px-4·py-2·text-white·transition-all·duration-300·hover:bg-indigo-700'(prettier/prettier)
[error] 124-124: Unexpected usage of doublequote.
(jsx-quotes)
🪛 GitHub Actions: PR testing - if Node project
[error] 56-56: Prettier: Replace double quotes with single quotes (prettier/prettier) and Unexpected usage of doublequote (jsx-quotes)
[error] 58-58: Prettier: Replace double quotes with single quotes (prettier/prettier) and Unexpected usage of doublequote (jsx-quotes)
[error] 59-60: Prettier: Replace multi-line JSX attribute quotes with single quotes (prettier/prettier) and Unexpected usage of doublequote (jsx-quotes)
[error] 63-63: Unexpected usage of doublequote (jsx-quotes)
[warning] 65-65: Invalid Tailwind CSS classnames order (tailwindcss/classnames-order)
[error] 65-66: Prettier: Replace double quotes with single quotes (prettier/prettier) and Unexpected usage of doublequote (jsx-quotes)
[error] 69-69: Prettier: Replace double quotes with single quotes (prettier/prettier) and Unexpected usage of doublequote (jsx-quotes)
[error] 70-73: Prettier: Replace multi-line JSX attribute quotes with single quotes (prettier/prettier) and Unexpected usage of doublequote (jsx-quotes)
[error] 82-82: Prettier: Replace double quotes with single quotes (prettier/prettier) and Unexpected usage of doublequote (jsx-quotes)
[error] 85-85: Prettier: Replace double quotes with single quotes (prettier/prettier) and Strings must use singlequote (quotes)
[error] 101-102: Prettier: Replace double quotes with single quotes (prettier/prettier) and Unexpected usage of doublequote (jsx-quotes) and Strings must use singlequote (quotes)
[error] 103-103: Prettier: Replace double quotes with single quotes (prettier/prettier) and Unexpected usage of doublequote (jsx-quotes)
[error] 108-109: Prettier: Replace double quotes with single quotes (prettier/prettier) and Unexpected usage of doublequote (jsx-quotes)
[error] 110-110: Prettier: Replace double quotes with single quotes (prettier/prettier) and Unexpected usage of doublequote (jsx-quotes)
[error] 111-111: Prettier: Replace template literal JSX attribute quotes with multi-line format (prettier/prettier)
[error] 115-115: Prettier: Replace double quotes with single quotes (prettier/prettier) and Unexpected usage of doublequote (jsx-quotes)
[error] 118-119: Prettier: Replace double quotes with single quotes (prettier/prettier) and Unexpected usage of doublequote (jsx-quotes)
[error] 122-124: Prettier: Replace double quotes with single quotes (prettier/prettier) and Unexpected usage of doublequote (jsx-quotes)
🧹 Nitpick comments (2)
components/navigation/BlogPostItem.tsx (2)
75-98: Simplify author name rendering logicThe logic to join author names with " & " could be simplified using Array.join() instead of reduce.
Consider using the following approach:
- {post.authors - .map((author, index) => - author.link ? ( - <button - key={index} - data-alt={author.name} - className="cursor-pointer border-none bg-inherit p-0 hover:underline" - onClick={(e) => { - e.preventDefault(); - window.open(author.link, "_blank"); - }} - > - {author.name} - </button> - ) : ( - author.name - ) - ) - .reduce((prev, curr, index) => ( - <React.Fragment key={`author-${index}`}> - {prev} & {curr} - </React.Fragment> - ))} + {post.authors.map((author, index) => ( + <React.Fragment key={`author-${index}`}> + {index > 0 && ' & '} + {author.link ? ( + <button + data-alt={author.name} + className='cursor-pointer border-none bg-inherit p-0 hover:underline' + onClick={(e) => { + e.preventDefault(); + window.open(author.link, '_blank'); + }} + > + {author.name} + </button> + ) : ( + author.name + )} + </React.Fragment> + ))}🧰 Tools
🪛 ESLint
[error] 82-82: Replace
"cursor-pointer·border-none·bg-inherit·p-0·hover:underline"with'cursor-pointer·border-none·bg-inherit·p-0·hover:underline'(prettier/prettier)
[error] 82-82: Unexpected usage of doublequote.
(jsx-quotes)
[error] 85-85: Replace
"_blank"with'_blank'(prettier/prettier)
[error] 85-85: Strings must use singlequote.
(quotes)
🪛 GitHub Actions: PR testing - if Node project
[error] 82-82: Prettier: Replace double quotes with single quotes (prettier/prettier) and Unexpected usage of doublequote (jsx-quotes)
[error] 85-85: Prettier: Replace double quotes with single quotes (prettier/prettier) and Strings must use singlequote (quotes)
65-65: Fix Tailwind class orderThe pipeline reports a warning about invalid Tailwind CSS class order.
Reorder the Tailwind classes to follow the project's conventions:
- <div className="flex items-center px-6 py-4 bg-gray-50"> + <div className="flex items-center bg-gray-50 px-6 py-4">🧰 Tools
🪛 ESLint
[error] 65-65: Replace
"flex·items-center·px-6·py-4·bg-gray-50"with'flex·items-center·px-6·py-4·bg-gray-50'(prettier/prettier)
[error] 65-65: Unexpected usage of doublequote.
(jsx-quotes)
🪛 GitHub Actions: PR testing - if Node project
[warning] 65-65: Invalid Tailwind CSS classnames order (tailwindcss/classnames-order)
[error] 65-66: Prettier: Replace double quotes with single quotes (prettier/prettier) and Unexpected usage of doublequote (jsx-quotes)
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
components/navigation/BlogPostItem.tsx(1 hunks)
🧰 Additional context used
🧠 Learnings (2)
📓 Common learnings
Learnt from: akshatnema
PR: asyncapi/website#3262
File: components/navigation/BlogPostItem.tsx:80-87
Timestamp: 2024-10-11T11:17:32.246Z
Learning: In the `BlogPostItem` component, the parent `Link` wraps the entire content, so inner `Link` components around the title and excerpt are unnecessary.
components/navigation/BlogPostItem.tsx (2)
Learnt from: akshatnema
PR: asyncapi/website#3262
File: components/navigation/BlogPostItem.tsx:80-87
Timestamp: 2024-10-11T11:17:32.246Z
Learning: In the `BlogPostItem` component, the parent `Link` wraps the entire content, so inner `Link` components around the title and excerpt are unnecessary.
Learnt from: akshatnema
PR: asyncapi/website#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.
🪛 ESLint
components/navigation/BlogPostItem.tsx
[error] 56-56: Replace "h-full·rounded-lg·border·border-gray-200·shadow-md·transition-all·duration-300·ease-in-out·hover:shadow-lg" with 'h-full·rounded-lg·border·border-gray-200·shadow-md·transition-all·duration-300·ease-in-out·hover:shadow-lg'
(prettier/prettier)
[error] 56-56: Unexpected usage of doublequote.
(jsx-quotes)
[error] 58-58: Replace "flex·h-full·cursor-pointer·flex-col·overflow-hidden·rounded-lg" with 'flex·h-full·cursor-pointer·flex-col·overflow-hidden·rounded-lg'
(prettier/prettier)
[error] 58-58: Unexpected usage of doublequote.
(jsx-quotes)
[error] 59-64: Replace ⏎··············className="h-48·w-full·object-cover"⏎··············src={post.cover}⏎··············alt={post.title}⏎··············loading="lazy"⏎··········· with ·className='h-48·w-full·object-cover'·src={post.cover}·alt={post.title}·loading='lazy'
(prettier/prettier)
[error] 60-60: Unexpected usage of doublequote.
(jsx-quotes)
[error] 63-63: Unexpected usage of doublequote.
(jsx-quotes)
[error] 65-65: Replace "flex·items-center·px-6·py-4·bg-gray-50" with 'flex·items-center·px-6·py-4·bg-gray-50'
(prettier/prettier)
[error] 65-65: Unexpected usage of doublequote.
(jsx-quotes)
[error] 66-66: Replace "relative·shrink-0" with 'relative·shrink-0'
(prettier/prettier)
[error] 66-66: Unexpected usage of doublequote.
(jsx-quotes)
[error] 69-69: Replace "ml-3" with 'ml-3'
(prettier/prettier)
[error] 69-69: Unexpected usage of doublequote.
(jsx-quotes)
[error] 70-74: Replace ⏎··················level={HeadingLevel.h3}⏎··················typeStyle={HeadingTypeStyle.xsSemibold}⏎··················textColor="text-gray-900"⏎················ with ·level={HeadingLevel.h3}·typeStyle={HeadingTypeStyle.xsSemibold}·textColor='text-gray-900'
(prettier/prettier)
[error] 73-73: Unexpected usage of doublequote.
(jsx-quotes)
[error] 82-82: Replace "cursor-pointer·border-none·bg-inherit·p-0·hover:underline" with 'cursor-pointer·border-none·bg-inherit·p-0·hover:underline'
(prettier/prettier)
[error] 82-82: Unexpected usage of doublequote.
(jsx-quotes)
[error] 85-85: Replace "_blank" with '_blank'
(prettier/prettier)
[error] 85-85: Strings must use singlequote.
(quotes)
[error] 101-101: Replace "text-gray-600" with 'text-gray-600'
(prettier/prettier)
[error] 101-101: Unexpected usage of doublequote.
(jsx-quotes)
[error] 102-102: Replace "MMMM·D,·YYYY" with 'MMMM·D,·YYYY'
(prettier/prettier)
[error] 102-102: Strings must use singlequote.
(quotes)
[error] 103-103: Replace "mx-1" with 'mx-1'
(prettier/prettier)
[error] 103-103: Unexpected usage of doublequote.
(jsx-quotes)
[error] 108-108: Replace "flex·flex-1·flex-col·justify-between·bg-white·p-6" with 'flex·flex-1·flex-col·justify-between·bg-white·p-6'
(prettier/prettier)
[error] 108-108: Unexpected usage of doublequote.
(jsx-quotes)
[error] 109-109: Replace "flex-1" with 'flex-1'
(prettier/prettier)
[error] 109-109: Unexpected usage of doublequote.
(jsx-quotes)
[error] 110-110: Replace "text-indigo-500" with 'text-indigo-500'
(prettier/prettier)
[error] 110-110: Unexpected usage of doublequote.
(jsx-quotes)
[error] 111-111: Replace ·className={inline-flex·items-center·rounded-full·px-3·py-0.5·${typeColors[0]}·${typeColors[1]}} with ⏎····················className={inline-flex·items-center·rounded-full·px-3·py-0.5·${typeColors[0]}·${typeColors[1]}}⏎··················
(prettier/prettier)
[error] 115-115: Replace "mt-2" with 'mt-2'
(prettier/prettier)
[error] 115-115: Unexpected usage of doublequote.
(jsx-quotes)
[error] 118-118: Replace "mt-3·text-gray-700" with 'mt-3·text-gray-700'
(prettier/prettier)
[error] 118-118: Unexpected usage of doublequote.
(jsx-quotes)
[error] 119-119: Replace "span" with 'span'
(prettier/prettier)
[error] 119-119: Unexpected usage of doublequote.
(jsx-quotes)
[error] 122-122: Replace "mt-4" with 'mt-4'
(prettier/prettier)
[error] 122-122: Unexpected usage of doublequote.
(jsx-quotes)
[error] 124-124: Replace "w-full·rounded-md·bg-indigo-600·px-4·py-2·text-white·transition-all·duration-300·hover:bg-indigo-700" with 'w-full·rounded-md·bg-indigo-600·px-4·py-2·text-white·transition-all·duration-300·hover:bg-indigo-700'
(prettier/prettier)
[error] 124-124: Unexpected usage of doublequote.
(jsx-quotes)
🪛 GitHub Actions: PR testing - if Node project
components/navigation/BlogPostItem.tsx
[error] 56-56: Prettier: Replace double quotes with single quotes (prettier/prettier) and Unexpected usage of doublequote (jsx-quotes)
[error] 58-58: Prettier: Replace double quotes with single quotes (prettier/prettier) and Unexpected usage of doublequote (jsx-quotes)
[error] 59-60: Prettier: Replace multi-line JSX attribute quotes with single quotes (prettier/prettier) and Unexpected usage of doublequote (jsx-quotes)
[error] 63-63: Unexpected usage of doublequote (jsx-quotes)
[warning] 65-65: Invalid Tailwind CSS classnames order (tailwindcss/classnames-order)
[error] 65-66: Prettier: Replace double quotes with single quotes (prettier/prettier) and Unexpected usage of doublequote (jsx-quotes)
[error] 69-69: Prettier: Replace double quotes with single quotes (prettier/prettier) and Unexpected usage of doublequote (jsx-quotes)
[error] 70-73: Prettier: Replace multi-line JSX attribute quotes with single quotes (prettier/prettier) and Unexpected usage of doublequote (jsx-quotes)
[error] 82-82: Prettier: Replace double quotes with single quotes (prettier/prettier) and Unexpected usage of doublequote (jsx-quotes)
[error] 85-85: Prettier: Replace double quotes with single quotes (prettier/prettier) and Strings must use singlequote (quotes)
[error] 101-102: Prettier: Replace double quotes with single quotes (prettier/prettier) and Unexpected usage of doublequote (jsx-quotes) and Strings must use singlequote (quotes)
[error] 103-103: Prettier: Replace double quotes with single quotes (prettier/prettier) and Unexpected usage of doublequote (jsx-quotes)
[error] 108-109: Prettier: Replace double quotes with single quotes (prettier/prettier) and Unexpected usage of doublequote (jsx-quotes)
[error] 110-110: Prettier: Replace double quotes with single quotes (prettier/prettier) and Unexpected usage of doublequote (jsx-quotes)
[error] 111-111: Prettier: Replace template literal JSX attribute quotes with multi-line format (prettier/prettier)
[error] 115-115: Prettier: Replace double quotes with single quotes (prettier/prettier) and Unexpected usage of doublequote (jsx-quotes)
[error] 118-119: Prettier: Replace double quotes with single quotes (prettier/prettier) and Unexpected usage of doublequote (jsx-quotes)
[error] 122-124: Prettier: Replace double quotes with single quotes (prettier/prettier) and Unexpected usage of doublequote (jsx-quotes)
⏰ Context from checks skipped due to timeout of 180000ms (4)
- GitHub Check: Redirect rules - asyncapi-website
- GitHub Check: Header rules - asyncapi-website
- GitHub Check: Pages changed - asyncapi-website
- GitHub Check: Lighthouse CI
🔇 Additional comments (2)
components/navigation/BlogPostItem.tsx (2)
62-64: Great accessibility improvement with proper image alt textUsing the post title as the alt text for blog images is an excellent accessibility improvement.
🧰 Tools
🪛 ESLint
[error] 59-64: Replace
⏎··············className="h-48·w-full·object-cover"⏎··············src={post.cover}⏎··············alt={post.title}⏎··············loading="lazy"⏎···········with·className='h-48·w-full·object-cover'·src={post.cover}·alt={post.title}·loading='lazy'(prettier/prettier)
[error] 63-63: Unexpected usage of doublequote.
(jsx-quotes)
🪛 GitHub Actions: PR testing - if Node project
[error] 63-63: Unexpected usage of doublequote (jsx-quotes)
65-107: Author section redesign looks goodMoving the author section to the top with the gray background creates a better visual hierarchy. Using buttons for author links instead of nested anchor tags is a good approach to avoid hydration issues.
🧰 Tools
🪛 ESLint
[error] 65-65: Replace
"flex·items-center·px-6·py-4·bg-gray-50"with'flex·items-center·px-6·py-4·bg-gray-50'(prettier/prettier)
[error] 65-65: Unexpected usage of doublequote.
(jsx-quotes)
[error] 66-66: Replace
"relative·shrink-0"with'relative·shrink-0'(prettier/prettier)
[error] 66-66: Unexpected usage of doublequote.
(jsx-quotes)
[error] 69-69: Replace
"ml-3"with'ml-3'(prettier/prettier)
[error] 69-69: Unexpected usage of doublequote.
(jsx-quotes)
[error] 70-74: Replace
⏎··················level={HeadingLevel.h3}⏎··················typeStyle={HeadingTypeStyle.xsSemibold}⏎··················textColor="text-gray-900"⏎················with·level={HeadingLevel.h3}·typeStyle={HeadingTypeStyle.xsSemibold}·textColor='text-gray-900'(prettier/prettier)
[error] 73-73: Unexpected usage of doublequote.
(jsx-quotes)
[error] 82-82: Replace
"cursor-pointer·border-none·bg-inherit·p-0·hover:underline"with'cursor-pointer·border-none·bg-inherit·p-0·hover:underline'(prettier/prettier)
[error] 82-82: Unexpected usage of doublequote.
(jsx-quotes)
[error] 85-85: Replace
"_blank"with'_blank'(prettier/prettier)
[error] 85-85: Strings must use singlequote.
(quotes)
[error] 101-101: Replace
"text-gray-600"with'text-gray-600'(prettier/prettier)
[error] 101-101: Unexpected usage of doublequote.
(jsx-quotes)
[error] 102-102: Replace
"MMMM·D,·YYYY"with'MMMM·D,·YYYY'(prettier/prettier)
[error] 102-102: Strings must use singlequote.
(quotes)
[error] 103-103: Replace
"mx-1"with'mx-1'(prettier/prettier)
[error] 103-103: Unexpected usage of doublequote.
(jsx-quotes)
🪛 GitHub Actions: PR testing - if Node project
[warning] 65-65: Invalid Tailwind CSS classnames order (tailwindcss/classnames-order)
[error] 65-66: Prettier: Replace double quotes with single quotes (prettier/prettier) and Unexpected usage of doublequote (jsx-quotes)
[error] 69-69: Prettier: Replace double quotes with single quotes (prettier/prettier) and Unexpected usage of doublequote (jsx-quotes)
[error] 70-73: Prettier: Replace multi-line JSX attribute quotes with single quotes (prettier/prettier) and Unexpected usage of doublequote (jsx-quotes)
[error] 82-82: Prettier: Replace double quotes with single quotes (prettier/prettier) and Unexpected usage of doublequote (jsx-quotes)
[error] 85-85: Prettier: Replace double quotes with single quotes (prettier/prettier) and Strings must use singlequote (quotes)
[error] 101-102: Prettier: Replace double quotes with single quotes (prettier/prettier) and Unexpected usage of doublequote (jsx-quotes) and Strings must use singlequote (quotes)
[error] 103-103: Prettier: Replace double quotes with single quotes (prettier/prettier) and Unexpected usage of doublequote (jsx-quotes)
| className="cursor-pointer border-none bg-inherit p-0 hover:underline" | ||
| onClick={(e) => { | ||
| e.preventDefault(); | ||
| window.open(author.link, "_blank"); |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Add rel="noopener noreferrer" for security
When using window.open() with _blank, it's recommended to include security attributes.
Add security attributes to prevent potential security vulnerabilities:
- window.open(author.link, "_blank");
+ window.open(author.link, "_blank", "noopener,noreferrer");📝 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.
| window.open(author.link, "_blank"); | |
| - window.open(author.link, "_blank"); | |
| + window.open(author.link, "_blank", "noopener,noreferrer"); |
🧰 Tools
🪛 ESLint
[error] 85-85: Replace "_blank" with '_blank'
(prettier/prettier)
[error] 85-85: Strings must use singlequote.
(quotes)
🪛 GitHub Actions: PR testing - if Node project
[error] 85-85: Prettier: Replace double quotes with single quotes (prettier/prettier) and Strings must use singlequote (quotes)
| <Link href={post.slug}> | ||
| <button className="w-full rounded-md bg-indigo-600 px-4 py-2 text-white transition-all duration-300 hover:bg-indigo-700"> | ||
| Read More | ||
| </button> | ||
| </Link> |
There was a problem hiding this comment.
💡 Verification agent
🧩 Analysis chain
Remove nested Link components
There's a nested Link component inside the parent Link which can cause hydration issues according to the retrieved learnings.
According to the earlier learnings, nesting <a> tags inside the parent Link component leads to hydration issues. Since the entire card is already wrapped in a Link, the inner Link should be replaced:
- <div className="mt-4">
- <Link href={post.slug}>
- <button className="w-full rounded-md bg-indigo-600 px-4 py-2 text-white transition-all duration-300 hover:bg-indigo-700">
- Read More
- </button>
- </Link>
- </div>
+ <div className="mt-4">
+ <button
+ className="w-full rounded-md bg-indigo-600 px-4 py-2 text-white transition-all duration-300 hover:bg-indigo-700"
+ onClick={(e) => e.preventDefault()}
+ >
+ Read More
+ </button>
+ </div>Let's verify if this is a common pattern in the codebase:
🏁 Script executed:
#!/bin/bash
# Check for nested Link components
echo "Checking for nested Link components in the codebase..."
rg -A 2 -B 2 "<Link[^>]*>.*?<Link" --type tsx --type jsxLength of output: 205
Remove nested <Link> wrapper in BlogPostItem.tsx
The “Read More” <Link> is currently nested inside the parent <Link> that wraps the entire card, which leads to hydration/invalid HTML issues in Next.js. Replace the inner <Link>-wrapped button with a plain <button> that uses the Next.js router to navigate:
- Location: components/navigation/BlogPostItem.tsx (lines 123–127)
- Diff:
- <div className="mt-4">
- <Link href={post.slug}>
- <button className="w-full rounded-md bg-indigo-600 px-4 py-2 text-white transition-all duration-300 hover:bg-indigo-700">
- Read More
- </button>
- </Link>
- </div>
+ import { useRouter } from 'next/router';
+
+ const router = useRouter();
+
+ <div className="mt-4">
+ <button
+ className="w-full rounded-md bg-indigo-600 px-4 py-2 text-white transition-all duration-300 hover:bg-indigo-700"
+ onClick={() => router.push(post.slug)}
+ type="button"
+ >
+ Read More
+ </button>
+ </div>This removes the nested <Link> tag while preserving expected navigation and accessibility.
Committable suggestion skipped: line range outside the PR's diff.
🧰 Tools
🪛 ESLint
[error] 124-124: Replace "w-full·rounded-md·bg-indigo-600·px-4·py-2·text-white·transition-all·duration-300·hover:bg-indigo-700" with 'w-full·rounded-md·bg-indigo-600·px-4·py-2·text-white·transition-all·duration-300·hover:bg-indigo-700'
(prettier/prettier)
[error] 124-124: Unexpected usage of doublequote.
(jsx-quotes)
|
@Mayaleeeee Please review this design. WDYT? Should we make this design change? |
|
@Mayaleeeee ?? |
|
Hello @zalabhavy Could you share the Figma file you worked on with me, please? I want to be sure you followed our guides in the design system to avoid any issues. Thanks for the pinging @sambhavgupta0705 @akshatnema |
|
@Mayaleeeee any update? |
Description
Added Updated Card Look.
Related issue(s)
Fixes #4086
Summary by CodeRabbit
Style
New Features
Accessibility