feat: add og image gen

apps/guide/astro.config.ts

@@ -54,7 +54,7 @@ export default defineConfig({
 			throttle: 3,
 		}),
 		Unocss({
-			configFile: fileURLToPath(new URL('../../packages/ui/unocss.config.ts', import.meta.url)),
+			configFile: fileURLToPath(new URL('../../unocss.config.ts', import.meta.url)),
 		}),
 		critters(),
 		compress(),

apps/website/.gitignore

@@ -19,7 +19,6 @@ dist/
 typings/
 .cache/
 build/
-api/
 src/styles/unocss.css
 .next/
 

apps/website/package.json

@@ -6,14 +6,14 @@
 	"scripts": {
 		"test": "vitest run",
 		"build:local": "yarn run --top-level docs --force && cross-env NEXT_PUBLIC_LOCAL_DEV=true yarn build:prod",
-		"build:prod": "yarn workspace @discordjs/api-extractor-utils run build && yarn workspace @discordjs/scripts run build && yarn workspace @discordjs/ui run build && yarn build:css && yarn build:next",
+		"build:prod": "yarn workspaces foreach -ptR run build && yarn build:css && yarn build:next",
 		"build:next": "next build",
 		"build:css": "yarn generate:css",
 		"build:search_indicies": "yarn node scripts/generateAllIndicies.js",
 		"dev": "yarn run --top-level docs && concurrently 'yarn dev:css' 'yarn dev:next'",
 		"dev:next": "next dev",
 		"dev:css": "yarn generate:css --watch",
-		"generate:css": "unocss 'src/**/*.tsx' '../../packages/ui/src/lib/components/**/*.tsx' --out-file ./src/styles/unocss.css --config ../../packages/ui/unocss.config.ts",
+		"generate:css": "unocss 'src/**/*.tsx' '../../packages/ui/src/lib/components/**/*.tsx' --out-file ./src/styles/unocss.css --config ../../unocss.config.ts",
 		"lint": "prettier --check . && cross-env TIMING=1 eslint src --ext .mjs,.js,.cjs,.ts,.tsx",
 		"format": "prettier --write . && cross-env TIMING=1 eslint src --ext .mjs,.js,.cjs,.ts,.tsx --fix"
 	},
@@ -45,6 +45,7 @@
 		"@discordjs/ui": "workspace:^",
 		"@microsoft/api-extractor-model": "7.24.0",
 		"@microsoft/tsdoc": "0.14.1",
+		"@vercel/og": "^0.0.15",
 		"@vscode/codicons": "^0.0.32",
 		"ariakit": "^2.0.0-next.41",
 		"cmdk": "^0.1.20",

apps/website/src/pages/_app.tsx

@@ -3,6 +3,7 @@ import Head from 'next/head';
 import NextProgress from 'next-progress';
 import { ThemeProvider } from 'next-themes';
 import '@unocss/reset/tailwind.css';
+import '../styles/inter.css';
 import '../styles/unocss.css';
 import '../styles/cmdk.css';
 import '../styles/main.css';

apps/website/src/pages/_document.tsx

@@ -19,7 +19,7 @@ export default function Document() {
 				<meta content="website" property="og:type" />
 				<meta content="discord.js" key="og_title" property="og:title" />
 				<meta content={DESCRIPTION} key="og_description" name="og:description" />
-				<meta content="https://discordjs.dev/open-graph.png" property="og:image" />
+				<meta content="https://discordjs.dev/api/og" property="og:image" />
 				<meta content="summary_large_image" name="twitter:card" />
 				<meta content="@iCrawlToGo" name="twitter:creator" />
 			</Head>

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

@@ -0,0 +1,56 @@
+/* eslint-disable react/no-unknown-property */
+import { ImageResponse } from '@vercel/og';
+
+const fonts = Promise.all([
+	fetch(new URL('../../assets/fonts/Inter-Light.ttf', import.meta.url)).then(async (res) => res.arrayBuffer()),
+	fetch(new URL('../../assets/fonts/Inter-Regular.ttf', import.meta.url)).then(async (res) => res.arrayBuffer()),
+	fetch(new URL('../../assets/fonts/Inter-Medium.ttf', import.meta.url)).then(async (res) => res.arrayBuffer()),
+	fetch(new URL('../../assets/fonts/Inter-SemiBold.ttf', import.meta.url)).then(async (res) => res.arrayBuffer()),
+	fetch(new URL('../../assets/fonts/Inter-Bold.ttf', import.meta.url)).then(async (res) => res.arrayBuffer()),
+	fetch(new URL('../../assets/fonts/Inter-Black.ttf', import.meta.url)).then(async (res) => res.arrayBuffer()),
+]);
+
+export default async function handler() {
+	const fontData = await fonts;
+
+	return new ImageResponse(
+		(
+			<div
+				style={{
+					fontFamily: 'Inter',
+				}}
+				tw="flex bg-[#181818] h-full w-full"
+			>
+				<div tw="mx-auto flex max-w-6xl flex-col items-center py-16 px-8 lg:h-full lg:justify-center lg:py-0 lg:px-6">
+					<div tw="flex flex-col items-center lg:flex-row">
+						<div tw="flex  flex-col lg:mr-8">
+							<div tw="flex flex-col text-3xl font-black leading-tight sm:text-[5.5rem] sm:leading-tight text-white">
+								<div tw="flex items-center">
+									The <span tw="bg-[#5865f2] relative rounded-lg py-1 px-6 ml-4">most popular</span>
+								</div>
+								<span>way to build Discord</span>
+								<span>bots.</span>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		),
+		{
+			width: 1_200,
+			height: 630,
+			fonts: [
+				{ name: 'Inter', data: fontData[0], weight: 300, style: 'normal' },
+				{ name: 'Inter', data: fontData[1], weight: 400, style: 'normal' },
+				{ name: 'Inter', data: fontData[2], weight: 500, style: 'normal' },
+				{ name: 'Inter', data: fontData[3], weight: 600, style: 'normal' },
+				{ name: 'Inter', data: fontData[4], weight: 700, style: 'normal' },
+				{ name: 'Inter', data: fontData[5], weight: 900, style: 'normal' },
+			],
+		},
+	);
+}
+
+export const config = {
+	runtime: 'experimental-edge',
+};

apps/website/src/pages/docs/[...slug].tsx

@@ -283,5 +283,5 @@ export default function SlugPage(props: Partial<SidebarLayoutProps & { error?: s
 }
 
 export const config = {
-	unstable_includeFiles: [`../../packages/{${PACKAGES.join(',')}}/README.md`],
+	unstable_includeFiles: [`../../packages/{builders,collection,proxy,rest,util,voice,ws}/README.md`],
 };

apps/website/src/styles/inter.css

@@ -0,0 +1,106 @@
+@font-face {
+	font-family: 'Inter';
+	font-style: normal;
+	font-weight: 300;
+	font-display: swap;
+	src: url('/fonts/Inter-Light.woff2?v=3.19') format('woff2');
+}
+@font-face {
+	font-family: 'Inter';
+	font-style: italic;
+	font-weight: 300;
+	font-display: swap;
+	src: url('/fonts/Inter-LightItalic.woff2?v=3.19') format('woff2');
+}
+
+@font-face {
+	font-family: 'Inter';
+	font-style: normal;
+	font-weight: 400;
+	font-display: swap;
+	src: url('/fonts/Inter-Regular.woff2?v=3.19') format('woff2');
+}
+@font-face {
+	font-family: 'Inter';
+	font-style: italic;
+	font-weight: 400;
+	font-display: swap;
+	src: url('/fonts/Inter-Italic.woff2?v=3.19') format('woff2');
+}
+
+@font-face {
+	font-family: 'Inter';
+	font-style: normal;
+	font-weight: 500;
+	font-display: swap;
+	src: url('/fonts/Inter-Medium.woff2?v=3.19') format('woff2');
+}
+@font-face {
+	font-family: 'Inter';
+	font-style: italic;
+	font-weight: 500;
+	font-display: swap;
+	src: url('/fonts/Inter-MediumItalic.woff2?v=3.19') format('woff2');
+}
+
+@font-face {
+	font-family: 'Inter';
+	font-style: normal;
+	font-weight: 600;
+	font-display: swap;
+	src: url('/fonts/Inter-SemiBold.woff2?v=3.19') format('woff2');
+}
+@font-face {
+	font-family: 'Inter';
+	font-style: italic;
+	font-weight: 600;
+	font-display: swap;
+	src: url('/fonts/Inter-SemiBoldItalic.woff2?v=3.19') format('woff2');
+}
+
+@font-face {
+	font-family: 'Inter';
+	font-style: normal;
+	font-weight: 700;
+	font-display: swap;
+	src: url('/fonts/Inter-Bold.woff2?v=3.19') format('woff2');
+}
+@font-face {
+	font-family: 'Inter';
+	font-style: italic;
+	font-weight: 700;
+	font-display: swap;
+	src: url('/fonts/Inter-BoldItalic.woff2?v=3.19') format('woff2');
+}
+
+@font-face {
+	font-family: 'Inter';
+	font-style: normal;
+	font-weight: 900;
+	font-display: swap;
+	src: url('/fonts/Inter-Black.woff2?v=3.19') format('woff2');
+}
+@font-face {
+	font-family: 'Inter';
+	font-style: italic;
+	font-weight: 900;
+	font-display: swap;
+	src: url('/fonts/Inter-BlackItalic.woff2?v=3.19') format('woff2');
+}
+
+@font-face {
+	font-family: 'Inter var';
+	font-weight: 100 900;
+	font-display: swap;
+	font-style: normal;
+	font-named-instance: 'Regular';
+	src: url('/fonts/Inter-roman.var.woff2?v=3.19') format('woff2');
+}
+@font-face {
+	font-family: 'Inter var';
+	font-weight: 100 900;
+	font-display: swap;
+	font-style: italic;
+	font-named-instance: 'Italic';
+	src: url('/fonts/Inter-italic.var.woff2?v=3.19') format('woff2');
+}

apps/website/src/styles/main.css

@@ -1,5 +1,3 @@
-@import url('https://rsms.me/inter/inter.css');
-
 :root {
 	font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
 		'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',