fix: render markdown in og images (#7693)

* chore: remove unused packages

* fix: add dangerously set inner html

* fix: use markdown

* fix: add remove html regex

* fix: revert dangerouslySetInnerHTML

* fix: title

* added yarn.lock

* yarn

* fix: yarn lock

* Update yarn.lock

* Update yarn lock

* Revert yarn lock changes

---------

Co-authored-by: Peer Richelsen <peeroke@gmail.com>
Co-authored-by: Peer Richelsen <peer@cal.com>
Co-authored-by: Carina Wollendorfer <30310907+CarinaWolli@users.noreply.github.com>
Co-authored-by: zomars <zomars@me.com>
fix/booking-requiring-confirmations
Nafees Nazik 2023-03-19 12:36:16 +05:30 committed by GitHub
parent 27c29c65e2
commit 22b189cb19
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 7 additions and 5 deletions

View File

@ -1,11 +1,10 @@
import { ImageResponse } from "@vercel/og"; import { ImageResponse } from "@vercel/og";
import type { NextApiRequest } from "next"; import type { NextApiRequest } from "next";
import { remark } from "remark";
import type { SatoriOptions } from "satori"; import type { SatoriOptions } from "satori";
import strip from "strip-markdown";
import { z } from "zod"; import { z } from "zod";
import { Meeting, App, Generic } from "@calcom/lib/OgImages"; import { Meeting, App, Generic } from "@calcom/lib/OgImages";
import { md } from "@calcom/lib/markdownIt";
const calFont = fetch(new URL("../../../../public/fonts/cal.ttf", import.meta.url)).then((res) => const calFont = fetch(new URL("../../../../public/fonts/cal.ttf", import.meta.url)).then((res) =>
res.arrayBuffer() res.arrayBuffer()
@ -75,10 +74,13 @@ export default async function handler(req: NextApiRequest) {
meetingImage: searchParams.get("meetingImage"), meetingImage: searchParams.get("meetingImage"),
imageType, imageType,
}); });
const title_ = md.render(title).replace(/(<([^>]+)>)/gi, "");
const img = new ImageResponse( const img = new ImageResponse(
( (
<Meeting <Meeting
title={title} title={title_}
profile={{ name: meetingProfileName, image: meetingImage }} profile={{ name: meetingProfileName, image: meetingImage }}
users={names.map((name, index) => ({ name, username: usernames[index] }))} users={names.map((name, index) => ({ name, username: usernames[index] }))}
/> />
@ -108,8 +110,8 @@ export default async function handler(req: NextApiRequest) {
description: searchParams.get("description"), description: searchParams.get("description"),
imageType, imageType,
}); });
const description_ = await (await remark().use(strip).process(description)).toString();
const img = new ImageResponse(<Generic title={title} description={description_} />, ogConfig) as { const img = new ImageResponse(<Generic title={title} description={description} />, ogConfig) as {
body: Buffer; body: Buffer;
}; };