fix(website): show headers for type aliases (#9054)

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

@@ -1,10 +1,10 @@
-import type { ApiDeclaredItem, ApiItemContainerMixin } from '@microsoft/api-extractor-model';
+import type { ApiDeclaredItem } from '@microsoft/api-extractor-model';
 import { SyntaxHighlighter } from '../SyntaxHighlighter';
 import { Header } from './Header';
 import { SummarySection } from './section/SummarySection';
 
 export interface ObjectHeaderProps {
-	item: ApiDeclaredItem & ApiItemContainerMixin;
+	item: ApiDeclaredItem;
 }
 
 export function ObjectHeader({ item }: ObjectHeaderProps) {

apps/website/src/components/model/TypeAlias.tsx

@@ -1,11 +1,13 @@
 import type { ApiTypeAlias } from '@microsoft/api-extractor-model';
 import { SyntaxHighlighter } from '../SyntaxHighlighter';
 import { Documentation } from '../documentation/Documentation';
+import { Header } from '../documentation/Header';
 import { SummarySection } from '../documentation/section/SummarySection';
 
 export function TypeAlias({ item }: { item: ApiTypeAlias }) {
 	return (
-		<Documentation item={item}>
+		<Documentation>
+			<Header kind={item.kind} name={item.displayName} sourceURL={item.sourceLocation.fileUrl} />
 			<SyntaxHighlighter code={item.excerpt.text} />
 			<SummarySection item={item} />
 		</Documentation>

apps/website/src/components/model/Variable.tsx

@@ -1,12 +1,12 @@
 import type { ApiVariable } from '@microsoft/api-extractor-model';
-import { SyntaxHighlighter } from '../SyntaxHighlighter';
 import { Documentation } from '../documentation/Documentation';
+import { ObjectHeader } from '../documentation/ObjectHeader';
 import { SummarySection } from '../documentation/section/SummarySection';
 
 export function Variable({ item }: { item: ApiVariable }) {
 	return (
-		<Documentation item={item}>
-			<SyntaxHighlighter code={item.excerpt.text} />
+		<Documentation>
+			<ObjectHeader item={item} />
 			<SummarySection item={item} />
 		</Documentation>
 	);

apps/website/src/components/model/enum/Enum.tsx

@@ -3,14 +3,14 @@ import { VscSymbolEnum } from '@react-icons/all-files/vsc/VscSymbolEnum';
 import { Documentation } from '../../documentation/Documentation';
 import { EnumMember } from './EnumMember';
 import { Panel } from '~/components/Panel';
-import { SyntaxHighlighter } from '~/components/SyntaxHighlighter';
+import { ObjectHeader } from '~/components/documentation/ObjectHeader';
 import { ResponsiveSection } from '~/components/documentation/section/ResponsiveSection';
 import { SummarySection } from '~/components/documentation/section/SummarySection';
 
 export function Enum({ item }: { item: ApiEnum }) {
 	return (
-		<Documentation item={item}>
-			<SyntaxHighlighter code={item.excerpt.text} />
+		<Documentation>
+			<ObjectHeader item={item} />
 			<SummarySection item={item} />
 			<ResponsiveSection icon={<VscSymbolEnum size={20} />} padded title="Members">
 				<div className="flex flex-col gap-4">

apps/website/src/pages/api/og.tsx

@@ -40,5 +40,5 @@ export default async function handler() {
 }
 
 export const config = {
-	runtime: 'edge',
+	runtime: 'experimental-edge',
 };

apps/website/src/pages/api/og_model.tsx

@@ -166,5 +166,5 @@ export default async function handler(req: NextRequest) {
 }
 
 export const config = {
-	runtime: 'edge',
+	runtime: 'experimental-edge',
 };