From f328f9b411886b642b30528fd1d7abb0d69a6c81 Mon Sep 17 00:00:00 2001
From: Luke-zhang-04 <Luke_zhang_04@protonmail.com>
Date: Wed, 11 Jan 2023 17:45:01 -0500
Subject: [PATCH] feat(callouts): make callouts look like Obsidian callouts

- change callout look
- make callouts collapsible (https://github.com/oleeskild/obsidian-digital-garden/issues/89)
---
 .eleventy.js                                 |  26 +-
 src/site/_includes/components/pageheader.njk |  37 ++
 src/site/styles/digital-garden-base.scss     | 376 ++-----------------
 src/site/styles/style.scss                   | 126 +++++++
 4 files changed, 201 insertions(+), 364 deletions(-)

diff --git a/.eleventy.js b/.eleventy.js
index 003b3ac..b04f10c 100644
--- a/.eleventy.js
+++ b/.eleventy.js
@@ -183,28 +183,30 @@ module.exports = function(eleventyConfig) {
 
                 let titleDiv = "";
                 let calloutType = "";
-                const calloutMeta = /\[!(\w*)\](\s?.*)/;
+                let isCollapsable;
+                let isCollapsed;
+                const calloutMeta = /\[!(\w*)\](\+|\-){0,1}(\s?.*)/;
                 if (!content.match(calloutMeta)) {
                     continue;
                 }
     
-                content = content.replace(calloutMeta, function(metaInfoMatch, callout, title) {
+                content = content.replace(calloutMeta, function(metaInfoMatch, callout, collapse, title) {
+                    isCollapsable = Boolean(collapse);
+                    isCollapsed = collapse === "-"
+                    const titleText = title.replace(/(<\/{0,1}\w+>)/, "") ? title : `${callout.charAt(0).toUpperCase()}${callout.substring(1).toLowerCase()}`
+                    const fold = isCollapsable ? `<div class="callout-fold"><i icon-name="chevron-down"></i></div>` : ``
+    
                     calloutType = callout;
-                    titleDiv = title.replace("<br>", "") ?
-                        `<div class="admonition-title">${title}</div>` :
-                        `<div class="admonition-title">${callout.charAt(0).toUpperCase()}${callout.substring(1).toLowerCase()}</div>`;
+                    titleDiv = `<div class="callout-title"><div class="callout-title-inner">${titleText}</div>${fold}</div>`
                     return "";
                 });
     
                 blockquote.tagName = "div";
-                blockquote.classList.add(
-                    `callout-${calloutType.toLowerCase()}`,
-                    "admonition",
-                    "admonition-example",
-                    "admonition-plugin",
-                );
+                blockquote.classList.add("callout");
+                blockquote.classList.add(isCollapsable ? "is-collapsible" : "")
+                blockquote.classList.add(isCollapsed ? "is-collapsed" : "")
                 blockquote.setAttribute("data-callout", calloutType.toLowerCase());
-                blockquote.innerHTML = `${titleDiv}\n${content}`;
+                blockquote.innerHTML = `${titleDiv}\n<div class="callout-content">${content}</div>`;
             }
         }
 
diff --git a/src/site/_includes/components/pageheader.njk b/src/site/_includes/components/pageheader.njk
index 802ed4e..7e18f05 100644
--- a/src/site/_includes/components/pageheader.njk
+++ b/src/site/_includes/components/pageheader.njk
@@ -1,5 +1,42 @@
 <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,
diff --git a/src/site/styles/digital-garden-base.scss b/src/site/styles/digital-garden-base.scss
index 145eee2..4a97eed 100644
--- a/src/site/styles/digital-garden-base.scss
+++ b/src/site/styles/digital-garden-base.scss
@@ -506,365 +506,37 @@ ul.task-list {
     }
 }
 
-div[class*="language-ad-"],
-div[class*="callout-"] {
-    font-family: 'Roboto', sans-serif;
-    word-wrap: break-word;
-    border-radius: 6px;
-    display: block;
-    font-size: 1rem;
-    margin-top: 1rem;
-    outline-color: rgb(230, 230, 230);
-    padding: 1rem;
-    position: relative;
-    transition: height .5s ease-in, opacity .5s ease-in;
-    word-break: break-word;
-    white-space: normal !important;
+.callout-title-inner,
+.callout-title-inner p,
+.callout-icon,
+.callout-fold,
+.callout-content {
+  margin: 0;
+  padding: 0;
 }
 
-.header-tags {
-    display: flex;
-    flex-wrap: wrap;
-    margin-top: 10px;
-    gap: 5px;
+.callout-title {
+    margin-top: 0;
+    align-items: center;
 }
 
-.header-meta {
-    margin-bottom: 10px;
+.callout {
+  font-family: "Roboto", sans-serif;
+  word-wrap: break-word;
+  display: block;
+  font-size: 1rem;
 }
 
-div.language-ad-note,
-div.callout-note {
-    .admonition-title::before {
-        content: "🖊️";
+.callout.is-collapsed {
+    .callout-content {
+        display: none;
+    }
+
+    .callout-fold .lucide {
+        transform: rotate(-90deg);
     }
 }
 
-div.language-ad-tip,
-div.callout-tip {
-    .admonition-title::before {
-        content: "💡";
-    }
-}
-
-div.language-ad-warning,
-div.callout-warning {
-    .admonition-title::before {
-        content: "⚠️";
-    }
-}
-
-div.language-ad-important,
-div.callout-important {
-    .admonition-title::before {
-        content: "❗️";
-    }
-}
-
-div.language-ad-caution,
-div.callout-caution {
-    .admonition-title::before {
-        content: "⚠️";
-    }
-}
-
-div.language-ad-info,
-div.callout-info {
-    .admonition-title::before {
-        content: "ℹ";
-    }
-}
-
-div.language-ad-example,
-div.callout-example {
-    .admonition-title::before {
-        content: "🗒️";
-    }
-}
-
-div.language-ad-seealso,
-div.callout-seealso {
-    .admonition-title::before {
-        content: "🖊️";
-    }
-}
-
-div.language-ad-abstract,
-div.callout-abstract {
-    .admonition-title::before {
-        content: '📚'
-    }
-}
-
-div.language-ad-summary,
-div.callout-summary {
-    .admonition-title::before {
-        content: '📚'
-    }
-}
-
-div.language-ad-tldr,
-div.callout-tldr {
-    .admonition-title::before {
-        content: '📚'
-    }
-}
-
-div.language-ad-todo,
-div.callout-todo {
-    .admonition-title::before {
-        content: '☑️'
-    }
-}
-
-div.language-ad-hint,
-div.callout-hint {
-    .admonition-title::before {
-        content: '🔥'
-    }
-}
-
-div.language-ad-success,
-div.callout-success {
-    .admonition-title::before {
-        content: ✅
-    }
-}
-
-div.language-ad-check,
-div.callout-check {
-    .admonition-title::before {
-        content: '✅'
-    }
-}
-
-div.language-ad-done,
-div.callout-done {
-    .admonition-title::before {
-        content: '✅'
-    }
-}
-
-div.language-ad-question,
-div.callout-question {
-    .admonition-title::before {
-        content: '❓'
-    }
-}
-
-div.language-ad-help,
-div.callout-help {
-    .admonition-title::before {
-        content: '❓'
-    }
-}
-
-div.language-ad-faq,
-div.callout-faq {
-    .admonition-title::before {
-        content: '❓'
-    }
-}
-
-div.language-ad-attention,
-div.callout-attention {
-    .admonition-title::before {
-        content: '⚠️'
-    }
-}
-
-div.language-ad-failure,
-div.callout-failure {
-    .admonition-title::before {
-        content: '❌'
-    }
-}
-
-div.language-ad-fail,
-div.callout-fail {
-    .admonition-title::before {
-        content: '❌'
-    }
-}
-
-div.language-ad-missing,
-div.callout-missing {
-    .admonition-title::before {
-        content: '❌'
-    }
-}
-
-div.language-ad-danger,
-div.callout-danger {
-    .admonition-title::before {
-        content: '⚡'
-    }
-}
-
-div.language-ad-error,
-div.callout-error {
-    .admonition-title::before {
-        content: '⚡'
-    }
-}
-
-div.language-ad-bug,
-div.callout-bug {
-    .admonition-title::before {
-        content: '🐞'
-    }
-}
-
-div.language-ad-quote,
-div.callout-quote {
-    .admonition-title::before {
-        content: '💬'
-    }
-}
-
-div.language-ad-cite,
-div.callout-cite {
-    .admonition-title::before {
-        content: '💬'
-    }
-}
-
-div.language-ad-note,
-div.callout-note {
-    background-color: rgba(68, 138, 255, .5)
-}
-
-div.language-ad-seealso,
-div.callout-seealso {
-    background-color: rgba(68, 138, 255, .5)
-}
-
-div.language-ad-abstract,
-div.callout-abstract {
-    background-color: rgba(0, 176, 255, .5)
-}
-
-div.language-ad-summary,
-div.callout-summary {
-    background-color: rgba(0, 176, 255, .5)
-}
-
-div.language-ad-tldr,
-div.callout-tldr {
-    background-color: rgba(0, 176, 255, .5)
-}
-
-div.language-ad-info,
-div.callout-info {
-    background-color: rgba(0, 184, 212, .5)
-}
-
-div.language-ad-todo,
-div.callout-todo {
-    background-color: rgba(0, 184, 212, .5)
-}
-
-div.language-ad-tip,
-div.callout-tip {
-    background-color: rgba(0, 191, 165, .5)
-}
-
-div.language-ad-hint,
-div.callout-hint {
-    background-color: rgba(0, 191, 165, .5)
-}
-
-div.language-ad-important,
-div.callout-important {
-    background-color: rgba(0, 191, 165, .5)
-}
-
-div.language-ad-success,
-div.callout-success {
-    background-color: rgba(0, 200, 83, .5)
-}
-
-div.language-ad-check,
-div.callout-check {
-    background-color: rgba(0, 200, 83, .5)
-}
-
-div.language-ad-done,
-div.callout-done {
-    background-color: rgba(0, 200, 83, .5)
-}
-
-div.language-ad-question,
-div.callout-question {
-    background-color: rgba(100, 221, 23, .5)
-}
-
-div.language-ad-help,
-div.callout-help {
-    background-color: rgba(100, 221, 23, .5)
-}
-
-div.language-ad-faq,
-div.callout-faq {
-    background-color: rgba(100, 221, 23, .5)
-}
-
-div.language-ad-warning,
-div.callout-warning {
-    background-color: rgba(255, 145, 0, .5)
-}
-
-div.language-ad-caution,
-div.callout-caution {
-    background-color: rgba(255, 145, 0, .5)
-}
-
-div.language-ad-attention,
-div.callout-attention {
-    background-color: rgba(255, 145, 0, .5)
-}
-
-div.language-ad-failure,
-div.callout-failure {
-    background-color: rgba(255, 82, 82, .5)
-}
-
-div.language-ad-fail,
-div.callout-fail {
-    background-color: rgba(255, 82, 82, .5)
-}
-
-div.language-ad-missing,
-div.callout-missing {
-    background-color: rgba(255, 82, 82, .5)
-}
-
-div.language-ad-danger,
-div.callout-danger {
-    background-color: rgba(255, 23, 68, .5)
-}
-
-div.language-ad-error,
-div.callout-error {
-    background-color: rgba(255, 23, 68, .5)
-}
-
-div.language-ad-bug,
-div.callout-bug {
-    background-color: rgba(245, 0, 87, .5)
-}
-
-div.language-ad-example,
-div.callout-example {
-    background-color: rgba(124, 77, 255, .5)
-}
-
-div.language-ad-quote,
-div.callout-quote {
-    background-color: rgba(158, 158, 158, .5)
-}
-
-div.language-ad-cite,
-div.callout-cite {
-    background-color: rgba(158, 158, 158, .5)
+.callout-fold .lucide {
+    transition: transform 100ms ease-in-out;
 }
diff --git a/src/site/styles/style.scss b/src/site/styles/style.scss
index c507eeb..d1b55bb 100644
--- a/src/site/styles/style.scss
+++ b/src/site/styles/style.scss
@@ -10,6 +10,15 @@
     --text-normal: #dcddde;
     --text-accent: rgb(97, 186, 245);
     --file-margins: 32px;
+
+    --callout-border-width: 0px;
+    --callout-border-opacity: 0.25;
+    --callout-padding: 12px 12px 12px 24px;
+    --callout-radius: 4px;
+    --callout-blend-mode: lighten;
+    --callout-title-padding: 0;
+    --callout-title-size: inherit;
+    --callout-content-padding: 0;
 }
 
 h1 {
@@ -92,3 +101,120 @@ p>code {
     color: #c7254e;
     background-color: #1a1a1a;
 }
+
+.callout {
+    --callout-color: 68, 138, 255;
+    --callout-icon: lucide-pencil;
+}
+.callout[data-callout="abstract"],
+.callout[data-callout="summary"],
+.callout[data-callout="tldr"] {
+    --callout-color: 0, 176, 255;
+    --callout-icon: lucide-clipboard-list;
+}
+.callout[data-callout="info"],
+.callout[data-callout="todo"] {
+    --callout-color: 0, 184, 212;
+}
+.callout[data-callout="info"] {
+    --callout-icon: lucide-info;
+}
+.callout[data-callout="todo"] {
+    --callout-icon: lucide-check-circle-2;
+}
+.callout[data-callout="tip"],
+.callout[data-callout="hint"],
+.callout[data-callout="important"] {
+    --callout-color: 0, 191, 165;
+    --callout-icon: lucide-flame;
+}
+.callout[data-callout="success"],
+.callout[data-callout="check"],
+.callout[data-callout="done"] {
+    --callout-color: 0, 200, 83;
+    --callout-icon: lucide-check;
+}
+.callout[data-callout="question"],
+.callout[data-callout="help"],
+.callout[data-callout="faq"] {
+    --callout-color: 100, 221, 23;
+    --callout-icon: help-circle;
+}
+.callout[data-callout="warning"],
+.callout[data-callout="caution"],
+.callout[data-callout="attention"] {
+    --callout-color: 255, 145, 0;
+    --callout-icon: lucide-alert-triangle;
+}
+.callout[data-callout="failure"],
+.callout[data-callout="fail"],
+.callout[data-callout="missing"] {
+    --callout-color: 255, 82, 82;
+    --callout-icon: lucide-x;
+}
+.callout[data-callout="danger"],
+.callout[data-callout="error"] {
+    --callout-color: 255, 23, 68;
+    --callout-icon: lucide-zap;
+}
+.callout[data-callout="bug"] {
+    --callout-color: 245, 0, 87;
+    --callout-icon: lucide-bug;
+}
+.callout[data-callout="example"] {
+    --callout-color: 124, 77, 255;
+    --callout-icon: lucide-list;
+}
+.callout[data-callout="quote"],
+.callout[data-callout="cite"] {
+    --callout-color: 158, 158, 158;
+    --callout-icon: quote-glyph;
+}
+.callout {
+    overflow: hidden;
+    border-style: solid;
+    border-color: rgba(var(--callout-color), var(--callout-border-opacity));
+    border-width: var(--callout-border-width);
+    border-radius: var(--callout-radius);
+    margin: 1em 0;
+    mix-blend-mode: var(--callout-blend-mode);
+    background-color: rgba(var(--callout-color), 0.1);
+    padding: var(--callout-padding);
+}
+.callout.is-collapsible .callout-title {
+    cursor: default;
+}
+.callout-title {
+    padding: var(--callout-title-padding);
+    display: flex;
+    gap: 4px;
+    font-size: var(--callout-title-size);
+    color: rgb(var(--callout-color));
+    line-height: 1.3;
+}
+.callout-content {
+    overflow-x: auto;
+    padding: var(--callout-content-padding);
+}
+.callout-icon {
+    flex: 0 0 auto;
+    display: flex;
+    align-self: center;
+}
+.callout-icon .svg-icon {
+    color: rgb(var(--callout-color));
+}
+.callout-title-inner {
+    font-weight: 600;
+}
+.callout-fold {
+    display: flex;
+    align-items: center;
+    padding-right: 8px;
+}
+.callout-fold .svg-icon {
+    transition: transform 100ms ease-in-out;
+}
+.callout.is-collapsed .callout-fold .svg-icon {
+    transform: rotate(-90deg);
+}