fix(goatcounter): properly count SPA page hits

On the surface it seems that only google and plausible scripts handle
the SPA correctly - but I don't know if maybe others handle
window.history API themselves somehow or something like that.

However, I am trying out goatcounter and in it's docs I see that it
does no special SPA handling, so this has to be added.

Note:
The whole `significantLoad` thing is to correctly count things -
goatcounter will not be loaded and initialized yet when the initial
"nav" is dispatched (because of the weird dynamic script tag insertion
thing you guys have going on here), but it will count that page load
when it itself is loaded.

If there was a way to ensure goatcounter is loaded before the first
nav, you could just configure it to not count anything on it's own load
(like in their spa [example](https://www.goatcounter.com/help/spa)) and
have the "nav" call it unconditionally, but that's not the case 🤷

index.d.ts

@@ -5,7 +5,7 @@ declare module "*.scss" {
 
 // dom custom event
 interface CustomEventMap {
-  nav: CustomEvent<{ url: FullSlug }>
+  nav: CustomEvent<{ url: FullSlug; significantLoad?: true }>
   themechange: CustomEvent<{ theme: "light" | "dark" }>
 }
 

quartz/components/scripts/spa.inline.ts

@@ -35,8 +35,8 @@ const getOpts = ({ target }: Event): { url: URL; scroll?: boolean } | undefined
   return { url: new URL(href), scroll: "routerNoscroll" in a.dataset ? false : undefined }
 }
 
-function notifyNav(url: FullSlug) {
-  const event: CustomEventMap["nav"] = new CustomEvent("nav", { detail: { url } })
+function notifyNav(url: FullSlug, significantLoad?: true) {
+  const event: CustomEventMap["nav"] = new CustomEvent("nav", { detail: { url, significantLoad } })
   document.dispatchEvent(event)
 }
 
@@ -177,7 +177,7 @@ function createRouter() {
 }
 
 createRouter()
-notifyNav(getFullSlug(window))
+notifyNav(getFullSlug(window), true)
 
 if (!customElements.get("route-announcer")) {
   const attrs = {

quartz/plugins/emitters/componentResources.ts

@@ -127,6 +127,7 @@ function addGlobalPageResources(ctx: BuildCtx, componentResources: ComponentReso
       goatcounterScript.async = true
       goatcounterScript.setAttribute("data-goatcounter",
         "https://${cfg.analytics.websiteId}.${cfg.analytics.host ?? "goatcounter.com"}/count")
+      document.addEventListener("nav", (e) => !e.detail.significantLoad && window.goatcounter?.count())
       document.head.appendChild(goatcounterScript)
     `)
   } else if (cfg.analytics?.provider === "posthog") {
@@ -169,7 +170,7 @@ function addGlobalPageResources(ctx: BuildCtx, componentResources: ComponentReso
     componentResources.afterDOMLoaded.push(`
       window.spaNavigate = (url, _) => window.location.assign(url)
       window.addCleanup = () => {}
-      const event = new CustomEvent("nav", { detail: { url: document.body.dataset.slug } })
+      const event = new CustomEvent("nav", { detail: { url: document.body.dataset.slug, significantLoad: true } })
       document.dispatchEvent(event)
     `)
   }