Use nuxtjs/mdc to render descriptions

website/app/app.config.ts

@@ -1,5 +1,5 @@
 export default defineAppConfig({
     ui: {
         colors: { primary: 'pink', secondary: 'blue', success: 'green', info: 'cyan', warning: 'yellow', error: 'red', neutral: 'zinc' },
-    },
+    }
 });

website/app/components/LibrarySelect.vue

@@ -44,6 +44,7 @@ const onLibrarySelectChange = async () => {
         method: 'POST',
         path: { MangaId: props.mangaId, LibraryId: library.value },
     });
+    await refreshNuxtData(FetchKeys.Manga.Id(props.mangaId));
     loading.value = false;
 };
 </script>

website/app/components/MangaCard.vue

@@ -23,7 +23,6 @@
             </div>
             <div class="flex flex-col h-(--mangacover-height) shrink mx-2 mt-4">
                 <p class="font-semibold text-xl">{{ manga.name }}</p>
-                <p class="max-h-30 overflow-y-hidden grow">{{ manga.description }}</p>
             </div>
         </div>
         <div class="absolute bottom-0 w-full p-2 flex flex-row justify-end">

website/app/components/MangaDetailPage.vue

@@ -17,9 +17,7 @@
                     </NuxtLink>
                 </div>
                 <USkeleton v-else class="w-full h-lh" />
-                <p v-if="manga" class="max-h-30 overflow-y-hidden grow">
+                <MDC v-if="manga" :value="manga.description" class="min-h-lh grow" />
-                    {{ manga.description }}
-                </p>
                 <USkeleton v-else class="w-full h-30" />
             </div>
         </template>

website/app/pages/manga/[mangaId]/index.vue

@@ -1,7 +1,7 @@
 <template>
     <MangaDetailPage :manga="manga">
         <div class="grid gap-3 max-sm:grid-flow-row-dense min-sm:grid-cols-[70%_30%]">
-            <ChaptersList v-if="manga" :manga-id="manga.key" />
+            <ChaptersList :manga-id="mangaId" />
             <div class="flex flex-col gap-2">
                 <UCard>
                     <template #header>
@@ -65,7 +65,7 @@ const { data: manga } = await useApi('/v2/Manga/{MangaId}', {
     },
     lazy: true
 });
-const libraryId = ref(manga.value?.fileLibraryId);
+const libraryId = computed(() => manga.value?.fileLibraryId);
 
 const { data: metadataFetchers } = await useApi('/v2/MetadataFetcher', { key: FetchKeys.Metadata.Fetchers, lazy: true });
 const { data: metadata } = await useApi('/v2/MetadataFetcher/Links/{MangaId}', { path: { MangaId: mangaId }, key: FetchKeys.Metadata.Manga(mangaId), lazy: true });

website/app/pages/manga/[mangaId]/linkMetadata/[metadataFetcherName].vue

@@ -8,7 +8,7 @@
                 <a :href="data.url ?? undefined">
                     <h2 class="text-xl font-semibold text-primary">{{ data.name }}</h2>
                 </a>
-                <p>{{ data.description }}</p>
+                <MDC :value="data.description ?? undefined" />
                 <UButton class="w-min h-min px-4 place-self-end" @click="link(data.identifier)">Link</UButton>
             </div>
         </UCard>

website/nuxt.config.ts

@@ -4,7 +4,7 @@ export default defineNuxtConfig({
     compatibilityDate: '2025-07-15',
     devtools: { enabled: true },
     css: ['~/assets/css/main.css'],
-    modules: ['@nuxt/content', '@nuxt/eslint', '@nuxt/image', '@nuxt/ui', 'nuxt-open-fetch'],
+    modules: ['@nuxt/content', '@nuxt/eslint', '@nuxt/image', '@nuxt/ui', 'nuxt-open-fetch', '@nuxtjs/mdc'],
     devServer: { host: '127.0.0.1' },
     openFetch: {
         clients: {

website/package-lock.json

@@ -11,6 +11,7 @@
                 "@nuxt/eslint": "^1.9.0",
                 "@nuxt/image": "^1.11.0",
                 "@nuxt/ui": "^4.0.0",
+                "@nuxtjs/mdc": "^0.18.0",
                 "@tailwindcss/vite": "^4.1.14",
                 "better-sqlite3": "^12.4.1",
                 "nuxt": "^4.1.2",
@@ -1971,6 +1972,83 @@
                 }
             }
         },
+        "node_modules/@nuxt/content/node_modules/@nuxtjs/mdc": {
+            "version": "0.17.4",
+            "resolved": "https://registry.npmjs.org/@nuxtjs/mdc/-/mdc-0.17.4.tgz",
+            "integrity": "sha512-I5ZYUWVlE2xZAkfBG6B0/l2uddDZlr8X2WPVMPYNY4zocobBjMgykj4aqYXHY+N35HRYsa+IpuUCf30bR8xCbA==",
+            "license": "MIT",
+            "dependencies": {
+                "@nuxt/kit": "^4.1.1",
+                "@shikijs/core": "^3.12.2",
+                "@shikijs/langs": "^3.12.2",
+                "@shikijs/themes": "^3.12.2",
+                "@shikijs/transformers": "^3.12.2",
+                "@types/hast": "^3.0.4",
+                "@types/mdast": "^4.0.4",
+                "@vue/compiler-core": "^3.5.21",
+                "consola": "^3.4.2",
+                "debug": "^4.4.1",
+                "defu": "^6.1.4",
+                "destr": "^2.0.5",
+                "detab": "^3.0.2",
+                "github-slugger": "^2.0.0",
+                "hast-util-format": "^1.1.0",
+                "hast-util-to-mdast": "^10.1.2",
+                "hast-util-to-string": "^3.0.1",
+                "mdast-util-to-hast": "^13.2.0",
+                "micromark-util-sanitize-uri": "^2.0.1",
+                "parse5": "^8.0.0",
+                "pathe": "^2.0.3",
+                "property-information": "^7.1.0",
+                "rehype-external-links": "^3.0.0",
+                "rehype-minify-whitespace": "^6.0.2",
+                "rehype-raw": "^7.0.0",
+                "rehype-remark": "^10.0.1",
+                "rehype-slug": "^6.0.0",
+                "rehype-sort-attribute-values": "^5.0.1",
+                "rehype-sort-attributes": "^5.0.1",
+                "remark-emoji": "^5.0.2",
+                "remark-gfm": "^4.0.1",
+                "remark-mdc": "v3.6.0",
+                "remark-parse": "^11.0.0",
+                "remark-rehype": "^11.1.2",
+                "remark-stringify": "^11.0.0",
+                "scule": "^1.3.0",
+                "shiki": "^3.12.2",
+                "ufo": "^1.6.1",
+                "unified": "^11.0.5",
+                "unist-builder": "^4.0.0",
+                "unist-util-visit": "^5.0.0",
+                "unwasm": "^0.3.11",
+                "vfile": "^6.0.3"
+            }
+        },
+        "node_modules/@nuxt/content/node_modules/remark-mdc": {
+            "version": "3.6.0",
+            "resolved": "https://registry.npmjs.org/remark-mdc/-/remark-mdc-3.6.0.tgz",
+            "integrity": "sha512-f+zgMYMBChoZJnpWM2AkfMwIC2sS5+vFQQdOVho58tUOh5lDP9SnZj2my8PeXBgt8MFQ+jc97vFFzWH21JXICQ==",
+            "license": "MIT",
+            "dependencies": {
+                "@types/mdast": "^4.0.4",
+                "@types/unist": "^3.0.3",
+                "flat": "^6.0.1",
+                "mdast-util-from-markdown": "^2.0.2",
+                "mdast-util-to-markdown": "^2.1.2",
+                "micromark": "^4.0.2",
+                "micromark-core-commonmark": "^2.0.3",
+                "micromark-factory-space": "^2.0.1",
+                "micromark-factory-whitespace": "^2.0.1",
+                "micromark-util-character": "^2.1.1",
+                "micromark-util-types": "^2.0.2",
+                "parse-entities": "^4.0.2",
+                "scule": "^1.3.0",
+                "stringify-entities": "^4.0.4",
+                "unified": "^11.0.5",
+                "unist-util-visit": "^5.0.0",
+                "unist-util-visit-parents": "^6.0.1",
+                "yaml": "^2.7.1"
+            }
+        },
         "node_modules/@nuxt/devalue": {
             "version": "2.0.2",
             "resolved": "https://registry.npmjs.org/@nuxt/devalue/-/devalue-2.0.2.tgz",
@@ -2746,21 +2824,21 @@
             "license": "MIT"
         },
         "node_modules/@nuxtjs/mdc": {
-            "version": "0.17.4",
+            "version": "0.18.0",
-            "resolved": "https://registry.npmjs.org/@nuxtjs/mdc/-/mdc-0.17.4.tgz",
+            "resolved": "https://registry.npmjs.org/@nuxtjs/mdc/-/mdc-0.18.0.tgz",
-            "integrity": "sha512-I5ZYUWVlE2xZAkfBG6B0/l2uddDZlr8X2WPVMPYNY4zocobBjMgykj4aqYXHY+N35HRYsa+IpuUCf30bR8xCbA==",
+            "integrity": "sha512-/rWEOiLpD6oNx2FC/UsYxLn1pP31pvRmaX5y8GurBOogATKDWd3jlfKCGgshLnsWM6dCKgNkF0mCZQCMZMfpIQ==",
             "license": "MIT",
             "dependencies": {
-                "@nuxt/kit": "^4.1.1",
+                "@nuxt/kit": "^4.1.3",
-                "@shikijs/core": "^3.12.2",
+                "@shikijs/core": "^3.13.0",
-                "@shikijs/langs": "^3.12.2",
+                "@shikijs/langs": "^3.13.0",
-                "@shikijs/themes": "^3.12.2",
+                "@shikijs/themes": "^3.13.0",
-                "@shikijs/transformers": "^3.12.2",
+                "@shikijs/transformers": "^3.13.0",
                 "@types/hast": "^3.0.4",
                 "@types/mdast": "^4.0.4",
-                "@vue/compiler-core": "^3.5.21",
+                "@vue/compiler-core": "^3.5.22",
                 "consola": "^3.4.2",
-                "debug": "^4.4.1",
+                "debug": "^4.4.3",
                 "defu": "^6.1.4",
                 "destr": "^2.0.5",
                 "detab": "^3.0.2",
@@ -2782,12 +2860,12 @@
                 "rehype-sort-attributes": "^5.0.1",
                 "remark-emoji": "^5.0.2",
                 "remark-gfm": "^4.0.1",
-                "remark-mdc": "v3.6.0",
+                "remark-mdc": "npm:remark-mdc-edge@3.6.0-29333381.8558577",
                 "remark-parse": "^11.0.0",
                 "remark-rehype": "^11.1.2",
                 "remark-stringify": "^11.0.0",
                 "scule": "^1.3.0",
-                "shiki": "^3.12.2",
+                "shiki": "^3.13.0",
                 "ufo": "^1.6.1",
                 "unified": "^11.0.5",
                 "unist-builder": "^4.0.0",
@@ -2797,9 +2875,10 @@
             }
         },
         "node_modules/@nuxtjs/mdc/node_modules/remark-mdc": {
-            "version": "3.6.0",
+            "name": "remark-mdc-edge",
-            "resolved": "https://registry.npmjs.org/remark-mdc/-/remark-mdc-3.6.0.tgz",
+            "version": "3.6.0-29333381.8558577",
-            "integrity": "sha512-f+zgMYMBChoZJnpWM2AkfMwIC2sS5+vFQQdOVho58tUOh5lDP9SnZj2my8PeXBgt8MFQ+jc97vFFzWH21JXICQ==",
+            "resolved": "https://registry.npmjs.org/remark-mdc-edge/-/remark-mdc-edge-3.6.0-29333381.8558577.tgz",
+            "integrity": "sha512-kI1hczSecJMgLPzD5YKNpsOsmMBroZNaF8XitfbBxx7dGP9V3O5CBEHxCjgkVBmfOXN50i8db/bLuk8lbLsjmg==",
             "license": "MIT",
             "dependencies": {
                 "@types/mdast": "^4.0.4",
@@ -2819,7 +2898,7 @@
                 "unified": "^11.0.5",
                 "unist-util-visit": "^5.0.0",
                 "unist-util-visit-parents": "^6.0.1",
-                "yaml": "^2.7.1"
+                "yaml": "^2.8.1"
             }
         },
         "node_modules/@opentelemetry/api": {
@@ -14531,32 +14610,6 @@
                 "url": "https://opencollective.com/unified"
             }
         },
-        "node_modules/remark-mdc": {
-            "version": "3.7.0",
-            "resolved": "https://registry.npmjs.org/remark-mdc/-/remark-mdc-3.7.0.tgz",
-            "integrity": "sha512-6XmnEYc4u3lgBf79M6I73nmKhwJCXn5J53BkzIplqjUK/29GubdpYBCF+oH2WQFvNy/70wuf365xwOSUxt397g==",
-            "license": "MIT",
-            "dependencies": {
-                "@types/mdast": "^4.0.4",
-                "@types/unist": "^3.0.3",
-                "flat": "^6.0.1",
-                "mdast-util-from-markdown": "^2.0.2",
-                "mdast-util-to-markdown": "^2.1.2",
-                "micromark": "^4.0.2",
-                "micromark-core-commonmark": "^2.0.3",
-                "micromark-factory-space": "^2.0.1",
-                "micromark-factory-whitespace": "^2.0.1",
-                "micromark-util-character": "^2.1.1",
-                "micromark-util-types": "^2.0.2",
-                "parse-entities": "^4.0.2",
-                "scule": "^1.3.0",
-                "stringify-entities": "^4.0.4",
-                "unified": "^11.0.5",
-                "unist-util-visit": "^5.0.0",
-                "unist-util-visit-parents": "^6.0.1",
-                "yaml": "^2.8.1"
-            }
-        },
         "node_modules/remark-parse": {
             "version": "11.0.0",
             "resolved": "https://registry.npmjs.org/remark-parse/-/remark-parse-11.0.0.tgz",

website/package.json

@@ -17,6 +17,7 @@
         "@nuxt/eslint": "^1.9.0",
         "@nuxt/image": "^1.11.0",
         "@nuxt/ui": "^4.0.0",
+        "@nuxtjs/mdc": "^0.18.0",
         "@tailwindcss/vite": "^4.1.14",
         "better-sqlite3": "^12.4.1",
         "nuxt": "^4.1.2",

website/tsconfig.json

@@ -8,5 +8,5 @@
         { "path": "./.nuxt/tsconfig.node.json" }
     ],
     "compileOnSave": true,
-    "compilerOptions": { "noUncheckedIndexedAccess": true, "module": "ESNext", "moduleResolution": "Bundler" }
+    "compilerOptions": { "noUncheckedIndexedAccess": true, "module": "ESNext", "moduleResolution": "Bundler"}
 }