mastodon-post Web Component

The mastodon-post Web Component allows you to turn a regular link to a Mastodon post into an embeddable post quote including metadata such as reply count, boost count, favourites and more.

Origin

After reading articles from both Robb Knight and Mario Hamann I was inspired to put my spin on their revised approach to showing vanity metrics from social media on their blog posts.

The recent talk around privacy somewhat went hand in hand with my doubts about Webmentions as a technology, what with it's complexity to implement maintain as well as incompatibility with most of the social networks out there (something something walled garden). At the time of publishing you'll most likely see Webmentions in action at the bottom of this article, but at some point I plan to replace it with this Web Component.

`mastodon-post`

The <mastodon-post> component is designed to be wrapped around a regular anchor element which is linking to a Mastodon post and progressively enhance it into an embedded post.

The component itself leverages the public Mastodon API to fetch data such as the post content and metadata. It's main feature is that you can customise the template it uses depending on your needs, whether it's just for embedding the post directly on the page or just to expose vanity metrics to accompany your blog post.

Features

This Web Component allows you to:

Turn a regular Mastodon post link into a quoted Mastodon post
Surface the post metadata alongside the post, e.g. reply count, reblog count, favourite count
Use a custom template for all instances of the component on the page using a data-key="name" data attributes
Use a custom template for specific instances using the template attribute
Retrieve nested data using the data-key attribute and typical JavaScript key referencing, e.g. data-key="account.display_name" or data-key="media_attachments[0]preview_url"

Usage

The <mastodon-post> component can be used with the help of a script tag and placing an anchor element in like so:

<script type="module" src="mastodon-post.js"></script>

<mastodon-post>
  <a href="https://mastodon.design/@DavidDarnes/109824258017750161">
    Discuss on Mastodon
  </a>
</mastodon-post>

mastodon-post example usage

By default the component will show a quote, a link to the original post mentioning the author's handle, and metrics of the post engagement (replies, boosts and favourites). Here's a live demo of the component.

But you can also apply a custom template to all <mastodon-post> components on the page with the use of a <template> element:

<script type="module" src="mastodon-post.js"></script>

<template id="mastodon-post-template">
  <dl>
    <dt>Reposts</dt>
    <dd data-key="reblogs_count"></dd>
    <dt>Replies</dt>
    <dd data-key="replies_count"></dd>
    <dt>Favourites</dt>
    <dd data-key="favourites_count"></dd>
  </dl>
  <a data-key="url">
    View original post from <img alt="avatar" data-key="account.avatar" />
    <strong data-key="account.display_name"></strong> on
    <strong data-key="hostname"></strong>
  </a>
</template>

<mastodon-post>
  <a href="https://mastodon.design/@DavidDarnes/109824258017750161">
    Discuss on Mastodon
  </a>
</mastodon-post>

mastodon-post with custom template example

In the above example only the reposts, replies and favourites are being shown. Multiple templates can be used on the same page as well using the template attribute which references the id of a <template> element on the page:

<template id="custom-template">
  <a data-key="content, url"></a>
</template>

<mastodon-post template="custom-template">
  <a href="https://mastodon.design/@DavidDarnes/109824258017750161">
    Discuss on Mastodon
  </a>
</mastodon-post>

mastodon-post with a unique template applied

In above example you'll see that the data-key attribute can also accept multiple values, in this instance the content is being added into the anchor element as well as the URL being applied to the href attribute. Check out this demo page of all these custom template features in action.