Tag Prose, CommentSide fixes and standard component initiation

components/InputField.vue

@@ -16,7 +16,7 @@ watchEffect(() => err.value = props.error);
     <template></template>
     <div class="m-1">
         <label v-if="title" class="pe-4">{{ title }}</label>
-        <input @input="err = false" class="caret-light-50 dark:caret-dark-50 text-light-100 dark:text-dark-100 placeholder:text-light-50 dark:placeholder:text-dark-50 bg-light-20 dark:bg-dark-20 appearance-none outline-none px-3 py-1 focus:shadow-raw transition-[box-shadow] focus:shadow-light-40 dark:focus:shadow-dark-40 border border-light-35 dark:border-dark-35" :class="{ 'input-has-error': !!err }" v-model="model"
+        <Input @input="err = false" :class="{ 'input-has-error': !!err }" v-model="model"
             v-bind="$attrs" />
         <span v-if="err && typeof err === 'string'" class="text-light-red dark:text-dark-red block pb-2">{{ err }}</span>
     </div>

components/MarkdownRenderer.vue

@@ -21,6 +21,7 @@ import ProseOl from '~/components/prose/ProseOl.vue';
 import ProseLi from '~/components/prose/ProseLi.vue';
 import ProseStrong from '~/components/prose/ProseStrong.vue';
 import ProseTable from '~/components/prose/ProseTable.vue';
+import ProseTag from '~/components/prose/ProseTag.vue';
 import ProseThead from '~/components/prose/ProseThead.vue';
 import ProseTbody from '~/components/prose/ProseTbody.vue';
 import ProseTd from '~/components/prose/ProseTd.vue';
@@ -29,31 +30,32 @@ import ProseTr from '~/components/prose/ProseTr.vue';
 import ProseScript from '~/components/prose/ProseScript.vue';
 
 const proseList = {
-    "p": ProseP, 
-    "a": ProseA, 
-    "blockquote": ProseBlockquote, 
-    "code": ProseCode, 
-    "pre": ProsePre, 
-    "em": ProseEm, 
-    "h1": ProseH1, 
-    "h2": ProseH2, 
-    "h3": ProseH3, 
-    "h4": ProseH4, 
-    "h5": ProseH5, 
-    "h6": ProseH6, 
-    "hr": ProseHr, 
-    "img": ProseImg, 
-    "ul": ProseUl, 
-    "ol": ProseOl, 
-    "li": ProseLi, 
-    "strong": ProseStrong, 
-    "table": ProseTable, 
-    "thead": ProseThead, 
-    "tbody": ProseTbody, 
-    "td": ProseTd, 
-    "th": ProseTh, 
-    "tr": ProseTr, 
-    "script": ProseScript  
+    "p": ProseP,
+    "a": ProseA,
+    "blockquote": ProseBlockquote,
+    "code": ProseCode,
+    "pre": ProsePre,
+    "em": ProseEm,
+    "h1": ProseH1,
+    "h2": ProseH2,
+    "h3": ProseH3,
+    "h4": ProseH4,
+    "h5": ProseH5,
+    "h6": ProseH6,
+    "hr": ProseHr,
+    "img": ProseImg,
+    "ul": ProseUl,
+    "ol": ProseOl,
+    "li": ProseLi,
+    "strong": ProseStrong,
+    "table": ProseTable,
+    "tag": ProseTag,
+    "thead": ProseThead,
+    "tbody": ProseTbody,
+    "td": ProseTd,
+    "th": ProseTh,
+    "tr": ProseTr,
+    "script": ProseScript
 };
 
 export default defineComponent({

components/SearchView.vue

@@ -41,7 +41,7 @@ async function debounced()
 
 <template>
     <div class="w-full border border-light-30 dark:border-dark-30">
-        <input class="caret-light-50 dark:caret-dark-50 text-light-100 dark:text-dark-100 placeholder:text-light-50 dark:placeholder:text-dark-50 bg-light-20 dark:bg-dark-20 appearance-none w-full outline-none px-3 py-1 focus:shadow-raw transition-[box-shadow] focus:shadow-light-40 dark:focus:shadow-dark-40" type="text" placeholder="Recherche" v-model="input" @input="search">
+        <Input class="w-full" type="text" placeholder="Recherche" v-model="input" @input="search" />
     </div>
     <Teleport to="#teleports" v-if="input !== '' && !!pos">
         <div class="absolute z-50 border border-light-35 dark:border-dark-35 bg-light-0 dark:bg-dark-0 text-light-100 dark:text-dark-100 divide-y divide-light-35 dark:divide-dark-35 max-h-96 overflow-auto

components/explorer/CommentSide.vue

@@ -1,9 +1,10 @@
 <script setup lang="ts">
-const { data: comments } = await useFetch(`/api/project/1/comment`, {
-    query: {
-        path: unifySlug(useRoute().params.slug)
+const props = defineProps({
+    comments: {
+        type: [Object],
+        required: true,
     }
-});
+})
 </script>
 
 <template>

components/prose/ProseA.vue

@@ -44,23 +44,4 @@ const { data, status } = await useFetch(`/api/project/${project.value}/file`, {
     dedupe: 'defer',
     ignoreResponseError: true,
 });
-</script>
-
-<style>
-.tag
-{
-    @apply bg-accent-blue;
-    @apply bg-opacity-10;
-    @apply hover:bg-opacity-20;
-    @apply text-accent-blue;
-    @apply text-sm;
-    @apply px-1;
-    @apply ms-1;
-    @apply pb-0.5;
-    @apply rounded-full;
-    @apply rounded-se-none;
-    @apply border;
-    @apply border-accent-blue;
-    @apply border-opacity-30;
-}
-</style>
+</script>

components/prose/ProseTag.vue

@@ -0,0 +1,5 @@
+<template>
+    <span class="cursor-default bg-accent-blue bg-opacity-10 hover:bg-opacity-20 text-accent-blue text-sm px-1 ms-1 pb-0.5 rounded-full rounded-se-none border border-accent-blue border-opacity-30">
+        #<slot></slot>
+    </span>
+</template>

components/standard/Input.vue

@@ -0,0 +1,3 @@
+<template>
+    <input class="caret-light-50 dark:caret-dark-50 text-light-100 dark:text-dark-100 placeholder:text-light-50 dark:placeholder:text-dark-50 bg-light-20 dark:bg-dark-20 appearance-none outline-none px-3 py-1 focus:shadow-raw transition-[box-shadow] focus:shadow-light-40 dark:focus:shadow-dark-40 border border-light-35 dark:border-dark-35" v-bind="$attrs"/>
+</template>