feat: Working liste of item

batleforc · Jan 21, 2025 · d9ad779 · d9ad779
1 parent 7685bb6
commit d9ad779
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 12 deletions.
diff --git a/apps/front/src/component/Doc/DocSidebarItem.vue b/apps/front/src/component/Doc/DocSidebarItem.vue
@@ -90,7 +90,7 @@ const sidebarOpen = ref(fromOpen.value);
 }
 
 .docSidebarContent {
-  @apply overflow-hidden opacity-0 h-0 pl-2;
+  @apply overflow-hidden opacity-0 h-0 ml-2;
   display: none;
   animation: dropdown 200ms linear forwards;
 

diff --git a/apps/front/src/component/Page/PageContent.vue b/apps/front/src/component/Page/PageContent.vue
@@ -16,13 +16,29 @@ defineProps<{
     <div v-for="line in content.subBlocks" :key="line.value">
       <PageString v-if="line.type === BlockType.string" :content="line" />
       <VueMermaidString class="py-2 pageCodeMermaid"
-        v-else-if="line.type === BlockType.startEndCodeBlock && line.additionalValue === 'mermaid'"
+        v-else-if="line.type === BlockType.startEndCodeBlock && line.additionalValue.code === 'mermaid'"
         :value="line.value" />
-      <highlightjs class="py-2" v-else-if="line.type === BlockType.startEndCodeBlock" autodetect :code="line.value" />
+      <highlightjs class="py-2 rounded pageHljs" v-else-if="line.type === BlockType.startEndCodeBlock" autodetect
+        :code="line.value" />
       <div class="flex space-x-2" v-else-if="line.type === BlockType.checkbox">
-        <Checkbox binary trueValue="checked" falseValue="unchecked" :modelValue="line.additionalValue"
-          :disabled="true" />
-        <p>{{ line.value }} - {{ line.additionalValue }}</p>
+        <p v-for="indent in Number(line.additionalValue.indent)" :key="indent" class="pageContentIndent">
+        </p>
+        <ul class="list-disc">
+          <li>
+            <div class="flex space-x-2">
+              <Checkbox binary trueValue="checked" falseValue="unchecked" :modelValue="line.additionalValue.checked"
+                :disabled="true" />
+              <p>{{ line.value }} </p>
+            </div>
+          </li>
+        </ul>
+
+      </div>
+      <div class="flex space-x-2" v-else-if="line.type === BlockType.list">
+        <p v-for="indent in line.additionalValue.indent" :key="indent" class="pageContentIndent"></p>
+        <ul class="list-disc">
+          <li>{{ line.value }}</li>
+        </ul>
       </div>
     </div>
     <div class="pageSubBlock">
@@ -31,4 +47,12 @@ defineProps<{
   </div>
 </template>
 
-<style lang="scss"></style>
+<style lang="scss">
+.pageHljs code {
+  @apply rounded-xl;
+}
+
+.pageContentIndent {
+  @apply w-1;
+}
+</style>
diff --git a/apps/front/src/markdown/index.ts b/apps/front/src/markdown/index.ts
@@ -3,12 +3,19 @@ export enum BlockType {
   title = 'title',
   startEndCodeBlock = 'startEndCodeBlock',
   checkbox = 'checkbox',
+  list = 'list',
+}
+
+export interface additionalValue {
+  code?: string;
+  checked?: string;
+  indent?: number;
 }
 
 export type Block = {
   type: BlockType;
   value: string;
-  additionalValue?: string;
+  additionalValue?: additionalValue;
 };
 
 export class TitleBlock {
@@ -66,18 +73,30 @@ export const transformContent = (content: string): TitleBlock[] => {
       if (line.startsWith('```')) {
         if (codeBlock.length > 0) {
           block.type = BlockType.startEndCodeBlock;
-          block.additionalValue = codeBlock[0].replace('```', '');
+          block.additionalValue = {};
+          block.additionalValue.code = codeBlock[0].replace('```', '');
           codeBlock.shift();
           block.value = codeBlock.join('\n');
           codeBlock = [];
         } else codeBlock.push(line);
       } else if (codeBlock.length > 0) {
         codeBlock.push(line);
-      } else if (line.startsWith('- [ ]') || line.startsWith('- [x]')) {
+      } else if (
+        new RegExp('\\s{0,}-\\s\\[[x,X,\\s]\\]\\s[A-z]{0,}').test(line) ||
+        line.startsWith('- [ ]') ||
+        line.startsWith('- [x]')
+      ) {
         block.type = BlockType.checkbox;
-        if (line.startsWith('- [x]')) block.additionalValue = 'checked';
-        else block.additionalValue = 'unchecked';
+        block.additionalValue = {};
+        block.additionalValue.indent = line.split('- ')[0].length + 1;
+        if (line.startsWith('- [x]')) block.additionalValue.checked = 'checked';
+        else block.additionalValue.checked = 'unchecked';
         block.value = line.replace('- [ ]', '').replace('- [x]', '').trim();
+      } else if (new RegExp('\\s{0,}-\\s[A-z]{0,}').test(line)) {
+        block.type = BlockType.list;
+        block.value = line.replace('- ', '').trim();
+        block.additionalValue = {};
+        block.additionalValue.indent = line.split('- ')[0].length + 1;
       }
       if (titleBlocks.length === 0) {
         titleBlocks.push(new TitleBlock(''));