From 74e2cd3cbc2cabbf75b045f804e2c9b635756cb8 Mon Sep 17 00:00:00 2001 From: Robert Seyfriedsberger Date: Wed, 4 Dec 2024 22:12:27 +0100 Subject: [PATCH] add Bluesky integration --- README-de.md | 6 ++- demo/custom-initialization.html | 2 +- demo/data-title.html | 12 ++--- demo/index.html | 12 ++--- src/js/services/bluesky.js | 85 +++++++++++++++++++++++++++++++++ src/js/services/index.js | 1 + src/js/shariff.js | 4 +- src/style/services/bluesky.less | 30 ++++++++++++ src/style/shariff-services.less | 1 + test/shariff-spec.js | 2 +- 10 files changed, 138 insertions(+), 17 deletions(-) create mode 100644 src/js/services/bluesky.js create mode 100644 src/style/services/bluesky.less diff --git a/README-de.md b/README-de.md index f5e9f887..78123847 100644 --- a/README-de.md +++ b/README-de.md @@ -98,11 +98,12 @@ $ npm run dev | `data-media-url` | Zu teilendes Bild (pinterest) | `null` | | `data-orientation` | Anordnung der Buttons. Verfügbar: `horizontal`, `vertical` | `horizontal` | | `data-referrer-track` | Wenn angegeben, wird dieser String an die geteilte URL angehängt. Mit `null` deaktivieren. | `null` | -| `data-services` | Liste der Services, die verwendet werden sollen. Für die Verwendung im `data`-Attribut muss die Angabe Entity-enkodiert werden. Die Reihenfolge wird berücksichtigt. Beispiel: `data-services="["facebook","twitter"]"`
Verfügbare Dienste:`buffer`, `clipboard`, `diaspora`, `facebook`, `flattr`, `flipboard`, `info`, `linkedin`, `mail`, `pinterest`, `pocket`, `print`, `qzone`, `reddit`, `stumbleupon`, `telegram`, `tencent-weibo`, `threema`, `tumblr`, `twitter`, `vk`, `weibo`, `whatsapp`, `xing` | `twitter`, `facebook`, `info` | -| `data-services` | Liste der Services, die verwendet werden sollen. Für die Verwendung im `data`-Attribut muss die Angabe Entity-enkodiert werden. Die Reihenfolge wird berücksichtigt. Beispiel: `data-services="["facebook","twitter"]"`
Verfügbare Dienste: `twitter`, `facebook`, `linkedin`, `pinterest`, `xing`, `whatsapp`, `mail`, `info`, `tumblr`, `flattr`, `diaspora`, `reddit`, `stumbleupon`, `threema`, `weibo`, `tencent-weibo`, `qzone`, `print`, `telegram`, `vk`, `flipboard`, `pocket`, `buffer` | `twitter`, `facebook`, `info` | +| `data-services` | Liste der Services, die verwendet werden sollen. Für die Verwendung im `data`-Attribut muss die Angabe Entity-enkodiert werden. Die Reihenfolge wird berücksichtigt. Beispiel: `data-services="["facebook","bluesky"]"`
Verfügbare Dienste:`buffer`, `clipboard`, `diaspora`, `facebook`, `flattr`, `flipboard`, `info`, `linkedin`, `mail`, `pinterest`, `pocket`, `print`, `qzone`, `reddit`, `stumbleupon`, `telegram`, `tencent-weibo`, `threema`, `tumblr`, `bluesky`, `twitter`, `vk`, `weibo`, `whatsapp`, `xing` | `bluesky`, `facebook`, `info` | +| `data-services` | Liste der Services, die verwendet werden sollen. Für die Verwendung im `data`-Attribut muss die Angabe Entity-enkodiert werden. Die Reihenfolge wird berücksichtigt. Beispiel: `data-services="["facebook","bluesky"]"`
Verfügbare Dienste: `bluesky`, `twitter`, `facebook`, `linkedin`, `pinterest`, `xing`, `whatsapp`, `mail`, `info`, `tumblr`, `flattr`, `diaspora`, `reddit`, `stumbleupon`, `threema`, `weibo`, `tencent-weibo`, `qzone`, `print`, `telegram`, `vk`, `flipboard`, `pocket`, `buffer` | `twitter`, `facebook`, `info` | | `data-theme` | Farbschema auswählen. Verfügbar: `standard`, `grey` und `white`. | `standard` | | `data-title` | Titel der zu teilenden Seite. | Entweder `DC.title`/`DC.creator` oder `` | | `data-twitter-via` | User von dem der Tweet ursprünglich stammt. | `null` | +| `data-bluesky-via` | User von dem die Nachricht ursprünglich stammt. | `null` | | `data-url` | URL, die geteilt werden soll. | Wenn `data-url` nicht gesetzt ist, wird `link[rel="canonical"]`, `meta[property="og:url"]` oder `location.href` verwendet. | ## Konstruktor-Argumente @@ -180,6 +181,7 @@ Shariff unterstützt folgende Social-Sharing-Services: - Tencent Weibo - Threema - Tumblr +- Bluesky - Twitter - VK - Weibo diff --git a/demo/custom-initialization.html b/demo/custom-initialization.html index 286eeb98..9f6b9b62 100644 --- a/demo/custom-initialization.html +++ b/demo/custom-initialization.html @@ -20,7 +20,7 @@ // Set custom options in constructor new Shariff(createDiv(), { theme: "grey", - services: ["twitter", "facebook"], + services: ["bluesky", "facebook"], infoUrl: "http://www.example.com" }); </script> diff --git a/demo/data-title.html b/demo/data-title.html index 6f65ccab..840e8995 100644 --- a/demo/data-title.html +++ b/demo/data-title.html @@ -14,29 +14,29 @@ <body> <dl class="layout-hint"> <dt>data-title:</dt><dd>foo</dd> - <dt>data-services:</dt><dd>[&quot;twitter&quot;,whatsapp&quot;,&quot;facebook&quot;,&quot;xing&quot;,&quot;pinterest&quot;,&quot;linkedin&quot;,&quot;tumblr&quot;,&quot;flattr&quot;,&quot;diaspora&quot;,&quot;reddit&quot;,&quot;stumbleupon&quot;,&quot;threema&quot;,&quot;weibo&quot;,&quot;tencent-weibo&quot;,&quot;qzone&quot;,&quot;print&quot;]</dd> + <dt>data-services:</dt><dd>[&quot;bluesky&quot;twitter&quot;,whatsapp&quot;,&quot;facebook&quot;,&quot;xing&quot;,&quot;pinterest&quot;,&quot;linkedin&quot;,&quot;tumblr&quot;,&quot;flattr&quot;,&quot;diaspora&quot;,&quot;reddit&quot;,&quot;stumbleupon&quot;,&quot;threema&quot;,&quot;weibo&quot;,&quot;tencent-weibo&quot;,&quot;qzone&quot;,&quot;print&quot;]</dd> </dl> <article class="slim"> - <div class="shariff" data-title="foo" data-services="[&quot;twitter&quot;,"whatsapp","facebook","xing","pinterest","linkedin","tumblr","flattr","diaspora","reddit","stumbleupon","threema","weibo","tencent-weibo","qzone","print"]"></div> + <div class="shariff" data-title="foo" data-services="[&quot;bluesky&quot;twitter&quot;,"whatsapp","facebook","xing","pinterest","linkedin","tumblr","flattr","diaspora","reddit","stumbleupon","threema","weibo","tencent-weibo","qzone","print"]"></div> </article> <hr> <dl class="layout-hint"> <dt>data-title:</dt><dd>bar</dd> - <dt>data-services:</dt><dd>[&quot;twitter&quot;,whatsapp&quot;,&quot;facebook&quot;,&quot;xing&quot;,&quot;pinterest&quot;,&quot;linkedin&quot;,&quot;tumblr&quot;,&quot;flattr&quot;,&quot;diaspora&quot;,&quot;reddit&quot;,&quot;stumbleupon&quot;,&quot;threema&quot;,&quot;weibo&quot;,&quot;tencent-weibo&quot;,&quot;qzone&quot;,&quot;print&quot;]</dd> + <dt>data-services:</dt><dd>[&quot;bluesky&quot;twitter&quot;,whatsapp&quot;,&quot;facebook&quot;,&quot;xing&quot;,&quot;pinterest&quot;,&quot;linkedin&quot;,&quot;tumblr&quot;,&quot;flattr&quot;,&quot;diaspora&quot;,&quot;reddit&quot;,&quot;stumbleupon&quot;,&quot;threema&quot;,&quot;weibo&quot;,&quot;tencent-weibo&quot;,&quot;qzone&quot;,&quot;print&quot;]</dd> </dl> <article class="slim"> - <div class="shariff" data-title="bar" data-services="[&quot;twitter&quot;,"whatsapp","facebook","xing","pinterest","linkedin","tumblr","flattr","diaspora","reddit","stumbleupon","threema","weibo","tencent-weibo","qzone","print"]"></div> + <div class="shariff" data-title="bar" data-services="[&quot;bluesky&quot;twitter&quot;,"whatsapp","facebook","xing","pinterest","linkedin","tumblr","flattr","diaspora","reddit","stumbleupon","threema","weibo","tencent-weibo","qzone","print"]"></div> </article> <hr> <dl class="layout-hint"> - <dt>data-services:</dt><dd>[&quot;twitter&quot;,whatsapp&quot;,&quot;facebook&quot;,&quot;xing&quot;,&quot;pinterest&quot;,&quot;linkedin&quot;,&quot;tumblr&quot;,&quot;flattr&quot;,&quot;diaspora&quot;,&quot;reddit&quot;,&quot;stumbleupon&quot;,&quot;threema&quot;,&quot;weibo&quot;,&quot;tencent-weibo&quot;,&quot;qzone&quot;,&quot;print&quot;]</dd> + <dt>data-services:</dt><dd>[&quot;bluesky&quot;twitter&quot;,whatsapp&quot;,&quot;facebook&quot;,&quot;xing&quot;,&quot;pinterest&quot;,&quot;linkedin&quot;,&quot;tumblr&quot;,&quot;flattr&quot;,&quot;diaspora&quot;,&quot;reddit&quot;,&quot;stumbleupon&quot;,&quot;threema&quot;,&quot;weibo&quot;,&quot;tencent-weibo&quot;,&quot;qzone&quot;,&quot;print&quot;]</dd> </dl> <article class="slim"> - <div class="shariff" data-services="[&quot;twitter&quot;,"whatsapp","facebook","xing","pinterest","linkedin","tumblr","flattr","diaspora","reddit","stumbleupon","threema","weibo","tencent-weibo","qzone","print"]"></div> + <div class="shariff" data-services="[&quot;bluesky&quot;twitter&quot;,"whatsapp","facebook","xing","pinterest","linkedin","tumblr","flattr","diaspora","reddit","stumbleupon","threema","weibo","tencent-weibo","qzone","print"]"></div> </article> </body> </html> diff --git a/demo/index.html b/demo/index.html index 5194e0cc..d8d5478a 100644 --- a/demo/index.html +++ b/demo/index.html @@ -74,12 +74,12 @@ <h1>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</h1> <dt>data-mail-url:</dt><dd>mailto:foo@example.com</dd> <dt>data-title:</dt><dd>Lorem ipsum</dd> <dt>data-url:</dt><dd>http://www.heise.de/ct/</dd> - <dt>data-services:</dt><dd>[&quot;whatsapp&quot;,&quot;facebook&quot;,&quot;twitter&quot;,&quot;mail&quot;,&quot;info&quot;]</dd> + <dt>data-services:</dt><dd>[&quot;whatsapp&quot;,&quot;facebook&quot;,&quot;bluesky&quot;,&quot;twitter&quot;,&quot;mail&quot;,&quot;info&quot;]</dd> </dl> <article class="slim"> <header> <h1>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</h1> - <div data-backend-url="/backend.json" class="shariff" data-services="["whatsapp","facebook","twitter","mail","info"]" data-mail-url="mailto:foo@example.com" data-lang="en" data-title="Lorem ipsum"></div> + <div data-backend-url="/backend.json" class="shariff" data-services="["bluesky","whatsapp","facebook","twitter","mail","info"]" data-mail-url="mailto:foo@example.com" data-lang="en" data-title="Lorem ipsum"></div> <time datetime="2014-11-13T10:45:00+02:00">13.11.2014 - 12:45 Uhr</time> </header> <p class="deck">A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth.</p> @@ -92,12 +92,12 @@ <h1>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</h1> <dt>data-theme:</dt><dd>grey</dd> <dt>data-twitter-via:</dt><dd>heiseonline</dd> <dt>data-url:</dt><dd>http://www.heise.de/ct/</dd> - <dt>data-services:</dt><dd>[&quot;facebook&quot;,&quot;twitter&quot;,&quot;whatsapp&quot;,&quot;info&quot;]</dd> + <dt>data-services:</dt><dd>[&quot;bluesky&quot;,&quot;facebook&quot;,&quot;twitter&quot;,&quot;whatsapp&quot;,&quot;info&quot;]</dd> </dl> <article class="slim"> <header> <h1>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</h1> - <div data-backend-url="/backend.json" data-theme="grey" data-lang="ko" class="shariff" data-url="http://www.heise.de/ct/" data-info-url="http://example.com" data-twitter-via="heiseonline" data-services="["facebook","twitter","whatsapp","info"]"></div> + <div data-backend-url="/backend.json" data-theme="grey" data-lang="ko" class="shariff" data-url="http://www.heise.de/ct/" data-info-url="http://example.com" data-twitter-via="heiseonline" data-services="["bluesky",facebook","twitter","whatsapp","info"]"></div> <time datetime="2014-11-13T10:45:00+02:00">13.11.2014 - 12:45 Uhr</time> </header> <p class="deck">Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.</p> @@ -106,12 +106,12 @@ <h1>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</h1> <dl class="layout-hint"> <dt>data-backend-url:</dt><dd>/shariff/</dd> <dt>data-theme:</dt><dd>white</dd> - <dt>data-services:</dt><dd>[&quot;facebook&quot;,&quot;twitter&quot;,&quot;mail&quot;,&quot;info&quot;]</dd> + <dt>data-services:</dt><dd>[&quot;bluesky&quot;,&quot;facebook&quot;,&quot;twitter&quot;,&quot;mail&quot;,&quot;info&quot;]</dd> </dl> <article class="slim"> <header> <h1>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</h1> - <div data-backend-url="/backend.json" data-theme="white" class="shariff" data-services="["facebook","twitter","mail","info"]"></div> + <div data-backend-url="/backend.json" data-theme="white" class="shariff" data-services="["bluesky","facebook","twitter","mail","info"]"></div> <time datetime="2014-11-13T10:45:00+02:00">13.11.2014 - 12:45 Uhr</time> </header> <p class="deck">Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.</p> diff --git a/src/js/services/bluesky.js b/src/js/services/bluesky.js new file mode 100644 index 00000000..0f54117a --- /dev/null +++ b/src/js/services/bluesky.js @@ -0,0 +1,85 @@ +'use strict' + +var url = require('url') + +// abbreviate at last blank before length and add "\u2026" (horizontal ellipsis) +var abbreviateText = function (text, length) { + var div = document.createElement('div') + var node = document.createTextNode(text) + div.appendChild(node) + var abbreviated = div.textContent + if (abbreviated.length <= length) { + return text + } + + var lastWhitespaceIndex = abbreviated + .substring(0, length - 1) + .lastIndexOf(' ') + abbreviated = abbreviated.substring(0, lastWhitespaceIndex) + '\u2026' + + return abbreviated +} + +module.exports = function (shariff) { + var shareUrl = url.parse('https://bsky.app/intent/compose', true) + + var title = shariff.getTitle() + + shareUrl.query.url = shariff.getURL() + if (shariff.options.blueskyVia !== null) { + shareUrl.query.via = shariff.options.blueskyVia + } + // From Bluesky documentation (Decembe 2024): + // The length of your passed text should not exceed 300 characters + // when combined with any passed hashtags, via, or url parameters. + var remainingTextLength = + 300 - (shareUrl.query.via || '').length - (shareUrl.query.url || '').length + shareUrl.query.text = abbreviateText(title, remainingTextLength) + + delete shareUrl.search + + return { + popup: true, + shareText: { + de: 'posten', + en: 'post', + ja: '投稿', + ko: '게시물', + ru: 'Посты', + sr: 'pošta', + zh: '职位', + }, + name: 'bluesky', + faPrefix: 'fab fa-brands', + faName: 'fa-bluesky', + title: { + bg: 'Сподели в Bluesky', + cs: 'Sdílet na Bluesky', + da: 'Del på Bluesky', + de: 'Bei Bluesky teilen', + en: 'Share on Bluesky', + es: 'Compartir en Bluesky', + fi: 'Jaa Bluesky', + fr: 'Partager sur Bluesky', + hr: 'Podijelite na Bluesky', + hu: 'Megosztás Bluesky', + it: 'Condividi su Bluesky', + ja: 'Xで共有する', + ko: 'X에서 공유', + nl: 'Delen op Bluesky', + no: 'Del på Bluesky', + pl: 'Udostępnij na Bluesky', + pt: 'Compartilhar no Bluesky', + ro: 'Partajează pe Bluesky', + ru: 'Поделиться на Bluesky', + sk: 'Zdieľať na Bluesky', + sl: 'Deli na Bluesky', + sr: 'Podeli na Bluesky', + sv: 'Dela på Bluesky', + tr: "Bluesky'da paylaş", + zh: 'Bluesky', + }, + // shareUrl: 'https://bsky.app/intent/compose?text='+ shariff.getShareText() + ' ' + url + shareUrl: url.format(shareUrl) + shariff.getReferrerTrack(), + } +} diff --git a/src/js/services/index.js b/src/js/services/index.js index e7145f99..c263b045 100644 --- a/src/js/services/index.js +++ b/src/js/services/index.js @@ -20,6 +20,7 @@ module.exports = { threema: require('./threema'), tumblr: require('./tumblr'), twitter: require('./twitter'), + bluesky: require('./bluesky'), vk: require('./vk'), weibo: require('./weibo'), whatsapp: require('./whatsapp'), diff --git a/src/js/shariff.js b/src/js/shariff.js index d5b6f7e2..57decd04 100644 --- a/src/js/shariff.js +++ b/src/js/shariff.js @@ -50,10 +50,12 @@ const Defaults = { referrerTrack: null, // services to be enabled in the following order - services: ['twitter', 'facebook', 'info'], + services: ['bluesky', 'facebook', 'info'], title: global.document.title, + blueksyVia: null, + twitterVia: null, flattrUser: null, diff --git a/src/style/services/bluesky.less b/src/style/services/bluesky.less new file mode 100644 index 00000000..5ff51cde --- /dev/null +++ b/src/style/services/bluesky.less @@ -0,0 +1,30 @@ +.shariff { + .bluesky { + a { + background-color: #000; + &:hover { + background-color: #333; + } + } + .fa-bluesky { + font-size: 28px; + } + .share_count { + color: #fff; + background-color: #595959; + } + } + .theme-white { + .bluesky a { + color: #000; + } + } +} + +@media only screen and (min-width: 600px) { + .shariff { + .bluesky .fa-bluesky { + font-size: 24px; + } + } +} diff --git a/src/style/shariff-services.less b/src/style/shariff-services.less index 5e0cf903..7160c740 100644 --- a/src/style/shariff-services.less +++ b/src/style/shariff-services.less @@ -13,6 +13,7 @@ @import "services/reddit"; @import "services/stumbleupon"; @import "services/twitter"; +@import "services/bluesky"; @import "services/whatsapp"; @import "services/xing"; @import "services/tumblr"; diff --git a/test/shariff-spec.js b/test/shariff-spec.js index 3866a514..dfea4ee2 100644 --- a/test/shariff-spec.js +++ b/test/shariff-spec.js @@ -17,7 +17,7 @@ describe('Shariff', () => { let s = new Shariff(div) assert.deepEqual( s.options.services, - ['twitter', 'facebook', 'info'] + ['bluesky', 'facebook', 'info'] ) }) })