Merge branch 'img-svg' into 'master'

fix(svg): <use> element no longer allows path See merge request curben/blog!29
2021-11-18 11:00:50 +00:00 · 2021-11-18 11:00:50 +00:00 · 69cc9fccc5
parent 4e5867054c 2154d9658d
commit 69cc9fccc5
11 changed files with 39 additions and 57 deletions
--- a/source/_headers
+++ b/source/_headers
@ -1,5 +1,5 @@
 /*
-  Content-Security-Policy: default-src 'self'; child-src 'none'; connect-src 'none'; font-src 'none'; frame-src 'none'; img-src 'self'; manifest-src 'none'; media-src 'none'; object-src 'none'; prefetch-src 'none'; script-src 'self'; style-src 'self'; worker-src 'none'; base-uri 'none'; form-action https://duckduckgo.com https://duckduckgogg42xjoc72x3sjasowoarfbgcmvfimaftt6twagswzczad.onion; frame-ancestors 'none'; block-all-mixed-content; sandbox allow-forms allow-scripts
+  Content-Security-Policy: default-src 'self'; child-src 'none'; connect-src 'none'; font-src 'none'; frame-src 'none'; img-src 'self'; manifest-src 'self'; media-src 'none'; object-src 'none'; prefetch-src 'none'; script-src 'self'; style-src 'self'; worker-src 'none'; base-uri 'none'; form-action https://duckduckgo.com https://duckduckgogg42xjoc72x3sjasowoarfbgcmvfimaftt6twagswzczad.onion; frame-ancestors 'none'; block-all-mixed-content; sandbox allow-forms allow-scripts
  Expires: 0
  Feature-Policy: accelerometer 'none'; ambient-light-sensor 'none'; autoplay 'none'; camera 'none'; display-capture 'none'; document-domain 'none'; encrypted-media 'none'; fullscreen 'none'; geolocation 'none'; gyroscope 'none'; magnetometer 'none'; microphone 'none'; midi 'none'; payment 'none'; picture-in-picture 'none'; speaker 'none'; sync-xhr 'none'; usb 'none'; vibrate 'none'; vr 'none'; wake-lock 'none'; webauthn 'none'; xr-spatial-tracking 'none'; interest-cohort=()
  Permissions-Policy: accelerometer 'none'; ambient-light-sensor 'none'; autoplay 'none'; camera 'none'; display-capture 'none'; document-domain 'none'; encrypted-media 'none'; fullscreen 'none'; geolocation 'none'; gyroscope 'none'; magnetometer 'none'; microphone 'none'; midi 'none'; payment 'none'; picture-in-picture 'none'; speaker 'none'; sync-xhr 'none'; usb 'none'; vibrate 'none'; vr 'none'; wake-lock 'none'; webauthn 'none'; xr-spatial-tracking 'none'; interest-cohort=()
--- a/source/_posts/caddy-nixos-part-3.md
+++ b/source/_posts/caddy-nixos-part-3.md
@ -385,7 +385,7 @@ The upstream locations insert some information into the response headers that ar
    -x-nf-request-id
    -x-served-by
    -x-timer
-    Content-Security-Policy "default-src 'self'; child-src 'none'; connect-src 'none'; font-src 'none'; frame-src 'none'; img-src 'self'; manifest-src 'none'; media-src 'none'; object-src 'none'; prefetch-src 'none'; script-src 'self'; style-src 'self'; worker-src 'none'; base-uri 'none'; form-action https://duckduckgo.com https://duckduckgogg42xjoc72x3sjasowoarfbgcmvfimaftt6twagswzczad.onion; frame-ancestors 'none'; block-all-mixed-content"
+    Content-Security-Policy "default-src 'self'; child-src 'none'; connect-src 'none'; font-src 'none'; frame-src 'none'; img-src 'self'; manifest-src 'self'; media-src 'none'; object-src 'none'; prefetch-src 'none'; script-src 'self'; style-src 'self'; worker-src 'none'; base-uri 'none'; form-action https://duckduckgo.com https://duckduckgogg42xjoc72x3sjasowoarfbgcmvfimaftt6twagswzczad.onion; frame-ancestors 'none'; block-all-mixed-content"
    Expires "0"
    Permissions-Policy "accelerometer 'none'; ambient-light-sensor 'none'; autoplay 'none'; camera 'none'; display-capture 'none'; document-domain 'none'; encrypted-media 'none'; fullscreen 'none'; geolocation 'none'; gyroscope 'none'; magnetometer 'none'; microphone 'none'; midi 'none'; payment 'none'; picture-in-picture 'none'; speaker 'none'; sync-xhr 'none'; usb 'none'; vibrate 'none'; vr 'none'; wake-lock 'none'; webauthn 'none'; xr-spatial-tracking 'none'; interest-cohort=()"
    Referrer-Policy "no-referrer"
@ -500,7 +500,7 @@ Since I also set up reverse proxy for {% post_link tor-hidden-onion-nixos 'Tor O
  -x-timer
  -x-ua-compatible
  Cache-Control "max-age=86400, public"
-  Content-Security-Policy "default-src 'self'; child-src 'none'; connect-src 'none'; font-src 'none'; frame-src 'none'; img-src 'self'; manifest-src 'none'; media-src 'none'; object-src 'none'; prefetch-src 'none'; script-src 'self'; style-src 'self'; worker-src 'none'; base-uri 'none'; form-action https://duckduckgo.com https://duckduckgogg42xjoc72x3sjasowoarfbgcmvfimaftt6twagswzczad.onion; frame-ancestors 'none'; block-all-mixed-content"
+  Content-Security-Policy "default-src 'self'; child-src 'none'; connect-src 'none'; font-src 'none'; frame-src 'none'; img-src 'self'; manifest-src 'self'; media-src 'none'; object-src 'none'; prefetch-src 'none'; script-src 'self'; style-src 'self'; worker-src 'none'; base-uri 'none'; form-action https://duckduckgo.com https://duckduckgogg42xjoc72x3sjasowoarfbgcmvfimaftt6twagswzczad.onion; frame-ancestors 'none'; block-all-mixed-content"
  Expires "0"
  Permissions-Policy "accelerometer 'none'; ambient-light-sensor 'none'; autoplay 'none'; camera 'none'; display-capture 'none'; document-domain 'none'; encrypted-media 'none'; fullscreen 'none'; geolocation 'none'; gyroscope 'none'; magnetometer 'none'; microphone 'none'; midi 'none'; payment 'none'; picture-in-picture 'none'; speaker 'none'; sync-xhr 'none'; usb 'none'; vibrate 'none'; vr 'none'; wake-lock 'none'; webauthn 'none'; xr-spatial-tracking 'none'; interest-cohort=()"
  Referrer-Policy "no-referrer"
--- a/themes/chameleon/layout/_partial/header.ejs
+++ b/themes/chameleon/layout/_partial/header.ejs
@ -8,18 +8,14 @@
    <% }} %>

    <div class="search-container">
-      <form id="searchForm" method="post" action="https://duckduckgo.com/" target="_blank" rel="noopener external nofollow noreferrer">
+      <form id="searchForm" method="post" action="https://duckduckgo.com/" rel="noopener external nofollow noreferrer">
      <input type="text" name="q" class="search-box" placeholder="Search..." title="Powered by DuckDuckGo">
      <input type="hidden" name="sites" value="<%- config.url.replace(/^http(s)?:\/\//, '') %>">
      <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>
@ -32,18 +28,14 @@
    <input id="mobile-menu-toggle" type="checkbox"/>
    <ul id="mobile-nav-link">
      <div class="search-container">
-        <form id="searchFormMob" method="post" action="https://duckduckgo.com/" target="_blank" rel="noopener external nofollow noreferrer">
+        <form id="searchFormMob" method="post" action="https://duckduckgo.com/" rel="noopener external nofollow noreferrer">
        <input type="text" name="q" class="search-box" placeholder="Search..." title="Powered by DuckDuckGo">
        <input type="hidden" name="sites" value="<%- config.url.replace(/^http(s)?:\/\//, '') %>">
        <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>
--- a/themes/chameleon/layout/_partial/post/title.ejs
+++ b/themes/chameleon/layout/_partial/post/title.ejs
@ -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>
  <% } %>
--- 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 = '<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 })
--- a/themes/chameleon/source/css/_source.css
+++ b/themes/chameleon/source/css/_source.css
@ -732,26 +732,26 @@ svg#share:hover {

 /* hide share button by default
 unhide (via JS) if Web Share API is supported */
-.article-title a#share-button {
+.article-title a#btnshare {
  display: none;
 }

-.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;
+  height: 1em;
+  width: 1em;
 }

-/* 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);
+.article .article-entry a.headerlink {
+  display: inline-block;
 }

@media (max-width: 768px) {
--- a/themes/chameleon/source/css/chameleon.css
+++ b/themes/chameleon/source/css/chameleon.css
@ -1052,26 +1052,26 @@ svg#share:hover {

 /* hide share button by default
 unhide (via JS) if Web Share API is supported */
-.article-title a#share-button {
+.article-title a#btnshare {
  display: none;
 }

-.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;
+  height: 1em;
+  width: 1em;
 }

-/* 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);
+.article .article-entry a.headerlink {
+  display: inline-block;
 }

@media (max-width: 768px) {
--- a/themes/chameleon/source/js/chameleon.js
+++ b/themes/chameleon/source/js/chameleon.js
@ -29,10 +29,10 @@ 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'
+  shareBtn.style.display = 'inline-block'

  shareBtn.addEventListener('click', async () => {
    const query = (selector) => {
--- a/themes/chameleon/source/svg/link.svg
+++ b/themes/chameleon/source/svg/link.svg
@ -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>
--- a/themes/chameleon/source/svg/search.svg
+++ b/themes/chameleon/source/svg/search.svg
@ -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>
--- a/themes/chameleon/source/svg/share.svg
+++ b/themes/chameleon/source/svg/share.svg
@ -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>