|
| 1 | +import { ImageResponse } from "next/og"; |
| 2 | +import path from "path"; |
| 3 | + |
| 4 | +import * as articles from "@/app/(articles)"; |
| 5 | + |
| 6 | +import * as fs from "fs/promises"; |
| 7 | + |
| 8 | +export const dynamic = "force-static"; |
| 9 | + |
| 10 | +// Same size as for twitter card to simplify generation. |
| 11 | +const size = { |
| 12 | + width: 1200, |
| 13 | + height: 675, |
| 14 | +}; |
| 15 | + |
| 16 | +export async function generateStaticParams(): Promise<articles.Params[]> { |
| 17 | + return articles.list(); |
| 18 | +} |
| 19 | + |
| 20 | +function base64url(data: string, mimeType: string = "image/png") { |
| 21 | + return `data:${mimeType};base64,${data}`; |
| 22 | +} |
| 23 | + |
| 24 | +export async function GET( |
| 25 | + request: Request, |
| 26 | + { |
| 27 | + params, |
| 28 | + }: { |
| 29 | + params: Promise<articles.Params>; |
| 30 | + }, |
| 31 | +) { |
| 32 | + const { slug } = await params; |
| 33 | + const cwd = process.cwd(); |
| 34 | + |
| 35 | + const [ |
| 36 | + articleMetadata, |
| 37 | + fontHorizon, |
| 38 | + fontRubikRegular, |
| 39 | + fontRubikMedium, |
| 40 | + ogCover, |
| 41 | + neploxLogo, |
| 42 | + ] = await Promise.all([ |
| 43 | + articles.loadMetadata(slug), |
| 44 | + fs.readFile(path.join(cwd, "app", "fonts", "horizon.otf")), |
| 45 | + fs.readFile(path.join(cwd, "app", "fonts", "Rubik", "Rubik-Regular.ttf")), |
| 46 | + fs.readFile(path.join(cwd, "app", "fonts", "Rubik", "Rubik-Medium.ttf")), |
| 47 | + fs.readFile( |
| 48 | + path.join(cwd, "articles", "blog", slug, "og-cover.png"), |
| 49 | + "base64", |
| 50 | + ), |
| 51 | + fs.readFile(path.join(cwd, "app", "assets", "neplox.png"), "base64"), |
| 52 | + ]); |
| 53 | + |
| 54 | + const potentialIconNames = ["og-icon.png", "og-icon.svg"]; |
| 55 | + let ogIcon: string | undefined = undefined; |
| 56 | + for (const iconName of potentialIconNames) { |
| 57 | + try { |
| 58 | + ogIcon = await fs.readFile( |
| 59 | + path.join(cwd, "articles", "blog", slug, iconName), |
| 60 | + "base64", |
| 61 | + ); |
| 62 | + break; |
| 63 | + } catch (e) { |
| 64 | + if (e instanceof Error && "code" in e && e.code === "ENOENT") { |
| 65 | + continue; |
| 66 | + } |
| 67 | + throw e; |
| 68 | + } |
| 69 | + } |
| 70 | + |
| 71 | + if (!ogIcon) { |
| 72 | + throw new Error("No og icon found"); |
| 73 | + } |
| 74 | + |
| 75 | + const articleAuthor = articles.authors[articleMetadata.author]; |
| 76 | + |
| 77 | + return new ImageResponse( |
| 78 | + ( |
| 79 | + <div |
| 80 | + style={{ |
| 81 | + width: "1200px", |
| 82 | + height: "675px", |
| 83 | + backgroundImage: `url(${base64url(ogCover)})`, |
| 84 | + padding: "64px 80px", |
| 85 | + display: "flex", |
| 86 | + flexDirection: "column", |
| 87 | + }} |
| 88 | + > |
| 89 | + {/* Branding */} |
| 90 | + <div style={{ display: "flex" }}> |
| 91 | + {/* eslint-disable-next-line @next/next/no-img-element */} |
| 92 | + <img |
| 93 | + src={base64url(neploxLogo)} |
| 94 | + alt="NEPLOX" |
| 95 | + height={80} |
| 96 | + width={94} |
| 97 | + style={{ |
| 98 | + position: "absolute", |
| 99 | + // -(80px size - 48px font size) / 2 |
| 100 | + // simulate scale transform, where the origin would be aligned with the text, but then the image is scaled up |
| 101 | + top: "-16px", |
| 102 | + }} |
| 103 | + /> |
| 104 | + <span |
| 105 | + style={{ |
| 106 | + fontFamily: "Horizon", |
| 107 | + fontWeight: 600, |
| 108 | + fontSize: "48px", |
| 109 | + color: "#ef5900", // theme brand |
| 110 | + position: "absolute", |
| 111 | + left: "110px", // 94px logo width + 16px padding |
| 112 | + }} |
| 113 | + > |
| 114 | + NEPLOX |
| 115 | + </span> |
| 116 | + </div> |
| 117 | + |
| 118 | + {/* Related icon */} |
| 119 | + <div |
| 120 | + style={{ |
| 121 | + display: "flex", |
| 122 | + backgroundColor: "#252125", // theme dark (raisin-900) |
| 123 | + // (675 (img height) / 2) - 2 * 48px (icon block top/bottom padding) |
| 124 | + width: "241px", |
| 125 | + height: "241px", |
| 126 | + borderRadius: "24px", |
| 127 | + position: "absolute", |
| 128 | + top: "48px", |
| 129 | + right: "80px", |
| 130 | + alignItems: "center", |
| 131 | + justifyContent: "center", |
| 132 | + }} |
| 133 | + > |
| 134 | + {/* eslint-disable-next-line @next/next/no-img-element */} |
| 135 | + <img |
| 136 | + src={base64url(ogIcon, "image/svg+xml")} |
| 137 | + alt="Related icon" |
| 138 | + style={{ |
| 139 | + maxHeight: "177px", // 241 - 32 * 2 (padding) |
| 140 | + maxWidth: "177px", |
| 141 | + }} |
| 142 | + /> |
| 143 | + </div> |
| 144 | + |
| 145 | + {/* Top half text */} |
| 146 | + <div style={{ display: "flex", flexBasis: "50%" }}> |
| 147 | + <span |
| 148 | + style={{ |
| 149 | + fontFamily: "RubikRegular", |
| 150 | + alignSelf: "flex-end", |
| 151 | + fontSize: "48px", |
| 152 | + color: "#48434a", // theme raisin-600 |
| 153 | + marginBottom: "16px", |
| 154 | + }} |
| 155 | + > |
| 156 | + CTF Writeup |
| 157 | + </span> |
| 158 | + </div> |
| 159 | + |
| 160 | + {/* Bottom half text */} |
| 161 | + <div |
| 162 | + style={{ |
| 163 | + display: "flex", |
| 164 | + flexDirection: "column", |
| 165 | + justifyContent: "space-between", |
| 166 | + flexBasis: "50%", |
| 167 | + }} |
| 168 | + > |
| 169 | + <span |
| 170 | + style={{ |
| 171 | + fontFamily: "RubikMedium", |
| 172 | + fontSize: "64px", |
| 173 | + color: "#252125", // theme dark |
| 174 | + }} |
| 175 | + > |
| 176 | + {articleMetadata.title} |
| 177 | + </span> |
| 178 | + <div |
| 179 | + style={{ |
| 180 | + display: "flex", |
| 181 | + justifyContent: "space-between", |
| 182 | + fontFamily: "RubikRegular", |
| 183 | + fontSize: "32px", |
| 184 | + color: "#48434a", // theme raisin-600 |
| 185 | + }} |
| 186 | + > |
| 187 | + <span> |
| 188 | + By {articleAuthor.name} ({articleMetadata.author}) |
| 189 | + </span> |
| 190 | + <span> |
| 191 | + {new Date(articleMetadata.publishedAt).toLocaleDateString( |
| 192 | + "en-US", |
| 193 | + { |
| 194 | + year: "numeric", |
| 195 | + month: "long", |
| 196 | + day: "numeric", |
| 197 | + }, |
| 198 | + )} |
| 199 | + </span> |
| 200 | + </div> |
| 201 | + </div> |
| 202 | + </div> |
| 203 | + ), |
| 204 | + { |
| 205 | + ...size, |
| 206 | + fonts: [ |
| 207 | + { data: fontHorizon, name: "Horizon", style: "normal", weight: 600 }, |
| 208 | + { |
| 209 | + data: fontRubikRegular, |
| 210 | + name: "RubikRegular", |
| 211 | + style: "normal", |
| 212 | + weight: 400, |
| 213 | + }, |
| 214 | + { |
| 215 | + data: fontRubikMedium, |
| 216 | + name: "RubikMedium", |
| 217 | + style: "normal", |
| 218 | + weight: 500, |
| 219 | + }, |
| 220 | + ], |
| 221 | + }, |
| 222 | + ); |
| 223 | +} |
0 commit comments