Mastodon Widgets
This is a collection of Mastodon widgets for use on websites to add share and follow buttons and to display a user's profile and timeline.
🌟 If you like it, please star the repo and share it on Mastodon.
Usage
Here's the basic usage: Add the script tag to your <head> and then use any of the available components in your HTML.
<html lang="en">
<head>
<script type="module" src="https://unpkg.com/mastodon-widget"></script>
</head>
<body>
<mastodon-widget account="splitbrain@octodon.social" limit="5"></mastodon-widget>
<mastodon-share text="What a cool idea!"><button>Share this!</button></mastodon-share>
</body>
</html>The script will lazy load only the components you actually use.
Components
You can see a demo of the available components at https://splitbrain.github.io/mastodon-widget/ and read more about them in their respective readme files:
- mastodon-widget The main widget showing a profile with a follow button and optionally timeline
- mastodon-follow Make any HTML a follow button
- mastodon-share Make any HTML a share button
- mastodon-timeline Show the timeline of a user
- mastodon-instancepicker The instance picker dialog used in the components above
Development
The widgets are web components built with the StencilJS compiler.
Setup dependencies:
npm installStart a development server:
npm run startBuild the components and update the readme files for production:
npm run buildPrettify the code:
npm run prettyNPM Package
The project is published to npm as mastodon-widget. See the npm page for more info.
For building a new release, run:
npm version patch
git push
git push --tagsReplace patch with minor or major as needed. This will update the pakage version, create a git tag and push it to the repo. There a github action will build the package and publish it to npm.
Help
Please help with the open issues.
This is my first project using stenciljs and typescript, so I'm sure there is a lot of room for improvement. Pull requests are welcome.