Feat\#3298 #213

bhanushaliparthhitesh · 2025-11-30T06:36:37Z

Related Tickets & Documents
Fixes: #3298

Description
This PR updates the placement, design, and behaviour of the social media share component in blog pages to improve user engagement and UX.

Current Behaviour

The share component appears at the top of the blog, next to the reviewer name.
It is not sticky and scrolls away with the header.
The layout is vertical (in some contexts) or hidden.

Expected Output (Implemented)

Relocated: The social share component is moved to the right sticky sidebar.
Positioning: It is placed immediately below the Waitlist Banner and above the Ad Banner for better visibility.
Sticky Effect: The component follows the user as they scroll, ensuring share options are always accessible.
Design: The share buttons (Twitter, LinkedIn, Copy Link) are arranged in a horizontal row with optimized spacing.

Type of Change

Testing
Manual Testing Performed

Placement : Verified the component appears in the right sidebar, above the Ad banner.
Sticky Behaviour : Confirmed the component stays visible while scrolling down long posts.
Responsiveness : Verified it is hidden on mobile/tablet (<1024px) and visible on desktop.
Functionality : Tested Twitter, LinkedIn, and Copy Link buttons (including "Copied!" state).
Layout : Confirmed horizontal alignment of icons and reduced gap between components.

Environment and Dependencies

New Dependencies: None
Configuration Changes: None

Checklist

My code follows the style guidelines of this project
I have performed a self-review of my own code
I have made corresponding changes to the documentation
I have added corresponding tests
I have run the build command to ensure there are no build errors
My changes have been tested across relevant browsers/devices
For UI changes, I've included visual evidence of my changes

BEFORE :

AFTER :

VIDEO TESTING :

AFTER.-.Made.with.Clipchamp.mp4

add a sticky share to social media component in blog website

Co-authored-by: Copilot <[email protected]> Signed-off-by: bhanushali parth hitesh <[email protected]>

…oy#194) * feat: add scroll-to-top button with gradient progress indicator - Add ScrollToTop component with orange-to-yellow gradient - Implement smooth scroll progress tracking with circular indicator - Add hover effects with scale animation (duration: 500ms ease-out) - Include dark mode support with appropriate color schemes - Integrate component into main Layout for site-wide availability - Add accessibility features with proper aria-label - Button appears after scrolling 300px with smooth fade-in/out Signed-off-by: Soumyabrata Mukherjee <[email protected]> * perf: optimize ScrollToTop component performance and code clarity - Add throttling to scroll event listener (16ms delay for ~60fps) - Extract magic number 15.92 as CIRCLE_RADIUS constant - Extract scroll threshold 300 as SCROLL_THRESHOLD constant - Add THROTTLE_DELAY constant for better maintainability - Implement custom throttle function to prevent excessive scroll calculations - Update SVG circles to use CIRCLE_RADIUS constant - Improve code readability and performance on lower-end devices Signed-off-by: Soumyabrata Mukherjee <[email protected]> --------- Signed-off-by: Soumyabrata Mukherjee <[email protected]> Signed-off-by: parth <[email protected]>

* Fix: author slug handling and add resilient author post lookups Signed-off-by: Kaushik Tak <[email protected]> * build minor fix Signed-off-by: Kaushik Tak <[email protected]> --------- Signed-off-by: Kaushik Tak <[email protected]> Signed-off-by: parth <[email protected]>

* feat: add search tags functionality in tag page Signed-off-by: Kaushik Tak <[email protected]> * feat, ui : adding colors and icons to tags; adding load-more + infinite-scroll, loading tags when needed * ui: tags ui and added icons, and loading in tags Signed-off-by: Kaushik Tak <[email protected]> * build error fix Signed-off-by: Kaushik Tak <[email protected]> --------- Signed-off-by: Kaushik Tak <[email protected]> Co-authored-by: Amaan Bhati <[email protected]> Signed-off-by: parth <[email protected]>

add a sticky share to social media component in blog website Signed-off-by: parth <[email protected]>

Signed-off-by: parth <[email protected]>

Co-Authored-By: bhanushali parth hitesh <[email protected]>

Signed-off-by: parth <[email protected]>

Copilot

Pull request overview

This pull request relocates and redesigns the social media share component on blog pages to improve user engagement. The share buttons (Twitter, LinkedIn, Copy Link) are moved from the post header to a sticky sidebar position, appearing below the Waitlist Banner and above the Ad Banner on desktop screens (≥1024px).

Key changes:

Created new StickyShare.tsx component with horizontal share button layout
Removed share functionality from PostHeaderAuthors.tsx
Integrated sticky share component into the right sidebar in post-body.tsx

Reviewed changes

Copilot reviewed 4 out of 5 changed files in this pull request and generated 6 comments.

Show a summary per file

File	Description
`components/StickyShare.tsx`	New component implementing sticky social share buttons with horizontal layout and copy-to-clipboard functionality
`components/post-body.tsx`	Integrated StickyShare component into sidebar between Waitlist Banner and Ad Banner; adjusted spacing and layout
`components/PostHeaderAuthors.tsx`	Removed inline share buttons and related state/handlers that are now in StickyShare
`.vscode/settings.json`	Added VS Code workspace configuration (should not be committed)
`package-lock.json`	Automatic dependency resolution updates from npm

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2025-11-30T06:40:43Z

components/post-body.tsx

+        <div className="hidden lg:flex justify-center rounded-xl p-0">
+          <StickyShare />
+        </div>
+
+        {/* 3. Ad slot (hidden on <lg) */}
+        <div className="hidden lg:flex justify-center rounded-xl p-0">


[nitpick] The padding was changed from p-4 to p-0 for the container wrapping the StickyShare and AdSlot components. This removes all padding which may cause visual inconsistencies. The StickyShare component has its own p-4 padding (line 28 of StickyShare.tsx), but the AdSlot may not. Verify this change produces the intended visual result across both components.

Suggested change

<div className="hidden lg:flex justify-center rounded-xl p-0">

<StickyShare />

</div>

{/* 3. Ad slot (hidden on <lg) */}

<div className="hidden lg:flex justify-center rounded-xl p-0">

<div className="hidden lg:flex justify-center rounded-xl p-4">

<StickyShare />

</div>

{/* 3. Ad slot (hidden on <lg) */}

<div className="hidden lg:flex justify-center rounded-xl p-4">

Copilot · 2025-11-30T06:40:44Z

.vscode/settings.json

+{
+    "githubPullRequests.ignoredPullRequestBranches": [
+        "main"
+    ]
+}


This file contains IDE-specific settings for Visual Studio Code and should not be committed to the repository. These types of personal development environment configurations should be added to .gitignore or kept locally.

Recommend:

Remove this file from the PR

Add .vscode/ to .gitignore if it's not already there (to prevent future accidental commits of IDE settings)

Copilot · 2025-11-30T06:40:44Z

components/StickyShare.tsx

+    const router = useRouter();
+    const [copied, setCopied] = useState(false);
+
+    const currentURL = typeof window !== 'undefined' ? encodeURIComponent(
+        `keploy.io/${router.basePath + router.asPath}`
+    ) : "";
+
+    const twitterShareUrl = `https://twitter.com/share?url=${currentURL}`;
+    const linkedinShareUrl = `https://www.linkedin.com/shareArticle?url=${currentURL}`;
+
+    const copyToClipboard = async () => {
+        try {
+            await navigator.clipboard.writeText(`https://keploy.io/blog${router.asPath}`);
+            setCopied(true);
+            setTimeout(() => setCopied(false), 2000);
+        } catch (err) {
+            console.error("Failed to copy!", err);
+        }
+    };
+
+    return (
+        <div className="hidden lg:flex flex-row gap-4 items-center p-4 bg-white rounded-lg shadow-sm mb-4">
+            <p className="text-gray-500 text-sm font-semibold">Share</p>
+            <div className="flex flex-row gap-4">
+                <Link
+                    href={twitterShareUrl}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="text-2xl text-gray-600 transition-colors duration-300 hover:text-blue-500"
+                >
+                    <FaTwitter />
+                </Link>
+                <Link
+                    href={linkedinShareUrl}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="text-2xl text-gray-600 transition-colors duration-300 hover:text-blue-700"
+                >
+                    <FaLinkedin />
+                </Link>
+                <button
+                    onClick={copyToClipboard}
+                    className="text-2xl text-gray-600 transition-colors duration-300 hover:text-orange-500 focus:outline-none relative"
+                    aria-label="Copy URL to clipboard"
+                >
+                    <FaLink />
+                    {copied && (
+                        <span className="absolute left-1/2 -translate-x-1/2 -top-8 text-xs text-orange-500 whitespace-nowrap bg-white p-1 rounded shadow-sm border border-orange-100">
+                            Copied!
+                        </span>
+                    )}
+                </button>
+            </div>
+        </div>
+    );


Inconsistent indentation. This file uses 4-space indentation while the rest of the codebase uses 2-space indentation (as seen in post-body.tsx, PostHeaderAuthors.tsx, and other components).

Please update the indentation to use 2 spaces to match the project's style guidelines.

Suggested change

const router = useRouter();

const [copied, setCopied] = useState(false);

const currentURL = typeof window !== 'undefined' ? encodeURIComponent(

`keploy.io/${router.basePath + router.asPath}`

) : "";

const twitterShareUrl = `https://twitter.com/share?url=${currentURL}`;

const linkedinShareUrl = `https://www.linkedin.com/shareArticle?url=${currentURL}`;

const copyToClipboard = async () => {

try {

await navigator.clipboard.writeText(`https://keploy.io/blog${router.asPath}`);

setCopied(true);

setTimeout(() => setCopied(false), 2000);

} catch (err) {

console.error("Failed to copy!", err);

}

};

return (

<div className="hidden lg:flex flex-row gap-4 items-center p-4 bg-white rounded-lg shadow-sm mb-4">

<p className="text-gray-500 text-sm font-semibold">Share</p>

<div className="flex flex-row gap-4">

<Link

href={twitterShareUrl}

target="_blank"

rel="noopener noreferrer"

className="text-2xl text-gray-600 transition-colors duration-300 hover:text-blue-500"

>

<FaTwitter />

</Link>

<Link

href={linkedinShareUrl}

target="_blank"

rel="noopener noreferrer"

className="text-2xl text-gray-600 transition-colors duration-300 hover:text-blue-700"

>

<FaLinkedin />

</Link>

<button

onClick={copyToClipboard}

className="text-2xl text-gray-600 transition-colors duration-300 hover:text-orange-500 focus:outline-none relative"

aria-label="Copy URL to clipboard"

>

<FaLink />

{copied && (

<span className="absolute left-1/2 -translate-x-1/2 -top-8 text-xs text-orange-500 whitespace-nowrap bg-white p-1 rounded shadow-sm border border-orange-100">

Copied!

</span>

)}

</button>

</div>

</div>

);

const router = useRouter();

const [copied, setCopied] = useState(false);

const currentURL = typeof window !== 'undefined' ? encodeURIComponent(

`keploy.io/${router.basePath + router.asPath}`

) : "";

const twitterShareUrl = `https://twitter.com/share?url=${currentURL}`;

const linkedinShareUrl = `https://www.linkedin.com/shareArticle?url=${currentURL}`;

const copyToClipboard = async () => {

try {

await navigator.clipboard.writeText(`https://keploy.io/blog${router.asPath}`);

setCopied(true);

setTimeout(() => setCopied(false), 2000);

} catch (err) {

console.error("Failed to copy!", err);

}

};

return (

<div className="hidden lg:flex flex-row gap-4 items-center p-4 bg-white rounded-lg shadow-sm mb-4">

<p className="text-gray-500 text-sm font-semibold">Share</p>

<div className="flex flex-row gap-4">

<Link

href={twitterShareUrl}

target="_blank"

rel="noopener noreferrer"

className="text-2xl text-gray-600 transition-colors duration-300 hover:text-blue-500"

>

<FaTwitter />

</Link>

<Link

href={linkedinShareUrl}

target="_blank"

rel="noopener noreferrer"

className="text-2xl text-gray-600 transition-colors duration-300 hover:text-blue-700"

>

<FaLinkedin />

</Link>

<button

onClick={copyToClipboard}

className="text-2xl text-gray-600 transition-colors duration-300 hover:text-orange-500 focus:outline-none relative"

aria-label="Copy URL to clipboard"

>

<FaLink />

{copied && (

<span className="absolute left-1/2 -translate-x-1/2 -top-8 text-xs text-orange-500 whitespace-nowrap bg-white p-1 rounded shadow-sm border border-orange-100">

Copied!

</span>

)}

</button>

</div>

</div>

);

Copilot · 2025-11-30T06:40:44Z

components/StickyShare.tsx

+    const currentURL = typeof window !== 'undefined' ? encodeURIComponent(
+        `keploy.io/${router.basePath + router.asPath}`
+    ) : "";
+
+    const twitterShareUrl = `https://twitter.com/share?url=${currentURL}`;
+    const linkedinShareUrl = `https://www.linkedin.com/shareArticle?url=${currentURL}`;
+
+    const copyToClipboard = async () => {
+        try {
+            await navigator.clipboard.writeText(`https://keploy.io/blog${router.asPath}`);


The URL construction for Twitter and LinkedIn shares is inconsistent and incorrect.

Line 11 constructs: keploy.io/${router.basePath + router.asPath} which results in keploy.io//blog/technology/some-post (missing https:// protocol and has a double slash after keploy.io).

Line 19 constructs: https://keploy.io/blog${router.asPath} which correctly includes the protocol.

Both should use the same pattern. Recommend using:

const currentURL = typeof window !== 'undefined' ? `https://keploy.io${router.basePath}${router.asPath}` : "";

Then encode it for the share URLs:

const encodedURL = encodeURIComponent(currentURL); const twitterShareUrl = `https://twitter.com/share?url=${encodedURL}`; const linkedinShareUrl = `https://www.linkedin.com/shareArticle?url=${encodedURL}`;

Suggested change

const currentURL = typeof window !== 'undefined' ? encodeURIComponent(

`keploy.io/${router.basePath + router.asPath}`

) : "";

const twitterShareUrl = `https://twitter.com/share?url=${currentURL}`;

const linkedinShareUrl = `https://www.linkedin.com/shareArticle?url=${currentURL}`;

const copyToClipboard = async () => {

try {

await navigator.clipboard.writeText(`https://keploy.io/blog${router.asPath}`);

const currentURL = typeof window !== 'undefined'

? `https://keploy.io${router.basePath}${router.asPath}`

: "";

const encodedURL = encodeURIComponent(currentURL);

const twitterShareUrl = `https://twitter.com/share?url=${encodedURL}`;

const linkedinShareUrl = `https://www.linkedin.com/shareArticle?url=${encodedURL}`;

const copyToClipboard = async () => {

try {

await navigator.clipboard.writeText(currentURL);

Copilot · 2025-11-30T06:40:45Z

components/StickyShare.tsx

+
+    const copyToClipboard = async () => {
+        try {
+            await navigator.clipboard.writeText(`https://keploy.io/blog${router.asPath}`);


The copyToClipboard function uses a different URL construction than the share buttons. While line 19 uses https://keploy.io/blog${router.asPath}, it should use the same consistent pattern as the other share URLs.

Additionally, this should use router.basePath instead of hardcoding /blog, making it more maintainable if the basePath configuration changes:

await navigator.clipboard.writeText(`https://keploy.io${router.basePath}${router.asPath}`);

Suggested change

await navigator.clipboard.writeText(`https://keploy.io/blog${router.asPath}`);

await navigator.clipboard.writeText(`https://keploy.io${router.basePath}${router.asPath}`);

Copilot · 2025-11-30T06:40:45Z

components/post-body.tsx

-    />
-  </div>
-</aside>
+      <aside className="w-full lg:w-1/5 lg:ml-10 p-4 flex flex-col gap-4 sticky lg:top-20">


[nitpick] The gap value was changed from gap-6 to gap-4 for the sidebar. While this may be intentional for the redesign, verify this matches the design specifications since the PR description mentions "optimized spacing" but doesn't specify the exact values.

Suggested change

<aside className="w-full lg:w-1/5 lg:ml-10 p-4 flex flex-col gap-4 sticky lg:top-20">

<aside className="w-full lg:w-1/5 lg:ml-10 p-4 flex flex-col gap-6 sticky lg:top-20">

bhanushaliparthhitesh and others added 12 commits November 29, 2025 16:00

feat/#3298

6fcb668

add a sticky share to social media component in blog website

Update components/StickyShare.tsx

ac407b0

Co-authored-by: Copilot <[email protected]> Signed-off-by: bhanushali parth hitesh <[email protected]>

Update components/post-body.tsx

8a674be

Co-authored-by: Copilot <[email protected]> Signed-off-by: bhanushali parth hitesh <[email protected]>

Update components/post-body.tsx

c571738

Co-authored-by: Copilot <[email protected]> Signed-off-by: bhanushali parth hitesh <[email protected]>

feat/#3298

0323f3c

add a sticky share to social media component in blog website Signed-off-by: parth <[email protected]>

Delete StickyShare.tsx

cc35464

Fix StickyShare and PostBody layout

a5d9adc

Signed-off-by: parth <[email protected]>

Create settings.json

5a77247

Co-Authored-By: bhanushali parth hitesh <[email protected]>

basicllt

35bb400

Signed-off-by: parth <[email protected]>

Copilot AI review requested due to automatic review settings November 30, 2025 06:36

Copilot started reviewing on behalf of bhanushaliparthhitesh November 30, 2025 06:37 View session

bhanushaliparthhitesh marked this pull request as draft November 30, 2025 06:37

Copilot finished reviewing on behalf of bhanushaliparthhitesh November 30, 2025 06:39

Copilot AI reviewed Nov 30, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Feat\#3298 #213

Feat\#3298 #213

Uh oh!

bhanushaliparthhitesh commented Nov 30, 2025

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Nov 30, 2025

Uh oh!

Copilot AI Nov 30, 2025

Uh oh!

Copilot AI Nov 30, 2025

Uh oh!

Copilot AI Nov 30, 2025

Uh oh!

Copilot AI Nov 30, 2025

Uh oh!

Copilot AI Nov 30, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

	await navigator.clipboard.writeText(`https://keploy.io/blog${router.asPath}`);
	await navigator.clipboard.writeText(`https://keploy.io${router.basePath}${router.asPath}`);

	<aside className="w-full lg:w-1/5 lg:ml-10 p-4 flex flex-col gap-4 sticky lg:top-20">
	<aside className="w-full lg:w-1/5 lg:ml-10 p-4 flex flex-col gap-6 sticky lg:top-20">

Feat\#3298 #213

Are you sure you want to change the base?

Feat\#3298 #213

Uh oh!

Conversation

bhanushaliparthhitesh commented Nov 30, 2025

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Nov 30, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Nov 30, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Nov 30, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Nov 30, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Nov 30, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Nov 30, 2025

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants