readme update, use vars

README.md

@@ -19,12 +19,39 @@ hugo-obsidian -input=content -output=data
 
 ### Example Usage (GitHub Action)
 
+Add 'Build Link Index' as a build step in your workflow file (e.g. `.github/workflows/deploy.yaml`)
+```yaml
+...
 
+jobs:
+  deploy:
+    runs-on: ubuntu-18.04
+    steps:
+      - uses: actions/checkout@v2
+      - name: Build Link Index
+        uses: jackyzha0/hugo-obsidian@v1.4
+        with:
+          input: content # input folder
+          output: data   # output folder
+      ...
+```
 
 ## Hugo Partial
+To then embed this information in your Hugo site, you can copy and use the provided partials in `/partials`. Graph provides a graph view of all nodes and links and Backlinks provides a list of pages that link to this page. 
 
+To start, create a `graphConfig.yaml` file in `/data` in your Hugo folder. This will be our main point of configuration for the graph partial.
+
+Then, in one of your Hugo templates, do something like the following to render the graph.
+
+```html
+<div id="graph-container">
+    {{partial "graph_partial.html" .}}
+</div>
+```
 
 ### Configuration
+Example:
+
 ```yaml
 enableLegend: false
 enableDrag: true
@@ -33,8 +60,7 @@ base:
   node: "#284b63"
   activeNode: "#f28482"
   inactiveNode: "#a8b3bd"
-  hoverNode: "#afbfc9"
-  link: "#aeb4b8"
+  link: "#babdbf"
   activeLink: "#5a7282"
 paths:
   - /toc: "#4388cc"

partials/graph_partial.html

@@ -1,5 +1,14 @@
 <script src="https://cdn.jsdelivr.net/npm/d3@6"></script>
 <div id="graph-container"></div>
+<style>
+    :root {
+        --g-node: {{.Site.Data.graphConfig.base.node}};
+        --g-node-active: {{.Site.Data.graphConfig.base.activeNode}};
+        --g-node-inactive: {{.Site.Data.graphConfig.base.inactiveNode}};
+        --g-link: {{.Site.Data.graphConfig.base.link}};
+        --g-link-active: {{.Site.Data.graphConfig.base.activeLink}};
+    }
+</style>
 <script>
   const index = {{$.Site.Data.linkIndex.index}}
   const links = {{$.Site.Data.linkIndex.links}}
@@ -15,7 +24,7 @@
 
   const color = (d) => {
     if (d.id === curPage) {
-      return "{{.Site.Data.graphConfig.base.activeNode}}"
+      return "var(--g-node-active)"
     }
 
     for (const pathColor of pathColors) {
@@ -26,7 +35,7 @@
       }
     }
 
-    return "{{.Site.Data.graphConfig.base.node}}"
+    return "var(--g-node)"
   }
 
   const drag = simulation => {
@@ -75,8 +84,8 @@
   const enableLegend = {{$.Site.Data.graphConfig.enableLegend}}
   if (enableLegend) {
     const legend = [
-      {"Current": "{{.Site.Data.graphConfig.base.activeNode}}"},
-      {"Note": "{{.Site.Data.graphConfig.base.node}}"},
+      {"Current": "var(--g-node-active)"},
+      {"Note": "var(--g-node)"},
       ...pathColors
     ]
     legend.forEach((legendEntry, i) => {
@@ -93,7 +102,7 @@
     .data(data.links)
     .join("line")
     .attr("class", "link")
-    .attr("stroke", "{{.Site.Data.graphConfig.base.link}}")
+    .attr("stroke", "var(--g-link)")
     .attr("stroke-width", 2)
     .attr("data-source", d => d.source.id)
     .attr("data-target", d => d.target.id)
@@ -122,7 +131,7 @@
       d3.selectAll(".node")
         .transition()
         .duration(100)
-        .attr("fill", "{{$.Site.Data.graphConfig.base.inactiveNode}}")
+        .attr("fill", "var(--g-node-inactive)")
 
       const neighbours = parseIdsFromLinks([...(index.links[d.id] || []), ...(index.backlinks[d.id] || [])])
       const neighbourNodes = d3.selectAll(".node").filter(d => neighbours.includes(d.id))
@@ -139,7 +148,7 @@
       links
         .transition()
         .duration(200)
-        .attr("stroke", "{{$.Site.Data.graphConfig.base.activeLink}}")
+        .attr("stroke", "var(--g-link-active)")
 
       // show text for self
       d3.select(this.parentNode)
@@ -147,7 +156,7 @@
         .raise()
         .transition()
         .duration(200)
-        .style("opacity", 0.8)
+        .style("opacity", 1)
     }).on("mouseleave", function (_,d) {
       d3.selectAll(".node")
         .transition()
@@ -160,7 +169,7 @@
       links
         .transition()
         .duration(200)
-        .attr("stroke", "{{$.Site.Data.graphConfig.base.link}}")
+        .attr("stroke", "var(--g-link)")
 
       d3.select(this.parentNode)
         .select("text")