curben
/
blog
mirror of https://gitlab.com/curben/blog
1
0
Fork 0
Code Issues Releases Wiki Activity

fix(svg): <use> element no longer allows path 

somehow path is considered as cross-origin resource,
though not mentioned in the doc
https://developer.mozilla.org/en-US/docs/Web/SVG/Element/use
perhaps full URL (with protocol & domain) must be used?
but that will break mirror sites if used
This commit is contained in:
Ming Di Leom 2021-11-18 08:31:04 +00:00
parent 4e5867054c
commit 875d3b0540
No known key found for this signature in database
GPG Key ID: 32D3E28E96A695E8
9 changed files with 33 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
themes/chameleon/layout/_partial/header.ejs
View File

@ -14,12 +14,8 @@
<input type="hidden" name="kd" value="-1">
<input type="hidden" name="kg" value="p">
<input type="hidden" name="kae" value="#000">
<a class="search-button no-underline" id="search-click">
<svg viewBox="0 0 512 512">
<title>Powered by DuckDuckGo</title>
<desc>Search icon</desc>
<use href="/svg/search.svg#search"/>
</svg>
<a class="search-button" id="search-click">
<img src="/svg/search.svg">
</a>
</form>
</div>
@ -38,12 +34,8 @@
<input type="hidden" name="kd" value="-1">
<input type="hidden" name="kg" value="p">
<input type="hidden" name="kae" value="#000">
<a class="search-button no-underline" id="search-click-mobile">
<svg viewBox="0 0 512 512">
<title>Powered by DuckDuckGo</title>
<desc>Search icon</desc>
<use href="/svg/search.svg#search"/>
</svg>
<a class="search-button" id="search-click-mobile">
<img src="/svg/search.svg">
</a>
</form>
</div>

8
themes/chameleon/layout/_partial/post/title.ejs
View File

@ -10,12 +10,8 @@
<% } else { %>
<h1 class="<%= class_name %>" itemprop="headline name"><%= post.title %>
<%/* Share button */%>
<a id="share-button">
<svg viewBox="0 50 1635 1635">
<title>Share post</title>
<desc>Share icon</desc>
<use href="/svg/share.svg#share"/>
</svg>
<a id="btnshare">
<img src="/svg/share.svg">
</a>
</h1>
<% } %>

2
themes/chameleon/scripts/heading-link.js
View File

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

25
themes/chameleon/source/css/_source.css
View File

@ -732,26 +732,23 @@ svg#share:hover {
/* hide share button by default
unhide (via JS) if Web Share API is supported */
.article-title a#share-button {
display: none;
.article-title a#btnshare {
display: initial;
}
.article .article-entry a.headerlink svg,
.article-title a#share-button svg {
height: 0.75em;
margin-bottom: 0.25em;
.article-title a#btnshare img {
display: block;
margin: auto;
margin-bottom: 0.5em;
max-height: 30em;
}
/* don't underline permalink and share icons */
.article .article-entry a.headerlink,
.article-title a#share-button {
.article-title a#btnshare {
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);
display: inline-block;
height: 1em;
width: 1em;
}
@media (max-width: 768px) {

25
themes/chameleon/source/css/chameleon.css
View File

@ -1052,26 +1052,23 @@ svg#share:hover {
/* hide share button by default
unhide (via JS) if Web Share API is supported */
.article-title a#share-button {
display: none;
.article-title a#btnshare {
display: initial;
}
.article .article-entry a.headerlink svg,
.article-title a#share-button svg {
height: 0.75em;
margin-bottom: 0.25em;
.article-title a#btnshare img {
display: block;
margin: auto;
margin-bottom: 0.5em;
max-height: 30em;
}
/* don't underline permalink and share icons */
.article .article-entry a.headerlink,
.article-title a#share-button {
.article-title a#btnshare {
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);
display: inline-block;
height: 1em;
width: 1em;
}
@media (max-width: 768px) {

2
themes/chameleon/source/js/chameleon.js
View File

@ -29,7 +29,7 @@ document.addEventListener('click', (evt) => {
// 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:') {
const shareBtn = document.getElementById('share-button')
const shareBtn = document.getElementById('btnshare')
// Unhide share-button if supported
shareBtn.style.display = 'initial'

2
themes/chameleon/source/svg/link.svg
View File

@ -6,4 +6,4 @@ Permission is hereby granted, free of charge, to any person obtaining a copy of
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
-->
<svg id="link" xmlns="http://www.w3.org/2000/svg" viewBox="15 15 1635 1635"><path d="M1456 1216c0-26-10-50-28-68l-208-208c-18-18-43-28-68-28-29 0-52 11-72 32 33 33 72 61 72 112 0 53-43 96-96 96-51 0-79-39-112-72-21 20-33 43-33 73 0 25 10 50 28 68l206 207c18 18 43 27 68 27s50-9 68-26l147-146c18-18 28-42 28-67zM753 511c0-25-10-50-28-68L519 236c-18-18-43-28-68-28s-50 10-68 27L236 381c-18 18-28 42-28 67 0 26 10 50 28 68l208 208c18 18 43 27 68 27 29 0 52-10 72-31-33-33-72-61-72-112 0-53 43-96 96-96 51 0 79 39 112 72 21-20 33-43 33-73zm895 705c0 76-31 150-85 203l-147 146c-54 54-127 83-203 83-77 0-150-30-204-85l-206-207c-54-54-83-127-83-203 0-79 32-154 88-209l-88-88c-55 56-129 88-208 88-76 0-150-30-204-84L100 652c-55-55-84-127-84-204 0-76 31-150 85-203L248 99c54-54 127-83 203-83 77 0 150 30 204 85l206 207c54 54 83 127 83 203 0 79-32 154-88 209l88 88c55-56 129-88 208-88 76 0 150 30 204 84l208 208c55 55 84 127 84 204z"/></svg>
<svg id="link" xmlns="http://www.w3.org/2000/svg" viewBox="15 15 1635 1635"><path d="M1456 1216c0-26-10-50-28-68l-208-208c-18-18-43-28-68-28-29 0-52 11-72 32 33 33 72 61 72 112 0 53-43 96-96 96-51 0-79-39-112-72-21 20-33 43-33 73 0 25 10 50 28 68l206 207c18 18 43 27 68 27s50-9 68-26l147-146c18-18 28-42 28-67zM753 511c0-25-10-50-28-68L519 236c-18-18-43-28-68-28s-50 10-68 27L236 381c-18 18-28 42-28 67 0 26 10 50 28 68l208 208c18 18 43 27 68 27 29 0 52-10 72-31-33-33-72-61-72-112 0-53 43-96 96-96 51 0 79 39 112 72 21-20 33-43 33-73zm895 705c0 76-31 150-85 203l-147 146c-54 54-127 83-203 83-77 0-150-30-204-85l-206-207c-54-54-83-127-83-203 0-79 32-154 88-209l-88-88c-55 56-129 88-208 88-76 0-150-30-204-84L100 652c-55-55-84-127-84-204 0-76 31-150 85-203L248 99c54-54 127-83 203-83 77 0 150 30 204 85l206 207c54 54 83 127 83 203 0 79-32 154-88 209l88 88c55-56 129-88 208-88 76 0 150 30 204 84l208 208c55 55 84 127 84 204z" fill="#3f72af"/></svg>

8
themes/chameleon/source/svg/search.svg
View File

@ -1,8 +1,2 @@
<!-- Font Awesome Free 5.5.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) -->
<!--
id attribute is added as a workaround for <use> element
<use href="search.svg"/> # does not work
<use href="search.svg#search"/> # working
ref: https://css-tricks.com/svg-use-external-source/
-->
<svg id="search" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"/></svg>
<svg id="search" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z" fill="#3f72af"/></svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 819 B

After

Width:  |  Height:  |  Size: 633 B

2
themes/chameleon/source/svg/share.svg
View File

@ -7,5 +7,5 @@ The above copyright notice and this permission notice shall be included in all c
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
-->
<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"/>
<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" fill="#3f72af"/>
</svg>