feat: init page store

apps/front/src/stores/page.ts

@@ -0,0 +1,41 @@
+import { getPage, Page } from '@portfolio/api-client';
+import { defineStore } from 'pinia';
+
+export interface PageState {
+  pageLoading: boolean;
+  loadingError?: string;
+  page?: Page;
+  pagePath: string;
+}
+
+export const usePageStore = defineStore({
+  id: 'page',
+  state: (): PageState => ({
+    pageLoading: false,
+    pagePath: '',
+  }),
+  actions: {
+    fetchPage(path: string) {
+      if (this.pageLoading) return;
+      this.pageLoading = true;
+      if (this.pagePath === path) {
+        this.pageLoading = false;
+        return;
+      }
+      getPage({ query: { info: { path } } })
+        .then((body) => {
+          if (body.status === 200) {
+            this.page = body.data;
+            this.pagePath = path;
+          }
+        })
+        .catch((err) => {
+          console.error(err);
+          this.loadingError = 'Failed to load page';
+        })
+        .finally(() => {
+          this.pageLoading = false;
+        });
+    },
+  },
+});

apps/front/src/views/DocView.vue

@@ -1,6 +1,12 @@
 <script setup lang="ts">
+import { useRoute } from 'vue-router';
 import { useDocStore } from '../stores/doc';
 
+const route = useRoute();
+
+let path = Array.isArray(route.params.page) ? route.params.page.join("/") : route.params.page;
+
+
 const docStore = useDocStore();
 if (!docStore.inited && !docStore.docLoading) {
     docStore.init();
@@ -9,13 +15,26 @@ if (!docStore.inited && !docStore.docLoading) {
 </script>
 
 <template>
-    <div id="title" class="container" v-if="docStore.inited">
-        <h1>Doc sub page</h1>
-        <p>{{ $route.params.page.join("/") }}</p>
-        <div>
+    <div id="title" class="docContainer" v-if="docStore.inited">
+        <div class="docSidebar">
+            <p>Doc Sidebar</p>
             <p v-for="sidebar in docStore.docContent.sub_categories" :key="sidebar.name">
                 {{ sidebar.name }}
             </p>
         </div>
+        <div class="docContent">
+            <p>{{ path }}</p>
+            <p>Doc content</p>
+        </div>
     </div>
-</template>
+</template>
+
+<style lang="scss">
+.docContainer {
+    @apply flex;
+}
+
+.docContent {
+    @apply grow;
+}
+</style>

apps/front/tsconfig.json

@@ -18,5 +18,6 @@
       "path": "./tsconfig.spec.json"
     }
   ],
-  "extends": "../../tsconfig.base.json"
+  "extends": "../../tsconfig.base.json",
+  "composite": true
 }