feat: add og image gen

.vscode/extensions.json

@@ -9,6 +9,7 @@
 		"christian-kohler.npm-intellisense",
 		"christian-kohler.path-intellisense",
 		"antfu.unocss",
-		"astro-build.astro-vscode"
+		"astro-build.astro-vscode",
+		"unifiedjs.vscode-mdx"
 	]
 }

.vscode/settings.json

@@ -8,9 +8,12 @@
 		"source.fixAll": true,
 		"source.organizeImports": false
 	},
+	"editor.trimAutoWhitespace": false,
 	"files.associations": {
 		"*.mdx": "markdown"
 	},
-	"unocss.root": "./packages/ui",
+	"files.insertFinalNewline": true,
+	"files.eol": "\n",
+	"npm.packageManager": "yarn",
 	"typescript.tsdk": "node_modules/typescript/lib"
 }

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',

package.json

@@ -48,7 +48,9 @@
 		"lint-staged": "^13.0.3",
 		"tsup": "^6.2.3",
 		"turbo": "^1.5.5",
-		"typescript": "^4.8.4"
+		"typescript": "^4.8.4",
+		"unocss": "^0.45.29",
+		"vitest": "^0.24.1"
 	},
 	"resolutions": {
 		"@microsoft/tsdoc-config": "patch:@microsoft/tsdoc-config@npm:0.16.1#.yarn/patches/@microsoft-tsdoc-config-npm-0.16.1-81031b1bbf.patch"

yarn.lock

@@ -2086,6 +2086,8 @@ __metadata:
     tsup: ^6.2.3
     turbo: ^1.5.5
     typescript: ^4.8.4
+    unocss: ^0.45.29
+    vitest: ^0.24.1
   languageName: unknown
   linkType: soft
 
@@ -2355,6 +2357,7 @@ __metadata:
     "@types/react-syntax-highlighter": ^15.5.5
     "@unocss/cli": ^0.45.29
     "@unocss/reset": ^0.45.29
+    "@vercel/og": ^0.0.15
     "@vitejs/plugin-react": ^2.1.0
     "@vitest/coverage-c8": ^0.24.0
     "@vscode/codicons": ^0.0.32
@@ -3615,6 +3618,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@resvg/resvg-wasm@npm:2.0.0-alpha.4":
+  version: 2.0.0-alpha.4
+  resolution: "@resvg/resvg-wasm@npm:2.0.0-alpha.4"
+  checksum: fa2d470d6f39c4a57e4500f4bff389683c4d0d97ad20d08c7721df7a66d5b179e243e4f990cdda70615191167d40dd6cc724e620b5f2aa7f46c8b46ff63c37eb
+  languageName: node
+  linkType: hard
+
 "@rollup/pluginutils@npm:^4.0.0, @rollup/pluginutils@npm:^4.2.1":
   version: 4.2.1
   resolution: "@rollup/pluginutils@npm:4.2.1"
@@ -3733,6 +3743,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@shuding/opentype.js@npm:1.4.0-beta.0":
+  version: 1.4.0-beta.0
+  resolution: "@shuding/opentype.js@npm:1.4.0-beta.0"
+  dependencies:
+    fflate: ^0.7.3
+    string.prototype.codepointat: ^0.2.1
+  bin:
+    ot: bin/ot
+  checksum: af3478c40c068c7f6b6050b274a10837fcd1417c072b6af2b9d4fa48b8efe0bc93ec4b5f80b186678672f7d293027151389c66a4c5a156b48b810b8e8f3f5cdf
+  languageName: node
+  linkType: hard
+
 "@sinclair/typebox@npm:^0.24.1":
   version: 0.24.44
   resolution: "@sinclair/typebox@npm:0.24.44"
@@ -4448,6 +4470,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/yoga-layout@npm:1.9.2":
+  version: 1.9.2
+  resolution: "@types/yoga-layout@npm:1.9.2"
+  checksum: dbc3d6ab997d50fe1fcca5dd6822982c8fe586145ab648e0e97c3bc4ebc93d0b40c9edd75febaba374d61f60c1379b639f6be652965c776a901bf1068f2eac87
+  languageName: node
+  linkType: hard
+
 "@typescript-eslint/eslint-plugin@npm:^5.39.0":
   version: 5.39.0
   resolution: "@typescript-eslint/eslint-plugin@npm:5.39.0"
@@ -4937,6 +4966,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@vercel/og@npm:^0.0.15":
+  version: 0.0.15
+  resolution: "@vercel/og@npm:0.0.15"
+  dependencies:
+    "@resvg/resvg-wasm": 2.0.0-alpha.4
+    satori: 0.0.38
+    yoga-wasm-web: 0.1.2
+  checksum: 4dbc5af8b7ea2a8b19ed7fa54ed790f7b2531d027a5bec494b3e12adf868150751b980034e70c1cb85437feb9dee24a5b5b52ed99190e844eb0b4e969446ccf2
+  languageName: node
+  linkType: hard
+
 "@vercel/python@npm:3.1.21":
   version: 3.1.21
   resolution: "@vercel/python@npm:3.1.21"
@@ -6406,6 +6446,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"camelize@npm:^1.0.0":
+  version: 1.0.0
+  resolution: "camelize@npm:1.0.0"
+  checksum: 769f8d10071f57b974d9a51dc02f589dd7fb07ea6a7ecde1a57b52ae68657ba61fe85c60d50661b76c7dbb76b6474fbfd3356aee33cf5f025cd7fd6fb2811b73
+  languageName: node
+  linkType: hard
+
 "caniuse-lite@npm:^1.0.30001400, caniuse-lite@npm:^1.0.30001406":
   version: 1.0.30001418
   resolution: "caniuse-lite@npm:1.0.30001418"
@@ -7524,6 +7571,27 @@ __metadata:
   languageName: node
   linkType: hard
 
+"css-background-parser@npm:^0.1.0":
+  version: 0.1.0
+  resolution: "css-background-parser@npm:0.1.0"
+  checksum: cf53bef8d5df8538af7179f787fe04f4ac53c60089b338bf167b3e18be13817e395d48e303ca13493927b6fc11b4c24db2b144054c8ed3a55a044c6d177a08a5
+  languageName: node
+  linkType: hard
+
+"css-box-shadow@npm:1.0.0-3":
+  version: 1.0.0-3
+  resolution: "css-box-shadow@npm:1.0.0-3"
+  checksum: 1b7f15b291261023bb57e8718849951f313ee54e5cc3c72a90fac8d141138ea73562ad28006533f4ed92cb672ccbba2d6483ecb187a6c7f800936b006ba27925
+  languageName: node
+  linkType: hard
+
+"css-color-keywords@npm:^1.0.0":
+  version: 1.0.0
+  resolution: "css-color-keywords@npm:1.0.0"
+  checksum: 8f125e3ad477bd03c77b533044bd9e8a6f7c0da52d49bbc0bbe38327b3829d6ba04d368ca49dd9ff3b667d2fc8f1698d891c198bbf8feade1a5501bf5a296408
+  languageName: node
+  linkType: hard
+
 "css-in-js-utils@npm:^2.0.0":
   version: 2.0.1
   resolution: "css-in-js-utils@npm:2.0.1"
@@ -7554,6 +7622,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"css-to-react-native@npm:^3.0.0":
+  version: 3.0.0
+  resolution: "css-to-react-native@npm:3.0.0"
+  dependencies:
+    camelize: ^1.0.0
+    css-color-keywords: ^1.0.0
+    postcss-value-parser: ^4.0.2
+  checksum: 98a2e9d4fbe9cabc8b744dfdd5ec108396ce497a7b860912a95b299bd52517461281810fcb707965a021a8be39adca9587184a26fb4e926211391a1557aca3c1
+  languageName: node
+  linkType: hard
+
 "css-tree@npm:^1.1.2, css-tree@npm:^1.1.3":
   version: 1.1.3
   resolution: "css-tree@npm:1.1.3"
@@ -10104,6 +10183,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"fflate@npm:^0.7.3":
+  version: 0.7.4
+  resolution: "fflate@npm:0.7.4"
+  checksum: b812ab26047432db70ff4c73eb45ad53bd0774575b4818b9c61c2921e89ec65d1259f06ec1618f2ac55e6a2f2e29b6dc09173d213b46580bc69efae5344bf8f1
+  languageName: node
+  linkType: hard
+
 "file-entry-cache@npm:^6.0.1":
   version: 6.0.1
   resolution: "file-entry-cache@npm:6.0.1"
@@ -15957,6 +16043,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"postcss-value-parser@npm:^4.0.2, postcss-value-parser@npm:^4.2.0":
+  version: 4.2.0
+  resolution: "postcss-value-parser@npm:4.2.0"
+  checksum: 819ffab0c9d51cf0acbabf8996dffbfafbafa57afc0e4c98db88b67f2094cb44488758f06e5da95d7036f19556a4a732525e84289a425f4f6fd8e412a9d7442f
+  languageName: node
+  linkType: hard
+
 "postcss@npm:8.4.14":
   version: 8.4.14
   resolution: "postcss@npm:8.4.14"
@@ -17571,6 +17664,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"satori@npm:0.0.38":
+  version: 0.0.38
+  resolution: "satori@npm:0.0.38"
+  dependencies:
+    "@shuding/opentype.js": 1.4.0-beta.0
+    css-background-parser: ^0.1.0
+    css-box-shadow: 1.0.0-3
+    css-to-react-native: ^3.0.0
+    postcss-value-parser: ^4.2.0
+    yoga-layout-prebuilt: ^1.10.0
+  checksum: 42b3cdb665326b7d5f66d64a58bc701b630a550b5e14eef7e6640e4c1d7b37f841f868f9d4776ab23a8f09cabca4ce8ee3c6245f21c9e61e20fc1fe33d9a0d32
+  languageName: node
+  linkType: hard
+
 "scheduler@npm:^0.20.2":
   version: 0.20.2
   resolution: "scheduler@npm:0.20.2"
@@ -18301,6 +18408,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"string.prototype.codepointat@npm:^0.2.1":
+  version: 0.2.1
+  resolution: "string.prototype.codepointat@npm:0.2.1"
+  checksum: bafa15844d7ea5bed24a01fa8954327c0c49226cefe68ab70573f1338f6a4680587db962724924f2cceb91abe408e11bd38c80095f25ee080f136a6c9d300f00
+  languageName: node
+  linkType: hard
+
 "string.prototype.matchall@npm:^4.0.7":
   version: 4.0.7
   resolution: "string.prototype.matchall@npm:4.0.7"
@@ -18947,7 +19061,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"tinybench@npm:^2.2.1":
+"tinybench@npm:^2.2.1, tinybench@npm:^2.3.0":
   version: 2.3.0
   resolution: "tinybench@npm:2.3.0"
   checksum: 6556e42b3b7700795caca07f5bbc2c78e33261ffe5db4c434d54bcfa1cd5c64863357c5b7fff53e031ee236d098313dac78938e12f8f1a9b47f1d7ad55417ce8
@@ -20496,6 +20610,44 @@ __metadata:
   languageName: node
   linkType: hard
 
+"vitest@npm:^0.24.1":
+  version: 0.24.1
+  resolution: "vitest@npm:0.24.1"
+  dependencies:
+    "@types/chai": ^4.3.3
+    "@types/chai-subset": ^1.3.3
+    "@types/node": "*"
+    chai: ^4.3.6
+    debug: ^4.3.4
+    local-pkg: ^0.4.2
+    strip-literal: ^0.4.2
+    tinybench: ^2.3.0
+    tinypool: ^0.3.0
+    tinyspy: ^1.0.2
+    vite: ^3.0.0
+  peerDependencies:
+    "@edge-runtime/vm": "*"
+    "@vitest/browser": "*"
+    "@vitest/ui": "*"
+    happy-dom: "*"
+    jsdom: "*"
+  peerDependenciesMeta:
+    "@edge-runtime/vm":
+      optional: true
+    "@vitest/browser":
+      optional: true
+    "@vitest/ui":
+      optional: true
+    happy-dom:
+      optional: true
+    jsdom:
+      optional: true
+  bin:
+    vitest: vitest.mjs
+  checksum: 52e87aec70351eade4f0fd4c240046cedf68fba8b2bb2d8a592036c69b8a1501a9ad0a790d5d7f8927faf27dd3cafb3609174e7bd3602a2c4dd26fb28e922337
+  languageName: node
+  linkType: hard
+
 "vscode-css-languageservice@npm:^6.0.1":
   version: 6.1.1
   resolution: "vscode-css-languageservice@npm:6.1.1"
@@ -21079,6 +21231,22 @@ __metadata:
   languageName: node
   linkType: hard
 
+"yoga-layout-prebuilt@npm:^1.10.0":
+  version: 1.10.0
+  resolution: "yoga-layout-prebuilt@npm:1.10.0"
+  dependencies:
+    "@types/yoga-layout": 1.9.2
+  checksum: 6954c7c7b04c585a1c974391bea4734611adb85702b5e9131549a1d3dc5b94e69bcfea34121cdaeb5e702663bf290fcce5374910128e54d1031503a57c062865
+  languageName: node
+  linkType: hard
+
+"yoga-wasm-web@npm:0.1.2":
+  version: 0.1.2
+  resolution: "yoga-wasm-web@npm:0.1.2"
+  checksum: 0e7fa70efe1cf50888e950a43104545b15df7267e66a3b7b072092d04dec78815966f4ab685db5de83a026318f93a3bd5404d866c42a6b7457f9fdc8533593ef
+  languageName: node
+  linkType: hard
+
 "z-schema@npm:~5.0.2":
   version: 5.0.4
   resolution: "z-schema@npm:5.0.4"