chore: remove gumshoe

Signed-off-by: Florian-Schoenherr <[email protected]>

Author: Florian-Schoenherr

packages/docs/src/components/doc/Layout.svelte

@@ -14,27 +14,63 @@
   import { Divider, Icon } from 'svelte-materialify/src';
   import { onMount, onDestroy, tick } from 'svelte';
   import { mdiOpenInNew } from '@mdi/js';
+  import { hashURL } from '../../util/stores';
+
+  export let title;
+  export let description;
+  export let keywords;
+  export let related = null;
+  let container;
 
   onMount(() => {
-    document.querySelectorAll('.markdown-container .heading a').forEach((a) => {
-      if (!a.hash || !document.querySelectorAll(a.hash).length) return;
+    const visible = [];
+    container.querySelectorAll('.heading a').forEach((a) => {
+      if (!a.hash) return;
       a.href = window.location.origin + window.location.pathname + a.hash;
-      a.setAttribute('aria-hidden', true);
-      a.setAttribute('tabindex', -1);
     });
+
+    const headingElements = [].slice.call(container.querySelectorAll('.heading:not(h1)'));
+    const headings = headingElements.map((h) => h.id);
+
+    const io = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((e) => {
+          const id = e.target.id;
+          if (e.isIntersecting) {
+            // eslint-disable-next-line no-unused-expressions
+            headings.indexOf(id) < headings.indexOf(visible[0]) ?
+              visible.unshift(id) :
+              visible.push(id);
+          } else {
+            const visiblePosition = visible.indexOf(id);
+            if (visiblePosition > -1) visible.splice(visiblePosition, 1);
+          }
+        });
+        const hash = visible[0];
+        if (hash) {
+          const oldURL = `${window.location.protocol}//${window.location.host}${window.location.pathname}`;
+          const newURL = `${oldURL}#${hash}`;
+          window.history.replaceState({ oldUrl: oldURL }, null, newURL);
+          // eslint-disable-next-line no-unused-vars
+          $hashURL = newURL;
+        }
+      },
+      { threshold: [1] },
+    );
+
+    headingElements.forEach((el) => {
+      io.observe(el);
+    });
+
     // Cheap trick to set true on initial load
     markdown.update((x) => !x);
+    return () => io.disconnect();
   });
 
   onDestroy(async () => {
     await tick();
     markdown.set(true);
   });
-
-  export let title;
-  export let description;
-  export let keywords;
-  export let related = null;
 </script>
 
 <style global>
@@ -70,7 +106,9 @@
 <Meta title="{title} | Svelte Materialify" {description} {keywords} />
 
 <section class="markdown-container pa-4 pa-sm-6 pa-md-8">
-  <slot />
+  <div bind:this={container}>
+    <slot />
+  </div>
   {#if related}
     <RelatedPages {related} />
   {/if}

packages/docs/src/components/navigation/LeftNavigationDrawer.svelte

@@ -14,10 +14,14 @@
   export let depth = 0;
   const offset = 1.5 ** depth * 54;
 
+  function equals(browserPath, navItemPath) {
+    return browserPath === navItemPath || `${browserPath}/` === navItemPath;
+  }
+
   function expand(parent) {
     const found = parent.some((child) => {
       if (child.items) return expand(child.items);
-      return $page.path === child.href;
+      return equals($page.path, child.href);
     });
     if (found) activeDepth = depth;
     return found;
@@ -44,7 +48,7 @@
       <svelte:self item={children} depth={depth + 1} />
     {:else}
       <a href={children.href} sapper:prefetch>
-        <ListItem active={children.href === $page.path}>{children.text}</ListItem>
+        <ListItem active={equals($page.path, children.href)}>{children.text}</ListItem>
       </a>
     {/if}
   {/each}

packages/docs/src/components/navigation/RightNavigationDrawer.svelte

@@ -1,18 +1,11 @@
 <script>
-  import Gumshoe from 'gumshoejs';
   import { onMount, tick } from 'svelte';
   import { markdown } from '@/util/stores';
+  import { hashURL } from '../../util/stores';
 
   let items = [];
   const depths = { H2: 'pl-3', H3: 'pl-6', H4: 'pl-8' };
-
   onMount(() => {
-    const spy = new Gumshoe('#toc a', {
-      events: false,
-      offset: 128,
-      navClass: 'active',
-    });
-
     async function refresh() {
       const basename = `${window.location.origin + window.location.pathname}#`;
       items = [];
@@ -27,15 +20,13 @@
         });
       items = items;
       await tick();
-      spy.setup();
     }
 
     const unsubscribe = markdown.subscribe((loaded) => {
       if (loaded) refresh();
     });
 
     return () => {
-      spy.destroy();
       unsubscribe();
     };
   });
@@ -64,7 +55,7 @@
 <h5 class="mb-3 mt-6">Contents</h5>
 <ul id="toc" class="pl-4">
   {#each items as item}
-    <li class="{item.class} pt-1 pb-1 text-body-2">
+    <li class="{item.class} pt-1 pb-1 text-body-2" class:active={item.href === $hashURL}>
       <a href={item.href}>{item.text}</a>
     </li>
   {/each}

packages/docs/src/routes/index.svelte

@@ -12,10 +12,10 @@
     Row,
     Col,
     Footer,
-    Alert
+    Alert,
   } from 'svelte-materialify/src';
   import Meta from '@/components/Meta.svelte';
-  import { mdiSpeedometer, mdiGithub, mdiPlus, mdiCheckBold, mdiTwitter } from '@mdi/js';
+  import { mdiSpeedometer, mdiGithub, mdiPlus, mdiTwitter } from '@mdi/js';
 </script>
 
 <style lang="scss">
@@ -100,17 +100,20 @@
     <h2 class="font-weight-bold">DISCLAMER</h2>
     <br />
     <p>
-      Svelte Materialify is soon to be deprecated is favour of <a href="https://github.com/svelterialjs/svelterial">svelterialjs</a>. 
-      My exams are still going on as they were postponed due to the increasing number of CoVID cases in 
-      my country.
+      Svelte Materialify is soon to be deprecated is favour of <a
+        href="https://github.com/svelterialjs/svelterial">svelterialjs</a
+      >. My exams are still going on as they were postponed due to the increasing number
+      of CoVID cases in my country.
     </p>
   </Alert>
-  
+
   <p>
-    I would like to apologize to <a href="https://github.com/hperrin/svelte-material-ui">Svelte Material UI</a> for
-    posting wrong and outdated information in the comparision table. SMUI 4 is an extremely good alternative to svelte materialify
-    while the rewrite <a href="https://github.com/svelterialjs/svelterial">Svelterial</a> is still in development.
-  </p>  
+    I would like to apologize to <a href="https://github.com/hperrin/svelte-material-ui"
+      >Svelte Material UI</a>
+    for posting wrong and outdated information in the comparision table. SMUI 4 is an
+    extremely good alternative to svelte materialify while the rewrite
+    <a href="https://github.com/svelterialjs/svelterial">Svelterial</a> is still in development.
+  </p>
 </Container>
 
 <Footer class="theme--dark">

packages/docs/src/util/stores.js

@@ -7,3 +7,7 @@ export { theme };
 const markdown = writable(false);
 
 export { markdown };
+
+const hashURL = writable(process.browser ? window.location.href : '');
+
+export { hashURL };