From 0004af17a0cc0bf7afc1790cfa30730b4975326a Mon Sep 17 00:00:00 2001
From: Kilu <lu@appflowy.io>
Date: Thu, 24 Oct 2024 17:49:21 +0800
Subject: [PATCH 1/2] fix: blog link component

---
 components/blog/link.tsx       | 27 +++++++++++++++++++++++++++
 components/blog/mdx-render.tsx | 16 ++--------------
 2 files changed, 29 insertions(+), 14 deletions(-)
 create mode 100644 components/blog/link.tsx

diff --git a/components/blog/link.tsx b/components/blog/link.tsx
new file mode 100644
index 0000000..045e110
--- /dev/null
+++ b/components/blog/link.tsx
@@ -0,0 +1,27 @@
+'use client';
+import { cn } from '@/lib/utils';
+import React, { HTMLAttributes, PropsWithChildren } from 'react';
+
+function Link({
+  children,
+  ...props
+}: PropsWithChildren<HTMLAttributes<HTMLAnchorElement>> & {
+  children: React.ReactNode;
+}) {
+  return (
+    <span
+      onClick={() => {
+        if ('href' in props) {
+          const href = props.href as string;
+          window.open(href, '_blank');
+        }
+      }}
+      className={cn('decoration-muted cursor-pointer text-black underline opacity-70 hover:opacity-100')}
+      rel='noopener noreferrer'
+    >
+      {children}
+    </span>
+  );
+}
+
+export default Link;
diff --git a/components/blog/mdx-render.tsx b/components/blog/mdx-render.tsx
index f953f4d..00bca08 100644
--- a/components/blog/mdx-render.tsx
+++ b/components/blog/mdx-render.tsx
@@ -1,5 +1,6 @@
 import CodeBlock from '@/components/blog/code-block';
 import InlineCodeTag from '@/components/blog/inline-code';
+import Link from '@/components/blog/link';
 import Quote from '@/components/blog/quote';
 import Caption from '@/components/blog/caption';
 import Video from '@/components/blog/video';
@@ -55,20 +56,7 @@ const components = {
     />
   ),
   Video,
-  a: (props: PropsWithChildren<HTMLAttributes<HTMLAnchorElement>>) => {
-    const { children, ...rest } = props;
-
-    return (
-      <a
-        {...rest}
-        className={cn('decoration-muted text-black opacity-70 hover:opacity-100')}
-        target='_blank'
-        rel='noopener noreferrer'
-      >
-        {children}
-      </a>
-    );
-  },
+  a: Link,
 };
 
 const MyMDXRender: React.FC<MyMDXComponentProps> = ({ source }) => {

From 3a47877c3fc981475eb8502b9c8dcbd4961d93aa Mon Sep 17 00:00:00 2001
From: Kilu <lu@appflowy.io>
Date: Thu, 24 Oct 2024 17:53:01 +0800
Subject: [PATCH 2/2] fix: blog link component

---
 components/blog/mdx-render.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/blog/mdx-render.tsx b/components/blog/mdx-render.tsx
index 00bca08..a9b5e27 100644
--- a/components/blog/mdx-render.tsx
+++ b/components/blog/mdx-render.tsx
@@ -7,7 +7,7 @@ import Video from '@/components/blog/video';
 import { cn } from '@/lib/utils';
 import { MDXRemote } from 'next-mdx-remote/rsc';
 import Image, { ImageProps } from './mdx-image';
-import { HTMLAttributes, PropsWithChildren } from 'react';
+import { HTMLAttributes } from 'react';
 import Admonition from './admonition';
 import Heading, { HeadingProps } from './heading';
 import MDXTable from './mdx-table';