Merge pull request #163 from elysiajs/nearl

Nearl

Author: SaltyAom

bun.lockb

@@ -1,7 +1,6 @@
 <template>
-    <header
-        class="flex flex-col justify-center items-center max-w-3xl gap-3 w-full mx-auto pt-20 pb-4"
-    >
+    <Ray class="h-[62.5vh] -top-18 left-0 z-[100] opacity-30 dark:opacity-[.55] pointer-events-none" />
+    <header class="flex flex-col justify-center items-center max-w-3xl gap-3 w-full mx-auto pt-20 pb-4">
         <h1 class="text-2xl md:text-3xl text-gray-700 dark:text-gray-100 font-semibold">
             Latest Updates
         </h1>
@@ -10,11 +9,9 @@
         </p>
     </header>
     <main class="flex flex-col max-w-xl gap-4 w-full mx-auto my-8">
-        <a
-            v-for="blog in props.blogs"
+        <a v-for="blog in props.blogs"
             class="px-4 py-2 rounded-lg hover:bg-gray-50 focus:bg-gray-50 dark:hover:bg-gray-700 dark:focus:bg-gray-700 transition-colors cursor-pointer"
-            :href="blog.href"
-        >
+            :href="blog.href">
             <article class="flex flex-col gap-2">
                 <h2 class="text-xl font-semibold text-gray-700 dark:text-gray-100">
                     {{ blog.title }}
@@ -28,6 +25,8 @@
 <script lang="ts" setup>
 import { defineProps } from 'vue'
 
+import Ray from '../../components/midori/ray.vue'
+
 import '../tailwind.css'
 
 const props = defineProps<{