feat: Documentation integration (#42)

Co-authored-by: Valia Fetisov <[email protected]>

frontend/README.md

@@ -21,3 +21,12 @@ You can build application for production using `npm run build` and then locally
 ## Health endpoint
 
 Endpoint available at `/healthz` path. Provides response if frontend is currently running.
+
+## Documentation page
+
+One of the frontend's features is displaying the documentation about document model.
+The documentation is provided to the service externally as raw typedoc output in markdown format.
+
+To display the documentation on the frontend the provided data has to be processed and represented in the form of a single file.
+
+TODO: add the precise process in separate issue

frontend/app.vue

@@ -1,8 +1,8 @@
 <template>
   <NMessageProvider>
-    <div class="h-screen flex flex-col">
+    <div class="h-screen flex flex-col w-full">
       <LayoutTheHeader :user="user" :is-authorized="isAuthorized" class="flex-shrink-0 h-14 fixed top-0 z-10" />
-      <div class="flex-grow mt-14">
+      <div class="flex-grow mt-14 w-full">
         <NuxtPage :user="user" />
       </div>
     </div>

frontend/components/doc/TableOfContents.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+const props = defineProps<{
+  tocLinks: Array<{
+    id: string;
+    text: string;
+    children: { id: string; text: string }[];
+  }> | null;
+}>()
+
+defineEmits<{(e: 'scrollToId', id: string): void }>()
+</script>
+
+<template>
+  <nav>
+    <ul class="!p-0">
+      <li
+        v-for="{ id, text, children } in props.tocLinks"
+        :id="`toc-${id}`"
+        :key="id"
+        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>
+          <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>
+            </li>
+          </ul>
+        </template>
+      </li>
+    </ul>
+  </nav>
+</template>

frontend/components/layout/TheMenu.vue

@@ -17,7 +17,7 @@ import {
 
 const links = [
   {
-    id: '/',
+    id: '/documentation',
     icon: DocumentText24Regular,
     label: 'Documentation'
   },