Improved graph support

convert.py

@@ -8,9 +8,6 @@
 from typing import Callable, Dict, List, Tuple
 from urllib import parse as urlparse
 
-from matplotlib import cm
-from matplotlib.colors import rgb2hex
-
 DEFAULTS = {
     "SITE_URL": None,
     "SITE_TITLE": "I love obsidian-zol",
@@ -259,7 +256,41 @@ def parse_graph():
     existing_edges = [
         edge for edge in set(edges) if edge[0] in hash_ids and edge[1] in hash_ids
     ]
-    colors = [rgb2hex(cm.get_cmap("Pastel1")(i / 9)) for i in range(9)]
+
+    colors = [
+        # First tier
+        "#FFADAD",
+        "#FFD6A5",
+        "#FDFFB6",
+        "#CAFFBF",
+        "#9BF6FF",
+        "#A0C4FF",
+        "#BDB2FF",
+        "#FFC6FF",
+        # Second tier
+        "#FBF8CC",
+        "#FDE4CF",
+        "#FFCFD2",
+        "#F1C0E8",
+        "#CFBAF0",
+        "#A3C4F3",
+        "#90DBF4",
+        "#8EECF5",
+        "#98F5E1",
+        "#B9FBC0",
+        # Third tier
+        "#EAE4E9",
+        "#FFF1E6",
+        "#FDE2E4",
+        "#FAD2E1",
+        "#E2ECE9",
+        "#BEE1E6",
+        "#F0EFEB",
+        "#DFE7FD",
+        "#CDDAFD",
+    ]
+
+    n_colored = len(colors)
 
     edge_counts = {k: 0 for k in nodes.keys()}
 
@@ -270,7 +301,7 @@ def parse_graph():
     top_nodes = {
         node_url: i
         for i, (node_url, _) in enumerate(
-            list(sorted(edge_counts.items(), key=lambda k: -k[1]))[:9]
+            list(sorted(edge_counts.items(), key=lambda k: -k[1]))[:n_colored]
         )
     }
 
@@ -281,11 +312,8 @@ def parse_graph():
                 "label": title,
                 "url": url,
                 "color": colors[top_nodes[url]] if url in top_nodes else None,
-                "font": {
-                    "size": 20 if url in top_nodes else 16,
-                },
-                "value": edge_counts[url],
-                "mass": math.log(edge_counts[url] + 1) + 1,
+                "value": math.log10(edge_counts[url] + 1) + 1,
+                "opacity": 0.1,
             }
             for url, title in nodes.items()
         ],

local-run.sh

@@ -4,6 +4,8 @@ rm -rf build
 rsync -avh zola/ build
 rsync -avh content/ build/content
 
+mkdir -p build/content/docs
+
 bin/obsidian-export --frontmatter=never --hard-linebreaks --no-recursive-embeds $(cat .data_path) build/content/docs
 
 export SITE_URL=local

run.sh

@@ -1,14 +1,14 @@
 #!/bin/bash
 
-pip install matplotlib
-
 echo "netlify.toml" >> __obsidian/.gitignore
-mkdir __site/content/docs
 
-wget https://github.com/zoni/obsidian-export/releases/download/v22.1.0/obsidian-export_Linux-x86_64.bin -O export.bin
-chmod +x export.bin
-./export.bin --frontmatter=never --hard-linebreaks --no-recursive-embeds __obsidian __site/content/docs
+rsync -avh __site/zola/ __site/build
+rsync -avh __site/content/ __site/build/content
+
+mkdir -p __site/build/content/docs
+
+__site/bin/obsidian-export --frontmatter=never --hard-linebreaks --no-recursive-embeds __obsidian __site/build/content/docs
 
 python __site/convert.py
 
-zola --root __site build --output-dir public
+zola --root __site/build build --output-dir public

zola/config.toml

@@ -21,7 +21,9 @@ include_title = true
 highlight_code = true
 
 [extra]
+home_graph = true
 is_netlify = true
+page_graph = true
 
 language_code = "en-US"
 theme_color = "#fff"

zola/sass/bootstrap/scss/_variables.scss

@@ -327,11 +327,11 @@ $grid-breakpoints: (
 
 // scss-docs-start container-max-widths
 $container-max-widths: (
-  sm: 540px,
-  md: 720px,
-  lg: 960px,
-  xl: 1140px,
-  xxl: 1320px
+  sm: 540px, // original after 576: 540px
+  md: 720px, // original after 768: 720px
+  lg: 960px, // original after 992: 960px
+  xl: 1140px, // original after 1200: 1140px
+  xxl: 1320px // original after 1400: 1320px
 ) !default;
 // scss-docs-end container-max-widths
 

zola/sass/common/_global.scss

@@ -158,10 +158,6 @@ body {
 }
 
 .docs-navigation, .blog-navigation {
-  margin-top: 2rem;
-  margin-bottom: 0;
-  padding-top: 2rem;
-
   a {
     font-size: $font-size-base * 0.9;
   }
@@ -173,8 +169,6 @@ body {
 
 @include media-breakpoint-up(lg) {
   .docs-navigation, .blog-navigation {
-    margin-bottom: -1rem;
-
     a {
       font-size: $font-size-base;
     }

zola/sass/common/_variables.scss

@@ -72,11 +72,11 @@ $link-decoration:                         none;
 // Define the maximum width of `.container` for different screen sizes.
 
 $container-max-widths: (
-  sm: 540px,
-  md: 720px,
-  lg: 960px,
-  xl: 1240px,
-  xxl: 1320px
+  sm: 540px, // original after 576: 540px
+  md: 720px, // original after 768: 720px
+  lg: 960px, // original after 992: 960px
+  xl: 1140px, // original after 1200: 1140px
+  xxl: 1600px // original after 1400: 1320px
 );
 
 @include _assert-ascending($container-max-widths, "$container-max-widths");

zola/sass/custom.scss

@@ -1,3 +1,5 @@
-body.graph {
+body.home {
 	height: 100vh;
+	display: flex;
+	flex-flow: column;
 }

zola/static/js/graph.js

@@ -1,45 +1,91 @@
-var container = document.getElementById("graph");
-
-var nodes = new vis.DataSet(graph_data.nodes)
-var edges = new vis.DataSet(graph_data.edges)
-
+// Query dark mode setting
 function isDark() {
-	return localStorage.getItem('theme') === 'dark' || (!localStorage.getItem('theme') && window.matchMedia("(prefers-color-scheme: dark)").matches)
+	return localStorage.getItem('theme') === 'dark' || (!localStorage.getItem('theme') && window.matchMedia("(prefers-color-scheme: dark)").matches);
 }
 
+// Get URL of current page
+var curr_url = decodeURI(window.location.href.replace(location.origin, ""));
+if (curr_url.endsWith("/")) {
+	curr_url = curr_url.slice(0, -1)
+}
+
+// Get graph element
+var container = document.getElementById("graph");
+
+// Get nodes and edges from generated javascript
+var nodes = new vis.DataSet(graph_data.nodes);
+var edges = new vis.DataSet(graph_data.edges);
+
+// Construct graph
 var options = {
 	nodes: {
-		shape: "box",
+		shape: "dot",
+		color: isDark() ? "#8c8e91" : "#dee2e6",
 		font: {
-			face: "Tahoma",
+			face: "Inter",
+			color: isDark() ? "#c9cdd1" : "#616469",
+			strokeColor: isDark() ? "#c9cdd1" : "#616469",
 		},
 		scaling: {
 			label: {
 				enabled: true
 			}
-		}
+		},
 	},
 	edges: {
 		color: { inherit: "both" },
-		width: 4,
+		width: 0.8,
 		smooth: {
 			type: "continuous",
 		},
+		hoverWidth: 4,
 	},
 	interaction: {
-		hover: true
+		hover: true,
 	},
+	height: "100%",
+	width: "100%",
+	physics: {
+		solver: "repulsion"
+	}
 };
 
 var graph = new vis.Network(container, {
 	nodes: nodes,
 	edges: edges
 }, options);
 
+// Clickable URL
 graph.on("selectNode", function (params) {
-	// console.log(params);
 	if (params.nodes.length === 1) {
 		var node = nodes.get(params.nodes[0]);
 		window.open(node.url, "_blank");
 	}
+});
+
+// Focus on current node + scaling
+graph.once("afterDrawing", function () {
+	var curr_node = nodes.get({
+		filter: node => node.url == curr_url
+	});
+	console.log(curr_url);
+	if (curr_node.length > 0) {
+		var idx = curr_node[0].id;
+		graph.focus(idx, {
+			scale: graph.getScale() * 1.8
+		});
+		nodes.update({
+			id: idx,
+			value: 3,
+			color: "#6667AB",
+			borderWidth: 3,
+			font: {
+				strokeWidth: 1
+			}
+		});
+	} else {
+		graph.moveTo({
+			scale: graph.getScale() * 1.8
+		});
+	}
 });

zola/static/js/main.js

@@ -1,14 +1,32 @@
 // Set darkmode
+function isDark() {
+  return document.body.classList.contains('dark')
+}
+
 document.getElementById('mode').addEventListener('click', () => {
 
-    document.body.classList.toggle('dark');
-    localStorage.setItem('theme', document.body.classList.contains('dark') ? 'dark' : 'light');
-
+  document.body.classList.toggle('dark');
+
+  localStorage.setItem('theme', isDark() ? 'dark' : 'light');
+
+  // Update graph colors if exists
+  if (graph) {
+    graph.setOptions({
+      nodes: {
+        color: isDark() ? "#8c8e91" : "#dee2e6",
+        font: {
+          color: isDark() ? "#c9cdd1" : "#616469",
+          strokeColor: isDark() ? "#c9cdd1" : "#616469",
+        }
+      }
+    });
+  }
+
 });
-  
+
 // enforce local storage setting but also fallback to user-agent preferences
 if (localStorage.getItem('theme') === 'dark' || (!localStorage.getItem('theme') && window.matchMedia("(prefers-color-scheme: dark)").matches)) {
-  
+
   document.body.classList.add('dark');
-  
+
 }

zola/templates/base.html

@@ -7,8 +7,9 @@
 {% import 'macros/section-navigation.html' as macros_section_nav -%}
 {% import 'macros/docs-sidebar.html' as macros_sidebar -%}
 {% import 'macros/docs-edit-page.html' as macros_edit_page -%}
-{% import 'macros/docs-navigation.html' as macros_navigation -%}
+{% import 'macros/docs-graph.html' as macros_docs_graph -%}
 {% import 'macros/docs-toc.html' as macros_toc -%}
+{% import 'macros/graph.html' as macros_graph -%}
 <!DOCTYPE html>
 <html lang="{{ config.extra.language_code | default(value="en-US") }}">
 <head>
@@ -37,10 +38,6 @@
 
   {% block content %}{% endblock content %}
 
-  <!-- {% block footer %}
-    {{ macros_footer::footer() }}
-  {% endblock footer %} -->
-
   {{ macros_js::javascript() }}  
 </body>
 </html>

zola/templates/docs/page.html

@@ -23,9 +23,15 @@ <h1>{{ page.title }}</h1>
         {% if config.extra.edit_page %}
           {{ macros_edit_page::docs_edit_page(current_path=current_path) }}
         {% endif %}
-        {{ macros_navigation::docs_navigation(page=page, current_section=current_section) }}
+        {% if config.extra.page_graph %}
+          {{ macros_docs_graph::docs_graph(page=page, current_section=current_section) }}
+          {% endif %}
       </main>
     </div>
   </div>
 </div>
+
+{% if config.extra.page_graph %}
+  {{ macros_graph::graph_js() }}
+{% endif %}
 {% endblock content %}