codeblock copy

public/global.css

@@ -122,6 +122,7 @@
     "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
   --bg-code: #ddd;
   --bg-codeblock: #fff;
+  --bg-mask: rgba(255, 255, 255, 0.5);
 
   --fg-link: #11a129;
   --fg-weak: rgba(0, 0, 0, 0.7);

src/components/mdx/pre.astro

@@ -1,33 +1,81 @@
 ---
-import { parse } from "node-html-parser";
-
-const plaintext = parse(await Astro.slots.render("default")).textContent;
+import { Icon } from "astro-icon/components";
 ---
 
 <code-block class="root">
-  <button>
-
+  <button class="copy-button">
+    <span class="copy-message">copy</span>
+    <Icon name="iconoir:copy" class="copy-icon" />
   </button>
   <pre><slot /></pre>
-  <pre class="text-store">{plaintext}</pre>
 </code-block>
 
 <script>
   class CodeBlock extends HTMLElement {
     constructor() {
       super();
+      const button = this.querySelector(".copy-button")!;
+      const pre = this.querySelector("pre")!;
+      const message = this.querySelector(".copy-message")!;
+      let timeout: undefined | number;
+
+      button.addEventListener("click", () => {
+        navigator.clipboard.writeText(pre.textContent!).then(() => {
+          message.textContent = "copied!";
+          if (timeout) clearTimeout(timeout);
+          timeout = setTimeout(() => {
+            message.textContent = "copy";
+          }, 1000);
+        });
+      });
     }
   }
 
   customElements.define("code-block", CodeBlock);
 </script>
 <style>
-  .root {
-    display: block;
-    position: relative;
-
-  }
   @layer component {
+    .root {
+      display: block;
+      position: relative;
+    }
+
+    .copy-button {
+      position: absolute;
+      top: 0;
+      right: 0;
+      padding: 0.5rem;
+      color: var(--fg-weak);
+      border: none;
+      cursor: pointer;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      gap: 0.5rem;
+    }
+
+    .copy-message {
+      opacity: 0;
+      padding: 0.5rem;
+      border-radius: 0.2rem;
+      background-color: var(--bg-codeblock);
+      transition: opacity 0.1s;
+      font-weight: bold;
+    }
+
+    .copy-icon {
+      font-size: var(--font-size-2xl);
+      transition: transform 0.1s;
+    }
+
+    .copy-button:hover > .copy-message {
+      opacity: 1;
+    }
+
+    .copy-button:hover > .copy-icon {
+      transform: scale(1.1);
+    }
+
     .text-store {
       display: none;
     }

src/components/mdx/section.astro

@@ -5,7 +5,7 @@
 <style>
   @layer component {
     section {
-      margin-block: 2rem;
+      margin-block: 1rem;  
       display: flex;
       flex-direction: column;
       gap: 1rem;

src/pages/index.astro

@@ -66,7 +66,7 @@ let contact = [
       A student at University of Tsukuba. Studying in distributed storage system
       in HPC.</Typography
     >
-    <Pre><Code lang="rust" code={profileCode} /></Pre>
+    <Pre><Code lang="rust" code={profileCode} theme={"github-light"} /></Pre>
   </Section>
   <Section>
     <Heading2>Timeline</Heading2>