Create article page

2025-02-02 21:20:53 +03:30
parent 066fec210d
commit cacbbc0310
1 changed files with 115 additions and 0 deletions
@@ -0,0 +1,115 @@
+<script lang="ts" setup>
+
+// import
+
+import { sanitize } from "isomorphic-dompurify";
+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);
+
+// ssr
+
+const response = await suspense();
+
+if (response.isError) {
+    throw createError({
+        statusCode: 500,
+        statusMessage: `Error in categories page prefetch`
+    });
+}
+
+// computed
+
+const sanitizedArticleContent = computed(() => {
+    return sanitize(article.value!.content);
+});
+
+const sanitizedArticleSummery = computed(() => {
+    return sanitize(article.value!.summery);
+});
+
+</script>
+
+<template>
+    <div class="container">
+        <div class="w-full h-[80svh] rounded-3xl relative overflow-hidden">
+            <img class="absolute object-cover size-full" :alt="article!.title" :src="article!.cover_image" />
+            <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="sanitizedArticleSummery"
+                />
+
+                <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]">
+                                <img
+                                    class="size-full object-cover absolute"
+                                    :src="article!.author.profile_photo"
+                                    alt="article-author"
+                                />
+                            </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="sanitizedArticleContent"
+            />
+
+            <aside class="mt-8 p-8 h-fit bg-slate-100 w-[400px] sticky top-4 rounded-3xl">
+                asdsa
+            </aside>
+        </div>
+
+    </div>
+</template>