Add language and clipboard buttons to code blocks

static/src/js/base.js

@@ -59,6 +59,24 @@ window.addEventListener("load", () => {
     endAudio: elevatorButton.dataset.endAudio,
     preloadAudio: false,
   });
+
+  document.querySelectorAll(".block-code").forEach((codeBlock) => {
+    const clipboardIcon = codeBlock.querySelector(".code-copy");
+    clipboardIcon.addEventListener("click", (event) => {
+      event.preventDefault();
+      navigator.clipboard
+        .writeText(codeBlock.querySelector("pre").textContent)
+        .then(() => {
+          clipboardIcon.classList.remove("fa-regular", "fa-clipboard");
+          clipboardIcon.classList.add("fa-solid", "fa-check");
+
+          setTimeout(() => {
+            clipboardIcon.classList.add("fa-regular", "fa-clipboard");
+            clipboardIcon.classList.remove("fa-solid", "fa-check");
+          }, 3000);
+        });
+    });
+  });
 });
 
 window.addEventListener("DOMContentLoaded", () => {

static/src/scss/_blocks.scss

@@ -54,11 +54,31 @@ div.block-mermaid {
   }
 }
 
-div.block-code .highlight {
+div.block-code {
-  pre,
+  .filename {
-  span,
+    font-family: $family-code;
-  & {
+    background-color: $grey-lighter;
-    @include dark-mode;
+    font-size: 1rem;
+    position: relative;
+    text-align: right;
+    transform: translateY(100%) translateX(-100%);
+    display: inline-block;
+    left: 100%;
+    padding: 0.25rem 1rem;
+    border-radius: 0 0 0 $radius-large;
+    box-shadow: $shadow;
+
+    @include dark-mode {
+      background-color: $grey-darker;
+    }
+  }
+
+  .highlight {
+    pre,
+    span,
+    & {
+      @include dark-mode;
+    }
   }
 }
 

static/src/scss/_bulma_overrides.scss

@@ -20,3 +20,4 @@ $code-background: none;
 $pre-background: none;
 $code-padding: 0;
 $code: inherit;
+$content-pre-padding: 2.75rem 1.25rem 1.25rem 1.25rem;

static/src/scss/_mixins.scss

@@ -2,7 +2,8 @@
   // Ensure animations aren't for the initial transition
   html.dark-mode-animate & {
     transition-duration: 0.5s;
-    transition-property: color, background-color, border-color, filter;
+    transition-property: color, background-color, border-color, filter,
+      box-shadow;
   }
 
   html.dark-mode & {

website/contrib/code_block/templates/contrib/blocks/code.html

@@ -1 +1,5 @@
+<span class="filename">
+  {{ value.language }}
+  <i class="fa-regular fa-clipboard is-clickable code-copy" title="Copy to clipboard"></i>
+</span>
 {{ value.code }}