add copy button

Author: Thierry Boileau

.tool-versions

@@ -0,0 +1 @@
+nodejs 16.14.0

assets/js/copy-to-clipboard/icons.js

@@ -0,0 +1,15 @@
+/**
+ * The regular "copy" icon from Font Awesome.
+ * https://fontawesome.com/icons
+ *
+ * @var {string}
+ */
+export const faCopyRegular = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.7.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M384 336l-192 0c-8.8 0-16-7.2-16-16l0-256c0-8.8 7.2-16 16-16l140.1 0L400 115.9 400 320c0 8.8-7.2 16-16 16zM192 384l192 0c35.3 0 64-28.7 64-64l0-204.1c0-12.7-5.1-24.9-14.1-33.9L366.1 14.1c-9-9-21.2-14.1-33.9-14.1L192 0c-35.3 0-64 28.7-64 64l0 256c0 35.3 28.7 64 64 64zM64 128c-35.3 0-64 28.7-64 64L0 448c0 35.3 28.7 64 64 64l192 0c35.3 0 64-28.7 64-64l0-32-48 0 0 32c0 8.8-7.2 16-16 16L64 464c-8.8 0-16-7.2-16-16l0-256c0-8.8 7.2-16 16-16l32 0 0-48-32 0z"/></svg>`
+
+/**
+ * The solid "copy" icon from Font Awesome.
+ * https://fontawesome.com/icons
+ *
+ * @var {string}
+ */
+export const faCopySolid = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.7.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M208 0L332.1 0c12.7 0 24.9 5.1 33.9 14.1l67.9 67.9c9 9 14.1 21.2 14.1 33.9L448 336c0 26.5-21.5 48-48 48l-192 0c-26.5 0-48-21.5-48-48l0-288c0-26.5 21.5-48 48-48zM48 128l80 0 0 64-64 0 0 256 192 0 0-32 64 0 0 48c0 26.5-21.5 48-48 48L48 512c-26.5 0-48-21.5-48-48L0 176c0-26.5 21.5-48 48-48z"/></svg>`

assets/js/copy-to-clipboard/index.js

@@ -0,0 +1,39 @@
+import ClipboardJS from 'clipboard';
+import * as icons from './icons.js'
+
+/**
+ * Adds a copy-to-clipboard button to each container element as its first
+ * child. The copy target is the button element's next sibling.
+ *
+ * @param   {string}  containerClass  One of the classes in the container elements's class attribute.
+ * @param   {string}  [buttonClass=copy-button]     The button element's class attribute.
+ *
+ * @return  {void}
+ */
+function addCopyToClipboardButtons(containerClass, buttonClass = 'copy-button') {
+  const containers = document.querySelectorAll(`.${containerClass}`);
+
+  containers.forEach(container => {
+    container.insertAdjacentHTML('afterbegin', `<button class="${buttonClass}">${icons.faCopyRegular}</button>`);
+  });
+
+  const clipboard = new ClipboardJS(`.${buttonClass}`, {
+    target: function(trigger) {
+      return trigger.nextElementSibling;
+    }
+  });
+
+  clipboard.on('success', (e) => {
+    if (e.action == 'copy') {
+      setTimeout(() => {
+        e.clearSelection();
+      }, 1300);
+    }
+  });
+
+  clipboard.on('error', (e) => {
+    console.error('ClipboardJS Error:', e.action, e.trigger);
+  });
+}
+
+export { addCopyToClipboardButtons }

assets/js/main.js

@@ -0,0 +1,5 @@
+import { addCopyToClipboardButtons } from './copy-to-clipboard';
+
+document.addEventListener('DOMContentLoaded', function() {
+  addCopyToClipboardButtons('highlight');
+})

assets/jsconfig.json

@@ -0,0 +1,10 @@
+{
+ "compilerOptions": {
+  "baseUrl": ".",
+  "paths": {
+   "*": [
+    "*"
+   ]
+  }
+ }
+}

assets/_base/_config.scss renamed to assets/sass/_base/_config.scss

@@ -493,8 +493,7 @@ pre code {
   }
 }
 
-.download,
-.downloads-past {
+.download {
   select {
     appearance: none;
     background-image: url(../images/shared/select-toggle.png);
@@ -518,41 +517,10 @@ pre code {
   }
 }
 
-.downloads-past {
-  svg {
-    max-width: 316px;
-  }
-
-  form {
-    max-width: 215px;
-
-    .m-button {
-      margin-bottom: 20px;
-    }
-
-    p {
-      margin-bottom: 17px;
-    }
-  }
-
-  p>small {
-    color: $mako;
-  }
-}
-
 .framework-index  {
 
   .icon-block {
     padding: 0 0 30px;
-
-    svg {
-      width: 187px;
-      height: auto;
-      &.larger {
-        width: 235px;
-        height: auto;
-      }
-    }
   }
 }