Ever since I ghosted the larger swarm of socials, Mastodon has become my go to collect off the cuff thoughts and share things. I setup my own instance which I found to be a rewarding experience, and I’ve just been rambling about to no particular end.
One thing that has been missing though that has bothered me about Mastodon: no one ever has a share button for it on their website. Sure, the Web Share Target API works great with the PWA version on my phone, but my phone is better used a cup coaster at this point and I’d like some of that sweet sharing action on my Chromebook or desktop.
Where do you get off Justin, you don’t even have a Mastodon share link on your posts! Indeed angry internet user, I didn’t. My reasons were the same as everyone elses I suspect: the decentralized nature of the platform makes any one target hard to deal with. You don’t know (and honestly, I should not need to know) where your instance is.
To remedy this, I’ve come up with a tiny web component called <share-to-mastodon> which does as much of the heavy lifting as possible. Under the hood:
- On interaction, opens a little modal dialog window asking for the instance url
- Allows user to select from a default datalist that is present or custom set by the site (the power of
input type=url list and datalist! yeah web platform)
- Will remember that domain in localStorage if the user wants
- Does zero tracking of anything
- Lots of custom css props, every string can be overridden for all your locale needs
You can see this inaction in the little demo video I made or you can just scroll down to the bottom of this post and click the Mastodon link in the share section (unless of course you are on mobile…as I only load it if your device/platform doesn’t support the Web Share API).
To use, you can install it via npm or yarn:
npm i @justinribeiro/share-to-mastodon
# or
yarn add @justinribeiro/share-to-mastodon
You can also just include the built dist version (which includes LitElement)
<script type="module" src="https://cdn.jsdelivr.net/npm/@justinribeiro/share-to-mastodon@0.2.0/dist/share-to-mastodon.js">
There are lots of available options (do check out the docs or the repo), but the general gist is it’s pretty simple to use:
<share-to-mastodon message="My website is amazing, come check it out!" url="https://justinribeiro.com">
Share The Magical Link
</share-to-mastodon>
For a more complex, “I really want a button” look, the lightDOM can be styled in conjunction with the many available css custom property options.
<style>
.myMagicalCss {
--wc-stm-link-text-decoration: none;
--wc-stm-link-color-initial: #0049a3;
--wc-stm-link-color-visited: #0049a3;
}
.myMagicalCss > div {
display: inline-flex;
justify-content: center;
align-items: center;
padding: 0.5rem;
background: lightblue;
border-radius: 5px;
border: 1px solid #ccc;
}
.myMagicalCss > div:hover {
background: #eee;
}
.myMagicalCss svg {
width: 24px;
margin-right: 0.5rem;
}
</style>
<share-to-mastodon class="myMagicalCss">
<div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 216.4 232">
<path
fill="#2b90d9"
d="M212 139c-3 16-29 34-58 38-15 2-30 3-46 3-26-2-46-7-46-7v8c4 25 26 27 47 28 21 0 39-6 39-6l1 19s-14 8-41 10c-14 1-32-1-53-6C9 214 1 165 0 116V76c0-50 33-65 33-65C50 3 78 0 108 0h1c29 0 58 3 74 11 0 0 33 15 33 65 0 0 1 37-4 63"
/>
<path
fill="#fff"
d="M178 80v61h-25V82c0-13-5-19-15-19-12 0-18 8-18 22v33H96V85c0-14-6-22-17-22s-16 6-16 19v59H39V80c0-12 3-22 9-30 7-7 16-11 26-11 13 0 22 5 28 15l6 10 6-10c6-10 16-15 28-15 11 0 19 4 26 11 6 8 10 18 10 30"
/>
</svg>
<div>Share This Site</div>
</div>
</share-to-mastodon>
Using the lightDOM and available slot makes creating your own version of the button UI simple and fast.
Justin Ribeiro
Now I readily admit there is a bit of a trick this. One, the component is by default an display: inline (as all web components are unless you override the :host) and the magically the contained modal and backdrop load. How exactly is that? Quick eyed readers will not that the actual slotted lightdom or string temporarily hide and internals of the web component change, giving you the effect of the modal without additional setup. This has some disadvantages but from a I-am-contained standpoint, it’s a little easier to handle.
For now, it fits my initial needs, at least during this first release. Stay tuned, as we’re going to dial this component’s use up a bit in the coming days.