From e68fa97a7d3ab175f81ede396b543f6e44b3cb89 Mon Sep 17 00:00:00 2001 From: PeachScript Date: Fri, 11 Nov 2022 16:31:13 +0800 Subject: [PATCH] refactor: imporve detailed styles for default theme --- src/client/pages/Demo/index.less | 4 ++ src/client/pages/{Demo.ts => Demo/index.ts} | 1 + src/client/theme-api/DumiPage.tsx | 14 +++--- .../theme-default/builtins/Table/index.less | 18 +++---- .../layouts/DocLayout/index.less | 3 +- .../theme-default/slots/Content/index.less | 48 +++++++++++++++++++ .../theme-default/slots/Features/index.less | 4 +- .../theme-default/slots/Hero/index.less | 2 +- .../theme-default/styles/variables.less | 6 +-- src/features/theme/index.ts | 15 ++++-- 10 files changed, 88 insertions(+), 27 deletions(-) create mode 100644 src/client/pages/Demo/index.less rename src/client/pages/{Demo.ts => Demo/index.ts} (93%) diff --git a/src/client/pages/Demo/index.less b/src/client/pages/Demo/index.less new file mode 100644 index 0000000000..ea1e941c36 --- /dev/null +++ b/src/client/pages/Demo/index.less @@ -0,0 +1,4 @@ +body { + margin: 0; + padding: 0; +} diff --git a/src/client/pages/Demo.ts b/src/client/pages/Demo/index.ts similarity index 93% rename from src/client/pages/Demo.ts rename to src/client/pages/Demo/index.ts index 4ffa369914..168db009c1 100644 --- a/src/client/pages/Demo.ts +++ b/src/client/pages/Demo/index.ts @@ -1,5 +1,6 @@ import { useParams, useSiteData } from 'dumi'; import { createElement, type FC } from 'react'; +import './index.less'; const DemoRenderPage: FC = () => { const { id } = useParams(); diff --git a/src/client/theme-api/DumiPage.tsx b/src/client/theme-api/DumiPage.tsx index 4b1453f225..eeaf1e8196 100644 --- a/src/client/theme-api/DumiPage.tsx +++ b/src/client/theme-api/DumiPage.tsx @@ -4,7 +4,7 @@ import React, { useEffect, useState, type FC, type ReactNode } from 'react'; import { useTabQueryState } from './useTabMeta'; export const DumiPage: FC<{ children: ReactNode }> = (props) => { - const { hash, pathname } = useLocation(); + const { hash } = useLocation(); const { tabs } = useRouteMeta(); const [tabKey, setTabKey] = useTabQueryState(); const [tab, setTab] = useState[0] | undefined>(() => @@ -20,15 +20,13 @@ export const DumiPage: FC<{ children: ReactNode }> = (props) => { // handle hash change useEffect(() => { const id = hash.replace('#', ''); - const elm = id && document.getElementById(id); - if (elm) elm.scrollIntoView(); - }, [hash]); + setTimeout(() => { + const elm = id && document.getElementById(decodeURIComponent(id)); - // handle pathname change - useEffect(() => { - document.documentElement.scrollTo(0, 0); - }, [pathname]); + if (elm) document.documentElement.scrollTo(0, elm.offsetTop - 80); + }, 1); + }, [hash]); return ( <> diff --git a/src/client/theme-default/builtins/Table/index.less b/src/client/theme-default/builtins/Table/index.less index 55169a4ff5..0558ffc333 100644 --- a/src/client/theme-default/builtins/Table/index.less +++ b/src/client/theme-default/builtins/Table/index.less @@ -1,7 +1,7 @@ @import (reference) '../../styles/variables.less'; .@{prefix}-table { - margin: 16px 0 32px; + margin: 24px 0 32px; transform: translate(0, 0); &-content { @@ -23,15 +23,15 @@ left: 0; background-image: linear-gradient( to right, - rgba(0, 0, 0, 0.1), - rgba(0, 0, 0, 0) + rgb(0 0 0 / 10%), + rgb(0 0 0 / 0%) ); [data-prefers-color='dark'] & { background-image: linear-gradient( to right, - rgba(0, 0, 0, 0.5), - rgba(0, 0, 0, 0) + rgb(0 0 0 / 50%), + rgb(0 0 0 / 0%) ); } } @@ -40,15 +40,15 @@ right: 0; background-image: linear-gradient( to left, - rgba(0, 0, 0, 0.1), - rgba(0, 0, 0, 0) + rgb(0 0 0 / 10%), + rgb(0 0 0 / 0%) ); [data-prefers-color='dark'] & { background-image: linear-gradient( to left, - rgba(0, 0, 0, 0.5), - rgba(0, 0, 0, 0) + rgb(0 0 0 / 50%), + rgb(0 0 0 / 0%) ); } } diff --git a/src/client/theme-default/layouts/DocLayout/index.less b/src/client/theme-default/layouts/DocLayout/index.less index 02c6ed35fc..1bec987e71 100644 --- a/src/client/theme-default/layouts/DocLayout/index.less +++ b/src/client/theme-default/layouts/DocLayout/index.less @@ -3,10 +3,11 @@ body { margin: 0; padding: 0; - background-color: @c-site-bg; } .@{prefix}-doc-layout { + background-color: @c-site-bg; + @media @mobile { &::before { content: ''; diff --git a/src/client/theme-default/slots/Content/index.less b/src/client/theme-default/slots/Content/index.less index 733310f0c7..28a65412b7 100644 --- a/src/client/theme-default/slots/Content/index.less +++ b/src/client/theme-default/slots/Content/index.less @@ -41,6 +41,54 @@ padding-inline-end: 16px; border-color: @c-border-light; } + + // blockquote + blockquote { + font-style: italic; + margin-inline-start: 0; + margin-inline-end: 0; + background-color: tint(@c-site-bg, 50%); + border-left: 5px solid @c-border-light; + } + + // list + ul li { + line-height: 1.8; + } + + // anchor of headings + h1, + h2, + h3, + h4, + h5, + h6 { + > a[aria-hidden]:first-child { + float: left; + width: 20px; + padding-right: 4px; + margin-left: -24px; + color: @c-text; + // hide phantom blank node + font-size: 0; + text-align: right; + line-height: inherit; + + &:hover { + border: 0; + } + + > .icon-link::before { + content: '#'; + color: @c-text-secondary; + font-size: 20px; + } + } + + &:not(:hover) > a[aria-hidden]:first-child > .icon-link { + visibility: hidden; + } + } } .@{prefix}-content { diff --git a/src/client/theme-default/slots/Features/index.less b/src/client/theme-default/slots/Features/index.less index d67ac8953d..55941243cb 100644 --- a/src/client/theme-default/slots/Features/index.less +++ b/src/client/theme-default/slots/Features/index.less @@ -48,7 +48,7 @@ > h3 { margin: 4px 0; - color: #2c4262; + color: @c-text; font-weight: normal; font-size: 20px; @@ -59,7 +59,7 @@ > p { margin: 12px 0; - color: #61728a; + color: @c-text-secondary; font-size: 16px; line-height: 1.475; diff --git a/src/client/theme-default/slots/Hero/index.less b/src/client/theme-default/slots/Hero/index.less index 008d4aba12..72d84c1531 100644 --- a/src/client/theme-default/slots/Hero/index.less +++ b/src/client/theme-default/slots/Hero/index.less @@ -35,7 +35,7 @@ > p { margin: 32px; - color: #4e6789; + color: @c-text-secondary; font-size: 20px; line-height: 1.6; diff --git a/src/client/theme-default/styles/variables.less b/src/client/theme-default/styles/variables.less index 211e01b75a..364465477c 100644 --- a/src/client/theme-default/styles/variables.less +++ b/src/client/theme-default/styles/variables.less @@ -7,9 +7,9 @@ @s-header-height-m: 52px; @c-primary: #1677ff; -@c-text: #333; -@c-text-secondary: #666; -@c-text-note: #999; +@c-text: #30363f; +@c-text-secondary: #4f5866; +@c-text-note: #8a9099; @c-border: #d0d5d8; @c-border-light: #e4e9ec; @c-site-bg: #f7f9fb; diff --git a/src/features/theme/index.ts b/src/features/theme/index.ts index d8eaf70d63..52d6daf8bb 100644 --- a/src/features/theme/index.ts +++ b/src/features/theme/index.ts @@ -179,7 +179,7 @@ export default (api: IApi) => { api.writeTmpFile({ noPluginDir: true, path: 'dumi/theme/ContextWrapper.tsx', - content: `import React, { useState, useEffect } from 'react'; + content: `import React, { useState, useEffect, useRef } from 'react'; import { useOutlet, history } from 'dumi'; import { SiteContext } from '${winPath( require.resolve('../../client/theme-api/context'), @@ -190,10 +190,19 @@ import { locales } from '../locales/config'; export default function DumiContextWrapper() { const outlet = useOutlet(); const [loading, setLoading] = useState(true); + const prev = useRef(history.location.pathname); - // mark loading when route change, page component will set false when loaded useEffect(() => { - return history.listen(() => setLoading(true)); + return history.listen((next) => { + // mark loading when route change, page component will set false when loaded + setLoading(true); + + // scroll to top when route changed + if (next.location.pathname !== prev.current) { + prev.current = next.location.pathname; + document.documentElement.scrollTo(0, 0); + } + }); }, []); return (