From 1a9b43eaabdad84eb697c54723dcf31cca1cedf0 Mon Sep 17 00:00:00 2001
From: Chris Makler <chris.makler@gmail.com>
Date: Wed, 24 Jul 2024 12:31:29 -0400
Subject: [PATCH] adding navigation

---
 _data/toc.yml         |  5 ++++
 _layouts/default.html | 67 +++++++++++++++++++++++++++----------------
 index.md              | 12 +++++++-
 3 files changed, 59 insertions(+), 25 deletions(-)
 create mode 100644 _data/toc.yml
diff --git a/_data/toc.yml b/_data/toc.yml
new file mode 100644
index 0000000..8fc98e9
--- /dev/null
+++ b/_data/toc.yml
@@ -0,0 +1,5 @@
+- title: Elasticity
+  folder: elasticity
+  graphs:
+  - title: Midpoint Method
+    filename: midpoint
\ No newline at end of file
diff --git a/_layouts/default.html b/_layouts/default.html
index cc2ab61..14fa3cf 100644
--- a/_layouts/default.html
+++ b/_layouts/default.html
@@ -2,12 +2,15 @@
 <html>
   <head>
     <meta charset="utf-8">
-    <title>Graph</title>
+    <title id="kg-title">Graph</title>
   </head>
   <body>
     <div id="kg-graph" class="kg-container">
       (loading. please wait)
     </div>
+    <div id="kg-toc" style="display:none">
+      {{ content }}
+    </div>
     <button id="kg-reset" style="float:right; display:none" onclick="KG.resetAllParams()">Reset Graph</button>
   </body>
       <script>
@@ -15,31 +18,47 @@
         const queryString = window.location.search;
         const urlParams = new URLSearchParams(queryString);
 
-        // Get location of graph, set URL in graph div
-        const category = urlParams.get('folder');
-        const graph = urlParams.get('graph');      
-        const path = "{{site.baseurl}}/graphs/" + category + "/" + graph + ".yml";
-        document.getElementById("kg-graph").setAttribute("src", path);
+        // Set title, if there is one
+        const title = urlParams.get('title');
+        if(title) {
+          document.getElementById("kg-title").innerHTML = title;
+        }
+
+        // Look for graph specified in 
+        let graphDiv = document.getElementById("kg-graph")
+        const category = urlParams.get('category');
+        const graph = urlParams.get('graph');
+        if(category && graph) {
+          const path = "{{site.baseurl}}/graphs/" + category + "/" + graph + ".yml";
+          graphDiv.setAttribute("src", path);
+
+          // Get KGJS version, set JS and CSS to point to appropriate paths
+          const version = urlParams.get('version') || "0.3.2";
+          
+          const kgjspath = "{{site.baseurl}}/static/js/kg3d."+ version + ".js";
+          let kgjs=document.createElement("script");
+          kgjs.setAttribute("src", kgjspath);
+          document.body.appendChild(kgjs);
+
+          // Add reset button
+          const allowReset = urlParams.get('allowReset');
+          if(allowReset) {
+            document.getElementById("kg-reset").setAttribute("style","float:right; display:block");
+          }
+          
+          const kgcsspath = "{{site.baseurl}}/static/css/kg."+ version + ".css";
+          let kgcss=document.createElement("link");
+          kgcss.setAttribute("href", kgcsspath);
+          kgcss.setAttribute("rel", "stylesheet");
+          kgcss.setAttribute("type", "text/css");
+          document.head.appendChild(kgcss);
+
+        } else {
 
-        // Get KGJS version, set JS and CSS to point to appropriate paths
-        const version = urlParams.get('version') || "0.3.2";
-        
-        const kgjspath = "{{site.baseurl}}/static/js/kg3d."+ version + ".js";
-        let kgjs=document.createElement("script");
-        kgjs.setAttribute("src", kgjspath);
-        document.body.appendChild(kgjs);
+          graphDiv.innerHTML = "";
+          let tocDiv = document.getElementById("kg-toc");
+          tocDiv.setAttribute("style", "display:block");
 
-        // Add reset button
-        const allowReset = urlParams.get('allowReset');
-        if(allowReset) {
-          document.getElementById("kg-reset").setAttribute("style","float:right; display:block");
         }
-        
-        const kgcsspath = "{{site.baseurl}}/static/css/kg."+ version + ".css";
-        let kgcss=document.createElement("link");
-        kgcss.setAttribute("href", kgcsspath);
-        kgcss.setAttribute("rel", "stylesheet");
-        kgcss.setAttribute("type", "text/css");
-        document.head.appendChild(kgcss);
       </script>
 </html>
\ No newline at end of file
diff --git a/index.md b/index.md
index fe633a1..116b76c 100644
--- a/index.md
+++ b/index.md
@@ -2,4 +2,14 @@
 layout: default
 ---
 
-
+<ul>
+{% for category in site.data.toc %}
+<li>{{ category.title }}
+	<ul>
+{% for graph in category.graphs %}
+<li><a href="?category={{category.folder}}&graph={{ graph.filename }}">{{graph.title}}</a></li>
+{% endfor %}
+	</ul>
+</li>
+{% endfor %}
+<ul>
\ No newline at end of file
