Given the content HTML of a Mastodon status
wrapped as its own children, this custom element rewrites hashtag links to point at a local route
instead of the origin server, and wraps the hashtag-only bottom row as a tag-bar of pills.
It is currently unstyled and adds classes so you can style yourself.
See it in action at Ayo's Threads page.
Examples
Say we want to enhance the following content from a Mastodon status:
Just shipped a new release, thanks for all the feedback along the way!
By setting the tag-url="/tags/" attribute of the <mastodon-content> custom element, it rewrites all the hashtag links to go to a local /tags/ route.
The bottom row hashtags are also wrapped as a tag-bar so they can be styled to appear as pills or however you want.
Go ahead, try clicking the hashtag links below. They will now open in a demo "tags" page.
Just shipped a new release, thanks for all the feedback along the way!
Without tag-url, hashtags stay pointed at the server's
own "tags" page. Try clicking the hashtag links below to see that it opens at mastodon.social:
Hooray! The hashtag links here will go to the origin server.
Hashtags in the body (i.e., not in the hashtags-only bottom row) will not be wrapped as a pill. See the #thanks hashtag below.
Just shipped a new release, thanks for all the feedback along the way! Really, #thanks a lot!
How it works
- Rewrites hashtag links so they would open in a local URL. Hashtag links
in the content HTML of a Mastodon status will point at a local route of
your choosing which you provide as value to an optional
tag-urlattribute. Leave this attribute out and the hashtag links stay on the origin server's own hashtag page - Wraps a line consisting only of hashtag links (Mastodon's convention for a
trailing "tag list" bottom row on a post) with a
tag-barclass, and each of its links with apillclass, so they can be styled as pills instead of inline text links.