Merge pull request #565 from raifdmueller/feat/anchor-route-on-card-click

feat(analytics): count anchor opens via card click + fix modal back-button

Author: rdmueller

website/src/main.js

@@ -368,7 +368,10 @@ function bindAnchorSelection() {
 
 function handleAnchorSelection(event) {
   const { anchorId } = event.detail
-  getAnchorModalModule().then(({ showAnchorDetails }) => showAnchorDetails(anchorId))
+  // Navigate to the anchor route instead of opening the modal directly: the
+  // URL then reflects the open anchor (deep-linkable, Back closes it), and the
+  // router records it as a pageview so we can see which anchors are opened.
+  navigate(`/anchor/${anchorId}`)
 }
 
 function initCardGridVisualization() {

website/src/utils/router.js

@@ -159,6 +159,16 @@ function trackPageview() {
   }
 }
 
+// Close the anchor modal if it is open. Called when a non-anchor route is
+// resolved so the modal doesn't linger over the page after Back/forward or
+// in-app navigation. On a non-anchor route closeModal() does not touch the URL.
+function closeOpenAnchorModal() {
+  const modal = typeof document !== 'undefined' ? document.getElementById('anchor-modal') : null
+  if (modal && !modal.classList.contains('hidden')) {
+    import('../components/anchor-modal.js').then(({ closeModal }) => closeModal())
+  }
+}
+
 function handleRoute() {
   let path = getCurrentRoute()
 
@@ -202,6 +212,10 @@ function handleRoute() {
     return
   }
 
+  // Leaving an anchor route: close any open anchor modal so Back/forward and
+  // in-app navigation don't leave it stranded as an overlay over the page.
+  closeOpenAnchorModal()
+
   const handler = routes.get(path)
 
   if (typeof handler === 'function') {