Add Fediverse button (#108)
This commit is contained in:
Nikita Karamov
GitHub
commit
f41dd8636f
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -30,6 +30,7 @@
|
|||
<h2><code><a></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><button></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" 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>
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
After Width: | Height: | Size: 1.6 KiB |
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue