|
1 | 1 | <template> |
2 | | - <div |
3 | | - id="splash" |
4 | | - class="pointer-events-none absolute top-[-70vh] max-w-full flex justify-center w-full h-screen opacity-50" |
5 | | - > |
6 | | - <div :class="(isDark ? 'block gradient -dark' : 'block gradient -light')" /> |
| 2 | + <Ray class="h-screen -top-14 z-[100] pointer-events-none opacity-[0.35] dark:opacity-50" /> |
| 3 | + <div id="splash" |
| 4 | + class="pointer-events-none absolute top-[-70vh] max-w-full flex justify-center w-full h-screen opacity-50"> |
| 5 | + <div :class="isDark ? 'block gradient -dark' : 'block gradient -light'" /> |
7 | 6 | </div> |
8 | 7 | <header |
9 | 8 | class="relative flex flex-col justify-center items-center font-sans w-full px-6 pt-20 mb-16 md:mb-8 overflow-hidden" |
10 | | - style="min-height: calc(100vh - 64px)" |
11 | | - > |
| 9 | + style="min-height: calc(100vh - 64px)"> |
12 | 10 | <h1 |
13 | | - 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" |
14 | | - > |
| 11 | + 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"> |
15 | 12 | ElysiaJS |
16 | 13 | </h1> |
17 | 14 | <h2 |
18 | | - 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-8" |
19 | | - > |
20 | | - Ergonomic Framework for Humans<span |
21 | | - 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" |
22 | | - > |
| 15 | + 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"> |
| 16 | + Ergonomic Framework for Humans |
| 17 | + <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"> |
23 | 18 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"> |
24 | 19 | <rect width="256" height="256" fill="none" /> |
25 | 20 | <path |
26 | 21 | 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" |
27 | | - fill="currentcolor" |
28 | | - stroke="currentcolor" |
29 | | - stroke-linecap="round" |
30 | | - stroke-linejoin="round" |
31 | | - stroke-width="0" |
32 | | - /> |
33 | | - <line |
34 | | - x1="176" |
35 | | - y1="16" |
36 | | - x2="176" |
37 | | - y2="64" |
38 | | - fill="none" |
39 | | - stroke="currentcolor" |
40 | | - stroke-linecap="round" |
41 | | - stroke-linejoin="round" |
42 | | - stroke-width="16" |
43 | | - /> |
44 | | - <line |
45 | | - x1="200" |
46 | | - y1="40" |
47 | | - x2="152" |
48 | | - y2="40" |
49 | | - fill="none" |
50 | | - stroke="currentcolor" |
51 | | - stroke-linecap="round" |
52 | | - stroke-linejoin="round" |
53 | | - stroke-width="16" |
54 | | - /> |
55 | | - <line |
56 | | - x1="224" |
57 | | - y1="72" |
58 | | - x2="224" |
59 | | - y2="104" |
60 | | - fill="none" |
61 | | - stroke="currentcolor" |
62 | | - stroke-linecap="round" |
63 | | - stroke-linejoin="round" |
64 | | - stroke-width="16" |
65 | | - /> |
66 | | - <line |
67 | | - x1="240" |
68 | | - y1="88" |
69 | | - x2="208" |
70 | | - y2="88" |
71 | | - fill="none" |
72 | | - stroke="currentcolor" |
73 | | - stroke-linecap="round" |
74 | | - stroke-linejoin="round" |
75 | | - stroke-width="16" |
76 | | - /> |
| 22 | + fill="currentcolor" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" |
| 23 | + stroke-width="0" /> |
| 24 | + <line x1="176" y1="16" x2="176" y2="64" fill="none" stroke="currentcolor" stroke-linecap="round" |
| 25 | + stroke-linejoin="round" stroke-width="16" /> |
| 26 | + <line x1="200" y1="40" x2="152" y2="40" fill="none" stroke="currentcolor" stroke-linecap="round" |
| 27 | + stroke-linejoin="round" stroke-width="16" /> |
| 28 | + <line x1="224" y1="72" x2="224" y2="104" fill="none" stroke="currentcolor" stroke-linecap="round" |
| 29 | + stroke-linejoin="round" stroke-width="16" /> |
| 30 | + <line x1="240" y1="88" x2="208" y2="88" fill="none" stroke="currentcolor" stroke-linecap="round" |
| 31 | + stroke-linejoin="round" stroke-width="16" /> |
77 | 32 | </svg> |
78 | 33 | </span> |
79 | 34 | </h2> |
80 | 35 | <h3 |
81 | | - class="text-xl md:text-2xl leading-relaxed text-gray-400 text-left md:text-center w-full max-w-[49rem]" |
82 | | - > |
| 36 | + class="text-xl md:text-2xl leading-relaxed text-gray-500 dark:text-gray-400 !leading-normal text-left md:text-center w-full max-w-[49rem]"> |
83 | 37 | TypeScript framework supercharged by Bun with |
84 | 38 | <span |
85 | | - class="text-transparent font-semibold bg-clip-text bg-gradient-to-r from-indigo-400 to-purple-400" |
86 | | - >End-to-End Type Safety</span |
87 | | - >, unified type system and outstanding developer experience |
| 39 | + class="text-transparent font-semibold bg-clip-text bg-gradient-to-r from-indigo-400 to-purple-400">End-to-End |
| 40 | + Type Safety</span>, unified type system and outstanding developer experience |
88 | 41 | </h3> |
89 | | - <section |
90 | | - class="flex flex-col sm:flex-row items-start w-full md:w-auto gap-4 mt-10 mb-12" |
91 | | - > |
92 | | - <a |
93 | | - class="text-white font-medium text-lg bg-blue-500 px-6 py-2.5 rounded-full" |
94 | | - href="/introduction" |
95 | | - > |
| 42 | + <section class="flex flex-col sm:flex-row items-start sm:items-center w-full md:w-auto gap-4 mt-10 mb-12"> |
| 43 | + <a class="text-white font-medium text-lg bg-blue-500 px-6 py-2.5 rounded-full" href="/introduction"> |
96 | 44 | Get Started |
97 | 45 | </a> |
98 | | - <code |
99 | | - 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" |
100 | | - > |
101 | | - bun create elysia app |
102 | | - </code> |
| 46 | + <div class="relative flex flex-1 gap-3 text-blue-500"> |
| 47 | + <code |
| 48 | + 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"> |
| 49 | + bun create elysia app |
| 50 | + </code> |
| 51 | + <button |
| 52 | + 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" |
| 53 | + @click="copied = true"> |
| 54 | + <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" |
| 55 | + stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" |
| 56 | + class="feather feather-copy"> |
| 57 | + <rect x="9" y="9" width="13" height="13" rx="2" ry="2" /> |
| 58 | + <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" /> |
| 59 | + </svg> |
| 60 | + </button> |
| 61 | + <p v-if="copied" className="absolute -bottom-8 right-0">Copied</p> |
| 62 | + </div> |
103 | 63 | </section> |
104 | 64 | <p class="flex justify-center items-center gap-2 text-gray-400"> |
105 | 65 | See why developers love Elysia |
106 | | - <svg |
107 | | - xmlns="http://www.w3.org/2000/svg" |
108 | | - width="24" |
109 | | - height="24" |
110 | | - viewBox="0 0 24 24" |
111 | | - fill="none" |
112 | | - stroke="currentColor" |
113 | | - stroke-width="1.5" |
114 | | - stroke-linecap="round" |
115 | | - stroke-linejoin="round" |
116 | | - class="w-6 h-6 motion-safe:animate-bounce" |
117 | | - > |
| 66 | + <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" |
| 67 | + stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" |
| 68 | + class="w-6 h-6 motion-safe:animate-bounce"> |
118 | 69 | <line x1="12" y1="5" x2="12" y2="19"></line> |
119 | 70 | <polyline points="19 12 12 19 5 12"></polyline> |
120 | 71 | </svg> |
|
123 | 74 | </template> |
124 | 75 |
|
125 | 76 | <script setup lang="ts"> |
126 | | -import { onMounted, ref } from 'vue' |
| 77 | +import { onMounted, ref, watch } from 'vue' |
127 | 78 |
|
128 | | -const isDark = ref(false) |
129 | | -const safari = |
130 | | -onMounted(() => { |
131 | | - // @ts-ignore |
132 | | - isDark.value = document.documentElement.classList.contains('dark') |
| 79 | +import Ray from './ray.vue' |
133 | 80 |
|
134 | | - // @ts-ignore |
135 | | - const attrObserver = new MutationObserver((mutations) => { |
136 | | - mutations.forEach((mutation) => { |
137 | | - if (mutation.attributeName !== 'class') return |
| 81 | +const copied = ref(false) |
| 82 | +watch(copied, (value) => { |
| 83 | + if (value) { |
| 84 | + // @ts-ignore |
| 85 | + navigator.clipboard.writeText('bun create elysia app') |
138 | 86 |
|
139 | | - // @ts-ignore |
140 | | - isDark.value = document.documentElement.classList.contains('dark') |
141 | | - }) |
142 | | - }) |
143 | | -
|
144 | | - // @ts-ignore |
145 | | - attrObserver.observe(document.documentElement, { attributes: true }) |
146 | | -
|
147 | | - return () => { |
148 | | - attrObserver.disconnect() |
| 87 | + setTimeout(() => { |
| 88 | + copied.value = false |
| 89 | + }, 2000) |
149 | 90 | } |
150 | 91 | }) |
| 92 | +
|
| 93 | +import { useData } from 'vitepress' |
| 94 | +
|
| 95 | +const { isDark } = useData() |
151 | 96 | </script> |
0 commit comments