Share to Mastodon button

[some-natalie]

I wanted to add a button to share a post to Mastodon, but it wasn't one of the supported platforms. This makes sense, as you'd then have to ask the user which server to share to.

❓ Question to maintainers - is this worth me cleaning up a little to use the sharing YAML file, etc., then following up with a PR? The rest of this post is what I did and some screenshots.

I added @justinribeiro's share-to-mastodon button to my own site by adding the snippet below in ~/_includes/post-sharing.html (full file)

      <button
        id="share-to-mastodon"
        aria-label="Mastodon"
        class="btn small"
        data-bs-toggle="tooltip"
        data-bs-placement="top"
        title="Mastodon"
      >
        <script type="module" src="https://cdn.jsdelivr.net/npm/@justinribeiro/share-to-mastodon/+esm"></script>
        <share-to-mastodon
          message="{{ page.title }}"
          url="{{ page.url | absolute_url }}"
          style="
            --wc-stm-color: var(--text-color);
            --wc-stm-link-color-initial: var(--btn-share-color);
            --wc-stm-dialog-background-color: var(--sidebar-bg);
            --wc-stm-dialog-border-color: var(--sidebar-border-color);
            --wc-stm-font-family: 'Source Sans Pro','Microsoft Yahei',sans-serif;
            --wc-stm-font-color: var(--text-color);
            --wc-stm-link-text-decoration: none;
            --wc-stm-form-button-background-color: var(--main-bg);
            --wc-stm-form-button-background-color-hover: var(--sidebar-hover-bg);
            --wc-stm-form-input-border: var(--sidebar-border-color);
            --wc-stm-link-color-active: var(--btn-share-color);
            --wc-stm-link-color-initial: var(--btn-share-color);
            --wc-stm-link-color-visited: var(--btn-share-color);
            --wc-stm-form-submit-background-color: var(--sidebar-btn-bg);
            --wc-stm-form-cancel-background-color: var(--sidebar-btn-bg);
            --wc-stm-form-submit-color: var(--sidebar-btn-color);
            --wc-stm-form-cancel-color: var(--sidebar-btn-color);"
          customInstanceList='[
            {"label":"infosec.exchange","link":"https://infosec.exchange/"},
            {"label":"hachyderm.io","link":"https://hachyderm.io"},
            {"label":"fosstodon.org","link":"https://fosstodon.org/"},
            {"label":"mastodon.social","link":"https://mastodon.social/"},
            {"label":"mastodon.online","link":"https://mastodon.online/"}]'
        >
          <i class="fa-brands fa-mastodon"></i>
        </share-to-mastodon>
      </button>

And here it is in action! (link to a sample post)

[cotes2020]

... Question to maintainers - is this worth me cleaning up a little to use the sharing YAML file, etc., then following up with a PR? ...

Sure, this should be a feature that Mastodon fans are looking forward to.

[some-natalie]

Here you go! ❤️

#1344