Fix landmark observer

web/main.ts

@@ -1,8 +1,10 @@
 class VisitAnalytics {
-    observer;
+    landmarksObserver: IntersectionObserver;
 
     constructor() {
         window.plausible = window.plausible || function () { (window.plausible.q = window.plausible.q || []).push(arguments); };
+
+        // Hopefull this won't miss anything
         if (document.readyState == "interactive")
             this.init()
         else
@@ -10,23 +12,29 @@ class VisitAnalytics {
     }
 
     init() {
-        let options = {
-            root: null,
-            rootMargin: "0px",
-            threshold: 1.0
-        };
+        this.landmarksObserver = new IntersectionObserver(
+            (entries, observer) => this.handleLandmarks(entries, observer),
+            {
+                root: null,
+                rootMargin: "0px",
+                threshold: 1.0
+            }
+        );
 
-        this.observer = new IntersectionObserver((entries, observer) => this.handleIntersect(entries, observer), options);
+        {
+            var all = document.querySelectorAll(".chapter-announce");
+            all.forEach(elem => this.landmarksObserver.observe(elem));
+            this.landmarksObserver.observe(document.querySelector("footer"));
+        }
 
-        var all = document.querySelectorAll(".chapter-announce");
-        all.forEach(elem => this.observer.observe(elem));
-        this.observer.observe(document.querySelector("footer"));
         console.log("Intersection observer ready");
     }
 
-    handleIntersect(entries: IntersectionObserverEntry[], observer: IntersectionObserver) {
+    handleLandmarks(entries: IntersectionObserverEntry[], observer: IntersectionObserver) {
         entries.filter(e => e.isIntersecting).forEach(e => {
-                if (e.target.className == "chapter-announce" && !e.target.nextElementSibling.querySelector("img").complete)
+                const announcingPost = e.target.getAttribute("data-announcing-post");
+
+                if (announcingPost != null && !e.target.parentElement.querySelector<HTMLImageElement>(`#post-${announcingPost} img`).complete)
                     return;
                 window.plausible("landmark", {props: {id: e.target.id ? e.target.id : e.target.tagName}});
                 observer.unobserve(e.target);