<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>:

<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:

<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" | |