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

.github/CONTRIBUTING.md

@@ -40,7 +40,7 @@ For example, to automatically recompile the `@discordjs/rest` project when chang
 
 If you'd like to create another package under the `@discordjs` organization run the following command:
 
-```bash
+```sh
 yarn create-package <package-name> [package-description]
 ```
 

.yarn/patches/@microsoft-tsdoc-config-npm-0.16.2-30fd115d09.patch

@@ -1,5 +1,5 @@
 diff --git a/lib/TSDocConfigFile.js b/lib/TSDocConfigFile.js
-index caf3515d60fd386c5909db5a0aa8b4180b10d602..6fa4f1984b6ba6b3a7aecd05e54477ebf141af94 100644
+index caf3515d60fd386c5909db5a0aa8b4180b10d602..5f7cfed7611e3fe660b5265ff99c5da0beb7caec 100644
 --- a/lib/TSDocConfigFile.js
 +++ b/lib/TSDocConfigFile.js
 @@ -31,8 +31,7 @@ const ajv_1 = __importDefault(require("ajv"));
@@ -8,7 +8,7 @@ index caf3515d60fd386c5909db5a0aa8b4180b10d602..6fa4f1984b6ba6b3a7aecd05e54477eb
  function initializeSchemaValidator() {
 -    const jsonSchemaPath = resolve.sync('@microsoft/tsdoc/schemas/tsdoc.schema.json', { basedir: __dirname });
 -    const jsonSchemaContent = fs.readFileSync(jsonSchemaPath).toString();
-+    const jsonSchemaContent = "{\"title\":\"TSDoc Configuration\",\"description\":\"Describes the TSDoc configuration for a TypeScript project\",\"type\":\"object\",\"properties\":{\"$schema\":{\"description\":\"Part of the JSON Schema standard, this optional keyword declares the URL of the schema that the file conforms to. Editors may download the schema and use it to perform syntax highlighting.\",\"type\":\"string\"},\"extends\":{\"description\":\"Optionally specifies one or more JSON config files that will be combined with this file.  This provides a way for standard settings to be shared across multiple projects.  Important: The \\\"extends\\\" paths are resolved using NodeJS module resolution, so a path to a local file MUST be prefixed with \\\"./\\\".\",\"type\":\"array\",\"items\":{\"type\":\"string\"}},\"noStandardTags\":{\"description\":\"By default, the config file loader will predefine all of the standardized TSDoc tags.  To disable this and start with a completely empty configuration, set \\\"noStandardTags\\\"=true.\",\"type\":\"boolean\"},\"tagDefinitions\":{\"description\":\"Additional tags to support when parsing documentation comments with TSDoc.\",\"type\":\"array\",\"items\":{\"$ref\":\"#/definitions/tsdocTagDefinition\"}},\"supportedHtmlElements\":{\"description\":\"The HTML element names that are supported in this configuration. Used in conjunction with the \\\"reportUnsupportedHtmlElements\\\" setting.\",\"type\":\"array\",\"items\":{\"type\":\"string\",\"pattern\":\"^[a-zA-Z0-9-]+$\"}},\"reportUnsupportedHtmlElements\":{\"description\":\"Whether an error should be reported when an unsupported HTML element is encountered in a doc comment. Defaults to \\\"true\\\" if the \\\"supportedHtmlElements\\\" field is present in this file, \\\"false\\\" if not.\",\"type\":\"boolean\"},\"supportForTags\":{\"description\":\"A collection of key/value pairs.  The key is a TSDoc tag name (e.g. \\\"@myTag\\\") that must be defined in this configuration.  The value is a boolean indicating whether the tag is supported.  The TSDoc parser may report warnings when unsupported tags are encountered.  If \\\"supportForTags\\\" is specified for at least one tag, then the \\\"reportUnsupportedTags\\\" validation check is enabled by default.\",\"type\":\"object\",\"patternProperties\":{\"@[a-zA-Z][a-zA-Z0-9]*$\":{\"type\":\"boolean\"}},\"additionalItems\":false}},\"required\":[\"$schema\"],\"additionalProperties\":false,\"definitions\":{\"tsdocTagDefinition\":{\"description\":\"Configuration for a custom supported TSDoc tag.\",\"type\":\"object\",\"properties\":{\"tagName\":{\"description\":\"Name of the custom tag. TSDoc tag names start with an at-sign (@) followed by ASCII letters using camelCase capitalization.\",\"type\":\"string\"},\"syntaxKind\":{\"description\":\"Syntax kind of the custom tag. \\\"inline\\\" means that this tag can appear inside other documentation sections (example: {@link}). \\\"block\\\" means that this tag starts a new documentation section (example: @remarks). \\\"modifier\\\" means that this tag's presence indicates an aspect of the associated API item (example: @internal).\",\"type\":\"string\",\"enum\":[\"inline\",\"block\",\"modifier\"]},\"allowMultiple\":{\"description\":\"If true, then this tag may appear multiple times in a doc comment. By default, a tag may only appear once.\",\"type\":\"boolean\"}},\"required\":[\"tagName\",\"syntaxKind\"],\"additionalProperties\":false}}}";
++    const jsonSchemaContent = '{\"title\":\"TSDoc Configuration\",\"description\":\"Describes the TSDoc configuration for a TypeScript project\",\"type\":\"object\",\"properties\":{\"$schema\":{\"description\":\"Part of the JSON Schema standard, this optional keyword declares the URL of the schema that the file conforms to. Editors may download the schema and use it to perform syntax highlighting.\",\"type\":\"string\"},\"extends\":{\"description\":\"Optionally specifies one or more JSON config files that will be combined with this file.  This provides a way for standard settings to be shared across multiple projects.  Important: The \\\"extends\\\" paths are resolved using NodeJS module resolution, so a path to a local file MUST be prefixed with \\\".\/\\\".\",\"type\":\"array\",\"items\":{\"type\":\"string\"}},\"noStandardTags\":{\"description\":\"By default, the config file loader will predefine all of the standardized TSDoc tags.  To disable this and start with a completely empty configuration, set \\\"noStandardTags\\\"=true.\",\"type\":\"boolean\"},\"tagDefinitions\":{\"description\":\"Additional tags to support when parsing documentation comments with TSDoc.\",\"type\":\"array\",\"items\":{\"$ref\":\"#\/definitions\/tsdocTagDefinition\"}},\"supportedHtmlElements\":{\"description\":\"The HTML element names that are supported in this configuration. Used in conjunction with the \\\"reportUnsupportedHtmlElements\\\" setting.\",\"type\":\"array\",\"items\":{\"type\":\"string\",\"pattern\":\"^[a-zA-Z0-9-]+$\"}},\"reportUnsupportedHtmlElements\":{\"description\":\"Whether an error should be reported when an unsupported HTML element is encountered in a doc comment. Defaults to \\\"true\\\" if the \\\"supportedHtmlElements\\\" field is present in this file, \\\"false\\\" if not.\",\"type\":\"boolean\"},\"supportForTags\":{\"description\":\"A collection of key\/value pairs.  The key is a TSDoc tag name (e.g. \\\"@myTag\\\") that must be defined in this configuration.  The value is a boolean indicating whether the tag is supported.  The TSDoc parser may report warnings when unsupported tags are encountered.  If \\\"supportForTags\\\" is specified for at least one tag, then the \\\"reportUnsupportedTags\\\" validation check is enabled by default.\",\"type\":\"object\",\"patternProperties\":{\"@[a-zA-Z][a-zA-Z0-9]*$\":{\"type\":\"boolean\"}},\"additionalItems\":false}},\"required\":[\"$schema\"],\"additionalProperties\":false,\"definitions\":{\"tsdocTagDefinition\":{\"description\":\"Configuration for a custom supported TSDoc tag.\",\"type\":\"object\",\"properties\":{\"tagName\":{\"description\":\"Name of the custom tag. TSDoc tag names start with an at-sign (@) followed by ASCII letters using camelCase capitalization.\",\"type\":\"string\"},\"syntaxKind\":{\"description\":\"Syntax kind of the custom tag. \\\"inline\\\" means that this tag can appear inside other documentation sections (example: {@link}). \\\"block\\\" means that this tag starts a new documentation section (example: @remarks). \\\"modifier\\\" means that this tag\'s presence indicates an aspect of the associated API item (example: @internal).\",\"type\":\"string\",\"enum\":[\"inline\",\"block\",\"modifier\"]},\"allowMultiple\":{\"description\":\"If true, then this tag may appear multiple times in a doc comment. By default, a tag may only appear once.\",\"type\":\"boolean\"}},\"required\":[\"tagName\",\"syntaxKind\"],\"additionalProperties\":false}}}';
      const jsonSchema = jju.parse(jsonSchemaContent, { mode: 'cjson' });
      return ajv.compile(jsonSchema);
  }

.yarnrc.yml

@@ -8,4 +8,4 @@ plugins:
   - path: .yarn/plugins/@yarnpkg/plugin-version.cjs
     spec: '@yarnpkg/plugin-version'
 
-yarnPath: .yarn/releases/yarn-3.4.1.cjs
+yarnPath: .yarn/releases/yarn-3.5.0.cjs

README.md

@@ -30,7 +30,7 @@ discord.js is a powerful [Node.js](https://nodejs.org) module that allows you to
 
 **Node.js 16.9.0 or newer is required.**
 
-```sh-session
+```sh
 npm install discord.js
 yarn add discord.js
 pnpm add discord.js
@@ -48,7 +48,7 @@ pnpm add discord.js
 
 Install discord.js:
 
-```sh-session
+```sh
 npm install discord.js
 yarn add discord.js
 pnpm add discord.js

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

apps/website/next-env.d.ts

@@ -1,6 +1,5 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-/// <reference types="next/navigation-types/compat/navigation" />
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/basic-features/typescript for more information.

apps/website/next.config.js

@@ -1,14 +1,10 @@
-/* eslint-disable tsdoc/syntax */
 import { fileURLToPath } from 'node:url';
 import bundleAnalyzer from '@next/bundle-analyzer';
 
 const withBundleAnalyzer = bundleAnalyzer({
 	enabled: process.env.ANALYZE === 'true',
 });
 
-/**
- * @type {import('next').NextConfig}
- */
 export default withBundleAnalyzer({
 	reactStrictMode: true,
 	eslint: {
@@ -18,16 +14,15 @@ export default withBundleAnalyzer({
 	typescript: {
 		ignoreBuildErrors: true,
 	},
-	cleanDistDir: true,
 	outputFileTracing: true,
 	experimental: {
 		appDir: true,
-		serverComponentsExternalPackages: ['@microsoft/api-extractor-model', 'jju', 'shiki'],
 		outputFileTracingRoot: fileURLToPath(new URL('../../', import.meta.url)),
 		fallbackNodePolyfills: false,
+		serverComponentsExternalPackages: ['@microsoft/api-extractor-model', 'jju'],
 	},
 	images: {
 		dangerouslyAllowSVG: true,
-		contentSecurityPolicy: "default-src 'self'; script-src 'none'; sandbox;",
+		contentSecurityPolicy: "default-src 'self'; script-src 'none'; frame-src 'none'; sandbox;",
 	},
 });

apps/website/package.json

@@ -52,23 +52,21 @@
 		"@vercel/og": "^0.4.1",
 		"@vscode/codicons": "^0.0.32",
 		"ariakit": "^2.0.0-next.43",
+		"bright": "^0.7.0",
 		"cmdk": "^0.2.0",
 		"meilisearch": "^0.31.1",
-		"next": "^13.2.4",
+		"next": "^13.2.5-canary.15",
 		"next-mdx-remote": "^4.4.1",
 		"next-themes": "^0.2.1",
 		"react": "^18.2.0",
 		"react-custom-scrollbars-2": "^4.5.0",
 		"react-dom": "^18.2.0",
-		"react-syntax-highlighter": "^15.5.0",
 		"react-use": "^17.4.0",
 		"rehype-ignore": "^1.0.4",
-		"rehype-pretty-code": "^0.9.4",
 		"rehype-raw": "^6.1.1",
 		"rehype-slug": "^5.1.0",
 		"remark-gfm": "^3.0.1",
 		"sharp": "^0.31.3",
-		"shiki": "^0.14.1",
 		"swr": "^2.1.1"
 	},
 	"devDependencies": {
@@ -78,7 +76,6 @@
 		"@types/node": "16.18.18",
 		"@types/react": "^18.0.28",
 		"@types/react-dom": "^18.0.11",
-		"@types/react-syntax-highlighter": "^15.5.6",
 		"@unocss/cli": "^0.50.6",
 		"@unocss/reset": "^0.50.6",
 		"@vitejs/plugin-react": "^3.1.0",
@@ -94,7 +91,7 @@
 		"prettier-plugin-tailwindcss": "^0.2.5",
 		"typescript": "^5.0.2",
 		"unocss": "^0.50.6",
-		"vercel": "^28.18.0",
+		"vercel": "^28.18.1",
 		"vitest": "^0.29.7"
 	},
 	"engines": {

apps/website/src/pages/api/og_model.tsx → apps/website/src/app/api/dynamic-open-graph.png/route.tsx

@@ -1,11 +1,15 @@
 /* eslint-disable react/no-unknown-property */
+
 import type { ApiItemKind } from '@microsoft/api-extractor-model';
 import { ImageResponse } from '@vercel/og';
 import type { NextRequest } from 'next/server';
+import type { ServerRuntime } from 'next/types';
+
+export const runtime: ServerRuntime = 'edge';
 
 const fonts = Promise.all([
-	fetch(new URL('../../assets/fonts/Inter-Regular.ttf', import.meta.url)).then(async (res) => res.arrayBuffer()),
-	fetch(new URL('../../assets/fonts/Inter-Bold.ttf', import.meta.url)).then(async (res) => res.arrayBuffer()),
+	fetch(new URL('../../../assets/fonts/Inter-Regular.ttf', import.meta.url)).then(async (res) => res.arrayBuffer()),
+	fetch(new URL('../../../assets/fonts/Inter-Bold.ttf', import.meta.url)).then(async (res) => res.arrayBuffer()),
 ]);
 
 function resolveIcon(icon: keyof typeof ApiItemKind, size = 88) {
@@ -20,19 +24,19 @@ function resolveIcon(icon: keyof typeof ApiItemKind, size = 88) {
 			return (
 				<svg fill="white" height={size} viewBox="0 0 16 16" width={size} xmlns="http://www.w3.org/2000/svg">
 					<path
-						clip-rule="evenodd"
+						clipRule="evenodd"
 						d="M14 2H8L7 3v3h1V3h6v5h-4v1h4l1-1V3l-1-1zM9 6h4v1H9.41L9 6.59V6zM7 7H2L1 8v5l1 1h6l1-1V8L8 7H7zm1 6H2V8h6v5zM3 9h4v1H3V9zm0 2h4v1H3v-1zm6-7h4v1H9V4z"
-						fill-rule="evenodd"
+						fillRule="evenodd"
 					/>
 				</svg>
 			);
 		case 'EnumMember':
 			return (
 				<svg fill="white" height={size} viewBox="0 0 16 16" width={size} xmlns="http://www.w3.org/2000/svg">
 					<path
-						clip-rule="evenodd"
+						clipRule="evenodd"
 						d="M7 3l1-1h6l1 1v5l-1 1h-4V8h4V3H8v3H7V3zm2 6V8L8 7H2L1 8v5l1 1h6l1-1V9zM8 8v5H2V8h6zm1.414-1L9 6.586V6h4v1H9.414zM9 4h4v1H9V4zm-2 6H3v1h4v-1z"
-						fill-rule="evenodd"
+						fillRule="evenodd"
 					/>
 				</svg>
 			);
@@ -52,9 +56,9 @@ function resolveIcon(icon: keyof typeof ApiItemKind, size = 88) {
 			return (
 				<svg fill="white" height={size} viewBox="0 0 16 16" width={size} xmlns="http://www.w3.org/2000/svg">
 					<path
-						clip-rule="evenodd"
+						clipRule="evenodd"
 						d="M2 5h2V4H1.5l-.5.5v8l.5.5H4v-1H2V5zm12.5-1H12v1h2v7h-2v1h2.5l.5-.5v-8l-.5-.5zm-2.74 2.57L12 7v2.51l-.3.45-4.5 2h-.46l-2.5-1.5-.24-.43v-2.5l.3-.46 4.5-2h.46l2.5 1.5zM5 9.71l1.5.9V9.28L5 8.38v1.33zm.58-2.15l1.45.87 3.39-1.5-1.45-.87-3.39 1.5zm1.95 3.17l3.5-1.56v-1.4l-3.5 1.55v1.41z"
-						fill-rule="evenodd"
+						fillRule="evenodd"
 					/>
 				</svg>
 			);
@@ -73,10 +77,10 @@ function resolveIcon(icon: keyof typeof ApiItemKind, size = 88) {
 	}
 }
 
-export default async function handler(req: NextRequest) {
+export async function GET(request: NextRequest) {
 	const fontData = await fonts;
 
-	const { searchParams } = new URL(req.url);
+	const { searchParams } = new URL(request.url);
 
 	const hasPkg = searchParams.has('pkg');
 	const hasKind = searchParams.has('kind');
@@ -164,7 +168,3 @@ export default async function handler(req: NextRequest) {
 		},
 	);
 }
-
-export const config = {
-	runtime: 'experimental-edge',
-};

apps/website/src/pages/api/og.tsx → apps/website/src/app/api/open-graph.png/route.tsx

@@ -1,11 +1,15 @@
 /* eslint-disable react/no-unknown-property */
+
 import { ImageResponse } from '@vercel/og';
+import type { ServerRuntime } from 'next/types';
+
+export const runtime: ServerRuntime = 'edge';
 
-const fonts = fetch(new URL('../../assets/fonts/Inter-Black.ttf', import.meta.url)).then(async (res) =>
+const fonts = fetch(new URL('../../../assets/fonts/Inter-Black.ttf', import.meta.url)).then(async (res) =>
 	res.arrayBuffer(),
 );
 
-export default async function handler() {
+export async function GET() {
 	const fontData = await fonts;
 
 	return new ImageResponse(
@@ -38,7 +42,3 @@ export default async function handler() {
 		},
 	);
 }
-
-export const config = {
-	runtime: 'experimental-edge',
-};

apps/website/src/app/docAPI.ts

@@ -15,7 +15,13 @@ export async function fetchModelJSON(packageName: string, version: string): Prom
 			join(process.cwd(), '..', '..', 'packages', packageName, 'docs', 'docs.api.json'),
 			'utf8',
 		);
-		return JSON.parse(res);
+
+		try {
+			return JSON.parse(res);
+		} catch {
+			console.log(res);
+			return {};
+		}
 	}
 
 	const response = await fetch(`https://docs.discordjs.dev/docs/${packageName}/${version}.api.json`, {