Skip to content

feat(article): add social share buttons with all clickable link for all sharing options and pre-filled content #62

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
pranjal29092005 wants to merge 4 commits into
base: main
Choose a base branch
from
+151 −9
Open

feat(article): add social share buttons with all clickable link for all sharing options and pre-filled content #62

Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
9664524
feat(article): add social share buttons with pre-filled content
pranjal29092005 Dec 13, 2025
3b5eeaa
refactor(article): address CodeRabbit feedback for share buttons
pranjal29092005 Dec 13, 2025
0098224
fix(article): address final CodeRabbit security and cleanup feedback
pranjal29092005 Dec 13, 2025
20d2465
chore(article): address CodeRabbit accessibility nitpicks
pranjal29092005 Dec 13, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
101 changes: 95 additions & 6 deletions app/a/[slug]/BlogPostClient.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,15 +29,15 @@ export default function BlogPostPage({ post }: { post: BlogPost }) {
{/* Hero Image */}
{post.image && (
<div className="relative h-64 md:h-96">
<Image
<Image
src={
post.image.startsWith("/")
? `${post.image}`
post.image.startsWith("/")
? `${post.image}`
: post.image
}
alt={post.title}
fill
className="object-cover"
alt={post.title}
fill
className="object-cover"
priority
/>
<div className="absolute inset-0 bg-gradient-to-t from-black/20 to-transparent" />
Expand Down Expand Up @@ -67,6 +67,95 @@ export default function BlogPostPage({ post }: { post: BlogPost }) {
</div>
</div>

{/* Social Share Buttons */}
<div className="mb-8 pb-8 border-b border-gradient-to-r from-[#228B22]/20 to-[#FFBF00]/20">
<p className="text-sm font-medium text-gray-600 mb-4">Share this article:</p>
<div className="flex flex-wrap items-center gap-3">
{/* Twitter/X Share */}
<button
onClick={() => {
const text = encodeURIComponent(post.title)
const url = encodeURIComponent(window.location.href)
window.open(
`https://twitter.com/intent/tweet?text=${text}&url=${url}`,
'_blank',
'width=550,height=420'
)
}}
className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-gradient-to-r from-[#228B22] to-[#5A981A] hover:from-[#3E921E] hover:to-[#91A511] text-white text-sm font-medium transition-all duration-300 shadow-md hover:shadow-lg transform hover:-translate-y-0.5"
aria-label="Share on Twitter"
>
<svg className="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
<path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" />
</svg>
Twitter
</button>

{/* LinkedIn Share */}
<button
onClick={() => {
const url = encodeURIComponent(window.location.href)
const title = encodeURIComponent(post.title)
const summary = encodeURIComponent(post.excerpt || '')
window.open(
`https://www.linkedin.com/sharing/share-offsite/?url=${url}&title=${title}&summary=${summary}`,
'_blank',
'width=550,height=420'
)
}}
className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-gradient-to-r from-[#91A511] to-[#ADAC0D] hover:from-[#ADAC0D] hover:to-[#C8B209] text-white text-sm font-medium transition-all duration-300 shadow-md hover:shadow-lg transform hover:-translate-y-0.5"
aria-label="Share on LinkedIn"
>
<svg className="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
<path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z" />
</svg>
LinkedIn
</button>

{/* Facebook Share */}
<button
onClick={() => {
const url = encodeURIComponent(window.location.href)
const quote = encodeURIComponent(post.title)
window.open(
`https://www.facebook.com/sharer/sharer.php?u=${url}&quote=${quote}`,
'_blank',
'width=550,height=420'
)
}}
className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-gradient-to-r from-[#C8B209] to-[#E4B905] hover:from-[#E4B905] hover:to-[#FFBF00] text-white text-sm font-medium transition-all duration-300 shadow-md hover:shadow-lg transform hover:-translate-y-0.5"
aria-label="Share on Facebook"
>
<svg className="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
<path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z" />
</svg>
Facebook
</button>

{/* Copy Link */}
<button
onClick={() => {
navigator.clipboard.writeText(window.location.href).then(() => {
// Show temporary success feedback
const btn = document.activeElement as HTMLButtonElement
const originalText = btn.innerHTML
btn.innerHTML = '<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg> Copied!'
setTimeout(() => {
btn.innerHTML = originalText
}, 2000)
})
}}
className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-gradient-to-r from-[#E4B905] to-[#FFBF00] hover:from-[#FFBF00] hover:to-[#FFC517] text-white text-sm font-medium transition-all duration-300 shadow-md hover:shadow-lg transform hover:-translate-y-0.5"
aria-label="Copy link to clipboard"
>
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
</svg>
Copy Link
</button>
</div>
</div>

<div className="prose prose-lg max-w-none">
<MarkdownRenderer content={post.content} />
</div>
Expand Down