Skip to content

Commit 7d7efde

Browse files
ricardonunez-ioricardonunez-io
committed
Update test files with Twoslash examples
1 parent eac1377 commit 7d7efde

File tree

4 files changed

+762
-0
lines changed

4 files changed

+762
-0
lines changed

‎examples/app-router/app/globals.css‎

Lines changed: 289 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,3 +7,292 @@
77
--primary-light: 85 215 153;
88
}
99
}
10+
11+
/* ===== Basic ===== */
12+
:root {
13+
--twoslash-border-color: #8888;
14+
--twoslash-underline-color: currentColor;
15+
--twoslash-highlighted-border: #c37d0d50;
16+
--twoslash-highlighted-bg: #c37d0d20;
17+
--twoslash-popup-bg: #f8f8f8;
18+
--twoslash-popup-color: inherit;
19+
--twoslash-popup-shadow: rgba(0, 0, 0, 0.08) 0px 1px 4px;
20+
--twoslash-docs-color: #888;
21+
--twoslash-docs-font: sans-serif;
22+
--twoslash-code-font: inherit;
23+
--twoslash-code-font-size: 1em;
24+
--twoslash-matched-color: inherit;
25+
--twoslash-unmatched-color: #888;
26+
--twoslash-cursor-color: #8888;
27+
--twoslash-error-color: #d45656;
28+
--twoslash-error-bg: #d4565620;
29+
--twoslash-warn-color: #c37d0d;
30+
--twoslash-warn-bg: #c37d0d20;
31+
--twoslash-tag-color: #3772cf;
32+
--twoslash-tag-bg: #3772cf20;
33+
--twoslash-tag-warn-color: var(--twoslash-warn-color);
34+
--twoslash-tag-warn-bg: var(--twoslash-warn-bg);
35+
--twoslash-tag-annotate-color: #1ba673;
36+
--twoslash-tag-annotate-bg: #1ba67320;
37+
}
38+
39+
/* Respect people's wishes to not have animations */
40+
@media (prefers-reduced-motion: reduce) {
41+
.twoslash * {
42+
transition: none !important;
43+
}
44+
}
45+
46+
/* ===== Hover Info ===== */
47+
.twoslash:hover .twoslash-hover {
48+
border-color: var(--twoslash-underline-color);
49+
}
50+
51+
.twoslash .twoslash-hover {
52+
border-bottom: 1px dotted transparent;
53+
transition-timing-function: ease;
54+
transition: border-color 0.3s;
55+
position: relative;
56+
}
57+
58+
.twoslash .twoslash-popup-container {
59+
position: absolute;
60+
opacity: 0;
61+
display: inline-flex;
62+
flex-direction: column;
63+
transform: translateY(1.1em);
64+
background: var(--twoslash-popup-bg);
65+
color: var(--twoslash-popup-color);
66+
border: 1px solid var(--twoslash-border-color);
67+
transition: opacity 0.3s;
68+
border-radius: 4px;
69+
pointer-events: none;
70+
z-index: 10;
71+
user-select: none;
72+
text-align: left;
73+
box-shadow: var(--twoslash-popup-shadow);
74+
}
75+
76+
/* .twoslash .twoslash-query-presisted .twoslash-popup-container { */
77+
/* z-index: 9; */
78+
/* transform: translateY(1.5em); */
79+
/* } */
80+
81+
.twoslash .twoslash-hover:hover .twoslash-popup-container,
82+
.twoslash .twoslash-error-hover:hover .twoslash-popup-container,
83+
/* .twoslash .twoslash-query-presisted .twoslash-popup-container, */
84+
.twoslash .twoslash-query-line .twoslash-popup-container {
85+
opacity: 1;
86+
pointer-events: auto;
87+
}
88+
89+
.twoslash .twoslash-popup-container:hover {
90+
user-select: auto;
91+
}
92+
93+
.twoslash .twoslash-popup-arrow {
94+
position: absolute;
95+
top: -4px;
96+
left: 1em;
97+
border-top: 1px solid var(--twoslash-border-color);
98+
border-right: 1px solid var(--twoslash-border-color);
99+
background: var(--twoslash-popup-bg);
100+
transform: rotate(-45deg);
101+
width: 6px;
102+
height: 6px;
103+
pointer-events: none;
104+
}
105+
106+
.twoslash .twoslash-popup-code,
107+
.twoslash .twoslash-popup-error,
108+
.twoslash .twoslash-popup-docs {
109+
padding: 6px 8px !important;
110+
}
111+
112+
.twoslash .twoslash-popup-code {
113+
font-family: var(--twoslash-code-font);
114+
font-size: var(--twoslash-code-font-size);
115+
}
116+
117+
.twoslash .twoslash-popup-docs {
118+
color: var(--twoslash-docs-color);
119+
font-family: var(--twoslash-docs-font);
120+
font-size: 0.8em;
121+
border-top: 1px solid var(--twoslash-border-color);
122+
}
123+
124+
.twoslash .twoslash-popup-error {
125+
color: var(--twoslash-error-color);
126+
background-color: var(--twoslash-error-bg);
127+
font-family: var(--twoslash-docs-font);
128+
font-size: 0.8em;
129+
}
130+
131+
.twoslash .twoslash-popup-docs-tags {
132+
display: flex;
133+
flex-direction: column;
134+
font-family: var(--twoslash-docs-font);
135+
}
136+
137+
.twoslash .twoslash-popup-docs-tags,
138+
.twoslash .twoslash-popup-docs-tag-name {
139+
margin-right: 0.5em;
140+
}
141+
142+
.twoslash .twoslash-popup-docs-tag-name {
143+
font-family: var(--twoslash-code-font);
144+
}
145+
146+
/* ===== Query Line ===== */
147+
.twoslash .twoslash-query-line .twoslash-popup-container {
148+
position: relative;
149+
margin-bottom: 1.4em;
150+
transform: translateY(0.6em);
151+
}
152+
153+
/* ===== Error Line ===== */
154+
.twoslash .twoslash-error-line {
155+
position: relative;
156+
background-color: var(--twoslash-error-bg);
157+
border-left: 3px solid var(--twoslash-error-color);
158+
color: var(--twoslash-error-color);
159+
padding: 6px 12px;
160+
margin: 0.2em 0;
161+
min-width: 100%;
162+
width: max-content;
163+
}
164+
165+
.twoslash .twoslash-error-line.twoslash-error-level-warning {
166+
background-color: var(--twoslash-warn-bg);
167+
border-left: 3px solid var(--twoslash-warn-color);
168+
color: var(--twoslash-warn-color);
169+
}
170+
171+
.twoslash .twoslash-error {
172+
background: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%206%203'%20enable-background%3D'new%200%200%206%203'%20height%3D'3'%20width%3D'6'%3E%3Cg%20fill%3D'%23c94824'%3E%3Cpolygon%20points%3D'5.5%2C0%202.5%2C3%201.1%2C3%204.1%2C0'%2F%3E%3Cpolygon%20points%3D'4%2C0%206%2C2%206%2C0.6%205.4%2C0'%2F%3E%3Cpolygon%20points%3D'0%2C2%201%2C3%202.4%2C3%200%2C0.6'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E")
173+
repeat-x bottom left;
174+
padding-bottom: 2px;
175+
}
176+
177+
.twoslash .twoslash-error.twoslash-error-level-warning {
178+
background: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%206%203'%20enable-background%3D'new%200%200%206%203'%20height%3D'3'%20width%3D'6'%3E%3Cg%20fill%3D'%23c37d0d'%3E%3Cpolygon%20points%3D'5.5%2C0%202.5%2C3%201.1%2C3%204.1%2C0'%2F%3E%3Cpolygon%20points%3D'4%2C0%206%2C2%206%2C0.6%205.4%2C0'%2F%3E%3Cpolygon%20points%3D'0%2C2%201%2C3%202.4%2C3%200%2C0.6'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E")
179+
repeat-x bottom left;
180+
padding-bottom: 2px;
181+
}
182+
183+
/* ===== Completeions ===== */
184+
.twoslash .twoslash-completion-cursor {
185+
position: relative;
186+
}
187+
188+
.twoslash .twoslash-completion-cursor .twoslash-completion-list {
189+
user-select: none;
190+
position: absolute;
191+
top: 0;
192+
left: 0;
193+
transform: translate(0, 1.2em);
194+
margin: 3px 0 0 -1px;
195+
display: inline-block;
196+
z-index: 8;
197+
box-shadow: var(--twoslash-popup-shadow);
198+
background: var(--twoslash-popup-bg);
199+
border: 1px solid var(--twoslash-border-color);
200+
}
201+
202+
.twoslash-completion-list {
203+
width: 240px;
204+
font-size: 0.8rem;
205+
padding: 4px;
206+
display: flex;
207+
flex-direction: column;
208+
gap: 4px;
209+
}
210+
211+
.twoslash-completion-list:hover {
212+
user-select: auto;
213+
}
214+
215+
.twoslash-completion-list::before {
216+
background-color: var(--twoslash-cursor-color);
217+
width: 2px;
218+
position: absolute;
219+
top: -1.6em;
220+
height: 1.4em;
221+
left: -1px;
222+
content: ' ';
223+
}
224+
225+
.twoslash-completion-list li {
226+
overflow: hidden;
227+
display: flex;
228+
align-items: center;
229+
gap: 0.25em;
230+
line-height: 1em;
231+
}
232+
233+
.twoslash-completion-list li span.twoslash-completions-unmatched {
234+
color: var(--twoslash-unmatched-color);
235+
}
236+
237+
.twoslash-completion-list .deprecated {
238+
text-decoration: line-through;
239+
opacity: 0.5;
240+
}
241+
242+
.twoslash-completion-list li span.twoslash-completions-matched {
243+
color: var(--twoslash-matched-color);
244+
}
245+
246+
/* Highlights */
247+
.twoslash-highlighted {
248+
background-color: var(--twoslash-highlighted-bg);
249+
border: 1px solid var(--twoslash-highlighted-border);
250+
padding: 1px 2px;
251+
margin: -1px -3px;
252+
border-radius: 4px;
253+
}
254+
255+
/* Icons */
256+
.twoslash-completion-list .twoslash-completions-icon {
257+
color: var(--twoslash-unmatched-color);
258+
width: 1em;
259+
flex: none;
260+
}
261+
262+
/* Custom Tags */
263+
.twoslash .twoslash-tag-line {
264+
position: relative;
265+
background-color: var(--twoslash-tag-bg);
266+
border-left: 3px solid var(--twoslash-tag-color);
267+
color: var(--twoslash-tag-color);
268+
padding: 6px 10px;
269+
margin: 0.2em 0;
270+
display: flex;
271+
align-items: center;
272+
gap: 0.3em;
273+
min-width: 100%;
274+
width: max-content;
275+
}
276+
277+
.twoslash .twoslash-tag-line .twoslash-tag-icon {
278+
width: 1.1em;
279+
color: inherit;
280+
}
281+
282+
.twoslash .twoslash-tag-line.twoslash-tag-error-line {
283+
background-color: var(--twoslash-error-bg);
284+
border-left: 3px solid var(--twoslash-error-color);
285+
color: var(--twoslash-error-color);
286+
}
287+
288+
.twoslash .twoslash-tag-line.twoslash-tag-warn-line {
289+
background-color: var(--twoslash-tag-warn-bg);
290+
border-left: 3px solid var(--twoslash-tag-warn-color);
291+
color: var(--twoslash-tag-warn-color);
292+
}
293+
294+
.twoslash .twoslash-tag-line.twoslash-tag-annotate-line {
295+
background-color: var(--twoslash-tag-annotate-bg);
296+
border-left: 3px solid var(--twoslash-tag-annotate-color);
297+
color: var(--twoslash-tag-annotate-color);
298+
}

‎examples/app-router/examples/highlight-example.mdx‎

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -49,3 +49,95 @@ public class Program
4949
}
5050
}
5151
```
52+
53+
## Testing Twoslash
54+
55+
### Twoslash disabled without any additional configs or filenames
56+
57+
```ts
58+
// This is a tooltip that will appear on the next line
59+
const myVariable = 'hello world';
60+
// ^?
61+
62+
// This is the second line
63+
// You can include [links](#anchor) in your hover content
64+
function myFunction() {
65+
// ^?
66+
return myVariable;
67+
}
68+
```
69+
70+
### Twoslash enabled without any additional configs or filenames
71+
72+
```ts mint-twoslash
73+
// This is a tooltip that will appear on the next line
74+
const myVariable = 'hello world';
75+
// ^?
76+
77+
// This is the second line
78+
// You can include [links](#anchor) in your hover content
79+
function myFunction() {
80+
// ^?
81+
return myVariable;
82+
}
83+
```
84+
85+
### Twoslash disabled with additional configs and filename
86+
87+
```js something_with_external_packages.tsx icon="js" lines
88+
import { useEffect, useState } from 'react';
89+
90+
export function Component() {
91+
// ^?
92+
const [count, setCount] = useState(0);
93+
// ^? ^?
94+
95+
useEffect(() => {
96+
setTimeout(() => setCount(count + 1), 1000);
97+
// ^?
98+
}, [count]);
99+
100+
return <div>{count}</div>;
101+
}
102+
```
103+
104+
### Twoslash enabled with additional configs
105+
106+
```js something_with_external_packages.tsx icon="js" lines mint-twoslash
107+
import { useEffect, useState } from 'react';
108+
109+
export function Component() {
110+
// ^?
111+
const [count, setCount] = useState(0);
112+
// ^? ^?
113+
114+
useEffect(() => {
115+
setTimeout(() => setCount(count + 1), 1000);
116+
// ^?
117+
}, [count]);
118+
119+
return <div>{count}</div>;
120+
}
121+
```
122+
123+
### Twoslash disabled with just filename
124+
125+
```ts Vue Sample
126+
import { ref } from 'vue';
127+
128+
console.log('Hi! Shiki + Twoslash on CDN :)');
129+
130+
const count = ref(0);
131+
// ^?
132+
```
133+
134+
### Twoslash enabled with just filename
135+
136+
```ts mint-twoslash Vue Sample
137+
import { ref } from 'vue';
138+
139+
console.log('Hi! Shiki + Twoslash on CDN :)');
140+
141+
const count = ref(0);
142+
// ^?
143+
```

0 commit comments

Comments
 (0)