Generate external links from mdx

mui · Dec 12, 2024 · ca93c6f · ca93c6f
1 parent 7f3021a
commit ca93c6f
Showing 1 changed file with 18 additions and 1 deletion.
diff --git 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>