Users pages CSS + PreviewContent for Canvas + Tags CSS

components/EditableMarkdown.vue

@@ -9,7 +9,7 @@
 </style>
 
 <template>
-  <div class="editor" contenteditable>
+  <div class="editor">
     <template
       v-if="model && model.length > 0">
       <MarkdownRenderer

components/Input.vue

@@ -13,10 +13,11 @@ watchEffect(() => err.value = props.error);
 </script>
 
 <template>
-    <div class="input-group">
-        <label v-if="title" class="input-label">{{ title }}</label>
-        <input @input="err = false" class="input-input" :class="{ 'input-has-error': !!err }" v-model="model"
+    <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"
             v-bind="$attrs" />
-        <span v-if="err && typeof err === 'string'" class="input-error">{{ err }}</span>
+        <span v-if="err && typeof err === 'string'" class="text-light-red dark:text-dark-red block pb-2">{{ err }}</span>
     </div>
 </template>

components/explorer/PreviewContent.vue

@@ -1,6 +1,6 @@
 <template>
     <Teleport to="#teleports" v-if="display && (!fetched || loaded)">
-        <div class="absolute border-2 border-light-35 dark:border-dark-35 max-w-[550px] max-h-[450px] overflow-auto bg-light-0 dark:bg-dark-0 text-light-100 dark:text-dark-100" :class="{'is-loaded': fetched}" :style="pos"
+        <div class="absolute border-2 border-light-35 dark:border-dark-35 max-w-[550px] max-h-[450px] bg-light-0 dark:bg-dark-0 text-light-100 dark:text-dark-100" :class="[{'is-loaded': fetched}, type === 'Markdown' ? 'overflow-auto' : 'overflow-hidden']" :style="pos"
             @mouseenter="debounce(show, 250)" @mouseleave="debounce(() => display = false, 250)">
             <div v-if="pending" class="loading"></div>
             <template v-else-if="content !==''">
@@ -8,7 +8,7 @@
                     <ProseH1>{{ title }}</ProseH1>
                     <Markdown v-model="content"></Markdown>
                 </div>
-                <div v-else-if="type === 'Canvas'" class="">
+                <div v-else-if="type === 'Canvas'" class="w-[550px] h-[450px] overflow-hidden">
                     <CanvasRenderer :canvas="JSON.parse(content) " />
                 </div>
                 <div class="h-100 w-100 flex flex-1 flex-col justify-center items-center" v-else>

components/prose/ProseA.vue

@@ -43,4 +43,23 @@ const { data, status } = await useFetch(`/api/project/${project.value}/file`, {
     key: `file:${project.value}:%${pathname}`,
     dedupe: 'defer'
 });
-</script>
+</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 py-1;
+    @apply rounded-full;
+    @apply rounded-se-none;
+    @apply border;
+    @apply border-accent-blue;
+    @apply border-opacity-30;
+}
+</style>

components/prose/ProseH1.vue

@@ -1,11 +1,9 @@
 <template>
-  <h1 :id="id" class="text-3xl font-semibold my-3 first:pt-0 pt-2">
+  <h1 :id="parseId(id)" class="text-3xl font-semibold my-3 first:pt-0 pt-2">
     <slot />
   </h1>
 </template>
 
 <script setup lang="ts">
 const props = defineProps<{ id?: string }>()
-
-const generate = computed(() => props.id)
 </script>

components/prose/ProseH2.vue

@@ -1,5 +1,5 @@
 <template>
-  <h2 :id="id" class="text-2xl font-semibold my-3 ms-1 first:pt-0 pt-2">
+  <h2 :id="parseId(id)" class="text-2xl font-semibold my-3 ms-1 first:pt-0 pt-2">
     <slot />
   </h2>
 </template>

components/prose/ProseH3.vue

@@ -1,5 +1,5 @@
 <template>
-  <h3 :id="id" class="text-xl font-semibold my-2 ms-4">
+  <h3 :id="parseId(id)" class="text-xl font-semibold my-2 ms-4">
     <slot />
   </h3>
 </template>

components/prose/ProseH4.vue

@@ -1,5 +1,5 @@
 <template>
-  <h4 :id="id" class="text-lg font-semibold my-2 ms-4">
+  <h4 :id="parseId(id)" class="text-lg font-semibold my-2 ms-4">
     <slot />
   </h4>
 </template>

components/prose/ProseH5.vue

@@ -1,5 +1,5 @@
 <template>
-  <h5 :id="id" class="text-base font-semibold my-1 ms-4">
+  <h5 :id="parseId(id)" class="text-base font-semibold my-1 ms-4">
     <slot />
   </h5>
 </template>

components/prose/ProseH6.vue

@@ -1,5 +1,5 @@
 <template>
-  <h6 :id="id">
+  <h6 :id="parseId(id)">
     <slot />
   </h6>
 </template>