Add button for Bluesky (#134)

Author: kytta

README.md

@@ -4,11 +4,11 @@
 
 > Lightweight, stylish, and ethical share buttons
 
-- **Small.** Dependency-free. CSS+JS bundle is under 7.5 kB minified and brotlied.
+- **Small.** Dependency-free. CSS+JS bundle is 7.5 kB minified and brotlied.
 - **Stylish.** Uses official vector logos and colours with no visual mess.
 - **Ethical.** Embeds no tracking code. JS is required only for the setup.
 
-<a href="https://shareon.js.org/"><img src="./assets/[email protected]" height="126" width="333" alt="Shareon demo screenshot"></a>
+<a href="https://shareon.js.org/"><img src="./assets/[email protected]" height="126" width="438" alt="Demo screenshot of all buttons Shareon supports"></a>
 
 See the live demo at [shareon.js.org](https://shareon.js.org)
 
@@ -93,6 +93,7 @@ names of which match the names of the social networks (or `copy-url`, for the
 
 ```html
 <div class="shareon">
+  <a class="bluesky"></a>
   <a class="facebook"></a>
   <a class="fediverse"></a>
   <a class="linkedin"></a>
@@ -145,7 +146,7 @@ Apart from the URL and title, some networks support extra parameters:
   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
+- add `data-text` to a Bluesky, Mastodon, Telegram, Tumblr, Viber, or WhatsApp button to add
   custom message text
 - add `data-via` to a Mastodon, Tumblr, or Twitter button to mention a user
 - add `data-hashtags` to a Facebook, Tumblr, or Twitter button to include hashtags in the shared post.

assets/[email protected]

@@ -29,6 +29,7 @@ <h1>Shareon Demo Page</h1>
       <section>
         <h2><code>&lt;a&gt;</code></h2>
         <div class="shareon">
+          <a class="bluesky"></a>
           <a class="facebook"></a>
           <a class="fediverse"></a>
           <a class="hackernews"></a>
@@ -55,6 +56,7 @@ <h2><code>&lt;a&gt;</code></h2>
       <section>
         <h2><code>&lt;button&gt;</code></h2>
         <div class="shareon">
+          <button class="bluesky"></button>
           <button class="facebook"></button>
           <button class="fediverse"></button>
           <button class="hackernews"></button>
@@ -86,6 +88,7 @@ <h2><code>&lt;a&gt;</code> with custom params</h2>
           data-url="https://demo.shareon.js.org"
           data-text="hey check this out"
         >
+          <a class="bluesky"></a>
           <a class="facebook"></a>
           <a class="fediverse" data-s2f-instance="share2fedi.vercel.app"></a>
           <a class="hackernews"></a>
@@ -105,34 +108,37 @@ <h2><code>&lt;a&gt;</code> with custom params</h2>
           <a class="whatsapp"></a>
           <a class="copy-url"></a>
           <a class="email"></a>
+          <a class="print"></a>
           <a class="web-share"></a>
         </div>
       </section>
       <section>
         <h2>Specimen</h2>
         <div class="shareon specimen">
-          <a class="facebook"></a>
+          <a class="bluesky"></a>
+          <a class="facebook">Share</a>
           <a class="fediverse"></a>
           <a class="hackernews"></a>
           <a class="linkedin"></a>
           <a class="mastodon">Toot</a>
           <a class="messenger" data-fb-app-id="3619024578167617"></a>
           <a class="odnoklassniki"></a>
-          <a class="pinterest">Pin</a>
           <br />
+          <a class="pinterest">Pin</a>
           <a class="pocket"></a>
           <a class="reddit"></a>
           <a class="teams"></a>
-          <a class="telegram"></a>
+          <a class="telegram">Send</a>
           <a class="tumblr"></a>
-          <a class="twitter">Tweet</a>
+          <a class="twitter"></a>
           <a class="viber"></a>
           <br />
           <a class="vkontakte">Поделиться</a>
           <a class="whatsapp"></a>
           <a class="copy-url"></a>
           <a class="email"></a>
-          <a class="web-share">Share</a>
+          <a class="print">Print</a>
+          <a class="web-share"></a>
         </div>
       </section>
     </main>

index.html

@@ -110,14 +110,12 @@
   },
   "size-limit": [
     {
-      "limit": "6.1 KiB",
-      "path": "./dist/shareon.min.css",
-      "brotli": true
+      "limit": "6.3 KiB",
+      "path": "./dist/shareon.min.css"
     },
     {
       "limit": "1.1 KiB",
-      "path": "./dist/shareon.es.js",
-      "brotli": true
+      "path": "./dist/shareon.es.js"
     }
   ],
   "publishConfig": {

package.json

@@ -73,6 +73,13 @@
   vertical-align: bottom;
 }
 
+.shareon > .bluesky {
+  background-color: #0285ff;
+}
+.shareon > .bluesky:before {
+  background-image: url("icons/bluesky.svg");
+}
+
 .shareon > .copy-url:before {
   background-image: url("icons/copy-url.svg");
 }

src/icons/bluesky.svg

@@ -18,6 +18,7 @@ import "./shareon.css";
  * }) => string}}
  */
 const urlBuilderMap = {
+  bluesky: (d) => `https://bsky.app/intent/compose?text=${d.text || d.title}%0A%0A${d.url}`,
   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}`,