Documentation UX updates (#139)

* Keeps the active page in view on the navigation

* Installed hotkeys for FF support fixes #107

docs/components/Docs/Navigation.vue

@@ -1,5 +1,5 @@
 <template>
-    <nav>
+    <nav id="docs-navigation">
         <ul role="list">
             <li class="relative my-6">
                 <h2 class="text-xs font-semibold text-white">
@@ -39,12 +39,6 @@
                     'md:mt-0': groupIndex === 0
                 }"
             />
-
-            <li class="sticky bottom-0 z-10 mt-6 min-[416px]:hidden">
-                <AppLink :href="'#'" :variant="'filled'" class="w-full">
-                    Sign in
-                </AppLink>
-            </li>
         </ul>
     </nav>
 </template>
@@ -53,4 +47,13 @@
 const route = useRoute();
 
 const { navigation, toc } = useContent();
+
+onMounted(() => {
+    console.log(route.path);
+    const element = document.querySelector(`[data-attr-link-id="${route.path}"]`);
+    if (element) {
+        // Can we scroll to this element without using smooth?
+        element.scrollIntoView();
+    }
+})
 </script>

docs/components/Docs/NavigationGroup.vue

@@ -15,6 +15,7 @@
                     }">
                         <NuxtLink 
                             :to="link._path"
+                            :data-attr-link-id="link._path"
                             class="flex justify-between gap-2 py-1 pr-3 text-sm transition"
                             :class="{
                                 'text-white': link._path === route.path,
@@ -55,4 +56,5 @@ const route = useRoute();
 const scrollTo = (id) => {
     document.getElementById( id.replace('#', '') ).scrollIntoView(true, {behavior: "smooth"})
 }
-</script>
+
+</script>

docs/components/content/Search.vue

@@ -106,17 +106,19 @@ import DocsIcon from './DocsIcon.vue';
 import HeartIcon from './HeartIcon.vue';
 import GitHubIcon from './GitHubIcon.vue';
 
+import hotkeys from 'hotkeys-js';
+
 /**
  * CMD + K shortcut for activating the modal
  */
 const show = ref(false);
-const { meta, k } = useMagicKeys();
 
-watchEffect(() => {
-    if (meta.value && k.value) {
+if( import.meta.client ){   
+    hotkeys('ctrl+k,command+k', (event, handler) => {
         show.value = true;
-    }
-});
+        event.preventDefault();
+    });
+}
 
 /**
  * Event handler for opening the modal

docs/package.json

@@ -24,6 +24,7 @@
     "surge": "^0.23.1"
   },
   "dependencies": {
-    "@heroicons/vue": "^2.1.1"
+    "@heroicons/vue": "^2.1.1",
+    "hotkeys-js": "^3.13.7"
   }
 }

docs/yarn.lock

@@ -4284,6 +4284,11 @@ hosted-git-info@^7.0.0:
   dependencies:
     lru-cache "^10.0.1"
 
+hotkeys-js@^3.13.7:
+  version "3.13.7"
+  resolved "https://registry.yarnpkg.com/hotkeys-js/-/hotkeys-js-3.13.7.tgz#0188d8e2fca16a3f1d66541b48de0bb9df613726"
+  integrity sha512-ygFIdTqqwG4fFP7kkiYlvayZppeIQX2aPpirsngkv1xM1lP0piDY5QEh68nQnIKvz64hfocxhBaD/uK3sSK1yQ==
+
 html-tags@^3.3.1:
   version "3.3.1"
   resolved "https://registry.yarnpkg.com/html-tags/-/html-tags-3.3.1.tgz#a04026a18c882e4bba8a01a3d39cfe465d40b5ce"