🎉 feat: lazy load image

Author: SaltyAom

components/midori/community.vue

@@ -29,6 +29,7 @@
                 allowtransparency="true"
                 frameborder="0"
                 sandbox="allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts"
+                loading="lazy"
             />
         </section>
     </article>

components/midori/index.vue

@@ -25,14 +25,20 @@ const isDark = useDark()
 
 <template>
     <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="true" />
+    <link
+        rel="preconnect"
+        href="https://fonts.gstatic.com"
+        crossorigin="true"
+    />
 
     <div id="landing" class="dark:bg-gray-900/60">
         <Hero />
         <article class="flex flex-col gap-4 px-6">
             <Fast />
             <Simple />
-            <section class="flex flex-col justify-center items-center gap-8 w-full mt-4 mb-16">
+            <section
+                class="flex flex-col justify-center items-center gap-8 w-full mt-4 mb-16"
+            >
                 <JustReturn>
                     <slot name="justreturn"></slot>
                 </JustReturn>
@@ -64,9 +70,14 @@ const isDark = useDark()
             <Sponsor />
             <hr class="border-gray-200 dark:border-gray-600" />
             <figure
-                class="max-w-6xl w-full mx-auto rounded-2xl overflow-hidden my-12 shadow-xl bg-gray-50 dark:bg-gray-800">
-                <img class="w-full object-cover object-center" src="/assets/feature-sheet.webp"
-                    alt="Elysia Feature Sheet" />
+                class="max-w-6xl w-full mx-auto rounded-2xl overflow-hidden my-12 shadow-xl bg-gray-50 dark:bg-gray-800"
+            >
+                <img
+                    class="w-full object-cover object-center"
+                    src="/assets/feature-sheet.webp"
+                    alt="Elysia Feature Sheet"
+                    loading="lazy"
+                />
             </figure>
             <QuickStart />
             <BuiltWithLove />
@@ -75,7 +86,7 @@ const isDark = useDark()
 </template>
 
 <style>
-#landing div[class*='language-']>pre>code {
+#landing div[class*='language-'] > pre > code {
     display: block;
     width: -moz-fit-content;
     width: fit-content;
@@ -87,16 +98,16 @@ const isDark = useDark()
     font-size: 16px;
 }
 
-#landing div[class*='language-']>pre {
+#landing div[class*='language-'] > pre {
     position: relative;
     z-index: 1;
     padding: 1em;
     background: transparent;
     overflow-x: auto;
 }
 
-#landing div[class*='language-']>span.lang,
-#landing div[class*='language-']>button {
+#landing div[class*='language-'] > span.lang,
+#landing div[class*='language-'] > button {
     display: none;
 }
 

components/midori/plugins.vue

@@ -5,7 +5,12 @@ const plugins = [
     ['tRPC', '/assets/trpc.webp', '/plugins/trpc'],
     ['Vite', '/assets/vite.svg', 'https://github.com/timnghg/elysia-vite'],
     ['JWT', '/assets/jwt.webp', '/plugins/jwt'],
-    ['Web Socket', '/assets/websocket.webp', '/patterns/websocket', '/assets/websocket-dark.webp'],
+    [
+        'Web Socket',
+        '/assets/websocket.webp',
+        '/patterns/websocket',
+        '/assets/websocket-dark.webp'
+    ],
     [
         'Clerk',
         '/assets/clerk.webp',
@@ -30,11 +35,14 @@ const isDark = useDark()
 </script>
 
 <template>
-    <article class="flex justify-between flex-col lg:flex-row items-center w-full max-w-6xl mx-auto my-8 gap-12">
+    <article
+        class="flex justify-between flex-col lg:flex-row 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-5xl md:text-6xl leading-tight font-bold bg-clip-text text-transparent bg-gradient-to-tr from-sky-400 to-fuchsia-400 mb-4">
+                    class="text-5xl md:text-6xl leading-tight font-bold bg-clip-text text-transparent bg-gradient-to-tr from-sky-400 to-fuchsia-400 mb-4"
+                >
                     It works with that
                 </h2>
             </header>
@@ -43,25 +51,43 @@ const isDark = useDark()
                 likely there is a plugin for what you want.
             </p>
             <p class="text-xl text-gray-400 w-full max-w-lg">
-                If the plugin you need is not there, it's easy to create one and share
-                it with the community.
+                If the plugin you need is not there, it's easy to create one and
+                share it with the community.
             </p>
             <div class="mt-8">
-                <a href="/plugins/overview"
-                    class="text-xl font-medium bg-blue-200/25 dark:bg-blue-500/25 text-blue-500 px-6 py-3 rounded-xl">
+                <a
+                    href="/plugins/overview"
+                    class="text-xl font-medium bg-blue-200/25 dark:bg-blue-500/25 text-blue-500 px-6 py-3 rounded-xl"
+                >
                     Explore plugins
                 </a>
             </div>
         </section>
         <section class="flex flex-col w-full max-w-xl">
-            <ol class="grid grid-cols-2 sm:grid-cols-3 gap-4 list-none w-full text-gray-500 dark:text-gray-400 text-lg">
-                <li v-for="[name, icon, href, darkIcon = ''] in plugins"
-                    class="aspect-square rounded-xl border dark:border-gray-700 bg-gradient-to-br from-white to-gray-50 dark:from-gray-700/75 dark:to-gray-800/75 text-xl transform transition-all ease-out duration-200 hover:shadow-lg focus:shadow-lg hover:-translate-y-1.5 focus:-translate-y-1.5">
-                    <a :href="href" :target="href.startsWith('http') ? '_blank' : ''"
-                        class="flex flex-col justify-center items-center gap-3 w-full h-full text-lg font-medium text-gray-600 dark:text-gray-400 overflow-hidden">
-                        <img :src="isDark && darkIcon ? darkIcon ?? icon : icon" :alt="name"
-                            class="absolute w-36 h-36 opacity-10 filter blur-lg" />
-                        <img :src="isDark && darkIcon ? darkIcon ?? icon : icon" :alt="name" class="h-14" />
+            <ol
+                class="grid grid-cols-2 sm:grid-cols-3 gap-4 list-none w-full text-gray-500 dark:text-gray-400 text-lg"
+            >
+                <li
+                    v-for="[name, icon, href, darkIcon = ''] in plugins"
+                    class="aspect-square rounded-xl border dark:border-gray-700 bg-gradient-to-br from-white to-gray-50 dark:from-gray-700/75 dark:to-gray-800/75 text-xl transform transition-all ease-out duration-200 hover:shadow-lg focus:shadow-lg hover:-translate-y-1.5 focus:-translate-y-1.5"
+                >
+                    <a
+                        :href="href"
+                        :target="href.startsWith('http') ? '_blank' : ''"
+                        class="flex flex-col justify-center items-center gap-3 w-full h-full text-lg font-medium text-gray-600 dark:text-gray-400 overflow-hidden"
+                    >
+                        <img
+                            :src="isDark && darkIcon ? darkIcon ?? icon : icon"
+                            :alt="name"
+                            loading="lazy"
+                            class="absolute w-36 h-36 opacity-10 filter blur-lg"
+                        />
+                        <img
+                            :src="isDark && darkIcon ? darkIcon ?? icon : icon"
+                            :alt="name"
+                            class="h-14"
+                            loading="lazy"
+                        />
                         {{ name }}
                     </a>
                 </li>

docs/blog/elysia-10.md

@@ -435,6 +435,7 @@ And finally, if you have problems with migration and additional questions relate
     allowtransparency="true"
     frameborder="0"
     sandbox="allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts"
+    loadin="lazy"
 />
 
 ## Notable Improvement