Use template string for copy button

Addresses #883 (comment)

Author: dancormier

docs/.eleventy.js

@@ -136,29 +136,25 @@ module.exports = function(eleventyConfig) {
 
   // Copy button shortcode
   eleventyConfig.addLiquidShortcode("copybutton", function(name) {
-    var checkmarkIcon = Icons["Checkmark"];
-    var copyIcon = Icons["Copy"];
     var tooltipId = "tooltip-" + (name || Math.floor(Math.random() * 1000));
 
-    var output = '';
-    output += '<button'
-    output += ' class="s-btn s-btn__muted s-btn__icon ps-absolute t8 r8"';
-    output += ' data-action="clipboard#copy"';
-    output += ' data-s-tooltip-placement="top"';
-    output += ' data-controller="s-tooltip"';
-    output += ' aria-describedby="' + tooltipId + '"';
-    output += '>';
-    output +=  '<span class="d-none" data-show-on-copy>' + checkmarkIcon + '</span>';
-    output +=  '<span data-hide-on-copy>' + copyIcon + '</span>';
-    output += '</button>'
-    output += '<div class="s-popover s-popover__tooltip"';
-    output += ' id="' + tooltipId + '"';
-    output += ' role="tooltip"';
-    output += ' aria-hidden="true">';
-    output +=   '<div class="s-popover--arrow"></div>';
-    output +=   '<span class="d-none" data-show-on-copy>Copied</span>';
-    output +=   '<span data-hide-on-copy>Copy</span>';
-    output += '</div>';
+    var output = `<button
+      class="s-btn s-btn__muted s-btn__icon ps-absolute t8 r8"
+      data-action="clipboard#copy"
+      data-s-tooltip-placement="top"
+      data-controller="s-tooltip"
+      aria-describedby="${tooltipId}">
+        <span class="d-none" data-show-on-copy>${Icons["Checkmark"]}</span>
+        <span data-hide-on-copy>${Icons["Copy"]}</span>
+    </button>
+    <div class="s-popover s-popover__tooltip"
+      id="${tooltipId}"
+      role="tooltip"
+      aria-hidden="true">
+        <div class="s-popover--arrow"></div>
+        <span class="d-none" data-show-on-copy>Copied</span>
+        <span data-hide-on-copy>Copy</span>
+    </div>`;
 
     return output;
   });