Add button for Lobsters (#143)

README.md

@@ -4,7 +4,7 @@
 
 > Lightweight, stylish, and ethical share buttons
 
-- **Small.** Dependency-free. CSS+JS bundle is 7.5 kB minified and brotlied.
+- **Small.** Dependency-free. CSS+JS bundle is under 7.7 KiB 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.
 
@@ -96,7 +96,9 @@ names of which match the names of the social networks (or `copy-url`, for the
   <a class="bluesky"></a>
   <a class="facebook"></a>
   <a class="fediverse"></a>
+  <a class="hackernews"></a>
   <a class="linkedin"></a>
+  <a class="lobsters"></a>
   <a class="mastodon"></a>
   <!-- FB App ID is required for the Messenger button to function -->
   <a class="messenger" data-fb-app-id="0123456789012345"></a>
@@ -114,6 +116,7 @@ names of which match the names of the social networks (or `copy-url`, for the
   <a class="copy-url"></a>
   <a class="email"></a>
   <a class="print"></a>
+  <a class="web-share"></a>
 </div>
 ```
 

index.html

@@ -34,6 +34,7 @@
           <a class="fediverse"></a>
           <a class="hackernews"></a>
           <a class="linkedin"></a>
+          <a class="lobsters"></a>
           <a class="mastodon"></a>
           <a class="messenger" data-fb-app-id="3619024578167617"></a>
           <a class="odnoklassniki"></a>
@@ -61,6 +62,7 @@
           <button class="fediverse"></button>
           <button class="hackernews"></button>
           <button class="linkedin"></button>
+          <button class="lobsters"></button>
           <button class="mastodon"></button>
           <button class="messenger" data-fb-app-id="3619024578167617"></button>
           <button class="odnoklassniki"></button>
@@ -93,6 +95,7 @@
           <a class="fediverse" data-s2f-instance="share2fedi.vercel.app"></a>
           <a class="hackernews"></a>
           <a class="linkedin"></a>
+          <a class="lobsters"></a>
           <a class="mastodon" data-via="@NickKaramoff@fosstodon.org"></a>
           <a class="messenger" data-fb-app-id="3619024578167617"></a>
           <a class="odnoklassniki"></a>
@@ -115,29 +118,30 @@
       <section>
         <h2>Specimen</h2>
         <div class="shareon specimen">
-          <a class="bluesky"></a>
-          <a class="facebook">Share</a>
+          <a class="bluesky">Share</a>
+          <a class="facebook"></a>
           <a class="fediverse"></a>
           <a class="hackernews"></a>
           <a class="linkedin"></a>
+          <a class="lobsters"></a>
           <a class="mastodon">Toot</a>
           <a class="messenger" data-fb-app-id="3619024578167617"></a>
-          <a class="odnoklassniki"></a>
           <br />
+          <a class="odnoklassniki"></a>
           <a class="pinterest">Pin</a>
           <a class="pocket"></a>
           <a class="reddit"></a>
           <a class="teams"></a>
-          <a class="telegram">Send</a>
-          <a class="tumblr"></a>
+          <a class="telegram"></a>
+          <a class="tumblr">Post</a>
           <a class="twitter"></a>
-          <a class="viber"></a>
           <br />
-          <a class="vkontakte">Поделиться</a>
+          <a class="viber">Send</a>
+          <a class="vkontakte"></a>
           <a class="whatsapp"></a>
-          <a class="copy-url"></a>
+          <a class="copy-url">Copy URL</a>
           <a class="email"></a>
-          <a class="print">Print</a>
+          <a class="print"></a>
           <a class="web-share"></a>
         </div>
       </section>

package.json

@@ -110,7 +110,7 @@
   },
   "size-limit": [
     {
-      "limit": "6.3 KiB",
+      "limit": "6.6 KiB",
       "path": "./dist/shareon.min.css"
     },
     {

src/icons/lobsters.svg

@@ -0,0 +1 @@
+<svg fill="#fff" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M14.09.481v1.411c-.308.022-.616 0-.902.044-.44.066-.881.13-1.3.241-.77.242-1.164.774-1.252 1.5a7 7 0 0 0-.069.99V18.74c0 .594.068 1.186.134 1.758.066.64.484 1.058 1.08 1.278.507.198 1.054.245 1.583.267 1.387.044 2.755.02 4.099-.332 1.937-.484 3.235-1.697 3.875-3.611.197-.617.284-1.256.438-1.894.022-.044.067-.132.111-.132h1.454c-.044 2.642.044 5.283 0 7.926H2.09v-1.386c0-.242 0-.219.22-.24.505-.045 1.011-.067 1.518-.155 1.013-.176 1.475-.686 1.63-1.72a7 7 0 0 0 .068-.946V4.711c0-.397-.047-.793-.09-1.167-.067-.683-.506-1.1-1.145-1.342-.594-.22-1.21-.244-1.827-.288h-.332V.481L2.33.285h11.54c.153 0 .22.02.22.196"/></svg>

src/shareon.css

@@ -123,6 +123,13 @@
   background-image: url("icons/linkedin.svg");
 }
 
+.shareon > .lobsters {
+  background-color: #ac130d;
+}
+.shareon > .lobsters:before {
+  background-image: url("icons/lobsters.svg");
+}
+
 .shareon > .mastodon {
   background-color: #6364ff;
 }

src/shareon.js

@@ -19,11 +19,12 @@ import "./shareon.css";
  */
 const urlBuilderMap = {
   bluesky: (d) => `https://bsky.app/intent/compose?text=${d.text || d.title}%0A%0A${d.url}`,
+  email: (d) => `mailto:?subject=${d.title}&body=${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}`,
   hackernews: (d) => `https://news.ycombinator.com/submitlink?u=${d.url}&t=${d.title}`,
   linkedin: (d) => `https://www.linkedin.com/sharing/share-offsite/?url=${d.url}`,
+  lobsters: (d) => `https://lobste.rs/stories/new?url=${d.url}&title=${d.title}`,
   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}` : ''}`,
   messenger: (d) => `https://www.facebook.com/dialog/send?app_id=${d.fbAppId}&link=${d.url}&redirect_uri=${d.url}`,
   odnoklassniki: (d) => `https://connect.ok.ru/offer?url=${d.url}&title=${d.title}${d.media ? `&imageUrl=${d.media}` : ''}`,