Add "Copy to clipboard" button.

.gitignore

@@ -5,6 +5,7 @@ assets/assets
 /resources
 .python-version
 .vscode
+.idea
 
 .vercel
 .env

package.json

@@ -25,6 +25,7 @@
     "@rollup/plugin-eslint": "^8.0.1",
     "@rollup/plugin-node-resolve": "^13.0.0",
     "@rollup/plugin-replace": "^4.0.0",
+    "rollup-plugin-svg-import": "^1.6.0",
     "algoliasearch": "^4.9.1",
     "atomic-algolia": "^0.3.19",
     "autoprefixer": "^10.2.5",

rollup.config.js

@@ -5,6 +5,7 @@ import eslint from "@rollup/plugin-eslint"
 import { terser } from "rollup-plugin-terser"
 import postcss from "rollup-plugin-postcss"
 import replace from "@rollup/plugin-replace"
+import svg from "rollup-plugin-svg-import"
 
 import path from "path"
 
@@ -38,6 +39,9 @@ const dev = {
       configFile: path.resolve(__dirname, "babel.config.json"),
       babelHelpers: "bundled",
     }),
+    svg({
+      stringify: true,
+    }),
   ],
 }
 
@@ -72,6 +76,9 @@ const prod = {
       babelHelpers: "bundled",
     }),
     terser(),
+    svg({
+      stringify: true,
+    }),
   ],
 }
 

src/app.js

@@ -9,8 +9,10 @@ import SelectController from "./js/controllers/select_controller"
 import ModeSwitchController from "./js/controllers/mode_switch_controller"
 import FlyoverController from "./js/controllers/flyover_controller"
 import TabsController from "./js/controllers/tabs_controller"
+import ClipboardController from "./js/controllers/clipboard_controller"
 
 const application = Application.start()
+application.register("clipboard", ClipboardController)
 application.register("transition", TransitionController)
 application.register("click-outside", ClickOutsideController)
 application.register("menu", MenuController)

src/css/_clipboard.css

@@ -0,0 +1,37 @@
+.clipboard-button {
+  position: absolute;
+  right: 0;
+  padding: 2px 7px 5px 7px;
+  margin: 5px;
+  color: rgb(14 165 233 / var(--tw-border-opacity));
+  --tw-border-opacity: 0.4;
+  background-color: rgb(186 230 253 / var(--tw-bg-opacity));
+  --tw-bg-opacity: 0.1;
+  border: 1px solid rgb(14 165 233 / var(--tw-border-opacity));
+  border-radius: 6px;
+  font-size: 0.8em;
+  z-index: 10;
+  opacity: 0.5;
+  transition: 0.1s;
+}
+.clipboard-button > svg {
+  fill: rgb(208 212 252 / var(--tw-text-opacity));
+}
+.clipboard-button:hover {
+  cursor: pointer;
+  border-color: #696969;
+  background-color: #e0e0e0;
+}
+.clipboard-button:hover > svg {
+  fill: #696969;
+}
+.clipboard-button:focus {
+  outline: 0;
+}
+.highlight {
+  position: relative;
+}
+.highlight:hover > .clipboard-button {
+  opacity: 1;
+  transition: 0.2s;
+}

src/css/app.css

@@ -1,11 +1,12 @@
 @import "tailwindcss/base";
 @import "tailwindcss/components";
 @import "tailwindcss/utilities";
-@import "./_fonts";
-@import "./_base";
-@import "./_components";
-@import "./_content";
+@import "./_fonts.css";
+@import "./_base.css";
+@import "./_components.css";
+@import "./_content.css";
 @import "./_docs.css";
 @import "./_windows.css";
-@import "./_highlight";
+@import "./_highlight.css";
 @import "./_search.css";
+@import "./_clipboard.css";

src/js/controllers/clipboard_controller.js

@@ -0,0 +1,28 @@
+import checkmark from "../../../static/images/checkmark.svg"
+import copyIcon from "../../../static/images/content_copy.svg"
+import { Controller } from "stimulus"
+
+export default class extends Controller {
+  initialize() {
+    document
+      .querySelectorAll("div.clipboard > div.highlight > pre")
+      .forEach((codeBlock) => {
+        const button = document.createElement("button")
+        button.className = "clipboard-button"
+        button.type = "button"
+        button.title = "Copy to clipboard"
+        button.innerHTML = copyIcon
+        button.addEventListener("click", () => {
+          navigator.clipboard.writeText(codeBlock.innerText).then(
+            () => {
+              button.blur()
+              button.innerHTML = checkmark
+              setTimeout(() => (button.innerHTML = copyIcon), 2000)
+            },
+            () => (button.innerHTML = "Error")
+          )
+        })
+        codeBlock.parentNode.insertBefore(button, codeBlock)
+      })
+  }
+}

themes/poetry/layouts/docs/single.html

@@ -117,8 +117,6 @@
                       class="bg-secondary-400 flex-shrink-0 inline-block h-2 w-2 mr-2 rounded-full dark:bg-indigo-300"
                     ></span>
                   {{ end }}
-
-
                   <span class="flex-grow font-medium inline-block truncate">
                     {{ index (split .Name "|") 0 -}}
                   </span>
@@ -134,6 +132,7 @@
       <main
         id="docs"
         class="min-w-0 w-full lg:px-12 lg:flex-auto lg:static lg:max-h-full lg:overflow-visible"
+        data-controller="clipboard"
       >
         <h1 class="doc-title">{{ index (split .Name "|") 0 -}}</h1>
         {{ .TableOfContents }}

themes/poetry/layouts/shortcodes/clipboard.html

@@ -0,0 +1,3 @@
+<div class="clipboard">
+  {{ printf "%s" .Inner | markdownify }}
+</div>