Skip to content

feat: add social share buttons to blog posts #4557

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
raajpatre wants to merge 3 commits into
base: master
Choose a base branch
from
Open

feat: add social share buttons to blog posts #4557

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
f395412
changes
raajpatre Nov 6, 2025
825f54f
fix(ui): Correct banner alignment on non-home pages (closes #4495)
raajpatre Nov 6, 2025
a03994f
feat: add social share buttons to blog posts
raajpatre Nov 7, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 3 additions & 2 deletions components/campaigns/AnnouncementBanner.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,8 +48,9 @@ export default function Banner({
}: BannerProps) {
return (
<div
className={`size-full rounded border border-gray-200 bg-gray-50 py-6
transition-transform${className} ${small ? 'mb-4' : 'mx-3 my-6 p-3'}
className={`size-full rounded border border-gray-200 bg-gray-50
p-6 mx-3 ${small ? 'mb-4' : 'my-6'}
transition-transform ${className}
${activeBanner ? 'z-10 scale-100 opacity-100' : 'z-0 scale-90 opacity-0'}`}
data-testid='AnnouncementHero-main-div'
>
Expand Down
22 changes: 20 additions & 2 deletions components/layout/BlogLayout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,9 @@
import { TwitterShareButton, LinkedinShareButton, TwitterIcon, LinkedinIcon } from 'react-share';
import { useRouter } from 'next/router'; // We'll need this to get the URL

import moment from 'moment';
import ErrorPage from 'next/error';
import HtmlHead from 'next/head';
import { useRouter } from 'next/router';
import React from 'react';

import type { IPosts } from '@/types/post';
Expand All @@ -26,7 +28,9 @@ interface IBlogLayoutProps {
*/
export default function BlogLayout({ post, children }: IBlogLayoutProps) {
const router = useRouter();

const postUrl = `https://www.asyncapi.com${router.asPath}`;
const postTitle = post.title;
Comment on lines 30 to +32
Copy link
Contributor

@coderabbitai coderabbitai bot Nov 7, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ 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.


if (!post) return <ErrorPage statusCode={404} />;
if (post.title === undefined) throw new Error('Post title is required');

Expand Down Expand Up @@ -78,6 +82,20 @@ export default function BlogLayout({ post, children }: IBlogLayoutProps) {
</div>
</div>
</header>
{/* ADD THIS CODE BLOCK */}
<div className="flex items-center justify-center gap-2 mt-4">
<span className="text-sm text-gray-500">Share this post:</span>

<TwitterShareButton url={postUrl} title={postTitle}>
<TwitterIcon size={32} round />
</TwitterShareButton>

<LinkedinShareButton url={postUrl} title={postTitle}>
<LinkedinIcon size={32} round />
</LinkedinShareButton>
</div>
{/* END ADDED BLOCK */}

<article className='mb-32'>
<Head title={post.title} description={post.excerpt} image={post.cover} />
<HtmlHead>
Expand Down
2 changes: 1 addition & 1 deletion config/tools.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@
"title": "AsyncAPI Server API",
"description": "Server API providing official AsyncAPI tools",
"links": {
"websiteUrl": "https://api.asyncapi.com/v1",
"websiteUrl": "https://api.asyncapi.com/v1",
Copy link
Contributor

@coderabbitai coderabbitai bot Nov 7, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

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.

Suggested change
"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.

"docsUrl": "https://api.asyncapi.com/v1/docs",
"repoUrl": "https://github.com/asyncapi/server-api"
},
Expand Down
278 changes: 1 addition & 277 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Loading