feat: add social sharing buttons to blog posts #3698
Conversation
AritraDey-Dev
requested review from
derberg,
akshatnema,
anshgoyalevil,
Mayaleeeee and
asyncapi-bot-eve
as code owners
WalkthroughThe changes add social media sharing functionality to several blog-related components. New imports for Twitter and LinkedIn icons are introduced, and sharing URLs and texts are computed based on each blog post's details. Social sharing links are added in multiple locations within the layout, post items, featured posts, and the blog index page, enabling users to share content on Twitter and LinkedIn directly from the interface. Changes
Suggested labels
Suggested reviewers
Poem
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
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: 3
🧹 Nitpick comments (1)
components/newsroom/FeaturedBlogPost.tsx (1)
115-132: Simplify icon size classes using Tailwind shorthand.The icon size classes can be simplified using Tailwind's shorthand notation.
- <IconTwitter className='h-6 w-6' /> + <IconTwitter className='size-6' /> - <IconLinkedIn className='h-6 w-6' /> + <IconLinkedIn className='size-6' />🧰 Tools
🪛 GitHub Actions: PR testing - if Node project
[warning] 122-122: Classnames 'h-6, w-6' could be replaced by the 'size-6' shorthand! tailwindcss/enforces-shorthand
[warning] 130-130: Classnames 'h-6, w-6' could be replaced by the 'size-6' shorthand! tailwindcss/enforces-shorthand
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (4)
components/layout/BlogLayout.tsx(4 hunks)components/navigation/BlogPostItem.tsx(3 hunks)components/newsroom/FeaturedBlogPost.tsx(3 hunks)pages/blog/index.tsx(2 hunks)
🧰 Additional context used
🪛 ESLint
components/newsroom/FeaturedBlogPost.tsx
[error] 1-15: Run autofix to sort these imports!
(simple-import-sort/imports)
pages/blog/index.tsx
[error] 1-17: Run autofix to sort these imports!
(simple-import-sort/imports)
components/layout/BlogLayout.tsx
[error] 1-16: Run autofix to sort these imports!
(simple-import-sort/imports)
components/navigation/BlogPostItem.tsx
[error] 1-16: Run autofix to sort these imports!
(simple-import-sort/imports)
🪛 GitHub Actions: PR testing - if Node project
components/newsroom/FeaturedBlogPost.tsx
[error] 1-1: Run autofix to sort these imports! simple-import-sort/imports
[warning] 122-122: Classnames 'h-6, w-6' could be replaced by the 'size-6' shorthand! tailwindcss/enforces-shorthand
[warning] 130-130: Classnames 'h-6, w-6' could be replaced by the 'size-6' shorthand! tailwindcss/enforces-shorthand
pages/blog/index.tsx
[error] 1-1: Run autofix to sort these imports! simple-import-sort/imports
[warning] 138-138: Invalid Tailwind CSS classnames order tailwindcss/classnames-order
[warning] 145-145: Classnames 'h-6, w-6' could be replaced by the 'size-6' shorthand! tailwindcss/enforces-shorthand
[warning] 153-153: Classnames 'h-6, w-6' could be replaced by the 'size-6' shorthand! tailwindcss/enforces-shorthand
components/layout/BlogLayout.tsx
[error] 1-1: Run autofix to sort these imports! simple-import-sort/imports
[warning] 98-98: Classnames 'h-6, w-6' could be replaced by the 'size-6' shorthand! tailwindcss/enforces-shorthand
[warning] 106-106: Classnames 'h-6, w-6' could be replaced by the 'size-6' shorthand! tailwindcss/enforces-shorthand
[warning] 146-146: Classnames 'h-6, w-6' could be replaced by the 'size-6' shorthand! tailwindcss/enforces-shorthand
[warning] 154-154: Classnames 'h-6, w-6' could be replaced by the 'size-6' shorthand! tailwindcss/enforces-shorthand
components/navigation/BlogPostItem.tsx
[error] 1-1: Run autofix to sort these imports! simple-import-sort/imports
[warning] 142-142: Classnames 'h-6, w-6' could be replaced by the 'size-6' shorthand! tailwindcss/enforces-shorthand
[warning] 150-150: Classnames 'h-6, w-6' could be replaced by the 'size-6' shorthand! tailwindcss/enforces-shorthand
⏰ Context from checks skipped due to timeout of 180000ms (1)
- GitHub Check: Lighthouse CI
🔇 Additional comments (2)
components/newsroom/FeaturedBlogPost.tsx (1)
46-47: LGTM! Safe URL encoding implementation.The implementation correctly uses
encodeURIComponentfor both the URL and text, ensuring safe sharing links.components/layout/BlogLayout.tsx (1)
44-45:❓ Verification inconclusive
Verify URL construction consistency across components.
The URL construction uses
router.asPathwhile other components usepost.slug. Ensure this difference is intentional.
🏁 Script executed:
#!/bin/bash # Search for URL construction patterns echo "Searching for URL construction patterns..." rg "https://www\.asyncapi\.com.*\$\{.*\}" -A 2Length of output: 142
Double-check URL construction consistency.
In components/layout/BlogLayout.tsx (lines 44–45), the URL is built usingrouter.asPathwhile other components usepost.slug. Since our initial search script didn’t yield the expected output, it’s advisable to manually verify that this divergence is intentional. Please confirm whether usingrouter.asPathhere is deliberate or if it should be aligned with the URL construction logic usingpost.slugelsewhere.
components/layout/BlogLayout.tsx
Outdated
| const shareUrl = encodeURIComponent(`https://www.asyncapi.com${router.asPath}`); | ||
| const shareText = encodeURIComponent(post.title); |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Extract social sharing buttons into a reusable component.
The social sharing buttons code is duplicated in the header and footer. Consider extracting this into a reusable component to improve maintainability.
Create a new component SocialShareButtons.tsx:
interface SocialShareButtonsProps {
url: string;
text: string;
}
export function SocialShareButtons({ url, text }: SocialShareButtonsProps) {
return (
<div className='mt-4 flex space-x-4'>
<a
href={`https://twitter.com/intent/tweet?text=${text}&url=${url}&hashtags=AsyncAPI`}
target='_blank'
rel='noopener noreferrer'
className='text-blue-500 hover:text-blue-700'
>
<IconTwitter className='size-6' />
</a>
<a
href={`https://www.linkedin.com/sharing/share-offsite/?url=${url}`}
target='_blank'
rel='noopener noreferrer'
className='text-blue-700 hover:text-blue-900'
>
<IconLinkedIn className='size-6' />
</a>
</div>
);
}Then use it in the layout:
<SocialShareButtons url={shareUrl} text={shareText} />Also applies to: 91-108, 139-156
| <div className='mt-4 flex space-x-4'> | ||
| <a | ||
| href={`https://twitter.com/intent/tweet?text=${shareText}&url=${shareUrl}&hashtags=AsyncAPI`} | ||
| target='_blank' | ||
| rel='noopener noreferrer' | ||
| className='text-blue-500 hover:text-blue-700' | ||
| > | ||
| <IconTwitter className='h-6 w-6' /> | ||
| </a> | ||
| <a | ||
| href={`https://www.linkedin.com/sharing/share-offsite/?url=${shareUrl}`} | ||
| target='_blank' | ||
| rel='noopener noreferrer' | ||
| className='text-blue-700 hover:text-blue-900' | ||
| > | ||
| <IconLinkedIn className='h-6 w-6' /> | ||
| </a> | ||
| </div> |
There was a problem hiding this comment.
Prevent social share clicks from triggering parent Link navigation.
The social sharing buttons are inside a parent Link component, which might cause unintended navigation when clicking the share buttons.
- <div className='mt-4 flex space-x-4'>
+ <div className='mt-4 flex space-x-4' onClick={(e) => e.preventDefault()}>
<a
href={`https://twitter.com/intent/tweet?text=${shareText}&url=${shareUrl}&hashtags=AsyncAPI`}
target='_blank'
rel='noopener noreferrer'
className='text-blue-500 hover:text-blue-700'
+ onClick={(e) => e.stopPropagation()}
>
<IconTwitter className='size-6' />
</a>
<a
href={`https://www.linkedin.com/sharing/share-offsite/?url=${shareUrl}`}
target='_blank'
rel='noopener noreferrer'
className='text-blue-700 hover:text-blue-900'
+ onClick={(e) => e.stopPropagation()}
>
<IconLinkedIn className='size-6' />
</a>
</div>Committable suggestion skipped: line range outside the PR's diff.
🧰 Tools
🪛 GitHub Actions: PR testing - if Node project
[warning] 142-142: Classnames 'h-6, w-6' could be replaced by the 'size-6' shorthand! tailwindcss/enforces-shorthand
[warning] 150-150: Classnames 'h-6, w-6' could be replaced by the 'size-6' shorthand! tailwindcss/enforces-shorthand
| <div className='mt-8 flex space-x-4 justify-center'> | ||
| <a | ||
| href={`https://twitter.com/intent/tweet?text=${encodeURIComponent('Check out this blog!')}&url=${encodeURIComponent('https://www.asyncapi.com/blog/2024-annual-summary#social-media')}`} | ||
| target='_blank' | ||
| rel='noopener noreferrer' | ||
| className='text-blue-500 hover:text-blue-700' | ||
| > | ||
| <IconTwitter className='h-6 w-6' /> | ||
| </a> | ||
| <a | ||
| href={`https://www.linkedin.com/sharing/share-offsite/?url=${encodeURIComponent('https://www.asyncapi.com/blog/2024-annual-summary#social-media')}`} | ||
| target='_blank' | ||
| rel='noopener noreferrer' | ||
| className='text-blue-700 hover:text-blue-900' | ||
| > | ||
| <IconLinkedIn className='h-6 w-6' /> | ||
| </a> | ||
| </div> |
There was a problem hiding this comment.
Remove hardcoded values and maintain URL consistency.
The sharing implementation uses hardcoded values and a different URL format compared to other components.
- <div className='mt-8 flex space-x-4 justify-center'>
+ <div className='mt-8 flex justify-center space-x-4'>
<a
- href={`https://twitter.com/intent/tweet?text=${encodeURIComponent('Check out this blog!')}&url=${encodeURIComponent('https://www.asyncapi.com/blog/2024-annual-summary#social-media')}`}
+ href={`https://twitter.com/intent/tweet?text=${encodeURIComponent('Check out AsyncAPI Blog!')}&url=${encodeURIComponent('https://www.asyncapi.com/blog')}`}
target='_blank'
rel='noopener noreferrer'
className='text-blue-500 hover:text-blue-700'
>
- <IconTwitter className='h-6 w-6' />
+ <IconTwitter className='size-6' />
</a>
<a
- href={`https://www.linkedin.com/sharing/share-offsite/?url=${encodeURIComponent('https://www.asyncapi.com/blog/2024-annual-summary#social-media')}`}
+ href={`https://www.linkedin.com/sharing/share-offsite/?url=${encodeURIComponent('https://www.asyncapi.com/blog')}`}
target='_blank'
rel='noopener noreferrer'
className='text-blue-700 hover:text-blue-900'
>
- <IconLinkedIn className='h-6 w-6' />
+ <IconLinkedIn className='size-6' />
</a>
</div>📝 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.
| <div className='mt-8 flex space-x-4 justify-center'> | |
| <a | |
| href={`https://twitter.com/intent/tweet?text=${encodeURIComponent('Check out this blog!')}&url=${encodeURIComponent('https://www.asyncapi.com/blog/2024-annual-summary#social-media')}`} | |
| target='_blank' | |
| rel='noopener noreferrer' | |
| className='text-blue-500 hover:text-blue-700' | |
| > | |
| <IconTwitter className='h-6 w-6' /> | |
| </a> | |
| <a | |
| href={`https://www.linkedin.com/sharing/share-offsite/?url=${encodeURIComponent('https://www.asyncapi.com/blog/2024-annual-summary#social-media')}`} | |
| target='_blank' | |
| rel='noopener noreferrer' | |
| className='text-blue-700 hover:text-blue-900' | |
| > | |
| <IconLinkedIn className='h-6 w-6' /> | |
| </a> | |
| </div> | |
| <div className='mt-8 flex justify-center space-x-4'> | |
| <a | |
| href={`https://twitter.com/intent/tweet?text=${encodeURIComponent('Check out AsyncAPI Blog!')}&url=${encodeURIComponent('https://www.asyncapi.com/blog')}`} | |
| target='_blank' | |
| rel='noopener noreferrer' | |
| className='text-blue-500 hover:text-blue-700' | |
| > | |
| <IconTwitter className='size-6' /> | |
| </a> | |
| <a | |
| href={`https://www.linkedin.com/sharing/share-offsite/?url=${encodeURIComponent('https://www.asyncapi.com/blog')}`} | |
| target='_blank' | |
| rel='noopener noreferrer' | |
| className='text-blue-700 hover:text-blue-900' | |
| > | |
| <IconLinkedIn className='size-6' /> | |
| </a> | |
| </div> |
🧰 Tools
🪛 GitHub Actions: PR testing - if Node project
[warning] 138-138: Invalid Tailwind CSS classnames order tailwindcss/classnames-order
[warning] 145-145: Classnames 'h-6, w-6' could be replaced by the 'size-6' shorthand! tailwindcss/enforces-shorthand
[warning] 153-153: Classnames 'h-6, w-6' could be replaced by the 'size-6' shorthand! tailwindcss/enforces-shorthand
There was a problem hiding this comment.
Actionable comments posted: 3
🧹 Nitpick comments (1)
components/layout/BlogLayout.tsx (1)
43-45: Make URL construction more robust.The URL construction should handle different environments and ensure the base URL is consistent.
Consider using environment variables or a configuration constant for the base URL:
- const shareUrl = `https://www.asyncapi.com${router.asPath}`; + const baseUrl = process.env.NEXT_PUBLIC_BASE_URL || 'https://www.asyncapi.com'; + const shareUrl = `${baseUrl}${router.asPath}`; const shareText = post.title;
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
components/SocialShareButtons.tsx(1 hunks)components/layout/BlogLayout.tsx(4 hunks)
🧰 Additional context used
🪛 ESLint
components/SocialShareButtons.tsx
[error] 1-2: Run autofix to sort these imports!
(simple-import-sort/imports)
[error] 2-2: Expected 1 empty line after import statement not followed by another import.
(import/newline-after-import)
[error] 4-4: Delete ··
(prettier/prettier)
[error] 5-5: Replace ···· with ··
(prettier/prettier)
[error] 6-6: Delete ··
(prettier/prettier)
[error] 7-7: Trailing spaces not allowed.
(no-trailing-spaces)
[error] 7-7: Delete ··
(prettier/prettier)
[error] 8-8: Delete ··
(prettier/prettier)
[error] 9-9: Delete ··
(prettier/prettier)
[error] 10-10: Delete ··
(prettier/prettier)
[error] 11-11: Delete ··
(prettier/prettier)
[error] 12-12: Delete ··
(prettier/prettier)
[error] 13-13: Delete ··
(prettier/prettier)
[error] 14-14: Replace ·········· with ········
(prettier/prettier)
[error] 15-15: Delete ··
(prettier/prettier)
[error] 16-16: Delete ··
(prettier/prettier)
[error] 17-17: Replace ·········· with ········
(prettier/prettier)
[error] 18-18: Delete ··
(prettier/prettier)
[error] 19-19: Delete ··
(prettier/prettier)
[error] 20-20: Delete ··
(prettier/prettier)
[error] 21-21: Delete ··
(prettier/prettier)
[error] 22-22: Delete ··
(prettier/prettier)
[error] 23-23: Delete ··
(prettier/prettier)
[error] 24-24: Delete ··
(prettier/prettier)
[error] 25-25: Delete ··
(prettier/prettier)
[error] 26-26: Delete ··
(prettier/prettier)
[error] 27-27: Delete ··
(prettier/prettier)
[error] 28-28: Replace ···· with ··
(prettier/prettier)
[error] 29-29: Replace ··} with }⏎
(prettier/prettier)
[error] 29-29: Newline required at end of file but not found.
(eol-last)
components/layout/BlogLayout.tsx
[error] 1-15: Run autofix to sort these imports!
(simple-import-sort/imports)
[error] 15-15: Trailing spaces not allowed.
(no-trailing-spaces)
[error] 15-15: Delete ·
(prettier/prettier)
🪛 GitHub Actions: PR testing - if Node project
components/SocialShareButtons.tsx
[error] 1-1: Run autofix to sort these imports! simple-import-sort/imports
[error] 2-2: Expected 1 empty line after import statement not followed by another import. import/newline-after-import
[error] 4-4: Delete ·· prettier/prettier
[error] 5-5: Replace ···· with ·· prettier/prettier
[error] 6-6: Delete ·· prettier/prettier
[error] 7-7: Trailing spaces not allowed. no-trailing-spaces
[error] 8-8: Delete ·· prettier/prettier
[error] 8-10: Delete ·· prettier/prettier
[error] 9-9: Delete ·· prettier/prettier
[error] 10-10: Delete ·· prettier/prettier
[error] 11-11: Delete ·· prettier/prettier
[error] 12-12: Delete ·· prettier/prettier
[error] 13-13: Delete ·· prettier/prettier
[error] 14-14: Replace ·········· with ········ prettier/prettier
[error] 15-15: Delete ·· prettier/prettier
[error] 16-16: Delete ·· prettier/prettier
[error] 17-17: Replace ·········· with ········ prettier/prettier
[error] 18-18: Delete ·· prettier/prettier
[error] 19-19: Delete ·· prettier/prettier
[error] 20-20: Delete ·· prettier/prettier
[error] 21-21: Delete ·· prettier/prettier
[error] 22-22: Delete ·· prettier/prettier
[error] 23-23: Delete ·· prettier/prettier
[error] 24-24: Delete ·· prettier/prettier
[error] 25-25: Delete ·· prettier/prettier
[error] 26-26: Delete ·· prettier/prettier
[error] 27-27: Delete ·· prettier/prettier
[error] 28-28: Replace ···· with ·· prettier/prettier
[error] 29-29: Replace ··} with }⏎ prettier/prettier
[error] 29-29: Newline required at end of file but not found. eol-last
components/layout/BlogLayout.tsx
[error] 1-1: Run autofix to sort these imports! simple-import-sort/imports
[error] 15-15: Trailing spaces not allowed. no-trailing-spaces
[error] 15-15: Delete · prettier/prettier
🔇 Additional comments (1)
components/layout/BlogLayout.tsx (1)
90-90: LGTM! Clean implementation of social sharing buttons.The SocialShareButtons component is properly implemented in both the header and article sections, following the recommended refactoring pattern.
Also applies to: 121-121
| export function SocialShareButtons({ url, text }: SocialShareButtonsProps) { | ||
| return ( | ||
| <div className='mt-4 flex space-x-4'> | ||
| <a | ||
| href={`https://twitter.com/intent/tweet?text=${text}&url=${url}&hashtags=AsyncAPI`} | ||
| target='_blank' | ||
| rel='noopener noreferrer' | ||
| className='text-blue-500 hover:text-blue-700' | ||
| > | ||
| <IconTwitter className='size-6' /> | ||
| </a> | ||
| <a | ||
| href={`https://www.linkedin.com/sharing/share-offsite/?url=${url}`} | ||
| target='_blank' | ||
| rel='noopener noreferrer' | ||
| className='text-blue-700 hover:text-blue-900' | ||
| > | ||
| <IconLinkedIn className='size-6' /> | ||
| </a> | ||
| </div> | ||
| ); | ||
| } |
There was a problem hiding this comment.
Add URL encoding for share parameters.
The URL and text parameters should be properly encoded to prevent XSS and ensure the sharing links work correctly with special characters.
Apply this diff to add URL encoding:
export function SocialShareButtons({ url, text }: SocialShareButtonsProps) {
return (
<div className='mt-4 flex space-x-4'>
<a
- href={`https://twitter.com/intent/tweet?text=${text}&url=${url}&hashtags=AsyncAPI`}
+ href={`https://twitter.com/intent/tweet?text=${encodeURIComponent(text)}&url=${encodeURIComponent(url)}&hashtags=AsyncAPI`}
target='_blank'
rel='noopener noreferrer'
className='text-blue-500 hover:text-blue-700'
>
<IconTwitter className='size-6' />
</a>
<a
- href={`https://www.linkedin.com/sharing/share-offsite/?url=${url}`}
+ href={`https://www.linkedin.com/sharing/share-offsite/?url=${encodeURIComponent(url)}`}
target='_blank'
rel='noopener noreferrer'
className='text-blue-700 hover:text-blue-900'
>
<IconLinkedIn className='size-6' />
</a>
</div>
);
}📝 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.
| export function SocialShareButtons({ url, text }: SocialShareButtonsProps) { | |
| return ( | |
| <div className='mt-4 flex space-x-4'> | |
| <a | |
| href={`https://twitter.com/intent/tweet?text=${text}&url=${url}&hashtags=AsyncAPI`} | |
| target='_blank' | |
| rel='noopener noreferrer' | |
| className='text-blue-500 hover:text-blue-700' | |
| > | |
| <IconTwitter className='size-6' /> | |
| </a> | |
| <a | |
| href={`https://www.linkedin.com/sharing/share-offsite/?url=${url}`} | |
| target='_blank' | |
| rel='noopener noreferrer' | |
| className='text-blue-700 hover:text-blue-900' | |
| > | |
| <IconLinkedIn className='size-6' /> | |
| </a> | |
| </div> | |
| ); | |
| } | |
| export function SocialShareButtons({ url, text }: SocialShareButtonsProps) { | |
| return ( | |
| <div className='mt-4 flex space-x-4'> | |
| <a | |
| href={`https://twitter.com/intent/tweet?text=${encodeURIComponent(text)}&url=${encodeURIComponent(url)}&hashtags=AsyncAPI`} | |
| target='_blank' | |
| rel='noopener noreferrer' | |
| className='text-blue-500 hover:text-blue-700' | |
| > | |
| <IconTwitter className='size-6' /> | |
| </a> | |
| <a | |
| href={`https://www.linkedin.com/sharing/share-offsite/?url=${encodeURIComponent(url)}`} | |
| target='_blank' | |
| rel='noopener noreferrer' | |
| className='text-blue-700 hover:text-blue-900' | |
| > | |
| <IconLinkedIn className='size-6' /> | |
| </a> | |
| </div> | |
| ); | |
| } |
🧰 Tools
🪛 ESLint
[error] 8-8: Delete ··
(prettier/prettier)
[error] 9-9: Delete ··
(prettier/prettier)
[error] 10-10: Delete ··
(prettier/prettier)
[error] 11-11: Delete ··
(prettier/prettier)
[error] 12-12: Delete ··
(prettier/prettier)
[error] 13-13: Delete ··
(prettier/prettier)
[error] 14-14: Replace ·········· with ········
(prettier/prettier)
[error] 15-15: Delete ··
(prettier/prettier)
[error] 16-16: Delete ··
(prettier/prettier)
[error] 17-17: Replace ·········· with ········
(prettier/prettier)
[error] 18-18: Delete ··
(prettier/prettier)
[error] 19-19: Delete ··
(prettier/prettier)
[error] 20-20: Delete ··
(prettier/prettier)
[error] 21-21: Delete ··
(prettier/prettier)
[error] 22-22: Delete ··
(prettier/prettier)
[error] 23-23: Delete ··
(prettier/prettier)
[error] 24-24: Delete ··
(prettier/prettier)
[error] 25-25: Delete ··
(prettier/prettier)
[error] 26-26: Delete ··
(prettier/prettier)
[error] 27-27: Delete ··
(prettier/prettier)
[error] 28-28: Replace ···· with ··
(prettier/prettier)
[error] 29-29: Replace ··} with }⏎
(prettier/prettier)
[error] 29-29: Newline required at end of file but not found.
(eol-last)
🪛 GitHub Actions: PR testing - if Node project
[error] 8-8: Delete ·· prettier/prettier
[error] 8-10: Delete ·· prettier/prettier
[error] 9-9: Delete ·· prettier/prettier
[error] 10-10: Delete ·· prettier/prettier
[error] 11-11: Delete ·· prettier/prettier
[error] 12-12: Delete ·· prettier/prettier
[error] 13-13: Delete ·· prettier/prettier
[error] 14-14: Replace ·········· with ········ prettier/prettier
[error] 15-15: Delete ·· prettier/prettier
[error] 16-16: Delete ·· prettier/prettier
[error] 17-17: Replace ·········· with ········ prettier/prettier
[error] 18-18: Delete ·· prettier/prettier
[error] 19-19: Delete ·· prettier/prettier
[error] 20-20: Delete ·· prettier/prettier
[error] 21-21: Delete ·· prettier/prettier
[error] 22-22: Delete ·· prettier/prettier
[error] 23-23: Delete ·· prettier/prettier
[error] 24-24: Delete ·· prettier/prettier
[error] 25-25: Delete ·· prettier/prettier
[error] 26-26: Delete ·· prettier/prettier
[error] 27-27: Delete ·· prettier/prettier
[error] 28-28: Replace ···· with ·· prettier/prettier
[error] 29-29: Replace ··} with }⏎ prettier/prettier
[error] 29-29: Newline required at end of file but not found. eol-last
| import IconTwitter from './icons/Twitter'; | ||
| import IconLinkedIn from './icons/LinkedIn'; | ||
| interface SocialShareButtonsProps { | ||
| url: string; | ||
| text: string; | ||
| } |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Fix import sorting.
The imports need to be sorted according to the project's conventions.
Apply this diff to fix the import sorting:
-import IconTwitter from './icons/Twitter';
-import IconLinkedIn from './icons/LinkedIn';
+import IconLinkedIn from './icons/LinkedIn';
+import IconTwitter from './icons/Twitter';
interface SocialShareButtonsProps {
url: string;
text: string;
}📝 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.
| import IconTwitter from './icons/Twitter'; | |
| import IconLinkedIn from './icons/LinkedIn'; | |
| interface SocialShareButtonsProps { | |
| url: string; | |
| text: string; | |
| } | |
| import IconLinkedIn from './icons/LinkedIn'; | |
| import IconTwitter from './icons/Twitter'; | |
| interface SocialShareButtonsProps { | |
| url: string; | |
| text: string; | |
| } |
🧰 Tools
🪛 ESLint
[error] 1-2: Run autofix to sort these imports!
(simple-import-sort/imports)
[error] 2-2: Expected 1 empty line after import statement not followed by another import.
(import/newline-after-import)
[error] 4-4: Delete ··
(prettier/prettier)
[error] 5-5: Replace ···· with ··
(prettier/prettier)
[error] 6-6: Delete ··
(prettier/prettier)
🪛 GitHub Actions: PR testing - if Node project
[error] 1-1: Run autofix to sort these imports! simple-import-sort/imports
[error] 2-2: Expected 1 empty line after import statement not followed by another import. import/newline-after-import
[error] 4-4: Delete ·· prettier/prettier
[error] 5-5: Replace ···· with ·· prettier/prettier
[error] 6-6: Delete ·· prettier/prettier
| @@ -12,6 +12,7 @@ import AuthorAvatars from '../AuthorAvatars'; | |||
| import Head from '../Head'; | |||
| import TOC from '../TOC'; | |||
| import Container from './Container'; | |||
| import { SocialShareButtons } from '../SocialShareButtons'; | |||
There was a problem hiding this comment.
🛠️ Refactor suggestion
Remove trailing space in import statement.
The import statement has a trailing space that needs to be removed.
Apply this diff to fix the formatting:
-import { SocialShareButtons } from '../SocialShareButtons';
+import { SocialShareButtons } from '../SocialShareButtons';📝 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.
| import { SocialShareButtons } from '../SocialShareButtons'; | |
| import { SocialShareButtons } from '../SocialShareButtons'; |
🧰 Tools
🪛 ESLint
[error] 1-15: Run autofix to sort these imports!
(simple-import-sort/imports)
[error] 15-15: Trailing spaces not allowed.
(no-trailing-spaces)
[error] 15-15: Delete ·
(prettier/prettier)
🪛 GitHub Actions: PR testing - if Node project
[error] 15-15: Trailing spaces not allowed. no-trailing-spaces
[error] 15-15: Delete · prettier/prettier
AritraDey-Dev
force-pushed
the
feat/add-social-media-icons
branch
from
375dfb3 to
ac70916
Compare
There was a problem hiding this comment.
Actionable comments posted: 1
🔭 Outside diff range comments (1)
pages/blog/index.tsx (1)
1-17:⚠️ Potential issueSort imports according to project standards.
The imports need to be sorted to comply with the project's standards and fix the pipeline failure.
Apply this diff to sort the imports:
-import { useRouter } from 'next/router'; -import React, { useContext, useEffect, useState } from 'react'; +import React, { useContext, useEffect, useState } from 'react'; +import { useRouter } from 'next/router'; -import Empty from '@/components/illustrations/Empty'; -import GenericLayout from '@/components/layout/GenericLayout'; -import Loader from '@/components/Loader'; -import BlogPostItem from '@/components/navigation/BlogPostItem'; -import Filter from '@/components/navigation/Filter'; -import Heading from '@/components/typography/Heading'; -import Paragraph from '@/components/typography/Paragraph'; -import TextLink from '@/components/typography/TextLink'; -import BlogContext from '@/context/BlogContext'; -import type { IBlogPost } from '@/types/post'; -import { HeadingLevel, HeadingTypeStyle } from '@/types/typography/Heading'; -import { ParagraphTypeStyle } from '@/types/typography/Paragraph'; -import IconTwitter from '@/components/icons/Twitter'; -import IconLinkedIn from '@/components/icons/LinkedIn'; +import BlogContext from '@/context/BlogContext'; +import Empty from '@/components/illustrations/Empty'; +import GenericLayout from '@/components/layout/GenericLayout'; +import IconLinkedIn from '@/components/icons/LinkedIn'; +import IconTwitter from '@/components/icons/Twitter'; +import Loader from '@/components/Loader'; +import BlogPostItem from '@/components/navigation/BlogPostItem'; +import Filter from '@/components/navigation/Filter'; +import Heading from '@/components/typography/Heading'; +import Paragraph from '@/components/typography/Paragraph'; +import TextLink from '@/components/typography/TextLink'; +import type { IBlogPost } from '@/types/post'; +import { HeadingLevel, HeadingTypeStyle } from '@/types/typography/Heading'; +import { ParagraphTypeStyle } from '@/types/typography/Paragraph';🧰 Tools
🪛 ESLint
[error] 1-17: Run autofix to sort these imports!
(simple-import-sort/imports)
🪛 GitHub Actions: PR testing - if Node project
[error] 1-1: Run autofix to sort these imports! simple-import-sort/imports
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (5)
components/SocialShareButtons.tsx(1 hunks)components/layout/BlogLayout.tsx(4 hunks)components/navigation/BlogPostItem.tsx(3 hunks)components/newsroom/FeaturedBlogPost.tsx(3 hunks)pages/blog/index.tsx(2 hunks)
🧰 Additional context used
🪛 ESLint
components/newsroom/FeaturedBlogPost.tsx
[error] 1-15: Run autofix to sort these imports!
(simple-import-sort/imports)
components/layout/BlogLayout.tsx
[error] 1-15: Run autofix to sort these imports!
(simple-import-sort/imports)
[error] 15-15: Trailing spaces not allowed.
(no-trailing-spaces)
[error] 15-15: Delete ·
(prettier/prettier)
components/SocialShareButtons.tsx
[error] 1-2: Run autofix to sort these imports!
(simple-import-sort/imports)
[error] 2-2: Expected 1 empty line after import statement not followed by another import.
(import/newline-after-import)
[error] 4-4: Delete ··
(prettier/prettier)
[error] 5-5: Replace ···· with ··
(prettier/prettier)
[error] 6-6: Delete ··
(prettier/prettier)
[error] 7-7: Trailing spaces not allowed.
(no-trailing-spaces)
[error] 7-7: Delete ··
(prettier/prettier)
[error] 8-8: Delete ··
(prettier/prettier)
[error] 9-9: Delete ··
(prettier/prettier)
[error] 10-10: Delete ··
(prettier/prettier)
[error] 11-11: Delete ··
(prettier/prettier)
[error] 12-12: Delete ··
(prettier/prettier)
[error] 13-13: Delete ··
(prettier/prettier)
[error] 14-14: Replace ·········· with ········
(prettier/prettier)
[error] 15-15: Delete ··
(prettier/prettier)
[error] 16-16: Delete ··
(prettier/prettier)
[error] 17-17: Replace ·········· with ········
(prettier/prettier)
[error] 18-18: Delete ··
(prettier/prettier)
[error] 19-19: Delete ··
(prettier/prettier)
[error] 20-20: Delete ··
(prettier/prettier)
[error] 21-21: Delete ··
(prettier/prettier)
[error] 22-22: Delete ··
(prettier/prettier)
[error] 23-23: Delete ··
(prettier/prettier)
[error] 24-24: Delete ··
(prettier/prettier)
[error] 25-25: Delete ··
(prettier/prettier)
[error] 26-26: Delete ··
(prettier/prettier)
[error] 27-27: Delete ··
(prettier/prettier)
[error] 28-28: Replace ···· with ··
(prettier/prettier)
[error] 29-29: Replace ··} with }⏎
(prettier/prettier)
[error] 29-29: Newline required at end of file but not found.
(eol-last)
components/navigation/BlogPostItem.tsx
[error] 1-16: Run autofix to sort these imports!
(simple-import-sort/imports)
pages/blog/index.tsx
[error] 1-17: Run autofix to sort these imports!
(simple-import-sort/imports)
🪛 GitHub Actions: PR testing - if Node project
components/newsroom/FeaturedBlogPost.tsx
[error] 1-1: Run autofix to sort these imports! simple-import-sort/imports
[warning] 122-122: Classnames 'h-6, w-6' could be replaced by the 'size-6' shorthand! tailwindcss/enforces-shorthand
[warning] 130-130: Classnames 'h-6, w-6' could be replaced by the 'size-6' shorthand! tailwindcss/enforces-shorthand
components/layout/BlogLayout.tsx
[error] 1-1: Run autofix to sort these imports! simple-import-sort/imports
[error] 15-15: Trailing spaces not allowed. no-trailing-spaces
[error] 15-15: Delete · prettier/prettier
components/SocialShareButtons.tsx
[error] 1-1: Run autofix to sort these imports! simple-import-sort/imports
[error] 2-2: Expected 1 empty line after import statement not followed by another import. import/newline-after-import
[error] 4-4: Delete ·· prettier/prettier
[error] 5-5: Replace ···· with ·· prettier/prettier
[error] 6-6: Delete ·· prettier/prettier
[error] 7-7: Trailing spaces not allowed. no-trailing-spaces
[error] 8-8: Delete ·· prettier/prettier
[error] 9-9: Delete ·· prettier/prettier
[error] 14-14: Replace ·········· with ········ prettier/prettier
[error] 29-29: Newline required at end of file but not found. eol-last
components/navigation/BlogPostItem.tsx
[error] 1-1: Run autofix to sort these imports! simple-import-sort/imports
[warning] 142-142: Classnames 'h-6, w-6' could be replaced by the 'size-6' shorthand! tailwindcss/enforces-shorthand
[warning] 150-150: Classnames 'h-6, w-6' could be replaced by the 'size-6' shorthand! tailwindcss/enforces-shorthand
pages/blog/index.tsx
[error] 1-1: Run autofix to sort these imports! simple-import-sort/imports
[warning] 138-138: Invalid Tailwind CSS classnames order tailwindcss/classnames-order
[warning] 145-145: Classnames 'h-6, w-6' could be replaced by the 'size-6' shorthand! tailwindcss/enforces-shorthand
[warning] 153-153: Classnames 'h-6, w-6' could be replaced by the 'size-6' shorthand! tailwindcss/enforces-shorthand
⏰ Context from checks skipped due to timeout of 180000ms (3)
- GitHub Check: Redirect rules - asyncapi-website
- GitHub Check: Header rules - asyncapi-website
- GitHub Check: Pages changed - asyncapi-website
🔇 Additional comments (8)
components/SocialShareButtons.tsx (2)
1-2: Fix import sorting.The imports need to be sorted according to the project's conventions.
Apply this diff to fix the import sorting:
-import IconTwitter from './icons/Twitter'; -import IconLinkedIn from './icons/LinkedIn'; +import IconLinkedIn from './icons/LinkedIn'; +import IconTwitter from './icons/Twitter';🧰 Tools
🪛 ESLint
[error] 1-2: Run autofix to sort these imports!
(simple-import-sort/imports)
[error] 2-2: Expected 1 empty line after import statement not followed by another import.
(import/newline-after-import)
🪛 GitHub Actions: PR testing - if Node project
[error] 1-1: Run autofix to sort these imports! simple-import-sort/imports
[error] 2-2: Expected 1 empty line after import statement not followed by another import. import/newline-after-import
8-29: Add URL encoding for share parameters.The URL and text parameters should be properly encoded to prevent XSS and ensure the sharing links work correctly with special characters.
Apply this diff to add URL encoding:
export function SocialShareButtons({ url, text }: SocialShareButtonsProps) { return ( <div className='mt-4 flex space-x-4'> <a - href={`https://twitter.com/intent/tweet?text=${text}&url=${url}&hashtags=AsyncAPI`} + href={`https://twitter.com/intent/tweet?text=${encodeURIComponent(text)}&url=${encodeURIComponent(url)}&hashtags=AsyncAPI`} target='_blank' rel='noopener noreferrer' className='text-blue-500 hover:text-blue-700' > <IconTwitter className='size-6' /> </a> <a - href={`https://www.linkedin.com/sharing/share-offsite/?url=${url}`} + href={`https://www.linkedin.com/sharing/share-offsite/?url=${encodeURIComponent(url)}`} target='_blank' rel='noopener noreferrer' className='text-blue-700 hover:text-blue-900' > <IconLinkedIn className='size-6' /> </a> </div> ); }🧰 Tools
🪛 ESLint
[error] 8-8: Delete
··(prettier/prettier)
[error] 9-9: Delete
··(prettier/prettier)
[error] 10-10: Delete
··(prettier/prettier)
[error] 11-11: Delete
··(prettier/prettier)
[error] 12-12: Delete
··(prettier/prettier)
[error] 13-13: Delete
··(prettier/prettier)
[error] 14-14: Replace
··········with········(prettier/prettier)
[error] 15-15: Delete
··(prettier/prettier)
[error] 16-16: Delete
··(prettier/prettier)
[error] 17-17: Replace
··········with········(prettier/prettier)
[error] 18-18: Delete
··(prettier/prettier)
[error] 19-19: Delete
··(prettier/prettier)
[error] 20-20: Delete
··(prettier/prettier)
[error] 21-21: Delete
··(prettier/prettier)
[error] 22-22: Delete
··(prettier/prettier)
[error] 23-23: Delete
··(prettier/prettier)
[error] 24-24: Delete
··(prettier/prettier)
[error] 25-25: Delete
··(prettier/prettier)
[error] 26-26: Delete
··(prettier/prettier)
[error] 27-27: Delete
··(prettier/prettier)
[error] 28-28: Replace
····with··(prettier/prettier)
[error] 29-29: Replace
··}with}⏎(prettier/prettier)
[error] 29-29: Newline required at end of file but not found.
(eol-last)
🪛 GitHub Actions: PR testing - if Node project
[error] 8-8: Delete
··prettier/prettier
[error] 9-9: Delete
··prettier/prettier
[error] 14-14: Replace
··········with········prettier/prettier
[error] 29-29: Newline required at end of file but not found. eol-last
components/layout/BlogLayout.tsx (2)
15-15: Remove trailing space in import statement.The import statement has a trailing space that needs to be removed.
Apply this diff to fix the formatting:
-import { SocialShareButtons } from '../SocialShareButtons'; +import { SocialShareButtons } from '../SocialShareButtons';🧰 Tools
🪛 ESLint
[error] 1-15: Run autofix to sort these imports!
(simple-import-sort/imports)
[error] 15-15: Trailing spaces not allowed.
(no-trailing-spaces)
[error] 15-15: Delete
·(prettier/prettier)
🪛 GitHub Actions: PR testing - if Node project
[error] 15-15: Trailing spaces not allowed. no-trailing-spaces
[error] 15-15: Delete
·prettier/prettier
43-44: LGTM! Share URL and text computation.The variables are correctly defined and will provide proper values for social sharing.
components/newsroom/FeaturedBlogPost.tsx (1)
46-47: LGTM! URL encoding is properly implemented.The
encodeURIComponentis correctly used for both the URL and text parameters.components/navigation/BlogPostItem.tsx (2)
56-57: LGTM! URL encoding is properly implemented.The
encodeURIComponentis correctly used for both the URL and text parameters.
135-152: Prevent social share clicks from triggering parent Link navigation.The social sharing buttons are inside a parent Link component, which might cause unintended navigation when clicking the share buttons.
Apply this diff to prevent event propagation:
- <div className='mt-4 flex space-x-4'> + <div className='mt-4 flex space-x-4' onClick={(e) => e.preventDefault()}> <a href={`https://twitter.com/intent/tweet?text=${shareText}&url=${shareUrl}&hashtags=AsyncAPI`} target='_blank' rel='noopener noreferrer' className='text-blue-500 hover:text-blue-700' + onClick={(e) => e.stopPropagation()} > - <IconTwitter className='h-6 w-6' /> + <IconTwitter className='size-6' /> </a> <a href={`https://www.linkedin.com/sharing/share-offsite/?url=${shareUrl}`} target='_blank' rel='noopener noreferrer' className='text-blue-700 hover:text-blue-900' + onClick={(e) => e.stopPropagation()} > - <IconLinkedIn className='h-6 w-6' /> + <IconLinkedIn className='size-6' /> </a> </div>🧰 Tools
🪛 GitHub Actions: PR testing - if Node project
[warning] 142-142: Classnames 'h-6, w-6' could be replaced by the 'size-6' shorthand! tailwindcss/enforces-shorthand
[warning] 150-150: Classnames 'h-6, w-6' could be replaced by the 'size-6' shorthand! tailwindcss/enforces-shorthand
pages/blog/index.tsx (1)
138-155: Remove hardcoded values and maintain URL consistency.The social sharing implementation has several issues:
- Hardcoded URL points to a specific blog post instead of the blog index
- Generic sharing text doesn't reflect the blog index content
- Tailwind CSS classes need optimization
Apply this diff to fix the issues:
- <div className='mt-8 flex space-x-4 justify-center'> + <div className='mt-8 flex justify-center space-x-4'> <a - href={`https://twitter.com/intent/tweet?text=${encodeURIComponent('Check out this blog!')}&url=${encodeURIComponent('https://www.asyncapi.com/blog/2024-annual-summary#social-media')}`} + href={`https://twitter.com/intent/tweet?text=${encodeURIComponent('Discover the latest stories from the AsyncAPI community!')}&url=${encodeURIComponent('https://www.asyncapi.com/blog')}`} target='_blank' rel='noopener noreferrer' className='text-blue-500 hover:text-blue-700' > - <IconTwitter className='h-6 w-6' /> + <IconTwitter className='size-6' /> </a> <a - href={`https://www.linkedin.com/sharing/share-offsite/?url=${encodeURIComponent('https://www.asyncapi.com/blog/2024-annual-summary#social-media')}`} + href={`https://www.linkedin.com/sharing/share-offsite/?url=${encodeURIComponent('https://www.asyncapi.com/blog')}`} target='_blank' rel='noopener noreferrer' className='text-blue-700 hover:text-blue-900' > - <IconLinkedIn className='h-6 w-6' /> + <IconLinkedIn className='size-6' /> </a> </div>Additionally, consider extracting this into a reusable component to maintain consistency with other blog components as mentioned in the PR objectives.
🧰 Tools
🪛 GitHub Actions: PR testing - if Node project
[warning] 138-138: Invalid Tailwind CSS classnames order tailwindcss/classnames-order
[warning] 145-145: Classnames 'h-6, w-6' could be replaced by the 'size-6' shorthand! tailwindcss/enforces-shorthand
[warning] 153-153: Classnames 'h-6, w-6' could be replaced by the 'size-6' shorthand! tailwindcss/enforces-shorthand
| <div className='mt-4 flex space-x-4'> | ||
| <a | ||
| href={`https://twitter.com/intent/tweet?text=${shareText}&url=${shareUrl}&hashtags=AsyncAPI`} | ||
| target='_blank' | ||
| rel='noopener noreferrer' | ||
| className='text-blue-500 hover:text-blue-700' | ||
| > | ||
| <IconTwitter className='h-6 w-6' /> | ||
| </a> | ||
| <a | ||
| href={`https://www.linkedin.com/sharing/share-offsite/?url=${shareUrl}`} | ||
| target='_blank' | ||
| rel='noopener noreferrer' | ||
| className='text-blue-700 hover:text-blue-900' | ||
| > | ||
| <IconLinkedIn className='h-6 w-6' /> | ||
| </a> | ||
| </div> |
There was a problem hiding this comment.
Prevent social share clicks from triggering parent Link navigation.
The social sharing buttons are inside a parent Link component, which might cause unintended navigation when clicking the share buttons.
Apply this diff to prevent event propagation:
- <div className='mt-4 flex space-x-4'>
+ <div className='mt-4 flex space-x-4' onClick={(e) => e.preventDefault()}>
<a
href={`https://twitter.com/intent/tweet?text=${shareText}&url=${shareUrl}&hashtags=AsyncAPI`}
target='_blank'
rel='noopener noreferrer'
className='text-blue-500 hover:text-blue-700'
+ onClick={(e) => e.stopPropagation()}
>
- <IconTwitter className='h-6 w-6' />
+ <IconTwitter className='size-6' />
</a>
<a
href={`https://www.linkedin.com/sharing/share-offsite/?url=${shareUrl}`}
target='_blank'
rel='noopener noreferrer'
className='text-blue-700 hover:text-blue-900'
+ onClick={(e) => e.stopPropagation()}
>
- <IconLinkedIn className='h-6 w-6' />
+ <IconLinkedIn className='size-6' />
</a>
</div>📝 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.
| <div className='mt-4 flex space-x-4'> | |
| <a | |
| href={`https://twitter.com/intent/tweet?text=${shareText}&url=${shareUrl}&hashtags=AsyncAPI`} | |
| target='_blank' | |
| rel='noopener noreferrer' | |
| className='text-blue-500 hover:text-blue-700' | |
| > | |
| <IconTwitter className='h-6 w-6' /> | |
| </a> | |
| <a | |
| href={`https://www.linkedin.com/sharing/share-offsite/?url=${shareUrl}`} | |
| target='_blank' | |
| rel='noopener noreferrer' | |
| className='text-blue-700 hover:text-blue-900' | |
| > | |
| <IconLinkedIn className='h-6 w-6' /> | |
| </a> | |
| </div> | |
| <div className='mt-4 flex space-x-4' onClick={(e) => e.preventDefault()}> | |
| <a | |
| href={`https://twitter.com/intent/tweet?text=${shareText}&url=${shareUrl}&hashtags=AsyncAPI`} | |
| target='_blank' | |
| rel='noopener noreferrer' | |
| className='text-blue-500 hover:text-blue-700' | |
| onClick={(e) => e.stopPropagation()} | |
| > | |
| <IconTwitter className='size-6' /> | |
| </a> | |
| <a | |
| href={`https://www.linkedin.com/sharing/share-offsite/?url=${shareUrl}`} | |
| target='_blank' | |
| rel='noopener noreferrer' | |
| className='text-blue-700 hover:text-blue-900' | |
| onClick={(e) => e.stopPropagation()} | |
| > | |
| <IconLinkedIn className='size-6' /> | |
| </a> | |
| </div> |
🧰 Tools
🪛 GitHub Actions: PR testing - if Node project
[warning] 122-122: Classnames 'h-6, w-6' could be replaced by the 'size-6' shorthand! tailwindcss/enforces-shorthand
[warning] 130-130: Classnames 'h-6, w-6' could be replaced by the 'size-6' shorthand! tailwindcss/enforces-shorthand
fixes #3649
Description
Add social sharing buttons for Twitter and LinkedIn to blog posts.
BlogLayout.tsx
BlogPostItem.tsx
FeaturedBlogPost.tsx
index.tsx
Summary by CodeRabbit
SocialShareButtonscomponent for streamlined sharing functionality.