📘 feat: rewrite e2e type-safety block

Author: kravetsone

components/midori/e2e-type-safety.vue

@@ -32,50 +32,33 @@ await eden.user.age.patch({
 </script>
 
 <template>
-    <section
-        class="flex flex-col justify-center items-center w-full max-w-6xl mx-auto py-4"
-    >
+    <section class="flex flex-col justify-center items-center w-full max-w-6xl mx-auto py-4">
         <!-- <h3 class="text-2xl mr-auto md:mx-auto font-medium text-gray-400">
             Introducing
         </h3> -->
         <h2
-            class="text-5xl md:text-6xl font-bold !leading-tight text-transparent bg-clip-text bg-gradient-to-r from-sky-300 to-indigo-400 mb-6 mr-auto md:mx-auto"
-        >
+            class="text-5xl md:text-6xl font-bold !leading-tight text-transparent bg-clip-text bg-gradient-to-r from-sky-300 to-indigo-400 mb-6 mr-auto md:mx-auto">
             End–to-End Type Safety
         </h2>
 
-        <p
-            class="text-xl md:text-2xl leading-relaxed text-gray-400 text-left md:text-center w-full max-w-2xl"
-        >
+        <p class="text-xl md:text-2xl leading-relaxed text-gray-400 text-left md:text-center w-full max-w-2xl">
             Synchronize types across all applications.
             <br />
             Move fast and break nothing like tRPC.
         </p>
 
-        <a
-            class="text-lg font-medium bg-blue-50 text-blue-500 dark:text-blue-400 dark:bg-blue-500/20 mr-auto md:mx-auto px-4 py-2 rounded-xl mt-6"
-            href="/eden/overview"
-        >
+        <a class="text-lg font-medium bg-blue-50 text-blue-500 dark:text-blue-400 dark:bg-blue-500/20 mr-auto md:mx-auto px-4 py-2 rounded-xl mt-6"
+            href="/eden/overview">
             See how it works
         </a>
 
         <section class="flex flex-col lg:flex-row gap-8 w-full max-w-5xl my-8">
-            <div class="w-full">
-                <Prism
-                    class="!text-base !font-mono rounded-xl"
-                    language="typescript"
-                >
-                    {{ server }}
-                </Prism>
+            <div class="w-full !text-base !font-mono rounded-xl">
+                <slot name="server">test</slot>
             </div>
-            <div class="relative w-full">
-                <Prism
-                    class="!text-base !font-mono rounded-xl"
-                    language="typescript"
-                >
-                    {{ client }}
-                </Prism>
-                <div
+            <div class="relative w-full !text-base !font-mono rounded-xl">
+                <slot name="client"></slot>
+                <!-- <div
                     class="absolute p-1 rounded bg-red-400/25"
                     style="
                         top: 13.5em;
@@ -89,7 +72,7 @@ await eden.user.age.patch({
                     style="top: 15.25em; left: 3.25em"
                 >
                     Type 'string' is not assignable to type 'number'
-                </p>
+                </p> -->
             </div>
         </section>
     </section>

components/midori/index.vue

@@ -59,7 +59,14 @@ const isDark = useDark()
                     <slot name="openapi"></slot>
                 </OpenAPI>
             </section>
-            <E2ETypeSafety />
+            <E2ETypeSafety>
+                <template v-slot:server>
+                    <slot name="server"></slot>
+                </template>
+                <template v-slot:client>
+                    <slot name="client"></slot>
+                </template>
+            </E2ETypeSafety>
             <Plugins />
             <Editor />
             <Community />

docs/index.md

@@ -71,5 +71,46 @@ new Elysia()
     .listen(3000)
 ```
   </template>
+
+<template v-slot:server>
+
+```ts
+// server.ts
+import { Elysia, t } from 'elysia'
+
+const app = new Elysia()
+    .patch(
+        '/user/age',
+        ({ body }) => signIn(body), 
+        {
+            body: t.Object({
+                name: t.String(),
+                age: t.Number()
+            })
+        }
+    )
+    .listen(80)
+    
+export type App = typeof app
+```
+  </template>
+
+  <template v-slot:client>
+
+```ts
+// client.ts
+import { edenTreaty } from '@elysiajs/eden'
+import type { App } from 'server'
+    
+const eden = edenTreaty<App>('http://localhost')
+
+await eden.user.age.patch({
+    name: 'saltyaom',
+    age: '21'
+})
+```
+  </template>
+
+
 </Landing>
 ```