feat: create card has quick description of the page

batleforc · Sep 3, 2024 · cfc7a01 · cfc7a01
1 parent 144d6e1
commit cfc7a01
Show file tree

Hide file tree

Showing 18 changed files with 248 additions and 10 deletions.
diff --git a/apps/back/src/api/apidocs.rs b/apps/back/src/api/apidocs.rs
@@ -12,7 +12,7 @@ use super::home::get_home;
 use markdown_struct::{
     blog_timeline::BlogTimeline,
     content_struct::{Page, PageShort},
-    doc_header::{DocHeader, DocHeaderLink, DocHeaderSpec},
+    doc_header::{DocHeader, DocHeaderLink, DocHeaderSpec, DocHeaderWritter},
     doc_sidebar::DocCategory,
 };
 use utoipa::OpenApi;
@@ -38,6 +38,7 @@ use utoipa::OpenApi;
             DocHeader,
             DocHeaderSpec,
             DocHeaderLink,
+            DocHeaderWritter,
             BlogTimeline,
             HomeUrl,
             HomeHistoryUrl,

diff --git a/apps/front/components.d.ts b/apps/front/components.d.ts
@@ -7,8 +7,10 @@ export {}
 /* prettier-ignore */
 declare module 'vue' {
   export interface GlobalComponents {
+    Avatar: typeof import('primevue/avatar')['default']
     Card: typeof import('primevue/card')['default']
     Checkbox: typeof import('primevue/checkbox')['default']
+    Chip: typeof import('primevue/chip')['default']
     Panel: typeof import('primevue/panel')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']

diff --git a/apps/front/src/component/Doc/DocSidebar.vue b/apps/front/src/component/Doc/DocSidebar.vue
@@ -2,11 +2,17 @@
 import { useRoute } from 'vue-router';
 import { useDocStore } from '../../stores/doc';
 import DocSidebarItem from './DocSidebarItem.vue';
+import { ref, watch } from 'vue';
 
 const route = useRoute();
 const docStore = useDocStore();
+let path = ref(Array.isArray(route.params.page) ? route.params.page : [route.params.page]);
 
-let path = Array.isArray(route.params.page) ? route.params.page : [route.params.page];
+watch(() => route.params.page, (newValue, oldValue) => {
+    if (newValue !== oldValue) {
+        path.value = Array.isArray(newValue) ? newValue : [newValue];
+    }
+});
 
 </script>
 

diff --git a/apps/front/src/component/Page/PageMetadata.vue b/apps/front/src/component/Page/PageMetadata.vue
@@ -1,14 +1,61 @@
 <script setup lang="ts">
 import { DocHeader } from '@portfolio/api-client';
-
+import PageTechnoChip from './PageTechnoChip.vue';
 defineProps<{
     metadata: DocHeader;
 }>();
+
 </script>
 
 <template>
     <div class="pageHeader">
-        <h1>{{ metadata.title }}</h1>
-        <p>{{ metadata.date }}</p>
+        <Card>
+            <template #header>
+                <div class="flex justify-between px-4 pt-2">
+                    <a target="_blank" rel="noreferrer" :href="metadata.writter.url" class="flex items-center gap-2">
+                        <Avatar :image="metadata.writter.avatar" size="xlarge" />
+                        <p class="font-bold text-2xl">{{ metadata.writter.name }}</p>
+                    </a>
+                    <div>
+                        <p>{{ metadata.date }}</p>
+                    </div>
+                </div>
+            </template>
+            <template #title>
+                <h1>{{ metadata.title }}</h1>
+            </template>
+            <template #subtitle>
+                <p>{{ metadata.description }}</p>
+            </template>
+            <template #content>
+                <p></p>
+                <Panel v-if="metadata.techno !== undefined && metadata.techno.length > 0" toggleable header="Techno">
+
+                    <div class="pageHeaderTechno">
+                        <PageTechnoChip v-for="techno in metadata.techno" :key="techno" :technoName="techno" />
+                    </div>
+                </Panel>
+                <Panel v-if="metadata.tags !== undefined && metadata.tags.length > 0" toggleable header="Tag">
+                    <div class="pageHeaderTag">
+                        <Chip v-for="tag in metadata.tags" :key="tag" :label="tag" />
+                    </div>
+                </Panel>
+                <Panel v-if="metadata.links !== undefined && metadata.links.length > 0" toggleable header="Link">
+                    <div class="pageHeaderLink">
+                        <a v-for="link in metadata.links" :key="link.url" :href="link.url" target="_blank">
+                            <Chip :label="link.name" />
+                        </a>
+                    </div>
+                </Panel>
+            </template>
+        </Card>
     </div>
-</template>
+</template>
+
+<style lang="scss">
+.pageHeaderTechno,
+.pageHeaderTag,
+.pageHeaderLink {
+    @apply flex flex-wrap gap-2;
+}
+</style>
diff --git a/apps/front/src/component/Page/PageTechnoChip.vue b/apps/front/src/component/Page/PageTechnoChip.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { RouterLink } from 'vue-router';
+import { useDocStore } from '../../stores/doc';
+const props = defineProps<{
+    technoName: string,
+}>();
+
+const docStore = useDocStore();
+
+const techno = docStore.technoExists(props.technoName);
+
+</script>
+
+<template>
+    <div>
+        <RouterLink v-if="techno" :to="{ name: 'doccontent', params: { page: techno.path.split('/') } }">
+            <Chip :label="props.technoName" />
+        </RouterLink>
+        <Chip v-else :label="props.technoName" />
+    </div>
+</template>
diff --git a/apps/front/src/markdown/detectLink.ts b/apps/front/src/markdown/detectLink.ts
@@ -0,0 +1,29 @@
+export type Link = {
+  url: string;
+  text: string;
+};
+
+export const detectLink = (text: string) => {
+  const textUrlArray = [];
+  const urlMdRegex = /\[(\?'text'[^\]]+)\]\((\?'url'[^)]+)\)/g;
+  while (urlMdRegex.exec(text)) {
+    textUrlArray.push({
+      text: RegExp.$1,
+      url: RegExp.$2,
+    });
+  }
+  const urlMdRegex2 = /<(\?'text'[^\]]+)>/g;
+  // eslint-disable-next-line no-constant-condition
+  while (true) {
+    const matched = urlMdRegex2.exec(text);
+    if (!matched) break;
+    textUrlArray.push({
+      text: matched[1],
+      url: matched[1],
+    });
+    const splitText = text.split(`<${matched[1]}>`);
+    textUrlArray.push(splitText[0]);
+
+    text = splitText.slice(1).join('');
+  }
+};
diff --git a/apps/front/src/markdown/detectTextSpec.ts b/apps/front/src/markdown/detectTextSpec.ts
@@ -0,0 +1,31 @@
+export type TextSpec = {
+  start: number;
+  stop: number;
+  isLink: boolean;
+  url?: string;
+  isBold: boolean;
+  isItalic: boolean;
+  isCode: boolean;
+};
+
+export const detectTextSpec = (text: string) => {
+  const textUrlArray = [];
+  const urlMdRegex = /\[(\?'text'[^\]]+)\]\((\?'url'[^)]+)\)/g;
+  while (urlMdRegex.exec(text)) {
+    textUrlArray.push({
+      text: RegExp.$1,
+      url: RegExp.$2,
+    });
+  }
+  const urlMdRegex2 = /<(\?'text'[^\]]+)>/g;
+  // eslint-disable-next-line no-constant-condition
+  while (true) {
+    text.search(urlMdRegex2);
+    const matched = urlMdRegex2.exec(text);
+    if (!matched) break;
+    const splitText = text.split(`<${matched[1]}>`);
+    textUrlArray;
+
+    text = splitText.slice(1).join('');
+  }
+};
diff --git a/apps/front/src/markdown/index.ts b/apps/front/src/markdown/index.ts
@@ -86,6 +86,5 @@ export const transformContent = (content: string): TitleBlock[] => {
         titleBlocks[titleBlocks.length - 1].appendBlock(block);
     }
   });
-  console.log(titleBlocks);
   return titleBlocks;
 };
diff --git a/apps/front/src/stores/doc.ts b/apps/front/src/stores/doc.ts
@@ -1,4 +1,4 @@
-import { DocCategory, getDocSidebar } from '@portfolio/api-client';
+import { DocCategory, getDocSidebar, PageShort } from '@portfolio/api-client';
 import { defineStore } from 'pinia';
 
 export interface DocState {
@@ -57,5 +57,24 @@ export const useDocStore = defineStore({
       }
       return;
     },
+    technoExists(techno: string): PageShort | undefined {
+      if (!this.docContent) return;
+      return this.technoExistsRecursive(techno, this.docContent);
+    },
+    technoExistsRecursive(
+      techno: string,
+      category: DocCategory,
+    ): PageShort | undefined {
+      for (const page of category.pages) {
+        if (page.name.toLowerCase() === techno.toLowerCase()) {
+          return page;
+        }
+      }
+      for (const subCategory of category.sub_categories) {
+        const found = this.technoExistsRecursive(techno, subCategory);
+        if (found) return found;
+      }
+      return;
+    },
   },
 });
diff --git a/apps/front/tsconfig.json b/apps/front/tsconfig.json
@@ -18,6 +18,5 @@
       "path": "./tsconfig.spec.json"
     }
   ],
-  "extends": "../../tsconfig.base.json",
-  "composite": true
+  "extends": "../../tsconfig.base.json"
 }
diff --git a/libs/back/markdown_struct/src/blog_timeline.rs b/libs/back/markdown_struct/src/blog_timeline.rs
@@ -74,6 +74,7 @@ mod tests {
                 .unwrap()
                 .into(),
             description: None,
+            writter: Default::default(),
             weight: 0,
             spec: Default::default(),
             tags: vec![],
@@ -118,6 +119,7 @@ mod tests {
                     .unwrap()
                     .into(),
                 description: None,
+                writter: Default::default(),
                 weight: 0,
                 spec: Default::default(),
                 tags: vec![],
@@ -141,6 +143,7 @@ mod tests {
                     .unwrap()
                     .into(),
                 description: None,
+                writter: Default::default(),
                 weight: 0,
                 spec: Default::default(),
                 tags: vec![],

diff --git a/libs/back/markdown_struct/src/content_struct.rs b/libs/back/markdown_struct/src/content_struct.rs
@@ -78,6 +78,7 @@ mod tests {
                 .unwrap()
                 .into(),
             description: None,
+            writter: Default::default(),
             weight: 0,
             spec: Default::default(),
             tags: vec![],

diff --git a/libs/back/markdown_struct/src/doc_header.rs b/libs/back/markdown_struct/src/doc_header.rs
@@ -30,6 +30,10 @@ fn empty_doc_header_spec() -> DocHeaderSpec {
     }
 }
 
+fn default_doc_header_writter() -> DocHeaderWritter {
+    Default::default()
+}
+
 #[derive(Serialize, Deserialize, Debug, PartialEq, Clone, ToSchema)]
 pub struct DocHeaderSpec {
     #[serde(default = "false_default")]
@@ -56,11 +60,30 @@ pub struct DocHeaderLink {
     pub url: String,
 }
 
+#[derive(Serialize, Deserialize, Debug, PartialEq, Clone, ToSchema)]
+pub struct DocHeaderWritter {
+    pub name: String,
+    pub url: String,
+    pub avatar: String,
+}
+
+impl Default for DocHeaderWritter {
+    fn default() -> Self {
+        DocHeaderWritter {
+            name: "Maxime".to_string(),
+            url: "https://maxleriche.net".to_string(),
+            avatar: "https://avatars.githubusercontent.com/u/24699592?s=80".to_string(),
+        }
+    }
+}
+
 #[derive(Serialize, Deserialize, Debug, PartialEq, Clone, ToSchema)]
 pub struct DocHeader {
     pub title: String,
     pub date: DateTime<Utc>,
     pub description: Option<String>,
+    #[serde(default = "default_doc_header_writter")]
+    pub writter: DocHeaderWritter,
     #[serde(default = "default_weight")]
     pub weight: i32,
     #[serde(default = "empty_doc_header_spec")]
@@ -79,6 +102,11 @@ impl Default for DocHeader {
             title: "".to_string(),
             date: Utc::now(),
             description: None,
+            writter: DocHeaderWritter {
+                name: "".to_string(),
+                url: "".to_string(),
+                avatar: "".to_string(),
+            },
             weight: 0,
             spec: DocHeaderSpec::default(),
             tags: Vec::new(),
@@ -294,9 +322,11 @@ THIS IS A TEST
         let schema_header_spec = DocHeaderSpec::schema();
         let schema_header_link = DocHeaderLink::schema();
         let schema_header = DocHeader::schema();
+        let schema_writter = DocHeaderWritter::schema();
 
         assert_eq!(schema_header_spec.0, "DocHeaderSpec");
         assert_eq!(schema_header_link.0, "DocHeaderLink");
         assert_eq!(schema_header.0, "DocHeader");
+        assert_eq!(schema_writter.0, "DocHeaderWritter");
     }
 }
diff --git a/libs/back/markdown_struct/src/doc_sidebar.rs b/libs/back/markdown_struct/src/doc_sidebar.rs
@@ -85,6 +85,7 @@ mod tests {
                 .unwrap()
                 .into(),
             description: None,
+            writter: Default::default(),
             weight: 0,
             spec: Default::default(),
             tags: vec![],

diff --git a/libs/back/markdown_struct/src/page_database.rs b/libs/back/markdown_struct/src/page_database.rs
@@ -101,6 +101,7 @@ mod tests {
                 .unwrap()
                 .into(),
             description: None,
+            writter: Default::default(),
             weight: 0,
             spec: Default::default(),
             tags: Vec::new(),

diff --git a/libs/front/api-client/src/api/schemas.gen.ts b/libs/front/api-client/src/api/schemas.gen.ts
@@ -77,6 +77,9 @@ export const $DocHeader = {
         weight: {
             type: 'integer',
             format: 'int32'
+        },
+        writter: {
+            '$ref': '#/components/schemas/DocHeaderWritter'
         }
     }
 } as const;
@@ -109,6 +112,22 @@ export const $DocHeaderSpec = {
     }
 } as const;
 
+export const $DocHeaderWritter = {
+    type: 'object',
+    required: ['name', 'url', 'avatar'],
+    properties: {
+        avatar: {
+            type: 'string'
+        },
+        name: {
+            type: 'string'
+        },
+        url: {
+            type: 'string'
+        }
+    }
+} as const;
+
 export const $HomeContent = {
     type: 'object',
     required: ['name', 'presentation', 'coverTitle', 'cvUrl', 'url', 'history'],