From fd65e3bdaf1c13f984779206d81ed46b6eef394d Mon Sep 17 00:00:00 2001
From: nurRiyad <asadnurriyad@gmail.com>
Date: Mon, 9 Jan 2023 01:21:22 +0600
Subject: [PATCH] design blog page

Signed-off-by: nurRiyad <asadnurriyad@gmail.com>
---
 components/content/CunstomDate.vue |  0
 components/content/CustomTag.vue   | 24 ++++++++++++++++++++++--
 components/content/CustomTitle.vue |  5 +++++
 components/logo/tag.vue            |  2 +-
 content/blogs/1. hello-world.md    | 21 ++++++++++++++++++++-
 pages/blogs/[blog].vue             |  2 +-
 6 files changed, 49 insertions(+), 5 deletions(-)
 delete mode 100644 components/content/CunstomDate.vue
 create mode 100644 components/content/CustomTitle.vue

diff --git a/components/content/CunstomDate.vue b/components/content/CunstomDate.vue
deleted file mode 100644
index e69de29..0000000
diff --git a/components/content/CustomTag.vue b/components/content/CustomTag.vue
index 5f8c476..f4b025f 100644
--- a/components/content/CustomTag.vue
+++ b/components/content/CustomTag.vue
@@ -1,5 +1,25 @@
 <template>
-  <div class="py-5 px-2 m-2 text-center prose-h1:no-underline">
-    <slot />
+  <div class="flex w-full justify-center">
+    <div class="text-black content-center flex gap-7">
+      <div class="flex items-center">
+        <LogoDate />
+        <slot name="date"></slot>
+      </div>
+      <div class="flex items-center gap-2 flex-wrap punder">
+        <LogoTag />
+        <slot name="tag1"></slot>
+        <slot name="tag2"></slot>
+        <slot name="tag3"></slot>
+        <slot name="tag4"></slot>
+        <slot name="tag5"></slot>
+        <slot></slot>
+      </div>
+    </div>
   </div>
 </template>
+
+<style scoped>
+.punder {
+  text-decoration-line: underline;
+}
+</style>
diff --git a/components/content/CustomTitle.vue b/components/content/CustomTitle.vue
new file mode 100644
index 0000000..9ec75bf
--- /dev/null
+++ b/components/content/CustomTitle.vue
@@ -0,0 +1,5 @@
+<template>
+  <div class="text-center mt-8">
+    <slot />
+  </div>
+</template>
diff --git a/components/logo/tag.vue b/components/logo/tag.vue
index ae8ce96..e3e73d0 100644
--- a/components/logo/tag.vue
+++ b/components/logo/tag.vue
@@ -4,7 +4,7 @@
     stroke="currentColor"
     viewBox="0 0 24 24"
     xmlns="http://www.w3.org/2000/svg"
-    class="w-4 h-4 mr-2"
+    class="w-4 h-4 mr-1"
   >
     <path
       stroke-linecap="round"
diff --git a/content/blogs/1. hello-world.md b/content/blogs/1. hello-world.md
index 98b71af..d33425d 100644
--- a/content/blogs/1. hello-world.md	
+++ b/content/blogs/1. hello-world.md	
@@ -3,9 +3,28 @@ title: 'Title of the page'
 description: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque minima eum, odit earum porro beatae explicabo quisquam asperiores aliquam similique ipsam non deleniti qui sint ad maxime culpa accusantium. Deleniti.'
 ---
 
-<h1 class="text-center py-6">How to create a blog size with nuxt3 and nuxt-content-v2</h1>
+::CustomTitle
+
+# How to create a blog size with nuxt3 and nuxt-content-v2
+
+::
+
 <img class="m-auto rounded-2xl shadow-lg h-96 w-4/5 content-center object-cover" src="/blogs/hello-man/riyad.jpg" alt="resdlkf"/>
 
+::CustomTag
+
+#date
+31 Dec 2023
+
+#tag1
+Javascript
+
+#tag2
+Typescipt
+
+Node
+::
+
 ## Details
 
 Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aperiam incidunt, ipsa ea voluptatibus quas vitae dolorem officia vero rerum at atque non magni esse, enim ducimus asperiores numquam perspiciatis quaerat, quisquam placeat. Explicabo vero ad, reprehenderit veritatis itaque architecto cumque provident odit modi accusantium necessitatibus dolorem pariatur recusandae possimus tempora.
diff --git a/pages/blogs/[blog].vue b/pages/blogs/[blog].vue
index 8ec651e..8786a2f 100644
--- a/pages/blogs/[blog].vue
+++ b/pages/blogs/[blog].vue
@@ -1,7 +1,7 @@
 <template>
   <main class="px-6 container max-w-5xl mx-auto">
     <div
-      class="prose md:prose-lg prose-h1:no-underline max-w-5xl mx-auto prose-zinc prose-img:rounded-lg prose-headings:underline"
+      class="prose md:prose-lg prose-h1:no-underline max-w-5xl mx-auto prose-zinc prose-img:rounded-lg"
     >
       <ContentDoc />
     </div>