Skip to content

Commit 66fe9f8

Browse files
SoonIterSoonIter
authored
refactor(theme/EditLink): merge EditLinkRow into EditLink and extract SVG icons (#3172)
1 parent 89d1104 commit 66fe9f8

File tree

14 files changed

+55
-91
lines changed

14 files changed

+55
-91
lines changed

‎packages/core/src/node/runtimeModule/DEFAULT_I18N_TEXT.ts‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -143,10 +143,10 @@ export const DEFAULT_I18N_TEXT = {
143143
ru: 'Скопировать ссылку в формате Markdown',
144144
},
145145
editLinkText: {
146-
en: '📝 Edit this page',
147-
zh: '📝 编辑此页面',
148-
ja: '📝 このページを編集',
149-
ko: '📝 이 페이지 편집',
146+
en: 'Edit this page',
147+
zh: '编辑此页面',
148+
ja: 'このページを編集',
149+
ko: '이 페이지 편집',
150150
ru: 'Отредактировать страницу',
151151
},
152152
codeButtonGroupCopyButtonText: {

‎packages/core/src/theme/assets/edit.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎packages/core/src/theme/assets/scroll-to-top.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎packages/core/src/theme/components/EditLink/index.tsx‎

Lines changed: 13 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
1+
import { IconEdit, Link, SvgWrapper } from '@theme';
12
import './index.scss';
23
import { useEditLink } from './useEditLink';
34

4-
export function EditLink() {
5+
export function EditLink({ isOutline }: { isOutline?: boolean }) {
56
const editLinkObj = useEditLink();
67

78
if (!editLinkObj) {
@@ -10,10 +11,18 @@ export function EditLink() {
1011

1112
const { text, link } = editLinkObj;
1213

13-
// EditLink must be an external site, so we use <a> directly instead of Link
14+
if (isOutline) {
15+
return (
16+
<Link href={link} className="rp-outline__action-row">
17+
<SvgWrapper icon={IconEdit} width="16" height="16" />
18+
<span>{text}</span>
19+
</Link>
20+
);
21+
}
22+
1423
return (
15-
<a href={link} target="_blank" className="rp-edit-link">
24+
<Link href={link} className="rp-edit-link">
1625
{text}
17-
</a>
26+
</Link>
1827
);
1928
}

‎packages/core/src/theme/components/Outline/EditLinkRow.tsx‎

Lines changed: 0 additions & 33 deletions
This file was deleted.

‎packages/core/src/theme/components/Outline/ScrollToTop.scss‎

Lines changed: 0 additions & 13 deletions
This file was deleted.

‎packages/core/src/theme/components/Outline/ScrollToTop.tsx‎

Lines changed: 9 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { useI18n } from '@rspress/core/runtime';
2-
import './ScrollToTop.scss';
2+
import { IconScrollToTop, SvgWrapper, useReadPercent } from '@theme';
33

44
export function ScrollToTop() {
55
const scrollToTop = () => {
@@ -11,40 +11,15 @@ export function ScrollToTop() {
1111

1212
const t = useI18n();
1313

14-
return (
15-
<button className="rp-outline__scroll-to-top" onClick={scrollToTop}>
16-
<svg
17-
width="16"
18-
height="16"
19-
viewBox="0 0 16 16"
20-
fill="none"
21-
xmlns="http://www.w3.org/2000/svg"
22-
>
23-
<path
24-
fillRule="evenodd"
25-
clipRule="evenodd"
26-
d="M7.99967 14.6667C11.6816 14.6667 14.6663 11.6819 14.6663 8.00001C14.6663 4.31811 11.6816 1.33334 7.99967 1.33334C4.31777 1.33334 1.33301 4.31811 1.33301 8.00001C1.33301 11.6819 4.31777 14.6667 7.99967 14.6667Z"
27-
stroke="currentColor"
28-
strokeOpacity="0.8"
29-
strokeWidth="1.33333"
30-
/>
31-
<path
32-
d="M7.99967 14.6667C11.6816 14.6667 14.6663 11.6819 14.6663 8.00001C14.6663 4.31811 11.6816 1.33334 7.99967 1.33334C4.31777 1.33334 1.33301 4.31811 1.33301 8.00001C1.33301 11.6819 4.31777 14.6667 7.99967 14.6667Z"
33-
stroke="currentColor"
34-
strokeOpacity="0.8"
35-
strokeWidth="1.33333"
36-
strokeLinejoin="round"
37-
/>
38-
<path
39-
d="M11 9L8 6L5 9"
40-
stroke="currentColor"
41-
strokeOpacity="0.8"
42-
strokeWidth="1.33333"
43-
strokeLinecap="round"
44-
strokeLinejoin="round"
45-
/>
46-
</svg>
14+
const [, scrollTop] = useReadPercent();
15+
16+
if (scrollTop < 100) {
17+
return null;
18+
}
4719

20+
return (
21+
<button className="rp-outline__action-row" onClick={scrollToTop}>
22+
<SvgWrapper icon={IconScrollToTop} width="16" height="16" />
4823
<span>{t('scrollToTopText')}</span>
4924
</button>
5025
);

‎packages/core/src/theme/components/Outline/index.tsx‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import { useI18n, useSite } from '@rspress/core/runtime';
2-
import { ReadPercent, Toc, useDynamicToc } from '@theme';
2+
import { EditLink, ReadPercent, Toc, useDynamicToc } from '@theme';
33
import './index.scss';
4-
import { EditLinkRow } from './EditLinkRow';
54
import { ScrollToTop } from './ScrollToTop';
65

76
export function Outline() {
@@ -29,8 +28,8 @@ export function Outline() {
2928
</nav>
3029
<div className="rp-outline__divider" />
3130
<div className="rp-outline__bottom">
31+
<EditLink isOutline />
3232
{enableScrollToTop && <ScrollToTop />}
33-
<EditLinkRow />
3433
</div>
3534
</div>
3635
);

‎packages/core/src/theme/icons.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import { default as IconCloseHelper } from './assets/close.svg';
77
import { default as IconCopyHelper } from './assets/copy.svg';
88
import { default as IconDeprecatedHelper } from './assets/deprecated.svg';
99
import { default as IconDownHelper } from './assets/down.svg';
10+
import { default as IconEditHelper } from './assets/edit.svg';
1011
import { default as IconEmptyHelper } from './assets/empty.svg';
1112
import { default as IconExperimentalHelper } from './assets/experimental.svg';
1213
import { default as IconExternalLinkHelper } from './assets/external-link.svg';
@@ -19,6 +20,7 @@ import { default as IconLinkHelper } from './assets/link.svg';
1920
import { default as IconLoadingHelper } from './assets/loading.svg';
2021
import { default as IconMenuHelper } from './assets/menu.svg';
2122
import { default as IconMoonHelper } from './assets/moon.svg';
23+
import { default as IconScrollToTopHelper } from './assets/scroll-to-top.svg';
2224
import { default as IconSearchHelper } from './assets/search.svg';
2325
import { default as IconSmallMenuHelper } from './assets/small-menu.svg';
2426
import { default as IconSuccessHelper } from './assets/success.svg';
@@ -34,6 +36,7 @@ export const IconArrowRight = IconArrowRightHelper as Icon;
3436
export const IconClose = IconCloseHelper as Icon;
3537
export const IconCopy = IconCopyHelper as Icon;
3638
export const IconDown = IconDownHelper as Icon;
39+
export const IconEdit = IconEditHelper as Icon;
3740
export const IconEmpty = IconEmptyHelper as Icon;
3841
export const IconFile = IconFileHelper as Icon;
3942
export const IconGithub = IconGithubHelper as Icon;
@@ -43,6 +46,7 @@ export const IconJump = IconJumpHelper as Icon;
4346
export const IconLoading = IconLoadingHelper as Icon;
4447
export const IconMenu = IconMenuHelper as Icon;
4548
export const IconMoon = IconMoonHelper as Icon;
49+
export const IconScrollToTop = IconScrollToTopHelper as Icon;
4650
export const IconSearch = IconSearchHelper as Icon;
4751
export const IconSmallMenu = IconSmallMenuHelper as Icon;
4852
export const IconSuccess = IconSuccessHelper as Icon;

‎packages/core/src/theme/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -60,6 +60,7 @@ export {
6060
} from './components/PageTabs/index';
6161
export { PrevNextPage } from './components/PrevNextPage/index';
6262
export { ReadPercent } from './components/ReadPercent/index';
63+
export { useReadPercent } from './components/ReadPercent/useReadPercent';
6364
export { Root, type RootProps } from './components/Root/index';
6465
export { Search } from './components/Search/index';
6566
export type {

0 commit comments

Comments
 (0)