comments wip

frontend/components/comments/index.vue

@@ -0,0 +1,58 @@
+<template>
+    <div>
+        <h5 class="mb-3">
+            <span class="fa-regular fa-comment"></span>
+            <span class="mx-1">دیدگاه ها</span>
+        </h5>
+
+        <form v-if="params.isLogin" class="my-3">
+            <textarea class="form-control mb-3" placeholder="دیدگاه خود را اینجا بنویسید" rows="3" required></textarea>
+            <button class="btn btn-success" type="submit">ثبت دیدگاه</button>
+        </form>
+
+        <div v-else class="alert alert-light">
+            <i class="fa-regular fa-bell fa-shake fa-xl"></i>
+            <span class="mx-1">برای ثبت دیدگاه خود</span>
+            <NuxtLink class="mx-1" href="/auth/register">ثبت نام کنید</NuxtLink>
+            <span>یا</span>
+            <NuxtLink class="mx-1" to="/auth/login">وارد شوید</NuxtLink>
+        </div>
+
+        <section class="card mb-3">
+            <div class="card-body d-flex flex-start">
+                <img class="rounded-circle shadow-1-strong ms-3" src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/img%20(3).webp" alt="avatar" width="65" height="65">
+                <div class="flex-grow-1 flex-shrink-1">
+                    <div class="d-flex justify-content-between align-items-center">
+                    <p class="mb-1">
+                        <span>افشار زند</span>
+                        <span class="text-muted small">
+                        <span class="fa-regular fa-clock mx-1"></span>
+                        <time datetime="">{{ useTime().toAgo('2024/05/20') }}</time>
+                        </span>
+                    </p>
+                    <div v-if="params.isLogin" class="text-nowrap">
+                        <button class="btn text-danger btn-sm">
+                            <i class="fas fa-trash fa-xs"></i>
+                        </button>
+                        <span>|</span>
+                        <button class="btn btn-sm">
+                        <i class="fas fa-reply fa-xs"></i>
+                        </button>
+                    </div>
+                    </div>
+                    <p class="small mb-0 pt-2 border-top">
+                        طراحان معمولا از لورم ایپسوم
+                         استفاده میکنند تا فقط به مشتری یا کار فرما نشان دهند که قالب طراحی شده بعد از اینکه متن
+                         در آن قرار میگرد چگونه خواهد بود و فونت ها و اندازه ها چگونه در نظر گرفته شده است.
+                    </p>
+                </div>
+            </div>
+        </section>
+    </div>
+</template>
+
+<script lang="ts" setup>
+    const params = reactive({
+        isLogin: useAuth().isLogin(),
+    })
+</script>

frontend/pages/articles/[uuid].vue

@@ -22,6 +22,10 @@
               <div v-if="data.tags" class="card-text">
                 <a class="hashtag" :href="`/hashtags/${tag}`" :key="index" v-for="(tag, index) in data.tags">{{ tag }}</a>
               </div>
+
+              <aside v-if="false" class="mt-5">
+                <Comments />
+              </aside>
             </section>
         </div>
     </div>

frontend/pages/articles/index.vue

@@ -3,7 +3,9 @@
         <div class="container mt-5 mb-5">
             <div class="row">
                 <div class="col-8 mx-auto">
-                    <h1 class="fw-bold spanborder"><span>All articles</span></h1>
+                    <h1 class="fw-bold spanborder">
+                        <span>مقاله ها</span>
+                    </h1>
                     <template v-if="data.items.length > 0" v-for="{uuid, cover, title, excerpt, published_at} in data.items">
                         <CardMedium :cover="cover" :href="`/articles/${uuid}`" :title="title" :excerpt="excerpt" :publishedAt="published_at" />
                     </template>