feat: add 'Copy Link' button to each page

layouts/page/about.html

@@ -2,6 +2,8 @@
 
 {{ partial "site_logo.html" . }}
 
+{{ partial "share.html" . }}
+
 <section>
     <div class="about-content">
 

themes/kaigi/assets/app.css

@@ -599,6 +599,14 @@
   }
 
   .about-content img {
-    width: 100%;
+    @apply w-full;
+  }
+
+  .btn-share::before {
+    @apply mb-1 mr-3 inline-block h-6 w-6 bg-white align-middle;
+
+    content: '';
+    mask: url('./icons/link.svg') no-repeat 50% 50%;
+    mask-size: cover;
   }
 }

themes/kaigi/layouts/events/single.html.html

@@ -3,7 +3,9 @@
 <article>
     {{ partial "site_logo.html" . }}
 
-    {{ partial "event_rsvp_live_stream" . }}
+    {{ partial "share.html" . }}
+
+    {{ partial "event_rsvp_live_stream.html" . }}
 
     <header class="my-8">
         <div>
@@ -37,7 +39,7 @@ <h2>{{ i18n "description" }}</h2>
             {{ .Content }}
 
             <div class="mt-8">
-                {{ partial "event_rsvp_live_stream" . }}
+                {{ partial "event_rsvp_live_stream.html" . }}
             </div>
 
             {{ partial "giscus_section.html" . }}

themes/kaigi/layouts/partials/footer.html

@@ -23,6 +23,10 @@
     </div>
 
     <script>
+        ////////////////
+        // Theme
+        ////////////////
+
         // base
         const htmlClass = document.documentElement.classList;
         setTimeout(() => {
@@ -76,5 +80,27 @@
         btnDark.addEventListener('click', () => {
             setDark(sessionStorage.getItem('dark') !== 'true');
         });
+
+        ////////////////
+        // Share
+        ////////////////
+        if (navigator && navigator.clipboard) {
+            var button = document.getElementById("share-btn");
+
+            button.addEventListener('click', function () {
+                navigator.clipboard.writeText(window.location.href).then(function () {
+                    button.blur();
+
+                    var oldInnerText = button.innerText;
+                    button.innerText = 'Copied!';
+
+                    setTimeout(function () {
+                        button.innerText = oldInnerText;
+                    }, 2000);
+                }, function (err) {
+                    console.log(err);
+                });
+            });
+        }
     </script>
 </footer>

themes/kaigi/layouts/partials/share.html

@@ -0,0 +1,7 @@
+<div>
+    <div class="mt-4">
+        <button id="share-btn" class="btn-primary btn-share">
+            <span>Copy Link</span>
+        </button>
+    </div>
+</div>