test 2

Signed-off-by: Khusika Dhamar Gusti <[email protected]>

Author: khusika

assets/css/_page/_single.scss

@@ -1,5 +1,4 @@
 @import "../_partial/_single/toc";
-@import '../_variables'; // Import theme variables to resolve the error.
 
 /* Add styles for the new Related Posts panel, matching the TOC */
 .related {
@@ -442,3 +441,8 @@
 .lg-toolbar .lg-icon::after {
   color: #999;
 }
+
+// Add this rule to permanently hide the static related block container.
+#related-static {
+  display: none !important;
+}

assets/js/theme.js

@@ -394,19 +394,28 @@ class Theme {
     }
 
     initRelated() {
+        // Clean up any listeners from the previous page to prevent conflicts.
+        if (this._relatedOnScroll) {
+            this.scrollEventSet.delete(this._relatedOnScroll);
+            this.resizeEventSet.delete(this._relatedOnScroll);
+        }
+
         const $relatedAuto = document.getElementById('related-auto');
         if (!$relatedAuto) return;
 
         const $relatedContentStatic = document.getElementById('related-content-static');
         if ($relatedContentStatic) {
-            $relatedAuto.querySelector('.related-content').appendChild($relatedContentStatic);
+            const $relatedContentAuto = $relatedAuto.querySelector('.related-content');
+            if ($relatedContentAuto) {
+                $relatedContentAuto.appendChild($relatedContentStatic);
+            }
         }
 
         const $toc = document.getElementById('toc-auto');
         if (!$toc) return;
 
-        // This function ONLY handles vertical scrolling adjustments.
-        this._relatedOnScroll = this._relatedOnScroll || (() => {
+        // Create a new scroll handler function for the current page.
+        this._relatedOnScroll = () => {
             // If the panel's container is hidden by CSS, do nothing.
             if (getComputedStyle($relatedAuto.parentElement).display === 'none') {
                 return;
@@ -416,15 +425,13 @@ class Theme {
             const headerHeight = document.getElementById('header-desktop').offsetHeight;
             const TOP_SPACING = 20 + (headerIsFixed ? headerHeight : 0);
 
-            // Use the TOC's position as the reliable source of truth for vertical alignment.
             const minRelatedTop = $toc.offsetTop;
             const minScrollTop = minRelatedTop - TOP_SPACING;
 
             const footerTop = document.getElementById('post-footer').offsetTop;
             const maxRelatedTop = footerTop - $relatedAuto.getBoundingClientRect().height;
             const maxScrollTop = maxRelatedTop - TOP_SPACING;
 
-            // Set initial position before scrolling begins
             if ($relatedAuto.style.position !== 'fixed') {
                 $relatedAuto.style.position = 'absolute';
                 $relatedAuto.style.top = `${minRelatedTop}px`;
@@ -440,12 +447,11 @@ class Theme {
                 $relatedAuto.style.position = 'fixed';
                 $relatedAuto.style.top = `${TOP_SPACING}px`;
             }
-        });
+        };
 
-        // Run once on load and add to the scroll listener.
+        // Run once on load and add the new handler to the event listeners.
         this._relatedOnScroll();
         this.scrollEventSet.add(this._relatedOnScroll);
-        // Also run on resize to catch layout shifts.
         this.resizeEventSet.add(this._relatedOnScroll);
     }