RhenCloud/Cloud-Blog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add table of content for blog page

Browse Source 
Signed-off-by: Al Asad Nur Riyad <alasadnurriyad@Als-MacBook-Pro.local>
This commit is contained in:
Al Asad Nur Riyad
2023-08-03 01:17:54 +06:00
parent 15fa5fd755
commit 737a34dd9f
1 changed files with 45 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
pages/blogs/[blog].vue
View File

@@ -17,6 +17,8 @@ const data = computed<BlogPost>(() => {
} }
}) })
const links = articles.body.toc.links
useHead({ useHead({
title: data.value.title || '', title: data.value.title || '',
meta: [ meta: [
@@ -74,42 +76,52 @@ useHead({
</script> </script>
<template> <template>
<main class="px-6 container max-w-5xl mx-auto"> <main class="px-6 container max-w-6xl mx-auto grid grid-cols-12 space-x-8">
<header> <div class="col-span-12 lg:col-span-9">
<h1 class="text-xl md:text-3xl lg:text-4xl m-7 font-bold text-center"> <header>
{{ data.title || '' }} <h1 class="text-xl md:text-3xl lg:text-4xl m-7 font-bold text-center">
</h1> {{ data.title || '' }}
<NuxtImg </h1>
:src="data.image || ''" <NuxtImg
:alt="data.alt || ''" :src="data.image || ''"
class="m-auto rounded-2xl shadow-lg h-52 md:h-96 w-4/5 content-center object-cover" :alt="data.alt || ''"
/> class="m-auto rounded-2xl shadow-lg h-52 md:h-96 w-4/5 content-center object-cover"
<p class="text-xs sm:text-sm my-3 max-w-3xl mx-auto text-center text-zinc-600"> />
{{ data.description }} <p class="text-xs sm:text-sm my-3 max-w-3xl mx-auto text-center text-zinc-600">
</p> {{ data.description }}
<div class="flex w-full justify-center text-xs md:text-base my-8"> </p>
<div class="md:flex text-black content-center gap-8 text-xs sm:text-sm"> <div class="flex w-full justify-center text-xs md:text-base my-8">
<div class="flex items-center font-semibold"> <div class="md:flex text-black content-center gap-8 text-xs sm:text-sm">
<LogoDate /> <div class="flex items-center font-semibold">
<p>{{ data.date || '' }}</p> <LogoDate />
</div> <p>{{ data.date || '' }}</p>
<div class="flex items-center gap-2 flex-wrap my-5"> </div>
<LogoTag /> <div class="flex items-center gap-2 flex-wrap my-5">
<template v-for="tag in data.tags" :key="tag"> <LogoTag />
<span class="bg-gray-200 rounded-md px-2 py-1 font-semibold">{{ tag }}</span> <template v-for="tag in data.tags" :key="tag">
</template> <span class="bg-gray-200 rounded-md px-2 py-1 font-semibold">{{ tag }}</span>
</template>
</div>
</div> </div>
</div> </div>
</header>
<div
class="prose prose-pre:max-w-xs sm:prose-pre:max-w-full prose-sm sm:prose-base md:prose-lg prose-h1:no-underline max-w-5xl mx-auto prose-zinc prose-img:rounded-lg"
>
<ContentRenderer :value="articles">
<template #empty>
<p>No content found.</p>
</template>
</ContentRenderer>
</div> </div>
</header> </div>
<div <div class="lg:col-span-3 sticky top-28 h-96 p-2 hidden lg:block">
class="prose prose-pre:max-w-xs sm:prose-pre:max-w-full prose-sm sm:prose-base md:prose-lg prose-h1:no-underline max-w-5xl mx-auto prose-zinc prose-img:rounded-lg" <h1 class="text-lg font-bold mb-4">
> Table Of Content
<ContentRenderer :value="articles"> </h1>
<template #empty> <NuxtLink v-for="link in links" :key="link.id" :to="`#${link.id}`" class="block underline text-md mb-3">
<p>No content found.</p> {{ link.text }}
</template> </NuxtLink>
</ContentRenderer>
</div> </div>
</main> </main>
</template> </template>