glax/tranga-website
1
0
Fork 0
mirror of https://github.com/C9Glax/tranga-website.git synced 2025-10-15 01:40:46 +02:00
Code Issues Packages Projects Releases Wiki Activity

Use nuxtjs/mdc to render descriptions

Browse Source
This commit is contained in:
glax
2025-10-14 14:50:13 +02:00
parent a01dc430e6
commit 06eb971af4
10 changed files with 105 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
website/app/app.config.ts
View File

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

1
website/app/components/LibrarySelect.vue
View File

@@ -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>

1
website/app/components/MangaCard.vue
View File

@@ -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">

4
website/app/components/MangaDetailPage.vue
View File

@@ -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>

4
website/app/pages/manga/[mangaId]/index.vue
View File

@@ -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 });

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

@@ -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>

2
website/nuxt.config.ts
View File

@@ -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: {

137
website/package-lock.json generated
View File

@@ -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",
"resolved": "https://registry.npmjs.org/@nuxtjs/mdc/-/mdc-0.17.4.tgz",
"integrity": "sha512-I5ZYUWVlE2xZAkfBG6B0/l2uddDZlr8X2WPVMPYNY4zocobBjMgykj4aqYXHY+N35HRYsa+IpuUCf30bR8xCbA==",
"version": "0.18.0",
"resolved": "https://registry.npmjs.org/@nuxtjs/mdc/-/mdc-0.18.0.tgz",
"integrity": "sha512-/rWEOiLpD6oNx2FC/UsYxLn1pP31pvRmaX5y8GurBOogATKDWd3jlfKCGgshLnsWM6dCKgNkF0mCZQCMZMfpIQ==",
"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",
"@nuxt/kit": "^4.1.3",
"@shikijs/core": "^3.13.0",
"@shikijs/langs": "^3.13.0",
"@shikijs/themes": "^3.13.0",
"@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",
"resolved": "https://registry.npmjs.org/remark-mdc/-/remark-mdc-3.6.0.tgz",
"integrity": "sha512-f+zgMYMBChoZJnpWM2AkfMwIC2sS5+vFQQdOVho58tUOh5lDP9SnZj2my8PeXBgt8MFQ+jc97vFFzWH21JXICQ==",
"name": "remark-mdc-edge",
"version": "3.6.0-29333381.8558577",
"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",

1
website/package.json
View File

@@ -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",

2
website/tsconfig.json
View File

@@ -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"}
}