Add Tumblr button (#80)

README.md

@@ -104,6 +104,7 @@ names of which match the names of the social networks (or `copy-url`, for the
   <a class="reddit"></a>
   <a class="teams"></a>
   <a class="telegram"></a>
+  <a class="tumblr"></a>
   <a class="twitter"></a>
   <a class="viber"></a>
   <a class="vkontakte"></a>
@@ -139,12 +140,13 @@ Apart from the URL and title, some networks support extra parameters:
   even possible
 - add `data-media` to an Odnoklassniki, Pinterest, or VK button to customize
   the pinned picture
-- add `data-text` to a WhatsApp, Mastodon, Telegram, or Viber button to add
+- add `data-text` to a Mastodon, Telegram, Tumblr, Viber, or WhatsApp button to add
   custom message text
-- add `data-via` to a Twitter or Mastodon button to mention a user
+- add `data-via` to a Mastodon, Tumblr, or Twitter button to mention a user
-- add `data-hashtags` to a Twitter or Facebook button to include hashtags in the shared post.
+- add `data-hashtags` to a Facebook, Tumblr, or Twitter button to include hashtags in the shared post.
-  - Twitter supports multiple hashtags, and you need to specify them with out `#` and seperated with `,`, it shoule be something like this `ai,technologies,aigc`.
+  - should be a comma-separated string, for example `stuff,tech,buttons`
-  - Facebook only supports a single hashtag. If you pass multiple hashtags with `,` seperated, the library will only use the first one.
+  - Twitter & Tumblr support multiple hashtags
+  - Facebook only supports a single hashtag; only the first one will be used
 
 Here are all custom parameters:
 
@@ -154,6 +156,7 @@ Here are all custom parameters:
   <a class="messenger" data-fb-app-id="0123456789012345"></a>
   <a class="pinterest" data-media="https://custom.picture/for-pinterest">Pin</a>
   <a class="telegram" data-text="Check this out!"></a>
+  <a class="tumblr" data-hashtags="nice,buttons" data-text="These are some nice buttons" data-via="myblog"></a>
   <a class="twitter" data-via="MyNickname" data-hashtags="shareon,awesome,brilliant"></a>
   <a class="mastodon" data-via="@MyNickname@myserver.social"></a>
   <a class="whatsapp" data-url="https://custom.url/for-whatsapp">Send</a>

index.html

@@ -39,6 +39,7 @@
           <a class="reddit"></a>
           <a class="teams"></a>
           <a class="telegram"></a>
+          <a class="tumblr"></a>
           <a class="twitter"></a>
           <a class="viber"></a>
           <a class="vkontakte"></a>
@@ -60,6 +61,7 @@
           <button class="reddit"></button>
           <button class="teams"></button>
           <button class="telegram"></button>
+          <button class="tumblr"></button>
           <button class="twitter"></button>
           <button class="viber"></button>
           <button class="vkontakte"></button>
@@ -86,6 +88,7 @@
           <a class="reddit"></a>
           <a class="teams"></a>
           <a class="telegram"></a>
+          <a class="tumblr"></a>
           <a class="twitter" data-via="nickkaramoff"></a>
           <a class="viber"></a>
           <a class="vkontakte"></a>
@@ -108,6 +111,7 @@
           <a class="reddit"></a>
           <a class="teams"></a>
           <a class="telegram"></a>
+          <a class="tumblr"></a>
           <a class="twitter">Tweet</a>
           <a class="viber"></a>
           <br />

src/icons/tumblr.svg

@@ -0,0 +1 @@
+<svg fill="#fff" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M14.563 24c-5.093 0-7.031-3.756-7.031-6.411V9.747H5.116V6.648c3.63-1.313 4.512-4.596 4.71-6.469C9.84.051 9.941 0 9.999 0h3.517v6.114h4.801v3.633h-4.82v7.47c.016 1.001.375 2.371 2.207 2.371h.09c.631-.02 1.486-.205 1.936-.419l1.156 3.425c-.436.636-2.4 1.374-4.156 1.404h-.178l.011.002z"/></svg>

src/shareon.css

@@ -140,6 +140,13 @@
   background-image: url("icons/reddit.svg");
 }
 
+.shareon > .teams {
+  background-color: #6264a7;
+}
+.shareon > .teams:before {
+  background-image: url("icons/teams.svg");
+}
+
 .shareon > .telegram {
   background-color: #26a5e4;
 }
@@ -147,11 +154,11 @@
   background-image: url("icons/telegram.svg");
 }
 
-.shareon > .teams {
+.shareon > .tumblr {
-  background-color: #6264a7;
+  background-color: #36465d;
 }
-.shareon > .teams:before {
+.shareon > .tumblr:before {
-  background-image: url("icons/teams.svg");
+  background-image: url("icons/tumblr.svg");
 }
 
 .shareon > .twitter {

src/shareon.js

@@ -27,6 +27,7 @@ const urlBuilderMap = {
   reddit: (d) => `https://www.reddit.com/submit?title=${d.title}&url=${d.url}`,
   teams: (d) => `https://teams.microsoft.com/share?href=${d.url}${d.text ? `&msgText=${d.text}` : ''}`,
   telegram: (d) => `https://telegram.me/share/url?url=${d.url}${d.text ? `&text=${d.text}` : ''}`,
+  tumblr: (d) => `https://www.tumblr.com/widgets/share/tool?posttype=link${d.hashtags? `&tags=${d.hashtags}` : ''}&title=${d.title}&content=${d.url}&canonicalUrl=${d.url}${d.text? `&caption=${d.text}`:''}${d.via? `&show-via=${d.via}`:''}`,
   twitter: (d) => `https://twitter.com/intent/tweet?url=${d.url}&text=${d.title}${d.via ? `&via=${d.via}` : ''}${d.hashtags? `&hashtags=${d.hashtags}` : ''}`,
   viber: (d) => `viber://forward?text=${d.title}%0D%0A${d.url}${d.text ? `%0D%0A%0D%0A${d.text}` : ''}`,
   vkontakte: (d) => `https://vk.com/share.php?url=${d.url}&title=${d.title}${d.media ? `&image=${d.media}` : ''}`,