https://github.com/codesyntax/mastodon-share-button
This package is a user friendly web component to share in mastodon.
https://github.com/codesyntax/mastodon-share-button
Last synced: 20 days ago
JSON representation
This package is a user friendly web component to share in mastodon.
- Host: GitHub
- URL: https://github.com/codesyntax/mastodon-share-button
- Owner: codesyntax
- License: gpl-3.0
- Created: 2020-03-03T21:11:51.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-10-30T13:51:33.000Z (about 2 years ago)
- Last Synced: 2024-10-30T00:42:09.525Z (about 1 year ago)
- Language: TypeScript
- Homepage:
- Size: 547 KB
- Stars: 6
- Watchers: 3
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
- License: LICENSE
Awesome Lists containing this project
- awesome-stenciljs - Mastodon Share Button - in button. (Ecosystem Highlights / Utilities & Integrations)
README
# Mastodon share button
This package is a user friendly web component to share in mastodon.
## Browsers support
| [
](http://godban.github.io/browsers-support-badges/)IE / Edge | [
](http://godban.github.io/browsers-support-badges/)Firefox | [
](http://godban.github.io/browsers-support-badges/)Chrome | [
](http://godban.github.io/browsers-support-badges/)Safari | [
](http://godban.github.io/browsers-support-badges/)iOS Safari | [
](http://godban.github.io/browsers-support-badges/)Samsung |
| --------- | --------- | --------- | --------- | --------- | --------- |
| IE11 *([limited](docs/ie.md))*, Edge| last 2 versions| last 2 versions| last 2 versions| last 2 versions| last 2 versions
# [View demos 👁](https://codepen.io/bipoza/pen/XWbegOM?editors=1100)
# Preview
# Getting Started
## Installation
### Via CDN
```html
```
### Via NPM
```bash
$ npm install mastodon-share-button
```
### Usage
```html
```
# Documentation
## Properties
| Property | Attribute | Required | Description | Type | Default |
| --------------------- | --------------------- | ------------ | -------------------------------------------------- | -------- | -------------------------------- |
| `share_message` | `share_message` | Required | Text to share in mastodon. |`string` | `undefined` |
| `instances` | `instances` | Not Required | List of instances to display in the select option. |`string` | `'["https://mastodon.social"]'` |
| `dark_mode` | `dark_mode` | Not Required | Option to activate dark mode. |`boolean` | `false` |
| `send_button_text` | `send_button_text` | Not Required | Text to show at the bottom of sharing in the modal.|`string` | `"Send"` |
| `icon_url` | `icon_url` | Not Required | Icon url. Put it "" to not display any icon. |`string` | `mastodon oficial logo` |
| `modal_title` | `modal_title` | Not Required | Title to display in modal. |`string` | `"Share to Mastodon"` |
| `close_button_text` | `close_button_text` | Not Required | Text to display to close modal. |`string` | `"Close"` |
| `other_instance_text` | `other_instance_text` | Not Required | Text to display on the form. |`string` | `"Other instance"` |
| `share_button_text` | `share_button_text` | Not Required | Text to show at the bottom of sharing. Put it "" to not display any text. |`string` | `"Share to Mastodon"` |
| `open` | `open` | Not Required | Variable to display the modal opened. |`boolean` | `false` |
## CSS Custom Properties (Styling)
The component could be styled with the help of CSS3 variables.
Example:
```html
mastodon-share-button {
--share-button-background-color:#259FFC;
--share-button-background-color-hover:#C7E7FE;
}
```
* **Important**: If you are using the dark mode, you cannot apply any color variable, because this mode will overlap your css.
### Share button
| Name | Description
| ------------------------------- | --------------------------------------------------------------------|
| --share-button-background-color | Share button background color. Default to `#cccccc` |
| --share-button-background-color-hover | Share button background hover color. Default to `#949292` |
| --share-button-border-radius | Default to `5px` |
| --share-button-padding | Default to `12px` |
| --share-button-color | Default to `#ffffff` |
| --share-button-font-size | Default to `16px` |
| --share-button-font-weight | Default to `bold` |
| --share-button-border | Defaul to `none` |
### Modal
| Name | Description
| -------------------------- | -----------------------------------------------------|
| --modal-title-color | Text color to modal title. Default to `#2c3e50` |
| --modal-background-color | Modal background color. Default to `#ffffff` |
### Modal close button
| Name | Description
| ------------------------------- | --------------------------------------------------------------------|
| --close-modal-button-background-color | Close button background color. Default to `#cccccc` |
| --close-modal-button-background-color-hover | Share button background hover color. Default to `#949292` |
| --close-modal-button-border-radius | Default to `5px` |
| --close-modal-button-padding | Default to `6px` |
| --close-modal-button-color | Default to `#ffffff` |
| --close-modal-button-font-size | Default to `16px` |
| --close-modal-button-font-weight | Default to `bold` |
| --close-modal-button-border | Defaul to `none` |
### Modal select option and input
| Name | Description
| -------------------------- | ----------------------------------------------------- |
| --select-color | Select and input font color. Default to `#2c3e50` |
| --select-background-color | Select and input background color. Default to `#ffffff` |
| --select-border | Select and input border. Default to `2px solid #2c3e50` |
| --select-font-weight | Select and input font weight. Default to `bolder` |
| --select-font-size | Font size. Default to `18px` |
| --select-padding | Default to `10px` |
| --select-border-radius | Default to `0.25em` |
| --select-line-height | Default to `3` |
### Modal send button
| Name | Description
| ------------------------------------ | ------------------------------- |
| --send-modal-button-color | Default to `#ffffff` |
| --send-modal-button-background-color | Default to `#2692da` |
| --send-modal-button-border-radius | Default to `5px` |
| --send-modal-button-width | Default to `100%` |
| --send-modal-button-height | Default to `6vh` |
| --send-modal-button-min-height | Default to `42px` |
| --send-modal-button-font-size | Default to `4vh` |