code copying functionality on code listings

Author: Jesse Haigh

src/components/ContentNode/CodeListing.vue

@@ -22,6 +22,7 @@
     >{{ fileName }}
     </Filename>
     <div class="container-general">
+      <button class="copy-button" @click="copyToClipboard">Copy</button>
       <!-- Do not add newlines in <pre>, as they'll appear in the rendered HTML. -->
       <pre><CodeBlock><template
         v-for="(line, index) in syntaxHighlightedLines"
@@ -122,6 +123,13 @@ export default {
         line === '' ? '\n' : line
       ));
     },
+    copyToClipboard() {
+      const lines = this.content;
+      const text = lines.join('\n');
+      navigator.clipboard.writeText(text)
+        .then(() => console.log('Copied!'))
+        .catch(err => console.error('Failed to copy: ', err));
+    },
   },
 };
 </script>