Add s2f-instance parameter

Closes #79

CHANGELOG.md

@@ -9,6 +9,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 ### Added
 
 - Fediverse button (via [Share₂Fedi](https://github.com/kytta/share2fedi))
+- Custom Share₂Fedi instance for the Fediverse button
 
 ## [2.4.0] - 2023-12-07
 

README.md

@@ -141,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
@@ -156,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

@@ -85,7 +85,7 @@
           data-text="hey check this out"
         >
           <a class="facebook"></a>
-          <a class="fediverse"></a>
+          <a class="fediverse" data-s2f-instance="share2fedi.vercel.app"></a>
           <a class="linkedin"></a>
           <a class="mastodon" data-via="@NickKaramoff@fosstodon.org"></a>
           <a class="messenger" data-fb-app-id="3619024578167617"></a>

src/shareon.js

@@ -13,12 +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://s2f.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}` : ''}`,
+  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}` : ''}`,
@@ -127,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);