chore(guide): bring guide up to speed

2026-03-09 16:13:31 +01:00 · 2023-04-09 12:41:02 +02:00
parent bfee6c8d88
commit 3d2f4b405e
39 changed files with 1542 additions and 969 deletions
--- a/apps/guide/contentlayer.config.ts
+++ b/apps/guide/contentlayer.config.ts
@@ -6,6 +6,7 @@ import { defineDocumentType, makeSource } from 'contentlayer/source-files';
 // import rehypeAutolinkHeadings from 'rehype-autolink-headings';
 import rehypeSlug from 'rehype-slug';
 import remarkGfm from 'remark-gfm';
+import codeHikeThemeDarkPlus from './src/styles/code-hike-theme-dark-plus.json';

 export const Content = defineDocumentType(() => ({
 	name: 'Content',
@@ -30,7 +31,7 @@ export const Content = defineDocumentType(() => ({
 		},
 		url: {
 			type: 'string',
-			resolve: (post) => `/posts/${post._raw.flattenedPath}`,
+			resolve: (post) => `/guide/${post._raw.flattenedPath}`,
 		},
 	},
 }));
@@ -67,7 +68,7 @@ export default makeSource({
 	contentDirPath: 'src/content',
 	documentTypes: [Content],
 	mdx: {
-		remarkPlugins: [remarkGfm, [remarkCodeHike, { theme: 'css-variables', lineNumbers: true }]],
+		remarkPlugins: [remarkGfm, [remarkCodeHike, { theme: codeHikeThemeDarkPlus, lineNumbers: true }]],
 		rehypePlugins: [
 			rehypeSlug,
 			// [
--- a/apps/guide/next.config.js
+++ b/apps/guide/next.config.js
@@ -1,7 +1,7 @@
-// import { fileURLToPath } from 'node:url';
+/* eslint-disable @typescript-eslint/no-var-requires */
+/* eslint-disable @typescript-eslint/no-require-imports */
 // import bundleAnalyzer from '@next/bundle-analyzer';
 // import { withContentlayer } from 'next-contentlayer';
-const { fileURLToPath } = require('node:url');
 const bundleAnalyzer = require('@next/bundle-analyzer');
 const { withContentlayer } = require('next-contentlayer');

@@ -9,8 +9,8 @@ const withBundleAnalyzer = bundleAnalyzer({
 	enabled: process.env.ANALYZE === 'true',
 });

-module.exports = withContentlayer(
-	withBundleAnalyzer({
+module.exports = withBundleAnalyzer(
+	withContentlayer({
 		reactStrictMode: true,
 		eslint: {
 			ignoreDuringBuilds: true,
--- a/apps/guide/package.json
+++ b/apps/guide/package.json
@@ -43,12 +43,12 @@
 	},
 	"homepage": "https://discord.js.org",
 	"dependencies": {
-		"@code-hike/mdx": "^0.7.5-next.0",
+		"@code-hike/mdx": "^0.8.1",
 		"@discordjs/ui": "workspace:^",
 		"@react-icons/all-files": "^4.1.0",
 		"@vercel/analytics": "^0.1.11",
 		"@vercel/edge-config": "^0.1.6",
-		"@vercel/og": "^0.5.0",
+		"@vercel/og": "^0.5.1",
 		"ariakit": "^2.0.0-next.43",
 		"cmdk": "^0.2.0",
 		"contentlayer": "^0.3.1",
@@ -65,6 +65,7 @@
 		"rehype-raw": "^6.1.1",
 		"rehype-slug": "^5.1.0",
 		"remark-gfm": "^3.0.1",
+		"server-only": "^0.0.1",
 		"sharp": "^0.32.0"
 	},
 	"devDependencies": {
@@ -74,14 +75,14 @@
 		"@types/node": "18.15.11",
 		"@types/react": "^18.0.33",
 		"@types/react-dom": "^18.0.11",
-		"@unocss/cli": "^0.50.7",
-		"@unocss/reset": "^0.50.7",
+		"@unocss/cli": "^0.51.0",
+		"@unocss/reset": "^0.51.0",
 		"@vitejs/plugin-react": "^3.1.0",
 		"@vitest/coverage-c8": "^0.29.8",
 		"concurrently": "^8.0.1",
 		"cross-env": "^7.0.3",
-		"eslint": "^8.37.0",
-		"eslint-config-neon": "^0.1.41",
+		"eslint": "^8.38.0",
+		"eslint-config-neon": "^0.1.42",
 		"eslint-formatter-pretty": "^5.0.0",
 		"happy-dom": "^9.1.9",
 		"hast-util-to-string": "^2.0.0",
@@ -89,11 +90,10 @@
 		"html-escaper": "^3.0.3",
 		"lighthouse": "^10.1.0",
 		"prettier": "^2.8.7",
-		"prettier-plugin-astro": "^0.8.0",
 		"prettier-plugin-tailwindcss": "^0.2.7",
 		"typescript": "^5.0.4",
-		"unocss": "^0.50.7",
-		"vercel": "^28.18.3",
+		"unocss": "^0.51.0",
+		"vercel": "^28.18.4",
 		"vitest": "^0.29.8"
 	},
 	"engines": {
--- a/apps/guide/src/app/error.tsx
+++ b/apps/guide/src/app/error.tsx
@@ -4,7 +4,7 @@ export default function Error({ error }: { error: Error }) {
 	console.error(error);

 	return (
-		<div className="mx-auto flex h-full max-w-lg flex-col place-content-center place-items-center gap-8 px-8 py-16 lg:px-6 lg:py-0">
+		<div className="mx-auto flex min-h-screen max-w-lg flex-col place-content-center place-items-center gap-8 px-8 py-16 lg:px-6 lg:py-0">
 			<h1 className="text-[9rem] font-black leading-none md:text-[12rem]">500</h1>
 			<h2 className="text-[2rem] md:text-[3rem]">Error.</h2>
 		</div>
--- a/apps/guide/src/app/global-error.tsx
+++ b/apps/guide/src/app/global-error.tsx
@@ -10,8 +10,8 @@ export default function GlobalError({ error }: { error: Error }) {
 		<html className={inter.variable} lang="en" suppressHydrationWarning>
 			<body className="dark:bg-dark-800 bg-light-600">
 				<Providers>
-					<main className="mx-auto h-screen max-w-2xl">
-						<div className="mx-auto flex h-screen max-w-lg flex-col place-content-center place-items-center gap-8 px-8 py-16 lg:px-6 lg:py-0">
+					<main className="mx-auto min-h-screen max-w-2xl">
+						<div className="mx-auto flex min-h-screen max-w-lg flex-col place-content-center place-items-center gap-8 px-8 py-16 lg:px-6 lg:py-0">
 							<h1 className="text-[9rem] font-black leading-none md:text-[12rem]">500</h1>
 							<h2 className="text-[2rem] md:text-[3rem]">Error.</h2>
 						</div>
--- a/apps/guide/src/app/guide/[[...slug]]/page.tsx
+++ b/apps/guide/src/app/guide/[[...slug]]/page.tsx
@@ -3,7 +3,7 @@ import { notFound } from 'next/navigation';
 import { Mdx } from '~/components/Mdx';

 export async function generateStaticParams() {
-	return allContents.map((content) => ({ slug: content.slug }));
+	return allContents.map((content) => ({ slug: [content.slug] }));
 }

 export default function Page({ params }: { params: { slug: string[] } }) {
@@ -14,7 +14,7 @@ export default function Page({ params }: { params: { slug: string[] } }) {
 	}

 	return (
-		<article className="prose mx-auto max-w-4xl py-8">
+		<article className="prose max-w-none">
 			<Mdx code={content?.body.code ?? ''} />
 		</article>
 	);
--- a/apps/guide/src/app/guide/layout.tsx
+++ b/apps/guide/src/app/guide/layout.tsx
@@ -0,0 +1,25 @@
+import type { PropsWithChildren } from 'react';
+import { Providers } from './providers';
+import Footer from '~/components/Footer';
+import Header from '~/components/Header';
+import { Nav } from '~/components/Nav';
+
+export default function Layout({ children }: PropsWithChildren) {
+	return (
+		<Providers>
+			<main className="mx-auto max-w-7xl px-4 lg:max-w-full">
+				<Header />
+				<div className="relative top-6 mx-auto max-w-7xl gap-6 lg:flex lg:max-w-full">
+					<div className="lg:top-23 lg:sticky lg:h-[calc(100vh_-_100px)]">
+						<Nav />
+					</div>
+
+					<div className="min-w-xs mx-auto w-full max-w-5xl pb-10">
+						{children}
+						<Footer />
+					</div>
+				</div>
+			</main>
+		</Providers>
+	);
+}
--- a/apps/guide/src/app/guide/providers.tsx
+++ b/apps/guide/src/app/guide/providers.tsx
@@ -0,0 +1,8 @@
+'use client';
+
+import type { PropsWithChildren } from 'react';
+import { NavProvider } from '~/contexts/nav';
+
+export function Providers({ children }: PropsWithChildren) {
+	return <NavProvider>{children}</NavProvider>;
+}
--- a/apps/guide/src/app/layout.tsx
+++ b/apps/guide/src/app/layout.tsx
@@ -44,7 +44,10 @@ export const metadata: Metadata = {

 	manifest: '/site.webmanifest',

-	themeColor: '#5865f2',
+	themeColor: [
+		{ media: '(prefers-color-scheme: light)', color: '#f1f3f5' },
+		{ media: '(prefers-color-scheme: dark)', color: '#181818' },
+	],
 	colorScheme: 'light dark',

 	appleWebApp: {
--- a/apps/guide/src/components/Footer.tsx
+++ b/apps/guide/src/components/Footer.tsx
@@ -0,0 +1,79 @@
+import Image from 'next/image';
+import vercelLogo from '~/assets/powered-by-vercel.svg';
+
+export default function Footer() {
+	return (
+		<footer className="dark:bg-dark-800 bg-light-600 md:pl-12 md:pr-12">
+			<div className="mx-auto flex max-w-6xl flex-col place-items-center gap-12 pt-12 lg:place-content-center">
+				<div className="flex w-full flex-col place-content-between place-items-center gap-12 md:flex-row md:gap-0">
+					<a
+						className="focus:ring-width-2 focus:ring-blurple rounded outline-0 focus:ring"
+						href="https://vercel.com/?utm_source=discordjs&utm_campaign=oss"
+						rel="noopener noreferrer"
+						target="_blank"
+						title="Vercel"
+					>
+						<Image
+							alt="Vercel"
+							blurDataURL="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAABLCAQAAAA1k5H2AAAAi0lEQVR42u3SMQEAAAgDoC251a3gL2SgmfBYBRAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARCAgwWEOSWBnYbKggAAAABJRU5ErkJggg=="
+							placeholder="blur"
+							src={vercelLogo}
+						/>
+					</a>
+					<div className="flex flex-row gap-6 md:gap-12">
+						<div className="flex flex-col gap-2">
+							<div className="text-lg font-semibold">Community</div>
+							<div className="flex flex-col gap-1">
+								<a
+									className="focus:ring-width-2 focus:ring-blurple rounded outline-0 focus:ring"
+									href="https://discord.gg/djs"
+									rel="noopener noreferrer"
+									target="_blank"
+								>
+									Discord
+								</a>
+								<a
+									className="focus:ring-width-2 focus:ring-blurple rounded outline-0 focus:ring"
+									href="https://github.com/discordjs/discord.js/discussions"
+									rel="noopener noreferrer"
+									target="_blank"
+								>
+									GitHub discussions
+								</a>
+							</div>
+						</div>
+						<div className="flex flex-col gap-2">
+							<div className="text-lg font-semibold">Project</div>
+							<div className="flex flex-col gap-1">
+								<a
+									className="focus:ring-width-2 focus:ring-blurple rounded outline-0 focus:ring"
+									href="https://github.com/discordjs/discord.js"
+									rel="noopener noreferrer"
+									target="_blank"
+								>
+									discord.js
+								</a>
+								<a
+									className="focus:ring-width-2 focus:ring-blurple rounded outline-0 focus:ring"
+									href="https://discordjs.guide"
+									rel="noopener noreferrer"
+									target="_blank"
+								>
+									discord.js guide
+								</a>
+								<a
+									className="focus:ring-width-2 focus:ring-blurple rounded outline-0 focus:ring"
+									href="https://discord-api-types.dev"
+									rel="noopener noreferrer"
+									target="_blank"
+								>
+									discord-api-types
+								</a>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</footer>
+	);
+}
--- a/apps/guide/src/components/Header.tsx
+++ b/apps/guide/src/components/Header.tsx
@@ -0,0 +1,91 @@
+'use client';
+
+import { VscGithubInverted } from '@react-icons/all-files/vsc/VscGithubInverted';
+import { VscMenu } from '@react-icons/all-files/vsc/VscMenu';
+import { Button } from 'ariakit/button';
+import dynamic from 'next/dynamic';
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+import { Fragment, useMemo } from 'react';
+import { useNav } from '~/contexts/nav';
+
+const ThemeSwitcher = dynamic(async () => import('./ThemeSwitcher'));
+
+export default function Header() {
+	const pathname = usePathname();
+	const { setOpened } = useNav();
+
+	const pathElements = useMemo(
+		() =>
+			pathname
+				.split('/')
+				.slice(1)
+				.map((path, idx, original) => (
+					<Link
+						className="focus:ring-width-2 focus:ring-blurple rounded outline-0 hover:underline focus:ring"
+						href={`/${original.slice(0, idx + 1).join('/')}`}
+						key={`${path}-${idx}`}
+					>
+						{path}
+					</Link>
+				)),
+		[pathname],
+	);
+
+	const breadcrumbs = useMemo(
+		() =>
+			pathElements.flatMap((el, idx, array) => {
+				if (idx === 0) {
+					return (
+						<Fragment key={`${el.key}-${idx}`}>
+							<div className="mx-2">/</div>
+							{el}
+							<div className="mx-2">/</div>
+						</Fragment>
+					);
+				}
+
+				if (idx !== array.length - 1) {
+					return (
+						<Fragment key={`${el.key}-${idx}`}>
+							{el}
+							<div className="mx-2">/</div>
+						</Fragment>
+					);
+				}
+
+				return <Fragment key={`${el.key}-${idx}`}>{el}</Fragment>;
+			}),
+		[pathElements],
+	);
+
+	return (
+		<header className="dark:bg-dark/50 dark:border-dark-100 border-light-900 sticky top-4 z-20 rounded-md border bg-white/50 shadow backdrop-blur-md">
+			<div className="block h-16 px-6">
+				<div className="flex h-full flex-row place-content-between place-items-center gap-8">
+					<Button
+						aria-label="Menu"
+						className="focus:ring-width-2 focus:ring-blurple flex h-6 w-6 transform-gpu cursor-pointer select-none appearance-none flex-row place-items-center rounded border-0 bg-transparent p-0 text-sm font-semibold leading-none no-underline outline-0 focus:ring active:translate-y-px lg:hidden"
+						onClick={() => setOpened((open) => !open)}
+					>
+						<VscMenu size={24} />
+					</Button>
+					<div className="hidden lg:flex lg:flex-row lg:overflow-hidden">{breadcrumbs}</div>
+					<div className="flex flex-row place-items-center gap-4">
+						<Button
+							aria-label="GitHub"
+							as="a"
+							className="focus:ring-width-2 focus:ring-blurple flex h-6 w-6 transform-gpu cursor-pointer select-none appearance-none flex-row place-items-center rounded rounded-full border-0 bg-transparent p-0 text-sm font-semibold leading-none no-underline outline-0 focus:ring active:translate-y-px"
+							href="https://github.com/discordjs/discord.js"
+							rel="noopener noreferrer"
+							target="_blank"
+						>
+							<VscGithubInverted size={24} />
+						</Button>
+						<ThemeSwitcher />
+					</div>
+				</div>
+			</div>
+		</header>
+	);
+}
--- a/apps/guide/src/components/Nav.tsx
+++ b/apps/guide/src/components/Nav.tsx
@@ -0,0 +1,30 @@
+'use client';
+
+import { Scrollbars } from 'react-custom-scrollbars-2';
+import { Sidebar } from './Sidebar';
+import { useNav } from '~/contexts/nav';
+
+export function Nav() {
+	const { opened } = useNav();
+
+	return (
+		<nav
+			className={`dark:bg-dark/75 dark:border-dark-100 border-light-900 top-22 fixed bottom-4 left-4 right-4 z-20 mx-auto max-w-5xl rounded-md border bg-white/75 shadow backdrop-blur-md ${
+				opened ? 'block' : 'hidden'
+			} lg:min-w-xs lg:sticky lg:block lg:h-full lg:w-full lg:max-w-xs`}
+		>
+			<Scrollbars
+				autoHide
+				className="[&>div]:overscroll-none"
+				hideTracksWhenNotNeeded
+				renderThumbVertical={(props) => <div {...props} className="dark:bg-dark-100 bg-light-900 z-30 rounded" />}
+				renderTrackVertical={(props) => (
+					<div {...props} className="absolute bottom-0.5 right-0.5 top-0.5 z-30 w-1.5 rounded" />
+				)}
+				universal
+			>
+				<Sidebar />
+			</Scrollbars>
+		</nav>
+	);
+}
--- a/apps/guide/src/components/Navbar.tsx
+++ b/apps/guide/src/components/Navbar.tsx
@@ -1,70 +0,0 @@
-import { Button } from 'ariakit/button';
-import { useState, useEffect } from 'react';
-import { FiCommand } from 'react-icons/fi';
-import { VscColorMode, VscGithubInverted, VscMenu, VscSearch } from 'react-icons/vsc';
-import { useMedia } from 'react-use';
-import { Sidebar } from './Sidebar.jsx';
-import type { MDXPage } from './SidebarItems.jsx';
-
-export function Navbar({ pages }: { pages?: MDXPage[] | undefined }) {
-	const matches = useMedia('(min-width: 992px)', false);
-	const [opened, setOpened] = useState(false);
-
-	useEffect(() => {
-		if (matches) {
-			setOpened(false);
-		}
-	}, [matches]);
-
-	return (
-		<>
-			<header className="dark:bg-dark-400 dark:border-dark-100 bg-light-600 border-light-800 fixed left-0 top-0 z-20 w-full border-b">
-				<div className="block h-16 px-6">
-					<div className="flex h-full flex-row place-content-between place-items-center">
-						<Button
-							aria-label="Menu"
-							className="focus:ring-width-2 focus:ring-blurple flex h-6 w-6 transform-gpu cursor-pointer select-none appearance-none place-items-center rounded border-0 bg-transparent p-0 text-sm font-semibold leading-none no-underline outline-0 focus:ring active:translate-y-px lg:hidden"
-							onClick={() => setOpened((open) => !open)}
-						>
-							<VscMenu size={24} />
-						</Button>
-						<div className="hidden md:flex md:flex-row">Placeholder</div>
-						<div className="flex flex-row place-items-center gap-4">
-							<Button
-								as="div"
-								className="dark:bg-dark-800 focus:ring-width-2 focus:ring-blurple rounded bg-white px-4 py-2.5 outline-0 focus:ring"
-								// onClick={() => dialog?.toggle()}
-							>
-								<div className="flex flex-row place-items-center gap-4">
-									<VscSearch size={18} />
-									<span className="opacity-65">Search...</span>
-									<div className="opacity-65 flex flex-row place-items-center gap-2">
-										<FiCommand size={18} /> K
-									</div>
-								</div>
-							</Button>
-							<Button
-								aria-label="GitHub"
-								as="a"
-								className="focus:ring-width-2 focus:ring-blurple flex h-6 w-6 transform-gpu cursor-pointer select-none appearance-none place-items-center rounded rounded-full border-0 bg-transparent p-0 text-sm font-semibold leading-none no-underline outline-0 focus:ring active:translate-y-px"
-								href="https://github.com/discordjs/discord.js"
-								rel="noopener noreferrer"
-								target="_blank"
-							>
-								<VscGithubInverted size={24} />
-							</Button>
-							<Button
-								aria-label="Toggle theme"
-								className="focus:ring-width-2 focus:ring-blurple flex h-6 w-6 transform-gpu cursor-pointer select-none appearance-none place-items-center rounded rounded-full border-0 bg-transparent p-0 text-sm font-semibold leading-none no-underline outline-0 focus:ring active:translate-y-px"
-								// onClick={() => toggleTheme()}
-							>
-								<VscColorMode size={24} />
-							</Button>
-						</div>
-					</div>
-				</div>
-			</header>
-			<Sidebar opened={opened} pages={pages} />
-		</>
-	);
-}
--- a/apps/guide/src/components/Sidebar.tsx
+++ b/apps/guide/src/components/Sidebar.tsx
@@ -1,24 +1,8 @@
-import { Scrollbars } from 'react-custom-scrollbars-2';
-import type { MDXPage } from './SidebarItems.jsx';
+'use client';

-export function Sidebar({ pages, opened }: { opened: boolean; pages?: MDXPage[] | undefined }) {
-	return (
-		<nav
-			className={`h-[calc(100vh - 65px)] dark:bg-dark-600 dark:border-dark-100 border-light-800 fixed bottom-0 left-0 top-[65px] z-20 w-full border-r bg-white ${
-				opened ? 'block' : 'hidden'
-			} lg:w-76 lg:max-w-76 lg:block`}
-		>
-			<Scrollbars
-				autoHide
-				hideTracksWhenNotNeeded
-				renderThumbVertical={(props) => <div {...props} className="dark:bg-dark-100 bg-light-900 z-30 rounded" />}
-				renderTrackVertical={(props) => (
-					<div {...props} className="absolute bottom-0.5 right-0.5 top-0.5 z-30 w-1.5 rounded" />
-				)}
-				universal
-			>
-				{pages ?? null}
-			</Scrollbars>
-		</nav>
-	);
+export function Sidebar() {
+	// const pathname = usePathname();
+	// const { setOpened } = useNav();
+
+	return null;
 }
--- a/apps/guide/src/components/ThemeSwitcher.tsx
+++ b/apps/guide/src/components/ThemeSwitcher.tsx
@@ -0,0 +1,20 @@
+'use client';
+
+import { VscColorMode } from '@react-icons/all-files/vsc/VscColorMode';
+import { Button } from 'ariakit/button';
+import { useTheme } from 'next-themes';
+
+export default function ThemeSwitcher() {
+	const { resolvedTheme, setTheme } = useTheme();
+	const toggleTheme = () => setTheme(resolvedTheme === 'light' ? 'dark' : 'light');
+
+	return (
+		<Button
+			aria-label="Toggle theme"
+			className="focus:ring-width-2 focus:ring-blurple flex h-6 w-6 transform-gpu cursor-pointer select-none appearance-none flex-row place-items-center rounded rounded-full border-0 bg-transparent p-0 text-sm font-semibold leading-none no-underline outline-0 focus:ring active:translate-y-px"
+			onClick={() => toggleTheme()}
+		>
+			<VscColorMode size={24} />
+		</Button>
+	);
+}
--- a/apps/guide/src/contexts/nav.tsx
+++ b/apps/guide/src/contexts/nav.tsx
@@ -0,0 +1,27 @@
+'use client';
+
+import {
+	type PropsWithChildren,
+	type Dispatch,
+	type SetStateAction,
+	createContext,
+	useContext,
+	useState,
+	useMemo,
+} from 'react';
+
+export const NavContext = createContext<{ opened: boolean; setOpened: Dispatch<SetStateAction<boolean>> }>({
+	opened: false,
+	setOpened: (_) => {},
+});
+
+export const NavProvider = ({ children }: PropsWithChildren) => {
+	const [opened, setOpened] = useState(false);
+	const value = useMemo(() => ({ opened, setOpened }), [opened]);
+
+	return <NavContext.Provider value={value}>{children}</NavContext.Provider>;
+};
+
+export function useNav() {
+	return useContext(NavContext);
+}
--- a/apps/guide/src/styles/ch.css
+++ b/apps/guide/src/styles/ch.css
@@ -1,82 +0,0 @@
-:root {
-	--shiki-color-text: #24292eff;
-	--shiki-color-background: #ffffff;
-	--shiki-token-constant: #1976d2;
-	--shiki-token-string: #6f42c1;
-	--shiki-token-comment: #c2c3c5;
-	--shiki-token-keyword: #d32f2f;
-	--shiki-token-parameter: #ff9800;
-	--shiki-token-function: #6f42c1;
-	--shiki-token-string-expression: #22863a;
-	--shiki-token-punctuation: #212121;
-	--shiki-token-link: #22863a;
-
-	--ch-tabs-bg: #f6f6f6;
-	--ch-tab-border: #f6f6f6;
-	--ch-tab-active-border: #fff;
-	--ch-tab-active-bg: #24292eff;
-	--ch-tab-inactive-color: #bdbdbd;
-	--ch-tab-inactive-bg: #f6f6f6;
-	--ch-icon-text: #24292eff;
-}
-
-.ch-code,
-.ch-inline-code > code {
-	background: var(--shiki-color-background) !important;
-}
-
-.ch-code {
-	color-scheme: light !important;
-}
-
-.ch-code-multiline-mark {
-	background: rgba(253, 255, 0, 0.2) !important;
-}
-
-.ch-codegroup .ch-editor-button,
-.ch-codeblock .ch-code-button {
-	color: var(--ch-icon-text) !important;
-}
-
-div.ch-editor-tab-active {
-	color: var(--ch-tab-active-color) !important;
-}
-
-html.dark {
-	--shiki-color-text: #adbac7;
-	--shiki-color-background: #22272e;
-	--shiki-token-constant: #f47067;
-	--shiki-token-string: #96d0ff;
-	--shiki-token-comment: #768390;
-	--shiki-token-keyword: #f47067;
-	--shiki-token-parameter: #adbac7;
-	--shiki-token-function: #dcbdfb;
-	--shiki-token-string-expression: #8ddb8c;
-	--shiki-token-punctuation: #adbac7;
-	--shiki-token-link: #adbac7;
-
-	--ch-tabs-bg: #1c2128;
-	--ch-tab-border: #444c56;
-	--ch-tab-active-border: #22272e;
-	--ch-tab-active-bg: #22272e;
-	--ch-tab-inactive-color: #768390;
-	--ch-tab-inactive-bg: #1c2128;
-	--ch-icon-text: #768390;
-}
-
-.dark .ch-codegroup .ch-editor-button,
-.ch-codeblock .ch-code-button {
-	color: var(--ch-icon-text) !important;
-}
-
-.dark div.ch-editor-tab-active {
-	color: var(--ch-tab-active-color) !important;
-}
-
-.dark .ch-code {
-	color-scheme: dark !important;
-}
-
-.dark .ch-code-multiline-mark {
-	background: rgba(255, 255, 255, 0.043) !important;
-}
--- a/apps/guide/src/styles/code-hike-theme-dark-plus.json
+++ b/apps/guide/src/styles/code-hike-theme-dark-plus.json
@@ -0,0 +1,566 @@
+{
+	"$schema": "vscode://schemas/color-theme",
+	"name": "dark-plus",
+	"tokenColors": [
+		{
+			"settings": {
+				"foreground": "#D4D4D4"
+			}
+		},
+		{
+			"scope": ["meta.embedded", "source.groovy.embedded", "string meta.image.inline.markdown"],
+			"settings": {
+				"foreground": "#D4D4D4"
+			}
+		},
+		{
+			"scope": "emphasis",
+			"settings": {
+				"fontStyle": "italic"
+			}
+		},
+		{
+			"scope": "strong",
+			"settings": {
+				"fontStyle": "bold"
+			}
+		},
+		{
+			"scope": "header",
+			"settings": {
+				"foreground": "#000080"
+			}
+		},
+		{
+			"scope": "comment",
+			"settings": {
+				"foreground": "#6A9955"
+			}
+		},
+		{
+			"scope": "constant.language",
+			"settings": {
+				"foreground": "#569cd6"
+			}
+		},
+		{
+			"scope": [
+				"constant.numeric",
+				"variable.other.enummember",
+				"keyword.operator.plus.exponent",
+				"keyword.operator.minus.exponent"
+			],
+			"settings": {
+				"foreground": "#b5cea8"
+			}
+		},
+		{
+			"scope": "constant.regexp",
+			"settings": {
+				"foreground": "#646695"
+			}
+		},
+		{
+			"scope": "entity.name.tag",
+			"settings": {
+				"foreground": "#569cd6"
+			}
+		},
+		{
+			"scope": "entity.name.tag.css",
+			"settings": {
+				"foreground": "#d7ba7d"
+			}
+		},
+		{
+			"scope": "entity.other.attribute-name",
+			"settings": {
+				"foreground": "#9cdcfe"
+			}
+		},
+		{
+			"scope": [
+				"entity.other.attribute-name.class.css",
+				"entity.other.attribute-name.class.mixin.css",
+				"entity.other.attribute-name.id.css",
+				"entity.other.attribute-name.parent-selector.css",
+				"entity.other.attribute-name.pseudo-class.css",
+				"entity.other.attribute-name.pseudo-element.css",
+				"source.css.less entity.other.attribute-name.id",
+				"entity.other.attribute-name.scss"
+			],
+			"settings": {
+				"foreground": "#d7ba7d"
+			}
+		},
+		{
+			"scope": "invalid",
+			"settings": {
+				"foreground": "#f44747"
+			}
+		},
+		{
+			"scope": "markup.underline",
+			"settings": {
+				"fontStyle": "underline"
+			}
+		},
+		{
+			"scope": "markup.bold",
+			"settings": {
+				"fontStyle": "bold",
+				"foreground": "#569cd6"
+			}
+		},
+		{
+			"scope": "markup.heading",
+			"settings": {
+				"fontStyle": "bold",
+				"foreground": "#569cd6"
+			}
+		},
+		{
+			"scope": "markup.italic",
+			"settings": {
+				"fontStyle": "italic"
+			}
+		},
+		{
+			"scope": "markup.strikethrough",
+			"settings": {
+				"fontStyle": "strikethrough"
+			}
+		},
+		{
+			"scope": "markup.inserted",
+			"settings": {
+				"foreground": "#b5cea8"
+			}
+		},
+		{
+			"scope": "markup.deleted",
+			"settings": {
+				"foreground": "#ce9178"
+			}
+		},
+		{
+			"scope": "markup.changed",
+			"settings": {
+				"foreground": "#569cd6"
+			}
+		},
+		{
+			"scope": "punctuation.definition.quote.begin.markdown",
+			"settings": {
+				"foreground": "#6A9955"
+			}
+		},
+		{
+			"scope": "punctuation.definition.list.begin.markdown",
+			"settings": {
+				"foreground": "#6796e6"
+			}
+		},
+		{
+			"scope": "markup.inline.raw",
+			"settings": {
+				"foreground": "#ce9178"
+			}
+		},
+		{
+			"name": "brackets of XML/HTML tags",
+			"scope": "punctuation.definition.tag",
+			"settings": {
+				"foreground": "#808080"
+			}
+		},
+		{
+			"scope": ["meta.preprocessor", "entity.name.function.preprocessor"],
+			"settings": {
+				"foreground": "#569cd6"
+			}
+		},
+		{
+			"scope": "meta.preprocessor.string",
+			"settings": {
+				"foreground": "#ce9178"
+			}
+		},
+		{
+			"scope": "meta.preprocessor.numeric",
+			"settings": {
+				"foreground": "#b5cea8"
+			}
+		},
+		{
+			"scope": "meta.structure.dictionary.key.python",
+			"settings": {
+				"foreground": "#9cdcfe"
+			}
+		},
+		{
+			"scope": "meta.diff.header",
+			"settings": {
+				"foreground": "#569cd6"
+			}
+		},
+		{
+			"scope": "storage",
+			"settings": {
+				"foreground": "#569cd6"
+			}
+		},
+		{
+			"scope": "storage.type",
+			"settings": {
+				"foreground": "#569cd6"
+			}
+		},
+		{
+			"scope": ["storage.modifier", "keyword.operator.noexcept"],
+			"settings": {
+				"foreground": "#569cd6"
+			}
+		},
+		{
+			"scope": ["string", "meta.embedded.assembly"],
+			"settings": {
+				"foreground": "#ce9178"
+			}
+		},
+		{
+			"scope": "string.tag",
+			"settings": {
+				"foreground": "#ce9178"
+			}
+		},
+		{
+			"scope": "string.value",
+			"settings": {
+				"foreground": "#ce9178"
+			}
+		},
+		{
+			"scope": "string.regexp",
+			"settings": {
+				"foreground": "#d16969"
+			}
+		},
+		{
+			"name": "String interpolation",
+			"scope": [
+				"punctuation.definition.template-expression.begin",
+				"punctuation.definition.template-expression.end",
+				"punctuation.section.embedded"
+			],
+			"settings": {
+				"foreground": "#569cd6"
+			}
+		},
+		{
+			"name": "Reset JavaScript string interpolation expression",
+			"scope": ["meta.template.expression"],
+			"settings": {
+				"foreground": "#d4d4d4"
+			}
+		},
+		{
+			"scope": [
+				"support.type.vendored.property-name",
+				"support.type.property-name",
+				"variable.css",
+				"variable.scss",
+				"variable.other.less",
+				"source.coffee.embedded"
+			],
+			"settings": {
+				"foreground": "#9cdcfe"
+			}
+		},
+		{
+			"scope": "keyword",
+			"settings": {
+				"foreground": "#569cd6"
+			}
+		},
+		{
+			"scope": "keyword.control",
+			"settings": {
+				"foreground": "#569cd6"
+			}
+		},
+		{
+			"scope": "keyword.operator",
+			"settings": {
+				"foreground": "#d4d4d4"
+			}
+		},
+		{
+			"scope": [
+				"keyword.operator.new",
+				"keyword.operator.expression",
+				"keyword.operator.cast",
+				"keyword.operator.sizeof",
+				"keyword.operator.alignof",
+				"keyword.operator.typeid",
+				"keyword.operator.alignas",
+				"keyword.operator.instanceof",
+				"keyword.operator.logical.python",
+				"keyword.operator.wordlike"
+			],
+			"settings": {
+				"foreground": "#569cd6"
+			}
+		},
+		{
+			"scope": "keyword.other.unit",
+			"settings": {
+				"foreground": "#b5cea8"
+			}
+		},
+		{
+			"scope": ["punctuation.section.embedded.begin.php", "punctuation.section.embedded.end.php"],
+			"settings": {
+				"foreground": "#569cd6"
+			}
+		},
+		{
+			"scope": "support.function.git-rebase",
+			"settings": {
+				"foreground": "#9cdcfe"
+			}
+		},
+		{
+			"scope": "constant.sha.git-rebase",
+			"settings": {
+				"foreground": "#b5cea8"
+			}
+		},
+		{
+			"name": "coloring of the Java import and package identifiers",
+			"scope": ["storage.modifier.import.java", "variable.language.wildcard.java", "storage.modifier.package.java"],
+			"settings": {
+				"foreground": "#d4d4d4"
+			}
+		},
+		{
+			"name": "this.self",
+			"scope": "variable.language",
+			"settings": {
+				"foreground": "#569cd6"
+			}
+		},
+		{
+			"name": "Function declarations",
+			"scope": [
+				"entity.name.function",
+				"support.function",
+				"support.constant.handlebars",
+				"source.powershell variable.other.member",
+				"entity.name.operator.custom-literal"
+			],
+			"settings": {
+				"foreground": "#DCDCAA"
+			}
+		},
+		{
+			"name": "Types declaration and references",
+			"scope": [
+				"support.class",
+				"support.type",
+				"entity.name.type",
+				"entity.name.namespace",
+				"entity.other.attribute",
+				"entity.name.scope-resolution",
+				"entity.name.class",
+				"storage.type.numeric.go",
+				"storage.type.byte.go",
+				"storage.type.boolean.go",
+				"storage.type.string.go",
+				"storage.type.uintptr.go",
+				"storage.type.error.go",
+				"storage.type.rune.go",
+				"storage.type.cs",
+				"storage.type.generic.cs",
+				"storage.type.modifier.cs",
+				"storage.type.variable.cs",
+				"storage.type.annotation.java",
+				"storage.type.generic.java",
+				"storage.type.java",
+				"storage.type.object.array.java",
+				"storage.type.primitive.array.java",
+				"storage.type.primitive.java",
+				"storage.type.token.java",
+				"storage.type.groovy",
+				"storage.type.annotation.groovy",
+				"storage.type.parameters.groovy",
+				"storage.type.generic.groovy",
+				"storage.type.object.array.groovy",
+				"storage.type.primitive.array.groovy",
+				"storage.type.primitive.groovy"
+			],
+			"settings": {
+				"foreground": "#4EC9B0"
+			}
+		},
+		{
+			"name": "Types declaration and references, TS grammar specific",
+			"scope": [
+				"meta.type.cast.expr",
+				"meta.type.new.expr",
+				"support.constant.math",
+				"support.constant.dom",
+				"support.constant.json",
+				"entity.other.inherited-class"
+			],
+			"settings": {
+				"foreground": "#4EC9B0"
+			}
+		},
+		{
+			"name": "Control flow / Special keywords",
+			"scope": [
+				"keyword.control",
+				"source.cpp keyword.operator.new",
+				"keyword.operator.delete",
+				"keyword.other.using",
+				"keyword.other.operator",
+				"entity.name.operator"
+			],
+			"settings": {
+				"foreground": "#C586C0"
+			}
+		},
+		{
+			"name": "Variable and parameter name",
+			"scope": [
+				"variable",
+				"meta.definition.variable.name",
+				"support.variable",
+				"entity.name.variable",
+				"constant.other.placeholder"
+			],
+			"settings": {
+				"foreground": "#9CDCFE"
+			}
+		},
+		{
+			"name": "Constants and enums",
+			"scope": ["variable.other.constant", "variable.other.enummember"],
+			"settings": {
+				"foreground": "#4FC1FF"
+			}
+		},
+		{
+			"name": "Object keys, TS grammar specific",
+			"scope": ["meta.object-literal.key"],
+			"settings": {
+				"foreground": "#9CDCFE"
+			}
+		},
+		{
+			"name": "CSS property value",
+			"scope": [
+				"support.constant.property-value",
+				"support.constant.font-name",
+				"support.constant.media-type",
+				"support.constant.media",
+				"constant.other.color.rgb-value",
+				"constant.other.rgb-value",
+				"support.constant.color"
+			],
+			"settings": {
+				"foreground": "#CE9178"
+			}
+		},
+		{
+			"name": "Regular expression groups",
+			"scope": [
+				"punctuation.definition.group.regexp",
+				"punctuation.definition.group.assertion.regexp",
+				"punctuation.definition.character-class.regexp",
+				"punctuation.character.set.begin.regexp",
+				"punctuation.character.set.end.regexp",
+				"keyword.operator.negation.regexp",
+				"support.other.parenthesis.regexp"
+			],
+			"settings": {
+				"foreground": "#CE9178"
+			}
+		},
+		{
+			"scope": [
+				"constant.character.character-class.regexp",
+				"constant.other.character-class.set.regexp",
+				"constant.other.character-class.regexp",
+				"constant.character.set.regexp"
+			],
+			"settings": {
+				"foreground": "#d16969"
+			}
+		},
+		{
+			"scope": ["keyword.operator.or.regexp", "keyword.control.anchor.regexp"],
+			"settings": {
+				"foreground": "#DCDCAA"
+			}
+		},
+		{
+			"scope": "keyword.operator.quantifier.regexp",
+			"settings": {
+				"foreground": "#d7ba7d"
+			}
+		},
+		{
+			"scope": "constant.character",
+			"settings": {
+				"foreground": "#569cd6"
+			}
+		},
+		{
+			"scope": "constant.character.escape",
+			"settings": {
+				"foreground": "#d7ba7d"
+			}
+		},
+		{
+			"scope": "entity.name.label",
+			"settings": {
+				"foreground": "#C8C8C8"
+			}
+		}
+	],
+	"semanticTokenColors": {
+		"newOperator": "#C586C0",
+		"stringLiteral": "#ce9178",
+		"customLiteral": "#DCDCAA",
+		"numberLiteral": "#b5cea8"
+	},
+	"colors": {
+		"checkbox.border": "#6B6B6B",
+		"editor.background": "#1E1E1E",
+		"editor.foreground": "#D4D4D4",
+		"editor.inactiveSelectionBackground": "#3A3D41",
+		"editorIndentGuide.background": "#404040",
+		"editorIndentGuide.activeBackground": "#707070",
+		"editor.selectionHighlightBackground": "#ADD6FF26",
+		"list.dropBackground": "#383B3D",
+		"activityBarBadge.background": "#007ACC",
+		"sideBarTitle.foreground": "#BBBBBB",
+		"input.placeholderForeground": "#A6A6A6",
+		"menu.background": "#252526",
+		"menu.foreground": "#CCCCCC",
+		"menu.separatorBackground": "#454545",
+		"menu.border": "#454545",
+		"statusBarItem.remoteForeground": "#FFF",
+		"statusBarItem.remoteBackground": "#16825D",
+		"ports.iconRunningProcessForeground": "#369432",
+		"sideBarSectionHeader.background": "#0000",
+		"sideBarSectionHeader.border": "#ccc3",
+		"tab.lastPinnedBorder": "#ccc3",
+		"list.activeSelectionIconForeground": "#FFF",
+		"terminal.inactiveSelectionBackground": "#3A3D41",
+		"widget.border": "#303031"
+	},
+	"type": "dark"
+}
--- a/apps/website/package.json
+++ b/apps/website/package.json
@@ -54,13 +54,13 @@
 		"@react-icons/all-files": "^4.1.0",
 		"@vercel/analytics": "^0.1.11",
 		"@vercel/edge-config": "^0.1.6",
-		"@vercel/og": "^0.5.0",
+		"@vercel/og": "^0.5.1",
 		"@vscode/codicons": "^0.0.32",
 		"ariakit": "^2.0.0-next.43",
 		"bright": "^0.7.1",
 		"cmdk": "^0.2.0",
-		"meilisearch": "^0.32.2",
-		"next": "^13.3.1-canary.2",
+		"meilisearch": "^0.32.3",
+		"next": "^13.3.1-canary.3",
 		"next-mdx-remote": "^4.4.1",
 		"next-themes": "^0.2.1",
 		"react": "^18.2.0",
@@ -82,23 +82,23 @@
 		"@types/node": "18.15.11",
 		"@types/react": "^18.0.33",
 		"@types/react-dom": "^18.0.11",
-		"@unocss/cli": "^0.50.7",
-		"@unocss/reset": "^0.50.7",
+		"@unocss/cli": "^0.51.0",
+		"@unocss/reset": "^0.51.0",
 		"@vitejs/plugin-react": "^3.1.0",
 		"@vitest/coverage-c8": "^0.29.8",
 		"concurrently": "^8.0.1",
 		"cpy-cli": "^4.2.0",
 		"cross-env": "^7.0.3",
-		"eslint": "^8.37.0",
-		"eslint-config-neon": "^0.1.41",
+		"eslint": "^8.38.0",
+		"eslint-config-neon": "^0.1.42",
 		"eslint-formatter-pretty": "^5.0.0",
 		"happy-dom": "^9.1.9",
 		"lighthouse": "^10.1.0",
 		"prettier": "^2.8.7",
 		"prettier-plugin-tailwindcss": "^0.2.7",
 		"typescript": "^5.0.4",
-		"unocss": "^0.50.7",
-		"vercel": "^28.18.3",
+		"unocss": "^0.51.0",
+		"vercel": "^28.18.4",
 		"vitest": "^0.29.8"
 	},
 	"engines": {