Add email button (#99)

CHANGELOG.md

@@ -4,6 +4,13 @@ All notable changes to this project will be documented in this file.
 
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [Unreleased]
+
+### Added
+
+- [#99](https://github.com/kytta/shareon/pull/99)
+  Email button
+
 ## [2.3.0] - 2023-08-01
 
 ### Added

README.md

@@ -89,7 +89,7 @@ Shareon.init();
 
 Create a container with class `shareon` and populate it with elements, class
 names of which match the names of the social networks (or `copy-url`, for the
-'Copy URL' button:
+'Copy URL' button):
 
 ```html
 <div class="shareon">
@@ -110,6 +110,7 @@ names of which match the names of the social networks (or `copy-url`, for the
   <a class="vkontakte"></a>
   <a class="whatsapp"></a>
   <a class="copy-url"></a>
+  <a class="email"></a>
 </div>
 ```
 

index.html

@@ -45,6 +45,7 @@
           <a class="vkontakte"></a>
           <a class="whatsapp"></a>
           <a class="copy-url"></a>
+          <a class="email"></a>
           <a class="web-share"></a>
         </div>
       </section>
@@ -67,6 +68,7 @@
           <button class="vkontakte"></button>
           <button class="whatsapp"></button>
           <button class="copy-url"></button>
+          <button class="email"></button>
           <button class="web-share"></button>
         </div>
       </section>
@@ -94,6 +96,7 @@
           <a class="vkontakte"></a>
           <a class="whatsapp"></a>
           <a class="copy-url"></a>
+          <a class="email"></a>
           <a class="web-share"></a>
         </div>
       </section>
@@ -118,6 +121,7 @@
           <a class="vkontakte">Поделиться</a>
           <a class="whatsapp"></a>
           <a class="copy-url"></a>
+          <a class="email"></a>
           <a class="web-share">Share</a>
         </div>
       </section>

src/icons/email.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><rect height="16" rx="2" width="20" x="2" y="4"/><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"/></g></svg>

src/shareon.css

@@ -81,6 +81,10 @@
   background-image: url("icons/copy-url-done.svg");
 }
 
+.shareon > .email:before {
+  background-image: url("icons/email.svg");
+}
+
 .shareon > .facebook {
   background-color: #1877f2;
 }

src/shareon.js

@@ -18,6 +18,7 @@ import "./shareon.css";
  */
 const urlBuilderMap = {
   facebook: (d) => `https://www.facebook.com/sharer/sharer.php?u=${d.url}${d.hashtags? `&hashtag=%23${d.hashtags.split('%2C')[0]}` : ''}`,
+  email: (d) => `mailto:?subject=${d.title}&body=${d.url}`,
   linkedin: (d) => `https://www.linkedin.com/sharing/share-offsite/?url=${d.url}`,
   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}`,