🎉 feat: glassy search bar

Author: SaltyAom

docs/.vitepress/config.ts

@@ -478,7 +478,7 @@ export default defineConfig({
 			}
 		],
 		outline: {
-			level: [2, 3],
+			level: 2,
 			label: 'Outline'
 		},
 		socialLinks: [

docs/components/fern/animate.ts

@@ -15,7 +15,7 @@ export function useFlyIn(isInView: Ref<boolean>) {
         },
         transition: {
             ease: easeOutExpo,
-            duration: 2,
+            duration: 1.6,
             delay
         }
     }))
@@ -32,7 +32,7 @@ export function useFadeIn(isInView: Ref<boolean>) {
         },
         transition: {
             ease: easeOutExpo,
-            duration: 2,
+            duration: 1.6,
             delay
         }
     }))
@@ -50,7 +50,7 @@ export function useExpandWidth(isInView: Ref<boolean>) {
         },
         transition: {
             ease: easeOutExpo,
-            duration: 2,
+            duration: 1.6,
             delay
         }
     }))

docs/components/fern/compare.vue

@@ -19,7 +19,7 @@
 @reference "../../tailwind.css";
 
 .code-compare {
-	@apply z-40 grid grid-cols-1 lg:grid-cols-2 gap-2.5 bg-white dark:bg-slate-800 rounded-xl w-full;
+	@apply z-40 grid grid-cols-1 lg:grid-cols-2 gap-2.5 rounded-xl w-full;
 	grid-auto-rows: 1fr;
 
 	& > article {

docs/essential/life-cycle.md

@@ -351,14 +351,36 @@ type ContentType = |
     | 'json'
     // Shorthand for 'multipart/form-data'
     | 'formdata'
-    // Shorthand for 'application/x-www-form-urlencoded'\
+    // Shorthand for 'application/x-www-form-urlencoded'
     | 'urlencoded'
+    // Skip body parsing entirely
+    | 'none'
     | 'text/plain'
     | 'application/json'
     | 'multipart/form-data'
     | 'application/x-www-form-urlencoded'
 ```
 
+### Skip Body Parsing
+When you need to integrate a third-party library with HTTP handler like `trpc`, `orpc`, and it throw `Body is already used`.
+
+This is because Web Standard Request can be parsed only once.
+
+Both Elysia and the third-party library both has its own body parser, so you can skip body parsing on Elysia side by specifying `parse: 'none'`
+
+```typescript
+import { Elysia } from 'elysia'
+
+new Elysia()
+	.post(
+		'/',
+		({ request }) => library.handle(request),
+		{
+			parse: 'none'
+		}
+	)
+```
+
 ### Custom Parser
 
 You can provide register a custom parser with `parser`:

docs/tailwind.css

@@ -697,3 +697,64 @@ button.copy::after {
 #VPSidebarNav {
 	@apply flex flex-col min-h-full;
 }
+
+.VPLocalSearchBox {
+	& > .backdrop {
+		@apply !bg-black/7.5;
+		animation: fade-in 0.4s cubic-bezier(0.16, 1, 0.3, 1);
+	}
+
+	& > .shell {
+		@apply md:max-w-2xl !bg-white md:!bg-white/75 dark:!bg-gray-800 md:dark:!bg-gray-800/75 md:backdrop-blur-md md:!rounded-2xl md:border dark:border-gray-600 md:shadow-xl shadow-black/5;
+		animation: search-in 0.4s cubic-bezier(0.16, 1, 0.3, 1);
+
+		& > .search-bar {
+			@apply !rounded-xl bg-gray-200/40 dark:bg-gray-500/30 !border-gray-200/85 dark:!border-gray-500/30;
+		}
+
+		& > .results > li > a {
+			@apply !rounded-xl;
+		}
+
+		& > .search-keyboard-shortcuts {
+			& > span > kbd {
+				@apply rounded-lg dark:!bg-gray-700;
+			}
+		}
+	}
+}
+
+@keyframes search-in {
+	from {
+		opacity: 0;
+		transform: translateY(1.25rem);
+	}
+
+	to {
+		opacity: 1;
+		transform: translateY(0);
+	}
+}
+
+@keyframes fade-in {
+	from {
+		opacity: 0;
+	}
+
+	to {
+		opacity: 1;
+	}
+}
+
+.excerpt-wrapper {
+	& > .excerpt-gradient-bottom,
+	& > .excerpt-gradient-top {
+		@apply hidden;
+	}
+
+	& > .excerpt {
+		& > .vp-doc {
+			@apply !bg-transparent;
+		}
+	}
+}