Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/justinribeiro/share-to-mastodon
A small web component that uses a <dialog> to allow setting of a target Mastodon instance from the user to allow easier sharing.
https://github.com/justinribeiro/share-to-mastodon
mastodon web-component
Last synced: 2 months ago
JSON representation
A small web component that uses a <dialog> to allow setting of a target Mastodon instance from the user to allow easier sharing.
- Host: GitHub
- URL: https://github.com/justinribeiro/share-to-mastodon
- Owner: justinribeiro
- License: mit
- Created: 2020-07-23T00:38:40.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2023-10-12T16:43:06.000Z (about 1 year ago)
- Last Synced: 2024-05-23T03:30:50.166Z (7 months ago)
- Topics: mastodon, web-component
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/@justinribeiro/share-to-mastodon
- Size: 969 KB
- Stars: 9
- Watchers: 1
- Forks: 2
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://badge.fury.io/js/@justinribeiro%2Fshare-to-mastodon) [](https://bundlephobia.com/result?p=@justinribeiro/[email protected])
   
# \
> a small lit-based web component that uses `` to allow setting of a target Mastodon instance from a user to allow sharing from your website.
## Features
1. Allows user to define their instance or select from a datalist that is present or custom set (the power of `input type=url list` and `datalist`! yeah web platform)
2. Will remember the selected instance if selected by the user _per the installed domain_ (no cross-domain sharing)
3. No User Tracking: it's all local, let's keep it real people
4. Lots of custom css props, every string can be overridden
5. _New in v2.0.0_: Bare metal speed, now with ``!
## Install
This web component is built with ES modules in mind and is available on NPM:
Install share-to-mastodon:
```sh
npm i @justinribeiro/share-to-mastodon
# or
yarn add @justinribeiro/share-to-mastodon
```
After install, import into your project:
```js
import '@justinribeiro/share-to-mastodon';
```
## Install with CDN
Via JS Deliver ESM Run:
```html
import @justinribeiro/share-to-mastodon from 'https://cdn.jsdelivr.net/npm/@justinribeiro/share-to-mastodon/+esm';
```
Example running in JSFiddle: https://jsfiddle.net/justinribeiro/9voe7dfp/1/
## A Basic Example
By default, the component renders whatever you feed the ``, wrapped internally as a ``:
```
Share to Mastodon
```
## A More Advanced Style Example
If you're looking for something more button-like, congrats, the slot let's you make the magic happen:
```
.myMagicalCss > div {
display: inline-flex;
justify-content: center;
align-items: center;
padding: 0.5rem;
background: lightblue;
border-radius: 5px;
border: 1px solid #ccc;
}
.myMagicalCss > div:hover {
background: #eee;
}
.myMagicalCss svg {
width: 24px;
margin-right: 0.5rem;
}
Share This Site
```
## Properties
| Property | Attribute | Type | Default | Description |
|----------------------|----------------------|----------|--------------------------------------------------|--------------------------------------------------|
| `customInstanceList` | `customInstanceList` | `array` | [{"label":"Mastodon.Social","link":"https://mastodon.social/"},{"label":"Mastodon.Online","link":"https://mastodon.online/"},{"label":"fosstodon.org","link":"https://fosstodon.org/"},{"label":"photog.social","link":"https://photog.social/"}] | An array of Mastodon instances you would like auto-populated within the url datalist |
| `message` | `message` | `string` | "Check out the amazing content I just discovered!" | The message you'd like to share within the target Mastodon input that opens on the share page. |
| `modalTitle` | `modalTitle` | `string` | "Share To Mastodon" | The string that is displayed as the dialog title |
| `modalMessage` | `modalMessage` | `string` | "Select or set which instance you'd like to share to." | The string that is displayed above the input field on the dialog |
| `modalSaveAsDefault` | `modalSaveAsDefault` | `string` | "Remember My Instance (locally only)" | The string that is used as the label for the checkbox default save option |
| `modalShareButton` | `modalShareButton` | `string` | "Share" | The string that is displayed on the action button to submit the form in the dialog |
| `modalCancelButton` | `modalCancelButton` | `string` | "Cancel" | The string that is displayed on the cancel button to close the dialog |
| `targetInstance` | `targetInstance` | `string` | "" | The target Mastodon instance, usually set by the user within the dialog that display on first share |
| `url` | `url` | `string` | "href" | The url of the thing you are sharing within the target Mastodon input that opens on the share page. |
## Slots
| Name | Description |
|-----------|-----------------------------------------------|
| `default` | The text or what ever you want the link to be |
## CSS Custom Properties
| Property | Default | Description |
|-----------------------------------------------|------------------|--------------------------------------------------|
| `--wc-stm-color` | "black" | the host text color, default #000 |
| `--wc-stm-dialog-border-color` | "transparent" | the dialog border color |
| `--wc-stm-dialog-background-color` | "white" | the dialog background color |
| `--wc-stm-dialog-border-radius` | "0.5rem" | this dialogs border radius |
| `--wc-stm-dialog-padding` | "1rem" | the dialogs inner padding |
| `--wc-stm-font-family` | "sans-serif" | the host font family, default sans-serif |
| `--wc-stm-form-button-background-color` | "#eee" | |
| `--wc-stm-form-button-background-color-hover` | "#ccc" | |
| `--wc-stm-form-button-border` | | |
| `--wc-stm-form-button-border-radius` | "0.25rem" | |
| `--wc-stm-form-button-color` | "inherit" | |
| `--wc-stm-form-button-color-hover` | "inherit" | |
| `--wc-stm-form-button-font-size` | "1em" | |
| `--wc-stm-form-button-padding` | "0.5rem 0" | |
| `--wc-stm-form-input-border` | "1px solid #ccc" | |
| `--wc-stm-form-input-border-radius` | "0.25rem" | |
| `--wc-stm-form-input-font-size` | "1em" | |
| `--wc-stm-form-input-padding` | "0.5rem" | |
| `--wc-stm-link-color-active` | "red" | the link text color active |
| `--wc-stm-link-color-initial` | "blue" | the link text color if no slot structures overwrite |
| `--wc-stm-link-color-visited` | "purple" | the link text color visited |
| `--wc-stm-link-text-decoration` | "underline" | the link text decoration if no slot structures overwrite |
| `--wc-stm-form-submit-background-color` | "#8686fd" | |
| `--wc-stm-form-cancel-background-color` | "#eeeeee" | |
| `--wc-stm-form-submit-color` | "inherit" | |
| `--wc-stm-form-cancel-color` | "inherit" | |