feature: minify inline JS and move addCopyCodeButtons.js to separate …

…script
alexandrehtrb · Jul 14, 2024 · e03bbb5 · e03bbb5
1 parent dd68e47
commit e03bbb5
Show file tree

Hide file tree

Showing 6 changed files with 48 additions and 45 deletions.
diff --git a/.eleventy.js b/.eleventy.js
@@ -13,6 +13,7 @@ async function do_minifyhtml(source, output_path) {
       decodeEntities: true,
       keepClosingSlash: true,
       minifyCSS: true,
+      minifyJS: true,
       quoteCharacter: `"`,
       removeComments: true,
       removeAttributeQuotes: true,
@@ -31,7 +32,6 @@ async function do_minifyhtml(source, output_path) {
 
 module.exports = function(eleventyConfig) {
   // Plugins
-  //eleventyConfig.addPlugin(syntaxHighlight)  
   eleventyConfig.addPlugin(require("./src/libs/shiki.js"), { });
   eleventyConfig.addPlugin(require("./src/libs/mermaid.js"), { mermaid_config: {'startOnLoad': false, 'theme': 'default' }});
 

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -27,6 +27,7 @@
     "markdown-it-anchor": "9.0.1",
     "shiki": "1.10.3",
     "tailwindcss": "3.4.4",
-    "html-minifier-terser": "7.2.0"
+    "html-minifier-terser": "7.2.0",
+    "terser": "5.31.2"
   }
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/_includes/post.liquid b/src/_includes/post.liquid
@@ -33,45 +33,4 @@ layout: main
 
 {% include "author.liquid" %}
 
-<script>
-let blocks = document.querySelectorAll("pre.shiki");
-const copyCodeIconSvg = '<svg height="16" viewBox="0 0 16 16" version="1.1" width="16"><path fill="#666666" d="M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 0 1 0 1.5h-1.5a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-1.5a.75.75 0 0 1 1.5 0v1.5A1.75 1.75 0 0 1 9.25 16h-7.5A1.75 1.75 0 0 1 0 14.25Z"></path><path fill="#666666" d="M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0 1 14.25 11h-7.5A1.75 1.75 0 0 1 5 9.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z"></path></svg>';
-const codeCopiedIconSvg = '<svg height="16" viewBox="0 0 16 16" version="1.1" width="16"><path fill="#28D751" d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"></path></svg>';
-
-blocks.forEach((block) => {
-    if (!navigator.clipboard) {
-        return;
-    }
-
-    let button = document.createElement("button");
-    button.className = "button-copy-code";
-    button.innerHTML = copyCodeIconSvg;
-    block.appendChild(button);
-
-    button.addEventListener("click", async () => {
-        await copyCode(block);
-    });
-});
-
-async function copyCode(block) {
-    let copiedCode = block.cloneNode(true);
-    copiedCode.removeChild(copiedCode.querySelector("button.button-copy-code"));
-
-    const html = copiedCode.outerHTML.replace(/<[^>]*>?/gm, "");
-
-    block.querySelector("button.button-copy-code").innerHTML = codeCopiedIconSvg;
-    setTimeout(function () {
-        block.querySelector("button.button-copy-code").innerHTML = copyCodeIconSvg;
-    }, 2000);
-
-    const parsedHTML = htmlDecode(html);
-
-    await navigator.clipboard.writeText(parsedHTML);
-}
-
-function htmlDecode(input) {
-    const doc = new DOMParser().parseFromString(input, "text/html");
-    return doc.documentElement.textContent;
-}
-
-</script>
+<script src="/assets/scripts/addCopyCodeButtons.js"></script>
diff --git a/src/assets/scripts/addCopyCodeButtons.js b/src/assets/scripts/addCopyCodeButtons.js
@@ -0,0 +1,39 @@
+let blocks = document.querySelectorAll("pre.shiki");
+const copyCodeIconSvg = '<svg height="16" viewBox="0 0 16 16" version="1.1" width="16"><path fill="#666666" d="M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 0 1 0 1.5h-1.5a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-1.5a.75.75 0 0 1 1.5 0v1.5A1.75 1.75 0 0 1 9.25 16h-7.5A1.75 1.75 0 0 1 0 14.25Z"></path><path fill="#666666" d="M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0 1 14.25 11h-7.5A1.75 1.75 0 0 1 5 9.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z"></path></svg>';
+const codeCopiedIconSvg = '<svg height="16" viewBox="0 0 16 16" version="1.1" width="16"><path fill="#28D751" d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"></path></svg>';
+
+blocks.forEach((block) => {
+    if (!navigator.clipboard) {
+        return;
+    }
+
+    let button = document.createElement("button");
+    button.className = "button-copy-code";
+    button.innerHTML = copyCodeIconSvg;
+    block.appendChild(button);
+
+    button.addEventListener("click", async () => {
+        await copyCode(block);
+    });
+});
+
+async function copyCode(block) {
+    let copiedCode = block.cloneNode(true);
+    copiedCode.removeChild(copiedCode.querySelector("button.button-copy-code"));
+
+    const html = copiedCode.outerHTML.replace(/<[^>]*>?/gm, "");
+
+    block.querySelector("button.button-copy-code").innerHTML = codeCopiedIconSvg;
+    setTimeout(function () {
+        block.querySelector("button.button-copy-code").innerHTML = copyCodeIconSvg;
+    }, 2000);
+
+    const parsedHTML = htmlDecode(html);
+
+    await navigator.clipboard.writeText(parsedHTML);
+}
+
+function htmlDecode(input) {
+    const doc = new DOMParser().parseFromString(input, "text/html");
+    return doc.documentElement.textContent;
+}