Nomchy/discord.js
1
0
Fork 0
mirror of https://github.com/discordjs/discord.js.git synced 2026-03-11 17:13:31 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat: add og image gen

Browse Source
This commit is contained in:
iCrawl
2022-10-11 03:34:29 +02:00
parent d587467a38
commit f75f13d75b
34 changed files with 347 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
apps/website/src/assets/fonts/Inter-Black.ttf Normal file
View File

Binary file not shown.

BIN
apps/website/src/assets/fonts/Inter-Bold.ttf Normal file
View File

Binary file not shown.

BIN
apps/website/src/assets/fonts/Inter-Light.ttf Normal file
View File

Binary file not shown.

BIN
apps/website/src/assets/fonts/Inter-Medium.ttf Normal file
View File

Binary file not shown.

BIN
apps/website/src/assets/fonts/Inter-Regular.ttf Normal file
View File

Binary file not shown.

BIN
apps/website/src/assets/fonts/Inter-SemiBold.ttf Normal file
View File

Binary file not shown.

1
apps/website/src/pages/_app.tsx
View File

@@ -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';

2
apps/website/src/pages/_document.tsx
View File

@@ -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>

56
apps/website/src/pages/api/og.tsx Normal file
View File

@@ -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',
};

2
apps/website/src/pages/docs/[...slug].tsx
View File

@@ -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`],
};

106
apps/website/src/styles/inter.css Normal file
View File

@@ -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');
}

2
apps/website/src/styles/main.css
View File

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