Documentation integration

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

@@ -17,4 +17,8 @@ const { isAuthorized, user } = useAuth()
 html, body {
   @apply bg-neutral-50;
 }
+
+.Body {
+    @apply h-[calc(100vh-88px)];
+}
 </style>

frontend/components/doc/TableOfContents.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+const props = defineProps<{
+  tocLinks: Array<{
+    id: string;
+    text: string;
+    children: { id: string; text: string }[];
+  }> | null;
+}>();
+
+const emit = defineEmits<{ (e: "click", id: string): void }>();
+
+const onClick = (id: string) => {
+  emit("click", id);
+};
+</script>
+
+<template>
+  <nav>
+    <ul class="ml-0 pl-4">
+      <li
+        v-for="{ id, text, children } in props.tocLinks"
+        :id="`toc-${id}`"
+        :key="id"
+        class="cursor-pointer text-sm list-none ml-0 mb-2 last:mb-0 hover:bg-gray-100"
+        @click="onClick(id)"
+      >
+        {{ text }}
+        <ul v-if="children" class="ml-3 my-2">
+          <li
+            v-for="{ id: childId, text: childText } in children"
+            :id="`toc-${childId}`"
+            :key="childId"
+            class="cursor-pointer text-xs list-none ml-0 pt-2 last:mb-0 hover:underline"
+            @click.stop="onClick(childId)"
+          >
+            {{ childText }}
+          </li>
+        </ul>
+      </li>
+    </ul>
+  </nav>
+</template>

frontend/components/layout/TheMenu.vue

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