From 2d9e2c3c8c0dfcd3ac617faad1842912bba559f2 Mon Sep 17 00:00:00 2001
From: Defectink <i@defect.ink>
Date: Mon, 28 Mar 2022 13:07:32 +0800
Subject: [PATCH] Add custom anchor component

---
 components/mdx/Anchor.tsx | 26 ++++++++++++++++++++++++++
 pages/_app.tsx            | 10 +++++++++-
 2 files changed, 35 insertions(+), 1 deletion(-)
 create mode 100644 components/mdx/Anchor.tsx

diff --git a/components/mdx/Anchor.tsx b/components/mdx/Anchor.tsx
new file mode 100644
index 0000000..c361c66
--- /dev/null
+++ b/components/mdx/Anchor.tsx
@@ -0,0 +1,26 @@
+import { AnchorHTMLAttributes } from 'react';
+import cn from 'classnames';
+import { FiExternalLink } from 'react-icons/fi';
+
+interface Props extends AnchorHTMLAttributes<HTMLAnchorElement> {}
+
+const Anchor = ({ children, ...rest }: Props) => {
+  return (
+    <>
+      <a
+        {...rest}
+        className={cn(
+          'mx-[2px] text-teal-500 relative',
+          'before:left-0 before:top-[1px] before:block before:absolute',
+          'before:w-full before:h-full before:transition-all before:shadow-underline',
+          'hover:before:shadow-throughline',
+          'dark:text-teal-600'
+        )}
+      >
+        {children}
+      </a>
+    </>
+  );
+};
+
+export default Anchor;
diff --git a/pages/_app.tsx b/pages/_app.tsx
index 03d27e8..ca977d2 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -5,6 +5,12 @@ import { ThemeProvider } from 'next-themes';
 import 'styles/prism-one-light.css';
 import 'styles/prism-one-dark.css';
 import 'styles/rua.css';
+import { MDXProvider } from '@mdx-js/react';
+import Anchor from 'components/mdx/Anchor';
+
+const components = {
+  a: Anchor,
+};
 
 function MyApp({ Component, pageProps }: AppPropsWithLayout) {
   const getLayout = Component.getLayout ?? ((page) => page);
@@ -26,7 +32,9 @@ function MyApp({ Component, pageProps }: AppPropsWithLayout) {
         enableSystem
         defaultTheme="system"
       >
-        {getLayout(<Component {...pageProps} />)}
+        <MDXProvider components={components}>
+          {getLayout(<Component {...pageProps} />)}
+        </MDXProvider>
       </ThemeProvider>
     </>
   );