feat(blog): integrate ShareModal into blog post page

Author: josimar-silva

.github/workflows/deploy.yaml

@@ -57,6 +57,8 @@ jobs:
 
       - name: 🏗️ Build production output
         run: just build
+        env:
+          NEXT_PUBLIC_SITE_URL: https://josimar-silva.com
 
       - name: 🚀 Deploy to Cloudflare Pages
         id: deploy

e2e-tests/share-modal.spec.ts

@@ -0,0 +1,136 @@
+import { test, expect } from "./_shared/fixtures";
+import { Locator, Page } from "@playwright/test";
+
+async function openShareModal(page: Page): Promise<Locator> {
+  const shareButton = page.getByRole("button", { name: "Share" });
+
+  await expect(shareButton).toBeVisible();
+  await shareButton.click();
+
+  const modal = page.getByRole("dialog");
+  await expect(modal).toBeVisible();
+
+  return modal;
+}
+
+async function getSharePopupFor(label: string, page: Page) {
+  const [popup] = await Promise.all([
+    page.waitForEvent("popup"),
+    page.getByLabel(label).click(),
+  ]);
+  return popup;
+}
+
+function getUrlParam(url: string, name: string) {
+  const params = new URLSearchParams(new URL(url).search);
+  return params.get(name);
+}
+
+test.describe("ShareModal", () => {
+  let blogPostUrl: string;
+  let blogPostTitle: string;
+
+  test.beforeEach(async ({ page }) => {
+    await page.goto("/");
+
+    const blogPosts = page.getByTestId("featured-post-link");
+    const firstBlogPost = blogPosts.first();
+
+    blogPostUrl = (await firstBlogPost.getAttribute("href")) || "";
+
+    await page.goto(blogPostUrl);
+
+    blogPostTitle = await page.getByTestId("blog-post-title").textContent();
+  });
+
+  test("should open share modal and display share options", async ({
+    page,
+  }) => {
+    await expect(
+      page.getByRole("heading", { name: blogPostTitle }),
+    ).toBeVisible();
+
+    const modal = await openShareModal(page);
+
+    await expect(modal.getByText("Share this post")).toBeVisible();
+    await expect(
+      modal.getByRole("button", { name: "Copy Link" }),
+    ).toBeVisible();
+    await expect(modal.getByLabel("Share via Email")).toBeVisible();
+    await expect(modal.getByLabel("Share on Twitter")).toBeVisible();
+    await expect(modal.getByLabel("Share on Telegram")).toBeVisible();
+    await expect(modal.getByLabel("Share on LinkedIn")).toBeVisible();
+    await expect(modal.getByLabel("Share on WhatsApp")).toBeVisible();
+  });
+
+  test("should copy the post link to clipboard", async ({ page }, testInfo) => {
+    if (
+      ["webkit", "mobile-chrome", "mobile-safari", "microsoft-edge"].includes(
+        testInfo.project.name,
+      )
+    ) {
+      test.skip();
+    }
+
+    await openShareModal(page);
+
+    await page.getByRole("button", { name: "Copy Link" }).click();
+    const clipboardText = await page.evaluate(() =>
+      navigator.clipboard.readText(),
+    );
+    expect(clipboardText).toContain(blogPostUrl);
+  });
+
+  test("should share on Email", async ({ page }) => {
+    await openShareModal(page);
+
+    const emailButton = page.getByLabel("Share via Email");
+    await expect(emailButton).toBeVisible();
+    await emailButton.click();
+  });
+
+  test("should share on Twitter", async ({ page }) => {
+    await openShareModal(page);
+
+    const popup = await getSharePopupFor("Share on Twitter", page);
+
+    expect(popup.url()).toContain("x.com/intent/tweet?url=");
+    expect(popup.url()).toContain(`${encodeURIComponent(blogPostTitle)}`);
+    expect(popup.url()).toContain(`${encodeURIComponent(blogPostUrl)}`);
+  });
+
+  test("should share on Telegram", async ({ page }) => {
+    await openShareModal(page);
+
+    const popup = await getSharePopupFor("Share on Telegram", page);
+
+    expect(popup.url()).toContain("telegram.me/share/url?url=");
+    expect(popup.url()).toContain(`${encodeURIComponent(blogPostTitle)}`);
+    expect(popup.url()).toContain(`${encodeURIComponent(blogPostUrl)}`);
+  });
+
+  test("should share on LinkedIn", async ({ page }) => {
+    await openShareModal(page);
+
+    const popup = await getSharePopupFor("Share on LinkedIn", page);
+
+    const sessionRedirect = getUrlParam(popup.url(), "session_redirect");
+    expect(sessionRedirect).not.toBeNull();
+
+    const decodedRedirectUrl = decodeURIComponent(sessionRedirect as string);
+
+    expect(decodedRedirectUrl).toContain("linkedin.com/shareArticle");
+    expect(decodedRedirectUrl).toContain(blogPostTitle);
+    expect(decodedRedirectUrl).toContain(blogPostUrl);
+  });
+
+  test("should share on WhatsApp", async ({ page }) => {
+    await openShareModal(page);
+
+    const popup = await getSharePopupFor("Share on WhatsApp", page);
+
+    expect(popup.url()).toContain("whatsapp.com/send");
+    expect(popup.url()).toContain(`${encodeURIComponent(blogPostTitle)}`);
+    expect(popup.url()).toContain(`${encodeURIComponent(blogPostUrl)}`);
+  });
+});

playwright.config.ts

@@ -5,7 +5,6 @@ import type { GitHubActionOptions } from "@estruyf/github-actions-reporter";
  * Read environment variables from file.
  * https://github.com/motdotla/dotenv
  */
-// require('dotenv').config();
 
 /**
  * See https://playwright.dev/docs/test-configuration.
@@ -60,7 +59,12 @@ export default defineConfig({
   projects: [
     {
       name: "chromium",
-      use: { ...devices["Desktop Chrome"] },
+      use: {
+        ...devices["Desktop Chrome"],
+        contextOptions: {
+          permissions: ["clipboard-write", "clipboard-read"],
+        },
+      },
     },
 
     {
@@ -90,7 +94,13 @@ export default defineConfig({
     },
     {
       name: "google-chrome",
-      use: { ...devices["Desktop Chrome"], channel: "chrome" },
+      use: {
+        ...devices["Desktop Chrome"],
+        channel: "chrome",
+        contextOptions: {
+          permissions: ["clipboard-write", "clipboard-read"],
+        },
+      },
     },
   ],
 

src/app/__components/blog/blog-post.test.tsx

@@ -57,6 +57,7 @@ jest.mock("./blog-post-content", () => ({
 }));
 
 const mockPost = {
+  slug: "test-blog-post-title",
   title: "Test Blog Post Title",
   content: "This is the content of the test blog post.",
   date: "2025-08-25T10:00:00Z",
@@ -104,10 +105,10 @@ describe("BlogPost", () => {
     expect(backButton).toHaveAttribute("href", "/blog");
   });
 
-  it("displays the Share button", () => {
+  it("displays the ShareModal button", () => {
     render(<BlogPost post={mockPost} />);
 
-    const shareButton = screen.getByRole("button", { name: /Share/i });
-    expect(shareButton).toBeInTheDocument();
+    const shareModalButton = screen.getByRole("button", { name: /share/i });
+    expect(shareModalButton).toBeInTheDocument();
   });
 });

src/app/__components/blog/blog-post.tsx

@@ -22,13 +22,13 @@
  * SOFTWARE.
  */
 
-import { ArrowLeft, Calendar, Clock, Share2 } from "lucide-react";
+import { ArrowLeft, Calendar, Clock } from "lucide-react";
 import Image from "next/image";
 import Link from "next/link";
 
 import BlogPostContent from "@/app/__components/blog/blog-post-content";
 import { BlogPostNavigation } from "@/app/__components/blog/blog-post-navigation";
-import {ShareButton} from "@/app/__components/blog/share-button";
+import ShareModal from "@/app/__components/blog/share-modal";
 import { Badge } from "@/app/__components/ui/badge";
 import { Button } from "@/app/__components/ui/button";
 
@@ -70,7 +70,10 @@ export function BlogPost({ post }: Readonly<BlogPostProps>) {
 
         {/* Header */}
         <header className="mb-8">
-          <h1 className="text-4xl font-bold tracking-tight lg:text-5xl mb-4">
+          <h1
+            className="text-4xl font-bold tracking-tight lg:text-5xl mb-4"
+            data-testid="blog-post-title"
+          >
             {post.title}
           </h1>
 
@@ -89,10 +92,7 @@ export function BlogPost({ post }: Readonly<BlogPostProps>) {
               </div>
             </div>
 
-            <Button variant="outline" size="sm">
-              <Share2 className="mr-2 h-4 w-4" />
-              Share
-            </Button>
+            <ShareModal title={post.title} slug={post.slug} />
           </div>
 
           {/* Metadata */}

src/app/__components/featured-posts.tsx

@@ -63,7 +63,10 @@ export async function FeaturedPosts() {
               className="overflow-hidden flex flex-col"
               data-testid="featured-post-item"
             >
-              <Link href={`/blog/${post.slug}`}>
+              <Link
+                href={`/blog/${post.slug}`}
+                data-testid="featured-post-link"
+              >
                 <Image
                   src={post.image || "/assets/blog/posts/placeholder.svg"}
                   alt={post.title}