add page transition & code highlight

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

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>

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.

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',
+    },
+  },
 })