Quartz sync: Jun 1, 2025, 11:34 PM

Author: codeyoma

quartz/components/scripts/mindmap.inline.ts

@@ -213,10 +213,13 @@ function cleanupGlobalMindmaps() {
 
 document.addEventListener("nav", async () => {
 
+  const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent)
+
   async function renderLocalMindmap() {
     cleanupLocalMindmaps()
     const mindmapContainers = document.getElementsByClassName("mindmap-container")
     for (const container of mindmapContainers) {
+      isSafari && container.classList.add("is-safari")
       localMindmapCleanups.push(await renderMindmap(container as HTMLElement))
     }
   }
@@ -243,6 +246,7 @@ document.addEventListener("nav", async () => {
       const mindmapContainer = container.querySelector(".global-mindmap-container") as HTMLElement
       registerEscapeHandler(container, hideGlobalMindmap)
       if (mindmapContainer) {
+        isSafari && mindmapContainer.classList.add("is-safari")
         globalMindmapCleanups.push(await renderMindmap(mindmapContainer))
       }
     }

quartz/components/styles/mindmap.scss

@@ -33,10 +33,14 @@
       }
 
       blockquote {
-        max-width: 640px;
-        width: auto;
+        width: auto !important;
+        max-width: 640px !important;
         margin-bottom: .1em;
 
+        .callout-icon {
+          margin: auto 0;
+        }
+
         .callout-content {
           padding-bottom: .5em;
         }
@@ -68,6 +72,21 @@
     }
   }
 
+
+  .is-safari {
+    .markmap {
+      .callout-icon {
+        -webkit-mask-image: none !important;
+        mask-image: none !important;
+        background-image: var(--callout-icon) !important;
+        background-repeat: no-repeat;
+        background-color: unset !important;
+        background-size: contain;
+        background-position: center;
+      }
+    }
+  }
+
   .mindmap-toolbar {
     position: absolute;
     top: 10;

quartz/plugins/transformers/mindmap.ts

@@ -141,7 +141,7 @@ function calloutReplacement() {
       const typeClass = canonicalizeCallout(type.toLowerCase())
       const contents = remain.replace(/<br\s*\/?>/g, "")
       return `
-            <blockquote class="callout ${typeClass}" data-callout="${typeClass}" style="max-width: 640px; width: auto;">
+            <blockquote class="callout ${typeClass}" data-callout="${typeClass}">
               <div class="callout-title">
                 <div class="callout-icon"></div>
                 <div class="callout-title-inner"><p>${type}</p></div>