Add ProseSmall as a private commentary (using %%)

components/MarkdownRenderer.vue

@@ -20,6 +20,7 @@ import ProseImg from '~/components/prose/ProseImg.vue';
 import ProseUl from '~/components/prose/ProseUl.vue';
 import ProseOl from '~/components/prose/ProseOl.vue';
 import ProseLi from '~/components/prose/ProseLi.vue';
+import ProseSmall from './prose/ProseSmall.vue';
 import ProseStrong from '~/components/prose/ProseStrong.vue';
 import ProseTable from '~/components/prose/ProseTable.vue';
 import ProseTag from '~/components/prose/ProseTag.vue';
@@ -49,6 +50,7 @@ const proseList = {
     "ul": ProseUl,
     "ol": ProseOl,
     "li": ProseLi,
+    "small": ProseSmall,
     "strong": ProseStrong,
     "table": ProseTable,
     "tag": ProseTag,

components/prose/ProseP.vue

@@ -1,12 +1,3 @@
 <template>
   <p><slot /></p>
-</template>
-
-<style>
-.text-comment
-{
-  @apply text-light-50;
-  @apply dark:text-dark-50;
-  @apply text-sm;
-}
-</style>
+</template>

components/prose/ProseSmall.vue

@@ -0,0 +1,5 @@
+<template>
+    <small class="text-light-60 dark:text-dark-60 text-sm italic">
+        <slot />
+    </small>
+</template>