feat: add social sharing buttons for blog posts #3946
Conversation
Arijit-Char
requested review from
derberg,
akshatnema,
anshgoyalevil,
sambhavgupta0705,
Mayaleeeee and
asyncapi-bot-eve
as code owners
|
Important Review skippedReview was skipped due to path filters ⛔ Files ignored due to path filters (1)
CodeRabbit blocks several paths by default. You can override this behavior by explicitly including those paths in the path filters. For example, including You can disable this status message by setting the WalkthroughThis pull request updates the Changes
Sequence Diagram(s)sequenceDiagram
participant U as User
participant BL as BlogLayout Component
participant RS as react-share Button
participant SN as Social Network
U->>BL: Click share button (Twitter/LinkedIn/Facebook)
BL->>RS: Provide shareUrl, shareText, hashTags
RS->>SN: Redirect/share post to selected platform
SN-->>U: Process share and confirm action
Possibly related issues
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
🪧 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. |
✅ 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: 1
🧹 Nitpick comments (4)
components/navigation/BlogPostItem.tsx (4)
61-63: Consider more flexible URL configurationThe hard-coded domain in
shareUrlmight cause issues in different environments (development, staging, etc.).Consider using a configurable base URL that can adapt to different environments:
- const shareUrl = `https://www.asyncapi.com${post.slug}`; + const baseUrl = process.env.NEXT_PUBLIC_SITE_URL || 'https://www.asyncapi.com'; + const shareUrl = `${baseUrl}${post.slug}`;
101-103: Standardize hashtag format across platformsThe Facebook share button uses a different hashtag format compared to Twitter.
Consider using a consistent approach:
- <FacebookShareButton url={shareUrl} title={shareText} hashtag='#AsyncAPI'> + <FacebookShareButton url={shareUrl} title={shareText} hashtag={hashTags[0]}>Note: Facebook only supports a single hashtag while Twitter supports multiple, so we're using just the first hashtag from the array.
84-105: Consider responsive design for share buttonsThe current implementation places the share buttons next to the post type label, which might cause layout issues on smaller screens.
Consider adding responsive styling to ensure the buttons and post type label display properly on all screen sizes:
- className='flex items-center justify-around' + className='flex items-center justify-between flex-wrap gap-2'
94-104: Add analytics tracking for share button clicksConsider tracking social sharing interactions to measure user engagement.
If you're using analytics in your application, consider adding tracking:
<TwitterShareButton url={shareUrl} title={shareText} hashtags={hashTags} + onClick={() => { + // Example with GoogleAnalytics + window.gtag?.('event', 'share', { + method: 'twitter', + content_type: 'blog', + item_id: post.slug, + }); + }} > <TwitterIcon size={32} round /> </TwitterShareButton>Similar tracking can be added to the other share buttons with their respective platforms.
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (2)
components/navigation/BlogPostItem.tsx(3 hunks)package.json(1 hunks)
🔇 Additional comments (3)
package.json (2)
103-103: Appropriate react-share dependency addedThe addition of
react-sharedependency aligns well with the PR objective to implement social sharing buttons for blog posts.
101-101:❓ Verification inconclusive
Verify the need for react-i18next dependency
The PR adds
react-i18nextas a dependency, but I don't see it being used in the BlogPostItem component implementation. If it's intended for future internationalization of the share button text, consider either documenting this intention or implementing it now.
🏁 Script executed:
#!/bin/bash # Check if react-i18next is used anywhere in the codebase echo "Searching for react-i18next imports..." rg "from ['\"]react-i18next['\"]" --type ts --type tsxLength of output: 175
🏁 Script executed:
#!/bin/bash # Improved search: explicitly glob for both .ts and .tsx files to avoid file-type recognition issues echo "Searching for react-i18next imports in ts and tsx files..." rg "from ['\"]react-i18next['\"]" --glob "*.ts" --glob "*.tsx"Length of output: 195
Action Required: Clarify the Necessity of the
react-i18nextDependency
- Searches across TypeScript and TSX files yielded no references to
react-i18next, and the BlogPostItem component doesn’t appear to import or use it.- If the dependency is being added to support future internationalization (for instance, for the share button text), please document this planned usage in the code or relevant project documentation.
- Otherwise, consider removing
react-i18nextfrom package.json to eliminate an unused dependency.components/navigation/BlogPostItem.tsx (1)
5-12: Appropriate component imports from react-shareThe necessary imports for social sharing buttons and icons are correctly added from the react-share library.
|
Hi @derberg, @akshatnema, @anshgoyalevil, @Mayaleeeee, and @asyncapi-bot-eve, I've opened PR #3946 to add social sharing buttons to blog posts. While the feature is working as expected, some checks are failing. Could you please take a look and provide any insights on fixing them? Also, a review would be greatly appreciated! 🙌 Thanks in advance! 😊 |
|
Hey @Arijit-Char , |
There was a problem hiding this comment.
Actionable comments posted: 0
♻️ Duplicate comments (1)
components/navigation/BlogPostItem.tsx (1)
94-113: 🛠️ Refactor suggestionAdd accessibility attributes and fix formatting issues
The social share buttons should include proper accessibility attributes and follow the project's formatting conventions.
Additionally, there's a naming inconsistency: You're using
XIconbut the component is calledTwitterShareButton. Consider updating the component names to be consistent with the icons or add a comment explaining the discrepancy.Fix the formatting and add accessibility attributes:
<div className='ml-2 flex space-x-2' onClick={(e) => e.stopPropagation()}> <TwitterShareButton url={shareUrl} title={shareText} hashtags={hashTags} + aria-label="Share on Twitter"> <XIcon size={32} round /> </TwitterShareButton> <LinkedinShareButton url={shareUrl} title={shareText} source='AsyncAPI Blog' + aria-label="Share on LinkedIn"> <LinkedinIcon size={32} round /> </LinkedinShareButton> <FacebookShareButton url={shareUrl} title={shareText} hashtag='#AsyncAPI' + aria-label="Share on Facebook"> <FacebookIcon size={32} round /> </FacebookShareButton> </div>🧰 Tools
🪛 ESLint
[error] 95-98: Replace
⏎······················url={shareUrl}⏎······················title={shareText}⏎·····················with·url={shareUrl}·title={shareText}(prettier/prettier)
[error] 101-104: Replace
⏎······················url={shareUrl}⏎······················title={shareText}⏎·····················with·url={shareUrl}·title={shareText}(prettier/prettier)
[error] 107-110: Replace
⏎······················url={shareUrl}⏎······················title={shareText}⏎·····················with·url={shareUrl}·title={shareText}(prettier/prettier)
🧹 Nitpick comments (1)
components/navigation/BlogPostItem.tsx (1)
84-88: Reconsider component hierarchy for social sharing buttonsThe social sharing buttons are currently placed within a
Paragraphcomponent, which is not semantically correct. A paragraph element should typically contain text content, not UI controls.Consider placing the sharing buttons in a separate container:
- <Paragraph - typeStyle={ParagraphTypeStyle.sm} - textColor='text-indigo-500' - className='flex items-center justify-around' - > + <div className='flex items-center justify-around'> + <Paragraph + typeStyle={ParagraphTypeStyle.sm} + textColor='text-indigo-500' + >
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
components/navigation/BlogPostItem.tsx(3 hunks)
🧰 Additional context used
🪛 ESLint
components/navigation/BlogPostItem.tsx
[error] 95-98: Replace ⏎······················url={shareUrl}⏎······················title={shareText}⏎····················· with ·url={shareUrl}·title={shareText}
(prettier/prettier)
[error] 101-104: Replace ⏎······················url={shareUrl}⏎······················title={shareText}⏎····················· with ·url={shareUrl}·title={shareText}
(prettier/prettier)
[error] 107-110: Replace ⏎······················url={shareUrl}⏎······················title={shareText}⏎····················· with ·url={shareUrl}·title={shareText}
(prettier/prettier)
🔇 Additional comments (3)
components/navigation/BlogPostItem.tsx (3)
5-12: Good addition of react-share components for social sharingThe import of appropriate components from the react-share library is well structured and provides a good foundation for implementing social sharing functionality.
61-63: Well-defined constants for sharing functionalityThe constants are correctly defined:
shareUrlproperly constructs the URL using the post's slugshareTextincludes a clear message with the blog post titlehashTagscontains relevant tags that enhance discoverabilityConsider adding a test to ensure these URLs are constructed correctly for various post slugs.
94-113: Consider the placement of share buttons based on user feedbackAccording to the PR comments, there was a suggestion that share buttons should be placed within the blog page itself rather than on the Blog card. Review this placement decision with the team.
Also, consider if the size of the icons (32px) is appropriate for this context. A visual review would be helpful to ensure these buttons don't overwhelm the card's layout.
🧰 Tools
🪛 ESLint
[error] 95-98: Replace
⏎······················url={shareUrl}⏎······················title={shareText}⏎·····················with·url={shareUrl}·title={shareText}(prettier/prettier)
[error] 101-104: Replace
⏎······················url={shareUrl}⏎······················title={shareText}⏎·····················with·url={shareUrl}·title={shareText}(prettier/prettier)
[error] 107-110: Replace
⏎······················url={shareUrl}⏎······················title={shareText}⏎·····················with·url={shareUrl}·title={shareText}(prettier/prettier)
Hey @akshatnema , Got it! I’ll update the PR to move the sharing buttons inside the blog page instead of the blog card. I'm working on the changes now and will push the updates soon. Thanks for the clarification! |
|
Hey @akshatnema , I've updated the PR to move the sharing buttons inside the blog page as requested. The changes are now implemented and ready for review. Let me know if any further improvements are needed. Thanks!
|
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (2)
components/layout/BlogLayout.tsx (2)
49-51: Consider making the shareUrl and hashtags more configurable.The implementation works but could be improved:
The base URL is hardcoded as "https://www.asyncapi.com". Consider using an environment variable or configuration setting for the base URL to make it more maintainable across environments.
The hashtags are statically defined. Consider making them dynamic based on the blog post's tags or categories if available.
- const shareUrl = `https://www.asyncapi.com${post.slug}`; + const shareUrl = `${process.env.NEXT_PUBLIC_SITE_URL || 'https://www.asyncapi.com'}${post.slug}`; - const hashTags = ['AsyncAPI', 'TechBlog', 'DevCommunity', 'TechTrends']; + const hashTags = post.tags ? [...post.tags, 'AsyncAPI'] : ['AsyncAPI', 'TechBlog', 'DevCommunity', 'TechTrends'];
111-112: Consider consistency in hashtag usage across platforms.For Facebook, you're using a single hashtag with '#AsyncAPI', but for Twitter you're using the array of hashtags. Consider using the same set of hashtags for Facebook by combining them.
- hashtag='#AsyncAPI'> + hashtag={hashTags.map(tag => `#${tag}`).join(' ')}>
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
components/layout/BlogLayout.tsx(3 hunks)
🧰 Additional context used
🪛 ESLint
components/layout/BlogLayout.tsx
[error] 95-98: Replace ⏎····················url={shareUrl}⏎····················title={shareText}⏎··················· with ·url={shareUrl}·title={shareText}
(prettier/prettier)
[error] 101-104: Replace ⏎····················url={shareUrl}⏎····················title={shareText}⏎··················· with ·url={shareUrl}·title={shareText}
(prettier/prettier)
[error] 107-110: Replace ⏎····················url={shareUrl}⏎····················title={shareText}⏎··················· with ·url={shareUrl}·title={shareText}
(prettier/prettier)
🔇 Additional comments (1)
components/layout/BlogLayout.tsx (1)
6-13: Good addition of social sharing components from react-share.The imported components are appropriate for the feature requirements and enable the sharing functionality on Twitter, LinkedIn, and Facebook platforms.
…nto Issue#3649
feat(blog): add social sharing buttons for blog posts
This PR implements issue #3649 (Feature Request #3649) by adding social sharing buttons to blog posts, enabling users to easily share content on social media.
Changes Implemented:
Added Social Sharing Buttons to each blog post for:
Updated Files:
components/layout/BlogLayout.tsxreact-sharecomponents for social sharing.post.slugandpost.title.package.jsonreact-sharepackage (^5.2.2).How This Improves the Blog:
Breaking Changes:
react-share).Summary by CodeRabbit