From a85d0a77d76b84dd615acf796a8487576360e262 Mon Sep 17 00:00:00 2001
From: Mustafa Mutti Atak <75087023+Mutti499@users.noreply.github.com>
Date: Wed, 6 Nov 2024 01:33:46 +0300
Subject: [PATCH 1/3] adding mermaid in files with parameters

---
 content/undergraduate/curriculum.en.md | 1 +
 layouts/partials/footer/footer.html    | 3 +++
 2 files changed, 4 insertions(+)

diff --git a/content/undergraduate/curriculum.en.md b/content/undergraduate/curriculum.en.md
index c363328..666932a 100644
--- a/content/undergraduate/curriculum.en.md
+++ b/content/undergraduate/curriculum.en.md
@@ -5,6 +5,7 @@ metadata: none
 toc: false
 weight: 2
 type: wide
+hasMermaid: true
 ---
 
 <!-- prettier-ignore-start -->
diff --git a/layouts/partials/footer/footer.html b/layouts/partials/footer/footer.html
index 2202d9d..2f8975a 100644
--- a/layouts/partials/footer/footer.html
+++ b/layouts/partials/footer/footer.html
@@ -26,4 +26,7 @@ <h5 class="mb-4">{{- .Name -}}</h5>
             {{ end }}
         </ul>
     </div>
+    {{ if .Params.hasMermaid }}
+        {{ partial "footer/optional-scripts.html" . }}
+    {{ end }}
 </footer>

From 94a50565245670cf62f0749feda23b83806e7e96 Mon Sep 17 00:00:00 2001
From: Mustafa Mutti Atak <75087023+Mutti499@users.noreply.github.com>
Date: Sat, 9 Nov 2024 01:51:29 +0300
Subject: [PATCH 2/3] trying mermaid control with shortcode

---
 content/undergraduate/curriculum.en.md |  3 +-
 layouts/shortcodes/svg-graph.html      | 55 ++++++++++++++++++++++++++
 2 files changed, 57 insertions(+), 1 deletion(-)
 create mode 100644 layouts/shortcodes/svg-graph.html

diff --git a/content/undergraduate/curriculum.en.md b/content/undergraduate/curriculum.en.md
index 666932a..daea593 100644
--- a/content/undergraduate/curriculum.en.md
+++ b/content/undergraduate/curriculum.en.md
@@ -87,7 +87,7 @@ hasMermaid: true
 ## Course Prerequisites Graph
 
 ```mermaid "caption=prerequisites"
-%%{ init: { 'flowchart': { 'curve': 'linear' } } }%%
+{{< svg-graph >}}
 flowchart TD
 
 classDef core fill:#0072B2,stroke:none,stroke-width:2px,color:#eee,font-weight:bolder
@@ -233,6 +233,7 @@ click CC6 href "/undergraduate/electives" "Undergraduate Electives"
 
 click HSS1 href "/undergraduate/electives" "Undergraduate Electives"
 click HSS2 href "/undergraduate/electives" "Undergraduate Electives"
+{{< /svg-graph >}}
 ```
 
 ## Committee
diff --git a/layouts/shortcodes/svg-graph.html b/layouts/shortcodes/svg-graph.html
new file mode 100644
index 0000000..f25b243
--- /dev/null
+++ b/layouts/shortcodes/svg-graph.html
@@ -0,0 +1,55 @@
+<!-- layouts/shortcodes/svg-graph.html -->
+<div id="graphDiv"></div>
+<style type="text/css">
+    #mySvgId {
+      width: 100%;
+      height: 80vh; /* This sets the height relative to the viewport height */
+    }
+  
+    /* Media query for mobile devices */
+    @media (max-width: 768px) {
+      #mySvgId {
+        height: 300px; /* Utilize full viewport height on smaller screens */
+        width: 100%;
+      }
+    }
+  
+    /* Optional: Additional styles for tablets */
+    @media (min-width: 769px) and (max-width: 1024px) {
+      #mySvgId {
+        height: 85vh;
+        width: 100%;
+      }
+    }
+  
+    /* Desktop-specific styling */
+    @media (min-width: 1025px) {
+      #mySvgId {
+        height: 600px;
+        width: 100%;
+      }
+    }
+  </style>
+  
+<script src="https://bumbu.me/svg-pan-zoom/dist/svg-pan-zoom.min.js"></script>
+<script type="module">
+  import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
+  mermaid.initialize({ startOnLoad: false });
+
+  const drawDiagram = async function () {
+    const element = document.querySelector('#graphDiv');
+    const graphDefinition = `{{ .Inner | safeJS }}`; // Captures content between shortcode tags
+    console.log(graphDefinition);
+    const { svg } = await mermaid.render('mySvgId', graphDefinition);
+    element.innerHTML = svg.replace(/( )*max-width:( 0-9\.)*px;/i, '');
+
+
+    let panZoom = svgPanZoom('#mySvgId', {
+      zoomEnabled: true,
+      controlIconsEnabled: true,
+      center: true,
+      zoomScaleSensitivity: 0.5,
+    });
+  };
+  await drawDiagram();
+</script>

From c6f378f2c1e042d0198a2da74eb3ef9bd83fc0d7 Mon Sep 17 00:00:00 2001
From: Mustafa Mutti Atak <75087023+Mutti499@users.noreply.github.com>
Date: Sat, 9 Nov 2024 01:59:56 +0300
Subject: [PATCH 3/3] fixing needless names and mermaid tags

---
 content/undergraduate/curriculum.en.md |  3 +--
 layouts/shortcodes/svg-graph.html      | 15 +++++++--------
 2 files changed, 8 insertions(+), 10 deletions(-)

diff --git a/content/undergraduate/curriculum.en.md b/content/undergraduate/curriculum.en.md
index daea593..6a9fe96 100644
--- a/content/undergraduate/curriculum.en.md
+++ b/content/undergraduate/curriculum.en.md
@@ -86,7 +86,6 @@ hasMermaid: true
 
 ## Course Prerequisites Graph
 
-```mermaid "caption=prerequisites"
 {{< svg-graph >}}
 flowchart TD
 
@@ -234,7 +233,7 @@ click CC6 href "/undergraduate/electives" "Undergraduate Electives"
 click HSS1 href "/undergraduate/electives" "Undergraduate Electives"
 click HSS2 href "/undergraduate/electives" "Undergraduate Electives"
 {{< /svg-graph >}}
-```
+
 
 ## Committee
 
diff --git a/layouts/shortcodes/svg-graph.html b/layouts/shortcodes/svg-graph.html
index f25b243..aed8f28 100644
--- a/layouts/shortcodes/svg-graph.html
+++ b/layouts/shortcodes/svg-graph.html
@@ -1,14 +1,14 @@
 <!-- layouts/shortcodes/svg-graph.html -->
 <div id="graphDiv"></div>
 <style type="text/css">
-    #mySvgId {
+    #courseSvg {
       width: 100%;
       height: 80vh; /* This sets the height relative to the viewport height */
     }
   
     /* Media query for mobile devices */
     @media (max-width: 768px) {
-      #mySvgId {
+      #courseSvg {
         height: 300px; /* Utilize full viewport height on smaller screens */
         width: 100%;
       }
@@ -16,7 +16,7 @@
   
     /* Optional: Additional styles for tablets */
     @media (min-width: 769px) and (max-width: 1024px) {
-      #mySvgId {
+      #courseSvg {
         height: 85vh;
         width: 100%;
       }
@@ -24,7 +24,7 @@
   
     /* Desktop-specific styling */
     @media (min-width: 1025px) {
-      #mySvgId {
+      #courseSvg {
         height: 600px;
         width: 100%;
       }
@@ -33,18 +33,17 @@
   
 <script src="https://bumbu.me/svg-pan-zoom/dist/svg-pan-zoom.min.js"></script>
 <script type="module">
-  import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
+  import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.esm.min.mjs';
   mermaid.initialize({ startOnLoad: false });
 
   const drawDiagram = async function () {
     const element = document.querySelector('#graphDiv');
     const graphDefinition = `{{ .Inner | safeJS }}`; // Captures content between shortcode tags
-    console.log(graphDefinition);
-    const { svg } = await mermaid.render('mySvgId', graphDefinition);
+    const { svg } = await mermaid.render('courseSvg', graphDefinition);
     element.innerHTML = svg.replace(/( )*max-width:( 0-9\.)*px;/i, '');
 
 
-    let panZoom = svgPanZoom('#mySvgId', {
+    let panZoom = svgPanZoom('#courseSvg', {
       zoomEnabled: true,
       controlIconsEnabled: true,
       center: true,