refactor: docs (#10126)

apps/website/src/components/DocNode.tsx

@@ -0,0 +1,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}/${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;
+}