add copy code button to code blocks

.eleventy.js

@@ -11,6 +11,9 @@ module.exports = function (eleventyConfig) {
   eleventyConfig.addPassthroughCopy({
     "./src/_client_scripts/app_search.js": "/js/app_search.js",
   });
+  eleventyConfig.addPassthroughCopy({
+    "./src/_client_scripts/copy_code.js": "/js/copy_code.js",
+  });
   eleventyConfig.addPassthroughCopy({
     "./src/_client_scripts/bsky_post_likes.js": "/js/bsky_post_likes.js",
   });

src/_client_scripts/copy_code.js

@@ -0,0 +1,9 @@
+const copyButtons = document.querySelectorAll(`[data-copy]`);
+
+copyButtons.forEach((button) => {
+  button.addEventListener("click", (e) => {
+    const codeId = e.target.dataset.copy;
+    const codeAsText = document.querySelector(`[data-code-id=${codeId}]`).dataset.codeToCopy;
+    navigator.clipboard.writeText(decodeURIComponent(codeAsText));
+  });
+});

src/_components/codeBlock.js

@@ -1,8 +1,34 @@
 const HighlightPairedShortcode = require("@11ty/eleventy-plugin-syntaxhighlight/src/HighlightPairedShortcode");
 
+function makeId(length) {
+  let result = "";
+  const characters = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";
+  const charactersLength = characters.length;
+  let counter = 0;
+  while (counter < length) {
+    result += characters.charAt(Math.floor(Math.random() * charactersLength));
+    counter += 1;
+  }
+  return result;
+}
+
 const CodeBlock = ({ code, lang, isDiff }) => {
   const prefix = isDiff ? "diff-" : "";
-  return `<div class="post__codeBlock">${HighlightPairedShortcode(code, `${prefix}${lang}`)}</div>`;
+  const thisCodeId = makeId(10);
+  return /* html */ `
+  <div class="post__codeBlock">
+    <button type="button" class="post__codeBlockCopyButton" data-copy="${thisCodeId}">
+    <svg xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 384 512"><path d="M192 0c-41.8 0-77.4 26.7-90.5 64L64 64C28.7 64 0 92.7 0 128L0 448c0 35.3 28.7 64 64 64l256 0c35.3 0 64-28.7 64-64l0-320c0-35.3-28.7-64-64-64l-37.5 0C269.4 26.7 233.8 0 192 0zm0 64a32 32 0 1 1 0 64 32 32 0 1 1 0-64zM112 192l160 0c8.8 0 16 7.2 16 16s-7.2 16-16 16l-160 0c-8.8 0-16-7.2-16-16s7.2-16 16-16z" fill="currentColor" /></svg>
+    <span>
+      Copy
+    </span>
+    </button>
+    <div data-code-block>
+      ${HighlightPairedShortcode(code, `${prefix}${lang}`)}
+    </div>
+  </div>
+  <meta data-code-id="${thisCodeId}" data-code-to-copy="${encodeURIComponent(code)}">
+  `;
 };
 
 module.exports = CodeBlock;

src/_sass/_post.scss

@@ -188,6 +188,33 @@
 .post__codeBlock {
   margin-bottom: 2rem;
   margin-top: 2rem;
+  position: relative;
+}
+
+.post__codeBlockCopyButton {
+  position: absolute;
+  top: 0;
+  right: 0;
+  padding: 0.5rem;
+  display: flex;
+  gap: 0.5rem;
+  justify-content: space-between;
+  font-size: 1.25rem;
+  @include font.font_main;
+  color: var(--black);
+  border-radius: 0 var(--border-radius-base) 0 0;
+  background: var(--white);
+
+  svg,
+  span {
+    pointer-events: none;
+  }
+}
+
+.post__codeBlockCopyButton:focus-visible,
+.post__codeBlockCopyButton:active,
+.post__codeBlockCopyButton:focus-visible:focus {
+  @include utils.link_focus;
 }
 
 .post__blockquote {

src/blog/blog-pages.11ty.js

@@ -100,9 +100,7 @@ exports.render = async function (data) {
             })}
             <div style="visibility: hidden; height: 0;">
               <a class="p-author h-card" href="https://whitep4nth3r.com/">Salma Alam-Naylor</a>
-              <a class="u-url" href="${`https://whitep4nth3r.com/blog/${data.post.slug}/`}">${
-    post.title
-  }</a>
+              <a class="u-url" href="${`https://whitep4nth3r.com/blog/${data.post.slug}/`}">${post.title}</a>
               <img class="u-photo" src="https://images.ctfassets.net/56dzm01z6lln/69YokY1TvGVk37gCQmQJDo/c315f0996556c9c1f276d12d5f201a76/headshot_relaxed.png"/>
             </div>
           </div>
@@ -167,9 +165,7 @@ exports.render = async function (data) {
                 </div>
                 <div class="post__relatedGrid">
                   ${post.relatedPostsCollection.items
-                    .map((post) =>
-                      Card({ item: { ...post, type: "post" }, showType: false, lazyLoad: true }),
-                    )
+                    .map((post) => Card({ item: { ...post, type: "post" }, showType: false, lazyLoad: true }))
                     .join("")}
                 </div>
               </div>`
@@ -185,5 +181,6 @@ exports.render = async function (data) {
     </section>
     <meta data-bsky-post-id="${post.blueskyPostId}" />
     <script src="/js/bsky_post_likes.js" type="module"></script>
+    <script src="/js/copy_code.js"></script>
     `;
 };