feat(website): render syntax and mdx on the server (#9086)

apps/guide/astro.config.ts

@@ -92,7 +92,6 @@ export default defineConfig({
 		compress(),
 	],
 	markdown: {
-		extendDefaultPlugins: true,
 		syntaxHighlight: false,
 	},
 	vite: {

apps/guide/package.json

@@ -60,7 +60,7 @@
 		"@unocss/reset": "^0.50.6",
 		"@vitejs/plugin-react": "^3.1.0",
 		"@vitest/coverage-c8": "^0.29.7",
-		"astro": "^1.9.2",
+		"astro": "^2.1.5",
 		"astro-compress": "^1.1.35",
 		"astro-critters": "^1.1.31",
 		"cross-env": "^7.0.3",
@@ -80,7 +80,7 @@
 		"shiki": "^0.14.1",
 		"typescript": "^5.0.2",
 		"unocss": "^0.50.6",
-		"vercel": "^28.18.0",
+		"vercel": "^28.18.1",
 		"vitest": "^0.29.7"
 	},
 	"engines": {

apps/guide/src/components/SidebarItems.tsx

@@ -28,7 +28,7 @@ export function SidebarItems({ pages }: { pages: MDXPage[] }) {
 	}, [state]);
 
 	return Object.keys(categories).map((category, idx) => (
-		<Section key={idx} title={category}>
+		<Section key={`${category}-${idx}`} title={category}>
 			{categories[category]?.map((member, index) => (
 				<a
 					className={`dark:border-dark-100 border-light-800 focus:ring-width-2 focus:ring-blurple ml-5 flex flex-col border-l p-[5px] pl-6 outline-0 focus:rounded focus:border-0 focus:ring ${
@@ -38,7 +38,7 @@ export function SidebarItems({ pages }: { pages: MDXPage[] }) {
 					}`}
 					// eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
 					href={member.url || '/'}
-					key={index}
+					key={`${member.frontmatter.title}-${index}}`}
 					title={member.frontmatter.title}
 				>
 					<div className="flex flex-row place-items-center gap-2 lg:text-sm">

apps/guide/src/components/SidebarLayout.astro

@@ -28,7 +28,6 @@ const curCategoryPages = groupedPages[category];
 const curCategoryIndex = curCategoryPages!.findIndex((page) => page.url === url);
 
 const pagePrev = curCategoryPages![curCategoryIndex - 1];
-// eslint-disable-next-line @typescript-eslint/restrict-plus-operands
 const pageNext = curCategoryPages![curCategoryIndex + 1];
 ---
 

apps/guide/src/env.d.ts

@@ -0,0 +1,2 @@
+/* eslint-disable @typescript-eslint/triple-slash-reference */
+/// <reference types="@astrojs/image/client" />

apps/guide/src/layouts/SidebarLayout.astro

@@ -26,7 +26,7 @@ const props = Astro.props;
 		<meta content="website" property="og:type" />
 		<meta content="discord.js guide" property="og:title" />
 		<meta content={DESCRIPTION} name="og:description" />
-		<meta content="https://discordjs.dev/open-graph.png" property="og:image" />
+		<meta content="https://discordjs.dev/api/open-graph.png" property="og:image" />
 		<meta content="summary_large_image" name="twitter:card" />
 		<meta content="@iCrawlToGo" name="twitter:creator" />
 

apps/guide/src/pages/creating-your-bot/index.mdx

@@ -78,15 +78,15 @@ You can use the [_`dotenv`_ package](https://www.npmjs.com/package/dotenv) for t
 
 <CH.Code client:load>
 
-```shellscript npm
+```sh npm
 npm install dotenv
 ```
 
-```shellscript yarn
+```sh yarn
 yarn add dotenv
 ```
 
-```shellscript pnpm
+```sh pnpm
 pnpm add dotenv
 ```