refactor: use next links (#8344)

* chore(website): use next links

* chore: fix deploy check

* chore: use ligher syntax highlighter

.github/check_deploy_branch.sh

@@ -2,7 +2,7 @@
 
 git diff HEAD^ HEAD --quiet .
 
-if [[ "$VERCEL_GIT_COMMIT_REF" == "main" && $? -eq 1 ]]; then
+if [[ "$VERCEL_GIT_COMMIT_REF" == "main" || $? -eq 1 ]]; then
 	# Proceed with the build
 	echo "✅ - Proceed"
 	exit 1;

packages/website/src/components/DocContainer.tsx

@@ -1,5 +1,5 @@
 import type { ReactNode } from 'react';
-import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
+import { PrismAsyncLight as SyntaxHighlighter } from 'react-syntax-highlighter';
 import { vscDarkPlus } from 'react-syntax-highlighter/dist/cjs/styles/prism';
 import { HyperlinkedText } from './HyperlinkedText';
 import { Section } from './Section';

packages/website/src/components/HyperlinkedText.tsx

@@ -1,3 +1,4 @@
+import Link from 'next/link';
 import type { TokenDocumentation } from '~/util/parse.server';
 
 export interface HyperlinkedTextProps {
@@ -17,9 +18,9 @@ export function HyperlinkedText({ tokens }: HyperlinkedTextProps) {
 			{tokens.map((token) => {
 				if (token.path) {
 					return (
-						<a key={token.text} href={token.path}>
+						<Link key={token.text} href={token.path}>
 							{token.text}
-						</a>
+						</Link>
 					);
 				}
 

packages/website/src/components/ItemSidebar.tsx

@@ -1,3 +1,4 @@
+import Link from 'next/link';
 import { FiMenu } from 'react-icons/fi';
 import { VscPackage } from 'react-icons/vsc';
 import { generateIcon } from '~/util/icon';
@@ -18,7 +19,7 @@ function onMenuClick() {
 export function ItemSidebar({ packageName, data }: ItemListProps) {
 	return (
 		<div className="flex flex-col max-h-full min-w-[270px] lg:border-r-solid border-b-solid border-gray border-width-0.5">
-			<div className="flex justify-between items-center border-b-solid border-gray border-width-0.5 py-2">
+			<div className=" border-b-solid border-gray border-width-0.5 py-2 sticky top-0">
 				<h2 className="px-2 font-mono flex items-center m-0 dark:text-white">
 					<VscPackage className="px-1" />
 					{`${packageName}`}
@@ -30,13 +31,10 @@ export function ItemSidebar({ packageName, data }: ItemListProps) {
 			<div className="hidden lg:block lg:min-h-screen overflow-y-scroll overflow-x-clip p-7">
 				{data.members.map((member, i) => (
 					<div key={i} className="mb-1">
-						<a
+						<div className="flex items-center align-center font-mono no-underline break-all text-blue-500 dark:text-blue-300">
-							className="flex items-center align-center font-mono no-underline break-all text-blue-500 dark:text-blue-300"
-							href={member.path}
-						>
 							{generateIcon(member.kind, 'px-1')}
-							{member.name}
+							<Link href={member.path}>{member.name}</Link>
-						</a>
+						</div>
 					</div>
 				))}
 			</div>

packages/website/src/pages/_app.tsx

@@ -2,7 +2,21 @@ import type { AppProps } from 'next/app';
 import '@unocss/reset/normalize.css';
 import '../styles/unocss.css';
 import '../styles/main.css';
+import { ItemSidebar } from '~/components/ItemSidebar';
 
 export default function MyApp({ Component, pageProps }: AppProps) {
-	return <Component {...pageProps} />;
+	return (
+		<div className="flex flex-col lg:flex-row overflow-hidden max-w-full h-full max-h-full bg-white dark:bg-dark">
+			<div className="w-full lg:max-w-1/4 lg:min-w-1/4">
+				{/* eslint-disable-next-line @typescript-eslint/no-unsafe-member-access */}
+				{pageProps.packageName && pageProps.data ? (
+					// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-member-access
+					<ItemSidebar packageName={pageProps.packageName} data={pageProps.data} />
+				) : null}
+			</div>
+			<div className="max-h-full grow overflow-auto">
+				<Component {...pageProps} />
+			</div>
+		</div>
+	);
 }

packages/website/src/pages/docs/[...slug].tsx

@@ -6,7 +6,7 @@ import type { DocFunction } from '~/DocModel/DocFunction';
 import type { DocInterface } from '~/DocModel/DocInterface';
 import type { DocTypeAlias } from '~/DocModel/DocTypeAlias';
 import type { DocVariable } from '~/DocModel/DocVariable';
-import { ItemSidebar, type ItemListProps } from '~/components/ItemSidebar';
+import type { ItemListProps } from '~/components/ItemSidebar';
 import { Class } from '~/components/model/Class';
 import { Enum } from '~/components/model/Enum';
 import { Function } from '~/components/model/Function';
@@ -106,12 +106,7 @@ export default function Slug(
 ) {
 	return props.error ? (
 		<div className="flex max-w-full h-full bg-white dark:bg-dark">{props.error}</div>
-	) : (
+	) : props.data?.member ? (
-		<div className="flex flex-col lg:flex-row overflow-hidden max-w-full h-full bg-white dark:bg-dark">
+		member(props.data.member)
-			<div className="w-full lg:min-w-1/4 lg:max-w-1/4">
+	) : null;
-				{props.packageName && props.data ? <ItemSidebar packageName={props.packageName} data={props.data} /> : null}
-			</div>
-			<div className="max-h-full grow overflow-auto">{props.data?.member ? member(props.data.member) : null}</div>
-		</div>
-	);
 }