@justinribeiro/share-to-mastodon

2.0.2 • Public • Published

npm version min+gzip

Statements Branches Functions Lines

<share-to-mastodon>

a small lit-based web component that uses <dialog> 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 <dialog>!

Install

This web component is built with ES modules in mind and is available on NPM:

Install share-to-mastodon:

npm i @justinribeiro/share-to-mastodon
# or
yarn add @justinribeiro/share-to-mastodon

After install, import into your project:

import '@justinribeiro/share-to-mastodon';

Install with CDN

Via JS Deliver ESM Run:

<script type="module">
  import @justinribeiro/share-to-mastodon from 'https://cdn.jsdelivr.net/npm/@justinribeiro/share-to-mastodon/+esm';
</script>

Example running in JSFiddle: https://jsfiddle.net/justinribeiro/9voe7dfp/1/

A Basic Example

By default, the component renders whatever you feed the <slot>, wrapped internally as a <a>:

image

<share-to-mastodon message="My website is amazing, come check it out!" url="https://justinribeiro.com">
  Share to Mastodon
</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:

image

<style>
  .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;
  }
</style>
<share-to-mastodon class="myMagicalCss">
  <div>
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 216.4 232">
      <path
        fill="#2b90d9"
        d="M212 139c-3 16-29 34-58 38-15 2-30 3-46 3-26-2-46-7-46-7v8c4 25 26 27 47 28 21 0 39-6 39-6l1 19s-14 8-41 10c-14 1-32-1-53-6C9 214 1 165 0 116V76c0-50 33-65 33-65C50 3 78 0 108 0h1c29 0 58 3 74 11 0 0 33 15 33 65 0 0 1 37-4 63"
      />
      <path
        fill="#fff"
        d="M178 80v61h-25V82c0-13-5-19-15-19-12 0-18 8-18 22v33H96V85c0-14-6-22-17-22s-16 6-16 19v59H39V80c0-12 3-22 9-30 7-7 16-11 26-11 13 0 22 5 28 15l6 10 6-10c6-10 16-15 28-15 11 0 19 4 26 11 6 8 10 18 10 30"
      />
    </svg>
    <div>Share This Site</div>
  </div>
</share-to-mastodon>

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"

Readme

Keywords

none

Package Sidebar

Install

npm i @justinribeiro/share-to-mastodon

Weekly Downloads

6

Version

2.0.2

License

MIT

Unpacked Size

32.3 kB

Total Files

5

Last publish

Collaborators

  • justinribeiro