setup

themes/hugo-theme-monochrome/assets/js/builtin-copy.js

@@ -0,0 +1,78 @@
+function registerHoverEvent(wrapper, button) {
+    wrapper.addEventListener('mouseenter', function () {
+        button.classList.remove("hidden");
+    });
+    wrapper.addEventListener('mouseleave', function () {
+        button.classList.add("hidden");
+    });
+}
+
+function registerTouchedEvent(pre, button) {
+    pre.addEventListener("touchend", function () {
+        if (button.classList.contains("hidden")) {
+            button.classList.remove("hidden");
+        } else {
+            button.classList.add("hidden");
+        }
+    });
+}
+
+function registerClipboard(button, code_block) {
+    button.addEventListener('click', async function () {
+        try {
+            await navigator.clipboard.writeText(code_block.innerText);
+            button.blur();
+            button.innerText = 'Copied!';
+            setTimeout(function () {
+                button.innerText = 'Copy';
+            }, 2000);
+        } catch (e) {
+            button.innerText = 'Error';
+        }
+    });
+}
+
+window.addEventListener("DOMContentLoaded", function () {
+    document.querySelectorAll('pre:not(.emgithub-pre) > code').forEach((code_block) => {
+        var button = document.createElement('span');
+        button.className = 'copy-code-button hidden';
+        button.type = 'button';
+        button.innerText = 'Copy';
+
+        var pre = code_block.parentNode;
+        if (pre.parentNode.classList.contains('highlight')) {
+            var highlight = pre.parentNode;
+            highlight.appendChild(button);
+            registerHoverEvent(highlight, button);
+            registerTouchedEvent(pre, button);
+            registerClipboard(button, code_block);
+        } else if (pre.parentNode.tagName === "TD") {
+            // check is line no
+            var td = pre.parentNode;
+            var tr = td.parentNode;
+            if (td === tr.firstChild) {
+                return;
+            }
+            // get highlight block
+            var highlight = pre.parentNode;
+            while (!highlight.classList.contains('highlight') && highlight.tagName !== 'BODY') {
+                highlight = highlight.parentNode;
+            }
+            if (highlight.tagName !== 'BODY') {
+                highlight.appendChild(button);
+                registerHoverEvent(highlight, button);
+                registerTouchedEvent(pre, button);
+                registerClipboard(button, code_block);
+            }
+        } else {
+            var wrapper = document.createElement('div');
+            wrapper.style = "position: relative;"
+            pre.parentNode.insertBefore(wrapper, pre);
+            wrapper.appendChild(pre);
+            wrapper.appendChild(button);
+            registerHoverEvent(wrapper, button);
+            registerTouchedEvent(pre, button);
+            registerClipboard(button, code_block);
+        }
+    });
+});

themes/hugo-theme-monochrome/assets/js/emgithub.js

@@ -0,0 +1,74 @@
+var currentScript = document.currentScript;
+
+function removeMask (container) {
+    const emgithubPre = container.querySelector(".emgithub-pre");
+    const emgithubLoading = container.querySelector(".emgithub-loading");
+    emgithubLoading.classList.add("hide");
+    emgithubPre.classList.remove("hide");
+    emgithubPre.classList.remove("loading");
+}
+
+function embedTextToEle (codeText, container, lang, lineBegin, lineEnd) {
+    const emgithubPre = container.querySelector(".emgithub-pre");
+    const emgithubCode = document.createElement("code");
+    emgithubPre.appendChild(emgithubCode);
+
+    if (lineBegin > 0) {
+        const codeTextSplit = codeText.split("\n");
+        codeText = codeTextSplit.slice(lineBegin - 1, lineEnd).join("\n") + '\n';
+    }
+
+    // Dynamically adjust padding of pre to fit in the line numbers
+    const lineBeginDigit = lineBegin.toString().length;
+    const lineEndDigit = lineEnd.toString().length;
+    if (lineBeginDigit >= 4 || lineEndDigit >= 4) {
+        emgithubPre.style.paddingLeft = "4.5rem";
+    } else if (lineBeginDigit >= 3 || lineEndDigit >= 3) {
+        emgithubPre.style.paddingLeft = "4rem";
+    } else if (lineBeginDigit >= 2 || lineEndDigit >= 2) {
+        emgithubPre.style.paddingLeft = "3.5rem";
+    }
+
+    emgithubCode.classList.add(`language-${lang}`);
+    emgithubCode.textContent = codeText;
+    Prism.highlightAllUnder(container, false, () => {
+        requestAnimationFrame(() => {
+            removeMask(container);
+        })
+    });
+}
+
+function embedErrorToEle (errText, container) {
+    const emgithubPre = container.querySelector(".emgithub-code .emgithub-pre");
+    const emgithubCode = document.createElement("code");
+    emgithubPre.appendChild(emgithubCode);
+
+    emgithubPre.classList.remove("line-numbers");
+    emgithubPre.classList.add("no-line-numbers");
+    emgithubCode.textContent = errText;
+
+    removeMask(container);
+}
+
+async function embed () {
+    const sourceURL = new URL(currentScript.src);
+    const params = sourceURL.searchParams;
+    const rawFileURL = new URL(params.get("raw_file_url"));
+    const lang = params.get("lang");
+    const id = params.get("id");
+    const lineBegin = Number(params.get("line_begin"));
+    const lineEnd = Number(params.get("line_end"));
+
+    const emgithubContainer = document.getElementById(id);
+    const response = await fetch(rawFileURL);
+    if (response.ok) {
+        const text = await response.text();
+        embedTextToEle(text, emgithubContainer, lang, lineBegin, lineEnd);
+    } else {
+        embedErrorToEle(`Failed to process ${rawFileURL}\n${response.status}`, emgithubContainer);
+    }
+}
+
+window.addEventListener("DOMContentLoaded", () => {
+    embed();
+});

themes/hugo-theme-monochrome/assets/js/header.js

@@ -0,0 +1,46 @@
+function hide_canvas() {
+    const sidebar_canvas_overlay = document.getElementById("sidebar_canvas_overlay");
+    sidebar_canvas_overlay.classList.add("hidden");
+}
+
+function show_canvas() {
+    const sidebar_canvas_overlay = document.getElementById("sidebar_canvas_overlay");
+    sidebar_canvas_overlay.classList.remove("hidden");
+}
+
+function hide_sidebar() {
+    const sidebar = document.getElementById("sidebar");
+    sidebar.classList.add("close");
+}
+
+function show_sidebar() {
+    const sidebar = document.getElementById("sidebar");
+    sidebar.classList.remove("close");
+}
+
+window.addEventListener("DOMContentLoaded", function() {
+    const sidebar_btn = document.getElementById("sidebar_btn");
+    sidebar_btn.addEventListener("click", function() {
+        show_canvas();
+        show_sidebar();
+    });
+
+    const sidebar_canvas_overlay = document.getElementById("sidebar_canvas_overlay");
+    sidebar_canvas_overlay.addEventListener("click", function() {
+        hide_canvas();
+        hide_sidebar();
+    });
+
+    const dark_mode_btn = document.getElementById("dark_mode_btn");
+    const light_mode_btn = document.getElementById("light_mode_btn");
+
+    dark_mode_btn.addEventListener('click', function() {
+        document.documentElement.setAttribute("data-theme", "dark");
+        localStorage.theme = 'dark';
+    });
+
+    light_mode_btn.addEventListener('click', function() {
+        document.documentElement.setAttribute("data-theme", "light");
+        localStorage.theme = 'light';
+    });
+});

themes/hugo-theme-monochrome/assets/js/math.js

@@ -0,0 +1,11 @@
+window.MathJax = {
+    tex: {
+        inlineMath: [['$', '$']],
+        displayMath: [['$$', '$$']],
+        processEscapes: true,
+        processEnvironments: true
+    },
+    options: {
+        skipHtmlTags: ['script', 'noscript', 'style', 'textarea', 'pre']
+    }
+};

themes/hugo-theme-monochrome/assets/js/prism-autoloader.js

@@ -0,0 +1 @@
+Prism.plugins.autoloader.languages_path = 'https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/';

themes/hugo-theme-monochrome/assets/js/prism.js

@@ -0,0 +1,13 @@
+function highlight() {
+    document.querySelectorAll("pre:not(.emgithub-pre)").forEach(e => {
+        Prism.highlightAllUnder(e, false, () => {
+            requestAnimationFrame(() => {
+                e.classList.remove("hide");
+            })
+        });
+    });
+}
+
+window.addEventListener("DOMContentLoaded", () => {
+    highlight();
+})

themes/hugo-theme-monochrome/assets/js/search.js

@@ -0,0 +1,143 @@
+import * as params from '@params';
+import Fuse from '../lib/js/fuse-v6.6.2.min.js';
+
+async function init() {
+    const data = fetch(params.index_url);
+
+    const search_btn = document.getElementById("search_btn");
+    const search_menu_wrapper = document.getElementById("search_menu_wrapper");
+    const search_menu_close_btn = document.getElementById("search_menu_close_btn");
+    const search_menu_input = document.getElementById("search_menu_input");
+    const search_menu_results = document.getElementById("search_menu_results");
+
+    search_btn.addEventListener("click", function() {
+        search_menu_wrapper.classList.remove("hidden");
+        search_menu_input.focus();
+    });
+
+    search_menu_close_btn.addEventListener("click", function() {
+        search_menu_wrapper.classList.add("hidden");
+    });
+
+    const index_json = await (await data).json();
+    const options = {
+        distance: 100,
+        threshold: 0.3,
+        ignoreLocation: true,
+        minMatchCharLength: 2,
+        keys: [
+            'title',
+            'permalink',
+            'content',
+        ],
+        includeMatches: true,
+    };
+    const fuse = new Fuse(index_json, options);
+
+    const createItem = (title, permalink, content) => {
+        return `<a href="${permalink}">
+                    <div class="search-menu-result-item">
+                        <div class="search-menu-result-item-title">${title}</div>
+                        <div class="search-menu-result-item-content">${content}</div>
+                    </div>
+                </a>`;
+    };
+
+    const hlItem = (item, matches) => {
+        const highlightTitle = (text, match) => {
+            let textHl = "", ptr = 0;
+            match.forEach(idx => {
+                if (ptr < idx[0]) {
+                    textHl += text.substring(ptr, idx[0]);
+                }
+                textHl += "<mark>" + text.substring(idx[0], idx[1] + 1) + "</mark>";
+                ptr = idx[1] + 1;
+            })
+            textHl += text.substring(ptr, text.length);
+            return textHl;
+        };
+
+        const highlightContent = (text, match) => {
+            let textHl = "<mark>" + text.substring(match[0][0], match[0][1] + 1) + "</mark>";
+            let ptr = match[0][1] + 1;
+            let length = match[0][1] + 1 - match[0][0];
+            if (match[0][0] > 0) {
+                textHl = "..." + textHl;
+            }
+            for (let i = 1; i < match.length; i++) {
+                const idx = match[i];
+                if (ptr < idx[0] && (length + idx[0] - ptr) >= 100) {
+                    textHl += text.substring(ptr, ptr + (100 - length + 1)) + "...";
+                    length = 100;
+                    break;
+                }
+
+                if (ptr < idx[0]) {
+                    textHl += text.substring(ptr, idx[0]);
+                    length += idx[0] - ptr;
+                }
+                textHl += "<mark>" + text.substring(idx[0], idx[1] + 1) + "</mark>";
+                length += idx[1] + 1 - idx[0];
+                ptr = idx[1] + 1;
+                if (length >= 100) {
+                    break;
+                }
+            }
+            if (length < 100) {
+                textHl += text.substring(ptr, ptr + (100 - length));
+            }
+            if (ptr <= text.length) {
+                textHl += "...";
+            }
+            return textHl;
+        }
+
+        let itemHl = {
+            title: undefined,
+            permalink: item.permalink,
+            content: undefined,
+        };
+        matches.forEach(match => {
+            if (match.key == 'title') {
+                itemHl.title = highlightTitle(item.title, match.indices);
+            } else if (match.key == 'content') {
+                itemHl.content = highlightContent(item.content, match.indices);
+            }
+        });
+        if (itemHl.title === undefined) itemHl.title = item.title;
+        if (itemHl.content === undefined) itemHl.content = item.content;
+        return itemHl;
+    }
+
+    const buildAllItems = () => {
+        search_menu_results.innerHTML = index_json.reduce((acc, curr) => {
+            let content = (curr.content.length > 100) ? curr.content.substring(0, 100) + "..." : curr.content;
+            return acc + createItem(curr.title, curr.permalink, content);
+        }, "");
+    };
+
+    const search = (value) => {
+        const results = fuse.search(value);
+
+        if (results.length == 0) {
+            search_menu_results.innerHTML = '';
+        } else {
+            search_menu_results.innerHTML = results.reduce((acc, curr) => {
+                const item = hlItem(curr.item, curr.matches);
+                return acc + createItem(item.title, item.permalink, item.content);
+            }, "")
+        }
+    };
+
+    search_menu_input.addEventListener("input", function() {
+        if (this.value === '') {
+            buildAllItems();
+        } else {
+            search(this.value.trim());
+        }
+    });
+
+    buildAllItems();
+}
+
+window.addEventListener("DOMContentLoaded", init);

themes/hugo-theme-monochrome/assets/js/zooming.js

@@ -0,0 +1,27 @@
+import Zooming from '../lib/js/zooming-v2.1.1.min.js';
+
+document.addEventListener('DOMContentLoaded', function () {
+    let bgColor;
+    if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+        bgColor = '#333';
+    } else {
+        bgColor = '#fff';
+    }
+
+    zooming = new Zooming({
+        transitionDuration: 0.2,
+        bgColor: bgColor,
+    });
+    zooming.listen('#content img');
+
+    const dark_mode_btn = document.getElementById("dark_mode_btn");
+    const light_mode_btn = document.getElementById("light_mode_btn");
+
+    dark_mode_btn.addEventListener('click', function () {
+        zooming.config({bgColor: '#333'});
+    });
+
+    light_mode_btn.addEventListener('click', function () {
+        zooming.config({bgColor: '#fff'});
+    });
+});