refactor(website): use new metadata api instead of head.tsx (#9269)

apps/website/src/app/page.tsx

@@ -3,7 +3,66 @@ import Image from 'next/image';
 import Link from 'next/link';
 import vercelLogo from '../assets/powered-by-vercel.svg';
 import { SyntaxHighlighter } from '~/components/SyntaxHighlighter';
-import { CODE_EXAMPLE } from '~/util/constants';
+import { CODE_EXAMPLE, DESCRIPTION } from '~/util/constants';
+
+export const metadata = {
+	title: 'discord.js',
+	description: DESCRIPTION,
+	viewport: {
+		minimumScale: 1,
+		initialScale: 1,
+		width: 'device-width',
+	},
+	icons: {
+		other: [
+			{
+				url: '/favicon-32x32.png',
+				sizes: '32x32',
+				type: 'image/png',
+			},
+			{
+				url: '/favicon-16x16.png',
+				sizes: '16x16',
+				type: 'image/png',
+			},
+		],
+		apple: [
+			'/apple-touch-icon.png',
+			{
+				url: '/safari-pinned-tab.svg',
+				rel: 'mask-icon',
+			},
+		],
+	},
+
+	manifest: '/site.webmanifest',
+
+	themeColor: '#5865f2',
+	colorScheme: 'light dark',
+
+	appleWebApp: {
+		title: 'discord.js',
+	},
+
+	applicationName: 'discord.js',
+
+	openGraph: {
+		siteName: 'discord.js',
+		type: 'website',
+		title: 'discord.js',
+		description: DESCRIPTION,
+		images: 'https://discordjs.dev/api/og',
+	},
+
+	twitter: {
+		card: 'summary_large_image',
+		creator: '@iCrawlToGo',
+	},
+
+	other: {
+		'msapplication-TileColor': '#090a16',
+	},
+};
 
 export default function Page() {
 	return (