Add Copy Code button info to JavaScript section

src/_includes/global/baselayout.njk

@@ -37,6 +37,9 @@
         {% if toc %}
         <script src="{{'/assets/js/details-utils.js'}}" defer></script>
         {% endif %}
+        {% if hasCodeBlock %}
+        <script src="/assets/js/copycode.js" defer></script>
+        {% endif %}
         {% if hasTooltips %}
         <script src="/assets/js/tooltips.js" defer></script>
         {% endif %}

src/articles/myarticles/accessible-footnotes.md

@@ -5,6 +5,7 @@ updated: 2024-12-03T23:51:27+0800
 desc: "How I implement accessible footnotes, at least to the best of my ability. Written for 32-Bit Cafe's Community Code Jam #5."
 categories: ["32-bit cafe", "accessibility", "html", "css", "eleventy", "markdown-it"]
 toc: true
+hasCodeBlock: true
 ---
 
 [![32-Bit Cafe "Back to School" Code Jam button](/assets/images/articles/accessible-footnotes/32bitcafe-backtoschool.png)](https://32bit.cafe/~xandra/events/codejam5/){.inline-img}

src/assets/css/components.css

@@ -103,6 +103,20 @@
 
 a.link-btn[href^="http"]:not([href*="leilukin.com"]) { padding-right: calc(var(--btn-right-padding) + var(--sz-external-link)); }
 
+/* Button to copy code snippets */
+.cc-btn {
+    font-size: 0.8em;
+    display: flex;
+    align-items: center;
+    gap: 0.2em;
+    margin-left: auto;
+    margin-right: 0;
+    border: 0.15em solid var(--clr-code-border);
+    border-radius: 0.2em;
+    background: var(--clr-link-btn-bg);
+    color: var(--clr-link-btn-txt);
+}
+
 /* Content Disclosure */
 * + .content-disclosure { margin-top: var(--sz-paragraph-margin); }
 .content-disclosure__summary { font-weight: 700; }

src/assets/js/copycode.js

@@ -0,0 +1,58 @@
+function createCopyBtn(blockIndex) {
+    return `<div class="cc-wrapper d-none d-sm-block">
+        <button class="cc-btn btn-muted shadow" title="Copy code" data-target="${blockIndex}">
+            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="icon"><path stroke="none"d="M0 0h24v24H0z"fill="none"/><path d="M9 5h-2a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-12a2 2 0 0 0 -2 -2h-2"/><path d="M9 3m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v0a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z"/></svg>
+            Copy Code
+        </button>
+    </div>`;
+}
+
+async function copyCode(block) {
+    const code = document.querySelector(`[data-block-id="${block}"]`);
+    const doCopy = async() => await navigator.clipboard.writeText(code?.innerText ?? '');
+
+    if (!navigator.userAgent.includes('Firefox')) {
+        const result = await navigator.permissions.query({ name: 'clipboard-write' });
+
+        if (result.state === 'granted' || result.state === 'prompt') {
+            doCopy();
+        }
+    } else {
+        doCopy();
+    }
+}
+
+async function handleCopyBtnClick(event) {
+    const btn = event?.target;
+    const btnTarget = btn?.getAttribute('data-target');
+
+    if (btn && btnTarget) {
+        const originalText = btn.innerHTML;
+
+        await copyCode(btnTarget);
+
+        btn.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="icon"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 5h-2a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-12a2 2 0 0 0 -2 -2h-2" /><path d="M9 3m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v0a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z" /><path d="M9 14l2 2l4 -4" /></svg> Copied!';
+
+        setTimeout(() => {
+            btn.innerHTML = originalText;
+        }, 1500);
+    }
+}
+
+document.addEventListener('DOMContentLoaded', () => {
+    const allCodeBlocks = Array.from(document.querySelectorAll('pre[class^="language-"]'));
+
+    allCodeBlocks.forEach((b, i) => {
+        const code = b.childNodes[0];
+        const codeBlockIndex = `cb-${i}`;
+
+        b.insertAdjacentHTML('afterend', createCopyBtn(codeBlockIndex));
+        code.setAttribute('data-block-id', codeBlockIndex);
+    })
+
+    const allCopyBtns = Array.from(document.querySelectorAll('.cc-btn'));
+
+    allCopyBtns.forEach((btn) => {
+        btn.addEventListener('click', handleCopyBtnClick);
+    })
+})

src/blog/posts/2025-01-19-attending-42-school.md

@@ -2,6 +2,7 @@
 articleTitle: Attending 42 the Computer Science School
 desc: I have applied to attend one of the Malaysian campuses of 42, an international computer science school.
 date: 2025-01-19T23:14:39+0800
+updated: 2025-02-17T18:08:45+0800
 categories: ["life updates"]
 ---
 
@@ -17,10 +18,12 @@ According to the [official website of 42's Paris campus](https://42.fr/en/what-i
 
 As a web developer without a computer science degree, a physical school that offers computer science education for free is certainly an attractive notion. Furthermore, as a developer who learned to code through online courses and learning resources, I have got used to learning new things without a teacher holding my hand. My years of working experience had also taught me to not expecting anyone to hold your hand if you want to upskill yourself. I have also found myself to prefer to learn to code by building projects.
 
-Therefore, in late December 2024, I applied for the Malaysian campus of 42 near me, spent two hours in their application test consisted of a memory game and a logic game. On the next day, I was informed that I passed my application test, so I chose to enrol in their trial bootcamp, referred to as the Piscine, that will take place in late February. Participants need to pass the 4-week trial bootcamp before being able to take 42's core curriculum.
+Therefore, in late December 2024, I applied for the Malaysian campus of 42 near me, spent two hours in their application test consisted of a memory game and a logic game. On the next day, I was informed that I passed my application test, so I chose to enrol in their trial bootcamp, referred to as the Piscine, that will begin on April 2025. Participants need to pass the 4-week trial bootcamp before being able to take 42's core curriculum.
 
 Meanwhile, through their official website, I learned that the campus would host an open day on 18 January 2025, so I decided to take the opportunity to visit the campus for myself to see what I can expect from the environment when I started my study there. When I attended the open day on January 18, I learned that the computers in their workstations use Linux, specifically the Ubuntu distribution with Gnome as its desktop environment.
 
 However, to my surprise, the computers did not have any setting to adjust screen brightness, which was not a good thing for me due to my [retinitis pigmentosa](/articles/living-with-retinitis-pigmentosa/) making my eyes sensitive to bright light, including artificial lights. I would prefer not to rely on my clip-on sunglasses just to see a computer screen, since the surroundings including the keyboard would appear too dark for me. Therefore, I approached one of the staff members to request methods of dimming the computer screen when I attend my class there. The staff member suggested that they should be able to arrange that to accommodate my needs.
 
-After visiting the campus on its open day, I have been looking forward to attending the school more. Wish me luck in passing my Piscine so I can become an official student of 42!
+After visiting the campus on its open day, I have been looking forward to attending the school more. Wish me luck in passing my Piscine so I can become an official student of 42!
+
+**Update, 17 February 2025:** Originally, I registered to join the Piscine scheduled for 24 February 2025, but I received an email from the school announcing that due to unforeseen circumstances, the Piscine scheduled late February 2025 will no longer take place as planned. Therefore, I registered for the Piscine beginning on 7 April 2025.

src/changelogs/logs/2025/2025-02-17.md

@@ -0,0 +1,5 @@
+---
+date: 2025-02-17T18:10:52+0800
+---
+
+* Add buttons to copy code snippets to pages with code blocks.

src/projects/snippets/snippets.11tydata.js

@@ -1,3 +1,4 @@
 export default {
-    tags: ["code snippets"]
+    tags: ["code snippets"],
+    hasCodeBlock: true
 }

src/shrines/starwarskotor/articles/juhani-lesbian-evidence.md

@@ -5,6 +5,7 @@ updated: 2024-05-10
 desc: "Juhani is a canon lesbian character and she has always been intended as such by the developers of Knights of the Old Republic. Here I am presenting evidence from the game files to prove it."
 tags: kotor 1 articles
 categories: ["star wars kotor"]
+hasCodeBlock: true
 ---
 
 (Note: This article was originally published on Tumblr)

src/slashes/navbarlinks/now.md

@@ -1,6 +1,6 @@
 ---
 title: Now
-updated: 2025-02-06T00:25:27+0800
+updated: 2025-02-17T18:10:40+0800
 eleventyNavigation:
     order: 3
 eleventyComputed:
@@ -27,6 +27,6 @@ Happy Year of the Snake!
 
 ## Planning on Attending the 42 Computer Science School
 
-I have been planning on attending a Malaysian campus of the [42 computer science school](https://www.42network.org/). I have registered, passed their online game test and will join their trial bootcamp known as the Piscine in March.
+I have been planning on attending a Malaysian campus of the [42 computer science school](https://www.42network.org/). I have registered, passed their online game test and will join their trial bootcamp known as the Piscine beginning on 7 April 2025.
 
 You can read more about it on the blog post ["Attending 42 the Computer Science School"](/blog/posts/2025-01-19-attending-42-school).

src/slashes/statements/colophon.md

@@ -1,7 +1,7 @@
 ---
 title: Colophon
 keyword: colophon page
-updated: 2024-12-29T17:52:49+0800
+updated: 2025-02-17T18:18:21+0800
 toc: true
 eleventyNavigation:
     order: 14
@@ -75,6 +75,7 @@ Due to this website being a static site, JavaScript is used to create dynamic an
         * [{% cite "Cassette Beasts" %}](/shrines/cassettebeasts)
         * [{% cite "Pokémon Omega Ruby" %} and {% cite "Alpha Sapphire" %}](/shrines/pokemonoras)
     * Birthdays of characters from {% cite "A Summer’s End — Hong Kong 1986" %} on its shrine.
+* Add buttons to copy code snippets to pages with code blocks.
 * Scott O'Hara's [ARIA Tooltips](https://github.com/scottaohara/a11y_tooltips) script is used to implement accessible tooltips that meet Web Content Accessibility Guidelines (WCAG) 2.2 success criterion for [1.4.13: Content on Hover or Focus (Level AA)](https://www.w3.org/WAI/WCAG22/Understanding/content-on-hover-or-focus.html), by allowing visitors to see tooltips on keyboard focus and dismiss tooltips by pressing the Escape key.
 * Zach Leatherman's [details-utils](https://www.npmjs.com/package/@zachleat/details-utils) JavaScript package is used to automatically expand sidebar table of contents on wide screens.
 * [status.cafe](https://status.cafe/) widget, which is placed on the home page, uses JavaScript to fetch data of my latest status update.