summaryrefslogtreecommitdiff
path: root/src/app/banner.png/og.tsx
diff options
context:
space:
mode:
authorBertrand Yuan <bert.yuan@outlook.com>2025-12-16 00:12:49 +0800
committerBertrand Yuan <bert.yuan@outlook.com>2025-12-16 00:12:49 +0800
commit02ae938c238c9d18448d17a8ec92c0edd8c17463 (patch)
treedcd6a30505adb52522b20af2c0ac27f713403f10 /src/app/banner.png/og.tsx
parent48b07bc308a35734a6a7a305c8fdccbfa47de7d8 (diff)
feat(back-end): introduce payload
Payload is the next.js Headless CMS and App Framework, I would like to pick it up and modify it as it is MIT licensed. Many features in Payload is not applicable for our project. So, I modify it so that it is light and clear.
Diffstat (limited to 'src/app/banner.png/og.tsx')
-rw-r--r--src/app/banner.png/og.tsx53
1 files changed, 0 insertions, 53 deletions
diff --git a/src/app/banner.png/og.tsx b/src/app/banner.png/og.tsx
deleted file mode 100644
index 1a520c0..0000000
--- a/src/app/banner.png/og.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-import type { ImageResponseOptions } from 'next/dist/compiled/@vercel/og/types';
-import { ImageResponse } from 'next/og';
-import type { ReactElement } from 'react';
-
-interface GenerateProps {
- title?: string;
- subtitle?: string;
-}
-
-export function generateOGImage(
- options: GenerateProps & ImageResponseOptions,
-): ImageResponse {
- const { title, subtitle, ...rest } = options;
-
- return new ImageResponse(
- generate({
- title,
- subtitle,
- }),
- {
- width: 1200,
- height: 630,
- ...rest,
- },
- );
-}
-
-export function generate({ title = 'John Doe' }: GenerateProps): ReactElement {
- return (
- <div
- tw='flex h-full w-full bg-black text-white'
- style={{ fontFamily: 'Geist Sans' }}
- >
- <div tw='flex border absolute border-stone-900 border-dashed inset-y-0 left-16 w-[1px]' />
- <div tw='flex border absolute border-stone-900 border-dashed inset-y-0 right-16 w-[1px]' />
- <div tw='flex border absolute border-stone-900 inset-x-0 h-[1px] top-16' />
- <div tw='flex border absolute border-stone-900 inset-x-0 h-[1px] bottom-16' />
- <div tw='flex items-center absolute w-[896px] justify-center inset-32'>
- <div
- tw='tracking-tight flex-grow-1 flex flex-col justify-center items-center leading-[1.1]'
- style={{
- textWrap: 'balance',
- fontWeight: 600,
- fontSize: title && title.length > 20 ? 64 : 80,
- letterSpacing: '-0.04em',
- }}
- >
- {title}
- </div>
- </div>
- </div>
- );
-}