diff --git a/app/a/[slug]/BlogPostClient.tsx b/app/a/[slug]/BlogPostClient.tsx index 1cc923c..3af4a8c 100644 --- a/app/a/[slug]/BlogPostClient.tsx +++ b/app/a/[slug]/BlogPostClient.tsx @@ -1,5 +1,6 @@ "use client" +import { useState, useEffect, useRef } from "react" import Link from "next/link" import { ArrowLeft, Calendar, User } from "lucide-react" import Image from "next/image" @@ -8,6 +9,15 @@ import Footer from "@/components/footer" import { BlogPost } from "@/lib/blog" export default function BlogPostPage({ post }: { post: BlogPost }) { + const [copied, setCopied] = useState(false) + const copiedTimeoutRef = useRef(null) + + useEffect(() => { + return () => { + if (copiedTimeoutRef.current != null) window.clearTimeout(copiedTimeoutRef.current) + } + }, []) + return (
{/* Header */} @@ -29,15 +39,11 @@ export default function BlogPostPage({ post }: { post: BlogPost }) { {/* Hero Image */} {post.image && (
- {post.title}
@@ -67,6 +73,129 @@ export default function BlogPostPage({ post }: { post: BlogPost }) {
+ {/* Social Share Buttons */} +
+

Share this article:

+
+ {/* Twitter/X Share */} + + + {/* LinkedIn Share */} + + + {/* Facebook Share */} + + + {/* Copy Link */} + +
+
+ + {/* Screen reader announcement for copy feedback */} +
+ {copied && "Link copied to clipboard"} +
+
diff --git a/app/globals.css b/app/globals.css index ac68442..c968533 100644 --- a/app/globals.css +++ b/app/globals.css @@ -10,6 +10,19 @@ body { .text-balance { text-wrap: balance; } + + /* Screen reader only - hides content visually but keeps it accessible to screen readers */ + .sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border-width: 0; + } } @layer base {