feat: share button

- web share API
- https://developer.mozilla.org/en-US/docs/Web/API/Navigator/share
- https://web.dev/web-share/
- https://github.com/luruke/browser-2020
- move height property to css
- add left margin to headerlink button

themes/chameleon/layout/_partial/post/title.ejs

@@ -8,6 +8,15 @@
       <a class="<%= class_name %>" href="<%- url_for(post.path) %>"><%= post.title %></a>
     </h1>
   <% } else { %>
-    <h1 class="<%= class_name %>" itemprop="headline name"><%= post.title %></h1>
+    <h1 class="<%= class_name %>" itemprop="headline name"><%= post.title %>
+      <%/* Share button */%>
+      <a class="share-button" id="share-click">
+        <svg viewBox="0 50 1635 1635">
+          <title>Share post</title>
+          <desc>Share icon</desc>
+          <use href="/svg/share.svg#share"/>
+        </svg>
+      </a>
+    </h1>
   <% } %>
 <% } %>

themes/chameleon/scripts/heading-link.js

@@ -6,7 +6,7 @@
 */
 
 const { slugize, stripHTML } = require('hexo-util')
-const svg = '<svg height="0.75em" viewBox="15 15 1635 1635"><use href="/svg/link.svg#link"></use></svg>'
+const svg = '<svg viewBox="15 15 1635 1635"><use href="/svg/link.svg#link"></use></svg>'
 
 const anchorId = (str, transformOption) => {
   return slugize(str.trim(), { transform: transformOption })

themes/chameleon/source/css/chameleon.css

@@ -707,18 +707,27 @@ svg {
   border-bottom: none;
 }
 
-/* fill the link icon with link's color */
-svg#link {
+/* fill the permalink and share icons with link's color */
+svg#link,
+svg#share {
   fill: var(--link-underline);
 }
 
-/* don't underline link icon */
-.article .article-entry a.headerlink {
-  border-bottom: none;
+.article .article-entry a.headerlink svg,
+.article-title a.share-button svg {
+  height: 0.75em;
 }
 
-/* underline link icon when hover */
-.article .article-entry a.headerlink:hover {
+/* don't underline permalink and share icons */
+.article .article-entry a.headerlink,
+.article-title a.share-button {
+  border-bottom: none;
+  margin-left: 0.5em;
+}
+
+/* underline permalink and share icons when hover */
+.article .article-entry a.headerlink:hover,
+.article-title a.share-button:hover {
   border-bottom: 1px solid var(--link-underline);
 }
 

themes/chameleon/source/js/chameleon.js

@@ -7,6 +7,23 @@ document.getElementById('searchClickMob').addEventListener('click', () => {
   searchFormMob.submit()
 }, false)
 
+// Web Share API
+// https://developer.mozilla.org/en-US/docs/Web/API/Navigator/share
+// Only available on supporting browsers and HTTPS
+if (navigator.share && document.location.protocol === 'https:') {
+  document.getElementById('share-click').addEventListener('click', async () => {
+    const query = (selector) => {
+      return document.querySelector(selector)
+    }
+  
+    const title = query('meta[property="og:title"]') ? query('meta[property="og:title"]').content : ''
+    const text = query('meta[property="og:description"]') ? query('meta[property="og:description"]').content : ''
+    const url = query('link[rel="canonical"]') ? query('link[rel="canonical"]').href : document.location.href
+  
+    await navigator.share({ title, text, url })
+  }, false)
+}
+
 // Use duckduckgo's onion address when the site is accessed via .onion
 if (document.location.hostname.endsWith('.onion')) {
   const searchForms = document.querySelectorAll('form#searchForm, form#searchFormMob')

themes/chameleon/source/svg/share.svg

@@ -0,0 +1,3 @@
+<svg id="share" viewBox="0 50 1635 1635" xmlns="http://www.w3.org/2000/svg">
+    <path d="M1216 1024c177 0 320 143 320 320s-143 320-320 320-320-143-320-320c0-11 1-23 2-34l-360-180c-57 53-134 86-218 86-177 0-320-143-320-320s143-320 320-320c84 0 161 33 218 86l360-180c-1-11-2-23-2-34 0-177 143-320 320-320s320 143 320 320-143 320-320 320c-84 0-161-33-218-86L638 862c1 11 2 23 2 34s-1 23-2 34l360 180c57-53 134-86 218-86z"/>
+</svg>