feat: Create discord-api-types documentation component (#9555)

feat: add discord-api-types link component

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

apps/guide/src/components/DiscordAPITypesLink.tsx

@@ -0,0 +1,91 @@
+import { FiExternalLink } from '@react-icons/all-files/fi/FiExternalLink';
+import type { PropsWithChildren } from 'react';
+import {
+	BASE_URL_DISCORD_API_TYPES,
+	DISCORD_API_TYPES_VERSION,
+	DISCORD_API_TYPES_VOICE_VERSION,
+} from '~/util/constants';
+
+interface DiscordAPITypesLinkOptions {
+	/**
+	 * The initial documentation enum, interface, function etc.
+	 *
+	 * @example `'RESTJSONErrorCodes'`
+	 */
+	parent?: string;
+	/**
+	 * The scope of where this link lives.
+	 *
+	 * @remarks API does not have a scope.
+	 */
+	scope?: 'gateway' | 'globals' | 'payloads' | 'rest' | 'rpc' | 'utils' | 'voice';
+	/**
+	 * The symbol belonging to the parent.
+	 *
+	 * @example '`MaximumNumberOfGuildsReached'`
+	 */
+	symbol?: string;
+	/**
+	 * The type of the {@link DiscordAPITypesLinkOptions.parent}.
+	 *
+	 * @example `'enum'`
+	 * @example `'interface'`
+	 */
+	type?: string;
+}
+
+export function DiscordAPITypesLink({
+	parent,
+	scope,
+	symbol,
+	type,
+	children,
+}: PropsWithChildren<DiscordAPITypesLinkOptions>) {
+	let url = BASE_URL_DISCORD_API_TYPES;
+	let text = 'discord-api-types';
+
+	if (type || parent) {
+		url += `/api/discord-api-types`;
+
+		switch (scope) {
+			case 'globals':
+				url += `-${scope}`;
+				break;
+			case 'gateway':
+			case 'payloads':
+			case 'rest':
+				url += `-${scope}/common`;
+				break;
+			case 'rpc':
+			case 'utils':
+				url += `-${scope}/${DISCORD_API_TYPES_VERSION}`;
+				break;
+			case 'voice':
+				url += `-${scope}/${DISCORD_API_TYPES_VOICE_VERSION}`;
+				break;
+			default:
+				url += `-${DISCORD_API_TYPES_VERSION}`;
+		}
+
+		if (type) {
+			url += `/${type}/${parent}`;
+			if (symbol) url += `#${symbol}`;
+		} else {
+			url += `#${parent}`;
+		}
+
+		text = `${parent}${symbol ? `#${symbol}` : ''}${type?.toUpperCase() === 'FUNCTION' ? '()' : ''}`;
+	}
+
+	return (
+		<a
+			className="inline-flex flex-row place-items-center gap-1"
+			href={url}
+			rel="external noopener noreferrer"
+			target="_blank"
+		>
+			{children ?? text}
+			<FiExternalLink size={18} />
+		</a>
+	);
+}

apps/guide/src/components/Mdx.tsx

@@ -2,6 +2,7 @@
 
 import { Alert, Section, DiscordMessages, DiscordMessage, DiscordMessageEmbed } from '@discordjs/ui';
 import { useMDXComponent } from 'next-contentlayer/hooks';
+import { DiscordAPITypesLink } from './DiscordAPITypesLink';
 import { H1 } from './H1';
 import { H2 } from './H2';
 import { H3 } from './H3';
@@ -20,6 +21,7 @@ export function Mdx({ code }: { code: string }) {
 				DiscordMessages,
 				DiscordMessage,
 				DiscordMessageEmbed,
+				DiscordAPITypesLink,
 				DocsLink,
 				ResultingCode,
 				h1: H1,

apps/guide/src/content/04-popular-topics/02-audit-logs.mdx

@@ -162,4 +162,4 @@ client.on(Events.GuildAuditLogEntryCreate, async (auditLog) => {
 
 </CH.Code>
 
-If you want to check who banned a user, it's the same example as above except the _`action`_ should be _`AuditLogEvent.MemberBanAdd`_. You can check the rest of the types over at the [discord-api-types documentation](https://discord-api-types.dev/api/discord-api-types-v10/enum/AuditLogEvent).
+If you want to check who banned a user, it's the same example as above except the _`action`_ should be <DiscordAPITypesLink type="enum" parent="AuditLogEvent" symbol="MemberBanAdd" />. You can check the rest of the possible actions on this page.

apps/guide/src/content/05-additional-info/03-updating-to-v14.mdx

@@ -41,7 +41,7 @@ discord.js v14 makes the switch to Discord API v10!
 
 Any areas that used to accept a _`string`_ or _`number`_ type for an enum parameter will now only accept a _`number`_.
 
-In addition, the old enums exported by discord.js v13 and lower are replaced with new enums from [discord-api-types](https://discord-api-types.dev/api/discord-api-types-v10).
+In addition, the old enums exported by discord.js v13 and lower are replaced with new enums from <DiscordAPITypesLink />.
 
 #### New enum differences
 
@@ -121,7 +121,7 @@ Areas like _`Client`_ initialization, JSON slash commands and JSON message compo
 
 #### Channels
 
-Some channel type guard methods that narrowed to one channel type have been removed. Instead compare the _`type`_ property against a [ChannelType](https://discord-api-types.dev/api/discord-api-types-v10/enum/ChannelType) enum member to narrow channels.
+Some channel type guard methods that narrowed to one channel type have been removed. Instead compare the _`type`_ property against a <DiscordAPITypesLink type="enum" parent="ChannelType" /> enum member to narrow channels.
 
 <CH.Code>
 
@@ -361,7 +361,7 @@ _`IntegrationApplication#summary`_ has been removed as it is no longer supported
 
 ### Interaction
 
-Whenever an interaction is replied to and one fetches the reply, it could possibly give an [APIMessage](https://discord-api-types.dev/api/discord-api-types-v10/interface/APIMessage) if the guild was not cached. However, interaction replies now always return a discord.js <DocsLink type="class" parent="Message"/> object with _`fetchReply`_ as _`true`_.
+Whenever an interaction is replied to and one fetches the reply, it could possibly give an <DiscordAPITypesLink type="interface" parent="APIMessage" /> if the guild was not cached. However, interaction replies now always return a discord.js <DocsLink type="class" parent="Message"/> object with _`fetchReply`_ as _`true`_.
 
 The base interaction class is now <DocsLink type="class" parent="BaseInteraction"/>.
 
@@ -690,7 +690,7 @@ Added support for role connection metadata.
 
 A new <DocsLink type="class" parent="Collector" symbol="e-ignore"/> event has been added which is emitted whenever an element is not collected by the collector.
 
-Component collector options now use the [ComponentType](https://discord-api-types.dev/api/discord-api-types-v10/enum/ComponentType) enum values:
+Component collector options now use the <DiscordAPITypesLink type="enum" parent="ComponentType" /> enum values:
 
 <CH.Code>
 

apps/guide/src/util/constants.ts

@@ -2,6 +2,8 @@ export const BASE_URL = 'https://discord.js.org/docs/packages' as const;
 
 export const BASE_URL_LEGACY = 'https://old.discordjs.dev/#/docs/discord.js' as const;
 
+export const BASE_URL_DISCORD_API_TYPES = 'https://discord-api-types.dev' as const;
+
 export const DESCRIPTION = 'Imagine a guide... that explores the many possibilities for your discord.js bot.';
 
 export const GITHUB_BASE_PAGES_PATH = 'https://github.com/discordjs/discord.js/tree/main/apps/guide/src/pages';
@@ -25,3 +27,13 @@ export const PACKAGES = [
  * The stable version of discord.js.
  */
 export const VERSION = '14.11.0' as const;
+
+/**
+ * The API version (for discord-api-types). This is prefixed with a "v".
+ */
+export const DISCORD_API_TYPES_VERSION = 'v10' as const;
+
+/**
+ * The voice API version (for discord-api-types). This is prefixed with a "v".
+ */
+export const DISCORD_API_TYPES_VOICE_VERSION = 'v4' as const;