Skip to content

Commit a28db6e

Browse files
InneiInnei
committed
feat: optimize ux motion
Signed-off-by: Innei <[email protected]>
1 parent 555b7e2 commit a28db6e

File tree

7 files changed

+77
-60
lines changed

7 files changed

+77
-60
lines changed

‎src/app/(page-detail)/[slug]/layout.tsx

+41-6
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,8 @@ import type { Metadata } from 'next'
66
import { RequestError } from '@mx-space/api-client'
77

88
import { NotSupport } from '~/components/common/NotSupport'
9+
import { BottomToUpSoftScaleTransitionView } from '~/components/ui/transition/BottomToUpSoftScaleTransitionView'
10+
import { BottomToUpTransitionView } from '~/components/ui/transition/BottomToUpTransitionView'
911
import { CommentAreaRoot } from '~/components/widgets/comment/CommentRoot'
1012
import { REQUEST_GEO } from '~/constants/system'
1113
import { attachUA } from '~/lib/attach-ua'
@@ -15,6 +17,14 @@ import { CurrentPageDataProvider } from '~/providers/page/CurrentPageDataProvide
1517
import { LayoutRightSideProvider } from '~/providers/shared/LayoutRightSideProvider'
1618
import { queries } from '~/queries/definition'
1719

20+
import {
21+
HeaderMetaInfoSetting,
22+
PageLoading,
23+
PagePaginator,
24+
PageSubTitle,
25+
PageTitle,
26+
} from './pageExtra'
27+
1828
export const generateMetadata = async ({
1929
params,
2030
}: {
@@ -81,15 +91,40 @@ export default async (props: NextPageParams<PageParams>) => {
8191
<>
8292
<CurrentPageDataProvider data={data} />
8393
<div className="relative flex min-h-[120px] w-full">
84-
{props.children}
94+
<PageLoading>
95+
<div className="relative w-full min-w-0">
96+
<HeaderMetaInfoSetting />
97+
<article className="prose">
98+
<header className="mb-8">
99+
<BottomToUpSoftScaleTransitionView delay={0}>
100+
<PageTitle />
101+
</BottomToUpSoftScaleTransitionView>
102+
103+
<BottomToUpSoftScaleTransitionView delay={200}>
104+
<PageSubTitle />
105+
</BottomToUpSoftScaleTransitionView>
106+
</header>
107+
<BottomToUpTransitionView delay={600}>
108+
{props.children}
109+
</BottomToUpTransitionView>
110+
</article>
111+
112+
<PagePaginator />
113+
</div>
114+
</PageLoading>
85115

86116
<LayoutRightSideProvider className="absolute bottom-0 right-0 top-0 hidden translate-x-full lg:block" />
87117
</div>
88-
{isCN ? (
89-
<NotSupport />
90-
) : (
91-
<CommentAreaRoot refId={data.id} allowComment={data.allowComment} />
92-
)}
118+
<BottomToUpSoftScaleTransitionView delay={1000}>
119+
{isCN ? (
120+
<NotSupport />
121+
) : (
122+
<CommentAreaRoot
123+
refId={data.id}
124+
allowComment={data.allowComment ?? true}
125+
/>
126+
)}
127+
</BottomToUpSoftScaleTransitionView>
93128
</>
94129
)
95130
}

‎src/app/(page-detail)/[slug]/page.tsx

+12-41
Original file line numberDiff line numberDiff line change
@@ -1,52 +1,23 @@
1-
import { BottomToUpSoftScaleTransitionView } from '~/components/ui/transition/BottomToUpSoftScaleTransitionView'
2-
import { BottomToUpTransitionView } from '~/components/ui/transition/BottomToUpTransitionView'
31
import { TocAside } from '~/components/widgets/toc'
42
import { LayoutRightSidePortal } from '~/providers/shared/LayoutRightSideProvider'
53
import { WrappedElementProvider } from '~/providers/shared/WrappedElementProvider'
64

7-
import {
8-
HeaderMetaInfoSetting,
9-
MarkdownImageRecordProviderInternal,
10-
PageLoading,
11-
PagePaginator,
12-
PageSubTitle,
13-
PageTitle,
14-
PostMarkdown,
15-
} from './pageExtra'
5+
import { MarkdownImageRecordProviderInternal, PostMarkdown } from './pageExtra'
166

177
const PageDetail = () => {
188
return (
19-
<PageLoading>
20-
<div className="relative w-full min-w-0">
21-
<HeaderMetaInfoSetting />
22-
<article className="prose">
23-
<header className="mb-8">
24-
<BottomToUpSoftScaleTransitionView delay={0}>
25-
<PageTitle />
26-
</BottomToUpSoftScaleTransitionView>
9+
<WrappedElementProvider>
10+
<MarkdownImageRecordProviderInternal>
11+
<PostMarkdown />
12+
</MarkdownImageRecordProviderInternal>
2713

28-
<BottomToUpSoftScaleTransitionView delay={200}>
29-
<PageSubTitle />
30-
</BottomToUpSoftScaleTransitionView>
31-
</header>
32-
<WrappedElementProvider>
33-
<MarkdownImageRecordProviderInternal>
34-
<BottomToUpTransitionView delay={600}>
35-
<PostMarkdown />
36-
</BottomToUpTransitionView>
37-
</MarkdownImageRecordProviderInternal>
38-
39-
<LayoutRightSidePortal>
40-
<TocAside
41-
className="sticky top-[120px] ml-4 mt-[120px]"
42-
treeClassName="max-h-[calc(100vh-6rem-4.5rem-300px)] h-[calc(100vh-6rem-4.5rem-300px)] min-h-[120px] relative"
43-
/>
44-
</LayoutRightSidePortal>
45-
</WrappedElementProvider>
46-
</article>
47-
<PagePaginator />
48-
</div>
49-
</PageLoading>
14+
<LayoutRightSidePortal>
15+
<TocAside
16+
className="sticky top-[120px] ml-4 mt-[120px]"
17+
treeClassName="max-h-[calc(100vh-6rem-4.5rem-300px)] h-[calc(100vh-6rem-4.5rem-300px)] min-h-[120px] relative"
18+
/>
19+
</LayoutRightSidePortal>
20+
</WrappedElementProvider>
5021
)
5122
}
5223
export default PageDetail

‎src/app/categories/[slug]/page.tsx

-1
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,6 @@ export default function Page() {
4646
>
4747
<Link
4848
prefetch={false}
49-
target="_blank"
5049
href={routeBuilder(Routes.Post, {
5150
slug: child.slug,
5251
category: slug,

‎src/app/notes/[id]/layout.tsx

+8-5
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { headers } from 'next/dist/client/components/headers'
22
import type { Metadata } from 'next'
33

44
import { NotSupport } from '~/components/common/NotSupport'
5+
import { BottomToUpSoftScaleTransitionView } from '~/components/ui/transition/BottomToUpSoftScaleTransitionView'
56
import { BottomToUpTransitionView } from '~/components/ui/transition/BottomToUpTransitionView'
67
import { CommentAreaRoot } from '~/components/widgets/comment'
78
import { NoteMainContainer } from '~/components/widgets/note/NoteMainContainer'
@@ -88,11 +89,13 @@ export default async (
8889

8990
<BottomToUpTransitionView className="min-w-0">
9091
<Paper as={NoteMainContainer}>{props.children}</Paper>
91-
{isCN ? (
92-
<NotSupport />
93-
) : (
94-
<CommentAreaRoot refId={noteObjectId} allowComment={allowComment} />
95-
)}
92+
<BottomToUpSoftScaleTransitionView delay={500}>
93+
{isCN ? (
94+
<NotSupport />
95+
) : (
96+
<CommentAreaRoot refId={noteObjectId} allowComment={allowComment} />
97+
)}
98+
</BottomToUpSoftScaleTransitionView>
9699
</BottomToUpTransitionView>
97100
</>
98101
)

‎src/app/posts/(post-detail)/[category]/[slug]/layout.tsx

+10-4
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import type { Metadata } from 'next'
66
import { RequestError } from '@mx-space/api-client'
77

88
import { NotSupport } from '~/components/common/NotSupport'
9+
import { BottomToUpSoftScaleTransitionView } from '~/components/ui/transition/BottomToUpSoftScaleTransitionView'
910
import { BottomToUpTransitionView } from '~/components/ui/transition/BottomToUpTransitionView'
1011
import { CommentAreaRoot } from '~/components/widgets/comment'
1112
import { REQUEST_GEO } from '~/constants/system'
@@ -88,15 +89,20 @@ export default async (props: NextPageParams<PageParams>) => {
8889
<div className="relative flex min-h-[120px] grid-cols-[auto,200px] lg:grid">
8990
<BottomToUpTransitionView className="min-w-0">
9091
{props.children}
92+
</BottomToUpTransitionView>
93+
94+
<LayoutRightSideProvider className="relative hidden lg:block" />
9195

96+
<BottomToUpSoftScaleTransitionView delay={500}>
9297
{isCN ? (
9398
<NotSupport />
9499
) : (
95-
<CommentAreaRoot refId={data.id} allowComment={data.allowComment} />
100+
<CommentAreaRoot
101+
refId={data.id}
102+
allowComment={data.allowComment ?? true}
103+
/>
96104
)}
97-
</BottomToUpTransitionView>
98-
99-
<LayoutRightSideProvider className="relative hidden lg:block" />
105+
</BottomToUpSoftScaleTransitionView>
100106
</div>
101107
</>
102108
)

‎src/components/ui/code-highlighter/CodeHighlighter.tsx

+4-1
Original file line numberDiff line numberDiff line change
@@ -97,7 +97,10 @@ export const HighLighter: FC<Props> = (props) => {
9797
</span>
9898

9999
<pre className="line-numbers !bg-transparent" data-start="1">
100-
<code className={`language-${language ?? 'markup'}`} ref={ref}>
100+
<code
101+
className={`language-${language ?? 'markup'} !bg-transparent`}
102+
ref={ref}
103+
>
101104
{value}
102105
</code>
103106
</pre>

‎src/components/widgets/shared/ReadIndicator.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -10,9 +10,9 @@ export const ReadIndicator: Component<{
1010
}> = ({ className, as }) => {
1111
const readPercent = useReadPercent()
1212
const As = as || 'span'
13-
return h > 0 ? (
13+
return (
1414
<As className={clsxm('text-gray-800 dark:text-neutral-300', className)}>
1515
{readPercent}%
1616
</As>
17-
) : null
17+
)
1818
}

0 commit comments

Comments
 (0)