From 22b189cb193be99165e9fb222a498e0250121611 Mon Sep 17 00:00:00 2001
From: Nafees Nazik <84864519+G3root@users.noreply.github.com>
Date: Sun, 19 Mar 2023 12:36:16 +0530
Subject: [PATCH] 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>
---
 apps/web/pages/api/social/og/image.tsx | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/apps/web/pages/api/social/og/image.tsx b/apps/web/pages/api/social/og/image.tsx
index c37f0a0284..2a448b0d5a 100644
--- a/apps/web/pages/api/social/og/image.tsx
+++ b/apps/web/pages/api/social/og/image.tsx
@@ -1,11 +1,10 @@
 import { ImageResponse } from "@vercel/og";
 import type { NextApiRequest } from "next";
-import { remark } from "remark";
 import type { SatoriOptions } from "satori";
-import strip from "strip-markdown";
 import { z } from "zod";
 
 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) =>
   res.arrayBuffer()
@@ -75,10 +74,13 @@ export default async function handler(req: NextApiRequest) {
         meetingImage: searchParams.get("meetingImage"),
         imageType,
       });
+
+      const title_ = md.render(title).replace(/(<([^>]+)>)/gi, "");
+
       const img = new ImageResponse(
         (
           <Meeting
-            title={title}
+            title={title_}
             profile={{ name: meetingProfileName, image: meetingImage }}
             users={names.map((name, index) => ({ name, username: usernames[index] }))}
           />
@@ -108,8 +110,8 @@ export default async function handler(req: NextApiRequest) {
         description: searchParams.get("description"),
         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;
       };