Match new file structure

Author: dancormier

docs/.eleventy.js

@@ -6,6 +6,7 @@ const highlightPlugin = require("./plugins/highlight");
 const iconPlugin = require("./plugins/icons");
 const tipPlugin = require("./plugins/tip");
 const markdownPlugin = require("./plugins/markdown");
+const copyButtonPlugin = require("./plugins/copy-button");
 
 module.exports = function(eleventyConfig) {
   eleventyConfig.setQuietMode(true); // Reduce the console output
@@ -15,31 +16,7 @@ module.exports = function(eleventyConfig) {
   eleventyConfig.addPlugin(iconPlugin);
   eleventyConfig.addPlugin(headerPlugin);
   eleventyConfig.addPlugin(tipPlugin);
-
-  // Copy button shortcode
-  eleventyConfig.addLiquidShortcode("copybutton", function(name) {
-    var tooltipId = "tooltip-" + (name || Math.floor(Math.random() * 1000));
-
-    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;
-  });
+  eleventyConfig.addPlugin(copyButtonPlugin);
 
   // Version shortcode
   eleventyConfig.addLiquidShortcode("version", function() {

docs/assets/js/controllers/clipboard.ts

@@ -1,3 +1,5 @@
+import * as Stimulus from "stimulus";
+
 (function(){
     var application = Stimulus.Application.start();
     application.register("clipboard", class extends Stimulus.Controller {

docs/assets/js/index.ts

@@ -1,5 +1,6 @@
 import "../../../lib/ts/index";
 import "../less/stacks-documentation.less";
+import "./controllers/clipboard";
 import "./controllers/docs-resizer";
 import * as Stacks from "../../../lib/ts/index";
 

docs/plugins/copy-button.js

@@ -0,0 +1,29 @@
+const { default: Icons } = require("@stackoverflow/stacks-icons");
+
+module.exports = {
+    configFunction(eleventyConfig) {
+      eleventyConfig.addLiquidShortcode("copybutton", function(name) {
+        var tooltipId = "tooltip-" + (name || Math.floor(Math.random() * 1000));
+
+        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;
+      });
+  }
+}