From a17ca2999fcf0653bb704efce7ca2e5a4096b5d3 Mon Sep 17 00:00:00 2001
From: nurRiyad <asadnurriyad@gmail.com>
Date: Mon, 9 Jan 2023 00:47:58 +0600
Subject: [PATCH] update blog

Signed-off-by: nurRiyad <asadnurriyad@gmail.com>
---
 components/archive/card.vue        |  2 +-
 components/blog/card.vue           |  2 +-
 components/content/CunstomDate.vue |  0
 components/content/CustomTag.vue   |  5 +++++
 content/blogs/1. hello-world.md    |  5 ++---
 pages/blogs/[blog].vue             | 10 +++++++---
 6 files changed, 16 insertions(+), 8 deletions(-)
 create mode 100644 components/content/CunstomDate.vue
 create mode 100644 components/content/CustomTag.vue

diff --git a/components/archive/card.vue b/components/archive/card.vue
index 0d70526..6c95ac4 100644
--- a/components/archive/card.vue
+++ b/components/archive/card.vue
@@ -9,7 +9,7 @@ defineProps<{
 
 <template>
   <article class="group border p-5 m-2 rounded-2xl shadow-lg text-zinc-700">
-    <NuxtLink to="/home" class="grid grid-cols-1 sm:grid-cols-9 gap-5">
+    <NuxtLink :to="slug" class="grid grid-cols-1 sm:grid-cols-9 gap-5">
       <div class="sm:col-span-2">
         <img
           class="lg:h-48 md:h-36 sm:h-36 w-full object-cover object-center rounded-2xl shadow-lg group-hover:scale-[1.05] transition-all duration-500"
diff --git a/components/blog/card.vue b/components/blog/card.vue
index 7918c29..43c6f9d 100644
--- a/components/blog/card.vue
+++ b/components/blog/card.vue
@@ -9,7 +9,7 @@ defineProps<{
 
 <template>
   <article class="group border p-5 m-2 rounded-2xl shadow-lg text-zinc-700">
-    <NuxtLink to="/home" class="">
+    <NuxtLink :to="slug" class="">
       <img
         class="lg:h-48 md:h-36 w-full object-cover object-center rounded-2xl shadow-lg group-hover:scale-[1.05] transition-all duration-500"
         src="/blogs/hello-world/riyad.jpg"
diff --git a/components/content/CunstomDate.vue b/components/content/CunstomDate.vue
new file mode 100644
index 0000000..e69de29
diff --git a/components/content/CustomTag.vue b/components/content/CustomTag.vue
new file mode 100644
index 0000000..5f8c476
--- /dev/null
+++ b/components/content/CustomTag.vue
@@ -0,0 +1,5 @@
+<template>
+  <div class="py-5 px-2 m-2 text-center prose-h1:no-underline">
+    <slot />
+  </div>
+</template>
diff --git a/content/blogs/1. hello-world.md b/content/blogs/1. hello-world.md
index d7f8bb8..98b71af 100644
--- a/content/blogs/1. hello-world.md	
+++ b/content/blogs/1. hello-world.md	
@@ -3,12 +3,11 @@ 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.'
 ---
 
-# Hello world
+<h1 class="text-center py-6">How to create a blog size with nuxt3 and nuxt-content-v2</h1>
+<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"/>
 
 ## Details
 
-![alt text](/img/riyad.jpg)
-
 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.
 
 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 336b5a7..8ec651e 100644
--- a/pages/blogs/[blog].vue
+++ b/pages/blogs/[blog].vue
@@ -1,5 +1,9 @@
 <template>
-  <div class="container mx-auto prose prose-slate max-w-7xl">
-    <ContentDoc />
-  </div>
+  <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"
+    >
+      <ContentDoc />
+    </div>
+  </main>
 </template>