🎉 feat: update lifecycle image

Author: SaltyAom

docs/.vitepress/theme/layout.vue

@@ -171,7 +171,11 @@ router.onAfterRouteChange = () => {
 }
 
 .medium-zoom-overlay {
-    backdrop-filter: blur(1rem);
+    backdrop-filter: blur(2.5rem) brightness(1.1);
+}
+
+html.dark .medium-zoom-overlay {
+    backdrop-filter: blur(2.5rem) brightness(0.85);
 }
 
 .medium-zoom-overlay,

docs/essential/life-cycle.md

@@ -40,7 +40,8 @@ const demo = new Elysia()
 Life Cycle allows us to intercept an important event at the predefined point allowing us to customize the behavior of our server as needed.
 
 Elysia's Life Cycle event can be illustrated as the following.
-![Elysia Life Cycle Graph](/assets/lifecycle.webp)
+![Elysia Life Cycle Graph](/assets/lifecycle-chart.svg)
+> Click on image to enlarge
 
 Below are the request life cycle available in Elysia:
 

docs/patterns/trace.md

@@ -48,7 +48,7 @@ const app = new Elysia()
 
 Please refer to [Life Cycle Events](/essential/life-cycle#events) for more information:
 
-![Elysia Life Cycle](/assets/lifecycle.webp)
+![Elysia Life Cycle](/assets/lifecycle-chart.svg)
 
 ## Children
 Every events except `handle` have a children, which is an array of events that are executed inside for each life-cycle event.

docs/patterns/type.md

@@ -59,7 +59,7 @@ This code tells Elysia to validate an incoming HTTP body, ensuring that the body
 
 If the shape doesn't match, it will throw an error into the [Error Life Cycle](/essential/life-cycle.html#on-error).
 
-![Elysia Life Cycle](/assets/lifecycle.webp)
+![Elysia Life Cycle](/assets/lifecycle-chart.svg)
 
 ### Basic Type
 

docs/public/assets/cover_2k.jpg

@@ -509,7 +509,6 @@ button.copy::after {
 	@apply dark:!border-slate-700;
 }
 
-
 .VPLink.link.pager-link {
 	@apply dark:bg-slate-800 dark:border-transparent;
 }