Added sticky share to social media component in blog website by DARSHAN-R-DARSHAN · Pull Request #323 · keploy/blog-website

DARSHAN-R-DARSHAN · 2026-02-12T18:23:58Z

Fix: keploy/keploy#3298

What I did

Ran the website locally
Checked if it works well

Now

Signed-off-by: DARSHAN-R-DARSHAN <darshanramanji07@gmail.com>

DARSHAN-R-DARSHAN · 2026-02-12T18:41:51Z

Hi! @amaan-bhati, I think that the share option would look cool if it is on both PostHeader and below the blog banner.
If any changes are required, I would really be happy to fix them. Thanks!

dhananjay6561 · 2026-03-05T09:28:28Z

Hi @DARSHAN-R-DARSHAN

Thank you for contributing and taking the initiative to work on this!
However, since then the component has been revamped in the repository, and this issue is no longer present. Because of that, we won’t be able to proceed with merging this PR.

Feel free to explore other open issues in the repository and pick one that hasn’t been addressed yet. We’d be happy to review another contribution from you. Thanks again for your effort!

dhananjay6561 · 2026-04-06T12:07:11Z

Hey @DARSHAN-R-DARSHAN 👋 — thanks for putting this PR together, we appreciate the effort!

We've gone ahead and requested a Copilot review on this. Here's some context from the reviewer:

Share URL broken: missing https://, double slashes from basePath+asPath. Duplicate gap-5/gap-3 classes.

Once you've had a chance to go through the comments, please address the feedback and resolve the threads — and we'll get this across the line. Feel free to ask if anything's unclear. Happy coding! 💙

Copilot

Pull request overview

This PR adds a “sticky” social sharing UI to the blog post sidebar so readers can share the current post (Twitter/X, LinkedIn, and copy link) while scrolling.

Changes:

Added share URL construction and clipboard-copy behavior to PostBody.
Rendered a new “Share this” icon row in the sticky <aside> sidebar.

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

Copilot · 2026-04-06T12:09:51Z

+
+    const currentURL = 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);


currentURL is built as keploy.io/${router.basePath + router.asPath} which omits the protocol and will produce a double-slash before the path (e.g. keploy.io//blog/... because the path starts with /). This can lead to malformed share URLs. Build the absolute URL from the existing SITE_URL (or window.location.origin) and normalize slashes before encodeURIComponent.

Suggested change

const currentURL = 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);

const origin =

typeof window !== "undefined"

? window.location.origin

: "https://keploy.io";

const normalizedPath = `${router.basePath || ""}${router.asPath || "/"}`

.replace(/\/{2,}/g, "/")

.replace(/^([^/])/, "/$1");

const absoluteCurrentURL = `${origin.replace(/\/+$/, "")}${normalizedPath}`;

const currentURL = encodeURIComponent(absoluteCurrentURL);

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(absoluteCurrentURL);

setCopied(true);

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

} catch (err) {

console.error("Failed to copy the article link. Please copy the URL from your browser address bar instead.", err);

Copilot · 2026-04-06T12:09:51Z

+
+    const currentURL = 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);


The clipboard URL is hard-coded to https://keploy.io/blog${router.asPath} while the share URLs use a different construction. This can drift if the basePath/domain changes and can create inconsistent shared vs copied URLs. Prefer deriving all three from a single canonical base (e.g. SITE_URL) and the current path.

Suggested change

const currentURL = 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);

const currentPath = `${router.basePath || ""}${router.asPath || ""}`;

const siteUrl =

typeof window !== "undefined"

? window.location.origin

: "https://keploy.io";

const canonicalUrl = `${siteUrl}${currentPath}`;

const encodedCanonicalUrl = encodeURIComponent(canonicalUrl);

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

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

const copyToClipboard = async () => {

try {

await navigator.clipboard.writeText(canonicalUrl);

setCopied(true);

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

} catch (err) {

console.error("Failed to copy the link. Please copy the URL from your browser address bar instead.", err);

Copilot · 2026-04-06T12:09:51Z

+          setCopied(true);
+          setTimeout(() => setCopied(false), 2000); 
+        } catch (err) {


setTimeout(() => setCopied(false), 2000) is not cleared on unmount, which can cause a state update on an unmounted component when navigating away quickly. Store the timeout id (e.g. in a ref) and clear it in an effect cleanup.

Copilot · 2026-04-06T12:09:52Z

+              <Link
+                href={twitterShareUrl}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="twitter-share-button text-xl text-black transition-colors duration-300 hover:text-blue-500"
+              >
+                <FaXTwitter className="icon" />
+              </Link>
+              <Link
+                href={linkedinShareUrl}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="linkedin-share-button text-xl text-black transition-colors duration-300 hover:text-blue-500"
+              >
+                <FaLinkedin className="icon" />
+              </Link>


The Twitter/LinkedIn share links render icon-only content without an accessible name. Add an aria-label (or visually-hidden text) to each link so screen readers can announce what the control does.

Copilot · 2026-04-06T12:09:52Z

      className="w-full h-60"
    />
  </div> */}
+          <div className="flex flex-row gap-5 items-center gap-3 sm:gap-5 order-2 sm:order-none mt-2 md:mb-2">


The container class list includes conflicting gap utilities (gap-5 and gap-3 sm:gap-5) which makes the effective spacing depend on class order and is easy to misread. Remove the redundant gap-* so only the intended spacing remains.

Suggested change

<div className="flex flex-row gap-5 items-center gap-3 sm:gap-5 order-2 sm:order-none mt-2 md:mb-2">

<div className="flex flex-row items-center gap-3 sm:gap-5 order-2 sm:order-none mt-2 md:mb-2">

Copilot · 2026-04-06T12:09:52Z

+          setCopied(true);
+          setTimeout(() => setCopied(false), 2000); 
+        } catch (err) {
+          console.error("Failed to copy!", err);


The new console.error("Failed to copy!", err) message doesn't give a user-actionable next step. Consider handling this as UI feedback (e.g. show a non-intrusive message like “Copy failed — please copy from the address bar”) instead of (or in addition to) logging.

Suggested change

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

const copyFailureMessage = "Copy failed — please copy the link from the address bar.";

window.alert(copyFailureMessage);

console.error(copyFailureMessage, err);

added sticky share to social media component in blog website

5d85191

Signed-off-by: DARSHAN-R-DARSHAN <darshanramanji07@gmail.com>

DARSHAN-R-DARSHAN force-pushed the design/sticky-share branch from 91269d1 to 5d85191 Compare February 12, 2026 18:30

dhananjay6561 requested a review from Copilot April 6, 2026 12:07

Copilot started reviewing on behalf of dhananjay6561 April 6, 2026 12:07 View session

Copilot AI reviewed Apr 6, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Added sticky share to social media component in blog website#323

Added sticky share to social media component in blog website#323
DARSHAN-R-DARSHAN wants to merge 1 commit intokeploy:mainfrom
DARSHAN-R-DARSHAN:design/sticky-share

DARSHAN-R-DARSHAN commented Feb 12, 2026 •

edited

Loading

Uh oh!

DARSHAN-R-DARSHAN commented Feb 12, 2026

Uh oh!

dhananjay6561 commented Mar 5, 2026

Uh oh!

dhananjay6561 commented Apr 6, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Apr 6, 2026

Uh oh!

Copilot AI Apr 6, 2026

Uh oh!

Copilot AI Apr 6, 2026

Uh oh!

Copilot AI Apr 6, 2026

Uh oh!

Copilot AI Apr 6, 2026

Uh oh!

Copilot AI Apr 6, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

	<div className="flex flex-row gap-5 items-center gap-3 sm:gap-5 order-2 sm:order-none mt-2 md:mb-2">
	<div className="flex flex-row items-center gap-3 sm:gap-5 order-2 sm:order-none mt-2 md:mb-2">

-          console.error("Failed to copy!", err);
+          const copyFailureMessage = "Copy failed — please copy the link from the address bar.";
+          window.alert(copyFailureMessage);
+          console.error(copyFailureMessage, err);

Conversation

DARSHAN-R-DARSHAN commented Feb 12, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What I did

Now

Uh oh!

DARSHAN-R-DARSHAN commented Feb 12, 2026

Uh oh!

dhananjay6561 commented Mar 5, 2026

Uh oh!

dhananjay6561 commented Apr 6, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Copilot AI Apr 6, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 6, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 6, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 6, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 6, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 6, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

DARSHAN-R-DARSHAN commented Feb 12, 2026 •

edited

Loading