Merge branch 'hugo' into hugo

assets/js/graph.js

@@ -87,17 +87,13 @@ async function drawGraph(
       .on('end', enableDrag ? dragended : noop);
   };
 
-  const height = 250;
-  const width = document.getElementById('graph-container').offsetWidth;
+  const height = Math.max(document.getElementById("graph-container").offsetHeight, 250)
+  const width = document.getElementById("graph-container").offsetWidth
 
-  const simulation = d3
-    .forceSimulation(data.nodes)
-    .force('charge', d3.forceManyBody().strength(-30))
-    .force(
-      'link',
-      d3.forceLink(data.links).id((d) => d.id)
-    )
-    .force('center', d3.forceCenter());
+  const simulation = d3.forceSimulation(data.nodes)
+    .force("charge", d3.forceManyBody().strength(-30))
+    .force("link", d3.forceLink(data.links).id(d => d.id).distance(40))
+    .force("center", d3.forceCenter());
 
   const svg = d3
     .select('#graph-container')
@@ -151,21 +147,22 @@ async function drawGraph(
     .enter()
     .append('g');
 
+  // calculate radius
+  const nodeRadius = (d) => {
+    const numOut = index.links[d.id]?.length || 0
+    const numIn = index.backlinks[d.id]?.length || 0
+    return 3 + (numOut + numIn) / 4
+  }
+
   // draw individual nodes
-  const node = graphNode
-    .append('circle')
-    .attr('class', 'node')
-    .attr('id', (d) => d.id)
-    .attr('r', (d) => {
-      const numOut = index.links[d.id]?.length || 0;
-      const numIn = index.backlinks[d.id]?.length || 0;
-      return 3 + (numOut + numIn) / 4;
-    })
-    .attr('fill', color)
-    .style('cursor', 'pointer')
-    .on('click', (_, d) => {
-      const url = baseUrl + decodeURI(d.id).replace(/\s+/g, '-');
-      navigate(new URL(url), '.singlePage');
+  const node = graphNode.append("circle")
+    .attr("class", "node")
+    .attr("id", (d) => d.id)
+    .attr("r", nodeRadius)
+    .attr("fill", color)
+    .style("cursor", "pointer")
+    .on("click", (_, d) => {
+      window.location.href = `${baseUrl}/${decodeURI(d.id).replace(/\s+/g, '-')}/`
     })
     .on('mouseover', function (_, d) {
       d3.selectAll('.node')
@@ -196,14 +193,17 @@ async function drawGraph(
 
       // show text for self
       d3.select(this.parentNode)
-        .select('text')
         .raise()
+        .select("text")
         .transition()
         .duration(200)
-        .style('opacity', 1);
-    })
-    .on('mouseleave', function (_, d) {
-      d3.selectAll('.node').transition().duration(200).attr('fill', color);
+        .style("opacity", 1)
+        .raise()
+    }).on("mouseleave", function(_, d) {
+      d3.selectAll(".node")
+        .transition()
+        .duration(200)
+        .attr("fill", color)
 
       const currentId = d.id;
       const linkNodes = d3
@@ -221,32 +221,32 @@ async function drawGraph(
     .call(drag(simulation));
 
   // draw labels
-  const labels = graphNode
-    .append('text')
-    .attr('dx', 12)
-    .attr('dy', '.35em')
-    .text((d) => content[d.id]?.title || d.id.replace('-', ' '))
-    .style('opacity', 0)
-    .style('pointer-events', 'none')
+  const labels = graphNode.append("text")
+    .attr("dx", 0)
+    .attr("dy", d => nodeRadius(d) + 8 + "px")
+    .attr("text-anchor", "middle")
+    .text((d) => content[d.id]?.title || d.id.replace("-", " "))
+    .style("opacity", 0)
+    .style("pointer-events", "none")
+    .style("font-size", "0.4em")
+    .raise()
     .call(drag(simulation));
 
   // set panning
 
   if (enableZoom) {
-    svg.call(
-      d3
-        .zoom()
-        .extent([
-          [0, 0],
-          [width, height],
-        ])
-        .scaleExtent([0.25, 4])
-        .on('zoom', ({ transform }) => {
-          link.attr('transform', transform);
-          node.attr('transform', transform);
-          labels.attr('transform', transform);
-        })
-    );
+    svg.call(d3.zoom()
+      .extent([[0, 0], [width, height]])
+      .scaleExtent([0.25, 4])
+      .on("zoom", ({ transform }) => {
+        link.attr("transform", transform);
+        node.attr("transform", transform);
+        const scale = transform.k
+        const scaledOpacity = Math.max((scale - 1) / 3.75, 0)
+        labels
+          .attr("transform", transform)
+          .style("opacity", scaledOpacity)
+      }));
   }
 
   // progress the simulation

assets/js/search.js

@@ -131,7 +131,7 @@ const removeMarkdown = (
   }
 
   const redir = (id, term) => {
-    window.location.href = BASE_URL + `${id}#:~:text=${encodeURIComponent(term)}`
+    window.location.href = `${BASE_URL}${id}#:~:text=${encodeURIComponent(term)}/`
   }
 
   const formatForDisplay = id => ({

assets/styles/base.scss

@@ -329,6 +329,12 @@ hr {
   & #graph-container {
     border: var(--outlinegray) 1px solid;
     border-radius: 5px;
+    box-sizing: border-box;
+
+    & > svg {
+      margin-bottom: -5px;
+
+    }
   }
 }
 
@@ -526,7 +532,7 @@ header {
   box-shadow: 6px 6px 36px 0px rgba(0,0,0,0.25);
 
   @media all and (max-width: 600px) {
-    display: none;
+    display: none !important;
   }
 
   &.visible {

layouts/partials/backlinks.html

@@ -9,7 +9,7 @@
     {{if $inbound}}
     {{$cleanedInbound := apply (apply $inbound "index" "." "source") "replace" "." " " "-"}}
     {{- range $cleanedInbound | uniq -}}
-      {{$l := printf "%s%s" $host .}}
+      {{$l := printf "%s%s/" $host .}}
       {{with (index $contentTable .)}}
       <li>
           <a href="{{$l}}">{{index (index . "title")}}</a>