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