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">
-                    {{ manga.description }}
-                </p>
+                <MDC v-if="manga" :value="manga.description" class="min-h-lh grow" />
                 <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>