feat: include mermaidjs

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

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { BlockType, TitleBlock } from '../../markdown';
 import PageTitle from './PageTitle.vue';
-
+import VueMermaidString from 'vue-mermaid-string';
 
 
 defineProps<{
@@ -14,6 +14,9 @@ defineProps<{
         <PageTitle :value="content.value" :level="content.level" />
         <div v-for="line in content.subBlocks" :key="line.value">
             <p class="whitespace-pre" v-if="line.type === BlockType.string">{{ line.value }}</p>
+            <VueMermaidString class="py-2 pageCodeMermaid"
+                v-else-if="line.type === BlockType.startEndCodeBlock && line.additionalValue === 'mermaid'"
+                :value="line.value" />
             <highlightjs class="py-2" v-else-if="line.type === BlockType.startEndCodeBlock" autodetect
                 :code="line.value" />
             <div class="flex space-x-2" v-else-if="line.type === BlockType.checkbox">

apps/front/src/stores/doc.ts

@@ -34,5 +34,28 @@ export const useDocStore = defineStore({
           this.inited = true;
         });
     },
+    searchCategory(path: string): DocCategory | undefined {
+      if (!this.docContent) return;
+      return this.searchCategoryRecursive(`content/${path}`, this.docContent);
+    },
+    searchCategoryRecursive(
+      path: string,
+      category: DocCategory,
+    ): DocCategory | undefined {
+      const path_split = path.split('/');
+      if (path_split.length === 1 && category.name === path_split[0]) {
+        return category;
+      }
+      for (const subCategory of category.sub_categories) {
+        if (subCategory.name === path_split[1]) {
+          const found = this.searchCategoryRecursive(
+            path_split.slice(1).join('/'),
+            subCategory,
+          );
+          if (found) return found;
+        }
+      }
+      return;
+    },
   },
 });

apps/front/src/stores/page.ts

@@ -1,5 +1,6 @@
 import { getPage, Page } from '@portfolio/api-client';
 import { defineStore } from 'pinia';
+import { useDocStore } from './doc';
 
 export interface PageState {
   pageLoading: boolean;
@@ -17,11 +18,20 @@ export const usePageStore = defineStore({
   actions: {
     fetchPage(path: string) {
       if (this.pageLoading) return new Promise<void>((resolve) => resolve());
-      this.pageLoading = true;
+
       if (this.pagePath === path) {
         this.pageLoading = false;
         return new Promise<void>((resolve) => resolve());
       }
+      const doc = useDocStore();
+      if (!doc.inited) {
+        return doc.init().then(() => this.fetchPage(path));
+      }
+      this.pageLoading = true;
+      const category = doc.searchCategory(path);
+      if (category && category.has_index) {
+        path = `${path}/index`;
+      }
       return getPage({ query: { path } })
         .then((body) => {
           if (body.status === 200) {

apps/front/src/views/DocView.vue

@@ -16,9 +16,11 @@ let pathReactive = computed(() => {
 const docStore = useDocStore();
 const pageStore = usePageStore();
 if (!docStore.inited && !docStore.docLoading) {
-    docStore.init()
+    docStore.init().then(() => {
+        pageStore.fetchPage(pathReactive.value);
+    });
 }
-if (pageStore.pageLoading === false && pageStore.pagePath !== pathReactive.value) {
+else if (pageStore.pageLoading === false && pageStore.pagePath !== pathReactive.value) {
     pageStore.fetchPage(pathReactive.value);
 }
 

package.json

@@ -20,6 +20,7 @@
     "primevue": "^4.0.4",
     "tslib": "^2.3.0",
     "vue": "^3.3.4",
+    "vue-mermaid-string": "^6.0.0",
     "vue-router": "^4.4.3"
   },
   "devDependencies": {