@daviddarnes/mastodon-post
v1.3.0
A Web Component to display Mastodon posts and their metadata
0/weekUpdated 1 years agoMITUnpacked: 16.0 KB
Published by David Darnes
npm install @daviddarnes/mastodon-postmastodon-post
A Web Component to display Mastodon posts and their metadata.
Demo | Custom template demo | Further reading
Examples
General usage example:
``html
Example using a custom template:
`html
Example using a more complex custom template:
`html
View original post from
on
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 attributestemplate
- Use a custom template for specific instances using the attributedata-key
- Retrieve nested data using the attribute and typical JavaScript key referencing, e.g. data-key="account.display_name" or data-key="media_attachments[0]preview_url"
Installation
You have a few options (choose one of these):
1. Install via npm: npm install @daviddarnes/mastodon-post
1. Download the source manually from GitHub into your project.
1. Skip this step and use the script directly via a 3rd party CDN (not recommended for production use)
$3
Make sure you include the
`
`html`
src="https://www.unpkg.com/@daviddarnes/mastodon-post@1.3.0/mastodon-post.js"
>
`html`
src="https://esm.sh/@daviddarnes/mastodon-post@1.3.0"
>
$3
The default template for the component looks like this:
`html`
@
However you can customise the template by using a element with an id of mastodon-post-template, which will be used for every instance of the component on the page. Here's an example which just exposes the vanity metrics of the Mastodon post as a :
`html`
You can also use different templates on the same page by using the template attribute to target elements with a specific id:
Data is applied using a data-key data attribute. The value of this attribute should correspond to a data point within a Mastodon public status API response. The official Mastodon documentation has an example of a status response here. The data-key attribute also allows you to target nested data using typical JavaScript dot notation:
`html`
View original post from
on
Check out the custom template demo as well as the source code for reference.
Credit
With thanks to the following people:
- Zach Leatherman for inspiring this Web Component repo template