heiseonline · seyfro · Dec 4, 2024
diff --git 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="[&quot;facebook&quot;,&quot;twitter&quot;]"` <br> 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="[&quot;facebook&quot;,&quot;twitter&quot;]"` <br> 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="[&quot;facebook&quot;,&quot;bluesky&quot;]"` <br> 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="[&quot;facebook&quot;,&quot;bluesky&quot;]"` <br> 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 `<title>` |
 | `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
@@ -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
@@ -14,29 +14,29 @@
 <body>
     <dl class="layout-hint">
       <dt>data-title:</dt><dd>foo</dd>
-      <dt>data-services:</dt><dd>[&amp;quot;twitter&amp;quot;,whatsapp&amp;quot;,&amp;quot;facebook&amp;quot;,&amp;quot;xing&amp;quot;,&amp;quot;pinterest&amp;quot;,&amp;quot;linkedin&amp;quot;,&amp;quot;tumblr&amp;quot;,&amp;quot;flattr&amp;quot;,&amp;quot;diaspora&amp;quot;,&amp;quot;reddit&amp;quot;,&amp;quot;stumbleupon&amp;quot;,&amp;quot;threema&amp;quot;,&amp;quot;weibo&amp;quot;,&amp;quot;tencent-weibo&amp;quot;,&amp;quot;qzone&amp;quot;,&amp;quot;print&amp;quot;]</dd>
+      <dt>data-services:</dt><dd>[&amp;quot;bluesky&amp;quot;twitter&amp;quot;,whatsapp&amp;quot;,&amp;quot;facebook&amp;quot;,&amp;quot;xing&amp;quot;,&amp;quot;pinterest&amp;quot;,&amp;quot;linkedin&amp;quot;,&amp;quot;tumblr&amp;quot;,&amp;quot;flattr&amp;quot;,&amp;quot;diaspora&amp;quot;,&amp;quot;reddit&amp;quot;,&amp;quot;stumbleupon&amp;quot;,&amp;quot;threema&amp;quot;,&amp;quot;weibo&amp;quot;,&amp;quot;tencent-weibo&amp;quot;,&amp;quot;qzone&amp;quot;,&amp;quot;print&amp;quot;]</dd>
     </dl>
     <article class="slim">
-        <div class="shariff" data-title="foo" data-services="[&amp;quot;twitter&amp;quot;,&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;]"></div>
+        <div class="shariff" data-title="foo" data-services="[&amp;quot;bluesky&amp;quot;twitter&amp;quot;,&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;]"></div>
     </article>
 
     <hr>
 
     <dl class="layout-hint">
       <dt>data-title:</dt><dd>bar</dd>
-      <dt>data-services:</dt><dd>[&amp;quot;twitter&amp;quot;,whatsapp&amp;quot;,&amp;quot;facebook&amp;quot;,&amp;quot;xing&amp;quot;,&amp;quot;pinterest&amp;quot;,&amp;quot;linkedin&amp;quot;,&amp;quot;tumblr&amp;quot;,&amp;quot;flattr&amp;quot;,&amp;quot;diaspora&amp;quot;,&amp;quot;reddit&amp;quot;,&amp;quot;stumbleupon&amp;quot;,&amp;quot;threema&amp;quot;,&amp;quot;weibo&amp;quot;,&amp;quot;tencent-weibo&amp;quot;,&amp;quot;qzone&amp;quot;,&amp;quot;print&amp;quot;]</dd>
+      <dt>data-services:</dt><dd>[&amp;quot;bluesky&amp;quot;twitter&amp;quot;,whatsapp&amp;quot;,&amp;quot;facebook&amp;quot;,&amp;quot;xing&amp;quot;,&amp;quot;pinterest&amp;quot;,&amp;quot;linkedin&amp;quot;,&amp;quot;tumblr&amp;quot;,&amp;quot;flattr&amp;quot;,&amp;quot;diaspora&amp;quot;,&amp;quot;reddit&amp;quot;,&amp;quot;stumbleupon&amp;quot;,&amp;quot;threema&amp;quot;,&amp;quot;weibo&amp;quot;,&amp;quot;tencent-weibo&amp;quot;,&amp;quot;qzone&amp;quot;,&amp;quot;print&amp;quot;]</dd>
     </dl>
     <article class="slim">
-        <div class="shariff" data-title="bar" data-services="[&amp;quot;twitter&amp;quot;,&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;]"></div>
+        <div class="shariff" data-title="bar" data-services="[&amp;quot;bluesky&amp;quot;twitter&amp;quot;,&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;]"></div>
     </article>
 
     <hr>
 
     <dl class="layout-hint">
-      <dt>data-services:</dt><dd>[&amp;quot;twitter&amp;quot;,whatsapp&amp;quot;,&amp;quot;facebook&amp;quot;,&amp;quot;xing&amp;quot;,&amp;quot;pinterest&amp;quot;,&amp;quot;linkedin&amp;quot;,&amp;quot;tumblr&amp;quot;,&amp;quot;flattr&amp;quot;,&amp;quot;diaspora&amp;quot;,&amp;quot;reddit&amp;quot;,&amp;quot;stumbleupon&amp;quot;,&amp;quot;threema&amp;quot;,&amp;quot;weibo&amp;quot;,&amp;quot;tencent-weibo&amp;quot;,&amp;quot;qzone&amp;quot;,&amp;quot;print&amp;quot;]</dd>
+      <dt>data-services:</dt><dd>[&amp;quot;bluesky&amp;quot;twitter&amp;quot;,whatsapp&amp;quot;,&amp;quot;facebook&amp;quot;,&amp;quot;xing&amp;quot;,&amp;quot;pinterest&amp;quot;,&amp;quot;linkedin&amp;quot;,&amp;quot;tumblr&amp;quot;,&amp;quot;flattr&amp;quot;,&amp;quot;diaspora&amp;quot;,&amp;quot;reddit&amp;quot;,&amp;quot;stumbleupon&amp;quot;,&amp;quot;threema&amp;quot;,&amp;quot;weibo&amp;quot;,&amp;quot;tencent-weibo&amp;quot;,&amp;quot;qzone&amp;quot;,&amp;quot;print&amp;quot;]</dd>
     </dl>
     <article class="slim">
-        <div class="shariff" data-services="[&amp;quot;twitter&amp;quot;,&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;]"></div>
+        <div class="shariff" data-services="[&amp;quot;bluesky&amp;quot;twitter&amp;quot;,&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;]"></div>
     </article>
 </body>
 </html>
diff --git 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:[email protected]</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>[&amp;quot;whatsapp&amp;quot;,&amp;quot;facebook&amp;quot;,&amp;quot;twitter&amp;quot;,&amp;quot;mail&amp;quot;,&amp;quot;info&amp;quot;]</dd>
+        <dt>data-services:</dt><dd>[&amp;quot;whatsapp&amp;quot;,&amp;quot;facebook&amp;quot;,&amp;quot;bluesky&amp;quot;,&amp;quot;twitter&amp;quot;,&amp;quot;mail&amp;quot;,&amp;quot;info&amp;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="[&quot;whatsapp&quot;,&quot;facebook&quot;,&quot;twitter&quot;,&quot;mail&quot;,&quot;info&quot;]" data-mail-url="mailto:[email protected]" data-lang="en" data-title="Lorem ipsum"></div>
+            <div data-backend-url="/backend.json" class="shariff" data-services="[&quot;bluesky&quot;,&quot;whatsapp&quot;,&quot;facebook&quot;,&quot;twitter&quot;,&quot;mail&quot;,&quot;info&quot;]" data-mail-url="mailto:[email protected]" 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>[&amp;quot;facebook&amp;quot;,&amp;quot;twitter&amp;quot;,&amp;quot;whatsapp&amp;quot;,&amp;quot;info&amp;quot;]</dd>
+        <dt>data-services:</dt><dd>[&amp;quot;bluesky&amp;quot;,&amp;quot;facebook&amp;quot;,&amp;quot;twitter&amp;quot;,&amp;quot;whatsapp&amp;quot;,&amp;quot;info&amp;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="[&quot;facebook&quot;,&quot;twitter&quot;,&quot;whatsapp&quot;,&quot;info&quot;]"></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="[&quot;bluesky&quot;,facebook&quot;,&quot;twitter&quot;,&quot;whatsapp&quot;,&quot;info&quot;]"></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>[&amp;quot;facebook&amp;quot;,&amp;quot;twitter&amp;quot;,&amp;quot;mail&amp;quot;,&amp;quot;info&amp;quot;]</dd>
+        <dt>data-services:</dt><dd>[&amp;quot;bluesky&amp;quot;,&amp;quot;facebook&amp;quot;,&amp;quot;twitter&amp;quot;,&amp;quot;mail&amp;quot;,&amp;quot;info&amp;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="[&quot;facebook&quot;,&quot;twitter&quot;,&quot;mail&quot;,&quot;info&quot;]"></div>
+            <div data-backend-url="/backend.json" data-theme="white" class="shariff" data-services="[&quot;bluesky&quot;,&quot;facebook&quot;,&quot;twitter&quot;,&quot;mail&quot;,&quot;info&quot;]"></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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -17,7 +17,7 @@ describe('Shariff', () => {
       let s = new Shariff(div)
       assert.deepEqual(
         s.options.services,
-        ['twitter', 'facebook', 'info']
+        ['bluesky', 'facebook', 'info']
       )
     })
   })