From 689bc205cb7fac82435bb3b7921936e7094fd013 Mon Sep 17 00:00:00 2001
From: Rui Ying <git@ruiying.io>
Date: Mon, 26 Feb 2024 15:37:00 -0800
Subject: [PATCH] Update rehype react types

---
 lib/markdown.tsx | 25 +++++++++++++------------
 1 file changed, 13 insertions(+), 12 deletions(-)

diff --git a/lib/markdown.tsx b/lib/markdown.tsx
index e33d86b..d8132ac 100644
--- a/lib/markdown.tsx
+++ b/lib/markdown.tsx
@@ -8,14 +8,23 @@ import imgSize from "rehype-img-size";
 import highlight from "rehype-highlight";
 import { common } from "lowlight";
 import groovy from "highlight.js/lib/languages/groovy";
-import react from "rehype-react";
+import react, { Components } from "rehype-react";
 import Image from "next/image";
 import Link from "next/link";
 import isAbsoluteUrl from "is-absolute-url";
 
-// @ts-expect-error: the react types are missing.
 const production = { Fragment: prod.Fragment, jsx: prod.jsx, jsxs: prod.jsxs };
 
+const components = {
+  img: (props) => <Image {...(props as any)} alt={props.alt!} />,
+  a: (props) =>
+    props.href && isAbsoluteUrl(props.href) ? (
+      <Link {...(props as any)} target="_blank" rel="noopener noreferrer" />
+    ) : (
+      <Link {...(props as any)} />
+    ),
+} as Components;
+
 export const getReactElementFromMarkdown = async (md: string) => {
   const file = await unified()
     .use(markdown)
@@ -26,16 +35,8 @@ export const getReactElementFromMarkdown = async (md: string) => {
     .use(highlight, { detect: true, languages: { ...common, groovy } })
     .use(react, {
       ...production,
-      components: {
-        img: (props: any) => <Image {...props} alt={props.alt!} />,
-        a: (props: any) =>
-          isAbsoluteUrl(props.href) ? (
-            <Link {...props} target="_blank" rel="noopener noreferrer" />
-          ) : (
-            <Link {...props} />
-          ),
-      },
-    })
+      components,
+    } as any)
     .process(md);
 
   return file.result;