From 862a6a5dcd437422e9cbeec77038d6130a93ddad Mon Sep 17 00:00:00 2001
From: Utsob Roy <roy@utsob.me>
Date: Tue, 14 Feb 2023 11:37:52 +0600
Subject: [PATCH 1/8] implement focus on hovered and neigbors

---
 src/site/_includes/components/graphScript.njk | 52 +++++++++++++++----
 1 file changed, 43 insertions(+), 9 deletions(-)

diff --git a/src/site/_includes/components/graphScript.njk b/src/site/_includes/components/graphScript.njk
index 1e8f970..b3b189b 100644
--- a/src/site/_includes/components/graphScript.njk
+++ b/src/site/_includes/components/graphScript.njk
@@ -51,6 +51,12 @@
     var Graph;
 
     function renderGraph(graphData, id, width, height, delay) {
+
+        const highlightNodes = new Set();
+        let hoverNode = null;
+        const color = getCssVar("--text-accent");
+        const mutedColor = getCssVar("--text-faint");
+
         let Graph = ForceGraph()
         (document.getElementById(id))
             .graphData(graphData)
@@ -63,15 +69,34 @@
             .height(height)
             .linkDirectionalArrowLength(2)
             .linkDirectionalArrowRelPos(0.5)
-            .linkColor(() => getCssVar("--text-muted") || getCssVar("--text-normal"))
+            .autoPauseRedraw(false)
+            .linkColor((link) => {
+                if (hoverNode == null) {
+                    return color;
+                }
+                if (link.source.id == hoverNode.id || link.target.id == hoverNode.id) {
+                    return color;
+                } else {
+                    return mutedColor;
+                }
+                
+            })
             .nodeCanvasObject((node, ctx) => {
-                const color = getCssVar("--text-accent");
                 const numberOfNeighbours = (node.neighbors && node.neighbors.length) || 2;
                 const nodeR = Math.min(7, Math.max(numberOfNeighbours / 2, 2));
                 
                 ctx.beginPath();
                 ctx.arc(node.x, node.y, nodeR, 0, 2 * Math.PI, false);
-                ctx.fillStyle = color;
+                if (hoverNode == null) {
+                    ctx.fillStyle = color;
+                } else {
+                    if (node == hoverNode || highlightNodes.has(node.url)) {
+                        ctx.fillStyle = color;
+                    } else {
+                        ctx.fillStyle = mutedColor;
+                    }
+                }
+                 
                 ctx.fill();
                 
                 if (node.current) {
@@ -91,13 +116,22 @@
                 ctx.fillText(label, node.x, node.y + nodeR + 2);
             })
             .onNodeClick(node => {
-                    window.location = node.url;
-                });
-                if (delay != null && graphData.nodes.length > 2) {
-                    setTimeout(() => {
-                        Graph.zoomToFit(5, 75);
-                    }, delay);
+                window.location = node.url;
+            })
+            .onNodeHover(node => {
+                highlightNodes.clear();
+                if (node) {
+                highlightNodes.add(node);
+                node.neighbors.forEach(neighbor => highlightNodes.add(neighbor));
                 }
+                hoverNode = node || null;
+                
+            });
+            if (delay != null && graphData.nodes.length > 4) {
+                setTimeout(() => {
+                    Graph.zoomToFit(5, 75);
+                }, delay);
+            }
         return Graph;
     }
 

From 353e2094b6868b057903726c3f5edd0e0b2ff814 Mon Sep 17 00:00:00 2001
From: Utsob Roy <roy@utsob.me>
Date: Tue, 14 Feb 2023 15:07:13 +0600
Subject: [PATCH 2/8] graph enhancements

---
 src/site/_includes/components/graphScript.njk |  30 +++-
 src/site/_includes/components/sidebar.njk     |   5 +-
 src/site/styles/digital-garden-base.scss      | 149 ++++++++++--------
 3 files changed, 112 insertions(+), 72 deletions(-)

diff --git a/src/site/_includes/components/graphScript.njk b/src/site/_includes/components/graphScript.njk
index b3b189b..055e732 100644
--- a/src/site/_includes/components/graphScript.njk
+++ b/src/site/_includes/components/graphScript.njk
@@ -50,15 +50,17 @@
 
     var Graph;
 
-    function renderGraph(graphData, id, width, height, delay) {
-
+    function renderGraph(graphData, id, delay) {
+        const el = document.getElementById(id);
+        width = el.offsetWidth;
+        height = el.offsetHeight;
         const highlightNodes = new Set();
         let hoverNode = null;
         const color = getCssVar("--text-accent");
         const mutedColor = getCssVar("--text-faint");
 
         let Graph = ForceGraph()
-        (document.getElementById(id))
+        (el)
             .graphData(graphData)
             .nodeId('id')
             .nodeLabel('title')
@@ -138,7 +140,7 @@
     function fetchGraphData() {
         fetch('/graph.json').then(res => res.json()).then(data => {
             window.graphData = data;
-            Graph = renderGraph(filterToDepth(JSON.parse(JSON.stringify(data))), "link-graph", 320, 320, 1);
+            Graph = renderGraph(filterToDepth(JSON.parse(JSON.stringify(data))), "link-graph", 1);
         });
     }
 
@@ -153,7 +155,7 @@
             Graph._destructor();
             Graph = null;
         }
-        renderGraph(filterToDepth(JSON.parse(JSON.stringify(window.graphData))), "link-graph", 320, 320, 1);
+        renderGraph(filterToDepth(JSON.parse(JSON.stringify(window.graphData))), "link-graph", 1);
     })
 
     window.fullGraph = null;
@@ -169,7 +171,7 @@
             g.classList.add('show');
             document.body.appendChild(g);
             g.innerHTML = '<i class="fa fa-times" id="full-graph-close" aria-hidden="true"></i><div id="full-graph-container"></div>';
-            window.fullGraph = renderGraph(graphData, "full-graph-container", g.offsetWidth, g.offsetHeight, 200);
+            window.fullGraph = renderGraph(graphData, "full-graph-container", 200);
             document.getElementById('full-graph-close').addEventListener('click', (evt) => {
                 g.classList.remove('show');
                 window.fullGraph._destructor();
@@ -180,8 +182,20 @@
         
     }
 
-    document.getElementById('graph-full-btn').addEventListener('click', (evt) => {
-        if (!fullGraph) {
+    document.getElementById('graph-fs-btn').addEventListener('click', (evt) => {
+        const el = document.querySelector('.graph');
+        if (el.classList.contains('graph-fs')) {
+            el.classList.remove('graph-fs');
+            Graph.width(el.offsetWidth).height(el.offsetHeight);
+        } else {
+            el.classList.add('graph-fs');
+            Graph.width(el.offsetWidth).height(el.offsetHeight);
+        }
+        
+    });
+
+    document.getElementById('global-graph-btn').addEventListener('click', (evt) => {
+        if (!window.fullGraph) {
             renderFullGraph();
         }
     });
diff --git a/src/site/_includes/components/sidebar.njk b/src/site/_includes/components/sidebar.njk
index 9946350..c51cece 100644
--- a/src/site/_includes/components/sidebar.njk
+++ b/src/site/_includes/components/sidebar.njk
@@ -19,7 +19,10 @@
                                                 </div>
                                                 <span id="depth-display"></span>
                                           </div>
-                                          <i class="fa fa-arrows-alt" id="graph-full-btn" aria-hidden="true"></i>
+                                          <div class="ctrl-right">
+                                                <i class="fa fa-globe" id="global-graph-btn" aria-hidden="true"></i>
+                                                <i class="fa fa-arrows-alt" id="graph-fs-btn" aria-hidden="true"></i>
+                                          </div>
                                     </div>
                               </div>
                               <div id="link-graph"></div>
diff --git a/src/site/styles/digital-garden-base.scss b/src/site/styles/digital-garden-base.scss
index ce9d506..7146b10 100644
--- a/src/site/styles/digital-garden-base.scss
+++ b/src/site/styles/digital-garden-base.scss
@@ -15,16 +15,15 @@ body {
     margin-top: 90px;
     position: relative;
 
-    @media(max-width: 800px) {
+    @media (max-width: 800px) {
         margin-top: 75px;
     }
-
 }
 
 .external-link {
     background-position: center right;
     background-repeat: no-repeat;
-    background-image: linear-gradient(transparent, transparent), url('/img/outgoing.svg');
+    background-image: linear-gradient(transparent, transparent), url("/img/outgoing.svg");
     background-size: 13px;
     padding-right: 16px;
     background-position-y: 4px;
@@ -62,6 +61,33 @@ ul.task-list {
     display: flex;
     z-index: 3;
     max-width: 350px;
+
+    .graph {
+        width: 320px;
+        height: 320px;
+
+        #link-graph {
+            width: 100%;
+            height: 100%;
+        }
+    }
+    .graph-fs {
+        position: fixed;
+        top: 50%;
+        left: 50%;
+        height: calc(100vmin - 100px);
+        width: calc(100vmin - 100px);
+        min-height: 350px;
+        min-width: 350px;
+        transform: translate(-50%, -50%);
+        z-index: 9999;
+        display: none;
+        background-color: var(--background-secondary);
+
+        .graph-title {
+            display: none;
+        }
+    }
 }
 
 .expand-line {
@@ -88,10 +114,10 @@ ul.task-list {
 }
 
 .toc-container {
-    font-size: 1rem; 
-    max-height: 220px; 
+    font-size: 1rem;
+    max-height: 220px;
     overflow-y: auto;
-    margin-bottom:10px;
+    margin-bottom: 10px;
     border-left: 1px solid var(--text-accent);
     ul {
         list-style-type: none;
@@ -100,19 +126,19 @@ ul.task-list {
         margin-bottom: 0;
     }
     ul:not(:first-child) {
-        margin-bottom:3px;
+        margin-bottom: 3px;
     }
 
-    li{
+    li {
         padding-top: 4px;
-        &::before{
-            content: '# ' !important;
+        &::before {
+            content: "# " !important;
             color: var(--text-accent);
             font-size: 0.8rem;
         }
-        a{
+        a {
             text-decoration: none;
-            &:hover{
+            &:hover {
                 text-decoration: underline;
             }
         }
@@ -149,7 +175,7 @@ ul.task-list {
     border-left: 1px solid var(--text-accent);
     max-height: 200px;
     overflow-y: auto;
-    overflow-x:hidden;
+    overflow-x: hidden;
 }
 
 .backlink-card {
@@ -164,15 +190,14 @@ ul.task-list {
     }
 }
 
-.no-backlinks-message{
+.no-backlinks-message {
     font-size: 0.8rem;
     color: var(--text-normal);
 }
 
 .graph {
-
     .graph-title-container {
-        display: flex; 
+        display: flex;
         justify-content: flex-end;
         width: 320px;
     }
@@ -195,9 +220,7 @@ ul.task-list {
     width: fit-content;
 }
 
-
-
-@media(max-width: 1400px) {
+@media (max-width: 1400px) {
     #link-graph {
         border-radius: 0 10px 10px 10px;
     }
@@ -209,11 +232,11 @@ ul.task-list {
         max-width: 700px;
         margin: auto;
         border-radius: 0;
-        border-top: 2px solid var(--background-secondary); 
+        border-top: 2px solid var(--background-secondary);
         justify-content: space-between;
     }
 
-    .sidebar-container{
+    .sidebar-container {
         display: flex;
         flex-direction: row;
         justify-content: space-between;
@@ -221,7 +244,7 @@ ul.task-list {
 
     .graph {
         flex: 1;
-        .graph-title-container{
+        .graph-title-container {
             justify-content: flex-start;
         }
     }
@@ -230,8 +253,8 @@ ul.task-list {
         display: none;
     }
 }
-@media(max-width: 800px) {
-    .sidebar-container{
+@media (max-width: 800px) {
+    .sidebar-container {
         display: flex;
         flex-direction: column-reverse;
     }
@@ -252,7 +275,7 @@ ul.task-list {
     h1 {
         font-size: 32px !important;
     }
-    @media(max-width: 800px) {
+    @media (max-width: 800px) {
         h1 {
             display: none;
         }
@@ -269,7 +292,7 @@ ul.task-list {
     justify-content: flex-end;
     margin-bottom: -60px;
 
-    @media(max-width: 800px) {
+    @media (max-width: 800px) {
         justify-content: center;
     }
 
@@ -290,11 +313,11 @@ ul.task-list {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    @media(max-width: 1400px) {
+    @media (max-width: 1400px) {
         position: fixed;
     }
 
-    @media(max-width: 800px) {
+    @media (max-width: 800px) {
         h1 {
             font-size: 18px !important;
         }
@@ -307,8 +330,7 @@ ul.task-list {
     }
 
     .search-button {
-
-        @media(max-width: 800px) {
+        @media (max-width: 800px) {
             min-width: 36px;
             margin: 10px 25px 10px 25px;
         }
@@ -317,7 +339,7 @@ ul.task-list {
     .search-text {
         display: flex;
         justify-content: center;
-        @media(max-width: 800px){
+        @media (max-width: 800px) {
             display: none;
         }
     }
@@ -325,7 +347,7 @@ ul.task-list {
 
 .notelink {
     padding: 5px 0 5px 25px;
-    a{
+    a {
         &:hover {
             text-decoration: underline !important;
         }
@@ -361,10 +383,9 @@ ul.task-list {
     right: 0;
     left: 0;
     bottom: 0;
-    z-index: 5
+    z-index: 5;
 }
 
-
 .search-container {
     background-color: rgba(0, 0, 0, 0.5);
     position: fixed;
@@ -400,7 +421,6 @@ ul.task-list {
     font-size: 2rem;
     background-color: var(--background-primary);
     color: var(--text-primary);
-
 }
 
 .search-box input:focus {
@@ -425,7 +445,7 @@ ul.task-list {
     font-size: 1.2rem;
     cursor: pointer;
 
-    &.active{
+    &.active {
         border: 2px solid var(--text-accent);
     }
 }
@@ -459,25 +479,21 @@ ul.task-list {
     border: 1px solid var(--text-normal);
     cursor: pointer;
 
-    >span {
+    > span {
         padding: 3px 3px 3px 10px;
     }
 
-    >i {
+    > i {
         margin-left: 10px;
     }
 
     &:hover {
         border: 1px solid var(--text-accent);
     }
-
-
 }
 
-
-
 .search-keys {
-    @media(max-width: 800px) {
+    @media (max-width: 800px) {
         display: none;
     }
 }
@@ -487,12 +503,12 @@ ul.task-list {
 .callout-icon,
 .callout-fold,
 .callout-content {
-  margin: 0;
-  padding: 0;
+    margin: 0;
+    padding: 0;
 }
 
-.callout-fold{
-   cursor: pointer; 
+.callout-fold {
+    cursor: pointer;
 }
 
 .callout-title {
@@ -501,10 +517,10 @@ ul.task-list {
 }
 
 .callout {
-  font-family: "Roboto", sans-serif;
-  word-wrap: break-word;
-  display: block;
-  font-size: 1rem;
+    font-family: "Roboto", sans-serif;
+    word-wrap: break-word;
+    display: block;
+    font-size: 1rem;
 }
 
 .callout.is-collapsed {
@@ -524,13 +540,11 @@ ul.task-list {
 .referred {
     border: 1px dashed;
     border-color: var(--text-accent);
-    padding: 10px;  
+    padding: 10px;
     margin-left: -10px;
-    margin-right: -10px; 
+    margin-right: -10px;
 }
 
-
-
 // Graph Controls
 .graph-title-container {
     position: relative;
@@ -540,15 +554,20 @@ ul.task-list {
     position: fixed;
     top: 50%;
     left: 50%;
-    height: 60vh;
-    width: 60vw;
-    min-height: 400px;
-    min-width: 400px;
+    height: calc(100vmin - 100px);
+    width: calc(100vmin - 100px);
+    min-height: 350px;
+    min-width: 350px;
     transform: translate(-50%, -50%);
     z-index: 9999;
     display: none;
     background-color: var(--background-secondary);
 
+    #full-graph-container {
+        width: 100%;
+        height: 100%;
+    }
+
     #full-graph-close {
         position: absolute;
         top: 10px;
@@ -580,12 +599,16 @@ ul.task-list {
     color: var(--text-accent);
     z-index: 9;
 
+    i {
+        cursor: pointer;
+    }
+
     .depth-control {
         display: flex;
         flex-direction: row;
         align-items: flex-start;
         gap: 7px;
-        
+
         .slider {
             datalist {
                 display: flex;
@@ -616,7 +639,7 @@ ul.task-list {
     }
 }
 
-input[type=range]::-webkit-slider-thumb {
-  -webkit-appearance: none;
-  margin-top: -10px;
+input[type="range"]::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    margin-top: -10px;
 }

From 2e24548a718796c6f8e2873f8c32b41f7da97e9f Mon Sep 17 00:00:00 2001
From: Utsob Roy <roy@utsob.me>
Date: Tue, 14 Feb 2023 15:38:12 +0600
Subject: [PATCH 3/8] graph enhancements

---
 src/site/styles/digital-garden-base.scss | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/src/site/styles/digital-garden-base.scss b/src/site/styles/digital-garden-base.scss
index 7146b10..74aaaef 100644
--- a/src/site/styles/digital-garden-base.scss
+++ b/src/site/styles/digital-garden-base.scss
@@ -64,11 +64,11 @@ ul.task-list {
 
     .graph {
         width: 320px;
-        height: 320px;
+        min-height: 320px;
 
         #link-graph {
-            width: 100%;
-            height: 100%;
+            width: 320px;
+            height: 320px;
         }
     }
     .graph-fs {
@@ -79,11 +79,16 @@ ul.task-list {
         width: calc(100vmin - 100px);
         min-height: 350px;
         min-width: 350px;
-        transform: translate(-50%, -50%);
+        transform: translate(-112%, -58%);
         z-index: 9999;
-        display: none;
+        display: block;
         background-color: var(--background-secondary);
 
+        #link-graph {
+            width: 100%;
+            height: 100%;
+        }
+
         .graph-title {
             display: none;
         }

From f0e8eeb569b40d1da542994870c2be7cce05e239 Mon Sep 17 00:00:00 2001
From: Utsob Roy <roy@utsob.me>
Date: Tue, 14 Feb 2023 15:41:55 +0600
Subject: [PATCH 4/8] css fix

---
 src/site/styles/digital-garden-base.scss | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/site/styles/digital-garden-base.scss b/src/site/styles/digital-garden-base.scss
index 74aaaef..09c2d8e 100644
--- a/src/site/styles/digital-garden-base.scss
+++ b/src/site/styles/digital-garden-base.scss
@@ -239,6 +239,12 @@ ul.task-list {
         border-radius: 0;
         border-top: 2px solid var(--background-secondary);
         justify-content: space-between;
+
+        @media (max-width: 1400px) {
+            .graph-fs {
+                transform: translate(-50%, -50%);
+            }
+        }
     }
 
     .sidebar-container {

From a32574db4868f054c32818b1f6b309a7f65ba042 Mon Sep 17 00:00:00 2001
From: Utsob Roy <roy@utsob.me>
Date: Tue, 14 Feb 2023 15:48:34 +0600
Subject: [PATCH 5/8] css fix

---
 src/site/styles/digital-garden-base.scss | 11 ++---------
 1 file changed, 2 insertions(+), 9 deletions(-)

diff --git a/src/site/styles/digital-garden-base.scss b/src/site/styles/digital-garden-base.scss
index 09c2d8e..c0e3def 100644
--- a/src/site/styles/digital-garden-base.scss
+++ b/src/site/styles/digital-garden-base.scss
@@ -53,8 +53,7 @@ ul.task-list {
 
 .sidebar {
     position: fixed;
-    top: 50%;
-    transform: translateY(calc(-50% + 75px));
+    top: 75px;
     right: 0;
     height: 100%;
     min-width: 25px;
@@ -79,7 +78,7 @@ ul.task-list {
         width: calc(100vmin - 100px);
         min-height: 350px;
         min-width: 350px;
-        transform: translate(-112%, -58%);
+        transform: translate(-50%, -50%);
         z-index: 9999;
         display: block;
         background-color: var(--background-secondary);
@@ -239,12 +238,6 @@ ul.task-list {
         border-radius: 0;
         border-top: 2px solid var(--background-secondary);
         justify-content: space-between;
-
-        @media (max-width: 1400px) {
-            .graph-fs {
-                transform: translate(-50%, -50%);
-            }
-        }
     }
 
     .sidebar-container {

From 34b9b34775d28756733d4b1e6716d61282aae097 Mon Sep 17 00:00:00 2001
From: Utsob Roy <roy@utsob.me>
Date: Tue, 14 Feb 2023 16:01:41 +0600
Subject: [PATCH 6/8] graph fixes

---
 src/site/_includes/components/graphScript.njk | 26 ++++++++++++-------
 1 file changed, 16 insertions(+), 10 deletions(-)

diff --git a/src/site/_includes/components/graphScript.njk b/src/site/_includes/components/graphScript.njk
index 055e732..cb20e7d 100644
--- a/src/site/_includes/components/graphScript.njk
+++ b/src/site/_includes/components/graphScript.njk
@@ -145,18 +145,21 @@
     }
 
     fetchGraphData();
-        window.document.getElementById('graph-depth').value = window.maxGraphDepth;
-        window.document.getElementById('depth-display').innerText = window.maxGraphDepth;
-        window.document.getElementById('graph-depth').addEventListener('input', (evt) => {
-            
-        window.maxGraphDepth = evt.target.value;
-        window.document.getElementById('depth-display').innerText = window.maxGraphDepth;
+    window.document.getElementById('graph-depth').value = window.maxGraphDepth;
+    window.document.getElementById('depth-display').innerText = window.maxGraphDepth;
+    window.document.getElementById('graph-depth').addEventListener('input', (evt) => {
+        
+    window.maxGraphDepth = evt.target.value;
+    window.document.getElementById('depth-display').innerText = window.maxGraphDepth;
         if (Graph != null) {
             Graph._destructor();
             Graph = null;
         }
-        renderGraph(filterToDepth(JSON.parse(JSON.stringify(window.graphData))), "link-graph", 1);
-    })
+        Graph = renderGraph(filterToDepth(JSON.parse(JSON.stringify(window.graphData))), "link-graph", 1);
+        setTimeout(() => {
+            Graph.zoomToFit(5, 75);
+        }, 1);
+    });
 
     window.fullGraph = null;
     function renderFullGraph() {
@@ -186,11 +189,14 @@
         const el = document.querySelector('.graph');
         if (el.classList.contains('graph-fs')) {
             el.classList.remove('graph-fs');
-            Graph.width(el.offsetWidth).height(el.offsetHeight);
+            Graph.width(el.offsetWidth).height(el.offsetWidth);
         } else {
             el.classList.add('graph-fs');
-            Graph.width(el.offsetWidth).height(el.offsetHeight);
+            Graph.width(el.offsetWidth).height(el.offsetWidth);
         }
+        setTimeout(() => {
+            Graph.zoomToFit(5, 75);
+        }, 1);
         
     });
 

From 700ca73c9b7f528ffb833200532b7dc4f9b91b8d Mon Sep 17 00:00:00 2001
From: Ole Eskild Steensen <ole@savvy.no>
Date: Tue, 14 Feb 2023 16:59:54 +0100
Subject: [PATCH 7/8] Some graph style enhancements

---
 src/site/_includes/components/graphScript.njk |  2 +-
 .../_includes/components/searchScript.njk     |  2 +-
 src/site/styles/digital-garden-base.scss      | 20 ++++++++++++++++---
 3 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/src/site/_includes/components/graphScript.njk b/src/site/_includes/components/graphScript.njk
index cb20e7d..33072a3 100644
--- a/src/site/_includes/components/graphScript.njk
+++ b/src/site/_includes/components/graphScript.njk
@@ -57,7 +57,7 @@
         const highlightNodes = new Set();
         let hoverNode = null;
         const color = getCssVar("--text-accent");
-        const mutedColor = getCssVar("--text-faint");
+        const mutedColor = getCssVar("--text-muted");
 
         let Graph = ForceGraph()
         (el)
diff --git a/src/site/_includes/components/searchScript.njk b/src/site/_includes/components/searchScript.njk
index ecadf2a..6b70d32 100644
--- a/src/site/_includes/components/searchScript.njk
+++ b/src/site/_includes/components/searchScript.njk
@@ -227,4 +227,4 @@
         resultsHTML += '</div>';
         resultsDiv.innerHTML = resultsHTML;
     }
-</script>
\ No newline at end of file
+</script>
diff --git a/src/site/styles/digital-garden-base.scss b/src/site/styles/digital-garden-base.scss
index c0e3def..c931009 100644
--- a/src/site/styles/digital-garden-base.scss
+++ b/src/site/styles/digital-garden-base.scss
@@ -69,6 +69,10 @@ ul.task-list {
             width: 320px;
             height: 320px;
         }
+
+        #graph-fs-btn {
+            margin-right: 10px;
+        }
     }
     .graph-fs {
         position: fixed;
@@ -82,12 +86,19 @@ ul.task-list {
         z-index: 9999;
         display: block;
         background-color: var(--background-secondary);
+        border: 1px solid var(--text-accent);
+        border-radius: 5px;
+        padding-top: 5px;
 
         #link-graph {
             width: 100%;
             height: 100%;
         }
 
+        #graph-controls{
+            margin-top: 10px;
+        }
+
         .graph-title {
             display: none;
         }
@@ -203,7 +214,7 @@ ul.task-list {
     .graph-title-container {
         display: flex;
         justify-content: flex-end;
-        width: 320px;
+        width: 100%;
     }
 
     .graph-title {
@@ -566,6 +577,8 @@ ul.task-list {
     z-index: 9999;
     display: none;
     background-color: var(--background-secondary);
+    border: 1px solid var(--text-accent);
+    border-radius: 5px;
 
     #full-graph-container {
         width: 100%;
@@ -605,6 +618,7 @@ ul.task-list {
 
     i {
         cursor: pointer;
+        padding-right: 10px;
     }
 
     .depth-control {
@@ -631,8 +645,8 @@ ul.task-list {
         #depth-display {
             background-color: var(--text-accent);
             color: white;
-            width: 1rem;
-            height: 1rem;
+            width: 1.3rem;
+            height: 1.3rem;
             font-size: 0.8rem;
             display: flex;
             justify-content: center;

From d5ef45f3cf570580877c512b0d9fa0d2a648cd84 Mon Sep 17 00:00:00 2001
From: Utsob Roy <roy@utsob.me>
Date: Tue, 14 Feb 2023 22:14:43 +0600
Subject: [PATCH 8/8] More slots for dynamic components (#70)

* more slots for dynamic components

* more slots on sidebar and filetree
---
 src/site/_data/dynamics.js                    |  86 +++++++------
 .../_includes/components/filetreeNavbar.njk   |   6 +
 src/site/_includes/components/sidebar.njk     | 119 +++++++++---------
 src/site/_includes/layouts/note.njk           |  12 ++
 src/site/index.njk                            |  12 ++
 5 files changed, 143 insertions(+), 92 deletions(-)

diff --git a/src/site/_data/dynamics.js b/src/site/_data/dynamics.js
index d356a2c..13128c9 100644
--- a/src/site/_data/dynamics.js
+++ b/src/site/_data/dynamics.js
@@ -1,44 +1,60 @@
 const fsFileTree = require("fs-file-tree");
 
-const BASE_PATH = "src/site/_includes/components/user"
-const STYLE_PATH = "src/site/styles/user"
+const BASE_PATH = "src/site/_includes/components/user";
+const STYLE_PATH = "src/site/styles/user";
 const NAMESPACES = ["index", "notes", "common"];
-const SLOTS = ["header", "afterContent", "footer"]
+const SLOTS = ["head", "header", "beforeContent", "afterContent", "footer"];
+const FILE_TREE_NAMESPACE = "filetree";
+const FILE_TREE_SLOTS = ["beforeTitle", "afterTitle"];
+const SIDEBAR_NAMESPACE = "sidebar";
+const SIDEBAR_SLOTS = ["top", "bottom"];
+const STYLES_NAMESPACE = "styles";
 
-const generateComponentPaths = async (namespace) => {
-    const data = {};
-    for (let index = 0; index < SLOTS.length; index++) {
-        const slot = SLOTS[index];
-        try {
-            const tree = await fsFileTree(`${BASE_PATH}/${namespace}/${slot}`);
-            let comps = Object.keys(tree).filter((p) => p.indexOf(".njk") != -1).map((p) => `components/user/${namespace}/${slot}/${p}`);
-            comps.sort()
-            data[slot] = comps;
-        } catch {
-            data[slot] = [];
-        }
+const generateComponentPaths = async (namespace, slots) => {
+  const data = {};
+  for (let index = 0; index < slots.length; index++) {
+    const slot = slots[index];
+    try {
+      const tree = await fsFileTree(`${BASE_PATH}/${namespace}/${slot}`);
+      let comps = Object.keys(tree)
+        .filter((p) => p.indexOf(".njk") != -1)
+        .map((p) => `components/user/${namespace}/${slot}/${p}`);
+      comps.sort();
+      data[slot] = comps;
+    } catch {
+      data[slot] = [];
     }
-    return data;
-}
+  }
+  return data;
+};
 
 const generateStylesPaths = async () => {
-    try {
-        const tree = await fsFileTree(`${STYLE_PATH}`);
-        let comps = Object.keys(tree).map((p) => `/styles/user/${p}`.replace('.scss', '.css'));
-        comps.sort()
-        return comps
-    } catch {
-        return [];
-    }
-}
-
+  try {
+    const tree = await fsFileTree(`${STYLE_PATH}`);
+    let comps = Object.keys(tree).map((p) =>
+      `/styles/user/${p}`.replace(".scss", ".css")
+    );
+    comps.sort();
+    return comps;
+  } catch {
+    return [];
+  }
+};
 
 module.exports = async () => {
-    const data = {};
-    for (let index = 0; index < NAMESPACES.length; index++) {
-        const ns = NAMESPACES[index];
-        data[ns] = await generateComponentPaths(ns);
-    }
-    data['styles'] = await generateStylesPaths()
-    return data;
-}
\ No newline at end of file
+  const data = {};
+  for (let index = 0; index < NAMESPACES.length; index++) {
+    const ns = NAMESPACES[index];
+    data[ns] = await generateComponentPaths(ns, SLOTS);
+  }
+  data[FILE_TREE_NAMESPACE] = await generateComponentPaths(
+    FILE_TREE_NAMESPACE,
+    FILE_TREE_SLOTS
+  );
+  data[SIDEBAR_NAMESPACE] = await generateComponentPaths(
+    SIDEBAR_NAMESPACE,
+    SIDEBAR_SLOTS
+  );
+  data[STYLES_NAMESPACE] = await generateStylesPaths();
+  return data;
+};
diff --git a/src/site/_includes/components/filetreeNavbar.njk b/src/site/_includes/components/filetreeNavbar.njk
index d3e7144..612c03e 100644
--- a/src/site/_includes/components/filetreeNavbar.njk
+++ b/src/site/_includes/components/filetreeNavbar.njk
@@ -1,9 +1,15 @@
 <nav class="navbar">
     <div class="navbar-inner">
         <i style="font-size: 1.5rem; margin-right: 10px;" @click="showFilesMobile=!showFilesMobile" class="fa fa-bars"></i>
+        {% for imp in dynamics.filetree.beforeTitle %}
+            {% include imp %}
+        {% endfor %}
         <a href="/" style="text-decoration: none;">
             <h1 style="margin: 15px !important;">{{meta.siteName}}</h1>
         </a>
+        {% for imp in dynamics.filetree.afterTitle %}
+            {% include imp %}
+        {% endfor %}
     </div>
     
     {% if settings.dgEnableSearch === true%}
diff --git a/src/site/_includes/components/sidebar.njk b/src/site/_includes/components/sidebar.njk
index c51cece..4eecece 100644
--- a/src/site/_includes/components/sidebar.njk
+++ b/src/site/_includes/components/sidebar.njk
@@ -1,7 +1,9 @@
 <aside>
       <div class="sidebar">
             <div class="sidebar-container">
-
+                  {% for imp in dynamics.sidebar.top %}
+                        {% include imp %}
+                  {% endfor %}
                   {%if settings.dgShowLocalGraph === true%}
                         <div class="graph">
                               <div class="graph-title-container">
@@ -27,65 +29,68 @@
                               </div>
                               <div id="link-graph"></div>
                         </div>
-                        {%endif%}
+                  {%endif%}
 
-                        {%if settings.dgShowToc === true%}
-                              {%set tocHtml= (content and (content|toc)) %}
-                              {%if tocHtml %}
-                                    <div class="toc">
-                                          <div class="toc-title-container">
-                                                <div class="toc-title">
-                                                      On this page
-                                                </div>
-                                          </div>
-                                          <div class="toc-container">
-                                                {{ tocHtml | safe }}
+                  {%if settings.dgShowToc === true%}
+                        {%set tocHtml= (content and (content|toc)) %}
+                        {%if tocHtml %}
+                              <div class="toc">
+                                    <div class="toc-title-container">
+                                          <div class="toc-title">
+                                                On this page
                                           </div>
                                     </div>
-                              {%endif%}
-
+                                    <div class="toc-container">
+                                          {{ tocHtml | safe }}
+                                    </div>
+                              </div>
                         {%endif%}
 
-                              {%if settings.dgShowBacklinks === true %}
-                                    {%if settings.dgShowBacklinks === true %}
-                                    <div class="backlinks">
-                                          <div class="backlink-title" style="margin: 4px 0 !important;">Pages mentioning this page</div>
-                                                <div class="backlink-list">
-                                                {%- if page.url == "/" -%}
-                                                      {%- if graph.nodes[graph.homeAlias].backLinks.length === 0 -%}
-                                                            <div class="backlink-card">
-                                                                  <span class="no-backlinks-message">No other pages mentions this page</span>
-                                                            </div>
-                                                      {%- endif -%}
-                                                {%- for backlink in graph.nodes[graph.homeAlias].backLinks -%}
-                                                      {%- if graph.nodes[backlink].url != graph.homeAlias -%}
-                                                      <div class="backlink-card">
-                                                            <i class="fa fa-link"></i> <a href="{{graph.nodes[backlink].url}}">{{graph.nodes[backlink].title}}</a>
-                                                      </div>
-                                                      {%- endif -%}
-                                                {%- endfor -%}
-                                                {%- else -%}
-                                                      {%- if graph.nodes[page.url].backLinks.length === 0 -%}
-                                                            <div class="backlink-card">
-                                                                  <span class="no-backlinks-message">No other pages mentions this page</span>
-                                                            </div>
-                                                      {%- endif -%}
-                                                {%- for backlink in graph.nodes[page.url].backLinks -%}
-                                                      {%- if graph.nodes[backlink].url != page.url -%}
-                                                      <div class="backlink-card">
-                                                            <i class="fa fa-link"></i> <a href="{{graph.nodes[backlink].url}}">{{graph.nodes[backlink].title}}</a>
-                                                      </div>
-                                                      {%- endif -%}
-                                                {%- endfor -%}
-                                                {%- endif -%}
-                                                </div>
-                                          </div>
-                                    {%endif%}
-                              {%endif%}
-                              </div>
-                        </div>
-                  </aside>
+                  {%endif%}
 
-                  {%if settings.dgShowLocalGraph === true %}
-                        {%include "components/graphScript.njk"%}
-                  {% endif %}
\ No newline at end of file
+                        {%if settings.dgShowBacklinks === true %}
+                              {%if settings.dgShowBacklinks === true %}
+                              <div class="backlinks">
+                                    <div class="backlink-title" style="margin: 4px 0 !important;">Pages mentioning this page</div>
+                                          <div class="backlink-list">
+                                          {%- if page.url == "/" -%}
+                                                {%- if graph.nodes[graph.homeAlias].backLinks.length === 0 -%}
+                                                      <div class="backlink-card">
+                                                            <span class="no-backlinks-message">No other pages mentions this page</span>
+                                                      </div>
+                                                {%- endif -%}
+                                          {%- for backlink in graph.nodes[graph.homeAlias].backLinks -%}
+                                                {%- if graph.nodes[backlink].url != graph.homeAlias -%}
+                                                <div class="backlink-card">
+                                                      <i class="fa fa-link"></i> <a href="{{graph.nodes[backlink].url}}">{{graph.nodes[backlink].title}}</a>
+                                                </div>
+                                                {%- endif -%}
+                                          {%- endfor -%}
+                                          {%- else -%}
+                                                {%- if graph.nodes[page.url].backLinks.length === 0 -%}
+                                                      <div class="backlink-card">
+                                                            <span class="no-backlinks-message">No other pages mentions this page</span>
+                                                      </div>
+                                                {%- endif -%}
+                                          {%- for backlink in graph.nodes[page.url].backLinks -%}
+                                                {%- if graph.nodes[backlink].url != page.url -%}
+                                                <div class="backlink-card">
+                                                      <i class="fa fa-link"></i> <a href="{{graph.nodes[backlink].url}}">{{graph.nodes[backlink].title}}</a>
+                                                </div>
+                                                {%- endif -%}
+                                          {%- endfor -%}
+                                    {%- endif -%}
+                                    </div>
+                              </div>
+                        {%endif%}
+                  {%endif%}
+                  {% for imp in dynamics.sidebar.bottom %}
+                        {% include imp %}
+                  {% endfor %}
+            </div>
+      </div>
+</aside>
+
+{%if settings.dgShowLocalGraph === true %}
+      {%include "components/graphScript.njk"%}
+{% endif %}
\ No newline at end of file
diff --git a/src/site/_includes/layouts/note.njk b/src/site/_includes/layouts/note.njk
index 247bd27..4847a38 100644
--- a/src/site/_includes/layouts/note.njk
+++ b/src/site/_includes/layouts/note.njk
@@ -6,6 +6,12 @@ permalink: "notes/{{ page.fileSlug | slugify }}/"
   <head>
     <title>{% if title %}{{ title }}{% else %}{{ page.fileSlug }}{% endif %}</title>
     {%include "components/pageheader.njk"%}
+    {% for imp in dynamics.common.head %}
+      {% include imp %}
+    {% endfor %}
+    {% for imp in dynamics.notes.head %}
+      {% include imp %}
+    {% endfor %}
   </head>
   <body class="theme-{{meta.baseTheme}} markdown-preview-view markdown-rendered markdown-preview-section">
     {%include "components/notegrowthhistory.njk"%}
@@ -45,6 +51,12 @@ permalink: "notes/{{ page.fileSlug | slugify }}/"
         {% include imp %}
       {% endfor %}
       </header>
+      {% for imp in dynamics.common.beforeContent %}
+        {% include imp %}
+      {% endfor %}
+      {% for imp in dynamics.notes.beforeContent %}
+        {% include imp %}
+      {% endfor %}
       {{ content | hideDataview | link | taggify | highlight | safe}}
       {% for imp in dynamics.common.afterContent %}
         {% include imp %}
diff --git a/src/site/index.njk b/src/site/index.njk
index 8c8a0a8..31ddad3 100644
--- a/src/site/index.njk
+++ b/src/site/index.njk
@@ -3,6 +3,12 @@
   <head>
     <title>{{ noteTitle }}</title>
     {%include "components/pageheader.njk"%}
+    {% for imp in dynamics.common.head %}
+      {% include imp %}
+    {% endfor %}
+    {% for imp in dynamics.index.head %}
+      {% include imp %}
+    {% endfor %}
   </head>
   <body class="theme-{{meta.baseTheme}} markdown-preview-view markdown-rendered markdown-preview-section">
     {%include "components/notegrowthhistory.njk"%}
@@ -40,6 +46,12 @@
         {% include imp %}
       {% endfor %}
       </header>
+      {% for imp in dynamics.common.beforeContent %}
+        {% include imp %}
+      {% endfor %}
+      {% for imp in dynamics.index.beforeContent %}
+        {% include imp %}
+      {% endfor %}
       {%- for garden in collections.gardenEntry -%}
         {{garden.templateContent | hideDataview | link | taggify | highlight | safe }}
       {%- endfor -%}