From d9945abf65a83e25ee02c6cf37262f8e90dc2973 Mon Sep 17 00:00:00 2001
From: Aaron Pham <contact@aarnphm.xyz>
Date: Sat, 28 Dec 2024 17:15:25 -0800
Subject: [PATCH] perf: reduce bundle size

Signed-off-by: Aaron Pham <contact@aarnphm.xyz>
---
 quartz/components/Body.tsx                    | 43 +++++++++++++++++--
 quartz/components/Mermaid.tsx                 |  0
 .../{mermaid.inline.scss => mermaid.scss}     |  0
 3 files changed, 40 insertions(+), 3 deletions(-)
 create mode 100644 quartz/components/Mermaid.tsx
 rename quartz/components/styles/{mermaid.inline.scss => mermaid.scss} (100%)

diff --git a/quartz/components/Body.tsx b/quartz/components/Body.tsx
index 96b627883..5461df452 100644
--- a/quartz/components/Body.tsx
+++ b/quartz/components/Body.tsx
@@ -1,13 +1,50 @@
 // @ts-ignore
 import clipboardScript from "./scripts/clipboard.inline"
 import clipboardStyle from "./styles/clipboard.scss"
+// @ts-ignore
+import mermaidScript from "./scripts/mermaid.inline"
+import mermaidStyle from "./styles/mermaid.scss"
 import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types"
 
 const Body: QuartzComponent = ({ children }: QuartzComponentProps) => {
-  return <div id="quartz-body">{children}</div>
+  return (
+    <div id="quartz-body">
+      {children}
+      <div id="mermaid-container">
+        <div class="mermaid-backdrop" />
+        <div id="mermaid-space">
+          <div class="mermaid-header">
+            <button
+              class="close-button"
+              aria-label="close button"
+              title="close button"
+              type="button"
+            >
+              <svg
+                aria-hidden="true"
+                xmlns="http://www.w3.org/2000/svg"
+                width="24"
+                height="24"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="2"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              >
+                <line x1={18} y1={6} x2={6} y2={18} />
+                <line x1={6} y1={6} x2={18} y2={18} />
+              </svg>
+            </button>
+          </div>
+          <div class="mermaid-content" />
+        </div>
+      </div>
+    </div>
+  )
 }
 
-Body.afterDOMLoaded = clipboardScript
-Body.css = clipboardStyle
+Body.afterDOMLoaded = clipboardScript + mermaidScript
+Body.css = clipboardStyle + mermaidStyle
 
 export default (() => Body) satisfies QuartzComponentConstructor
diff --git a/quartz/components/Mermaid.tsx b/quartz/components/Mermaid.tsx
new file mode 100644
index 000000000..e69de29bb
diff --git a/quartz/components/styles/mermaid.inline.scss b/quartz/components/styles/mermaid.scss
similarity index 100%
rename from quartz/components/styles/mermaid.inline.scss
rename to quartz/components/styles/mermaid.scss