Merge branch 'main' into patch-4

Author: SaltyAom

bun.lockb

@@ -1,22 +1,22 @@
 <template>
-    <Ray class="h-[40vh] -top-20 left-0 z-[100] opacity-30 dark:opacity-[.55] pointer-events-none" static />
+    <Ray class="h-[30vh] -top-16 -inset-0 left-0 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">
+        <h1 class="text-2xl md:text-3xl text-slate-700 dark:text-slate-100 font-semibold">
             Latest Updates
         </h1>
-        <p class="text-gray-500 dark:text-gray-300 text-lg">
+        <p class="text-slate-500 dark:text-slate-300 text-lg">
             Update of ElysiaJS from core maintainers
         </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"
-            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"
+            class="px-4 py-2 rounded-lg hover:bg-slate-100/75 focus:bg-slate-100/75 dark:hover:bg-slate-800 dark:focus:bg-slate-800 transition-colors cursor-pointer"
             :href="blog.href">
             <article class="flex flex-col gap-2">
-                <h2 class="text-xl font-semibold text-gray-700 dark:text-gray-100">
+                <h2 class="text-xl font-semibold text-slate-700 dark:text-slate-100">
                     {{ blog.title }}
                 </h2>
-                <p class="text-gray-500 dark:text-gray-300">{{ blog.detail }}</p>
+                <p class="text-slate-500 dark:text-slate-300">{{ blog.detail }}</p>
             </article>
         </a>
     </main>

components/blog/Landing.vue

@@ -3,7 +3,7 @@
         <h1 class="!text-3xl !md:text-4xl font-medium">
             {{ props.title }}
         </h1>
-        <!-- <aside class="flex gap-3 items-center mt-4">
+        <aside class="flex gap-3 items-center mt-4">
             <img
                 class="w-9 h-9 rounded-full"
                 :src="profile"
@@ -19,8 +19,8 @@
                     <a :href="twitter" target="_blank">@{{ author.twitter }}</a>
                 </p>
             </div>
-        </aside> -->
-        <img :src="props.src" :alt="props.alt" class="w-full my-6" :class="props.shadow ? 'shadow-xl' : 'border'" />
+        </aside>
+        <img :src="props.src" :alt="props.alt" class="w-full mt-6 mb-2" :class="props.shadow ? 'shadow-xl' : 'border'" />
         <main id="blog-content">
             <slot />
         </main>
@@ -57,8 +57,6 @@ const twitter = `https://twitter.com/${author.twitter}`
 const mutated = ['.aside', '.content', '.content-container', '.VPDocFooter']
 onMounted(() => {
     mutated.forEach((selector) => {
-        console.log(document.querySelector(selector))
-
         document.querySelector(selector)?.classList.add('blog')
     })
 })

components/blog/Layout.vue

@@ -1,17 +1,19 @@
+<script setup lang="ts">
+import useDark from './use-dark'
+
+const isDark = useDark()
+</script>
+
 <template>
     <article
-        class="flex justify-between flex-col lg:flex-row-reverse items-center w-full max-w-6xl mx-auto my-8 gap-12"
-    >
+        class="flex justify-between flex-col lg:flex-row-reverse items-center w-full max-w-6xl mx-auto my-8 gap-12">
         <section class="flex flex-col w-full max-w-lg">
             <header class="flex flex-col justify-center items-start">
-                <h2
-                    class="text-2xl md:text-3xl leading-tight font-medium text-gray-400 mb-2"
-                >
+                <h2 class="text-2xl md:text-3xl leading-tight font-medium text-gray-400 mb-2">
                     Can't find what you're looking for?
                 </h2>
                 <h2
-                    class="text-5xl leading-tight font-semibold text-gray-400 mb-4 bg-clip-text text-transparent bg-gradient-to-tl from-fuchsia-500 to-blue-500"
-                >
+                    class="text-5xl leading-tight font-semibold text-gray-400 mb-4 bg-clip-text text-transparent bg-gradient-to-tl from-fuchsia-500 to-blue-500">
                     Join the community
                 </h2>
             </header>
@@ -23,13 +25,12 @@
             </p>
         </section>
         <section class="flex flex-col w-full max-w-xl rounded-lg overflow-hidden">
-            <iframe
-                class="w-full h-64"
-                src="https://discord.com/widget?id=1044804142461362206&theme=dark"
-                allowtransparency="true"
-                frameborder="0"
-                sandbox="allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts"
-            />
+        <iframe class="w-full h-64"
+            :src="'https://discord.com/widget?id=1044804142461362206&theme=' + (isDark ? 'dark' : 'light')"
+            allowtransparency="true"
+            frameborder="0"
+            loading="lazy"
+            sandbox="allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts" />
         </section>
     </article>
 </template>