From e3ddd1e29e67c34f7b36580dda6bb8b16fc9dc06 Mon Sep 17 00:00:00 2001
From: Ole Eskild Steensen <ole@savvy.no>
Date: Tue, 17 Jan 2023 14:22:10 +0100
Subject: [PATCH] Refactor, and styling adjustments to callout icons

---
 plugin-info.json                              |  1 +
 .../_includes/components/calloutScript.njk    | 41 +++++++++++++++++++
 src/site/_includes/components/pageheader.njk  | 38 +----------------
 src/site/styles/digital-garden-base.scss      |  4 ++
 4 files changed, 47 insertions(+), 37 deletions(-)
 create mode 100644 src/site/_includes/components/calloutScript.njk

diff --git a/plugin-info.json b/plugin-info.json
index e633d34..9b4ee36 100644
--- a/plugin-info.json
+++ b/plugin-info.json
@@ -38,6 +38,7 @@
             "src/site/_includes/components/searchButton.njk",
             "src/site/_includes/components/searchContainer.njk",
             "src/site/_includes/components/searchScript.njk",
+            "src/site/_includes/components/calloutScript.njk",
             "src/site/lunr-index.js",
             "src/site/lunr.njk",
             "src/site/_data/versionednotes.js",
diff --git a/src/site/_includes/components/calloutScript.njk b/src/site/_includes/components/calloutScript.njk
new file mode 100644
index 0000000..c72886a
--- /dev/null
+++ b/src/site/_includes/components/calloutScript.njk
@@ -0,0 +1,41 @@
+<script src="https://unpkg.com/lucide@0"></script>
+<script>
+    // Create callout icons
+    window.addEventListener("load", () => {
+        document.querySelectorAll(".callout").forEach((elem) => {
+            const icon = getComputedStyle(elem).getPropertyValue('--callout-icon');
+            const iconName = icon && icon.trim().replace(/^lucide-/, "");
+
+            if (iconName) {
+                const calloutTitle = elem.querySelector(".callout-title");
+
+                if (calloutTitle) {
+                    const calloutIconContainer = document.createElement("div");
+                    const calloutIcon = document.createElement("i");
+
+                    calloutIconContainer.appendChild(calloutIcon);
+                    calloutIcon.setAttribute("icon-name", iconName);
+                    calloutIconContainer.setAttribute("class", "callout-icon");
+                    calloutTitle.insertBefore(calloutIconContainer, calloutTitle.firstChild);
+                }
+            }
+        });
+
+        lucide.createIcons({
+            attrs: {
+                class: ["svg-icon"]
+            }
+        });
+
+        // Collapse callouts
+        Array.from(document.querySelectorAll(".callout.is-collapsible")).forEach((elem) => {
+            elem.addEventListener("click", (event) => {
+                if (elem.classList.contains("is-collapsed")) {
+                    elem.classList.remove("is-collapsed");
+                } else {
+                    elem.classList.add("is-collapsed");
+                }
+            });
+        });
+    });
+</script>
\ No newline at end of file
diff --git a/src/site/_includes/components/pageheader.njk b/src/site/_includes/components/pageheader.njk
index 7e18f05..4e6178d 100644
--- a/src/site/_includes/components/pageheader.njk
+++ b/src/site/_includes/components/pageheader.njk
@@ -1,42 +1,5 @@
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <script src="https://unpkg.com/mermaid/dist/mermaid.min.js"></script>
-<script src="https://unpkg.com/lucide@0"></script>
-<script>
-    // Create callout icons
-    window.addEventListener("load", () => {
-        document.querySelectorAll(".callout").forEach((elem) => {
-            const icon = getComputedStyle(elem).getPropertyValue('--callout-icon');
-            const iconName = icon && icon.replace(/^lucide-/, "");
-
-            if (iconName) {
-                const calloutTitle = elem.querySelector(".callout-title");
-
-                if (calloutTitle) {
-                    const calloutIconContainer = document.createElement("div");
-                    const calloutIcon = document.createElement("i");
-
-                    calloutIconContainer.appendChild(calloutIcon);
-                    calloutIcon.setAttribute("icon-name", iconName);
-                    calloutIconContainer.setAttribute("class", "callout-icon");
-                    calloutTitle.insertBefore(calloutIconContainer, calloutTitle.firstChild);
-                }
-            }
-        });
-
-        lucide.createIcons();
-
-        // Collapse callouts
-        Array.from(document.querySelectorAll(".callout.is-collapsible")).forEach((elem) => {
-            elem.addEventListener("click", (event) => {
-                if (elem.classList.contains("is-collapsed")) {
-                    elem.classList.remove("is-collapsed");
-                } else {
-                    elem.classList.add("is-collapsed");
-                }
-            });
-        });
-    });
-</script>
 <script>
     mermaid.initialize({
         startOnLoad: true,
@@ -45,6 +8,7 @@
 <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/prism.min.js" integrity="sha512-hpZ5pDCF2bRCweL5WoA0/N1elet1KYL5mx3LP555Eg/0ZguaHawxNvEjF6O3rufAChs16HVNhEc6blF/rZoowQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/plugins/autoloader/prism-autoloader.min.js" integrity="sha512-sv0slik/5O0JIPdLBCR2A3XDg/1U3WuDEheZfI/DI5n8Yqc3h5kjrnr46FGBNiUAJF7rE4LHKwQ/SoSLRKAxEA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
 
+{%include "components/calloutScript.njk"%}
 
 <script src="//unpkg.com/force-graph"></script>
 
diff --git a/src/site/styles/digital-garden-base.scss b/src/site/styles/digital-garden-base.scss
index a67c80e..252573c 100644
--- a/src/site/styles/digital-garden-base.scss
+++ b/src/site/styles/digital-garden-base.scss
@@ -491,6 +491,10 @@ ul.task-list {
   padding: 0;
 }
 
+.callout-fold{
+   cursor: pointer; 
+}
+
 .callout-title {
     margin-top: 0;
     align-items: center;