design blog page

Signed-off-by: nurRiyad <asadnurriyad@gmail.com>

components/content/CustomTag.vue

@@ -1,5 +1,25 @@
 <template>
-  <div class="py-5 px-2 m-2 text-center prose-h1:no-underline">
+  <div class="flex w-full justify-center">
-    <slot />
+    <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>

components/content/CustomTitle.vue

@@ -0,0 +1,5 @@
+<template>
+  <div class="text-center mt-8">
+    <slot />
+  </div>
+</template>

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"

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.

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>