From 284a0e37888ab253bc2853e34e59f6c449c13efc Mon Sep 17 00:00:00 2001
From: marzban-dev <marzban.dev@gmail.com>
Date: Fri, 23 May 2025 08:41:16 +0330
Subject: [PATCH 1/8] Update articles grid section

---
 frontend/components/articles/ArticlesList.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/components/articles/ArticlesList.vue b/frontend/components/articles/ArticlesList.vue
index 6c346ee..41befe4 100644
--- a/frontend/components/articles/ArticlesList.vue
+++ b/frontend/components/articles/ArticlesList.vue
@@ -18,7 +18,7 @@ const isMobile = useMediaQuery('(max-width: 1024px)');
 </script>
 
 <template>
-    <div class="columns-1 xs:columns-2 xl:columns-3 gap-6 sm:gap-8 w-full space-y-8">
+    <div class="grid grid-cols-1 xs:grid-cols-2 xl:grid-cols-3 gap-6 sm:gap-8 w-full space-y-8">
         <BlogPost
             v-for="article in articles"
             :key="article.id"

From 6fc96e2da84a5b3b336f1a86068786cea20832f1 Mon Sep 17 00:00:00 2001
From: marzban-dev <marzban.dev@gmail.com>
Date: Fri, 23 May 2025 08:42:58 +0330
Subject: [PATCH 2/8] Updated

---
 frontend/components/global/BlogPost.vue | 140 ++++++++++++------------
 1 file changed, 69 insertions(+), 71 deletions(-)

diff --git a/frontend/components/global/BlogPost.vue b/frontend/components/global/BlogPost.vue
index e5e9a9f..89db980 100644
--- a/frontend/components/global/BlogPost.vue
+++ b/frontend/components/global/BlogPost.vue
@@ -29,85 +29,83 @@ const createdAt = usePersianTimeAgo(new Date(date.value));
 </script>
 
 <template>
-    <div>
-        <NuxtLink
-            :to="`/article/${slug}`"
-            :class="variant === 'lg' ? 'aspect-square rounded-150 overflow-hidden' : 'h-fit'"
-            class="group w-full relative block"
+    <NuxtLink
+        :to="`/article/${slug}`"
+        :class="variant === 'lg' ? 'aspect-square rounded-150 overflow-hidden' : 'h-fit'"
+        class="group w-full relative block"
+    >
+        <Tag
+            v-if="variant === 'lg'"
+            class="bg-slate-950 absolute left-6 top-6 z-20"
         >
-            <Tag
-                v-if="variant === 'lg'"
-                class="bg-slate-950 absolute left-6 top-6 z-20"
-            >
+            {{ category.name }}
+        </Tag>
+
+        <div
+            v-if="variant === 'sm'"
+            class="aspect-square w-full rounded-150 overflow-hidden relative"
+        >
+            <Tag class="bg-slate-950 absolute z-20 left-4 sm:left-6 top-4 sm:top-6 max-sm:text-xs">
                 {{ category.name }}
             </Tag>
 
-            <div
-                v-if="variant === 'sm'"
-                class="aspect-square w-full rounded-150 overflow-hidden relative"
-            >
-                <Tag class="bg-slate-950 absolute z-20 left-4 sm:left-6 top-4 sm:top-6 max-sm:text-xs">
-                    {{ category.name }}
-                </Tag>
-
-                <NuxtImg
-                    :src="image"
-                    class="group-hover:scale-105 transition-transform duration-200 absolute size-full object-cover z-10"
-                    alt=""
-                />
-            </div>
-
-            <div
-                :class="variant === 'lg' ? 'absolute px-6' : 'invert mt-6'"
-                class="bottom-6 lg:bottom-8 flex flex-col gap-4 z-20"
-            >
-                <div class="flex items-center gap-4 lg:gap-6">
-                    <div class="flex items-center gap-2">
-                        <Icon
-                            name="ci:comment"
-                            class="**:stroke-white size-3 md:size-3.5"
-                        />
-                        <span class="typo-p-xs md:typo-p-sm text-white"> ۰ نظر </span>
-                    </div>
-                    <div class="flex items-center gap-2">
-                        <Icon
-                            name="ci:calendar"
-                            class="**:stroke-white size-3 md:size-3.5"
-                        />
-                        <span class="typo-p-xs md:typo-p-sm text-white">
-                            {{ createdAt }}
-                        </span>
-                    </div>
-                </div>
-
-                <div class="flex gap-4 flex-col">
-                    <span
-                        :class="variant === 'lg' ? 'line-clamp-2' : ''"
-                        class="text-base md:text-lg font-medium lg:typo-h-6 text-white"
-                    >
-                        {{ title }}
-                    </span>
-                    <p
-                        v-if="variant === 'sm'"
-                        class="text-white typo-p-xs max-sm:!leading-[175%] sm:typo-p-sm md:typo-p-md line-clamp-3"
-                    >
-                        تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی، و فرهنگ پیشرو
-                        در زبان فارسی ایجاد کرد، در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها
-                    </p>
-                </div>
-            </div>
-
             <NuxtImg
-                v-if="variant === 'lg'"
                 :src="image"
                 class="group-hover:scale-105 transition-transform duration-200 absolute size-full object-cover z-10"
                 alt=""
             />
+        </div>
 
-            <div
-                v-if="variant === 'lg'"
-                class="w-full h-full bg-linear-to-t from-black to-transparent absolute inset-0 z-15"
-            />
-        </NuxtLink>
-    </div>
+        <div
+            :class="variant === 'lg' ? 'absolute px-6' : 'invert mt-6'"
+            class="bottom-6 lg:bottom-8 flex flex-col gap-4 z-20"
+        >
+            <div class="flex items-center gap-4 lg:gap-6">
+                <div class="flex items-center gap-2">
+                    <Icon
+                        name="ci:comment"
+                        class="**:stroke-white size-3 md:size-3.5"
+                    />
+                    <span class="typo-p-xs md:typo-p-sm text-white"> ۰ نظر </span>
+                </div>
+                <div class="flex items-center gap-2">
+                    <Icon
+                        name="ci:calendar"
+                        class="**:stroke-white size-3 md:size-3.5"
+                    />
+                    <span class="typo-p-xs md:typo-p-sm text-white">
+                        {{ createdAt }}
+                    </span>
+                </div>
+            </div>
+
+            <div class="flex gap-4 flex-col">
+                <span
+                    :class="variant === 'lg' ? 'line-clamp-2' : ''"
+                    class="text-base md:text-lg font-medium lg:typo-h-6 text-white"
+                >
+                    {{ title }}
+                </span>
+                <p
+                    v-if="variant === 'sm'"
+                    class="text-white typo-p-xs max-sm:!leading-[175%] sm:typo-p-sm md:typo-p-md line-clamp-3"
+                >
+                    تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی، و فرهنگ پیشرو در
+                    زبان فارسی ایجاد کرد، در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها
+                </p>
+            </div>
+        </div>
+
+        <NuxtImg
+            v-if="variant === 'lg'"
+            :src="image"
+            class="group-hover:scale-105 transition-transform duration-200 absolute size-full object-cover z-10"
+            alt=""
+        />
+
+        <div
+            v-if="variant === 'lg'"
+            class="w-full h-full bg-linear-to-t from-black to-transparent absolute inset-0 z-15"
+        />
+    </NuxtLink>
 </template>

From 4d8b69184217ef8660915db2cba4cb29bff59b15 Mon Sep 17 00:00:00 2001
From: marzban-dev <marzban.dev@gmail.com>
Date: Fri, 23 May 2025 08:43:05 +0330
Subject: [PATCH 3/8] Updated

---
 frontend/components/home/LatestStories.vue | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/frontend/components/home/LatestStories.vue b/frontend/components/home/LatestStories.vue
index 29f8ec2..773ce03 100644
--- a/frontend/components/home/LatestStories.vue
+++ b/frontend/components/home/LatestStories.vue
@@ -18,15 +18,13 @@ await suspense();
             <NuxtLink to="/articles">
                 <Button
                     variant="primary"
-                    class="rounded-full max-sm:typo-label-sm max-sm:py-2"
+                    class="rounded-full max-md:h-[38px] max-md:text-xs"
                     end-icon="ci:arrow-left"
                 >
                     نمایش همه
                 </Button>
             </NuxtLink>
         </div>
-        <ArticlesList
-            :articles="[...articles!.results,...articles!.results,...articles!.results,...articles!.results,...articles!.results,...articles!.results]"
-        />
+        <ArticlesList :articles="articles!.results" />
     </section>
 </template>

From 56370b6f063ddb3c33f24be3d3b3f1bbc6048569 Mon Sep 17 00:00:00 2001
From: marzban-dev <marzban.dev@gmail.com>
Date: Fri, 23 May 2025 09:22:00 +0330
Subject: [PATCH 4/8] Updated

---
 frontend/pages/product/[id].vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/frontend/pages/product/[id].vue b/frontend/pages/product/[id].vue
index ec25db0..2af43cd 100644
--- a/frontend/pages/product/[id].vue
+++ b/frontend/pages/product/[id].vue
@@ -14,7 +14,7 @@ const id = route.params.id as string | undefined;
 const page = ref(1);
 
 const { suspense: suspenseProduct, data: product } = useGetProduct(id);
-const { suspense: suspenseComments } = useGetComments(id, page);
+// const { suspense: suspenseComments } = useGetComments(id, page);
 
 useSeoMeta({
     title: `محصول ${product.value?.name}`,
@@ -45,9 +45,9 @@ provide("productVariant", {
 // ssr
 
 const productResponse = await suspenseProduct();
-const commentsResponse = await suspenseComments();
+// const commentsResponse = await suspenseComments();
 
-if (productResponse.isError || commentsResponse.isError) {
+if (productResponse.isError ) {
     throw createError({
         statusCode: 404,
         statusMessage: `error : product ${id} prefetch error`,

From e91b6dc44766b47ed7f3f25f58b94a6a446a5e63 Mon Sep 17 00:00:00 2001
From: marzban-dev <marzban.dev@gmail.com>
Date: Fri, 23 May 2025 09:22:05 +0330
Subject: [PATCH 5/8] Updated

---
 frontend/composables/api/product/useGetProduct.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/composables/api/product/useGetProduct.ts b/frontend/composables/api/product/useGetProduct.ts
index eb9505d..6b14123 100644
--- a/frontend/composables/api/product/useGetProduct.ts
+++ b/frontend/composables/api/product/useGetProduct.ts
@@ -17,7 +17,7 @@ const useGetProduct = (id: string | number | undefined) => {
     // methods
 
     const handleGetProduct = async (id: string | number | undefined) => {
-        const { data } = await axios.get<GetProductResponse>(`${API_ENDPOINTS.product.get}/${id}`);
+        const { data } = await axios.get<GetProductResponse>(`${API_ENDPOINTS.product.get}/${id}/`);
         return data;
     };
 

From 3ef2bc6578e1c2ead189f80133a3886a382fcdb8 Mon Sep 17 00:00:00 2001
From: marzban-dev <marzban.dev@gmail.com>
Date: Sat, 24 May 2025 18:38:29 +0330
Subject: [PATCH 6/8] Updated

---
 frontend/components/product/ProductComments.vue | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/frontend/components/product/ProductComments.vue b/frontend/components/product/ProductComments.vue
index 482cc39..9a5a2ee 100644
--- a/frontend/components/product/ProductComments.vue
+++ b/frontend/components/product/ProductComments.vue
@@ -38,15 +38,18 @@ const submitComment = async () => {
 
 const limitedComments = computed(() => {
     if (showMoreComments.value) {
-        return comments.value!.results;
+        return comments.value?.results;
     }
 
-    return comments.value!.results.slice(0, 3);
+    return comments.value?.results.slice(0, 3);
 });
 </script>
 
 <template>
-    <section class="bg-slate-50">
+    <section
+        v-if="!!comments"
+        class="bg-slate-50"
+    >
         <div class="flex relative gap-8 my-42 container max-lg:flex-col">
             <div
                 class="sticky top-0 flex flex-col gap-6 lg:min-w-[400px] h-fit bg-white p-8 rounded-xl border-[0.5px] border-slate-200"
@@ -99,13 +102,13 @@ const limitedComments = computed(() => {
                 />
 
                 <div
-                    v-if="comments!.count > 0"
+                    v-if="comments.count > 0"
                     class="flex items-center justify-center w-full"
                 >
                     <Pagination
                         v-if="showMoreComments"
-                        :total="comments!.count"
-                        :items="comments!.results.map((item, i) => ({ type: 'page', value: i }))"
+                        :total="comments.count"
+                        :items="comments.results.map((item, i) => ({ type: 'page', value: i }))"
                     />
                     <Button
                         v-else

From 0db35198dda0ada834cdb68b0706ff2a4a331812 Mon Sep 17 00:00:00 2001
From: marzban-dev <marzban.dev@gmail.com>
Date: Sat, 24 May 2025 18:39:23 +0330
Subject: [PATCH 7/8] Remove suspense product comments

---
 frontend/pages/product/[id].vue | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/frontend/pages/product/[id].vue b/frontend/pages/product/[id].vue
index 2af43cd..d0dde11 100644
--- a/frontend/pages/product/[id].vue
+++ b/frontend/pages/product/[id].vue
@@ -3,7 +3,6 @@
 
 import ChatButton from "~/components/product/ChatBox/ChatButton.vue";
 import useGetProduct from "~/composables/api/product/useGetProduct";
-import useGetComments from "~/composables/api/product/useGetComments";
 import ProductsSlider from "~/components/global/product-detail/ProductsSlider.vue";
 
 // state
@@ -11,10 +10,8 @@ import ProductsSlider from "~/components/global/product-detail/ProductsSlider.vu
 const route = useRoute();
 
 const id = route.params.id as string | undefined;
-const page = ref(1);
 
 const { suspense: suspenseProduct, data: product } = useGetProduct(id);
-// const { suspense: suspenseComments } = useGetComments(id, page);
 
 useSeoMeta({
     title: `محصول ${product.value?.name}`,
@@ -45,7 +42,6 @@ provide("productVariant", {
 // ssr
 
 const productResponse = await suspenseProduct();
-// const commentsResponse = await suspenseComments();
 
 if (productResponse.isError ) {
     throw createError({

From f45e82dc533f78aa317905f8307f3db19d3e5c3d Mon Sep 17 00:00:00 2001
From: marzban-dev <marzban.dev@gmail.com>
Date: Sat, 24 May 2025 18:39:31 +0330
Subject: [PATCH 8/8] install motion

---
 frontend/nuxt.config.ts | 1 +
 frontend/package.json   | 1 +
 2 files changed, 2 insertions(+)

diff --git a/frontend/nuxt.config.ts b/frontend/nuxt.config.ts
index 467d589..b3d1b9f 100644
--- a/frontend/nuxt.config.ts
+++ b/frontend/nuxt.config.ts
@@ -65,6 +65,7 @@ export default defineNuxtConfig({
         "@vite-pwa/nuxt",
         "@nuxt/image",
         "@nuxtjs/seo",
+        "motion-v/nuxt",
     ],
 
     sitemap: {
diff --git a/frontend/package.json b/frontend/package.json
index fd054dd..70881a0 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -35,6 +35,7 @@
         "gsap": "^3.12.7",
         "highlight.js": "^11.11.1",
         "jalali-ts": "^8.0.0",
+        "motion-v": "^1.1.1",
         "nuxt": "^3.15.4",
         "reka-ui": "^1.0.0-alpha.6",
         "sanitize-html": "^2.15.0",