Skip to content

Commit 37b66ab

Browse files
SaltyAomSaltyAom
committed
📘 doc: ray
1 parent 13a1da0 commit 37b66ab

File tree

6 files changed

+121
-56
lines changed

6 files changed

+121
-56
lines changed

‎components/blog/Landing.vue

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,22 @@
11
<template>
2-
<Ray class="h-[40vh] -top-20 left-0 z-[100] opacity-30 dark:opacity-[.55] pointer-events-none" static />
2+
<Ray class="h-[30vh] -top-16 -inset-0 left-0 opacity-30 dark:opacity-[.55] pointer-events-none" />
33
<header class="flex flex-col justify-center items-center max-w-3xl gap-3 w-full mx-auto pt-20 pb-4">
4-
<h1 class="text-2xl md:text-3xl text-gray-700 dark:text-gray-100 font-semibold">
4+
<h1 class="text-2xl md:text-3xl text-slate-700 dark:text-slate-100 font-semibold">
55
Latest Updates
66
</h1>
7-
<p class="text-gray-500 dark:text-gray-300 text-lg">
7+
<p class="text-slate-500 dark:text-slate-300 text-lg">
88
Update of ElysiaJS from core maintainers
99
</p>
1010
</header>
1111
<main class="flex flex-col max-w-xl gap-4 w-full mx-auto my-8">
1212
<a v-for="blog in props.blogs"
13-
class="px-4 py-2 rounded-lg hover:bg-gray-50 focus:bg-gray-50 dark:hover:bg-gray-700 dark:focus:bg-gray-700 transition-colors cursor-pointer"
13+
class="px-4 py-2 rounded-lg hover:bg-slate-100/75 focus:bg-slate-100/75 dark:hover:bg-slate-800 dark:focus:bg-slate-800 transition-colors cursor-pointer"
1414
:href="blog.href">
1515
<article class="flex flex-col gap-2">
16-
<h2 class="text-xl font-semibold text-gray-700 dark:text-gray-100">
16+
<h2 class="text-xl font-semibold text-slate-700 dark:text-slate-100">
1717
{{ blog.title }}
1818
</h2>
19-
<p class="text-gray-500 dark:text-gray-300">{{ blog.detail }}</p>
19+
<p class="text-slate-500 dark:text-slate-300">{{ blog.detail }}</p>
2020
</article>
2121
</a>
2222
</main>

‎components/midori/hero.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template>
2-
<Ray class="h-[70vh] -top-16 z-[100] pointer-events-none opacity-25 dark:opacity-50" static />
2+
<Ray class="h-[60vh] -top-16 pointer-events-none opacity-[.35] dark:opacity-50" />
33
<div id="splash"
44
class="pointer-events-none absolute top-[-70vh] max-w-full justify-center w-full h-screen opacity-25 block gradient">
55
</div>

‎components/midori/ray.vue

Lines changed: 55 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,17 @@
11
<!-- https://codepen.io/TWilson/pen/jOdWqbZ -->
22
<template>
3-
<div class="absolute flex flex-col w-full !max-w-full items-center justify-center bg-transparent transition-bg overflow-hidden"
4-
:class="className">
5-
<div class="jumbo absolute -inset-[10px] opacity-50"
6-
:class="{ '-safari': isSafari, '-animate': animated, '-static': isStatic }" />
3+
<div
4+
class="absolute flex flex-col z-[40] w-full !max-w-full items-center justify-center bg-transparent transition-bg overflow-hidden"
5+
:class="className"
6+
>
7+
<div
8+
class="jumbo absolute opacity-60"
9+
:class="{
10+
// '-safari': isSafari,
11+
'-animate': animated,
12+
'-static': isStatic
13+
}"
14+
/>
715
</div>
816
</template>
917

@@ -19,23 +27,29 @@
1927
}
2028
2129
.jumbo {
22-
--stripes: repeating-linear-gradient(100deg,
23-
#fff 0%,
24-
#fff 7%,
25-
transparent 10%,
26-
transparent 12%,
27-
#fff 16%);
28-
--stripesDark: repeating-linear-gradient(100deg,
29-
#000 0%,
30-
#000 7%,
31-
transparent 10%,
32-
transparent 12%,
33-
#000 16%);
34-
--rainbow: repeating-linear-gradient(100deg,
35-
#60a5fa 10%,
36-
#e879f9 16%,
37-
#5eead4 22%,
38-
#60a5fa 30%);
30+
--stripes: repeating-linear-gradient(
31+
100deg,
32+
#fff 0%,
33+
#fff 7%,
34+
transparent 10%,
35+
transparent 12%,
36+
#fff 16%
37+
);
38+
--stripesDark: repeating-linear-gradient(
39+
100deg,
40+
#000 0%,
41+
#000 7%,
42+
transparent 10%,
43+
transparent 12%,
44+
#000 16%
45+
);
46+
--rainbow: repeating-linear-gradient(
47+
100deg,
48+
#60a5fa 10%,
49+
#e879f9 16%,
50+
#5eead4 22%,
51+
#60a5fa 30%
52+
);
3953
4054
contain: strict;
4155
contain-intrinsic-size: 100vw 40vh;
@@ -44,6 +58,14 @@
4458
background-size: 300%, 200%;
4559
background-position: 50% 50%, 50% 50%;
4660
61+
height: inherit;
62+
63+
/* Webkit GPU acceleration hack for some reason */
64+
/* https://stackoverflow.com/a/21364496 */
65+
-webkit-transform: translateZ(0);
66+
-webkit-perspective: 1000;
67+
-webkit-backface-visibility: hidden;
68+
4769
filter: invert(100%);
4870
mask-image: radial-gradient(ellipse at 100% 0%, black 40%, transparent 70%);
4971
pointer-events: none;
@@ -67,9 +89,9 @@
6789
animation: unset !important;
6890
}
6991
70-
.-safari::after {
92+
/* .-safari::after {
7193
animation: unset !important;
72-
}
94+
} */
7395
7496
.dark .jumbo {
7597
background-image: var(--stripesDark), var(--rainbow);
@@ -93,19 +115,18 @@ const animated = ref(false)
93115
const isStatic = ref(props.static)
94116
95117
const className = ref(props.class || 'h-screen')
96-
const isSafari = ref(
97-
typeof window !== 'undefined'
98-
? navigator.userAgent.indexOf('Safari') !== -1 &&
99-
navigator.userAgent.indexOf('Chrome') === -1
100-
: false
101-
)
118+
// const isSafari = ref(
119+
// typeof window !== 'undefined'
120+
// ? navigator.userAgent.indexOf('Safari') !== -1 &&
121+
// navigator.userAgent.indexOf('Chrome') === -1
122+
// : false
123+
// )
102124
103125
onMounted(() => {
104-
if (navigator?.hardwareConcurrency > 4)
105-
animated.value = true
126+
if (navigator?.hardwareConcurrency > 4) animated.value = true
106127
107-
isSafari.value =
108-
navigator.userAgent.indexOf('Safari') !== -1 &&
109-
navigator.userAgent.indexOf('Chrome') === -1
128+
// isSafari.value =
129+
// navigator.userAgent.indexOf('Safari') !== -1 &&
130+
// navigator.userAgent.indexOf('Chrome') === -1
110131
})
111132
</script>

‎docs/.vitepress/theme/custom.css

Lines changed: 32 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -113,33 +113,60 @@ button.copy::after {
113113
}
114114
}
115115

116+
/* .VPLocalNav {
117+
background-color: rgba(255, 255, 255, .7) !important;
118+
backdrop-filter: blur(12px);
119+
120+
& > .container {
121+
background-color: transparent;
122+
}
123+
} */
124+
125+
.mockup-browser-toolbar > .input::before {
126+
width: 12px;
127+
}
128+
129+
.VPNav {
130+
&:hover {
131+
z-index: 50 !important;
132+
133+
& > .VPNavBar {
134+
@apply dark:!bg-slate-900/0 dark:transition-none;
135+
background-color: rgba(255, 255, 255, .4) !important;
136+
}
137+
}
138+
}
139+
116140
.VPNavBar {
117-
@apply !border-0;
118-
background: linear-gradient(to right, transparent, var(--vp-nav-bg-color));
141+
@apply !border-0 dark:!bg-slate-900/70;
142+
background-color: rgba(255, 255, 255, .8) !important;
119143
backdrop-filter: blur(12px);
120144

121145
& > .container {
146+
/* background-color: rgba(255, 255, 255, .6) !important; */
147+
122148
& > .content,
123149
& > .title {
124150
background: color-mix(in srgb, var(--vp-c-bg) 80%, transparent);
125151
}
126152
}
127153

128-
& > .container > .content {
154+
/* Curtain is removed from VitePress? */
155+
/* & > .container > .content {
129156
border-bottom: 0;
130157
131158
& > .curtain::before {
132159
backdrop-filter: blur(12px);
133160
background: linear-gradient(
134161
var(--vp-nav-bg-color),
135-
transparent 90%
162+
transparent 100%
136163
) !important;
137164
}
138165
139166
& > .content-body {
140167
background-color: transparent;
141168
}
142-
}
169+
} */
143170
}
144171

145172
.md-table {

‎docs/.vitepress/theme/layout.vue

Lines changed: 14 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,4 @@
11
<script setup lang="ts">
2-
3-
42
import DefaultTheme from 'vitepress/theme'
53
import { nextTick, provide } from 'vue'
64
@@ -28,18 +26,22 @@ provide('toggle-appearance', async ({ clientX: x, clientY: y }: MouseEvent) => {
2826
)}px at ${x}px ${y}px)`
2927
]
3028
31-
if (document.startViewTransition !== undefined) await document.startViewTransition(async () => {
32-
darkTheme.value = !darkTheme.value
33-
await nextTick()
34-
}).ready
29+
// @ts-expect-error
30+
if (document.startViewTransition !== undefined)
31+
// @ts-expect-error
32+
await document.startViewTransition(async () => {
33+
darkTheme.value = !darkTheme.value
34+
await nextTick()
35+
}).ready
3536
3637
document.documentElement.animate(
3738
{ clipPath: isDark.value ? clipPath.reverse() : clipPath },
3839
{
3940
duration: 300,
4041
easing: 'ease-in',
41-
pseudoElement: `::view-transition-${isDark.value ? 'old' : 'new'
42-
}(root)`
42+
pseudoElement: `::view-transition-${
43+
isDark.value ? 'old' : 'new'
44+
}(root)`
4345
}
4446
)
4547
})
@@ -48,7 +50,10 @@ provide('toggle-appearance', async ({ clientX: x, clientY: y }: MouseEvent) => {
4850
<template>
4951
<DefaultTheme.Layout>
5052
<template #doc-top>
51-
<Ray class="h-[220px] top-0 left-0 z-[100] opacity-25 dark:opacity-[.55] pointer-events-none" static />
53+
<Ray
54+
class="h-[220px] top-0 left-0 opacity-25 dark:opacity-[.55] pointer-events-none"
55+
static
56+
/>
5257
</template>
5358
</DefaultTheme.Layout>
5459
</template>

‎docs/index.md

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,19 @@ new Elysia()
5959

6060
<template v-slot:openapi>
6161

62-
```ts
62+
```ts twoslash
63+
// @filename: controllers.ts
64+
import { Elysia } from 'elysia'
65+
66+
export const users = new Elysia()
67+
.get('/users', 'Dreamy Euphony')
68+
69+
export const feed = new Elysia()
70+
.get('/feed', ['Hoshino', 'Griseo', 'Astro'])
71+
72+
// @filename: server.ts
73+
// ---cut---
74+
// server.ts
6375
import { Elysia, t } from 'elysia'
6476
import { swagger } from '@elysiajs/swagger'
6577
import { users, feed } from './controllers'

0 commit comments

Comments
 (0)