Add a copy button

app/templates/layout.html

@@ -4,7 +4,7 @@
         <meta charset="utf-8">
         <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 
-        <script src="{{ url_for('static', path='/index.js') }}" defer></script>
+        <script type="module" src="{{ url_for('static', path='/index.js') }}"></script>
         <link rel="shortcut icon" href="{{ url_for('static', path='images/favicon.ico') }}"/>
         <link rel="stylesheet" href="{{ url_for('static', path='index.css') }}">
 

app/templates/package.html

@@ -75,7 +75,14 @@
       <dd class="col-sm-9"><hr></dd>
 
       <dt class="col-sm-3 text-sm-right">Installation:</dt>
-      <dd class="col-sm-9"><code>pacman -S {{ p.name }}</code></dd>
+      <dd class="col-sm-9">
+        <div class="copyable rounded">
+          <div class="highlight">
+            <pre><code>pacman -S {{ p.name }}</code></pre>
+          </div>
+          <button class="btn" aria-label="Copy to clipboard" onclick="App.copyToClipboard(this);">📋</button>
+        </div>
+      </dd>
 
       <dt class="col-sm-3 text-sm-right">File:</dt>
       <dd class="col-sm-9"> <a href="{{ p.fileurl }}">{{ p.fileurl }}</a></dd>

frontend/index.js

@@ -1,2 +1,18 @@
 import './style.scss';
 import 'bootstrap';
+
+class App {
+
+    static copyToClipboard(button) {
+        let text = button.parentNode.getElementsByTagName("code")[0].innerText
+        if (navigator.clipboard) {
+            navigator.clipboard.writeText(text);
+            let oldInner = button.innerHTML;
+            button.innerHTML = "✅";
+            setTimeout(() => button.innerHTML = oldInner, 1000);
+        }
+    }
+
+};
+
+window.App = App;

frontend/package.json

@@ -1,9 +1,10 @@
 {
   "devDependencies": {
+    "popper.js": "^1.16.1",
     "@rollup/plugin-commonjs": "^16.0.0",
     "@rollup/plugin-node-resolve": "^10.0.0",
     "autoprefixer": "^9.0.0",
-    "bootstrap": "^5.0.0-alpha3",
+    "bootstrap": "5.0.0-alpha3",
     "node-sass": "^5.0.0",
     "rollup": "^2.28.2",
     "rollup-plugin-postcss": "^3.1.8",

frontend/rollup.config.js

@@ -10,7 +10,7 @@ export default {
   input: 'index.js',
   output: {
     file: '../app/static/index.js',
-    format: 'iife'
+    format: 'es',
   },
   plugins: [
     resolve(),

frontend/style.scss

@@ -1,5 +1,4 @@
 $enable-responsive-font-sizes: true;
-
 @import './node_modules/bootstrap/scss/bootstrap';
 
 a {
@@ -15,8 +14,34 @@ a {
     overflow: auto;
 }
 
+.copyable {
+    display: flex;
+    align-items: center;
+    width: max-content;
+    background-color: #eef1f3;
+    border: 1px solid #ccc;
+}
+
+.copyable .btn {
+    border: none;
+    border-left: 1px solid #ccc;
+    border-radius: 0;
+}
+
+.copyable pre {
+    margin: 0;
+    padding: 0 1em;
+    overflow-x: auto;
+}
+
+.copyable .highlight code::before {
+    color: teal;
+    display: inline;
+    content: "$ ";
+}
+
 body {
-    padding-top: 4.45rem;
+  padding-top: 4.45rem;
 }
 
 .navbar {