heymlz/hossein-por-shop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update seo tags

Browse Source
This commit is contained in:
marzban-dev
2025-05-11 20:11:09 +03:30
parent f835e74b70
commit 79c9f251f4
24 changed files with 183 additions and 154 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/pages/article/[id].vue
+42 -31
View File
@@ -1,5 +1,4 @@
<script lang="ts" setup>
// import
import useGetArticle from "~/composables/api/blog/useGetArticle";
@@ -12,6 +11,14 @@ 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();
@@ -19,16 +26,19 @@ const response = await suspense();
if (response.isError) {
throw createError({
statusCode: 500,
statusMessage: `Error in categories page prefetch`
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" />
<NuxtImg
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">
@@ -41,13 +51,13 @@ if (response.isError) {
/>
<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">
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]">
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"
@@ -55,50 +65,51 @@ if (response.isError) {
/>
</div>
<span class="typo-label-sm">
{{ article!.author.full_name }}
</span>
{{ 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>
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>
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" />
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>
{{ 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>
<aside class="mt-8 p-8 h-fit bg-slate-100 w-[400px] sticky top-4 rounded-3xl">asdsa</aside>
</div>
</div>
</template>
</template>