Add Fediverse button (#108)
This commit is contained in:
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).
|
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
|
## [2.4.0] - 2023-12-07
|
||||||
|
|
||||||
### Added
|
### Added
|
||||||
|
|
|
@ -94,6 +94,7 @@ names of which match the names of the social networks (or `copy-url`, for the
|
||||||
```html
|
```html
|
||||||
<div class="shareon">
|
<div class="shareon">
|
||||||
<a class="facebook"></a>
|
<a class="facebook"></a>
|
||||||
|
<a class="fediverse"></a>
|
||||||
<a class="linkedin"></a>
|
<a class="linkedin"></a>
|
||||||
<a class="mastodon"></a>
|
<a class="mastodon"></a>
|
||||||
<!-- FB App ID is required for the Messenger button to function -->
|
<!-- 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
|
- you **MUST** add `data-fb-app-id` to the FB Messenger button to make sharing
|
||||||
even possible
|
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
|
- add `data-media` to an Odnoklassniki, Pinterest, or VK button to customize
|
||||||
the pinned picture
|
the pinned picture
|
||||||
- add `data-text` to a Mastodon, Telegram, Tumblr, Viber, or WhatsApp button to add
|
- add `data-text` to a Mastodon, Telegram, Tumblr, Viber, or WhatsApp button to add
|
||||||
|
@ -155,6 +158,7 @@ Here are all custom parameters:
|
||||||
```html
|
```html
|
||||||
<div class="shareon" data-url="https://custom.url/for-this-page">
|
<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="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="messenger" data-fb-app-id="0123456789012345"></a>
|
||||||
<a class="pinterest" data-media="https://custom.picture/for-pinterest">Pin</a>
|
<a class="pinterest" data-media="https://custom.picture/for-pinterest">Pin</a>
|
||||||
<a class="telegram" data-text="Check this out!"></a>
|
<a class="telegram" data-text="Check this out!"></a>
|
||||||
|
|
|
@ -30,6 +30,7 @@
|
||||||
<h2><code><a></code></h2>
|
<h2><code><a></code></h2>
|
||||||
<div class="shareon">
|
<div class="shareon">
|
||||||
<a class="facebook"></a>
|
<a class="facebook"></a>
|
||||||
|
<a class="fediverse"></a>
|
||||||
<a class="linkedin"></a>
|
<a class="linkedin"></a>
|
||||||
<a class="mastodon"></a>
|
<a class="mastodon"></a>
|
||||||
<a class="messenger" data-fb-app-id="3619024578167617"></a>
|
<a class="messenger" data-fb-app-id="3619024578167617"></a>
|
||||||
|
@ -54,6 +55,7 @@
|
||||||
<h2><code><button></code></h2>
|
<h2><code><button></code></h2>
|
||||||
<div class="shareon">
|
<div class="shareon">
|
||||||
<button class="facebook"></button>
|
<button class="facebook"></button>
|
||||||
|
<button class="fediverse"></button>
|
||||||
<button class="linkedin"></button>
|
<button class="linkedin"></button>
|
||||||
<button class="mastodon"></button>
|
<button class="mastodon"></button>
|
||||||
<button class="messenger" data-fb-app-id="3619024578167617"></button>
|
<button class="messenger" data-fb-app-id="3619024578167617"></button>
|
||||||
|
@ -83,6 +85,7 @@
|
||||||
data-text="hey check this out"
|
data-text="hey check this out"
|
||||||
>
|
>
|
||||||
<a class="facebook"></a>
|
<a class="facebook"></a>
|
||||||
|
<a class="fediverse" data-s2f-instance="share2fedi.vercel.app"></a>
|
||||||
<a class="linkedin"></a>
|
<a class="linkedin"></a>
|
||||||
<a class="mastodon" data-via="@NickKaramoff@fosstodon.org"></a>
|
<a class="mastodon" data-via="@NickKaramoff@fosstodon.org"></a>
|
||||||
<a class="messenger" data-fb-app-id="3619024578167617"></a>
|
<a class="messenger" data-fb-app-id="3619024578167617"></a>
|
||||||
|
@ -106,6 +109,7 @@
|
||||||
<h2>Specimen</h2>
|
<h2>Specimen</h2>
|
||||||
<div class="shareon specimen">
|
<div class="shareon specimen">
|
||||||
<a class="facebook"></a>
|
<a class="facebook"></a>
|
||||||
|
<a class="fediverse"></a>
|
||||||
<a class="linkedin"></a>
|
<a class="linkedin"></a>
|
||||||
<a class="mastodon">Toot</a>
|
<a class="mastodon">Toot</a>
|
||||||
<a class="messenger" data-fb-app-id="3619024578167617"></a>
|
<a class="messenger" data-fb-app-id="3619024578167617"></a>
|
||||||
|
|
|
@ -110,12 +110,12 @@
|
||||||
},
|
},
|
||||||
"size-limit": [
|
"size-limit": [
|
||||||
{
|
{
|
||||||
"limit": "6 KB",
|
"limit": "6 KiB",
|
||||||
"path": "./dist/shareon.min.css",
|
"path": "./dist/shareon.min.css",
|
||||||
"brotli": true
|
"brotli": true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"limit": "1 KB",
|
"limit": "1 KiB",
|
||||||
"path": "./dist/shareon.es.js",
|
"path": "./dist/shareon.es.js",
|
||||||
"brotli": true
|
"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");
|
background-image: url("icons/facebook.svg");
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.shareon > .fediverse {
|
||||||
|
background-color: #8a54af;
|
||||||
|
}
|
||||||
|
.shareon > .fediverse:before {
|
||||||
|
background-image: url("icons/fediverse.svg");
|
||||||
|
}
|
||||||
|
|
||||||
.shareon > .linkedin {
|
.shareon > .linkedin {
|
||||||
background-color: #0a66c2;
|
background-color: #0a66c2;
|
||||||
}
|
}
|
||||||
|
|
|
@ -13,11 +13,13 @@ import "./shareon.css";
|
||||||
* media?: string,
|
* media?: string,
|
||||||
* text?: string,
|
* text?: string,
|
||||||
* via?: string,
|
* via?: string,
|
||||||
* fbAppId?: string
|
* fbAppId?: string,
|
||||||
|
* s2fInstance?: string,
|
||||||
* }) => string}}
|
* }) => string}}
|
||||||
*/
|
*/
|
||||||
const urlBuilderMap = {
|
const urlBuilderMap = {
|
||||||
facebook: (d) => `https://www.facebook.com/sharer/sharer.php?u=${d.url}${d.hashtags ? `&hashtag=%23${d.hashtags.split('%2C')[0]}` : ''}`,
|
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}`,
|
email: (d) => `mailto:?subject=${d.title}&body=${d.url}`,
|
||||||
linkedin: (d) => `https://www.linkedin.com/sharing/share-offsite/?url=${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}` : ''}`,
|
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(
|
fbAppId: encodeURIComponent(
|
||||||
child.dataset.fbAppId || container.dataset.fbAppId || "",
|
child.dataset.fbAppId || container.dataset.fbAppId || "",
|
||||||
),
|
),
|
||||||
|
s2fInstance: encodeURIComponent(
|
||||||
|
child.dataset.s2fInstance ||
|
||||||
|
container.dataset.s2fInstance ||
|
||||||
|
"s2f.kytta.dev",
|
||||||
|
),
|
||||||
};
|
};
|
||||||
const url = urlBuilderMap[cls](preset);
|
const url = urlBuilderMap[cls](preset);
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue