🎉 feat: stuff

Author: SaltyAom

bun.lock

@@ -20,8 +20,10 @@
         "@tailwindcss/vite": "^4.1.4",
         "dayjs": "^1.11.13",
         "elysia": "^1.3.0",
+        "medium-zoom": "^1.1.0",
         "shiki": "^3.2.2",
         "tailwindcss": "^4.1.4",
+        "vitepress-plugin-lightbox": "^1.0.2",
       },
       "devDependencies": {
         "@nolebase/markdown-it-unlazy-img": "^2.16.0",
@@ -1258,6 +1260,8 @@
 
     "media-typer": ["[email protected]", "", {}, "sha512-dq+qelQ9akHpcOl/gUVRTxVIOkAJ1wR3QAvb4RsVjS8oVoFjDGTc679wJYmUmknUF5HwMLOgb5O+a3KxfWapPQ=="],
 
+    "medium-zoom": ["[email protected]", "", {}, "sha512-ewyDsp7k4InCUp3jRmwHBRFGyjBimKps/AJLjRSox+2q/2H4p/PNpQf+pwONWlJiOudkBXtbdmVbFjqyybfTmQ=="],
+
     "merge-descriptors": ["[email protected]", "", {}, "sha512-gaNvAS7TZ897/rVaZ0nMtAyxNyi/pdbjbAwUpFQpN70GqnVfOiXpeUUMKRBmzXaSQ8DdTX4/0ms62r2K+hE6mQ=="],
 
     "merge2": ["[email protected]", "", {}, "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg=="],
@@ -1424,6 +1428,8 @@
 
     "perfect-debounce": ["[email protected]", "", {}, "sha512-xCy9V055GLEqoFaHoC1SoLIaLmWctgCUaBaWxDZ7/Zx4CTyX7cJQLJOok/orfjZAh9kEYpjJa4d0KcJmCbctZA=="],
 
+    "photoswipe": ["[email protected]", "", {}, "sha512-WNFHoKrkZNnvFFhbHL93WDkW3ifwVOXSW3w1UuZZelSmgXpIGiZSNlZJq37rR8YejqME2rHs9EhH9ZvlvFH2NA=="],
+
     "picocolors": ["[email protected]", "", {}, "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA=="],
 
     "picomatch": ["[email protected]", "", {}, "sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg=="],
@@ -1760,6 +1766,8 @@
 
     "vitepress-plugin-comment-with-giscus": ["[email protected]", "", { "dependencies": { "@giscus/vue": "^2.2.8" } }, "sha512-1DJjgN+7SYvn5ZkjuSXPmz7nlqfcrh4qCGGviiZghA2ELXnaO2m9WY7m+RisPSaqCn90xqe0JbO2T4NMq8iUBg=="],
 
+    "vitepress-plugin-lightbox": ["[email protected]", "", { "dependencies": { "medium-zoom": "^1.1.0", "photoswipe": "^5.4.4" } }, "sha512-CLgz6iWzhTH/Buk0y/SPRy0Ukh+X9QPD1HMAlpVcBPPpENlKwtxKUrAzqwxgh/vOz+6Q+Kw5nKfPH1yL78Rlag=="],
+
     "vitepress-plugin-llms": ["[email protected]", "", { "dependencies": { "byte-size": "^9.0.1", "gray-matter": "^4.0.3", "markdown-title": "^1.0.2", "millify": "^6.1.0", "minimatch": "^10.0.1", "picocolors": "^1.1.1", "remark": "^15.0.1", "remark-frontmatter": "^5.0.0", "tokenx": "^0.4.1", "unist-util-remove": "^4.0.0" } }, "sha512-nb7bG/lBDihlcFTzqxRxQIyzeBWQW9F6OwuUWQ7PFUNK5kVbybxXGISU4wvAV8osQmfrD9xNIGJQfuOLj5CzHg=="],
 
     "vm-browserify": ["[email protected]", "", {}, "sha512-2ham8XPWTONajOR0ohOKOHXkm3+gaBmGut3SRuu75xLd/RRaY6vqgh8NBYYk7+RW3u5AtzPQZG8F10LHkl0lAQ=="],

docs/.vitepress/config.ts

@@ -3,6 +3,8 @@ import { defineConfig } from 'vitepress'
 import { transformerTwoslash } from '@shikijs/vitepress-twoslash'
 import { createFileSystemTypesCache } from '@shikijs/vitepress-twoslash/cache-fs'
 
+import lightbox from "vitepress-plugin-lightbox"
+
 import tailwindcss from '@tailwindcss/vite'
 import llmstxt from 'vitepress-plugin-llms'
 import { analyzer } from 'vite-bundle-analyzer'
@@ -37,6 +39,7 @@ export default defineConfig({
 		],
 		config: (md) => {
 			md.use(InlineLinkPreviewElementTransform)
+			md.use(lightbox, {})
 			// md.use(UnlazyImages(), {
 			// 	imgElementTag: 'NolebaseUnlazyImg'
 			// })
@@ -131,7 +134,7 @@ export default defineConfig({
 			'meta',
 			{
 				property: 'og:image',
-				content: 'https://elysiajs.com/assets/cover.jpg'
+				content: 'https://elysiajs.com/assets/cover_2k.jpg'
 			}
 		],
 		[
@@ -159,7 +162,7 @@ export default defineConfig({
 			'meta',
 			{
 				property: 'twitter:image',
-				content: 'https://elysiajs.com/assets/cover.jpg'
+				content: 'https://elysiajs.com/assets/cover_2k.jpg'
 			}
 		],
 		[
@@ -435,6 +438,10 @@ export default defineConfig({
 						text: 'Nextjs',
 						link: '/integrations/nextjs'
 					},
+					{
+						text: 'Nuxt',
+						link: '/integrations/nuxt'
+					},
 					{
 						text: 'OpenAPI',
 						link: '/integrations/openapi'

docs/.vitepress/theme/layout.vue

@@ -1,7 +1,9 @@
 <script setup lang="ts">
-import { useData } from 'vitepress'
+import { nextTick, provide, onMounted } from 'vue'
+import { useData, useRouter } from 'vitepress'
 import DefaultTheme from 'vitepress/theme-without-fonts'
-import { nextTick, provide } from 'vue'
+
+import mediumZoom from 'medium-zoom'
 
 import useDark from '../../components/midori/use-dark'
 import Ray from '../../components/midori/ray.vue'
@@ -39,12 +41,42 @@ provide('toggle-appearance', async ({ clientX: x, clientY: y }: MouseEvent) => {
             await nextTick()
         }).ready
 })
+
+const setupMediumZoom = () => {
+    mediumZoom('[data-zoomable]', {
+        background: 'transparent'
+    })
+}
+
+onMounted(setupMediumZoom)
+
+const router = useRouter()
+
+router.onAfterRouteChange = () => {
+    setupMediumZoom()
+}
 </script>
 
 <template>
-    <link rel="preload" as="image" href="/assets/elysia_v.webp" fetchpriority="high">
-    <link rel="preload" as="image" href="/assets/elysia.svg" fetchpriority="high">
-    <link rel="preload" as="image" href="/assets/shigure-ui-smol.gif" fetchpriority="low">
+    <link
+        rel="preload"
+        as="image"
+        href="/assets/elysia_v.webp"
+        fetchpriority="high"
+    />
+    <link
+        rel="preload"
+        as="image"
+        href="/assets/elysia.svg"
+        fetchpriority="high"
+    />
+    <link
+        rel="preload"
+        as="image"
+        href="/assets/shigure-ui-smol.gif"
+        fetchpriority="low"
+    />
+    <meta name="theme-color" :content="isDark ? '#0f172a' : '#ffffff'" />
     <DefaultTheme.Layout>
         <template #doc-top>
             <Ray
@@ -91,8 +123,7 @@ provide('toggle-appearance', async ({ clientX: x, clientY: y }: MouseEvent) => {
 }
 
 ::view-transition-new(root) {
-    mask: url('/assets/shigure-ui-smol.gif')
-        center / 0 no-repeat;
+    mask: url('/assets/shigure-ui-smol.gif') center / 0 no-repeat;
     animation: var(--switch-name) var(--switch-duration);
 }
 
@@ -138,4 +169,13 @@ provide('toggle-appearance', async ({ clientX: x, clientY: y }: MouseEvent) => {
 .VPSwitchAppearance .check {
     transform: none !important;
 }
+
+.medium-zoom-overlay {
+    backdrop-filter: blur(1rem);
+}
+
+.medium-zoom-overlay,
+.medium-zoom-image--opened {
+    z-index: 999;
+}
 </style>

docs/components/fern/hero.vue

@@ -150,7 +150,8 @@
                     </code>
                     <button
                         id="hero-copy"
-                        class="hidden sm:inline-flex p-3 rounded-2xl active:rounded-full hover:bg-pink-200/25 focus:bg-pink-200/25 active:bg-pink-200/50 hover:dark:bg-pink-500/20 focus:dark:bg-pink-500/20 active:dark:bg-pink-500/20 transition-all"
+                        class="hidden sm:inline-flex p-3 rounded-xl active:rounded-4xl interact:bg-pink-200/25 active:bg-pink-200/50 interact:dark:bg-pink-500/20 active:dark:bg-pink-500/20 transition-all"
+                        :class="{ '!rounded-4xl': copied }"
                         @click="copied = true"
                     >
                         <svg
@@ -206,13 +207,13 @@
             </p>
         </div>
         <div
-            class="overflow-hidden flex-1 transition-all"
+            class="overflow-hidden flex-1 transition-all select-none pointer-events-none"
             :class="kawaii ? 'lg:flex max-w-4xl' : 'hidden'"
             style="max-height: calc(100vh - 64px)"
         >
             <img
                 src="/assets/elysia_chan.webp"
-                class="object-cover z-[40] select-none pointer-events-none"
+                class="object-cover z-[41] select-none pointer-events-none"
                 style="object-position: 50% 7.5%"
             />
         </div>
@@ -287,7 +288,7 @@ watch(copied, (value) => {
 
 #hero-get-started,
 #hero-copy {
-    @apply transform hover:scale-110 focus:scale-110;
+    @apply transform interact:scale-110;
     transition:
         all 0.35s cubic-bezier(0.68, -0.6, 0.32, 1.6),
         color 0.35s ease-out;

docs/eden/installation.md

@@ -19,9 +19,6 @@ Start by installing Eden on your frontend:
 ```bash
 bun add @elysiajs/eden
 bun add -d elysia
-
-# `@types/bun` must be installed even if you aren't using bun in the client
-bun add -d @types/bun
 ```
 
 ::: tip
@@ -176,7 +173,7 @@ app.listen(3000)
 ```
 
 ### Type Definitions
-Sometimes, if you are using a Bun specific feature like `Bun.file` or similar API, you may need to install Bun type definitions to the client as well.
+If you are using a Bun specific feature like `Bun.file` or similar API and return it from a handler, you may need to install Bun type definitions to the client as well.
 
 ```bash
 bun add -d @types/bun
@@ -185,6 +182,10 @@ bun add -d @types/bun
 ### Path alias (monorepo)
 If you are using path alias in your monorepo, make sure that frontend are able to resolve the path as same as backend.
 
+::: tip
+Setting up path alias in monorepo is a bit tricky, you can fork our example template: [Kozeki Template](https://github.com/SaltyAom/kozeki-template) and modify it to your needs.
+:::
+
 For example, if you have the following path alias for your backend in **tsconfig.json**:
 ```json
 {
@@ -265,4 +266,4 @@ import { a, b } from '@backend/controllers'
 
 We recommended creating a **single tsconfig.json** that define a `baseUrl` as the root of your repo, provide a path according to the module location, and create a **tsconfig.json** for each module that inherits the root **tsconfig.json** which has the path alias.
 
-You may find a working example of in this [path alias example repo](https://github.com/SaltyAom/elysia-monorepo-path-alias).
+You may find a working example of in this [path alias example repo](https://github.com/SaltyAom/elysia-monorepo-path-alias) or [Kozeki Template](https://github.com/SaltyAom/kozeki-template)

docs/essential/handler.md

@@ -191,8 +191,8 @@ new Elysia()
 	.listen(3000)
 ```
 
-### status
-A dedicated `error` function for returning status code with response.
+### status function
+A dedicated `status` function for returning status code with response.
 
 ```typescript
 import { Elysia } from 'elysia'

docs/essential/plugin.md

@@ -273,9 +273,9 @@ If the provided value is class, Elysia will then try to use the `.toString` meth
 :::
 
 ### Service Locator
-When you apply multiple state and decorators plugin to an instance, the instance will gain type safety.
+When you apply a plugin with state/decorators to an instance, the instance will gain type safety.
 
-However, you may notice that when you are trying to use the decorated value in another instance without decorator, the type is missing.
+But if you don't apply the plugin to another instance, it will not be able to infer the type.
 
 ```typescript twoslash
 // @errors: 2339
@@ -290,13 +290,11 @@ const main = new Elysia()
     .use(child)
 ```
 
-This is a TypeScript limitation; Elysia can only refer to the current instance.
-
 Elysia introduces the **Service Locator** pattern to counteract this.
 
-To put it simply, Elysia will lookup the plugin checksum and get the value or register a new one. Infer the type from the plugin.
+Elysia will lookup the plugin checksum and get the value or register a new one. Infer the type from the plugin.
 
-Simply put, we need to provide the plugin reference for Elysia to find the service.
+So we have to provide the plugin reference for Elysia to find the service to add type safety.
 
 ```typescript twoslash
 // @errors: 2339