✨ feat(components): Extend LinkContent to support custom node rendering

e2e/fixtures/basic/rspress.config.ts

@@ -3,4 +3,13 @@ import { defineConfig } from 'rspress/config';
 
 export default defineConfig({
   root: path.join(__dirname, 'doc'),
+  themeConfig: {
+    socialLinks: [
+      {
+        icon: 'github',
+        mode: 'dom',
+        content: '<a href="/zh" class="flex items-center text-base font-semibold transition-opacity duration-300 hover:opacity-60" style="width: max-content"><img src="https://lf3-static.bytednsdoc.com/obj/eden-cn/rjhwzy/ljhwZthlaukjlkulzlp/rspress/rspress-navbar-logo-0904.png" alt="logo" id="logo" class="mr-4 rspress-logo dark:hidden" style=" height: 90px; width: 360px"><img src="https://lf3-static.bytednsdoc.com/obj/eden-cn/rjhwzy/ljhwZthlaukjlkulzlp/rspress/rspress-navbar-logo-dark-0904.png" alt="logo" id="logo" class="mr-4 rspress-logo hidden dark:block" style=" height: 45px; width: 180px"></a>',
+      },
+    ],
+  }
 });

e2e/tests/basic.test.ts

@@ -66,4 +66,12 @@ test.describe('basic test', async () => {
       defaultMode === 'dark',
     );
   });
+
+  test('Hover over social links', async ({ page }) => {
+    await page.goto(`http://localhost:${appPort}`);
+    await page.hover('.social-links');
+    await page.waitForTimeout(1000);
+    const logoLink = await page.$('a[href="/zh"]');
+    expect(logoLink).not.toBeNull();
+  });
 });

packages/document/docs/en/api/config/config-theme.mdx

@@ -312,7 +312,7 @@ export default defineConfig({
 - Default: `[]`
 
 You can add related links through the following config, such as `github` links, `twitter` links, etc.
-Related links support three modes: `link mode` `text mode` `image mode`, for example:
+Related links support four modes: `link mode` `text mode` `image mode` `dom mode`, for example:
 
 ```ts title="rspress.config.ts"
 import { defineConfig } from 'rspress/config';
@@ -335,6 +335,12 @@ export default defineConfig({
         mode: 'img',
         content: '/qrcode.png',
       },
+      {
+        icon: 'github',
+        mode: 'dom',
+        content:
+          '<img src="https://lf3-static.bytednsdoc.com/obj/eden-cn/rjhwzy/ljhwZthlaukjlkulzlp/rspress/rspress-navbar-logo-0904.png" alt="logo" id="logo" class="mr-4 rspress-logo dark:hidden">',
+      },
     ],
   },
 });
@@ -343,6 +349,7 @@ export default defineConfig({
 - When in `link` mode, click the icon to jump to the link.
 - When in `text` mode, when the mouse moves over the icon, a pop-up box will be displayed, and the content of the pop-up box is the entered text
 - When in the `img` mode, moving the mouse over the icon will display a bullet box, and the content of the bullet box is the specified picture. It should be noted that the picture needs to be placed in the `public` directory.
+- When in dom mode, html to render can be passed directly into the content field. Use '' for wrapping
 
 Related links support the following types of images, which can be selected through the icon attribute:
 

packages/document/docs/zh/api/config/config-theme.mdx

@@ -298,7 +298,7 @@ export default defineConfig({
 - Default: `[]`
 
 你可以通过如下的配置添加相关链接，比如 `github` 链接、`twitter` 链接等。
-相关链接支持三种模式：`链接模式link` `文本模式text` `图片模式img`，相关例子如下：
+相关链接支持四种模式：`链接模式link` `文本模式text` `图片模式img` `自定义模式dom`，相关例子如下：
 
 ```ts title="rspress.config.ts"
 import { defineConfig } from 'rspress/config';
@@ -321,6 +321,12 @@ export default defineConfig({
         mode: 'img',
         content: '/qrcode.png',
       },
+      {
+        icon: 'github',
+        mode: 'dom',
+        content:
+          '<img src="https://lf3-static.bytednsdoc.com/obj/eden-cn/rjhwzy/ljhwZthlaukjlkulzlp/rspress/rspress-navbar-logo-0904.png" alt="logo" id="logo" class="mr-4 rspress-logo dark:hidden">',
+      },
     ],
   },
 });
@@ -329,6 +335,7 @@ export default defineConfig({
 - 当`link`模式时，点击 icon 即可跳转链接。
 - 当`text`模式时，鼠标移到 icon 上会显示弹框，弹框内容是输入的文本。
 - 当`img`模式时，鼠标移到 icon 上会显示弹框，弹框内容是指定的图片，需要注意的是，图片需要放在`public`目录下。
+- 当`dom`模式时，可以直接在 content 字段中传入需要自定义html。使用''进行包裹。
 
 相关链接支持以下几种图片，通过 icon 属性来选择：
 

packages/shared/src/types/defaultTheme.ts

@@ -239,7 +239,7 @@ export interface DocFooter {
 
 export interface SocialLink {
   icon: SocialLinkIcon;
-  mode: 'link' | 'text' | 'img';
+  mode: 'link' | 'text' | 'img' | 'dom';
   content: string;
 }
 

packages/theme-default/src/components/SocialLinks/LinkContent.tsx

@@ -85,6 +85,28 @@ export const LinkContent = (props: ILinkContentComp) => {
       </div>
     );
   }
+  if(mode === 'dom') {
+    return (
+      <div
+        className={`${styles.socialLinksIcon} cursor-pointer relative`}
+        onMouseEnter={mouseEnterIcon}
+        onMouseLeave={mouseLeavePopper}
+      >
+        {IconComp}
+        {contentVisible ? (
+          <div
+            className="break-all z-[1] p-3 absolute right-0 bg-white dark:bg-dark rounded-xl"
+            style={{
+              boxShadow: 'var(--rp-shadow-3)',
+              ...popperStyle,
+            }}
+          >
+            <div dangerouslySetInnerHTML={{ __html: content }} />
+          </div>
+        ) : null}
+      </div>
+    );
+  }
 
   return <div></div>;
 };