From 9d21baf43bc261953758c555be0a86738fcf38c9 Mon Sep 17 00:00:00 2001
From: Nikita Karamov <me@kytta.dev>
Date: Sun, 4 Feb 2024 15:23:05 +0100
Subject: [PATCH] Add Fediverse button

Closes #107
---
 CHANGELOG.md            | 6 ++++++
 README.md               | 1 +
 index.html              | 4 ++++
 src/icons/fediverse.svg | 1 +
 src/shareon.css         | 7 +++++++
 src/shareon.js          | 1 +
 6 files changed, 20 insertions(+)
 create mode 100644 src/icons/fediverse.svg

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 97b58c0..e7d8bd4 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,6 +4,12 @@ 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
+
+- Fediverse button (via [Share₂Fedi](https://github.com/kytta/share2fedi))
+
 ## [2.4.0] - 2023-12-07
 
 ### Added
diff --git a/README.md b/README.md
index 82a8a98..9f7a49e 100644
--- a/README.md
+++ b/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 -->
diff --git a/index.html b/index.html
index 45935fd..c942681 100644
--- a/index.html
+++ b/index.html
@@ -30,6 +30,7 @@
         <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;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 @@
           data-text="hey check this out"
         >
           <a class="facebook"></a>
+          <a class="fediverse"></a>
           <a class="linkedin"></a>
           <a class="mastodon" data-via="@NickKaramoff@fosstodon.org"></a>
           <a class="messenger" data-fb-app-id="3619024578167617"></a>
@@ -106,6 +109,7 @@
         <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>
diff --git a/src/icons/fediverse.svg b/src/icons/fediverse.svg
new file mode 100644
index 0000000..92aba54
--- /dev/null
+++ b/src/icons/fediverse.svg
@@ -0,0 +1 @@
+<svg fill="#fff" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M5.239 8.64a2.43 2.43 0 0 1-1.041 1.036l5.714 5.736 1.377-.698zm7.537 7.566-1.378.698 2.895 2.907a2.43 2.43 0 0 1 1.041-1.037zm6.61-5.297-3.234 1.64.238 1.526 3.66-1.856a2.43 2.43 0 0 1-.663-1.31m-5.113 2.592-7.649 3.876a2.43 2.43 0 0 1 .664 1.31l7.223-3.66zm-2.46-9.549-3.69 7.205 1.089 1.094 3.908-7.628a2.43 2.43 0 0 1-1.307-.67m-4.65 9.078-1.87 3.65a2.44 2.44 0 0 1 1.307.67l1.652-3.226zm-2.998-3.34a2.44 2.44 0 0 1-1.216.255 3 3 0 0 1-.235-.025l1.092 6.983a2.44 2.44 0 0 1 1.216-.255q.118.007.234.025zm3.129 9.03a2.4 2.4 0 0 1 .025.49 2.4 2.4 0 0 1-.256.96l6.98 1.121a2.4 2.4 0 0 1-.025-.49 2.4 2.4 0 0 1 .257-.96zm12.78-6.476-3.222 6.29a2.43 2.43 0 0 1 1.307.671l3.222-6.29a2.43 2.43 0 0 1-1.307-.671M15.68 3.348a2.44 2.44 0 0 1-1.04 1.036l4.99 5.01a2.43 2.43 0 0 1 1.04-1.037zm-4.554-.731L4.818 5.813a2.43 2.43 0 0 1 .663 1.31l6.309-3.197a2.43 2.43 0 0 1-.664-1.31m3.502 1.774a2.44 2.44 0 0 1-1.236.264 3 3 0 0 1-.213-.022l.559 3.578 1.524.244zm-.565 5.9 1.32 8.46a2.43 2.43 0 0 1 1.199-.246q.128.007.254.028l-1.249-7.998zM5.486 7.15a2.4 2.4 0 0 1 .027.498 2.4 2.4 0 0 1-.253.953l3.58.575.704-1.374zm6.137.986L10.92 9.51l8.46 1.36a2.4 2.4 0 0 1-.024-.485 2.4 2.4 0 0 1 .26-.966zM13.645.015a2.212 2.212 0 1 0-.24 4.418 2.212 2.212 0 1 0 .24-4.418m8.261 8.293a2.212 2.212 0 1 0-.24 4.418 2.212 2.212 0 1 0 .24-4.418M16.57 18.725a2.212 2.212 0 1 0-.24 4.419 2.212 2.212 0 1 0 .24-4.419M5.01 16.871a2.212 2.212 0 1 0-.24 4.418 2.212 2.212 0 1 0 .24-4.418M3.204 5.307a2.212 2.212 0 1 0-.24 4.418 2.212 2.212 0 1 0 .24-4.418"/></svg>
\ No newline at end of file
diff --git a/src/shareon.css b/src/shareon.css
index 1964807..b099aad 100644
--- a/src/shareon.css
+++ b/src/shareon.css
@@ -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;
 }
diff --git a/src/shareon.js b/src/shareon.js
index 63d75c5..b4a8f66 100644
--- a/src/shareon.js
+++ b/src/shareon.js
@@ -18,6 +18,7 @@ import "./shareon.css";
  */
 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}` : ''}`,
   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}` : ''}`,