feat: add Mastodon sharing link (#1344)

Adds a "share to Mastodon" button as a link sharing option using @justinribeiro's share-to-mastodon package

Discussion of proposed change - #1324

---------

Co-authored-by: Cotes Chung <[email protected]>

Author: some-natalie

_data/share.yml

@@ -23,3 +23,16 @@ platforms:
   # - type: Weibo
   #   icon: "fab fa-weibo"
   #   link: "http://service.weibo.com/share/share.php?title=TITLE&url=URL"
+  #
+  # - type: Mastodon
+  #   icon: "fa-brands fa-mastodon"
+  #   # See: https://github.com/justinribeiro/share-to-mastodon#properties
+  #   instances:
+  #     - 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/"

_includes/post-sharing.html

@@ -1,14 +1,39 @@
 <!-- Post sharing snippet -->
 
 <div class="share-wrapper d-flex align-items-center">
-  <span class="share-label text-muted me-1">{{ site.data.locales[include.lang].post.share }}</span>
+  <span class="share-label text-muted">{{ site.data.locales[include.lang].post.share }}</span>
   <span class="share-icons">
     {% capture title %}{{ page.title }} - {{ site.title }}{% endcapture %}
     {% assign title = title | uri_escape %}
     {% assign url = page.url | absolute_url | url_encode %}
 
-    {% for share in site.data.share.platforms %}
+    {% for share in site.data.share.platforms -%}
+      {% if share.type == 'Mastodon' %}
+        <script defer type="module" src="https://cdn.jsdelivr.net/npm/@justinribeiro/share-to-mastodon/+esm"></script>
+        <button
+          class="btn text-start"
+          data-bs-toggle="tooltip"
+          data-bs-placement="top"
+          title="{{ share.type }}"
+          aria-label="{{ share.type }}"
+        >
+          <share-to-mastodon
+            class="share-mastodon"
+            message="{{ title }}"
+            url="{{ url }}"
+            {%- if share.instances -%}
+              customInstanceList="{{ share.instances | jsonify | xml_escape }}"
+            {%- endif %}
+          >
+            <i class="{{ share.icon }}"></i>
+          </share-to-mastodon>
+        </button>
+
+        {% continue %}
+      {% endif %}
+
       {% assign link = share.link | replace: 'TITLE', title | replace: 'URL', url %}
+
       <a
         href="{{ link }}"
         data-bs-toggle="tooltip"
@@ -31,7 +56,7 @@
       title="{{ site.data.locales[include.lang].post.button.share_link.title }}"
       data-title-succeed="{{ site.data.locales[include.lang].post.button.share_link.succeed }}"
     >
-      <i class="fa-fw fas fa-link pe-none"></i>
+      <i class="fa-fw fas fa-link pe-none fs-6"></i>
     </button>
   </span>
 </div>

_sass/colors/typography-light.scss

@@ -63,7 +63,8 @@
 
   /* Posts */
   --toc-highlight: #0550ae;
-  --btn-share-hover-color: var(--link-color);
+  --btn-share-color: gray;
+  --btn-share-hover-color: #0d6efd;
   --card-bg: white;
   --card-hovor-bg: #e2e2e2;
   --card-shadow: rgb(104, 104, 104, 0.05) 0 2px 6px 0,

_sass/layout/post.scss

@@ -2,14 +2,6 @@
   Post-specific style
 */
 
-@mixin btn-sharing-color($light-color, $important: false) {
-  @if $important {
-    color: var(--btn-share-color, $light-color) !important;
-  } @else {
-    color: var(--btn-share-color, $light-color);
-  }
-}
-
 %btn-post-nav {
   width: 50%;
   position: relative;
@@ -72,11 +64,23 @@ h1 + .post-meta {
     -ms-user-select: none;
     user-select: none;
 
+    %icon-size {
+      font-size: 1.125rem;
+    }
+
     .share-icons {
-      font-size: 1.2rem;
+      display: flex;
+
+      i {
+        color: var(--btn-share-color);
+
+        @extend %icon-size;
+      }
 
       > * {
-        margin-left: 0.25rem;
+        @extend %icon-size;
+
+        margin-left: 0.5rem;
 
         &:hover {
           i {
@@ -87,43 +91,28 @@ h1 + .post-meta {
 
       button {
         position: relative;
-        bottom: 2px;
+        bottom: 1px;
         padding: 0;
 
         @extend %cursor-pointer;
       }
-
-      a :hover {
-        text-decoration: none;
-      }
-
-      .fa-square-x-twitter {
-        @include btn-sharing-color(black);
-      }
-
-      .fa-facebook-square {
-        @include btn-sharing-color(rgb(66, 95, 156));
-      }
-
-      .fa-telegram {
-        @include btn-sharing-color(rgb(39, 159, 217));
-      }
-
-      .fa-linkedin {
-        @include btn-sharing-color(rgb(0, 119, 181));
-      }
-
-      .fa-weibo {
-        @include btn-sharing-color(rgb(229, 20, 43));
-      }
     } /* .share-icons */
-
-    .fas.fa-link {
-      @include btn-sharing-color(rgb(171, 171, 171));
-    }
   } /* .share-wrapper */
 }
 
+.share-mastodon {
+  /* See: https://github.com/justinribeiro/share-to-mastodon#properties */
+  --wc-stm-font-family: $font-family-base;
+  --wc-stm-dialog-background-color: var(--card-bg);
+  --wc-stm-form-button-border: 1px solid var(--btn-border-color);
+  --wc-stm-form-submit-background-color: var(--sidebar-btn-bg);
+  --wc-stm-form-cancel-background-color: var(--sidebar-btn-bg);
+  --wc-stm-form-button-background-color-hover: #007bff;
+  --wc-stm-form-button-color-hover: white;
+
+  font-size: 1rem;
+}
+
 .post-tags {
   line-height: 2rem;