Feat3298 add sticky social media share component below blog banner #212

bhanushaliparthhitesh · 2025-11-30T05:23:40Z

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 <175728472+Copilot@users.noreply.github.com> Signed-off-by: bhanushali parth hitesh <parth.bhanushali241@sakec.ac.in>

…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 <cseai2024042@rcciit.org.in> * 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 <cseai2024042@rcciit.org.in> --------- Signed-off-by: Soumyabrata Mukherjee <cseai2024042@rcciit.org.in> Signed-off-by: parth <parth.bhanushali241@sakec.ac.in>

* Fix: author slug handling and add resilient author post lookups Signed-off-by: Kaushik Tak <kaushiktak19@gmail.com> * build minor fix Signed-off-by: Kaushik Tak <kaushiktak19@gmail.com> --------- Signed-off-by: Kaushik Tak <kaushiktak19@gmail.com> Signed-off-by: parth <parth.bhanushali241@sakec.ac.in>

* feat: add search tags functionality in tag page Signed-off-by: Kaushik Tak <kaushiktak19@gmail.com> * 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 <kaushiktak19@gmail.com> * build error fix Signed-off-by: Kaushik Tak <kaushiktak19@gmail.com> --------- Signed-off-by: Kaushik Tak <kaushiktak19@gmail.com> Co-authored-by: Amaan Bhati <94218318+amaan-bhati@users.noreply.github.com> Signed-off-by: parth <parth.bhanushali241@sakec.ac.in>

add a sticky share to social media component in blog website Signed-off-by: parth <parth.bhanushali241@sakec.ac.in>

Signed-off-by: parth <parth.bhanushali241@sakec.ac.in>

Copilot

Pull request overview

This PR relocates the social media share component from the blog post header to a sticky sidebar position for improved visibility and user engagement. The share functionality (Twitter, LinkedIn, Copy Link) is moved into a new StickyShare component that appears below the waitlist banner in the right sidebar on desktop screens.

Key Changes:

Created new StickyShare component with horizontal layout and sticky positioning
Removed share functionality from PostHeaderAuthors component
Integrated StickyShare into blog post layout sidebar

Reviewed changes

Copilot reviewed 3 out of 4 changed files in this pull request and generated 1 comment.

File	Description
components/StickyShare.tsx	New component implementing social media share buttons with sticky behavior for desktop viewports
components/post-body.tsx	Integrated StickyShare component into sidebar layout between waitlist banner and ad slot; cleaned up formatting and removed test JSON data
components/PostHeaderAuthors.tsx	Removed social media share buttons and related state/logic from header author section
package-lock.json	Automatic npm lock file updates adding peer dependency flags to various packages

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

components/StickyShare.tsx

* Fix: author slug handling and add resilient author post lookups Signed-off-by: parth bhanushali <parth.bhanushali241@sakec.ac.in> * build minor fix Signed-off-by: parth bhanushali <parth.bhanushali241@sakec.ac.in> --------- Signed-off-by: PARTH Bhanushali <parth.bhanushali241@sakec.ac.in>

Co-Authored-By: bhanushali parth hitesh <parth.bhanushali241@sakec.ac.in>

* Fix: author slug handling and add resilient author post lookups Signed-off-by: parth bhanushali <parth.bhanushali241@sakec.ac.in> * build minor fix Signed-off-by: parth bhanushali <parth.bhanushali241@sakec.ac.in> --------- Signed-off-by: PARTH Bhanushali <parth.bhanushali241@sakec.ac.in> Signed-off-by: parth <parth.bhanushali241@sakec.ac.in>

Signed-off-by: parth <parth.bhanushali241@sakec.ac.in>

bhanushaliparthhitesh · 2025-11-30T06:10:47Z

@copilot open a new pull request to apply changes based on the comments in this thread

Copilot

Pull request overview

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

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

Copilot · 2025-11-30T06:16:05Z

components/StickyShare.tsx

+    const router = useRouter();
+    const [copied, setCopied] = useState(false);
+
+    const baseUrl = `https://keploy.io/blog${router.asPath}`;


The URL construction will result in a double "/blog" prefix. Line 10 hardcodes /blog in the baseUrl, but this component is already used in a blog context where router.asPath likely already includes the blog path. This could result in URLs like https://keploy.io/blog/blog/post-name instead of https://keploy.io/blog/post-name.

Consider removing the hardcoded /blog prefix and using router.asPath directly, or verify that router.asPath doesn't already include the blog path.

Suggested change

const baseUrl = `https://keploy.io/blog${router.asPath}`;

const baseUrl = `https://keploy.io${router.asPath}`;

Copilot · 2025-11-30T06:16:06Z

components/StickyShare.tsx

+    const [copied, setCopied] = useState(false);
+
+    const baseUrl = `https://keploy.io/blog${router.asPath}`;
+    const currentURL = typeof window !== 'undefined' ? encodeURIComponent(baseUrl) : "";


[nitpick] The typeof window !== 'undefined' check on line 11 is redundant. Next.js Router hooks like useRouter() already handle SSR/client-side differences, and router.asPath is available during SSR. The empty string fallback for currentURL would result in broken share URLs during SSR, but since this component is client-side only (hidden with Tailwind classes), this check adds unnecessary complexity.

Consider simplifying to: const currentURL = encodeURIComponent(baseUrl);

Suggested change

const currentURL = typeof window !== 'undefined' ? encodeURIComponent(baseUrl) : "";

const currentURL = encodeURIComponent(baseUrl);

Copilot · 2025-11-30T06:16:06Z

components/post-body.tsx

-        <div>
-
-</div>
+        <div></div>


Empty div serves no purpose and should be removed. This appears to be leftover from code cleanup.

Suggested change

<div></div>

Copilot · 2025-11-30T06:16:06Z

.vscode/settings.json

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


The .vscode/settings.json file contains IDE-specific user preferences and should not be committed to the repository. This file is typically added to .gitignore to avoid polluting the repository with individual developer settings.

Consider:

Adding .vscode/ to .gitignore

Removing this file from version control

Copilot · 2025-11-30T06:16:07Z

components/StickyShare.tsx

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


[nitpick] The wrapper div includes mb-4 (margin-bottom) which adds spacing below the component. However, the parent container in post-body.tsx already controls spacing with gap-4 on line 355. The mb-4 creates inconsistent spacing between components in the sidebar.

Consider removing mb-4 from this line to let the parent's gap-4 handle spacing uniformly.

Suggested change

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

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

Copilot · 2025-11-30T06:16:07Z

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] Inconsistent padding values in the sidebar. Lines 363 and 368 both use p-0 (no padding), but the parent aside on line 355 uses p-4. The wrapper divs with p-0 are unnecessary and don't add value.

Consider removing the wrapper divs entirely, or at least removing the redundant p-0 padding class:

{/* 2. Sticky Share (hidden on <lg) */} <div className="hidden lg:flex justify-center"> <StickyShare /> </div>

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">

<StickyShare />

</div>

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

<div className="hidden lg:flex justify-center">

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> Signed-off-by: bhanushali parth hitesh <parth.bhanushali241@sakec.ac.in> Signed-off-by: parth <parth.bhanushali241@sakec.ac.in>

* feat: add search tags functionality in tag page Signed-off-by: Kaushik Tak <kaushiktak19@gmail.com> * 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 <kaushiktak19@gmail.com> * build error fix Signed-off-by: Kaushik Tak <kaushiktak19@gmail.com> --------- Signed-off-by: Kaushik Tak <kaushiktak19@gmail.com> Co-authored-by: Amaan Bhati <94218318+amaan-bhati@users.noreply.github.com> Signed-off-by: parth <parth.bhanushali241@sakec.ac.in>

bhanushaliparthhitesh and others added 10 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 <175728472+Copilot@users.noreply.github.com> Signed-off-by: bhanushali parth hitesh <parth.bhanushali241@sakec.ac.in>

Update components/post-body.tsx

8a674be

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> Signed-off-by: bhanushali parth hitesh <parth.bhanushali241@sakec.ac.in>

Update components/post-body.tsx

c571738

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> Signed-off-by: bhanushali parth hitesh <parth.bhanushali241@sakec.ac.in>

feat/#3298

0323f3c

add a sticky share to social media component in blog website Signed-off-by: parth <parth.bhanushali241@sakec.ac.in>

Delete StickyShare.tsx

cc35464

Fix StickyShare and PostBody layout

a5d9adc

Signed-off-by: parth <parth.bhanushali241@sakec.ac.in>

Copilot AI review requested due to automatic review settings November 30, 2025 05:23

Copilot started reviewing on behalf of bhanushaliparthhitesh November 30, 2025 05:24 View session

Copilot finished reviewing on behalf of bhanushaliparthhitesh November 30, 2025 05:25

Copilot AI reviewed Nov 30, 2025

View reviewed changes

components/StickyShare.tsx Outdated Show resolved Hide resolved

bhanushaliparthhitesh added 2 commits November 30, 2025 11:24

Create settings.json

5a77247

Co-Authored-By: bhanushali parth hitesh <parth.bhanushali241@sakec.ac.in>

bhanushaliparthhitesh force-pushed the feat3298Add-sticky-social-media-share-component-below-blog-banner branch from 30b1227 to d02a87b Compare November 30, 2025 06:02

Refactor: Rename StickyShares to StickyShare and fix placement

e9cf981

Signed-off-by: parth <parth.bhanushali241@sakec.ac.in>

bhanushaliparthhitesh requested a review from Copilot November 30, 2025 06:12

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

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

Copilot AI reviewed Nov 30, 2025

View reviewed changes

Update components/StickyShare.tsx

0107fb9

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> Signed-off-by: bhanushali parth hitesh <parth.bhanushali241@sakec.ac.in> Signed-off-by: parth <parth.bhanushali241@sakec.ac.in>

bhanushaliparthhitesh force-pushed the feat3298Add-sticky-social-media-share-component-below-blog-banner branch from abcc86b to 0107fb9 Compare November 30, 2025 06:48

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Feat3298 add sticky social media share component below blog banner #212

Feat3298 add sticky social media share component below blog banner #212

Uh oh!

bhanushaliparthhitesh commented Nov 30, 2025

Uh oh!

Copilot AI left a comment

Uh oh!

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

	const baseUrl = `https://keploy.io/blog${router.asPath}`;
	const baseUrl = `https://keploy.io${router.asPath}`;

	const currentURL = typeof window !== 'undefined' ? encodeURIComponent(baseUrl) : "";
	const currentURL = encodeURIComponent(baseUrl);

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

Feat3298 add sticky social media share component below blog banner #212

Are you sure you want to change the base?

Feat3298 add sticky social media share component below blog banner #212

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!

Uh oh!

bhanushaliparthhitesh commented Nov 30, 2025

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

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