feat(DocsLink): Implement the component (#9380)

Co-authored-by: Noel <buechler.noel@outlook.com>

apps/guide/src/components/DocsLink.tsx

@@ -1,3 +1,78 @@
-export function DocsLink() {
-	return null;
+import { FiExternalLink } from 'react-icons/fi';
+import { BASE_URL, BASE_URL_LEGACY, PACKAGES, VERSION } from '~/util/constants';
+
+interface DocsLinkOptions {
+	/**
+	 * Whether to apply brackets to the end of the symbol to denote a method.
+	 *
+	 * @remarks Functions automatically infer this.
+	 */
+	brackets?: boolean;
+	/**
+	 * The package.
+	 *
+	 * @defaultValue `'discord.js'`
+	 */
+	package?: (typeof PACKAGES)[number];
+	/**
+	 * The initial documentation class, function, interface etc.
+	 *
+	 * @example `'Client'`
+	 */
+	parent: string;
+	/**
+	 * Whether to reference a static property.
+	 *
+	 * @remarks
+	 * This should only be used for the https://discord.js.org domain
+	 * as static properties are not identified in the URL.
+	 */
+	static?: boolean;
+	/**
+	 * The symbol belonging to the parent.
+	 *
+	 * @example '`login'`
+	 */
+	symbol?: string;
+	/**
+	 * The type of the {@link DocsLinkOptions.parent}.
+	 *
+	 * @example `'class'`
+	 * @example `'Function'`
+	 */
+	type: string;
+}
+
+export function DocsLink({
+	package: docs = PACKAGES[0],
+	type,
+	parent,
+	symbol,
+	brackets,
+	static: staticReference,
+}: DocsLinkOptions) {
+	const bracketText = brackets || type.toUpperCase() === 'FUNCTION' ? '()' : '';
+	const trimmedSymbol = symbol;
+	let url;
+	let text;
+
+	if (docs === PACKAGES[0]) {
+		url = `${BASE_URL_LEGACY}/${VERSION}/${type}/${parent}`;
+		if (trimmedSymbol) url += `?scrollTo=${trimmedSymbol}`;
+
+		text = `${parent}${trimmedSymbol ? (trimmedSymbol.startsWith('s-') ? '.' : '#') : ''}${
+			trimmedSymbol ? `${trimmedSymbol.replace(/(e|s)-/, '')}` : ''
+		}${bracketText}`;
+	} else {
+		url = `${BASE_URL}/${docs}/stable/${parent}:${type}`;
+		if (trimmedSymbol) url += `#${trimmedSymbol}`;
+		text = `${parent}${trimmedSymbol ? `${staticReference ? '.' : '#'}${trimmedSymbol}` : ''}${bracketText}`;
+	}
+
+	return (
+		<a className="inline-flex flex-row place-items-center gap-1" href={url} rel="noopener noreferrer" target="_blank">
+			{text}
+			<FiExternalLink size={18} />
+		</a>
+	);
 }

apps/guide/src/util/constants.ts

@@ -1,3 +1,27 @@
+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 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';
+
+export const PACKAGES = [
+	'discord.js',
+	'brokers',
+	'builders',
+	'collection',
+	'core',
+	'formatters',
+	'proxy',
+	'rest',
+	'next',
+	'util',
+	'voice',
+	'ws',
+] as const;
+
+/**
+ * The stable version of discord.js.
+ */
+export const VERSION = '14.9.0' as const;