From 3bd747fb833c08169f7568fae633064bb4a41e87 Mon Sep 17 00:00:00 2001
From: nurRiyad <asadnurriyad@gmail.com>
Date: Tue, 10 Jan 2023 22:53:26 +0600
Subject: [PATCH] add page transition & code highlight

Signed-off-by: nurRiyad <asadnurriyad@gmail.com>
---
 app.vue                         | 11 +++++++++++
 content/blogs/1. hello-world.md | 22 ++++++++++++++++++++++
 nuxt.config.ts                  |  7 +++++++
 3 files changed, 40 insertions(+)

diff --git a/app.vue b/app.vue
index 63479f0..61334c5 100644
--- a/app.vue
+++ b/app.vue
@@ -6,3 +6,14 @@
     </NuxtLayout>
   </div>
 </template>
+<style>
+.page-enter-active,
+.page-leave-active {
+  transition: all 0.4s;
+}
+.page-enter-from,
+.page-leave-to {
+  opacity: 0;
+  filter: blur(1rem);
+}
+</style>
diff --git a/content/blogs/1. hello-world.md b/content/blogs/1. hello-world.md
index c76909d..d474026 100644
--- a/content/blogs/1. hello-world.md	
+++ b/content/blogs/1. hello-world.md	
@@ -33,6 +33,28 @@ Typescipt
 
 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.
 
+```ts
+
+<script lang="ts" setup>
+useHead({
+  title: 'Home',
+  meta: [
+    {
+      name: 'description',
+      content: 'Home',
+    },
+  ],
+  titleTemplate: "Riyad's Blog - %s",
+})
+
+// Get Last 6 Publish Post from the content/blog directory
+const { data } = await useAsyncData('home', () =>
+  queryContent('/blogs').limit(6).sort({ _id: -1 }).find()
+)
+</script>
+
+```
+
 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/nuxt.config.ts b/nuxt.config.ts
index b203eb2..159d8a7 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -8,6 +8,7 @@ export default defineNuxtConfig({
       titleTemplate: "%s - Riyad's Blog",
       meta: [{ name: 'description', content: "Riyad's awesome blog" }],
     },
+    pageTransition: { name: 'page', mode: 'out-in' },
   },
 
   typescript: {
@@ -15,4 +16,10 @@ export default defineNuxtConfig({
   },
 
   modules: ['@nuxt/content', '@nuxtjs/tailwindcss', 'nuxt-icon'],
+
+  content: {
+    highlight: {
+      theme: 'dracula',
+    },
+  },
 })