Add Fediverse button (#108)

Author: kytta

CHANGELOG.md

@@ -4,6 +4,13 @@ All notable changes to this project will be documented in this file.
 
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [Unreleased]
+
+### Added
+
+- [#108](https://github.com/kytta/shareon/pull/108)
+  Fediverse button (via [Share₂Fedi](https://github.com/kytta/share2fedi))
+
 ## [2.4.0] - 2023-12-07
 
 ### Added

README.md

@@ -94,6 +94,7 @@ names of which match the names of the social networks (or `copy-url`, for the
 ```html
 <div class="shareon">
   <a class="facebook"></a>
+  <a class="fediverse"></a>
   <a class="linkedin"></a>
   <a class="mastodon"></a>
   <!-- FB App ID is required for the Messenger button to function -->
@@ -140,6 +141,8 @@ Apart from the URL and title, some networks support extra parameters:
 
 - you **MUST** add `data-fb-app-id` to the FB Messenger button to make sharing
   even possible
+- add `data-s2f-instance` to the Fediverse button to set your Share₂Fedi
+  instance
 - add `data-media` to an Odnoklassniki, Pinterest, or VK button to customize
   the pinned picture
 - add `data-text` to a Mastodon, Telegram, Tumblr, Viber, or WhatsApp button to add
@@ -155,6 +158,7 @@ Here are all custom parameters:
 ```html
 <div class="shareon" data-url="https://custom.url/for-this-page">
   <a class="facebook" data-title="Custom Facebook title" data-hashtags="awesome"></a>
+  <a class="fediverse" data-s2f-instance="s2f.mydomain.example"></a>
   <a class="messenger" data-fb-app-id="0123456789012345"></a>
   <a class="pinterest" data-media="https://custom.picture/for-pinterest">Pin</a>
   <a class="telegram" data-text="Check this out!"></a>

index.html

@@ -30,6 +30,7 @@ <h1>Shareon Demo Page</h1>
         <h2><code>&lt;a&gt;</code></h2>
         <div class="shareon">
           <a class="facebook"></a>
+          <a class="fediverse"></a>
           <a class="linkedin"></a>
           <a class="mastodon"></a>
           <a class="messenger" data-fb-app-id="3619024578167617"></a>
@@ -54,6 +55,7 @@ <h2><code>&lt;a&gt;</code></h2>
         <h2><code>&lt;button&gt;</code></h2>
         <div class="shareon">
           <button class="facebook"></button>
+          <button class="fediverse"></button>
           <button class="linkedin"></button>
           <button class="mastodon"></button>
           <button class="messenger" data-fb-app-id="3619024578167617"></button>
@@ -83,6 +85,7 @@ <h2><code>&lt;a&gt;</code> with custom params</h2>
           data-text="hey check this out"
         >
           <a class="facebook"></a>
+          <a class="fediverse" data-s2f-instance="share2fedi.vercel.app"></a>
           <a class="linkedin"></a>
           <a class="mastodon" data-via="@[email protected]"></a>
           <a class="messenger" data-fb-app-id="3619024578167617"></a>
@@ -106,6 +109,7 @@ <h2><code>&lt;a&gt;</code> with custom params</h2>
         <h2>Specimen</h2>
         <div class="shareon specimen">
           <a class="facebook"></a>
+          <a class="fediverse"></a>
           <a class="linkedin"></a>
           <a class="mastodon">Toot</a>
           <a class="messenger" data-fb-app-id="3619024578167617"></a>

package.json

@@ -110,12 +110,12 @@
   },
   "size-limit": [
     {
-      "limit": "6 KB",
+      "limit": "6 KiB",
       "path": "./dist/shareon.min.css",
       "brotli": true
     },
     {
-      "limit": "1 KB",
+      "limit": "1 KiB",
       "path": "./dist/shareon.es.js",
       "brotli": true
     }

src/icons/fediverse.svg

@@ -92,6 +92,13 @@
   background-image: url("icons/facebook.svg");
 }
 
+.shareon > .fediverse {
+  background-color: #8a54af;
+}
+.shareon > .fediverse:before {
+  background-image: url("icons/fediverse.svg");
+}
+
 .shareon > .linkedin {
   background-color: #0a66c2;
 }

src/shareon.css

@@ -13,11 +13,13 @@ import "./shareon.css";
  *   media?: string,
  *   text?: string,
  *   via?: string,
- *   fbAppId?: string
+ *   fbAppId?: string,
+ *   s2fInstance?: string,
  * }) => string}}
  */
 const urlBuilderMap = {
   facebook: (d) => `https://www.facebook.com/sharer/sharer.php?u=${d.url}${d.hashtags ? `&hashtag=%23${d.hashtags.split('%2C')[0]}` : ''}`,
+  fediverse: (d) => `https://${d.s2fInstance}/?text=${d.title}%0D%0A${d.url}${d.text ? `%0D%0A%0D%0A${d.text}` : ''}${d.via ? `%0D%0A%0D%0A${d.via}` : ''}`,
   email: (d) => `mailto:?subject=${d.title}&body=${d.url}`,
   linkedin: (d) => `https://www.linkedin.com/sharing/share-offsite/?url=${d.url}`,
   mastodon: (d) => `https://toot.kytta.dev/?text=${d.title}%0D%0A${d.url}${d.text ? `%0D%0A%0D%0A${d.text}` : ''}${d.via ? `%0D%0A%0D%0A${d.via}` : ''}`,
@@ -126,6 +128,11 @@ const init = () => {
               fbAppId: encodeURIComponent(
                 child.dataset.fbAppId || container.dataset.fbAppId || "",
               ),
+              s2fInstance: encodeURIComponent(
+                child.dataset.s2fInstance ||
+                  container.dataset.s2fInstance ||
+                  "s2f.kytta.dev",
+              ),
             };
             const url = urlBuilderMap[cls](preset);