Menu

Post image 1
Post image 2
Post image 3
1 / 3
0

Building a share widget with the Clipboard API

DEV Community·Roger Rajaratnam·27 days ago
#NgqYhvEF
Reading 0:00
15s threshold

Original post: Building a share widget with the Clipboard API Series: Part of How this blog was built — documenting every decision that shaped this site. Sharing a post is one of those interactions that looks trivial to implement, yet has a few subtle corners once you get into it, particularly around the copy-to-clipboard flow and URL construction for each channel. SharePost.astro is a small component that covers four share targets: LinkedIn, Reddit, email, and a copy-link button. It has no external dependencies, no JavaScript frameworks, and no tracking. The component props interface Props { title : string ; url : string ; vertical ?: boolean ; variant ?: " default " | " hero " | " sidebar " | " menu " ; } Enter fullscreen mode Exit fullscreen mode url is the fully qualified canonical URL of the post, passed in from PageHero.astro as Astro.url.href . vertical flips the layout to a column stack for sidebar placement.…

Continue reading — create a free account

Join HashtagPLUS to read full articles, follow hashtags, vote, and join the conversation.

Read More