add src files

src/index.js

@@ -1,9 +1,11 @@
 // import { plotClusters } from './clusters'
 import { init_memory_plot } from './memory'
 import { loadFragments } from './fragmentLoader'
+import { syncHFSpacesURLHash } from './syncHFSpacesURLHash'
 
 document.addEventListener("DOMContentLoaded", () => {
     console.log("DOMContentLoaded");
     loadFragments();
     init_memory_plot();
+    syncHFSpacesURLHash();
 }, { once: true });

src/syncHFSpacesURLHash.js

@@ -0,0 +1,90 @@
+const queryArg = "section";
+
+function syncHFSpacesURLHash(){
+    // Check for section parameter in URL
+    const urlParams = new URLSearchParams(window.location.search);
+    const sectionId = urlParams.get(queryArg);
+    
+    if (sectionId) {
+      // Find the element with the specified ID
+      const targetElement = document.getElementById(sectionId);
+      
+      // scroll if the element exists
+      if (targetElement) {
+        targetElement.scrollIntoView();
+        history.replaceState(null, null, `#${sectionId}`);
+      }
+    }
+
+    updateHashBasedOnHashChange();
+    
+    // Variables to manage throttling
+    let isScrolling = false;
+    let lastKnownScrollPosition = 0;
+    
+    // Add the scroll event listener here
+    window.addEventListener('scroll', function() {
+      lastKnownScrollPosition = window.scrollY;
+      
+      if (!isScrolling) {
+        window.requestAnimationFrame(function() {
+          updateHashBasedOnScroll(lastKnownScrollPosition);
+          isScrolling = false;
+        });
+      }
+      
+      isScrolling = true;
+    });
+    
+    // Initial hash update on page load
+    updateHashBasedOnScroll(window.scrollY);
+}
+
+// Function to update the URL hash based on scroll position
+function updateHashBasedOnScroll(scrollPosition) {
+    // Get only heading elements with IDs that we want to track
+    const elementsWithIds = Array.from(document.querySelectorAll('h1[id], h2[id], h3[id], h4[id], h5[id], h6[id]'));
+
+    // Skip updating if there are no elements with IDs
+    if (elementsWithIds.length === 0) return;
+  
+    // Find the element closest to the top of the viewport
+    let closestElement = null;
+    let closestDistance = Infinity;
+    const viewportMiddle = scrollPosition + window.innerHeight / 2;
+    
+    // Iterate through all elements with IDs to find the closest one
+    elementsWithIds.forEach(element => {
+      const elementTop = element.getBoundingClientRect().top + scrollPosition;
+      const distance = Math.abs(elementTop - viewportMiddle);
+      
+      if (distance < closestDistance) {
+        closestDistance = distance;
+        closestElement = element;
+      }
+    });
+    
+    // Update the URL hash if we found a closest element
+    if (closestElement && closestElement.id) {
+      // Only update if the hash is different to avoid unnecessary history entries
+      if (window.location.hash !== `#${closestElement.id}`) {
+        // Update the URL without adding a new history entry
+        history.replaceState(null, null, `#${closestElement.id}`);
+        postMessageToHFSpaces(closestElement.id);
+      }
+    }
+}
+
+function updateHashBasedOnHashChange() {
+  window.addEventListener('hashchange', () => {
+      const elementId = window.location.hash.slice(1);
+      postMessageToHFSpaces(elementId);
+  });
+}
+
+function postMessageToHFSpaces(elementId){
+  const parentOrigin = "https://huggingface.co";
+  window.parent.postMessage({ queryString: `${queryArg}=${elementId}` }, parentOrigin);
+}
+
+export { syncHFSpacesURLHash };