|
1 |
| -<script setup lang="ts"> |
2 |
| -import Prism from 'vue-prism-component' |
3 |
| -
|
4 |
| -const server = `// server.ts |
5 |
| -import { Elysia, t } from 'elysia' |
6 |
| -
|
7 |
| -const app = new Elysia() |
8 |
| - .patch( |
9 |
| - '/user/age', |
10 |
| - ({ body }) => signIn(body), |
11 |
| - { |
12 |
| - body: t.Object({ |
13 |
| - name: t.String(), |
14 |
| - age: t.Number() |
15 |
| - }) |
16 |
| - } |
17 |
| - ) |
18 |
| - .listen(80) |
19 |
| - |
20 |
| -export type App = typeof app` |
21 |
| -
|
22 |
| -const client = `// client.ts |
23 |
| -import { edenTreaty } from '@elysiajs/eden' |
24 |
| -import type { App } from 'server' |
25 |
| - |
26 |
| -const eden = edenTreaty<App>('http://localhost') |
27 |
| -
|
28 |
| -await eden.user.age.patch({ |
29 |
| - name: 'saltyaom', |
30 |
| - age: '21' |
31 |
| -})` |
32 |
| -</script> |
33 |
| - |
34 | 1 | <template>
|
35 |
| - <section |
36 |
| - class="flex flex-col justify-center items-center w-full max-w-6xl mx-auto py-4" |
37 |
| - > |
| 2 | + <section class="flex flex-col justify-center items-center w-full max-w-6xl mx-auto py-4"> |
38 | 3 | <!-- <h3 class="text-2xl mr-auto md:mx-auto font-medium text-gray-400">
|
39 | 4 | Introducing
|
40 | 5 | </h3> -->
|
41 | 6 | <h2
|
42 |
| - 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" |
43 |
| - > |
| 7 | + 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"> |
44 | 8 | End–to-End Type Safety
|
45 | 9 | </h2>
|
46 | 10 |
|
47 |
| - <p |
48 |
| - class="text-xl md:text-2xl leading-relaxed text-gray-400 text-left md:text-center w-full max-w-2xl" |
49 |
| - > |
| 11 | + <p class="text-xl md:text-2xl leading-relaxed text-gray-400 text-left md:text-center w-full max-w-2xl"> |
50 | 12 | Synchronize types across all applications.
|
51 | 13 | <br />
|
52 | 14 | Move fast and break nothing like tRPC.
|
53 | 15 | </p>
|
54 | 16 |
|
55 |
| - <a |
56 |
| - 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" |
57 |
| - href="/eden/overview" |
58 |
| - > |
| 17 | + <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" |
| 18 | + href="/eden/overview"> |
59 | 19 | See how it works
|
60 | 20 | </a>
|
61 | 21 |
|
62 | 22 | <section class="flex flex-col lg:flex-row gap-8 w-full max-w-5xl my-8">
|
63 |
| - <div class="w-full"> |
64 |
| - <Prism |
65 |
| - class="!text-base !font-mono rounded-xl" |
66 |
| - language="typescript" |
67 |
| - > |
68 |
| - {{ server }} |
69 |
| - </Prism> |
| 23 | + <div class="w-full !text-base !font-mono rounded-xl"> |
| 24 | + <slot name="server"></slot> |
70 | 25 | </div>
|
71 |
| - <div class="relative w-full"> |
72 |
| - <Prism |
73 |
| - class="!text-base !font-mono rounded-xl" |
74 |
| - language="typescript" |
75 |
| - > |
76 |
| - {{ client }} |
77 |
| - </Prism> |
78 |
| - <div |
79 |
| - class="absolute p-1 rounded bg-red-400/25" |
80 |
| - style=" |
81 |
| - top: 13.5em; |
82 |
| - left: 6.375em; |
83 |
| - width: 2.5em; |
| 26 | + <div class="relative w-full !text-base !font-mono rounded-xl"> |
| 27 | + <slot name="client"></slot> |
| 28 | + <div class="absolute p-1 rounded bg-red-400/25" style=" |
| 29 | + top: 13.2em; |
| 30 | + left: 5.9em; |
| 31 | + width: 2.2em; |
84 | 32 | height: 1.375em;
|
85 |
| - " |
86 |
| - /> |
87 |
| - <p |
88 |
| - class="absolute px-3 py-1.5 rounded bg-white dark:bg-gray-700 border dark:border-gray-600" |
89 |
| - style="top: 15.25em; left: 3.25em" |
90 |
| - > |
| 33 | + " /> |
| 34 | + <p class="absolute px-3 py-1.5 rounded bg-white dark:bg-gray-700 border dark:border-gray-600" |
| 35 | + style="top: 15.25em; left: 3.25em"> |
91 | 36 | Type 'string' is not assignable to type 'number'
|
92 | 37 | </p>
|
93 | 38 | </div>
|
|
0 commit comments