fix(console): fix custom element swap in mdx (#6166)

packages/console/src/assets/docs/guides/api-python/README.mdx

@@ -100,7 +100,7 @@ def requires_auth(f):
 <br/>
 
 <InlineNotification>
-  For <a href="https://docs.logto.io/docs/recipes/rbac/" target="_blank" rel="noopener">🔐 RBAC</a>, scope validation is also required.
+  For <Anchor href="https://docs.logto.io/docs/recipes/rbac/" target="_blank" rel="noopener">🔐 RBAC</Anchor>, scope validation is also required.
 </InlineNotification>
 
 </Step>

packages/console/src/assets/docs/guides/native-flutter/README.mdx

@@ -45,7 +45,7 @@ git clone https://github.com/logto-io/dart
 
 ### Dependencies and Android settings
 
-<details>
+<Details>
 
 <summary>flutter_secure_storage</summary>
 
@@ -117,11 +117,9 @@ To avoid this, you can disable auto backup for your app or exclude `sharedprefs`
 
 Please check [flutter_secure_storage](https://pub.dev/packages/flutter_secure_storage#configure-android-version) for more details.
 
-</details>
+</Details>
 
-<br />
-
-<details>
+<Details>
 
 <summary>flutter_web_auth</summary>
 
@@ -129,7 +127,7 @@ Please check [flutter_secure_storage](https://pub.dev/packages/flutter_secure_st
 
 This plugin uses `ASWebAuthenticationSession` on iOS 12+ and macOS 10.15+, `SFAuthenticationSession` on iOS 11, `Chrome Custom Tabs` on Android and opens a new window on Web.
 
-</details>
+</Details>
 
 </Step>
 

packages/console/src/assets/docs/guides/native-ios-swift/README.mdx

@@ -24,20 +24,20 @@ Since Xcode 11, you can [directly import a swift package](https://developer.appl
 
 We do not support **Carthage** and **CocoaPods** at the time due to some technical issues.
 
-<details>
+<Details>
   <summary>Carthage</summary>
 
 Carthage [needs a `xcodeproj` file to build](https://github.com/Carthage/Carthage/issues/1226#issuecomment-290931385), but `swift package generate-xcodeproj` will report a failure since we are using binary targets
 for native social plugins. We will try to find a workaround later.
 
-</details>
+</Details>
 
-<details>
+<Details>
   <summary>CocoaPods</summary>
 
 CocoaPods [does not support local dependency](https://github.com/CocoaPods/CocoaPods/issues/3276) and monorepo, thus it's hard to create a `.podspec` for this repo.
 
-</details>
+</Details>
 
 </Step>
 

packages/console/src/assets/docs/guides/web-go/README.mdx

@@ -12,7 +12,7 @@ import Checkpoint from '../../fragments/_checkpoint.md';
 >
 
 <InlineNotification>
-  The following demonstration is built upon the <a href="https://gin-gonic.com">Gin Web Framework</a>.  
+  The following demonstration is built upon the <Anchor href="https://gin-gonic.com">Gin Web Framework</Anchor>.  
   You may also integrate Logto into other frameworks by taking the same steps.
 </InlineNotification>
 

packages/console/src/components/Guide/index.module.scss

@@ -51,8 +51,11 @@
     code:not(pre > code) {
       background: var(--color-layer-2);
       font: var(--font-body-2);
-      padding: _.unit(1);
       border-radius: 4px;
+
+      &:not(a > code) {
+        padding: _.unit(1);
+      }
     }
 
     hr {

packages/console/src/mdx-components/Anchor/index.tsx

@@ -0,0 +1,12 @@
+import TextLink from '@/ds-components/TextLink';
+
+/**
+ * A custom anchor element that used to swap out the default one in MDX.
+ */
+export default function Anchor({ children, ...props }: JSX.IntrinsicElements['a']) {
+  return (
+    <TextLink {...props} targetBlank>
+      {children}
+    </TextLink>
+  );
+}

packages/console/src/mdx-components/MdxProvider/index.tsx

@@ -1,8 +1,7 @@
 import { MDXProvider } from '@mdx-js/react';
 import type React from 'react';
 
-import TextLink from '@/ds-components/TextLink';
-
+import Anchor from '../Anchor';
 import Code from '../Code';
 import DetailsSummary from '../DetailsSummary';
 
@@ -19,12 +18,10 @@ export default function MdxProvider({ children }: Props) {
         // custom component now.
         // See: https://github.com/orgs/mdx-js/discussions/2231#discussioncomment-4729474
         Code,
-        a: ({ children, ...props }) => (
-          <TextLink {...props} targetBlank>
-            {children}
-          </TextLink>
-        ),
+        a: Anchor,
+        Anchor,
         details: DetailsSummary,
+        Details: DetailsSummary,
       }}
     >
       {children}