From 1dba7fde5938e74cc2c06a0d3a6cc6ae7f6731ce Mon Sep 17 00:00:00 2001
From: marzban-dev <marzban.dev@gmail.com>
Date: Thu, 30 Jan 2025 02:40:57 +0330
Subject: [PATCH 1/6] Update blog post

---
 frontend/components/global/BlogPost.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/frontend/components/global/BlogPost.vue b/frontend/components/global/BlogPost.vue
index acc4f26..485bf58 100644
--- a/frontend/components/global/BlogPost.vue
+++ b/frontend/components/global/BlogPost.vue
@@ -25,7 +25,7 @@ const {} = toRefs(props);
 <template>
     <div
         :class="variant === 'lg' ? 'rounded-150 overflow-hidden' : ''"
-        class="max-h-[700px] h-[700px] relative"
+        class="group max-h-[700px] h-[700px] relative"
     >
 
         <Tag
@@ -47,7 +47,7 @@ const {} = toRefs(props);
 
             <img
                 :src="image"
-                class="absolute size-full object-cover z-10"
+                class="group-hover:scale-105 transition-transform duration-200 absolute size-full object-cover z-10"
                 alt=""
             />
         </div>
@@ -106,7 +106,7 @@ const {} = toRefs(props);
         <img
             v-if="variant === 'lg'"
             :src="image"
-            class="absolute size-full object-cover z-10"
+            class="group-hover:scale-105 transition-transform duration-200 absolute size-full object-cover z-10"
             alt=""
         />
 

From 3015e47d833a4fc7ece7c90b22c0eab7d39e1741 Mon Sep 17 00:00:00 2001
From: marzban-dev <marzban.dev@gmail.com>
Date: Thu, 30 Jan 2025 02:41:18 +0330
Subject: [PATCH 2/6] Update ui

---
 frontend/components/global/Pagination.vue | 22 +++++++++++-----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/frontend/components/global/Pagination.vue b/frontend/components/global/Pagination.vue
index 4ec5fb9..4a29a83 100644
--- a/frontend/components/global/Pagination.vue
+++ b/frontend/components/global/Pagination.vue
@@ -38,23 +38,23 @@ watch(
         show-edges
         v-model:page="page"
     >
-        <PaginationList v-slot="{ items }" class="flex items-center gap-1">
+        <PaginationList v-slot="{ items }" class="flex items-center gap-2">
             <PaginationLast
-                class="w-9 h-9 flex items-center justify-center bg-transparent cursor-pointer hover:bg-stone-700/20 transition disabled:opacity-50 disabled:cursor-not-allowed rounded-lg"
+                class="px-2 h-9 font-light whitespace-nowrap flex items-center justify-center bg-transparent cursor-pointer transition disabled:opacity-50 disabled:cursor-not-allowed rounded-lg"
             >
-                <Icon name="bi:chevron-double-right" class="**:stroke-black" />
+                برو آخر
             </PaginationLast>
             <PaginationNext
-                class="w-9 h-9 ml-4 flex items-center justify-center cursor-pointer hover:bg-stone-700/20 transition disabled:opacity-50 disabled:cursor-not-allowed rounded-lg"
+                class="w-9 h-9 ml-4 flex items-center justify-center cursor-pointer hover:bg-slate-100 transition disabled:opacity-50 disabled:cursor-not-allowed rounded-lg"
             >
-                <Icon name="bi:chevron-right" class="**:stroke-black" />
+                <Icon name="ci:chevron-right" class="**:fill-back" size="18px" />
             </PaginationNext>
 
             <template v-for="(page, index) in items">
                 <PaginationListItem
                     v-if="page.type === 'page'"
                     :key="index"
-                    class="w-9 h-9 border border-stone-800 rounded-lg data-[selected]:!bg-black data-[selected]:text-white data-[selected]:shadow-sm hover:bg-stone-700/20 transition"
+                    class="w-9 h-9 cursor-pointer bg-slate-100 rounded-lg data-[selected]:!bg-black data-[selected]:text-white data-[selected]:shadow-sm hover:bg-slate-200 transition"
                     :value="page.value"
                 >
                     {{ page.value }}
@@ -63,21 +63,21 @@ watch(
                     v-else
                     :key="page.type"
                     :index="index"
-                    class="w-9 h-9 flex items-center justify-center"
+                    class="w-9 h-9 select-none flex items-center justify-center"
                 >
                     &#8230;
                 </PaginationEllipsis>
             </template>
 
             <PaginationPrev
-                class="w-9 h-9 flex items-center justify-center bg-transparent cursor-pointer hover:bg-stone-700/20 transition mr-4 disabled:opacity-50 disabled:cursor-not-allowed rounded-lg"
+                class="w-9 h-9 flex items-center justify-center bg-transparent cursor-pointer hover:bg-slate-100 transition mr-4 disabled:opacity-50 disabled:cursor-not-allowed rounded-lg"
             >
-                <Icon name="bi:chevron-left" class="**:stroke-black" />
+                <Icon name="ci:chevron-left" class="**:fill-back" size="18px" />
             </PaginationPrev>
             <PaginationFirst
-                class="w-9 h-9 flex items-center justify-center bg-transparent cursor-pointer hover:bg-stone-700/20 transition disabled:opacity-50 disabled:cursor-not-allowed rounded-lg"
+                class="px-2 h-9 font-light flex items-center whitespace-nowrap justify-center bg-transparent cursor-pointer transition disabled:opacity-50 disabled:cursor-not-allowed rounded-lg"
             >
-                <Icon name="bi:chevron-double-left" class="**:stroke-black" />
+                برو اول
             </PaginationFirst>
         </PaginationList>
     </PaginationRoot>

From 6514d5f7ceca934344e652d32120d93a7f1b8a25 Mon Sep 17 00:00:00 2001
From: marzban-dev <marzban.dev@gmail.com>
Date: Thu, 30 Jan 2025 02:41:23 +0330
Subject: [PATCH 3/6] Updated

---
 frontend/components/home/LatestStories.vue | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/frontend/components/home/LatestStories.vue b/frontend/components/home/LatestStories.vue
index ef8c72c..c1073cd 100644
--- a/frontend/components/home/LatestStories.vue
+++ b/frontend/components/home/LatestStories.vue
@@ -17,9 +17,11 @@ const {} = toRefs(props);
             <span class="typo-h-4 text-black">
                 مقالات اخیر سایت
             </span>
-            <Button variant="outlined" class="rounded-full" start-icon="ci:paper">
-                نمایش همه
-            </Button>
+            <NuxtLink to="/articles">
+                <Button variant="outlined" class="rounded-full" start-icon="ci:paper">
+                    نمایش همه
+                </Button>
+            </NuxtLink>
         </div>
         <div class="flex gap-12">
             <div class="flex-1 flex flex-col gap-12">

From d81c12c358b0bf076a8b18e24b5e2e37b7238511 Mon Sep 17 00:00:00 2001
From: marzban-dev <marzban.dev@gmail.com>
Date: Thu, 30 Jan 2025 02:43:35 +0330
Subject: [PATCH 4/6] Add articles composable api

---
 .../composables/api/blog/useGetArticles.ts    | 38 +++++++++++++++++++
 1 file changed, 38 insertions(+)
 create mode 100644 frontend/composables/api/blog/useGetArticles.ts

diff --git a/frontend/composables/api/blog/useGetArticles.ts b/frontend/composables/api/blog/useGetArticles.ts
new file mode 100644
index 0000000..0ccfde0
--- /dev/null
+++ b/frontend/composables/api/blog/useGetArticles.ts
@@ -0,0 +1,38 @@
+// imports
+
+import { useQuery } from "@tanstack/vue-query";
+import { API_ENDPOINTS, QUERY_KEYS } from "~/constants";
+
+// types
+
+export type GetArticlesResponse = ApiPaginated<UserComment>;
+
+const useGetArticles = (
+    page: Ref<number>,
+    search: Ref<string>
+) => {
+
+    // state
+
+    const { $axios: axios } = useNuxtApp();
+
+    // methods
+
+    const handleGetArticles = async () => {
+        const { data } = await axios.get<GetArticlesResponse>(`${API_ENDPOINTS.blog.articles}`, {
+            params: {
+                offset: (page.value * 10) - 10,
+                limit: 10,
+                search: search.value.length > 0 ? search.value : undefined,
+            }
+        });
+        return data;
+    };
+
+    return useQuery({
+        queryKey: [QUERY_KEYS.articles, page, search],
+        queryFn: () => handleGetArticles()
+    });
+};
+
+export default useGetArticles;

From 14ae01b6d1acc7cb966ed7bee23acdd565d3cadc Mon Sep 17 00:00:00 2001
From: marzban-dev <marzban.dev@gmail.com>
Date: Thu, 30 Jan 2025 03:03:14 +0330
Subject: [PATCH 5/6] Add blog endpoints

---
 frontend/constants/index.ts | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/frontend/constants/index.ts b/frontend/constants/index.ts
index bfad022..4e9cdab 100644
--- a/frontend/constants/index.ts
+++ b/frontend/constants/index.ts
@@ -1,5 +1,9 @@
 export const API_ENDPOINTS = {
-    home : "/home",
+    home: "/home",
+    blog: {
+        articles: "/blogs/all",
+        article: "/blogs"
+    },
     account: {
         profile: "/accounts/profile",
         send_otp: "/accounts/send_otp"
@@ -26,6 +30,8 @@ export const API_ENDPOINTS = {
 };
 
 export const QUERY_KEYS = {
+    articles: "articles",
+    article: "article",
     comments: "comments",
     home: "home",
     chat: "chat",

From a02660e391b7672578a7d964643c26f81be6a8d9 Mon Sep 17 00:00:00 2001
From: marzban-dev <marzban.dev@gmail.com>
Date: Thu, 30 Jan 2025 03:03:21 +0330
Subject: [PATCH 6/6] Create articles page

---
 frontend/pages/articles.vue | 101 ++++++++++++++++++++++++++++++++++++
 1 file changed, 101 insertions(+)
 create mode 100644 frontend/pages/articles.vue

diff --git a/frontend/pages/articles.vue b/frontend/pages/articles.vue
new file mode 100644
index 0000000..078c45c
--- /dev/null
+++ b/frontend/pages/articles.vue
@@ -0,0 +1,101 @@
+<script lang="ts" setup>
+
+// import
+
+import useGetArticles from "~/composables/api/blog/useGetArticles";
+
+// state
+
+const page = ref(1);
+const search = ref("");
+const debouncedSearch = refDebounced(search, 700);
+
+const { data: articles, suspense } = useGetArticles(page, debouncedSearch);
+
+// ssr
+
+await useAsyncData(async () => {
+
+    const response = await suspense();
+
+    if (response.isError) {
+        throw createError({
+            statusCode: 500,
+            statusMessage: `Error in categories page prefetch`
+        });
+    }
+});
+</script>
+
+<template>
+    <div class="container" style="margin-top: 80px">
+        <div class="flex items-center justify-between mb-20">
+            <span class="typo-h-4 text-black">
+                مقالات اخیر سایت
+            </span>
+            <Input
+                class="max-w-[400px] w-full rounded-full"
+                variant="outlined"
+                placeholder="جستجو..."
+                v-model="search"
+            >
+                <template #endItem>
+                    <div class="flex items-center gap-1">
+                        <Icon
+                            class="translate-y-[-1px]"
+                            name="ci:search"
+                            size="24"
+                        />
+                    </div>
+                </template>
+            </Input>
+        </div>
+        <div class="flex gap-12">
+            <div class="flex-1 flex flex-col gap-12">
+                <BlogPost
+                    image="/img/blog-1.jpeg"
+                    description="aaasd"
+                    title="asd"
+                    :comments="2"
+                    link="#"
+                    date="2020-06-10"
+                    tag="asdsa"
+                />
+                <BlogPost
+                    image="/img/blog-2.jpeg"
+                    description="aaasd"
+                    title="asd"
+                    :comments="2"
+                    link="#"
+                    date="2020-06-10"
+                    tag="asdsa"
+                />
+            </div>
+            <div class="flex-[0.8] flex flex-col">
+                <BlogPost
+                    image="/img/blog-3.jpeg"
+                    description="aaasd"
+                    title="asd"
+                    :comments="2"
+                    link="#"
+                    date="2020-06-10"
+                    tag="asdsa"
+                    variant="sm"
+                />
+                <BlogPost
+                    image="/img/blog-4.jpeg"
+                    description="aaasd"
+                    title="asd"
+                    :comments="2"
+                    link="#"
+                    date="2020-06-10"
+                    tag="asdsa"
+                    variant="sm"
+                />
+            </div>
+        </div>
+        <div class="w-full flex-center pt-24 pb-10">
+            <Pagination :items="[]" :total="100" />
+        </div>
+    </div>
+</template>
\ No newline at end of file