feat: wire up copy button

docs/index.html

@@ -57,6 +57,11 @@
       }
     </script>
 
+    <script>
+      // eslint-disable-next-line no-useless-escape
+      window.navigator.clipboard || document.write('<script src="https://unpkg.com/clipboard-polyfill@2.8.6/dist/clipboard-polyfill.promise.js"><\/script>')
+    </script>
+
     <!-- Use bright favicons when the browser is in dark mode. -->
     <script type="module">
       import faviconSwitcher from 'https://unpkg.com/favicon-mode-switcher@1.0.4/dist/index.min.mjs'
@@ -117,7 +122,8 @@
     <div id="installation">
       <header class="row version-select-snippet">
         <h3>Paste this into the <code>&lt;head&gt;</code> of your HTML:</h3>
-        <button type="button" id="copy-snippet">
+        <button type="button" id="copy-button">
+          <span id="copy-button-feedback" class="emoji"></span>
           Copy to clipboard
         </button>
       </header>

docs/script.js

@@ -12,6 +12,8 @@ const themeForm = document.getElementById('theme-form')
 const stylesheet = document.getElementById('js-stylesheet')
 const startupStylesheet = document.getElementById('js-startup-stylesheet')
 const productHunt = document.getElementById('product-hunt')
+const copyButton = document.getElementById('copy-button')
+const copyButtonFeedback = document.getElementById('copy-button-feedback')
 const linkSnippets = [].slice.call(document.querySelectorAll('#link-snippet-container > pre'))
 
 const table = {
@@ -70,3 +72,14 @@ prefersColorScheme.addListener(() => {
 
 updateTheme()
 startupStylesheet.parentElement.removeChild(startupStylesheet)
+
+copyButton.addEventListener('click', () => {
+  const clipboard = navigator.clipboard || window.clipboard
+  const theme = themeForm.querySelector('input[name="theme"]:checked').value
+  const snippetText = document.querySelector(`#link-snippet-${theme} code`).textContent
+
+  clipboard.writeText(snippetText)
+    .then(() => { copyButtonFeedback.textContent = '✔' })
+    .catch(() => { copyButtonFeedback.textContent = '❌' })
+    .then(() => setTimeout(() => { copyButtonFeedback.textContent = '' }, 1000))
+})

docs/style.css

@@ -11,13 +11,13 @@ html {
 }
 
 /* Make the ✔ / ❌ Emoji appear next to the button */
-#copy-snippet {
+#copy-button {
   position: relative;
   margin-right: 2px;
   overflow: visible;
 }
 
-#copy-snippet span {
+#copy-button-feedback {
   position: absolute;
   left: -2rem;
   display: inline-block;