Skip to content

Commit

Permalink
feat: peek
Browse files Browse the repository at this point in the history
Signed-off-by: Innei <i@innei.in>
  • Loading branch information
Innei committed Jul 3, 2023
1 parent 72c1f38 commit e1b0b57
Show file tree
Hide file tree
Showing 27 changed files with 637 additions and 303 deletions.
12 changes: 7 additions & 5 deletions src/app/(page-detail)/[slug]/loading.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,9 @@
import { Loading } from '~/components/ui/loading'

export default () => (
<div className="flex h-full w-full center fill-content">
<Loading useDefaultLoadingText />
</div>
)
export default function LoadingPage() {
return (
<div className="flex w-full center fill-content">
<Loading useDefaultLoadingText />
</div>
)
}
4 changes: 2 additions & 2 deletions src/app/(page-detail)/[slug]/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,13 @@ import { TocAside } from '~/components/widgets/toc'
import { LayoutRightSidePortal } from '~/providers/shared/LayoutRightSideProvider'
import { WrappedElementProvider } from '~/providers/shared/WrappedElementProvider'

import { MarkdownImageRecordProviderInternal, PostMarkdown } from './pageExtra'
import { MarkdownImageRecordProviderInternal, PageMarkdown } from './pageExtra'

const PageDetail = () => {
return (
<WrappedElementProvider>
<MarkdownImageRecordProviderInternal>
<PostMarkdown />
<PageMarkdown />
</MarkdownImageRecordProviderInternal>

<LayoutRightSidePortal>
Expand Down
2 changes: 1 addition & 1 deletion src/app/(page-detail)/[slug]/pageExtra.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ export const PageLoading: Component = ({ children }) => {
return children
}

export const PostMarkdown = () => {
export const PageMarkdown = () => {
const text = useCurrentPageDataSelector((data) => data?.text)
if (!text) return null

Expand Down
2 changes: 1 addition & 1 deletion src/app/notes/[id]/layout.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ import {
import { CurrentNoteIdProvider } from '~/providers/note/CurrentNoteIdProvider'
import { queries } from '~/queries/definition'

import { Paper } from '../Paper'
import { Paper } from '../../../components/layout/container/Paper'
import { Transition } from './Transtion'

export const generateMetadata = async ({
Expand Down
142 changes: 16 additions & 126 deletions src/app/notes/[id]/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,34 +3,28 @@
'use client'

import { memo, useEffect } from 'react'
import { Balancer } from 'react-wrap-balancer'
import clsx from 'clsx'
import dayjs from 'dayjs'
import dynamic from 'next/dynamic'
import type { Image } from '@mx-space/api-client'
import type { MarkdownToJSX } from '~/components/ui/markdown'
import type { PropsWithChildren } from 'react'

import { ClientOnly } from '~/components/common/ClientOnly'
import { MdiClockOutline } from '~/components/icons/clock'
import { useSetHeaderMetaInfo } from '~/components/layout/header/hooks'
import { FloatPopover } from '~/components/ui/float-popover'
import { Markdown } from '~/components/ui/markdown'
import { NoteBanner } from '~/components/widgets/note/NoteBanner'
import { ArticleRightAside } from '~/components/widgets/shared/ArticleRightAside'
import { BanCopyWrapper } from '~/components/widgets/shared/BanCopyWrapper'
import { XLogInfoForNote, XLogSummaryForNote } from '~/components/widgets/xlog'
import { parseDate } from '~/lib/datetime'
import { noopArr } from '~/lib/noop'
import { MarkdownImageRecordProvider } from '~/providers/article/MarkdownImageRecordProvider'
import { useCurrentNoteDataSelector } from '~/providers/note/CurrentNoteDataProvider'
import { springScrollToTop } from '~/lib/scroller'
import { useCurrentNoteId } from '~/providers/note/CurrentNoteIdProvider'
import { LayoutRightSidePortal } from '~/providers/shared/LayoutRightSideProvider'
import { WrappedElementProvider } from '~/providers/shared/WrappedElementProvider'

import { NoteHideIfSecret } from '../../../components/widgets/note/NoteHideIfSecret'
import { NoteMetaBar } from '../../../components/widgets/note/NoteMetaBar'
import styles from './page.module.css'
import {
IndentArticleContainer,
NoteHeaderDate,
NoteHeaderMetaInfoSetting,
NoteMarkdown,
NoteMarkdownImageRecordProvider,
NoteTitle,
} from './pageExtra'

const NoteActionAside = dynamic(() =>
import('~/components/widgets/note/NoteActionAside').then(
Expand Down Expand Up @@ -65,17 +59,16 @@ const PageImpl = () => {

const NotePage = memo(function Notepage() {
const noteId = useCurrentNoteId()

useEffect(() => {
springScrollToTop()
}, [noteId])

if (!noteId) return null

return (
<>
<article
className={clsx(
'prose relative',
styles['with-indent'],
styles['with-serif'],
)}
>
<IndentArticleContainer>
<header>
<NoteTitle />
<span className="flex flex-wrap items-center text-[13px] text-neutral-content/60">
Expand Down Expand Up @@ -106,7 +99,7 @@ const NotePage = memo(function Notepage() {
</LayoutRightSidePortal>
</WrappedElementProvider>
</NoteHideIfSecret>
</article>
</IndentArticleContainer>

<SubscribeBell defaultType="note_c" />
<NoteTopic />
Expand All @@ -116,107 +109,4 @@ const NotePage = memo(function Notepage() {
)
})

const NoteTitle = () => {
const title = useCurrentNoteDataSelector((data) => data?.data.title)
if (!title) return null
return (
<h1 className="mt-8 text-left font-bold text-base-content/95">
<Balancer>{title}</Balancer>
</h1>
)
}

const NoteDateMeta = () => {
const created = useCurrentNoteDataSelector((data) => data?.data.created)
if (!created) return null
const dateFormat = dayjs(created)
.locale('zh-cn')
.format('YYYY 年 M 月 D 日 dddd')

return (
<span className="inline-flex items-center space-x-1">
<MdiClockOutline />
<time className="font-medium" suppressHydrationWarning>
{dateFormat}
</time>
</span>
)
}

const NoteHeaderDate = () => {
const date = useCurrentNoteDataSelector((data) => ({
created: data?.data.created,
modified: data?.data.modified,
}))
if (!date?.created) return null

const tips = `创建于 ${parseDate(date.created, 'YYYY 年 M 月 D 日 dddd')}${
date.modified
? `,修改于 ${parseDate(date.modified, 'YYYY 年 M 月 D 日 dddd')}`
: ''
}`

return (
<FloatPopover as="span" TriggerComponent={NoteDateMeta}>
{tips}
</FloatPopover>
)
}

const NoteMarkdown = () => {
const text = useCurrentNoteDataSelector((data) => data?.data.text)!

return (
<Markdown
allowsScript
as="main"
renderers={MarkdownRenderers}
value={text}
/>
)
}
const NoteMarkdownImageRecordProvider = (props: PropsWithChildren) => {
const images = useCurrentNoteDataSelector(
(data) => data?.data.images || (noopArr as Image[]),
)!

return (
<MarkdownImageRecordProvider images={images}>
{props.children}
</MarkdownImageRecordProvider>
)
}

const NoteHeaderMetaInfoSetting = () => {
const setHeaderMetaInfo = useSetHeaderMetaInfo()
const meta = useCurrentNoteDataSelector((data) => {
if (!data) return null
const note = data.data

return {
title: note?.title,
description: `手记${note.topic?.name ? ` / ${note.topic?.name}` : ''}`,
slug: note?.nid.toString(),
}
})

useEffect(() => {
if (meta) setHeaderMetaInfo(meta)
}, [meta])

return null
}

const MarkdownRenderers: { [name: string]: Partial<MarkdownToJSX.Rule> } = {
text: {
react(node, _, state) {
return (
<span className="indent" key={state?.key}>
{node.content}
</span>
)
},
},
}

export default PageImpl
134 changes: 134 additions & 0 deletions src/app/notes/[id]/pageExtra.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,134 @@
/* eslint-disable @typescript-eslint/no-non-null-asserted-optional-chain */
/* eslint-disable @typescript-eslint/no-non-null-assertion */
'use client'

import { useEffect } from 'react'
import Balancer from 'react-wrap-balancer'
import clsx from 'clsx'
import dayjs from 'dayjs'
import type { Image } from '@mx-space/api-client'
import type { MarkdownToJSX } from '~/components/ui/markdown'
import type { PropsWithChildren } from 'react'

import { MdiClockOutline } from '~/components/icons/clock'
import { useSetHeaderMetaInfo } from '~/components/layout/header/hooks'
import { FloatPopover } from '~/components/ui/float-popover'
import { Markdown } from '~/components/ui/markdown'
import { parseDate } from '~/lib/datetime'
import { noopArr } from '~/lib/noop'
import { MarkdownImageRecordProvider } from '~/providers/article/MarkdownImageRecordProvider'
import { useCurrentNoteDataSelector } from '~/providers/note/CurrentNoteDataProvider'

import styles from './page.module.css'

export const NoteTitle = () => {
const title = useCurrentNoteDataSelector((data) => data?.data.title)
if (!title) return null
return (
<h1 className="mt-8 text-left font-bold text-base-content/95">
<Balancer>{title}</Balancer>
</h1>
)
}

export const NoteDateMeta = () => {
const created = useCurrentNoteDataSelector((data) => data?.data.created)
if (!created) return null
const dateFormat = dayjs(created)
.locale('zh-cn')
.format('YYYY 年 M 月 D 日 dddd')

return (
<span className="inline-flex items-center space-x-1">
<MdiClockOutline />
<time className="font-medium" suppressHydrationWarning>
{dateFormat}
</time>
</span>
)
}
export const NoteHeaderDate = () => {
const date = useCurrentNoteDataSelector((data) => ({
created: data?.data.created,
modified: data?.data.modified,
}))
if (!date?.created) return null

const tips = `创建于 ${parseDate(date.created, 'YYYY 年 M 月 D 日 dddd')}${
date.modified
? `,修改于 ${parseDate(date.modified, 'YYYY 年 M 月 D 日 dddd')}`
: ''
}`

return (
<FloatPopover as="span" TriggerComponent={NoteDateMeta}>
{tips}
</FloatPopover>
)
}
export const NoteMarkdown = () => {
const text = useCurrentNoteDataSelector((data) => data?.data.text)!

return (
<Markdown
allowsScript
as="main"
renderers={MarkdownRenderers}
value={text}
/>
)
}
export const NoteMarkdownImageRecordProvider = (props: PropsWithChildren) => {
const images = useCurrentNoteDataSelector(
(data) => data?.data.images || (noopArr as Image[]),
)!

return (
<MarkdownImageRecordProvider images={images}>
{props.children}
</MarkdownImageRecordProvider>
)
}
export const NoteHeaderMetaInfoSetting = () => {
const setHeaderMetaInfo = useSetHeaderMetaInfo()
const meta = useCurrentNoteDataSelector((data) => {
if (!data) return null
const note = data.data

return {
title: note?.title,
description: `手记${note.topic?.name ? ` / ${note.topic?.name}` : ''}`,
slug: note?.nid.toString(),
}
})

useEffect(() => {
if (meta) setHeaderMetaInfo(meta)
}, [meta])

return null
}
const MarkdownRenderers: { [name: string]: Partial<MarkdownToJSX.Rule> } = {
text: {
react(node, _, state) {
return (
<span className="indent" key={state?.key}>
{node.content}
</span>
)
},
},
}
export const IndentArticleContainer = (props: PropsWithChildren) => {
return (
<article
className={clsx(
'prose relative',
styles['with-indent'],
styles['with-serif'],
)}
>
{props.children}
</article>
)
}
2 changes: 1 addition & 1 deletion src/app/notes/error.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import { NotePasswordForm } from '~/components/widgets/note/NotePasswordForm'
import { isRequestError, pickStatusCode } from '~/lib/is-error'
import { setCurrentNoteId } from '~/providers/note/CurrentNoteIdProvider'

import { Paper } from './Paper'
import { Paper } from '../../components/layout/container/Paper'

// TODO Catch if 404 or 403
export default ({ error, reset }: { error: Error; reset: () => void }) => {
Expand Down
2 changes: 1 addition & 1 deletion src/app/notes/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import { apiClient } from '~/lib/request'
import { routeBuilder, Routes } from '~/lib/route-builder'
import { queries } from '~/queries/definition'

import { Paper } from './Paper'
import { Paper } from '../../components/layout/container/Paper'

export default function Page() {
const { data } = useQuery(
Expand Down
Loading

1 comment on commit e1b0b57

@vercel
Copy link

@vercel vercel bot commented on e1b0b57 Jul 3, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

shiro – ./

shiro-git-main-innei.vercel.app
innei.in
springtide.vercel.app
shiro-innei.vercel.app

Please sign in to comment.