feat: Make DocView reactive on page change load the new page

apps/front/src/component/Page/PageRender.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { Page } from '@portfolio/api-client';
+
+const props = defineProps<{
+    page: Page;
+}>();
+</script>
+
+<template>
+    <div>
+        <h1>{{ page.name }}</h1>
+        <p>{{ page.content }}</p>
+    </div>
+</template>

apps/front/src/styles/DocView.scss

@@ -1,8 +1,21 @@
+@import "../var.scss";
+
 .docContainer {
     @apply flex grow h-full absolute top-0 w-full pt-16;
     flex: 1 0 auto;
 }
 
 .docContent {
-    @apply grow overflow-y-scroll p-2 h-full;
+    @apply grow overflow-y-scroll h-full;
+}
+
+.docFooter {
+    @apply flex justify-center items-center h-16 w-full hidden;
+    background-color: $color-bgCover;
+    color: $color-textCover;
+}
+
+.docRealContent{
+    @apply p-2 ;
+
 }

apps/front/src/views/DocHomeView.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import DocSidebar from '../component/Doc/DocSidebar.vue';
+import PageRender from '../component/Page/PageRender.vue';
 import { useDocStore } from '../stores/doc';
 import { usePageStore } from '../stores/page';
 
@@ -21,16 +22,14 @@ if (docStore.inited && docStore.docContent.has_index && pageStore.pageLoading ==
     <div id="title" class="docContainer" v-if="docStore.inited">
         <DocSidebar />
         <div class="docContent">
-            <div v-if="docStore.docContent.has_index && pageStore.page !== undefined">
-                <h1>Doc home page</h1>
-                <p>{{ pageStore.page.metadata }}</p>
-                <div v-html="pageStore.page.content"></div>
+            <div class="docRealContent" v-if="docStore.docContent.has_index && pageStore.page !== undefined">
+                <PageRender :page="pageStore.page" />
             </div>
             <div v-if="!docStore.docContent.has_index">
                 <h1>Doc home page</h1>
                 <p>There is no index page for this documentation</p>
             </div>
-            <footer>
+            <footer class="docFooter">
                 <p>Made with love and too much coffee @Batleforc - {{ new Date().getFullYear() }}</p>
             </footer>
         </div>

apps/front/src/views/DocView.vue

@@ -2,30 +2,45 @@
 import { useRoute } from 'vue-router';
 import { useDocStore } from '../stores/doc';
 import DocSidebar from '../component/Doc/DocSidebar.vue';
-import { computed } from 'vue';
+import { computed, watch } from 'vue';
+import { usePageStore } from '../stores/page';
+import PageRender from '../component/Page/PageRender.vue';
 
 const route = useRoute();
 
 let pathReactive = computed(() => {
-    return Array.isArray(route.params.page) ? route.params.page : [route.params.page];
+    return (Array.isArray(route.params.page) ? route.params.page : [route.params.page]).join('/');
 });
 
 
 const docStore = useDocStore();
+const pageStore = usePageStore();
 if (!docStore.inited && !docStore.docLoading) {
-    docStore.init();
+    docStore.init()
+}
+if (pageStore.pageLoading === false && pageStore.pagePath !== pathReactive.value) {
+    pageStore.fetchPage(pathReactive.value);
 }
 
+watch(pathReactive, (newVal) => {
+    if (pageStore.pageLoading === false && pageStore.pagePath !== newVal) {
+        pageStore.fetchPage(newVal);
+    }
+});
 </script>
 
 <template>
     <div id="title" class="docContainer" v-if="docStore.inited">
         <DocSidebar />
         <div class="docContent">
-            <p>{{ pathReactive }}</p>
-            <p>Doc content</p>
-            <p v-for="truc in [...Array(100).keys()]" :key="truc">{{ truc }}</p>
-            <footer>
+            <div class="docRealContent" v-if="pageStore.page !== undefined">
+                <PageRender :page="pageStore.page" />
+            </div>
+            <div v-if="!pageStore.pageLoading && pageStore.page === undefined">
+                <h1>Doc home page</h1>
+                <p>There is no index page for this documentation</p>
+            </div>
+            <footer class="docFooter">
                 <p>Made with love and too much coffee @Batleforc - {{ new Date().getFullYear() }}</p>
             </footer>
         </div>