From 4e608bb2b596bfbf57f15b8dafec9d89529d2525 Mon Sep 17 00:00:00 2001 From: h7ml Date: Thu, 18 Apr 2024 20:34:55 +0800 Subject: [PATCH] feat(components): Extend LinkContent to support custom node rendering (#964) Co-authored-by: Timeless0911 <50201324+Timeless0911@users.noreply.github.com> --- e2e/fixtures/basic/rspress.config.ts | 9 ++++++++ e2e/tests/basic.test.ts | 8 +++++++ .../docs/en/api/config/config-theme.mdx | 9 +++++++- .../docs/zh/api/config/config-theme.mdx | 9 +++++++- packages/shared/src/types/defaultTheme.ts | 2 +- .../components/SocialLinks/LinkContent.tsx | 22 +++++++++++++++++++ 6 files changed, 56 insertions(+), 3 deletions(-) diff --git a/e2e/fixtures/basic/rspress.config.ts b/e2e/fixtures/basic/rspress.config.ts index 85cca368c..12602f408 100644 --- a/e2e/fixtures/basic/rspress.config.ts +++ b/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: '', + }, + ], + } }); diff --git a/e2e/tests/basic.test.ts b/e2e/tests/basic.test.ts index 216d2dd73..5d3d7e017 100644 --- a/e2e/tests/basic.test.ts +++ b/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(); + }); }); diff --git a/packages/document/docs/en/api/config/config-theme.mdx b/packages/document/docs/en/api/config/config-theme.mdx index 2caf143f1..8fbb77fae 100644 --- a/packages/document/docs/en/api/config/config-theme.mdx +++ b/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: + '', + }, ], }, }); @@ -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: diff --git a/packages/document/docs/zh/api/config/config-theme.mdx b/packages/document/docs/zh/api/config/config-theme.mdx index 4359d7e4a..dc3b11397 100644 --- a/packages/document/docs/zh/api/config/config-theme.mdx +++ b/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: + '', + }, ], }, }); @@ -329,6 +335,7 @@ export default defineConfig({ - 当`link`模式时，点击 icon 即可跳转链接。 - 当`text`模式时，鼠标移到 icon 上会显示弹框，弹框内容是输入的文本。 - 当`img`模式时，鼠标移到 icon 上会显示弹框，弹框内容是指定的图片，需要注意的是，图片需要放在`public`目录下。 +- 当`dom`模式时，可以直接在 content 字段中传入需要自定义html。使用''进行包裹。 相关链接支持以下几种图片，通过 icon 属性来选择： diff --git a/packages/shared/src/types/defaultTheme.ts b/packages/shared/src/types/defaultTheme.ts index 2b6b00e48..03f827d9d 100644 --- a/packages/shared/src/types/defaultTheme.ts +++ b/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; } diff --git a/packages/theme-default/src/components/SocialLinks/LinkContent.tsx b/packages/theme-default/src/components/SocialLinks/LinkContent.tsx index 9c3ae8517..17d7f515a 100644 --- a/packages/theme-default/src/components/SocialLinks/LinkContent.tsx +++ b/packages/theme-default/src/components/SocialLinks/LinkContent.tsx @@ -85,6 +85,28 @@ export const LinkContent = (props: ILinkContentComp) => { ); } + if(mode === 'dom') { + return ( +
+ {IconComp} + {contentVisible ? ( +
+
+
+ ) : null} +
+ ); + } return
; };