📘 doc: dark theme

Author: SaltyAom

components/midori/hero.vue

@@ -90,7 +90,7 @@ watch(copied, (value) => {
     }
 })
 
-import { useData } from 'vitepress'
+import useDark from './use-dark'
 
-const { isDark } = useData()
+const isDark = useDark()
 </script>

components/midori/index.vue

@@ -18,12 +18,11 @@ import 'prismjs/components/prism-typescript'
 import '../tailwind.css'
 import './midori.css'
 
-import { onMounted, ref } from 'vue'
-import { useData } from 'vitepress'
-
 import BuiltWithLove from './built-with-love.vue'
 
-const { isDark } = useData()
+import useDark from './use-dark'
+
+const isDark = useDark()
 </script>
 
 <template>

components/midori/plugins.vue

@@ -24,22 +24,17 @@ const plugins = [
     ]
 ] as const
 
-import { onMounted, ref } from 'vue'
-import { useData } from 'vitepress'
-
-const { isDark } = useData()
+import useDark from './use-dark'
 
+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>
@@ -52,32 +47,20 @@ const { isDark } = useData()
                 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"
-                        />
+            <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" />
                         {{ name }}
                     </a>

components/midori/ray.vue

@@ -1,6 +1,7 @@
 <!-- https://codepen.io/TWilson/pen/jOdWqbZ -->
 <template>
-    <div class="absolute flex flex-col w-full items-center justify-center bg-transparent transition-bg" :class="className">
+    <div class="absolute flex flex-col w-full !max-w-full items-center justify-center bg-transparent transition-bg overflow-hidden"
+        :class="className">
         <div class="jumbo absolute -inset-[10px] opacity-50" :class="{ '-safari': isSafari }" />
     </div>
 </template>
@@ -84,7 +85,14 @@ const props = defineProps<{
 
 const className = ref(props.class || 'h-screen')
 const isSafari = ref(
-    navigator.userAgent.indexOf('Safari') !== -1 &&
-    navigator.userAgent.indexOf('Chrome') === -1
+    typeof window !== "undefined" ?
+        navigator.userAgent.indexOf('Safari') !== -1 &&
+        navigator.userAgent.indexOf('Chrome') === -1 : false
 )
+
+onMounted(() => {
+    isSafari.value =
+        navigator.userAgent.indexOf('Safari') !== -1 &&
+        navigator.userAgent.indexOf('Chrome') === -1
+})
 </script>

components/midori/use-dark.ts

@@ -0,0 +1,31 @@
+import { onMounted, ref } from 'vue'
+
+export default function useDark() {
+    const isDark = ref(false)
+
+    onMounted(() => {
+        // @ts-ignore
+        isDark.value = document.documentElement.classList.contains('dark')
+
+        // @ts-ignore
+        const attrObserver = new MutationObserver((mutations) => {
+            // @ts-ignore
+            mutations.forEach((mutation) => {
+                if (mutation.attributeName !== 'class') return
+
+                isDark.value =
+                    // @ts-ignore
+                    document.documentElement.classList.contains('dark')
+            })
+        })
+
+        // @ts-ignore
+        attrObserver.observe(document.documentElement, { attributes: true })
+
+        return () => {
+            attrObserver.disconnect()
+        }
+    })
+
+    return isDark
+}

docs/.vitepress/theme/layout.vue

@@ -1,19 +1,21 @@
 <script setup lang="ts">
-import { useData } from 'vitepress'
 import DefaultTheme from 'vitepress/theme'
 import { nextTick, provide } from 'vue'
 
+import { useData } from 'vitepress'
+import useDark from '../../../components/midori/use-dark'
 import Ray from '../../../components/midori/ray.vue'
 
-const { isDark } = useData()
+const isDark = useDark()
+const { isDark: darkTheme } = useData()
 
 const enableTransitions = () =>
     'startViewTransition' in document &&
     window.matchMedia('(prefers-reduced-motion: no-preference)').matches
 
 provide('toggle-appearance', async ({ clientX: x, clientY: y }: MouseEvent) => {
     if (!enableTransitions()) {
-        isDark.value = !isDark.value
+        darkTheme.value = !darkTheme.value
         return
     }
 
@@ -27,7 +29,7 @@ provide('toggle-appearance', async ({ clientX: x, clientY: y }: MouseEvent) => {
 
     // @ts-ignore
     await document.startViewTransition(async () => {
-        isDark.value = !isDark.value
+        darkTheme.value = !darkTheme.value
         await nextTick()
     }).ready
 

docs/essential/life-cycle.md

@@ -54,7 +54,7 @@ Elysia does the following for every request:
 4. **Validation** (not interceptable)
     - Strictly validate incoming request provided by `Elysia.t`
 5. **Before Handle**
-    - Execute right before the route handler
+    - Custom validation before route handler
     - **If value is returned, route handler will be skipped**
     - Best for:
         - Providing custom requirements to access route, eg. user session, authorization.

docs/life-cycle/overview.md

@@ -15,32 +15,32 @@ Below are the request lifecycle available in Elysia:
 
 <Deck>
     <Card title="Request" href="request">
-        Hello World
+        Notify new event is received
     </Card>
     <Card title="Parse" href="parse">
-        Hello World
+        Parse body into <b>Context.body</b>
     </Card>
     <Card title="Transform" href="transform">
-        Hello World
+        Modify <b>Context</b> before validation
     </Card>
     <Card title="Before Handle" href="before-handle">
-        Hello World
+        Custom validation before route handler
     </Card>
     <Card title="After Handle" href="after-handle">
-        Hello World
+        Map returned value into a response
     </Card>
     <Card title="On Error" href="on-error">
-        Hello World
+        Capture error when thrown
     </Card>
     <Card title="On Response" href="on-response">
-        Hello World
+        Executed after response sent to the client
+    </Card>
+    <Card title="Trace" href="trace">
+        Audit and capture timespan of each event
     </Card>
 </Deck>
 
-Below are the additional life-cycle event available in Elysia:
-1. Trace
-2. Start
-3. Stop
+---
 
 Every life-cycle could be apply at both:
 1. Local Hook (route)

docs/life-cycle/parse.md

@@ -22,8 +22,66 @@ new Elysia()
     })
 ```
 
+The returned value will be assigned to Context.body. If not, Elysia will continue iterating through additional parser functions from **onParse** stack until either body is assigned or all parsers have been executed.
+
 ## Context
 `onParse` Context is extends from `Context` with additional properties of the following:
 - contentType: Content-Type header of the request
 
 All of the context is based on normal context and can be used like normal context in route handler.
+
+## Explicit Body
+
+By default, Elysia will try to determine body parsing function ahead of time and pick the most suitable function to speed up the process.
+
+Elysia is able to determine that body function by reading `body`.
+
+Take a look at this example:
+```ts
+app.post('/', ({ body }) => body, {
+    body: t.Object({
+        username: t.String(),
+        password: t.String()
+    })
+})
+```
+
+Elysia read the body schema and found that, the type is entirely an object, so it's likely that the body will be JSON. Elysia then picks the JSON body parser function ahead of time and tries to parse the body.
+
+Here's a criteria that Elysia uses to pick up type of body parser
+
+- `application/json`: body typed as `t.Object`
+- `multipart/form-data`: body typed as `t.Object`, and is 1 level deep with `t.File`
+- `application/x-www-form-urlencoded`: body typed as `t.URLEncoded`
+- `text/plain`: other primitive type
+
+This allows Elysia to optimize body parser ahead of time, and reduce overhead in compile time.
+
+## Explicit Content Type
+However, in some scenario if Elysia fails to pick the correct body parser function, we can explicitly tell Elysia to use a certain function by specifying `type`
+
+```ts
+app.post('/', ({ body }) => body, {
+    // Short form of application/json
+    type: 'json',
+})
+```
+
+Allowing us to control Elysia behavior for picking body parser function to fit our needs in a complex scenario.
+
+`type` may be one of the following:
+```ts
+type ContentType = |
+    // Shorthand for 'text/plain'
+    | 'text'
+    // Shorthand for 'application/json'
+    | 'json'
+    // Shorthand for 'multipart/form-data'
+    | 'formdata'
+    // Shorthand for 'application/x-www-form-urlencoded'\
+    | 'urlencoded'
+    | 'text/plain'
+    | 'application/json'
+    | 'multipart/form-data'
+    | 'application/x-www-form-urlencoded'
+```

docs/validation/schema-type.md

@@ -30,7 +30,7 @@ Elysia supports declarative schema with the following types:
 
 ---
 
-These properties should be used in route `hook` and `guard`, Elysia then will validate the request automatically:
+These properties should be provided as the third argument of the route handler to validate the incoming request.
 
 ```typescript
 import { Elysia, t } from 'elysia'

package.json

@@ -9,12 +9,15 @@
   "license": "MIT",
   "dependencies": {
     "@iconify/json": "^2.2.145",
+    "@tailwindcss/nesting": "0.0.0-insiders.565cd3e",
     "@tailwindcss/postcss7-compat": "^2.2.17",
     "autoprefixer": "^10.4.16",
     "daisyui": "^4.4.2",
     "elysia": "^0.7.29",
     "openai": "^4.19.1",
     "postcss": "^8.4.31",
+    "postcss-nesting": "^12.0.1",
+    "postcss-preset-env": "^9.3.0",
     "prismjs": "^1.29.0",
     "tailwindcss": "^3.3.5",
     "vite": "^5.0.2",