feat: add more plausible events

Jacky Zhao

2023-02-05 11959de11ce76f0f47284b946a577481c0ffaeaa

feat: add more plausible events

 assets/js/graph.js

@@ -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 @@
      d.fy = null
    }

    const noop = () => {}
    const noop = () => { }
    return d3
      .drag()
      .on("start", enableDrag ? dragstarted : noop)
@@ -168,9 +168,18 @@
    .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 @@
      // 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 @@
        .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 @@
      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 @@
    .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))


 assets/js/popover.js

@@ -64,6 +64,11 @@
            })

            el.classList.add("visible")
            plausible("Popover Hover", {
              props: {
                href: li.dataset.src 
              }
            })
          })
          li.addEventListener("mouseout", () => {
            el.classList.remove("visible")

 assets/js/router.js

@@ -15,7 +15,6 @@
  }

  const render = () => requestAnimationFrame(rerender)

  window.addEventListener("DOMContentLoaded", () => {
    apply((doc) => init(doc))
    init()

 assets/js/util.js

@@ -123,6 +123,11 @@
    ".singlePage",
  )
  closeSearch()
  plausible("Search", {
    props: {
      term
    }
  })
}

function openSearch() {

 layouts/partials/head.html

@@ -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>