| 1 | import { ImageResponse } from "next/og"; |
| 2 | import { |
| 3 | allEnglishWritings, |
| 4 | allGermanWritings, |
| 5 | } from "@/.content-collections/generated"; |
| 6 | |
| 7 | export const runtime = |
| 8 | export const contentType = |
| 9 | export const size = |
| 10 | width: 1200, |
| 11 | height: 630, |
| 12 | }; |
| 13 | |
| 14 | function truncate(text: |
| 15 | if (text.length |
| 16 | return text.slice |
| 17 | } |
| 18 | |
| 19 | export default async function |
| 20 | params: Promise |
| 21 | }) { |
| 22 | const params = |
| 23 | const post = |
| 24 | (p) => |
| 25 | ); |
| 26 | |
| 27 | const title = |
| 28 | const summary = |
| 29 | |
| 30 | return new ImageResponse |
| 31 | ( |
| 32 | <div tw="flex w-full h-full relative |
| 33 | <div |
| 34 | tw="absolute inset-0" |
| 35 | style={{ |
| 36 | backgroundImage: |
| 37 | "linear-gradient(180deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0) 40%)", |
| 38 | }} |
| 39 | /> |
| 40 | <div tw="flex flex-col w-full h-full text-white p-16 |
| 41 | <div tw="flex-1 flex flex-col justify-center |
| 42 | <div tw="flex flex-col rounded-2xl border border-white/10 bg-white/5 p-12 |
| 43 | <div tw="flex items-center justify-between mb-6 |
| 44 | <span tw="text-xl tracking-wide text-slate-300 |
| 45 | <span tw="text-base text-slate-400 |
| 46 | </div> |
| 47 | <h1 tw="text-6xl leading-tight font-extrabold text-white |
| 48 | {summary ? ( |
| 49 | <p tw="mt-6 text-2xl leading-snug text-slate-300 max-w-[950px] |
| 50 | {summary} |
| 51 | </p> |
| 52 | ) : null} |
| 53 | <div tw="flex items-center justify-between mt-10 |
| 54 | <span tw="text-lg text-slate-400 |
| 55 | <span tw="text-lg text-slate-400 |
| 56 | </div> |
| 57 | </div> |
| 58 | </div> |
| 59 | </div> |
| 60 | </div> |
| 61 | ), |
| 62 | { |
| 63 | ...size, |
| 64 | } |
| 65 | ); |
| 66 | } |