diff --git a/themes/chameleon/layout/_partial/post/title.ejs b/themes/chameleon/layout/_partial/post/title.ejs index 21850bf..7309396 100644 --- a/themes/chameleon/layout/_partial/post/title.ejs +++ b/themes/chameleon/layout/_partial/post/title.ejs @@ -8,6 +8,15 @@ <%= post.title %> <% } else { %> -

<%= post.title %>

+

<%= post.title %> + <%/* Share button */%> + + + Share post + Share icon + + + +

<% } %> <% } %> diff --git a/themes/chameleon/scripts/heading-link.js b/themes/chameleon/scripts/heading-link.js index 65e67ed..48bbebe 100644 --- a/themes/chameleon/scripts/heading-link.js +++ b/themes/chameleon/scripts/heading-link.js @@ -6,7 +6,7 @@ */ const { slugize, stripHTML } = require('hexo-util') -const svg = '' +const svg = '' const anchorId = (str, transformOption) => { return slugize(str.trim(), { transform: transformOption }) diff --git a/themes/chameleon/source/css/chameleon.css b/themes/chameleon/source/css/chameleon.css index 1335d33..fb82ebe 100644 --- a/themes/chameleon/source/css/chameleon.css +++ b/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); } diff --git a/themes/chameleon/source/js/chameleon.js b/themes/chameleon/source/js/chameleon.js index bbc8ed2..cf0ba43 100644 --- a/themes/chameleon/source/js/chameleon.js +++ b/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') diff --git a/themes/chameleon/source/svg/share.svg b/themes/chameleon/source/svg/share.svg new file mode 100644 index 0000000..5d0befd --- /dev/null +++ b/themes/chameleon/source/svg/share.svg @@ -0,0 +1,3 @@ + + +