Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/splitbrain/mastodon-widget
Mastodon Web Components
https://github.com/splitbrain/mastodon-widget
mastodon webcomponents widget
Last synced: about 2 months ago
JSON representation
Mastodon Web Components
- Host: GitHub
- URL: https://github.com/splitbrain/mastodon-widget
- Owner: splitbrain
- License: mit
- Created: 2023-10-23T15:55:16.000Z (8 months ago)
- Default Branch: main
- Last Pushed: 2023-11-15T19:11:03.000Z (8 months ago)
- Last Synced: 2024-05-02T01:15:13.372Z (about 2 months ago)
- Topics: mastodon, webcomponents, widget
- Language: TypeScript
- Homepage: https://splitbrain.github.io/mastodon-widget/
- Size: 230 KB
- Stars: 4
- Watchers: 2
- Forks: 0
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Lists
- awesome-mastodon - Mastodon Widgets - JavaScript Web Components to embed a Mastodon profile, timeline, follow and share button into any website. Provides an auto-completing instance selector. (Tools)
README
# 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 `` and then use any of the available components in your HTML.
```html
Share this!
```
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](src/components/mastodon-widget/readme.md) The main widget showing a profile with a follow button and optionally timeline
- [mastodon-follow](src/components/mastodon-follow/readme.md) Make any HTML a follow button
- [mastodon-share](src/components/mastodon-share/readme.md) Make any HTML a share button
- [mastodon-timeline](src/components/mastodon-timeline/readme.md) Show the timeline of a user
- [mastodon-instancepicker](src/components/mastodon-instancepicker/readme.md) The instance picker dialog used in the components above
## Development
The widgets are web components built with the [StencilJS](https://stenciljs.com/) compiler.
Setup dependencies:
```bash
npm install
```
Start a development server:
```bash
npm run start
```
Build the components and update the readme files for production:
```bash
npm run build
```
Prettify the code:
```bash
npm run pretty
```
## NPM Package
The project is published to npm as `mastodon-widget`. See the [npm page](https://www.npmjs.com/package/mastodon-widget) for more info.
For building a new release, run:
```bash
npm version patch
git push
git push --tags
```
Replace `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.