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

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
 ```