feat: add more plausible events
This commit is contained in:
parent
2b0b80529a
commit
cf4b9f3f39
@ -8,7 +8,7 @@ async function drawGraph(baseUrl, isHome, pathColors, graphConfig) {
|
|||||||
opacityScale,
|
opacityScale,
|
||||||
scale,
|
scale,
|
||||||
repelForce,
|
repelForce,
|
||||||
fontSize} = graphConfig;
|
fontSize } = graphConfig;
|
||||||
|
|
||||||
const container = document.getElementById("graph-container")
|
const container = document.getElementById("graph-container")
|
||||||
const { index, links, content } = await fetchData
|
const { index, links, content } = await fetchData
|
||||||
@ -85,7 +85,7 @@ async function drawGraph(baseUrl, isHome, pathColors, graphConfig) {
|
|||||||
d.fy = null
|
d.fy = null
|
||||||
}
|
}
|
||||||
|
|
||||||
const noop = () => {}
|
const noop = () => { }
|
||||||
return d3
|
return d3
|
||||||
.drag()
|
.drag()
|
||||||
.on("start", enableDrag ? dragstarted : noop)
|
.on("start", enableDrag ? dragstarted : noop)
|
||||||
@ -168,9 +168,18 @@ async function drawGraph(baseUrl, isHome, pathColors, graphConfig) {
|
|||||||
.style("cursor", "pointer")
|
.style("cursor", "pointer")
|
||||||
.on("click", (_, d) => {
|
.on("click", (_, d) => {
|
||||||
// SPA navigation
|
// SPA navigation
|
||||||
window.Million.navigate(new URL(`${baseUrl}${decodeURI(d.id).replace(/\s+/g, "-")}/`), ".singlePage")
|
const targ = `${baseUrl}${decodeURI(d.id).replace(/\s+/g, "-")}/`
|
||||||
|
window.Million.navigate(new URL(targ), ".singlePage")
|
||||||
|
plausible("Link Click", {
|
||||||
|
props: {
|
||||||
|
href: targ,
|
||||||
|
broken: false,
|
||||||
|
internal: true,
|
||||||
|
graph: true,
|
||||||
|
}
|
||||||
})
|
})
|
||||||
.on("mouseover", function (_, d) {
|
})
|
||||||
|
.on("mouseover", function(_, d) {
|
||||||
d3.selectAll(".node").transition().duration(100).attr("fill", "var(--g-node-inactive)")
|
d3.selectAll(".node").transition().duration(100).attr("fill", "var(--g-node-inactive)")
|
||||||
|
|
||||||
const neighbours = parseIdsFromLinks([
|
const neighbours = parseIdsFromLinks([
|
||||||
@ -190,7 +199,7 @@ async function drawGraph(baseUrl, isHome, pathColors, graphConfig) {
|
|||||||
// highlight links
|
// highlight links
|
||||||
linkNodes.transition().duration(200).attr("stroke", "var(--g-link-active)")
|
linkNodes.transition().duration(200).attr("stroke", "var(--g-link-active)")
|
||||||
|
|
||||||
const bigFont = fontSize*1.5
|
const bigFont = fontSize * 1.5
|
||||||
|
|
||||||
// show text for self
|
// show text for self
|
||||||
d3.select(this.parentNode)
|
d3.select(this.parentNode)
|
||||||
@ -200,10 +209,10 @@ async function drawGraph(baseUrl, isHome, pathColors, graphConfig) {
|
|||||||
.duration(200)
|
.duration(200)
|
||||||
.attr('opacityOld', d3.select(this.parentNode).select('text').style("opacity"))
|
.attr('opacityOld', d3.select(this.parentNode).select('text').style("opacity"))
|
||||||
.style('opacity', 1)
|
.style('opacity', 1)
|
||||||
.style('font-size', bigFont+'em')
|
.style('font-size', bigFont + 'em')
|
||||||
.attr('dy', d => nodeRadius(d) + 20 + 'px') // radius is in px
|
.attr('dy', d => nodeRadius(d) + 20 + 'px') // radius is in px
|
||||||
})
|
})
|
||||||
.on("mouseleave", function (_, d) {
|
.on("mouseleave", function(_, d) {
|
||||||
d3.selectAll(".node").transition().duration(200).attr("fill", color)
|
d3.selectAll(".node").transition().duration(200).attr("fill", color)
|
||||||
|
|
||||||
const currentId = d.id
|
const currentId = d.id
|
||||||
@ -218,7 +227,7 @@ async function drawGraph(baseUrl, isHome, pathColors, graphConfig) {
|
|||||||
.transition()
|
.transition()
|
||||||
.duration(200)
|
.duration(200)
|
||||||
.style('opacity', d3.select(this.parentNode).select('text').attr("opacityOld"))
|
.style('opacity', d3.select(this.parentNode).select('text').attr("opacityOld"))
|
||||||
.style('font-size', fontSize+'em')
|
.style('font-size', fontSize + 'em')
|
||||||
.attr('dy', d => nodeRadius(d) + 8 + 'px') // radius is in px
|
.attr('dy', d => nodeRadius(d) + 8 + 'px') // radius is in px
|
||||||
})
|
})
|
||||||
.call(drag(simulation))
|
.call(drag(simulation))
|
||||||
@ -232,7 +241,7 @@ async function drawGraph(baseUrl, isHome, pathColors, graphConfig) {
|
|||||||
.text((d) => content[d.id]?.title || (d.id.charAt(1).toUpperCase() + d.id.slice(2)).replace("-", " "))
|
.text((d) => content[d.id]?.title || (d.id.charAt(1).toUpperCase() + d.id.slice(2)).replace("-", " "))
|
||||||
.style('opacity', (opacityScale - 1) / 3.75)
|
.style('opacity', (opacityScale - 1) / 3.75)
|
||||||
.style("pointer-events", "none")
|
.style("pointer-events", "none")
|
||||||
.style('font-size', fontSize+'em')
|
.style('font-size', fontSize + 'em')
|
||||||
.raise()
|
.raise()
|
||||||
.call(drag(simulation))
|
.call(drag(simulation))
|
||||||
|
|
||||||
|
@ -64,6 +64,11 @@ function initPopover(baseURL, useContextualBacklinks) {
|
|||||||
})
|
})
|
||||||
|
|
||||||
el.classList.add("visible")
|
el.classList.add("visible")
|
||||||
|
plausible("Popover Hover", {
|
||||||
|
props: {
|
||||||
|
href: li.dataset.src
|
||||||
|
}
|
||||||
|
})
|
||||||
})
|
})
|
||||||
li.addEventListener("mouseout", () => {
|
li.addEventListener("mouseout", () => {
|
||||||
el.classList.remove("visible")
|
el.classList.remove("visible")
|
||||||
|
@ -15,7 +15,6 @@ export const attachSPARouting = (init, rerender) => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const render = () => requestAnimationFrame(rerender)
|
const render = () => requestAnimationFrame(rerender)
|
||||||
|
|
||||||
window.addEventListener("DOMContentLoaded", () => {
|
window.addEventListener("DOMContentLoaded", () => {
|
||||||
apply((doc) => init(doc))
|
apply((doc) => init(doc))
|
||||||
init()
|
init()
|
||||||
|
@ -123,6 +123,11 @@ const redir = (id, term) => {
|
|||||||
".singlePage",
|
".singlePage",
|
||||||
)
|
)
|
||||||
closeSearch()
|
closeSearch()
|
||||||
|
plausible("Search", {
|
||||||
|
props: {
|
||||||
|
term
|
||||||
|
}
|
||||||
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
function openSearch() {
|
function openSearch() {
|
||||||
|
@ -183,6 +183,28 @@
|
|||||||
throwOnError : false
|
throwOnError : false
|
||||||
});
|
});
|
||||||
{{end}}
|
{{end}}
|
||||||
|
|
||||||
|
// analytics
|
||||||
|
function clickHandler(evt) {
|
||||||
|
const target = evt.target
|
||||||
|
const classNames = target.className.split(" ")
|
||||||
|
const broken = classNames.includes("broken")
|
||||||
|
const internal = classNames.includes("internal-link")
|
||||||
|
plausible("Link Click", {
|
||||||
|
props: {
|
||||||
|
href: target.href,
|
||||||
|
broken,
|
||||||
|
internal,
|
||||||
|
graph: false,
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
const links = document.querySelectorAll("a")
|
||||||
|
for (link of links) {
|
||||||
|
link.addEventListener('click', clickHandler)
|
||||||
|
link.addEventListener('auxclick', clickHandler)
|
||||||
|
}
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
{{if $data.enableSPA | default $.Site.Data.config.enableSPA}}
|
{{if $data.enableSPA | default $.Site.Data.config.enableSPA}}
|
||||||
@ -207,4 +229,5 @@
|
|||||||
{{end}}
|
{{end}}
|
||||||
{{ $trimmedURL := trim (index (split .Site.BaseURL "://") 1) "/" }}
|
{{ $trimmedURL := trim (index (split .Site.BaseURL "://") 1) "/" }}
|
||||||
<script defer data-domain="{{$trimmedURL}}" src="https://plausible.io/js/script.js"></script>
|
<script defer data-domain="{{$trimmedURL}}" src="https://plausible.io/js/script.js"></script>
|
||||||
|
<script>window.plausible = window.plausible || function() { (window.plausible.q = window.plausible.q || []).push(arguments) }</script>
|
||||||
</head>
|
</head>
|
||||||
|
Loading…
Reference in New Issue
Block a user