marzban-dev
121 lines
4.6 KiB
Vue
121 lines
4.6 KiB
Vue
<script lang="ts" setup>
|
|
// import
|
|
|
|
import useGetArticle from "~/composables/api/blog/useGetArticle";
|
|
|
|
// state
|
|
|
|
const route = useRoute();
|
|
|
|
const id = route.params.id as string | undefined;
|
|
|
|
const { data: article, suspense } = useGetArticle(id);
|
|
|
|
useSeoMeta({
|
|
title: `مقاله ${article.value?.title}`,
|
|
ogImage: article.value?.cover_image,
|
|
twitterImage: article.value?.cover_image,
|
|
ogDescription: article.value?.summery,
|
|
twitterDescription: article.value?.summery,
|
|
});
|
|
|
|
// ssr
|
|
|
|
const response = await suspense();
|
|
|
|
if (response.isError) {
|
|
throw createError({
|
|
statusCode: 500,
|
|
statusMessage: `Error in categories page prefetch`,
|
|
});
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="container">
|
|
<div class="w-full h-[80svh] rounded-3xl relative overflow-hidden">
|
|
<NuxtImg
|
|
class="absolute object-cover size-full"
|
|
:alt="article!.title"
|
|
:src="article!.cover_image"
|
|
preload
|
|
loading="eager"
|
|
fetch-priority="high"
|
|
/>
|
|
<div class="absolute bg-linear-to-t from-black/75 to-transparent size-full" />
|
|
<div class="absolute pl-10 right-10 bottom-10 flex flex-col gap-6">
|
|
<h1 class="typo-h-4 text-white pl-8">
|
|
{{ article!.title }}
|
|
</h1>
|
|
|
|
<div
|
|
class="typo-p-lg text-slate-200 mb-6 text-justify w-[70%]"
|
|
v-html="article!.summery"
|
|
/>
|
|
|
|
<div class="flex items-center justify-between">
|
|
<div class="flex items-center gap-4">
|
|
<div
|
|
class="w-fit pr-2 pl-5 h-[50px] rounded-full flex items-center justify-center gap-3 bg-white"
|
|
>
|
|
<div
|
|
class="relative flex items-center justify-center rounded-full overflow-hidden size-[35px]"
|
|
>
|
|
<NuxtImg
|
|
class="size-full object-cover absolute"
|
|
:src="article!.author.profile_photo"
|
|
alt="article-author"
|
|
loading="lazy"
|
|
fetch-priority="low"
|
|
/>
|
|
</div>
|
|
<span class="typo-label-sm">
|
|
{{ article!.author.full_name }}
|
|
</span>
|
|
</div>
|
|
<div
|
|
class="w-fit pr-4 pl-5 h-[50px] rounded-full flex items-center justify-center gap-2 border-[1.5px] border-white text-white"
|
|
>
|
|
<span class="typo-label-sm mt-0.5"> دسته بندی موبایل </span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex items-center gap-4">
|
|
<div
|
|
class="w-fit pr-4 pl-5 h-[50px] rounded-full flex items-center justify-center gap-2 border-[1.5px] border-white text-white"
|
|
>
|
|
<Icon
|
|
name="ci:calendar"
|
|
size="24px"
|
|
class="**:stroke-white"
|
|
/>
|
|
<span class="typo-label-sm mt-0.5"> ۲۴ مهر 1403 </span>
|
|
</div>
|
|
<div
|
|
class="w-fit pr-4 pl-5 h-[50px] rounded-full flex items-center justify-center gap-2 border-[1.5px] border-white text-white"
|
|
>
|
|
<Icon
|
|
name="ci:eye-open"
|
|
size="24px"
|
|
class="**:stroke-white"
|
|
/>
|
|
<span class="typo-label-sm mt-0.5">
|
|
{{ article!.views }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex gap-4 mt-8">
|
|
<div
|
|
class="p-8 flex-1 text-zinc-800 flex flex-col gap-6 [&_p,ul]:text-zinc-500 [&_h1]:typo-h-4 [&_h2]:typo-h-5 [&_h3]:typo-h-6 [&_p]:typo-p-md [&_ul]:list-disc [&_ul]:typo-p-md [&_ul]:space-y-2"
|
|
v-html="article!.content"
|
|
/>
|
|
|
|
<aside class="mt-8 p-8 h-fit bg-slate-100 w-[400px] sticky top-4 rounded-3xl">asdsa</aside>
|
|
</div>
|
|
</div>
|
|
</template>
|