init git

components/blog/Content.vue

@@ -0,0 +1,63 @@
+<template>
+    <article>
+        <router-link :to="'/blog?category=' + category.link">
+            {{ category.name }}
+        </router-link>
+        <h1>{{ title }}</h1>
+        <span>{{ $t('author') }}: {{ userID.firstName }} {{ userID.lastName }}</span>
+        <div>
+            <i class="isax isax-calendar-1"></i>
+            <span>{{ new Date(createdAt).toLocaleString('fa') }}</span>
+        </div>
+        <img :src="coverImage" :alt="title" />
+        <div v-html="content" />
+    </article>
+</template>
+
+<script setup>
+const data = inject('data')
+const { category, userID, createdAt, coverImage, title, content } = data.post
+</script>
+
+<style lang="scss">
+.blog-post>section>article {
+    @apply w-full max-lg:container max-w-[64.6rem] flex flex-col max-lg:px-6;
+
+    &>a {
+        @apply text-primary-600 font-vazir w-max hover:underline;
+        @apply text-xs lg:text-2xl lg:leading-[2.7rem] mt-3 lg:mt-0;
+    }
+
+    &>h1 {
+        @apply text-[#404040] font-bold font-vazir;
+        @apply text-base lg:text-3xl mt-2 lg:mt-6;
+    }
+
+    &>span {
+        @apply text-[#BFBFBF] font-normal font-vazir;
+        @apply text-sm lg:text-xl lg:leading-9 mt-[1.1rem] lg:mt-8;
+    }
+
+    &>div:first-of-type {
+        @apply flex items-center gap-1.5 lg:gap-2 text-[#BFBFBF] mt-2;
+
+        &>span {
+            @apply font-normal font-vazir;
+            @apply text-sm lg:text-xl;
+        }
+
+        i {
+            @apply text-[1.4em] lg:text-2xl;
+        }
+    }
+
+    &>img {
+        @apply w-full bg-zinc-300 order-first lg:order-none lg:mt-6;
+    }
+
+    &>div:last-of-type {
+        @apply text-[#595959] font-vazir mt-9 lg:mt-12 text-justify;
+        @apply text-sm leading-6 lg:text-xl lg:leading-9;
+    }
+}
+</style>