xiaoxue_admin
/
xLog
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: rename PageContent

This commit is contained in:
DIYgod 2024-01-17 01:00:53 +08:00
parent c25b845f97
commit aaad70c911
No known key found for this signature in database
9 changed files with 43 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/app/[locale]/@modal/(.)post/[site]/[slug]/page.tsx
View File

@ -3,7 +3,7 @@ import { notFound } from "next/navigation"
import { dehydrate, Hydrate } from "@tanstack/react-query"
import PageContent from "~/components/common/PageContent"
import MarkdownContent from "~/components/common/MarkdownContent"
import PostCover from "~/components/home/PostCover"
import PostModal from "~/components/home/PostModal"
import { PostFooter } from "~/components/site/PostFooter"
@ -119,10 +119,9 @@ export default async function SiteModal({
/>
)}
</div>
<PageContent
<MarkdownContent
className="mt-10"
content={page?.metadata?.content?.content}
toc={false}
page={page}
site={site}
withActions={false}

6
src/app/[locale]/site/[site]/[slug]/page.tsx
View File

@ -4,7 +4,7 @@ import serialize from "serialize-javascript"
import { dehydrate, Hydrate } from "@tanstack/react-query"
import PageContent from "~/components/common/PageContent"
import MarkdownContent from "~/components/common/MarkdownContent"
import PostCover from "~/components/home/PostCover"
import { OIAButton } from "~/components/site/OIAButton"
import { PostFooter } from "~/components/site/PostFooter"
@ -200,10 +200,10 @@ export default async function SitePagePage({
)}
</>
)}
<PageContent
<MarkdownContent
className="mt-10"
content={page?.metadata?.content?.content}
toc={true}
withToc={true}
page={page}
site={site}
withActions={true}

10
src/app/[locale]/site/[site]/preview/[previewId]/page-component.tsx
View File

@ -8,8 +8,8 @@ import PostTitle from "~/components/site/PostTitle"
import { useGetPage } from "~/queries/page"
import { useGetSite } from "~/queries/site"
const DynamicPageContent = dynamic(
() => import("~/components/common/PageContent"),
const DynamicMarkdownContent = dynamic(
() => import("~/components/common/MarkdownContent"),
{
ssr: false,
},
@ -46,11 +46,11 @@ export default function SitePreviewPage() {
center={true}
/>
</div>
<DynamicPageContent
<DynamicMarkdownContent
className="mt-10"
content={page.data?.metadata?.content?.content}
toc={true}
></DynamicPageContent>
withToc={true}
></DynamicMarkdownContent>
</article>
</div>
)

8
src/components/common/CommentItem.tsx
View File

@ -10,7 +10,7 @@ import { useQueryClient } from "@tanstack/react-query"
import { CharacterFloatCard } from "~/components/common/CharacterFloatCard"
import { CommentInput } from "~/components/common/CommentInput"
import { DeleteConfirmationModal } from "~/components/common/DeleteConfirmationModal"
import PageContent from "~/components/common/PageContent"
import MarkdownContent from "~/components/common/MarkdownContent"
import { ReactionLike } from "~/components/common/ReactionLike"
import { Titles } from "~/components/common/Titles"
import { BlockchainIcon } from "~/components/icons/BlockchainIcon"
@ -136,10 +136,10 @@ export const CommentItem = ({
<BlockchainIcon className="inline-block" />
</UniLink>
</div>
<PageContent
<MarkdownContent
content={comment.metadata?.content?.content}
isComment={true}
></PageContent>
simpleMode={true}
></MarkdownContent>
<div className="mt-1 flex items-center">
<div
className="xlog-reactions fill-gray-400 text-gray-500 sm:items-center inline-flex text-sm space-x-3"

16
src/components/common/PageContent.tsx → src/components/common/MarkdownContent.tsx
View File

@ -6,12 +6,12 @@ import { ExpandedCharacter, ExpandedNote } from "~/lib/types"
import { cn } from "~/lib/utils"
import { renderPageContent } from "~/markdown"
import { PageContentContainer } from "./PageContentContainer"
import { MarkdownContentContainer } from "./MarkdownContentContainer"
const PageContent = memo(function PageContent({
const MarkdownContent = memo(function PageContent({
className,
content,
toc,
withToc,
inputRef,
onScroll,
onMouseEnter,
@ -24,7 +24,7 @@ const PageContent = memo(function PageContent({
}: {
content?: string
className?: string
toc?: boolean
withToc?: boolean
inputRef?: MutableRefObject<HTMLDivElement | null>
onScroll?: (scrollTop: number) => void
onMouseEnter?: () => void
@ -43,7 +43,7 @@ const PageContent = memo(function PageContent({
}
return (
<PageContentContainer
<MarkdownContentContainer
className={cn("relative", className)}
page={page}
onScroll={onScroll}
@ -53,13 +53,13 @@ const PageContent = memo(function PageContent({
<div className="xlog-post-content prose" ref={inputRef}>
{inParsedContent?.element}
</div>
{!onlyContent && toc && inParsedContent?.toc && (
{!onlyContent && withToc && inParsedContent?.toc && (
<PostToc data={inParsedContent?.toc} />
)}
{!onlyContent && withActions && <PostActions page={page} site={site} />}
</>
</PageContentContainer>
</MarkdownContentContainer>
)
})
export default PageContent
export default MarkdownContent

2
src/components/common/PageContentContainer.tsx → src/components/common/MarkdownContentContainer.tsx
View File

@ -8,7 +8,7 @@ import { ExpandedNote } from "~/lib/types"
import { cn, scrollTo } from "~/lib/utils"
import { useReportStats } from "~/queries/page"
export const PageContentContainer = ({
export const MarkdownContentContainer = ({
className,
page,
onScroll,

12
src/components/dashboard/DualColumnEditor.tsx
View File

@ -5,7 +5,7 @@ import { useCallback, useEffect, useMemo, useRef, useState } from "react"
import { EditorView } from "@codemirror/view"
import PageContent from "~/components/common/PageContent"
import MarkdownContent from "~/components/common/MarkdownContent"
import { toolbarShortcuts } from "~/components/dashboard/toolbars"
import { editorUpload } from "~/components/dashboard/toolbars/Multimedia"
import CodeMirror from "~/components/ui/CodeMirror"
@ -196,7 +196,7 @@ export default function DualColumnEditor({
)
return (
<div className="min-h-0 flex relative items-center w-full h-full">
<div className="min-h-0 flex relative items-center size-full">
{!(isMobileLayout && isRendering) && (
<CodeMirror
value={initialContent}
@ -217,19 +217,19 @@ export default function DualColumnEditor({
<div className="z-10 w-[1px]">
<div
aria-label="Toggle preview view"
className="bg-accent rounded-full cursor-pointer text-white w-6 h-6 -translate-x-1/2"
className="bg-accent rounded-full cursor-pointer text-white size-6 -translate-x-1/2"
onClick={() => setIsRendering(!isRendering)}
>
{isRendering ? (
<i className="i-mingcute-right-line text-2xl inline-block w-6 h-6" />
<i className="i-mingcute-right-line text-2xl inline-block size-6" />
) : (
<i className="i-mingcute-left-line text-2xl inline-block w-6 h-6" />
<i className="i-mingcute-left-line text-2xl inline-block size-6" />
)}
</div>
</div>
)}
{isRendering && (
<PageContent
<MarkdownContent
className="bg-white px-5 overflow-scroll pb-[200px] h-full flex-1"
parsedContent={parsedContent}
inputRef={previewRef}

13
src/components/dashboard/ImportPreview.tsx
View File

@ -7,9 +7,12 @@ import { useDate } from "~/hooks/useDate"
import { RESERVED_TAGS } from "~/lib/constants"
import { cn } from "~/lib/utils"
const DynamicPageContent = dynamic(() => import("../common/PageContent"), {
ssr: false,
})
const DynamicMarkdownContent = dynamic(
() => import("../common/MarkdownContent"),
{
ssr: false,
},
)
export const ImportPreview = ({ note }: { note: NoteMetadata }) => {
const date = useDate()
@ -54,10 +57,10 @@ export const ImportPreview = ({ note }: { note: NoteMetadata }) => {
>
{t("Show more")}
</div>
<DynamicPageContent
<DynamicMarkdownContent
className="mt-4"
content={note?.content}
></DynamicPageContent>
></DynamicMarkdownContent>
</div>
</article>
)

13
src/components/site/SiteFooter.tsx
View File

@ -2,9 +2,9 @@ import { getTranslations } from "next-intl/server"
import Script from "next/script"
import { Logo } from "~/components/common/Logo"
import MarkdownContent from "~/components/common/MarkdownContent"
import { SITE_URL } from "~/lib/env"
import { ExpandedCharacter } from "~/lib/types"
import { renderPageContent } from "~/markdown"
import { DarkModeSwitch } from "../common/DarkModeSwitch"
import { LanguageSwitch } from "../common/LanguageSwitch"
@ -35,12 +35,11 @@ export default async function SiteFooter({
<footer className="text-zinc-500 border-t">
<div className="max-w-screen-lg mx-auto px-5 py-10">
{site?.metadata?.content?.footer && (
<div className="xlog-post-content prose text-sm">
{
renderPageContent(site.metadata.content.footer, false, true)
?.element
}
</div>
<MarkdownContent
className="[&>.prose]:text-sm"
content={site.metadata.content.footer}
isComment={true}
/>
)}
<div className="text-xs sm:flex justify-between sm:space-x-5 sm:space-y-0 space-y-5 sm:items-center">
<div className="font-medium text-base">