From ca93c6fb3f79495b5cd83352f8ad75d32198b03f Mon Sep 17 00:00:00 2001
From: Albert Yu <albert@albertyu.co>
Date: Fri, 13 Dec 2024 00:09:42 +0800
Subject: [PATCH] Generate external links from mdx

---
 docs/src/mdx-components.tsx | 19 ++++++++++++++++++-
 1 file changed, 18 insertions(+), 1 deletion(-)

diff --git a/docs/src/mdx-components.tsx b/docs/src/mdx-components.tsx
index 33b065923c..4a6b0180e7 100644
--- a/docs/src/mdx-components.tsx
+++ b/docs/src/mdx-components.tsx
@@ -1,4 +1,6 @@
 import * as React from 'react';
+import clsx from 'clsx';
+import { ExternalLinkIcon } from 'docs/src/components/icons/ExternalLinkIcon';
 import { DemoLoader } from './components/demo/NewDemoLoader';
 import * as CodeBlock from './components/CodeBlock';
 import * as Table from './components/Table';
@@ -17,7 +19,22 @@ interface MDXComponents {
 }
 
 export const mdxComponents: MDXComponents = {
-  a: (props) => <Link {...props} />,
+  a: (props) => {
+    if (props.href.startsWith('http')) {
+      return (
+        <Link
+          target="_blank"
+          rel="noopener"
+          {...props}
+          className={clsx(props.className, 'inline-flex items-center gap-1')}
+        >
+          {props.children}
+          <ExternalLinkIcon className="" />
+        </Link>
+      );
+    }
+    return <Link {...props} />;
+  },
   code: (props) => <Code className="data-[inline]:mx-[0.1em]" {...props} />,
   h1: (props) => (
     <React.Fragment>