Implement code blocks and groups mostly

assets/js/app.js

@@ -1,6 +1,10 @@
 import clickableMaker from "./clickable-maker";
+import codeBlockFormatter from "./code-block-formatter";
+import tabbed from "./tabbed";
 import _ from "./lunr";
 
 window.addEventListener('load', () => {
     clickableMaker();
+    codeBlockFormatter();
+    tabbed();
 });

assets/js/code-block-formatter.js

@@ -0,0 +1,31 @@
+export default function() {
+    Array.from(document.querySelectorAll('[data-copy-button=true]')).forEach(e => {
+        const copyButton = document.createElement('button');
+        copyButton.classList.add('copy-button');
+
+        copyButton.addEventListener('click', () => {
+            const addTemporaryClass = (className, time) => {
+                copyButton.classList.add(className);
+
+                setTimeout(() => {
+                    if (copyButton.classList.contains(className)) {
+                        copyButton.classList.remove(className);
+                    }
+                }, time);
+            }
+
+            if (!navigator || !navigator.clipboard) {
+                console.warn("Clipboard not accessible");
+                addTemporaryClass('copy-failed', 2000);
+            }
+
+            const content = e.innerText.trim();
+            navigator.clipboard.writeText(content).then(() => {
+                addTemporaryClass('copy-successful', 2000);
+            });
+        });
+
+        e.classList.add('contains-copy-button');
+        e.insertBefore(copyButton, e.firstChild);
+    });
+}

assets/js/tabbed.js

@@ -0,0 +1,31 @@
+export default function() {
+    Array.from(document.querySelectorAll('[data-tabbed=true]')).forEach(tabbed => {
+        const header = tabbed.querySelector('.tab-header');
+        Array.from(header.children).forEach(element => {
+            element.addEventListener('click', () => {
+                updateTabVisibility(tabbed, element.dataset.tabIndex);
+            })
+        });
+
+        updateTabVisibility(tabbed, tabbed.dataset.tabIndex);
+    });
+}
+
+function updateTabVisibility(tabgroupElement, index) {
+    const tabHeaderElems = tabgroupElement.querySelector('.tab-header').children;
+    const tabContentsElems = tabgroupElement.querySelector('.tab-content').children;
+
+    for (const element of tabHeaderElems) {
+        element.classList.remove('active');
+    }
+
+    Array.from(tabHeaderElems).find(e => e.dataset.tabIndex === index).classList.add('active');
+
+    Array.from(tabContentsElems).forEach(e => {
+        if (e.dataset.tabIndex === index) {
+            e.style.display = "block";
+        } else {
+            e.style.display = "none";
+        }
+    });
+}

assets/sass/_code.scss

@@ -0,0 +1,47 @@
+.highlight {
+    pre {
+        code {
+            white-space: pre-wrap;
+        }
+    }
+}
+
+.contains-copy-button {
+    position: relative;
+
+    .copy-button {
+        position: absolute;
+        top: 0;
+        right: 0;
+
+        background-color: transparent;
+        border: none;
+
+        &::after {
+            content: '\f328';
+            color: rgba($text-color, 0.75);
+
+            font-family: 'Font Awesome 6 Free';
+            font-weight: normal;
+            font-style: normal;
+        }
+
+        &:hover {
+            &::after {
+                color: $text-color;
+            }
+        }
+
+        &.copy-successful {
+            &::after {
+                content: '\f46c'
+            }
+        }
+
+        &.copy-failed {
+            &::after {
+                content: '\f00d'
+            }
+        }
+    }
+}

assets/sass/app.scss

@@ -18,3 +18,4 @@
 @import "compact-list";
 @import "pagination";
 @import "list";
+@import "code";

config.toml

@@ -1,3 +1,7 @@
 baseURL = "http://example.org/"
 languageCode = "en-us"
 title = "My New Hugo Site"
+
+[markup]
+[markup.highlight]
+style = "monokai"

layouts/shortcodes/codegroup.html

@@ -0,0 +1,25 @@
+<div class="tabbed" data-tabbed="true" data-tab-index="0">
+    <div class="tab-header">
+        {{ range $index, $entry := split .Inner "\n---" }}
+        {{ $lines := split . "\n" }}
+        {{ $title := index $lines 1}}
+
+        <span role="button" data-tab-index="{{ $index }}">
+            {{ $title }}
+        </span>
+
+        {{ end }}
+    </div>
+
+    <div class="tab-content">
+        {{ range $index, $entry := split .Inner "\n---" }}
+        {{ $lines := split . "\n" }}
+        {{ $codeBlock := delimit (after 2 $lines) "\n" }}
+
+        <div data-tab-index="{{ $index }}" data-copy-button="true">
+            {{ $codeBlock | markdownify }}
+        </div>
+
+        {{ end }}
+    </div>
+</div>