Skip to content

Commit f6247cb

Browse files
kravetsonekravetsone
committed
📘 feat: rewrite just-return highlighting to shiki
1 parent 52384e2 commit f6247cb

File tree

3 files changed

+86
-82
lines changed

3 files changed

+86
-82
lines changed

‎components/midori/index.vue

Lines changed: 54 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -28,49 +28,30 @@ const isDark = useDark()
2828

2929
<template>
3030
<link rel="preconnect" href="https://fonts.googleapis.com" />
31-
<link
32-
rel="preconnect"
33-
href="https://fonts.gstatic.com"
34-
crossorigin="true"
35-
/>
36-
37-
<link
38-
v-if="isDark"
39-
rel="preload"
40-
href="https://cdn.jsdelivr.net/gh/katorlys/prism-theme-github/themes/prism-theme-github-light.css"
41-
priority="high"
42-
as="style"
43-
/>
44-
<link
45-
v-else
46-
rel="preload"
47-
href="https://cdn.jsdelivr.net/gh/katorlys/prism-theme-github/themes/prism-theme-github-dark.css"
48-
priority="high"
49-
as="style"
50-
/>
51-
52-
<link
53-
v-if="isDark"
54-
rel="stylesheet"
55-
href="https://cdn.jsdelivr.net/gh/katorlys/prism-theme-github/themes/prism-theme-github-dark.css"
56-
type="text/css"
57-
/>
58-
<link
59-
v-else
60-
rel="stylesheet"
31+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="true" />
32+
33+
<link v-if="isDark" rel="preload"
34+
href="https://cdn.jsdelivr.net/gh/katorlys/prism-theme-github/themes/prism-theme-github-light.css" priority="high"
35+
as="style" />
36+
<link v-else rel="preload"
37+
href="https://cdn.jsdelivr.net/gh/katorlys/prism-theme-github/themes/prism-theme-github-dark.css" priority="high"
38+
as="style" />
39+
40+
<link v-if="isDark" rel="stylesheet"
41+
href="https://cdn.jsdelivr.net/gh/katorlys/prism-theme-github/themes/prism-theme-github-dark.css" type="text/css" />
42+
<link v-else rel="stylesheet"
6143
href="https://cdn.jsdelivr.net/gh/katorlys/prism-theme-github/themes/prism-theme-github-light.css"
62-
type="text/css"
63-
/>
44+
type="text/css" />
6445

65-
<div class="dark:bg-gray-900/60">
46+
<div id="landing" class="dark:bg-gray-900/60">
6647
<Hero />
6748
<article class="flex flex-col gap-4 px-6">
6849
<Fast />
6950
<Simple />
70-
<section
71-
class="flex flex-col justify-center items-center gap-8 w-full mt-4 mb-16"
72-
>
73-
<JustReturn />
51+
<section class="flex flex-col justify-center items-center gap-8 w-full mt-4 mb-16">
52+
<JustReturn>
53+
<slot name="justreturn"></slot>
54+
</JustReturn>
7455
<TypeStrict />
7556
<OpenAPI />
7657
</section>
@@ -81,13 +62,9 @@ const isDark = useDark()
8162
<Sponsor />
8263
<hr class="border-gray-200 dark:border-gray-600" />
8364
<figure
84-
class="max-w-6xl w-full mx-auto rounded-2xl overflow-hidden my-12 shadow-xl bg-gray-50 dark:bg-gray-800"
85-
>
86-
<img
87-
class="w-full object-cover object-center"
88-
src="/assets/feature-sheet.webp"
89-
alt="Elysia Feature Sheet"
90-
/>
65+
class="max-w-6xl w-full mx-auto rounded-2xl overflow-hidden my-12 shadow-xl bg-gray-50 dark:bg-gray-800">
66+
<img class="w-full object-cover object-center" src="/assets/feature-sheet.webp"
67+
alt="Elysia Feature Sheet" />
9168
</figure>
9269
<QuickStart />
9370
<BuiltWithLove />
@@ -96,6 +73,39 @@ const isDark = useDark()
9673
</template>
9774

9875
<style>
76+
#landing div[class*='language-']>pre>code {
77+
display: block;
78+
width: -moz-fit-content;
79+
width: fit-content;
80+
min-width: 100%;
81+
line-height: var(--vp-code-line-height);
82+
font-size: var(--vp-code-font-size);
83+
color: var(--vp-code-block-color);
84+
transition: color 0.5s;
85+
font-size: 16px;
86+
}
87+
88+
#landing div[class*='language-']>pre {
89+
position: relative;
90+
z-index: 1;
91+
padding: 1em;
92+
background: transparent;
93+
overflow-x: auto;
94+
}
95+
96+
#landing div[class*='language-']>span.lang,
97+
#landing div[class*='language-']>button {
98+
display: none;
99+
}
100+
101+
#landing div[class*='language-'] {
102+
border-radius: 8px;
103+
position: relative;
104+
overflow-x: auto;
105+
background-color: var(--vp-code-block-bg);
106+
transition: background-color 0.5s;
107+
}
108+
99109
html.dark pre[class*='language-'] {
100110
@apply bg-slate-800;
101111
}

‎components/midori/just-return.vue

Lines changed: 6 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,18 @@
1-
<script setup lang="ts">
2-
import Prism from 'vue-prism-component'
3-
4-
const code = `import { Elysia } from 'elysia'
5-
6-
new Elysia()
7-
.get('/', () => 'Hello World')
8-
.get('/json', () => ({
9-
hello: 'world'
10-
}))
11-
.listen(3000)`
12-
</script>
13-
141
<template>
15-
<article
16-
class="flex flex-col-reverse md:flex-row justify-between items-center gap-4 md:gap-12 w-full max-w-6xl"
17-
>
18-
<section class="w-full">
19-
<Prism class="!text-base !font-mono rounded-xl" language="typescript">
20-
{{ code }}
21-
</Prism>
2+
<article class="flex flex-col-reverse md:flex-row justify-between items-center gap-4 md:gap-12 w-full max-w-6xl">
3+
<section class="w-full !text-base !font-mono rounded-xl">
4+
<slot></slot>
225
</section>
236
<header class="flex flex-col gap-3 w-full">
247
<h3
25-
class="text-5xl leading-tight font-bold text-transparent bg-clip-text bg-gradient-to-br from-green-300 to-sky-300"
26-
>
8+
class="text-5xl leading-tight font-bold text-transparent bg-clip-text bg-gradient-to-br from-green-300 to-sky-300">
279
Just Function
2810
</h3>
29-
<p
30-
class="text-xl leading-normal text-gray-400 w-full max-w-lg mb-4"
31-
>
11+
<p class="text-xl leading-normal text-gray-400 w-full max-w-lg mb-4">
3212
No need for an additional method, just return the value to send data
3313
back to the client.
3414
</p>
35-
<p
36-
class="text-xl leading-normal text-gray-400 w-full max-w-lg mb-4"
37-
>
15+
<p class="text-xl leading-normal text-gray-400 w-full max-w-lg mb-4">
3816
Whether it's a regular string, or complex JSON, just return the value
3917
and Elysia will handle the rest
4018
</p>

‎docs/index.md

Lines changed: 26 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -3,21 +3,37 @@ title: Elysia - Ergonomic Framework for Humans
33
layout: page
44
sidebar: false
55
head:
6-
- - meta
7-
- property: 'og:title'
8-
content: Elysia - Ergonomic Framework for Humans
6+
- - meta
7+
- property: 'og:title'
8+
content: Elysia - Ergonomic Framework for Humans
99

10-
- - meta
11-
- name: 'description'
12-
content: Elysia is an ergonomic framework for Humans. With end-to-end type safety and great developer experience. Elysia is familiar, fast, and first class TypeScript support with well-thought integration between services whether it's tRPC, Swagger or WebSocket. Elysia got you covered, start building next generation TypeScript web servers today.
10+
- - meta
11+
- name: 'description'
12+
content: Elysia is an ergonomic framework for Humans. With end-to-end type safety and great developer experience. Elysia is familiar, fast, and first class TypeScript support with well-thought integration between services whether it's tRPC, Swagger or WebSocket. Elysia got you covered, start building next generation TypeScript web servers today.
1313

14-
- - meta
15-
- property: 'og:description'
16-
content: Elysia is an ergonomic framework for Humans. With end-to-end type safety and great developer experience. Elysia is familiar, fast, and first class TypeScript support with well-thought integration between services whether it's tRPC, Swagger or WebSocket. Elysia got you covered, start building next generation TypeScript web servers today.
14+
- - meta
15+
- property: 'og:description'
16+
content: Elysia is an ergonomic framework for Humans. With end-to-end type safety and great developer experience. Elysia is familiar, fast, and first class TypeScript support with well-thought integration between services whether it's tRPC, Swagger or WebSocket. Elysia got you covered, start building next generation TypeScript web servers today.
1717
---
1818

1919
<script setup>
2020
import Landing from '../components/midori/index.vue'
2121
</script>
2222

23-
<Landing />
23+
<Landing>
24+
<template v-slot:justreturn>
25+
26+
```typescript
27+
import { Elysia } from 'elysia'
28+
29+
new Elysia()
30+
.get('/', () => 'Hello World')
31+
.get('/json', () => ({
32+
hello: 'world'
33+
}))
34+
.listen(3000)
35+
```
36+
37+
</template>
38+
</Landing>
39+
```

0 commit comments

Comments
 (0)