From 3c7ece5405436c85282f156cf387b11d08cc2d87 Mon Sep 17 00:00:00 2001 From: Jacky Zhao Date: Thu, 28 Apr 2022 10:48:31 -0700 Subject: [PATCH 1/3] fix: append trailing slash, fixes #111 --- assets/js/graph.js | 2 +- assets/js/search.js | 2 +- layouts/partials/backlinks.html | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/assets/js/graph.js b/assets/js/graph.js index f0b1f7f6f..08c97e996 100644 --- a/assets/js/graph.js +++ b/assets/js/graph.js @@ -127,7 +127,7 @@ async function drawGraph(url, baseUrl, pathColors, depth, enableDrag, enableLege .attr("fill", color) .style("cursor", "pointer") .on("click", (_, d) => { - window.location.href = baseUrl + '/' + decodeURI(d.id).replace(/\s+/g, '-') + window.location.href = `${baseUrl}/${decodeURI(d.id).replace(/\s+/g, '-')}/` }) .on("mouseover", function(_, d) { d3.selectAll(".node") diff --git a/assets/js/search.js b/assets/js/search.js index facebe56d..0aacb5f44 100644 --- a/assets/js/search.js +++ b/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 => ({ diff --git a/layouts/partials/backlinks.html b/layouts/partials/backlinks.html index 425ec67cf..deb82e82e 100644 --- a/layouts/partials/backlinks.html +++ b/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 .)}}
  • {{index (index . "title")}} From c8d390dbc5a749af533f1ec05de2d5b6f37fa156 Mon Sep 17 00:00:00 2001 From: Jacky Zhao Date: Thu, 28 Apr 2022 13:45:29 -0700 Subject: [PATCH 2/3] fix: always hide popover on mobile (fixes #104) --- assets/styles/base.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/assets/styles/base.scss b/assets/styles/base.scss index 1be022933..0c7d9576a 100644 --- a/assets/styles/base.scss +++ b/assets/styles/base.scss @@ -526,7 +526,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 { From 87b5a7a2519c70b6f6e678c6b86a3aefc4dd3218 Mon Sep 17 00:00:00 2001 From: Jacky Zhao Date: Thu, 28 Apr 2022 15:49:16 -0700 Subject: [PATCH 3/3] feat: show graph titles on zoom (fixes #92) --- assets/js/graph.js | 33 ++++++++++++++++++++++----------- assets/styles/base.scss | 6 ++++++ 2 files changed, 28 insertions(+), 11 deletions(-) diff --git a/assets/js/graph.js b/assets/js/graph.js index 08c97e996..db2a171fd 100644 --- a/assets/js/graph.js +++ b/assets/js/graph.js @@ -70,12 +70,12 @@ async function drawGraph(url, baseUrl, pathColors, depth, enableDrag, enableLege .on("end", enableDrag ? dragended : noop); } - const height = 250 + 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("link", d3.forceLink(data.links).id(d => d.id).distance(40)) .force("center", d3.forceCenter()); const svg = d3.select('#graph-container') @@ -115,15 +115,18 @@ async function drawGraph(url, baseUrl, pathColors, depth, enableDrag, enableLege .data(data.nodes) .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("r", nodeRadius) .attr("fill", color) .style("cursor", "pointer") .on("click", (_, d) => { @@ -154,11 +157,12 @@ async function drawGraph(url, baseUrl, pathColors, depth, enableDrag, enableLege // show text for self d3.select(this.parentNode) - .select("text") .raise() + .select("text") .transition() .duration(200) .style("opacity", 1) + .raise() }).on("mouseleave", function(_, d) { d3.selectAll(".node") .transition() @@ -183,11 +187,14 @@ async function drawGraph(url, baseUrl, pathColors, depth, enableDrag, enableLege // draw labels const labels = graphNode.append("text") - .attr("dx", 12) - .attr("dy", ".35em") + .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 @@ -199,7 +206,11 @@ async function drawGraph(url, baseUrl, pathColors, depth, enableDrag, enableLege .on("zoom", ({ transform }) => { link.attr("transform", transform); node.attr("transform", transform); - labels.attr("transform", transform); + const scale = transform.k + const scaledOpacity = Math.max((scale - 1) / 3.75, 0) + labels + .attr("transform", transform) + .style("opacity", scaledOpacity) })); } diff --git a/assets/styles/base.scss b/assets/styles/base.scss index 0c7d9576a..4d03a06a3 100644 --- a/assets/styles/base.scss +++ b/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; + + } } }