fix(ui): article markdown correct render

Author: SergioRibera

bun.lockb

@@ -21,6 +21,7 @@
   "devDependencies": {
     "@nuxtjs/seo": "^2.0.0-rc.10",
     "@nuxtjs/tailwindcss": "^6.12.0",
+    "@tailwindcss/typography": "^0.5.13",
     "@unocss/nuxt": "^0.60.0"
   },
   "trustedDependencies": [

package.json

@@ -4,28 +4,29 @@
   <Roadmap />
   <div v-if="content" :class="['fixed top-0 h-screen', sidebarClass]">
     <div
-        class="top-0 flex h-full w-full flex-col items-center bg-white p-4 focus:outline-0 sm:p-6"
+        class="top-0 flex overflow-y-auto overflow-x-none h-full w-full flex-col items-center bg-white p-4 focus:outline-0 sm:p-6"
     >
-      <div class="w-full flex flex-row justify-between px-4 pb-2">
+      <div class="w-full flex flex-row justify-between text-black px-4 pb-2">
         <span>[TODO] Status</span>
         <span class="hover:cursor-pointer" @click="closeSidebar">X</span>
       </div>
       <ContentRenderer :key="content._id" :value="content">
-        <ContentRendererMarkdown class="flex flex-col gap-3 text-black overscroll-x-none overflow-y-auto w-full m:max-w-[800px] sm:max-w-[600px]" :value="content" />
+        <ContentRendererMarkdown class="prose flex flex-col w-full m:max-w-[800px] sm:max-w-[600px]" tag="article" :value="content" />
         <div class="flex flex-col items-start w-full m:max-w-[800px] sm:max-w-[600px]">
           <h4 id="related-content" class="text-black mb-3">
             <a href="#related-content">Contenido Extra Relacionado</a>
           </h4>
-          <Card
-            moreTransparency
+          <a
             class="gap-x-2 mb-1"
             v-for="(link, i) in content.data.externalLinks"
             :key="i"
             :href="link.link"
-          >
-            <strong v-if="link.english">[Contenido en Ingles]</strong>
-            {{link.name}}
-          </Card>
+            >
+              <Card moreTransparency >
+                <strong v-if="link.english">[Contenido en Ingles]</strong>
+                {{link.name}}
+              </Card>
+          </a>
         </div>
       </ContentRenderer>
     </div>

pages/[...slug].vue

@@ -1,5 +1,8 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
+  plugins: [
+    require('@tailwindcss/typography'),
+  ],
   theme: {
     fontFamily: {
       "alfa-slab": ["Alfa Slab One", "sans-serif"],