Merge branch 'main' into elysia-env-plugins

Author: SaltyAom

components/midori/hero.vue

@@ -1,59 +1,143 @@
 <template>
-    <Ray class="h-[60vh] -top-16 pointer-events-none opacity-[.35] dark:opacity-50" />
-    <div id="splash"
-        class="pointer-events-none absolute top-[-70vh] max-w-full justify-center w-full h-screen opacity-25 block gradient">
-    </div>
-    <header class="relative flex flex-col justify-center items-center w-full px-6 pt-20 mb-16 md:mb-8 overflow-hidden"
-        style="min-height: calc(100vh - 64px)">
-        <h1
-            class="text-3xl leading-relaxed font-semibold text-center text-transparent mr-auto md:mx-auto bg-clip-text bg-gradient-to-r from-indigo-400 to-purple-400">
+    <link rel="preload" as="image" href="/assets/elysia_v.webp" />
+    <Ray
+        class="h-[60vh] -top-16 pointer-events-none opacity-[.35] dark:opacity-50"
+    />
+    <div
+        id="splash"
+        class="pointer-events-none absolute top-[-70vh] max-w-full justify-center w-full h-screen opacity-25 block gradient"
+    ></div>
+    <header
+        class="relative flex flex-col justify-center items-center w-full px-6 pt-6 md:pt-0 mb-16 md:mb-8 overflow-hidden"
+        style="min-height: calc(100vh - 64px)"
+    >
+        <!-- <h1
+            class="text-3xl leading-relaxed font-semibold text-center text-transparent mr-auto md:mx-auto bg-clip-text bg-gradient-to-r from-indigo-400 to-purple-400"
+        >
             ElysiaJS
-        </h1>
+        </h1> -->
+        <img
+            src="/assets/elysia_v.webp"
+            alt="Curved text logo saying 'Elysia JS'"
+            class="max-w-[40ch] w-full object-contain object-left md:object-center mr-auto md:mr-0"
+            style="aspect-ratio: 1.5 / 1"
+        />
         <h2
-            class="relative text-5xl md:text-6xl md:leading-tight font-bold md:text-center leading-tight text-transparent bg-clip-text bg-gradient-to-r from-sky-300 to-indigo-400 mt-2 mb-6">
+            class="relative text-5xl md:text-6xl md:leading-tight font-bold md:text-center leading-tight text-transparent bg-clip-text bg-gradient-to-r from-sky-300 to-indigo-400 mb-6"
+        >
             Ergonomic Framework for Humans
-            <span class="absolute w-10 md:w-12 h-10 md:h-12 bottom-0 mb-4 ml-2 md:ml-0 md:mb-10 text-indigo-400">
+            <span
+                class="absolute w-10 md:w-12 h-10 md:h-12 bottom-0 mb-4 ml-2 md:ml-0 md:mb-10 text-indigo-400"
+            >
                 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256">
                     <rect width="256" height="256" fill="none" />
                     <path
                         d="M138.7,175.5l-19.2,52.1a8,8,0,0,1-15,0L85.3,175.5a8.1,8.1,0,0,0-4.8-4.8L28.4,151.5a8,8,0,0,1,0-15l52.1-19.2a8.1,8.1,0,0,0,4.8-4.8l19.2-52.1a8,8,0,0,1,15,0l19.2,52.1a8.1,8.1,0,0,0,4.8,4.8l52.1,19.2a8,8,0,0,1,0,15l-52.1,19.2A8.1,8.1,0,0,0,138.7,175.5Z"
-                        fill="currentcolor" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round"
-                        stroke-width="0" />
-                    <line x1="176" y1="16" x2="176" y2="64" fill="none" stroke="currentcolor" stroke-linecap="round"
-                        stroke-linejoin="round" stroke-width="16" />
-                    <line x1="200" y1="40" x2="152" y2="40" fill="none" stroke="currentcolor" stroke-linecap="round"
-                        stroke-linejoin="round" stroke-width="16" />
-                    <line x1="224" y1="72" x2="224" y2="104" fill="none" stroke="currentcolor" stroke-linecap="round"
-                        stroke-linejoin="round" stroke-width="16" />
-                    <line x1="240" y1="88" x2="208" y2="88" fill="none" stroke="currentcolor" stroke-linecap="round"
-                        stroke-linejoin="round" stroke-width="16" />
+                        fill="currentcolor"
+                        stroke="currentcolor"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        stroke-width="0"
+                    />
+                    <line
+                        x1="176"
+                        y1="16"
+                        x2="176"
+                        y2="64"
+                        fill="none"
+                        stroke="currentcolor"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        stroke-width="16"
+                    />
+                    <line
+                        x1="200"
+                        y1="40"
+                        x2="152"
+                        y2="40"
+                        fill="none"
+                        stroke="currentcolor"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        stroke-width="16"
+                    />
+                    <line
+                        x1="224"
+                        y1="72"
+                        x2="224"
+                        y2="104"
+                        fill="none"
+                        stroke="currentcolor"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        stroke-width="16"
+                    />
+                    <line
+                        x1="240"
+                        y1="88"
+                        x2="208"
+                        y2="88"
+                        fill="none"
+                        stroke="currentcolor"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        stroke-width="16"
+                    />
                 </svg>
             </span>
         </h2>
         <h3
-            class="text-xl md:text-2xl text-gray-500 dark:text-gray-400 !leading-normal text-left md:text-center w-full max-w-[49rem]">
+            class="text-xl md:text-2xl text-gray-500 dark:text-gray-400 !leading-normal text-left md:text-center w-full max-w-[49rem]"
+        >
             TypeScript with
             <span
-                class="text-transparent font-semibold bg-clip-text bg-gradient-to-r from-indigo-400 to-purple-400">End-to-End
-                Type Safety</span>, unified type system and outstanding developer experience. Supercharged by Bun.
+                class="text-transparent font-semibold bg-clip-text bg-gradient-to-r from-indigo-400 to-purple-400"
+                >End-to-End Type Safety</span
+            >, unified type system and outstanding developer experience.
+            Supercharged by Bun.
         </h3>
-        <section class="flex flex-col sm:flex-row items-start sm:items-center w-full md:w-auto gap-4 mt-10 mb-12">
-            <a class="text-white font-medium text-lg bg-blue-500 px-6 py-2.5 rounded-full" href="/at-glance">
+        <section
+            class="flex flex-col sm:flex-row items-start sm:items-center w-full md:w-auto gap-4 mt-10 mb-12"
+        >
+            <a
+                class="text-white font-medium text-lg bg-blue-500 px-6 py-2.5 rounded-full"
+                href="/at-glance"
+            >
                 Get Started
             </a>
             <div class="relative flex flex-1 gap-3 text-blue-500">
                 <code
-                    class="text-blue-500 font-mono font-medium text-lg bg-blue-200/25 dark:bg-blue-500/20 px-6 py-2.5 rounded-full">
-                                bun create elysia app
-                            </code>
+                    class="text-blue-500 font-mono font-medium text-lg bg-blue-200/25 dark:bg-blue-500/20 px-6 py-2.5 rounded-full"
+                >
+                    bun create elysia app
+                </code>
                 <button
-                    class="p-3 rounded-2xl active:rounded-full hover:bg-blue-200/25 focus:bg-blue-200/25 active:bg-blue-200/50 hover:dark:bg-blue-500/20 focus:dark:bg-blue-500/20 active:dark:bg-blue-500/20 transition-all"
-                    @click="copied = true">
-                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
-                        stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
-                        class="feather feather-copy">
-                        <rect x="9" y="9" width="13" height="13" rx="2" ry="2" />
-                        <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
+                    class="hidden sm:inline-flex p-3 rounded-2xl active:rounded-full hover:bg-blue-200/25 focus:bg-blue-200/25 active:bg-blue-200/50 hover:dark:bg-blue-500/20 focus:dark:bg-blue-500/20 active:dark:bg-blue-500/20 transition-all"
+                    @click="copied = true"
+                >
+                    <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        width="24"
+                        height="24"
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-width="2"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        class="feather feather-copy"
+                    >
+                        <rect
+                            x="9"
+                            y="9"
+                            width="13"
+                            height="13"
+                            rx="2"
+                            ry="2"
+                        />
+                        <path
+                            d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"
+                        />
                     </svg>
                 </button>
                 <p v-if="copied" className="absolute -bottom-8 right-0">
@@ -63,9 +147,18 @@
         </section>
         <p class="flex justify-center items-center gap-2 text-gray-400">
             See why developers love Elysia
-            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
-                stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
-                class="w-6 h-6 motion-safe:animate-bounce">
+            <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="24"
+                height="24"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="1.5"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                class="w-6 h-6 motion-safe:animate-bounce"
+            >
                 <line x1="12" y1="5" x2="12" y2="19"></line>
                 <polyline points="19 12 12 19 5 12"></polyline>
             </svg>

docs/.vitepress/theme/custom.css

@@ -27,6 +27,7 @@ html, body {
     --vp-custom-block-tip-border: #dcfce7;
     --vp-custom-block-tip-text: #15803d;
     --vp-c-brand-nav-active: color-mix(in srgb, var(--vp-c-brand-light) 15%, transparent 100%);
+    --vp-nav-logo-height: 28px;
 }
 
 .dark {
@@ -63,6 +64,14 @@ button.copy::after {
     border: 0;
 }
 
+/* .VPNavBarTitle > a > span {
+    @apply hidden;
+}
+
+.logo {
+    @apply hidden;
+} */
+
 #embedded-editor {
     @apply my-6 h-[720px] w-full rounded-lg border-0;
 }

docs/.vitepress/theme/header.vue

@@ -0,0 +1,7 @@
+<template>
+    <!-- <img
+        src="/assets/elysia_v.webp"
+        alt="Curved text logo saying 'Elysia JS'"
+        class="h-[64px]"
+    /> -->
+</template>

docs/.vitepress/theme/index.ts

@@ -1,6 +1,9 @@
 // https://vitepress.dev/guide/custom-theme
+import { h } from 'vue'
 import DefaultTheme from 'vitepress/theme'
+
 import Layout from './layout.vue'
+import Header from './header.vue'
 
 import TwoslashFloatingVue from '@shikijs/vitepress-twoslash/client'
 import '@shikijs/vitepress-twoslash/style.css'
@@ -12,7 +15,11 @@ import type { Theme } from 'vitepress'
 
 export default {
     extends: DefaultTheme,
-    Layout,
+    Layout() {
+        return h(DefaultTheme.Layout, null, {
+            'nav-bar-title-after': () => h(Header)
+        })
+    },
     enhanceApp({ app }: EnhanceAppContext) {
         app.use(TwoslashFloatingVue)
     }

docs/eden/overview.md

@@ -104,7 +104,7 @@ app.
 const { data } = await app.index.get()
 
 // Call [POST] at '/nendoroid/:id'
-const { data: nendoroid, error } = await app.nendoroid({ id: 1895 }).put({
+const { data: nendoroid, error } = await app.nendoroid({ id: 1895 }).post({
     name: 'Skadi',
     from: 'Arknights'
 })

docs/eden/treaty/response.md

@@ -17,7 +17,7 @@ head:
 # Response
 Once fetch method is called, Eden Treaty return an Promise with object as follows:
 - data - returned value of the response (2xx)
-- error - returnd value from the response (>= 3xx)
+- error - returned value from the response (>= 3xx)
 - response `Response` - Web Standard Response class
 - status `number` - HTTP status code
 - headers `FetchRequestInit['headers']` - response's headers
@@ -73,4 +73,4 @@ By default, Elysia will infers error and response type to TypeScript automatical
 If server response with HTTP status >= 300, then value will be always be null, and error will have a returned value instead.
 
 Otherwise, response will be passed to data.
-:::
+:::

docs/essential/life-cycle.md

@@ -16,15 +16,15 @@ head:
 
 # Life Cycle
 
-Also knows as middleware with name in Express or Hook in Fastify.
+Also known as middleware with name in Express or Hook in Fastify.
 
 Imagine we want to return a text of HTML.
 
 We need to set **"Content-Type"** headers as **"text/html"** to for browser to render HTML.
 
-Explicitly specify that response is HTML could be repetitive if there are a lot of handlers, says ~200 endpoints.
+Explicitly specifying that response is HTML could be repetitive if there are a lot of handlers, says ~200 endpoints.
 
-We can see a duplicated code for just to specify that response is HTML.
+We can see a duplicated code for just specifying that response is HTML.
 
 But what if after we sent a response, we could detect if a response is an HTML string then append headers automatically?
 
@@ -46,7 +46,7 @@ Most of the events you are going to use are highlighted in the blue area but to
 Elysia does the following for every request:
 
 1. **Request**
-    - Notify new event is received, providing only the most minimal context to reduce overhead
+    - Notify when a new event is received, providing only the most minimal context to reduce overhead
     - Best for:
         - Caching
         - Analytics
@@ -87,15 +87,15 @@ These events are designed to help you decouple code into smaller reusable pieces
 
 ## Hook
 
-We refer to each function that intercepts the life cycle event as **"hook"**, as the function hook into the lifecycle event.
+We refer to each function that intercepts the life cycle event as **"hook"**, as the function hooks into the lifecycle event.
 
 Hooks can be categorized into 2 types:
 
 1. Local Hook: Execute on a specific route
 2. Interceptor Hook: Execute on every route
 
 ::: tip
-The hook will accept the same Context as a handler, you can imagine you adding a route handler but at a specific point.
+The hook will accept the same Context as a handler, you can imagine adding a route handler but at a specific point.
 :::
 
 ## Local Hook
@@ -187,4 +187,4 @@ Console should log as the following:
 1
 2
 3
-```
+```

docs/essential/route.md

@@ -19,26 +19,23 @@ import Playground from '../../components/nearl/playground.vue'
 import { Elysia } from 'elysia'
 
 const demo1 = new Elysia()
-    .get('/', () => 'hello')
-    .post('/hi', () => 'hi')
+    .get('/', () => 'Landing')
+    .get('/hello', () => 'Hi')
 
 const demo2 = new Elysia()
     .get('/', () => 'hello')
-    .post('/hi', () => 'world')
+    .post('/hi', () => 'hi')
 
 const demo3 = new Elysia()
     .get('/get', () => 'hello')
     .post('/post', () => 'hi')
     .route('M-SEARCH', '/m-search', () => 'connect') 
 
 const demo4 = new Elysia()
-    .get('/', () => 'hello')
-    .post('/', () => 'hello')
-    .delete('/', () => 'hello')
+    .all('/', () => 'hi')
 
 const demo5 = new Elysia()
     .get('/', () => 'hello')
-    .post('/', () => 'hello')
     .get('/hi', ({ error }) => error(404))
 </script>
 
@@ -52,8 +49,8 @@ We can define a route by calling a **method named after HTTP verbs**, passing a
 import { Elysia } from 'elysia'
 
 new Elysia()
-    .get('/', () => 'Landing')
-    .get('/hello', () => 'Hi')
+    .get('/', () => 'hello')
+    .get('/hi', () => 'hi')
     .listen(3000)
 ```