Code block copy

Author: weareoutman

global.d.ts

@@ -0,0 +1,9 @@
+declare module '*.css' {
+  const content: string;
+  export default content;
+}
+
+declare module '*.svg' {
+  const content: string;
+  export default content;
+}

jsconfig.json

@@ -8,6 +8,7 @@
     "plain-blog/src/**/*",
     "plain-blog/lib/**/*",
     "plain-blog/index.d.ts",
-    "website/src/**/*"
+    "website/src/**/*",
+    "global.d.ts"
   ]
 }

website/plain.config.js

@@ -32,4 +32,10 @@ export default {
     // Also some local css files
     "src/styles.css",
   ],
+  scripts: [
+    "src/cp-pre/cp-pre.js",
+  ],
+  elementTransforms: {
+    pre: "cp-pre",
+  },
 }

website/src/cp-pre/check.svg

@@ -0,0 +1,30 @@
+:host {
+  display: block;
+  position: relative;
+  white-space: pre;
+  overflow-x: auto;
+  font-family: var(--font-monospace);
+}
+
+button {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  padding: 6px 8px;
+  border: none;
+  border-radius: 4px;
+  background-color: rgba(0, 0, 0, 0.1);
+  color: var(--text-color);
+  cursor: pointer;
+  font-size: 12px;
+  opacity: 0;
+  transition: opacity 0.2s;
+}
+
+:host(:hover) button {
+  opacity: 1;
+}
+
+button:hover {
+  background-color: rgba(0, 0, 0, 0.2);
+}

website/src/cp-pre/copy.svg

@@ -0,0 +1,35 @@
+// @ts-check
+import CpPreCss from "./cp-pre.css";
+import CopyIcon from "./copy.svg";
+import CheckIcon from "./check.svg";
+
+class CpPre extends HTMLElement {
+  /** @type {HTMLButtonElement} */
+  _button;
+
+  constructor() {
+    super();
+
+    const shadowRoot = this.attachShadow({ mode: "open" });
+    shadowRoot.innerHTML = `<style>${CpPreCss}</style><button>${CopyIcon}</button><slot></slot>`;
+
+    this._button = shadowRoot.querySelector("button");
+  }
+
+  _clickHandler = () => {
+    const code = this.querySelector("code");
+    navigator.clipboard.writeText(code?.textContent || "");
+    this._button.innerHTML = CheckIcon;
+    setTimeout(() => (this._button.innerHTML = CopyIcon), 2000);
+  };
+
+  connectedCallback() {
+    this._button.addEventListener("click", this._clickHandler);
+  }
+
+  disconnectedCallback() {
+    this._button.removeEventListener("click", this._clickHandler);
+  }
+}
+
+customElements.define("cp-pre", CpPre);

website/src/cp-pre/cp-pre.css

@@ -3,6 +3,7 @@ html {
   --text-color: rgb(69, 79, 91);
   --background-color: rgb(255, 255, 255);
   --muted-color: rgb(230, 230, 230);
+  --font-monospace: ui-monospace,"Menlo","Consolas","Roboto Mono","Ubuntu Monospace","Noto Mono","Oxygen Mono","Liberation Mono",monospace,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
 
   background-color: var(--background-color);
   color: var(--text-color);
@@ -91,7 +92,7 @@ article > p > img {
   margin-right: auto;
 }
 
-:not(pre) > code {
+:not(pre):not(cp-pre) > code {
   background-color: var(--muted-color);
   padding: .125em .25em .125em;
   border-radius: 0.25em;
@@ -103,6 +104,14 @@ article > p > img {
   box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
 }
 
+cp-pre {
+  display: block;
+  position: relative;
+  white-space: pre;
+  overflow-x: auto;
+  font-family: var(--font-monospace);
+}
+
 @media screen and (max-width: 996px) {
   main > nav {
     display: none;