Users pages CSS + PreviewContent for Canvas + Tags CSS

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>