feat: Documentation page improvements (#50)

frontend/components/doc/TableOfContents.vue

@@ -5,6 +5,7 @@ const props = defineProps<{
     text: string;
     children: { id: string; text: string }[];
   }> | null;
+  currentlyActiveId: string | null;
 }>()
 
 defineEmits<{(e: 'scrollToId', id: string): void }>()
@@ -20,15 +21,25 @@ defineEmits<{(e: 'scrollToId', id: string): void }>()
         class="text-sm list-none"
       >
         <template v-if="text !== 'Table of contents'">
-          <a :href="`#${id}`" class="!text-neutral-800" @click="$emit('scrollToId', id)">{{ text }}</a>
+          <a
+            :href="`#${id}`"
+            class="!text-neutral-800"
+            :class="{'font-semibold': currentlyActiveId === id }"
+            @click="$emit('scrollToId', id)"
+          >{{ text }}</a>
           <ul v-if="children" class="!p-0 ml-4 mt-1 mb-2 flex flex-col gap-2">
             <li
               v-for="{ id: childId, text: childText } in children"
               :id="`toc-${childId}`"
               :key="childId"
               class="text-xs list-none ml-0 hover:underline"
             >
-              <a :href="`#${childId}`" class="!text-neutral-700" @click="$emit('scrollToId', childId)">{{ childText }}</a>
+              <a
+                :href="`#${childId}`"
+                class="!text-neutral-700"
+                :class="{'font-semibold': currentlyActiveId === childId }"
+                @click="$emit('scrollToId', childId)"
+              >{{ childText }}</a>
             </li>
           </ul>
         </template>

frontend/package.json

@@ -36,10 +36,11 @@
     "vue-tsc": "^1.0.24"
   },
   "dependencies": {
-    "github-markdown-css": "^5.2.0",
     "@vueuse/core": "^9.13.0",
     "date-fns": "^2.29.3",
+    "github-markdown-css": "^5.2.0",
     "jwt-decode": "^3.1.2",
-    "nuxt-graphql-client": "^0.2.27"
+    "nuxt-graphql-client": "^0.2.27",
+    "scroll-into-view-if-needed": "^3.0.10"
   }
 }

frontend/pages/documentation.vue

@@ -1,24 +1,65 @@
 <script setup lang="ts">
-const { data: blogPost } = await useAsyncData('blogToc', () =>
+import scrollIntoView from 'scroll-into-view-if-needed'
+
+const { data: documentation } = await useAsyncData('blogToc', () =>
   queryContent('/documentation').findOne()
 )
 
-const tocLinks = computed(() => blogPost.value?.body.toc.links ?? [])
+const currentlyActiveId = ref(null as string | null)
+const content = ref<HTMLDivElement>()
+const tocLinks = computed(() => documentation.value?.body.toc.links ?? [])
+
+const scrollToId = function (id: string) {
+  const navigationElement = document.querySelector(`nav [href="#${id}"]`)
+  if (navigationElement) {
+    scrollIntoView(navigationElement, {
+      scrollMode: 'if-needed',
+      behavior: 'smooth',
+      block: 'center',
+      inline: 'start'
+    })
+  }
+}
+
+const trackCurrentlyActiveId = function () {
+  const observer = new IntersectionObserver((entries) => {
+    entries.forEach((entry) => {
+      if (entry.isIntersecting) {
+        const id = entry.target.getAttribute('id')
+        if (id) {
+          currentlyActiveId.value = id
+          scrollToId(id)
+        }
+      }
+    })
+  }, {
+    root: document,
+    rootMargin: '0px 0px -90%',
+    threshold: 0
+  })
+  document
+    .querySelectorAll('.markdown-body h2[id], .markdown-body h3[id]')
+    .forEach((section) => {
+      observer.observe(section)
+    })
+}
 
+onMounted(trackCurrentlyActiveId)
+
+useHead({
+  title: 'Makerdao Document Model Documentation'
+})
 </script>
+
 <template>
-  <div class="w-full max-w-screen-2xl m-auto">
-    <ContentDoc path="/documentation" class="w-full">
-      <template #default="{doc}">
-        <div class="flex flex-row w-full px-4">
-          <div class="flex-shrink-0 w-56 py-3 hidden md:block h-screen overflow-x-scroll sticky top-14">
-            <DocTableOfContents :toc-links="tocLinks" class="pb-14" />
-          </div>
-          <div class="flex-grow w-[calc(100%-28rem)] p-4 pt-2 mt-4 bg-white w-full">
-            <ContentRenderer :value="doc" class="markdown-body w-full" />
-          </div>
-        </div>
-      </template>
-    </ContentDoc>
+  <div ref="content" class="w-full max-w-screen-2xl m-auto">
+    <div class="flex flex-row w-full px-4">
+      <div class="flex-shrink-0 w-56 py-3 hidden md:block h-screen overflow-x-scroll sticky top-14">
+        <DocTableOfContents :toc-links="tocLinks" :currently-active-id="currentlyActiveId" class="pb-14" />
+      </div>
+      <div class="flex-grow !w-[calc(100%-18rem)] p-4 pt-2 mt-4 bg-white w-full">
+        <ContentRendererMarkdown v-if="documentation" :value="documentation" class="markdown-body w-full" />
+      </div>
+    </div>
   </div>
 </template>

frontend/pages/user/index.vue

@@ -12,7 +12,7 @@
           </div>
           <div class="w-full bg-white p-5 pt-4">
             <div class="mb-2 font-semibold">
-              Existing tokens3
+              Existing tokens
             </div>
             <AuthSessionTable
               :sessions="sessions"