/
DocNode.tsx
72 lines (64 loc) · 1.93 KB
/
DocNode.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
import Link from 'next/link';
import { OverlayScrollbarsComponent } from './OverlayScrollbars';
import { SyntaxHighlighter } from './SyntaxHighlighter';
export async function DocNode({ node, version }: { readonly node?: any; readonly version: string }) {
const createNode = (node: any, idx: number) => {
switch (node.kind) {
case 'PlainText':
return <span key={`${node.text}-${idx}`}>{node.text}</span>;
case 'LinkTag': {
if (node.resolvedPackage) {
return (
<Link
key={`${node.text}-${idx}`}
className="font-mono text-blurple hover:text-blurple-500 dark:hover:text-blurple-300"
href={`/docs/packages/${node.resolvedPackage.packageName}/${node.resolvedPackage.version ?? version}/${node.uri}`}
>
{node.text}
</Link>
);
}
if (node.uri) {
return (
<a
key={`${node.text}-${idx}`}
className="text-blurple hover:text-blurple-500 dark:hover:text-blurple-300"
href={node.uri}
rel="external noreferrer noopener"
target="_blank"
>
{node.text}
</a>
);
}
return <span key={`${node.text}-${idx}`}>{node.text}</span>;
}
case 'CodeSpan':
return (
<code key={`${node.text}-${idx}`} className="font-mono text-sm">
{node.text}
</code>
);
case 'FencedCode': {
const { language, text } = node;
return (
<OverlayScrollbarsComponent
defer
options={{
overflow: { y: 'hidden' },
scrollbars: { autoHide: 'scroll', autoHideDelay: 500, autoHideSuspend: true, clickScroll: true },
}}
className="my-4 rounded-md border border-neutral-300 bg-neutral-100 dark:border-neutral-700 dark:bg-neutral-900"
>
<SyntaxHighlighter className="py-4 text-sm " lang={language} code={text} />
</OverlayScrollbarsComponent>
);
}
case 'SoftBreak':
return null;
default:
return null;
}
};
return node?.map(createNode) ?? null;
}