feat: add social share buttons to blog posts #4557
Conversation
raajpatre
requested review from
Mayaleeeee,
akshatnema,
anshgoyalevil,
asyncapi-bot-eve,
derberg and
sambhavgupta0705
as code owners
WalkthroughThis PR introduces social sharing functionality to blog posts via Twitter and LinkedIn buttons, restructures spacing and padding in the AnnouncementBanner component for improved layout, and includes a trivial whitespace adjustment in the tools configuration file. Changes
Sequence DiagramsequenceDiagram
participant User
participant BlogLayout
participant useRouter
participant ShareButtons
participant ExternalPlatform
User->>BlogLayout: Visit blog post
BlogLayout->>useRouter: Get current page path
useRouter-->>BlogLayout: Return path
BlogLayout->>BlogLayout: Construct postUrl<br/>(https://www.asyncapi.com + path)<br/>and extract postTitle
BlogLayout->>ShareButtons: Render Twitter & LinkedIn<br/>buttons with URL and title
User->>ShareButtons: Click share button
ShareButtons->>ExternalPlatform: Open pre-filled share dialog<br/>(Twitter/LinkedIn)
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes
Possibly related PRs
Suggested reviewers
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
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. Comment |
❌ Deploy Preview for asyncapi-website failed.Built without sensitive environment variables
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (1)
components/layout/BlogLayout.tsx (1)
1-2: Remove informal comment from import.The comment "We'll need this to get the URL" is unnecessarily verbose and informal for production code. The import statement is self-documenting.
Apply this diff:
-import { TwitterShareButton, LinkedinShareButton, TwitterIcon, LinkedinIcon } from 'react-share'; -import { useRouter } from 'next/router'; // We'll need this to get the URL +import { LinkedinIcon, LinkedinShareButton, TwitterIcon, TwitterShareButton } from 'react-share'; +import { useRouter } from 'next/router';
📜 Review details
Configuration used: Path: .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 (3)
components/campaigns/AnnouncementBanner.tsx(1 hunks)components/layout/BlogLayout.tsx(3 hunks)config/tools.json(1 hunks)
🧰 Additional context used
🧠 Learnings (5)
📓 Common learnings
Learnt from: asyncapi-bot
Repo: asyncapi/website PR: 0
File: :0-0
Timestamp: 2025-02-18T12:07:42.211Z
Learning: The following PR commands are supported in the asyncapi/website repository:
- `/please-take-a-look` or `/ptal`: Requests attention from reviewers who haven't reviewed the PR
- `/ready-to-merge` or `/rtm`: Triggers automerge when all conditions are met
- `/do-not-merge` or `/dnm`: Blocks automerge even if all conditions are met
- `/autoupdate` or `/au`: Adds autoupdate label to keep PR in sync with target branch
- `/update` or `/u`: One-time update of PR with latest changes from target branch
📚 Learning: 2024-10-11T11:32:30.226Z
Learnt from: akshatnema
Repo: asyncapi/website PR: 3262
File: components/navigation/BlogPostItem.tsx:95-119
Timestamp: 2024-10-11T11:32:30.226Z
Learning: In the `BlogPostItem` component (`components/navigation/BlogPostItem.tsx`), nesting `<a>` tags inside the parent `Link` component leads to hydration issues; therefore, we should avoid nesting `<a>` tags inside `Link` components in this component.
Applied to files:
components/layout/BlogLayout.tsx
📚 Learning: 2024-10-11T11:17:32.246Z
Learnt from: akshatnema
Repo: asyncapi/website PR: 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.
Applied to files:
components/layout/BlogLayout.tsx
📚 Learning: 2025-01-14T14:58:38.076Z
Learnt from: anshgoyalevil
Repo: asyncapi/website PR: 3557
File: tests/markdown/check-edit-links.test.js:20-46
Timestamp: 2025-01-14T14:58:38.076Z
Learning: In the AsyncAPI website codebase, the edit-page-config.json contains a fallback match entry that ensures determineEditLink function always has a valid target.value, making null checks unnecessary.
Applied to files:
config/tools.json
📚 Learning: 2025-01-19T04:51:41.255Z
Learnt from: anshgoyalevil
Repo: asyncapi/website 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.
Applied to files:
config/tools.json
⏰ 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
🔇 Additional comments (2)
components/campaigns/AnnouncementBanner.tsx (1)
51-54: Verify the spacing changes don't break the banner layout.The className restructuring changes the spacing behavior significantly:
- Old:
py-6(vertical padding 1.5rem) withp-3override for small banners- New:
p-6(all-sides padding 1.5rem) +mx-3(horizontal margins 0.75rem) for all bannersThis introduces horizontal margins that weren't present before and changes the padding behavior for small banners. Please confirm this visual change is intentional and doesn't break the banner's appearance in different contexts.
components/layout/BlogLayout.tsx (1)
85-97: Manual verification required due to codebase access limitations.I was unable to access the repository to verify the review comment against the actual code. The repository could not be cloned in the sandbox environment, preventing me from:
- Confirming the actual code at lines 85-97 in
components/layout/BlogLayout.tsx- Verifying variable definitions (whether
postUrl/postTitleorpost.url/post.titleare correct)- Validating the AddThis widget exists at lines 102-123
- Confirming the diff syntax and variable references are accurate
Please manually verify:
- Whether
postTitleorpost.titleis the correct variable in your component context- Whether the AddThis widget should be retained alongside the new share buttons
- Whether left or center alignment matches your design intent
- That all suggested changes (removing dev comments, adding
aria-labelattributes) are applied
| const router = useRouter(); | ||
|
|
||
| const postUrl = `https://www.asyncapi.com${router.asPath}`; | ||
| const postTitle = post.title; |
There was a problem hiding this comment.
🛠️ Refactor suggestion | 🟠 Major
Use environment variable for base URL and simplify variable assignment.
The hardcoded base URL https://www.asyncapi.com will break in development/staging environments. Additionally, the postTitle variable is redundant since it simply copies post.title.
Apply this diff:
const router = useRouter();
- const postUrl = `https://www.asyncapi.com${router.asPath}`;
- const postTitle = post.title;
-
+ const postUrl = `${process.env.NEXT_PUBLIC_SITE_URL || 'https://www.asyncapi.com'}${router.asPath}`;Then use post.title directly in the share buttons instead of postTitle.
Committable suggestion skipped: line range outside the PR's diff.
🤖 Prompt for AI Agents
In components/layout/BlogLayout.tsx around lines 30 to 32, the code hardcodes
the site base URL and creates a redundant postTitle variable; replace the
hardcoded `https://www.asyncapi.com` with a base URL read from an environment
variable (e.g. process.env.NEXT_PUBLIC_BASE_URL) when building postUrl, and
remove the redundant `postTitle` variable so that any share buttons/reference
use `post.title` directly.
| "description": "Server API providing official AsyncAPI tools", | ||
| "links": { | ||
| "websiteUrl": "https://api.asyncapi.com/v1", | ||
| "websiteUrl": "https://api.asyncapi.com/v1", |
There was a problem hiding this comment.
Remove trailing whitespace.
Trailing whitespace after the URL value serves no purpose and may trigger linting failures or cause inconsistencies in version control.
Apply this diff to remove the trailing whitespace:
- "websiteUrl": "https://api.asyncapi.com/v1",
+ "websiteUrl": "https://api.asyncapi.com/v1",📝 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.
| "websiteUrl": "https://api.asyncapi.com/v1", | |
| "websiteUrl": "https://api.asyncapi.com/v1", |
🤖 Prompt for AI Agents
In config/tools.json around line 26, the "websiteUrl" value contains a trailing
space after the URL which should be removed; edit that line to delete the
trailing whitespace so the value ends exactly with the closing quote (no extra
spaces), then save the file and run lint/format checks to confirm the trailing
whitespace is gone.
|
@raajpatre ci is failing. please have a look |
|
also there are conflicts in the PR |
2 participants
Closes #3649
Description:
This PR introduces social sharing buttons (Twitter & LinkedIn) to all blog posts, as requested in issue #3649.
This feature improves community engagement by allowing readers to easily share blog content on their social networks.
Changes Made:
Installed the react-share package.
Modified components/layout/BlogLayout.tsx to include the new share buttons.
Used the next/router hook to get the current post's full URL (postUrl).
Used the post.title prop for the share title.
Added the TwitterShareButton and LinkedinShareButton components, which render just below the author information on the blog post header.
Removed a duplicate useRouter import.
Screenshots
Before
After
How to Test
1] Pull down this branch.
2] Run npm install (to install react-share).
3] Run npm run dev.
4] Navigate to any blog post (e.g., /blog/2025-singapore-conf-summary).
5] Verify: The new "Share this post:" section with Twitter and LinkedIn icons appears below the author/date.
6] Verify: Click both buttons to ensure they open the correct share dialog with the correct post URL and title.
Summary by CodeRabbit
New Features
Style
Chores