From 5a1fbc937470b4f43b318dd0fa9af01b4a47b188 Mon Sep 17 00:00:00 2001 From: DhammaCharts <100090806+DhammaCharts@users.noreply.github.com> Date: Wed, 1 Jun 2022 13:49:27 +0100 Subject: [PATCH 01/12] Improve graph display, options and ability to have a global graph on the home page, local graphs on subpage. --- assets/js/graph.js | 43 +++++++++++++++++++++++------- data/graphConfig.yaml | 33 +++++++++++++++++++++-- layouts/index.html | 2 +- layouts/partials/footerIndex.html | 28 ++++++++++++++++++++ layouts/partials/head.html | 44 +++++++++++++++++++++++++------ 5 files changed, 129 insertions(+), 21 deletions(-) create mode 100644 layouts/partials/footerIndex.html diff --git a/assets/js/graph.js b/assets/js/graph.js index c7634cf..48248ec 100644 --- a/assets/js/graph.js +++ b/assets/js/graph.js @@ -1,4 +1,16 @@ -async function drawGraph(baseUrl, pathColors, depth, enableDrag, enableLegend, enableZoom) { +async function drawGraph( + baseUrl, + pathColors, + depth, + enableDrag, + enableLegend, + enableZoom, + isHome, + opacityScale, + scale, + repelForce, + fontSize +) { const container = document.getElementById("graph-container") const { index, links, content } = await fetchData @@ -82,12 +94,12 @@ async function drawGraph(baseUrl, pathColors, depth, enableDrag, enableLegend, e .on("end", enableDrag ? dragended : noop) } - const height = Math.max(container.offsetHeight, 250) + const height = Math.max(container.offsetHeight, isHome ? 500 : 250) const width = container.offsetWidth const simulation = d3 .forceSimulation(data.nodes) - .force("charge", d3.forceManyBody().strength(-30)) + .force("charge", d3.forceManyBody().strength(-100 * repelForce)) .force( "link", d3 @@ -102,7 +114,7 @@ async function drawGraph(baseUrl, pathColors, depth, enableDrag, enableLegend, e .append("svg") .attr("width", width) .attr("height", height) - .attr("viewBox", [-width / 2, -height / 2, width, height]) + .attr('viewBox', [-width / 2 * 1 / scale, -height / 2 * 1 / scale, width * 1 / scale, height * 1 / scale]) if (enableLegend) { const legend = [{ Current: "var(--g-node-active)" }, { Note: "var(--g-node)" }, ...pathColors] @@ -168,7 +180,7 @@ async function drawGraph(baseUrl, pathColors, depth, enableDrag, enableLegend, e ]) const neighbourNodes = d3.selectAll(".node").filter((d) => neighbours.includes(d.id)) const currentId = d.id - window.Million.prefetch(new URL(`${baseUrl}${decodeURI(d.id).replace(/\s+/g, "-")}/`)) + // window.Million.prefetch(new URL(`${baseUrl}${decodeURI(d.id).replace(/\s+/g, "-")}/`)) const linkNodes = d3 .selectAll(".link") .filter((d) => d.source.id === currentId || d.target.id === currentId) @@ -179,13 +191,18 @@ async function drawGraph(baseUrl, pathColors, depth, enableDrag, enableLegend, e // highlight links linkNodes.transition().duration(200).attr("stroke", "var(--g-link-active)") + const bigFont = fontSize+0.5 + // show text for self d3.select(this.parentNode) .raise() .select("text") .transition() .duration(200) - .style("opacity", 1) + .attr('opacityOld', d3.select(this.parentNode).select('text').style("opacity")) + .style('opacity', 1) + .style('font-size', bigFont+'em') + .attr('dy', d => nodeRadius(d) + 20 + 'px') // radius is in px }) .on("mouseleave", function (_, d) { d3.selectAll(".node").transition().duration(200).attr("fill", color) @@ -197,7 +214,13 @@ async function drawGraph(baseUrl, pathColors, depth, enableDrag, enableLegend, e linkNodes.transition().duration(200).attr("stroke", "var(--g-link)") - d3.select(this.parentNode).select("text").transition().duration(200).style("opacity", 0) + d3.select(this.parentNode) + .select("text") + .transition() + .duration(200) + .style('opacity', d3.select(this.parentNode).select('text').attr("opacityOld")) + .style('font-size', fontSize+'em') + .attr('dy', d => nodeRadius(d) + 8 + 'px') // radius is in px }) .call(drag(simulation)) @@ -208,9 +231,9 @@ async function drawGraph(baseUrl, pathColors, depth, enableDrag, enableLegend, e .attr("dy", (d) => nodeRadius(d) + 8 + "px") .attr("text-anchor", "middle") .text((d) => content[d.id]?.title || d.id.replace("-", " ")) - .style("opacity", 0) + .style('opacity', (opacityScale - 1) / 3.75) .style("pointer-events", "none") - .style("font-size", "0.4em") + .style('font-size', fontSize+'em') .raise() .call(drag(simulation)) @@ -228,7 +251,7 @@ async function drawGraph(baseUrl, pathColors, depth, enableDrag, enableLegend, e .on("zoom", ({ transform }) => { link.attr("transform", transform) node.attr("transform", transform) - const scale = transform.k + const scale = transform.k * opacityScale; const scaledOpacity = Math.max((scale - 1) / 3.75, 0) labels.attr("transform", transform).style("opacity", scaledOpacity) }), diff --git a/data/graphConfig.yaml b/data/graphConfig.yaml index 3f8d3fb..7f08130 100644 --- a/data/graphConfig.yaml +++ b/data/graphConfig.yaml @@ -1,6 +1,35 @@ +# if true, a Global Graph will be shown on home page with full width, no backlink. +# A different set of Local Graphs will be shown on sub pages. +# if false, Local Graph will be default on every page as usual +enableGlobalGraph: true + +### Local Graph ### + enableLegend: false enableDrag: true enableZoom: true -depth: -1 # set to -1 to show full graph +depth: 1 # set to -1 to show full graph +scale: 1 +repelForce: 2 +centerForce: 1 +linkDistance: 1 +fontSize: 0.6 +opacityScale: 3 + +### Global Graph ### + +enableLegendGG: false +enableDragGG: true +enableZoomGG: true +depthGG: -1 # set to -1 to show full graph +scaleGG: 1.2 +repelForceGG: 1 +centerForceGG: 1 +linkDistanceGG: 1 +fontSizeGG: 0.5 +opacityScaleGG: 3 + +### Graphs ### + paths: - - /moc: "#4388cc" \ No newline at end of file + - /moc: "#4388cc" diff --git a/layouts/index.html b/layouts/index.html index 8d1ffbd..5053614 100644 --- a/layouts/index.html +++ b/layouts/index.html @@ -19,7 +19,7 @@ {{partial "recent.html" . }} {{end}} - {{partial "footer.html" .}} + {{partial "footerIndex.html" .}} diff --git a/layouts/partials/footerIndex.html b/layouts/partials/footerIndex.html new file mode 100644 index 0000000..36c8a8a --- /dev/null +++ b/layouts/partials/footerIndex.html @@ -0,0 +1,28 @@ + + +
+ +{{if $.Site.Data.config.enableFooter}} + {{if $.Site.Data.graphConfig.enableGlobalGraph}} +
+ +
+ {{partial "graph.html" .}} +
+ +
+ {{else}} +
+
+
+ {{partial "backlinks.html" .}} +
+
+ {{partial "graph.html" .}} +
+ +
+ {{end}} +{{end}} + +{{partial "contact.html" .}} diff --git a/layouts/partials/head.html b/layouts/partials/head.html index f10ce14..01b8fe8 100644 --- a/layouts/partials/head.html +++ b/layouts/partials/head.html @@ -62,6 +62,12 @@ })) const draw = () => { + + const siteBaseURL = new URL({{$.Site.BaseURL}}); + const pathBase = siteBaseURL.pathname; + const pathWindow = window.location.pathname; + const isHome = pathBase == pathWindow ? true : false; + // NOTE: everything within this callback will be executed for every page navigation. This is a good place to put JavaScript that loads or modifies data on the page. {{if $.Site.Data.config.enableFooter}} const container = document.getElementById("graph-container") @@ -70,14 +76,36 @@ // clear the graph in case there is anything within it container.textContent = "" - drawGraph( - {{strings.TrimRight "/" .Site.BaseURL}}, - {{$.Site.Data.graphConfig.paths}}, - {{$.Site.Data.graphConfig.depth}}, - {{$.Site.Data.graphConfig.enableDrag}}, - {{$.Site.Data.graphConfig.enableLegend}}, - {{$.Site.Data.graphConfig.enableZoom}} - ); + if (isHome && {{$.Site.Data.graphConfig.enableGlobalGraph}}) { + drawGraph( + {{strings.TrimRight "/" .Site.BaseURL}}, + {{$.Site.Data.graphConfig.paths}}, + {{$.Site.Data.graphConfig.depthGG}}, + {{$.Site.Data.graphConfig.enableDragGG}}, + {{$.Site.Data.graphConfig.enableLegendGG}}, + {{$.Site.Data.graphConfig.enableZoomGG}}, + true, + {{$.Site.Data.graphConfig.opacityScaleGG}}, + {{$.Site.Data.graphConfig.scaleGG}}, + {{$.Site.Data.graphConfig.repelForceGG}}, + {{$.Site.Data.graphConfig.fontSizeGG}} + ); + } else { + drawGraph( + {{strings.TrimRight "/" .Site.BaseURL}}, + {{$.Site.Data.graphConfig.paths}}, + {{$.Site.Data.graphConfig.depth}}, + {{$.Site.Data.graphConfig.enableDrag}}, + {{$.Site.Data.graphConfig.enableLegend}}, + {{$.Site.Data.graphConfig.enableZoom}}, + false, + {{$.Site.Data.graphConfig.opacityScale}}, + {{$.Site.Data.graphConfig.scale}}, + {{$.Site.Data.graphConfig.repelForce}}, + {{$.Site.Data.graphConfig.fontSize}} + ); + } + {{end}} {{if $.Site.Data.config.enableLinkPreview}} initPopover( From 1e237ef677f3b958597460175269eed4b0638112 Mon Sep 17 00:00:00 2001 From: DhammaCharts <100090806+DhammaCharts@users.noreply.github.com> Date: Wed, 1 Jun 2022 20:15:44 +0100 Subject: [PATCH 02/12] change baseURL --- config.toml | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/config.toml b/config.toml index 5efa9f3..6a78381 100644 --- a/config.toml +++ b/config.toml @@ -1,4 +1,4 @@ -baseURL = "https://quartz.jzhao.xyz/" +baseURL = "https://dhammacharts.org/quartz/" languageCode = "en-us" googleAnalytics = "G-XYFD95KB4J" pygmentsUseClasses = true @@ -30,4 +30,4 @@ enableGitInfo = true tabWidth = 4 [frontmatter] lastmod = ["lastmod", ":git", "date", "publishDate"] - publishDate = ["publishDate", "date"] \ No newline at end of file + publishDate = ["publishDate", "date"] From 19606ba63d15edd1e4a98bf1ce5cd510a24880e0 Mon Sep 17 00:00:00 2001 From: DhammaCharts <100090806+DhammaCharts@users.noreply.github.com> Date: Wed, 1 Jun 2022 21:19:03 +0100 Subject: [PATCH 03/12] add www. --- config.toml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/config.toml b/config.toml index 6a78381..65ffb1f 100644 --- a/config.toml +++ b/config.toml @@ -1,4 +1,4 @@ -baseURL = "https://dhammacharts.org/quartz/" +baseURL = "https://www.dhammacharts.org/quartz/" languageCode = "en-us" googleAnalytics = "G-XYFD95KB4J" pygmentsUseClasses = true From e809896338b51e65ca862809e79884469476f2de Mon Sep 17 00:00:00 2001 From: DhammaCharts <100090806+DhammaCharts@users.noreply.github.com> Date: Wed, 1 Jun 2022 21:22:31 +0100 Subject: [PATCH 04/12] increase scale --- data/graphConfig.yaml | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/data/graphConfig.yaml b/data/graphConfig.yaml index 7f08130..f8b9941 100644 --- a/data/graphConfig.yaml +++ b/data/graphConfig.yaml @@ -9,7 +9,7 @@ enableLegend: false enableDrag: true enableZoom: true depth: 1 # set to -1 to show full graph -scale: 1 +scale: 1.2 repelForce: 2 centerForce: 1 linkDistance: 1 @@ -22,7 +22,7 @@ enableLegendGG: false enableDragGG: true enableZoomGG: true depthGG: -1 # set to -1 to show full graph -scaleGG: 1.2 +scaleGG: 1.4 repelForceGG: 1 centerForceGG: 1 linkDistanceGG: 1 From ac0dd50c048d68884b0ada42e3ab0476fb29ef65 Mon Sep 17 00:00:00 2001 From: DhammaCharts <100090806+DhammaCharts@users.noreply.github.com> Date: Wed, 1 Jun 2022 21:30:40 +0100 Subject: [PATCH 05/12] uncomment window.Million --- assets/js/graph.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/assets/js/graph.js b/assets/js/graph.js index 48248ec..87d8d58 100644 --- a/assets/js/graph.js +++ b/assets/js/graph.js @@ -180,7 +180,7 @@ async function drawGraph( ]) const neighbourNodes = d3.selectAll(".node").filter((d) => neighbours.includes(d.id)) const currentId = d.id - // window.Million.prefetch(new URL(`${baseUrl}${decodeURI(d.id).replace(/\s+/g, "-")}/`)) + window.Million.prefetch(new URL(`${baseUrl}${decodeURI(d.id).replace(/\s+/g, "-")}/`)) const linkNodes = d3 .selectAll(".link") .filter((d) => d.source.id === currentId || d.target.id === currentId) From c0800a874980ab0f24fc2e350d70792d9c7f2956 Mon Sep 17 00:00:00 2001 From: DhammaCharts <100090806+DhammaCharts@users.noreply.github.com> Date: Thu, 2 Jun 2022 07:45:44 +0100 Subject: [PATCH 06/12] change baseURL back to original --- config.toml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/config.toml b/config.toml index 65ffb1f..803ef1e 100644 --- a/config.toml +++ b/config.toml @@ -1,4 +1,4 @@ -baseURL = "https://www.dhammacharts.org/quartz/" +baseURL = "https://quartz.jzhao.xyz/" languageCode = "en-us" googleAnalytics = "G-XYFD95KB4J" pygmentsUseClasses = true From d261655d96f9ed084a176ed113b0d11f1351c6de Mon Sep 17 00:00:00 2001 From: DhammaCharts <100090806+DhammaCharts@users.noreply.github.com> Date: Thu, 2 Jun 2022 07:49:09 +0100 Subject: [PATCH 07/12] remove unnecessary ternary --- layouts/partials/head.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/layouts/partials/head.html b/layouts/partials/head.html index 01b8fe8..b56c291 100644 --- a/layouts/partials/head.html +++ b/layouts/partials/head.html @@ -66,7 +66,7 @@ const siteBaseURL = new URL({{$.Site.BaseURL}}); const pathBase = siteBaseURL.pathname; const pathWindow = window.location.pathname; - const isHome = pathBase == pathWindow ? true : false; + const isHome = pathBase == pathWindow; // NOTE: everything within this callback will be executed for every page navigation. This is a good place to put JavaScript that loads or modifies data on the page. {{if $.Site.Data.config.enableFooter}} From c88f31c3645bb0002171bf21850c7ca6d217c73f Mon Sep 17 00:00:00 2001 From: DhammaCharts <100090806+DhammaCharts@users.noreply.github.com> Date: Thu, 2 Jun 2022 08:16:02 +0100 Subject: [PATCH 08/12] change to object destructuring for drawGraph() arguments --- assets/js/graph.js | 11 +++++----- data/graphConfig.yaml | 44 ++++++++++++++++++++------------------ layouts/partials/head.html | 22 ++++--------------- 3 files changed, 32 insertions(+), 45 deletions(-) diff --git a/assets/js/graph.js b/assets/js/graph.js index 87d8d58..9199bef 100644 --- a/assets/js/graph.js +++ b/assets/js/graph.js @@ -1,16 +1,15 @@ -async function drawGraph( - baseUrl, - pathColors, +async function drawGraph(baseUrl,isHome,pathColors,graphConfig) { + + let { depth, enableDrag, enableLegend, enableZoom, - isHome, opacityScale, scale, repelForce, - fontSize -) { + fontSize} = graphConfig; + const container = document.getElementById("graph-container") const { index, links, content } = await fetchData diff --git a/data/graphConfig.yaml b/data/graphConfig.yaml index f8b9941..06ce2b0 100644 --- a/data/graphConfig.yaml +++ b/data/graphConfig.yaml @@ -5,31 +5,33 @@ enableGlobalGraph: true ### Local Graph ### -enableLegend: false -enableDrag: true -enableZoom: true -depth: 1 # set to -1 to show full graph -scale: 1.2 -repelForce: 2 -centerForce: 1 -linkDistance: 1 -fontSize: 0.6 -opacityScale: 3 +localGraph: + enableLegend: false + enableDrag: true + enableZoom: true + depth: 1 # set to -1 to show full graph + scale: 1.2 + repelForce: 2 + centerForce: 1 + linkDistance: 1 + fontSize: 0.6 + opacityScale: 3 ### Global Graph ### -enableLegendGG: false -enableDragGG: true -enableZoomGG: true -depthGG: -1 # set to -1 to show full graph -scaleGG: 1.4 -repelForceGG: 1 -centerForceGG: 1 -linkDistanceGG: 1 -fontSizeGG: 0.5 -opacityScaleGG: 3 +globalGraph: + enableLegend: false + enableDrag: true + enableZoom: true + depth: -1 # set to -1 to show full graph + scale: 1.4 + repelForce: 1 + centerForce: 1 + linkDistance: 1 + fontSize: 0.5 + opacityScale: 3 -### Graphs ### +### For all graphs ### paths: - /moc: "#4388cc" diff --git a/layouts/partials/head.html b/layouts/partials/head.html index b56c291..ba02260 100644 --- a/layouts/partials/head.html +++ b/layouts/partials/head.html @@ -79,30 +79,16 @@ if (isHome && {{$.Site.Data.graphConfig.enableGlobalGraph}}) { drawGraph( {{strings.TrimRight "/" .Site.BaseURL}}, - {{$.Site.Data.graphConfig.paths}}, - {{$.Site.Data.graphConfig.depthGG}}, - {{$.Site.Data.graphConfig.enableDragGG}}, - {{$.Site.Data.graphConfig.enableLegendGG}}, - {{$.Site.Data.graphConfig.enableZoomGG}}, true, - {{$.Site.Data.graphConfig.opacityScaleGG}}, - {{$.Site.Data.graphConfig.scaleGG}}, - {{$.Site.Data.graphConfig.repelForceGG}}, - {{$.Site.Data.graphConfig.fontSizeGG}} + {{$.Site.Data.graphConfig.paths}}, + {{$.Site.Data.graphConfig.globalGraph}} ); } else { drawGraph( {{strings.TrimRight "/" .Site.BaseURL}}, - {{$.Site.Data.graphConfig.paths}}, - {{$.Site.Data.graphConfig.depth}}, - {{$.Site.Data.graphConfig.enableDrag}}, - {{$.Site.Data.graphConfig.enableLegend}}, - {{$.Site.Data.graphConfig.enableZoom}}, false, - {{$.Site.Data.graphConfig.opacityScale}}, - {{$.Site.Data.graphConfig.scale}}, - {{$.Site.Data.graphConfig.repelForce}}, - {{$.Site.Data.graphConfig.fontSize}} + {{$.Site.Data.graphConfig.paths}}, + {{$.Site.Data.graphConfig.localGraph}} ); } From a275123be2b1d528dbde23beb9880933c4e22c3e Mon Sep 17 00:00:00 2001 From: DhammaCharts <100090806+DhammaCharts@users.noreply.github.com> Date: Thu, 2 Jun 2022 08:35:28 +0100 Subject: [PATCH 09/12] better font behaviour --- assets/js/graph.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/assets/js/graph.js b/assets/js/graph.js index 9199bef..f79cb3f 100644 --- a/assets/js/graph.js +++ b/assets/js/graph.js @@ -190,7 +190,7 @@ async function drawGraph(baseUrl,isHome,pathColors,graphConfig) { // highlight links linkNodes.transition().duration(200).attr("stroke", "var(--g-link-active)") - const bigFont = fontSize+0.5 + const bigFont = fontSize*1.5 // show text for self d3.select(this.parentNode) From ab809249c8f57c1980de2fa850eef66301619307 Mon Sep 17 00:00:00 2001 From: DhammaCharts <100090806+DhammaCharts@users.noreply.github.com> Date: Mon, 6 Jun 2022 16:42:53 +0100 Subject: [PATCH 10/12] Update layouts/partials/head.html Co-authored-by: Jacky Zhao --- layouts/partials/head.html | 16 ++++------------ 1 file changed, 4 insertions(+), 12 deletions(-) diff --git a/layouts/partials/head.html b/layouts/partials/head.html index 6eb8eaf..b3ad28d 100644 --- a/layouts/partials/head.html +++ b/layouts/partials/head.html @@ -72,21 +72,13 @@ // clear the graph in case there is anything within it container.textContent = "" - if (isHome && {{$.Site.Data.graphConfig.enableGlobalGraph}}) { - drawGraph( + const drawGlobal = isHome && {{$.Site.Data.graphConfig.enableGlobalGraph}}; + drawGraph( {{strings.TrimRight "/" .Site.BaseURL}}, - true, + drawGlobal, {{$.Site.Data.graphConfig.paths}}, - {{$.Site.Data.graphConfig.globalGraph}} + drawGlobal ? {{$.Site.Data.graphConfig.globalGraph}} : {{$.Site.Data.graphConfig.localGraph}} ); - } else { - drawGraph( - {{strings.TrimRight "/" .Site.BaseURL}}, - false, - {{$.Site.Data.graphConfig.paths}}, - {{$.Site.Data.graphConfig.localGraph}} - ); - } {{end}} From 69c74ca6b5854cbb3e7dd895dca0539f51f49720 Mon Sep 17 00:00:00 2001 From: DhammaCharts <100090806+DhammaCharts@users.noreply.github.com> Date: Mon, 6 Jun 2022 16:48:16 +0100 Subject: [PATCH 11/12] minor adjustment --- assets/js/graph.js | 2 +- layouts/partials/footerIndex.html | 4 ---- 2 files changed, 1 insertion(+), 5 deletions(-) diff --git a/assets/js/graph.js b/assets/js/graph.js index f79cb3f..174d494 100644 --- a/assets/js/graph.js +++ b/assets/js/graph.js @@ -1,4 +1,4 @@ -async function drawGraph(baseUrl,isHome,pathColors,graphConfig) { +async function drawGraph(baseUrl, isHome, pathColors, graphConfig) { let { depth, diff --git a/layouts/partials/footerIndex.html b/layouts/partials/footerIndex.html index 36c8a8a..5f19044 100644 --- a/layouts/partials/footerIndex.html +++ b/layouts/partials/footerIndex.html @@ -1,7 +1,3 @@ - - -
- {{if $.Site.Data.config.enableFooter}} {{if $.Site.Data.graphConfig.enableGlobalGraph}}
From 52a185f73b18d8e5a564c2144401de750b0e025a Mon Sep 17 00:00:00 2001 From: DhammaCharts <100090806+DhammaCharts@users.noreply.github.com> Date: Mon, 6 Jun 2022 16:49:01 +0100 Subject: [PATCH 12/12] change enableGlobalGraph to false --- data/graphConfig.yaml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/data/graphConfig.yaml b/data/graphConfig.yaml index 06ce2b0..a6f916a 100644 --- a/data/graphConfig.yaml +++ b/data/graphConfig.yaml @@ -1,7 +1,7 @@ # if true, a Global Graph will be shown on home page with full width, no backlink. # A different set of Local Graphs will be shown on sub pages. # if false, Local Graph will be default on every page as usual -enableGlobalGraph: true +enableGlobalGraph: false ### Local Graph ###