keii.dev
+1
-5
components/Common/CodeBox/index.module.css
+1
-5
components/Common/CodeBox/index.module.css
···
11
11
12
12
& > code {
13
13
@apply grid
14
+
overflow-x-auto
14
15
bg-transparent
15
16
p-0
16
17
font-ibm-plex-mono
···
24
25
@apply relative
25
26
min-w-0
26
27
pl-8;
27
-
28
-
& > span {
29
-
@apply whitespace-break-spaces
30
-
break-words;
31
-
}
32
28
33
29
&:not(:empty:last-child)::before {
34
30
@apply inline-block
+33
-27
components/Common/Tabs/index.module.css
+33
-27
components/Common/Tabs/index.module.css
···
1
-
.tabsList {
2
-
@apply flex
3
-
gap-2
4
-
font-open-sans;
1
+
.tabsRoot {
2
+
@apply max-w-full;
5
3
6
-
.tabsTrigger {
7
-
@apply border-b-2
8
-
border-b-transparent
9
-
px-1
10
-
pb-[11px]
11
-
text-sm
12
-
font-semibold
13
-
text-neutral-800
14
-
dark:text-neutral-200;
4
+
.tabsList {
5
+
@apply flex
6
+
gap-2
7
+
overflow-x-auto
8
+
font-open-sans;
15
9
16
-
&[data-state='active'] {
17
-
@apply border-b-green-600
18
-
text-green-600
19
-
dark:border-b-green-400
20
-
dark:text-green-400;
10
+
.tabsTrigger {
11
+
@apply whitespace-nowrap
12
+
border-b-2
13
+
border-b-transparent
14
+
px-1
15
+
pb-[11px]
16
+
text-sm
17
+
font-semibold
18
+
text-neutral-800
19
+
dark:text-neutral-200;
20
+
21
+
&[data-state='active'] {
22
+
@apply border-b-green-600
23
+
text-green-600
24
+
dark:border-b-green-400
25
+
dark:text-green-400;
26
+
}
21
27
}
22
-
}
23
28
24
-
.addons {
25
-
@apply ml-auto
26
-
border-b-2
27
-
border-b-transparent
28
-
px-1
29
-
pb-[11px]
30
-
text-sm
31
-
font-semibold;
29
+
.addons {
30
+
@apply ml-auto
31
+
border-b-2
32
+
border-b-transparent
33
+
px-1
34
+
pb-[11px]
35
+
text-sm
36
+
font-semibold;
37
+
}
32
38
}
33
39
}
+5
-1
components/Common/Tabs/index.tsx
+5
-1
components/Common/Tabs/index.tsx
···
1
1
import * as TabsPrimitive from '@radix-ui/react-tabs';
2
+
import classNames from 'classnames';
2
3
import type { FC, PropsWithChildren, ReactNode } from 'react';
3
4
4
5
import styles from './index.module.css';
···
16
17
children,
17
18
...props
18
19
}) => (
19
-
<TabsPrimitive.Root {...props}>
20
+
<TabsPrimitive.Root
21
+
{...props}
22
+
className={classNames(styles.tabsRoot, props.className)}
23
+
>
20
24
<TabsPrimitive.List className={styles.tabsList}>
21
25
{tabs.map(tab => (
22
26
<TabsPrimitive.Trigger
+6
-2
layouts/layouts.module.css
+6
-2
layouts/layouts.module.css
···
61
61
.centeredLayout {
62
62
@apply flex
63
63
w-full
64
+
min-w-0
64
65
items-center
65
66
justify-center
66
67
px-4
···
116
117
117
118
&:nth-of-type(2) {
118
119
@apply flex
119
-
max-w-md
120
+
min-w-0
121
+
max-w-full
120
122
flex-[1_1]
121
123
flex-col
122
124
items-center
···
125
127
lg:max-w-3xl;
126
128
127
129
> div {
128
-
@apply w-fit;
130
+
@apply w-full
131
+
max-w-md
132
+
md:max-w-full;
129
133
}
130
134
131
135
> p {
+15
-5
pages/en/index.mdx
+15
-5
pages/en/index.mdx
···
43
43
<section>
44
44
<div>
45
45
```js displayName="Create an HTTP Server"
46
-
// make a file `server.mjs` and run with `node server.mjs`
46
+
// server.mjs
47
47
import { createServer } from 'node:http';
48
48
49
49
const server = createServer((req, res) => {
···
55
55
server.listen(3000, '127.0.0.1', () => {
56
56
console.log('Listening on 127.0.0.1:3000');
57
57
});
58
+
59
+
// run with `node server.mjs`
58
60
```
59
61
60
62
```js displayName="Write Tests"
61
-
// make a file `tests.mjs` and run with `node tests.mjs`
63
+
// tests.mjs
62
64
import assert from 'node:assert';
63
65
import test from 'node:test';
64
66
···
70
72
// throws an exception because 1 != 2
71
73
assert.strictEqual(1, 2);
72
74
});
75
+
76
+
// run with `node tests.mjs`
73
77
```
74
78
75
79
```js displayName="Read and Hash a File"
76
-
// make a file `crypto.mjs` and run with `node crypto.mjs`
80
+
// crypto.mjs
77
81
import { createHash } from 'node:crypto';
78
82
import { readFile } from 'node:fs/promises';
79
83
···
85
89
hasher.end();
86
90
87
91
const fileHash = hasher.read();
92
+
93
+
// run with `node crypto.mjs`
88
94
```
89
95
90
96
```js displayName="Read Streams"
91
-
// make a file `streams.mjs` and run with `node streams.mjs`
97
+
// streams.mjs
92
98
import { pipeline } from 'node:stream';
93
99
import { createReadStream, createWriteStream } from 'node:fs';
94
100
import { createGzip } from 'node:zlib';
···
100
106
createGzip(),
101
107
createWriteStream('package.json.gz')
102
108
);
109
+
110
+
// run with `node streams.mjs`
103
111
```
104
112
105
113
```js displayName="Work with Threads"
106
-
// make a file `threads.mjs` and run with `node threads.mjs`
114
+
// threads.mjs
107
115
import { Worker, isMainThread,
108
116
workerData, parentPort } from 'node:worker_threads';
109
117
···
115
123
const source = workerData;
116
124
parentPort.postMessage(btoa(source.toUpperCase()));
117
125
}
126
+
127
+
// run with `node threads.mjs`
118
128
```
119
129
120
130
</div>