feat: add more plausible events
This commit is contained in:
parent
a73aca8ed9
commit
11959de11c
@ -1,14 +1,14 @@
|
||||
async function drawGraph(baseUrl, isHome, pathColors, graphConfig) {
|
||||
|
||||
let {
|
||||
depth,
|
||||
enableDrag,
|
||||
enableLegend,
|
||||
enableZoom,
|
||||
opacityScale,
|
||||
scale,
|
||||
repelForce,
|
||||
fontSize} = graphConfig;
|
||||
depth,
|
||||
enableDrag,
|
||||
enableLegend,
|
||||
enableZoom,
|
||||
opacityScale,
|
||||
scale,
|
||||
repelForce,
|
||||
fontSize } = graphConfig;
|
||||
|
||||
const container = document.getElementById("graph-container")
|
||||
const { index, links, content } = await fetchData
|
||||
@ -85,7 +85,7 @@ async function drawGraph(baseUrl, isHome, pathColors, graphConfig) {
|
||||
d.fy = null
|
||||
}
|
||||
|
||||
const noop = () => {}
|
||||
const noop = () => { }
|
||||
return d3
|
||||
.drag()
|
||||
.on("start", enableDrag ? dragstarted : noop)
|
||||
@ -168,9 +168,18 @@ async function drawGraph(baseUrl, isHome, pathColors, graphConfig) {
|
||||
.style("cursor", "pointer")
|
||||
.on("click", (_, d) => {
|
||||
// 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)")
|
||||
|
||||
const neighbours = parseIdsFromLinks([
|
||||
@ -190,7 +199,7 @@ async function drawGraph(baseUrl, isHome, pathColors, graphConfig) {
|
||||
// highlight links
|
||||
linkNodes.transition().duration(200).attr("stroke", "var(--g-link-active)")
|
||||
|
||||
const bigFont = fontSize*1.5
|
||||
const bigFont = fontSize * 1.5
|
||||
|
||||
// show text for self
|
||||
d3.select(this.parentNode)
|
||||
@ -200,10 +209,10 @@ async function drawGraph(baseUrl, isHome, pathColors, graphConfig) {
|
||||
.duration(200)
|
||||
.attr('opacityOld', d3.select(this.parentNode).select('text').style("opacity"))
|
||||
.style('opacity', 1)
|
||||
.style('font-size', bigFont+'em')
|
||||
.style('font-size', bigFont + 'em')
|
||||
.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)
|
||||
|
||||
const currentId = d.id
|
||||
@ -214,12 +223,12 @@ async function drawGraph(baseUrl, isHome, pathColors, graphConfig) {
|
||||
linkNodes.transition().duration(200).attr("stroke", "var(--g-link)")
|
||||
|
||||
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
|
||||
.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))
|
||||
|
||||
@ -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("-", " "))
|
||||
.style('opacity', (opacityScale - 1) / 3.75)
|
||||
.style("pointer-events", "none")
|
||||
.style('font-size', fontSize+'em')
|
||||
.style('font-size', fontSize + 'em')
|
||||
.raise()
|
||||
.call(drag(simulation))
|
||||
|
||||
|
@ -64,6 +64,11 @@ function initPopover(baseURL, useContextualBacklinks) {
|
||||
})
|
||||
|
||||
el.classList.add("visible")
|
||||
plausible("Popover Hover", {
|
||||
props: {
|
||||
href: li.dataset.src
|
||||
}
|
||||
})
|
||||
})
|
||||
li.addEventListener("mouseout", () => {
|
||||
el.classList.remove("visible")
|
||||
|
@ -15,7 +15,6 @@ export const attachSPARouting = (init, rerender) => {
|
||||
}
|
||||
|
||||
const render = () => requestAnimationFrame(rerender)
|
||||
|
||||
window.addEventListener("DOMContentLoaded", () => {
|
||||
apply((doc) => init(doc))
|
||||
init()
|
||||
|
@ -123,6 +123,11 @@ const redir = (id, term) => {
|
||||
".singlePage",
|
||||
)
|
||||
closeSearch()
|
||||
plausible("Search", {
|
||||
props: {
|
||||
term
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
function openSearch() {
|
||||
|
@ -183,6 +183,28 @@
|
||||
throwOnError : false
|
||||
});
|
||||
{{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>
|
||||
{{if $data.enableSPA | default $.Site.Data.config.enableSPA}}
|
||||
@ -207,4 +229,5 @@
|
||||
{{end}}
|
||||
{{ $trimmedURL := trim (index (split .Site.BaseURL "://") 1) "/" }}
|
||||
<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>
|
||||
|
Loading…
Reference in New Issue
Block a user