feat(website): add support for source file links (#9048)

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

apps/website/package.json

@@ -46,8 +46,8 @@
 		"@discordjs/api-extractor-utils": "workspace:^",
 		"@discordjs/scripts": "workspace:^",
 		"@discordjs/ui": "workspace:^",
-		"@microsoft/api-extractor-model": "7.24.0",
-		"@microsoft/tsdoc": "0.14.1",
+		"@microsoft/api-extractor-model": "7.25.3",
+		"@microsoft/tsdoc": "0.14.2",
 		"@react-icons/all-files": "^4.1.0",
 		"@vercel/og": "^0.0.26",
 		"@vscode/codicons": "^0.0.32",
@@ -62,7 +62,7 @@
 		"react-dom": "^18.2.0",
 		"react-syntax-highlighter": "^15.5.0",
 		"react-use": "^17.4.0",
-		"rehype-ignore": "^1.0.3",
+		"rehype-ignore": "^1.0.4",
 		"rehype-pretty-code": "^0.8.1",
 		"rehype-raw": "^6.1.1",
 		"rehype-slug": "^5.1.0",

apps/website/src/components/documentation/Header.tsx

@@ -1,4 +1,5 @@
 import { ApiItemKind } from '@microsoft/api-extractor-model';
+import { VscFileCode } from '@react-icons/all-files/vsc/VscFileCode';
 import { VscSymbolClass } from '@react-icons/all-files/vsc/VscSymbolClass';
 import { VscSymbolEnum } from '@react-icons/all-files/vsc/VscSymbolEnum';
 import { VscSymbolInterface } from '@react-icons/all-files/vsc/VscSymbolInterface';
@@ -24,12 +25,23 @@ function generateIcon(kind: ApiItemKind) {
 	}
 }
 
-export function Header({ kind, name }: PropsWithChildren<{ kind: ApiItemKind; name: string }>) {
+export function Header({
+	kind,
+	name,
+	sourceURL,
+}: PropsWithChildren<{ kind: ApiItemKind; name: string; sourceURL?: string | undefined }>) {
 	return (
 		<div className="flex flex-col">
-			<h2 className="flex flex-row place-items-center gap-2 break-all text-2xl font-bold">
-				<span>{generateIcon(kind)}</span>
-				{name}
+			<h2 className="flex flex-row place-items-center justify-between gap-2 break-all text-2xl font-bold">
+				<span className="row flex flex place-items-center gap-2">
+					<span>{generateIcon(kind)}</span>
+					{name}
+				</span>
+				{sourceURL ? (
+					<a className="text-blurple" href={sourceURL}>
+						<VscFileCode />
+					</a>
+				) : null}
 			</h2>
 		</div>
 	);

apps/website/src/components/documentation/ObjectHeader.tsx

@@ -10,7 +10,7 @@ export interface ObjectHeaderProps {
 export function ObjectHeader({ item }: ObjectHeaderProps) {
 	return (
 		<>
-			<Header kind={item.kind} name={item.displayName} />
+			<Header kind={item.kind} name={item.displayName} sourceURL={item.sourceLocation.fileUrl} />
 			<SyntaxHighlighter code={item.excerpt.text} />
 			<SummarySection item={item} />
 		</>