From aaad70c911c54b58299bab3351e73aab4ae184ca Mon Sep 17 00:00:00 2001
From: DIYgod <i@diygod.me>
Date: Wed, 17 Jan 2024 01:00:53 +0800
Subject: [PATCH] feat: rename PageContent

---
 .../@modal/(.)post/[site]/[slug]/page.tsx        |  5 ++---
 src/app/[locale]/site/[site]/[slug]/page.tsx     |  6 +++---
 .../preview/[previewId]/page-component.tsx       | 10 +++++-----
 src/components/common/CommentItem.tsx            |  8 ++++----
 .../{PageContent.tsx => MarkdownContent.tsx}     | 16 ++++++++--------
 ...ontainer.tsx => MarkdownContentContainer.tsx} |  2 +-
 src/components/dashboard/DualColumnEditor.tsx    | 12 ++++++------
 src/components/dashboard/ImportPreview.tsx       | 13 ++++++++-----
 src/components/site/SiteFooter.tsx               | 13 ++++++-------
 9 files changed, 43 insertions(+), 42 deletions(-)
 rename src/components/common/{PageContent.tsx => MarkdownContent.tsx} (81%)
 rename src/components/common/{PageContentContainer.tsx => MarkdownContentContainer.tsx} (95%)

diff --git a/src/app/[locale]/@modal/(.)post/[site]/[slug]/page.tsx b/src/app/[locale]/@modal/(.)post/[site]/[slug]/page.tsx
index 0f77f96b..30899349 100644
--- a/src/app/[locale]/@modal/(.)post/[site]/[slug]/page.tsx
+++ b/src/app/[locale]/@modal/(.)post/[site]/[slug]/page.tsx
@@ -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}
diff --git a/src/app/[locale]/site/[site]/[slug]/page.tsx b/src/app/[locale]/site/[site]/[slug]/page.tsx
index 8b458897..5082354a 100644
--- a/src/app/[locale]/site/[site]/[slug]/page.tsx
+++ b/src/app/[locale]/site/[site]/[slug]/page.tsx
@@ -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}
diff --git a/src/app/[locale]/site/[site]/preview/[previewId]/page-component.tsx b/src/app/[locale]/site/[site]/preview/[previewId]/page-component.tsx
index 51e7c4d5..99d9eb89 100644
--- a/src/app/[locale]/site/[site]/preview/[previewId]/page-component.tsx
+++ b/src/app/[locale]/site/[site]/preview/[previewId]/page-component.tsx
@@ -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>
   )
diff --git a/src/components/common/CommentItem.tsx b/src/components/common/CommentItem.tsx
index 3fddeba1..6ae77a4e 100644
--- a/src/components/common/CommentItem.tsx
+++ b/src/components/common/CommentItem.tsx
@@ -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"
diff --git a/src/components/common/PageContent.tsx b/src/components/common/MarkdownContent.tsx
similarity index 81%
rename from src/components/common/PageContent.tsx
rename to src/components/common/MarkdownContent.tsx
index 47584933..f8a4f9b3 100644
--- a/src/components/common/PageContent.tsx
+++ b/src/components/common/MarkdownContent.tsx
@@ -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
diff --git a/src/components/common/PageContentContainer.tsx b/src/components/common/MarkdownContentContainer.tsx
similarity index 95%
rename from src/components/common/PageContentContainer.tsx
rename to src/components/common/MarkdownContentContainer.tsx
index 28a12162..48b1b9ae 100644
--- a/src/components/common/PageContentContainer.tsx
+++ b/src/components/common/MarkdownContentContainer.tsx
@@ -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,
diff --git a/src/components/dashboard/DualColumnEditor.tsx b/src/components/dashboard/DualColumnEditor.tsx
index ca47d370..9355e385 100644
--- a/src/components/dashboard/DualColumnEditor.tsx
+++ b/src/components/dashboard/DualColumnEditor.tsx
@@ -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}
diff --git a/src/components/dashboard/ImportPreview.tsx b/src/components/dashboard/ImportPreview.tsx
index ea1bd232..056caae8 100644
--- a/src/components/dashboard/ImportPreview.tsx
+++ b/src/components/dashboard/ImportPreview.tsx
@@ -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>
   )
diff --git a/src/components/site/SiteFooter.tsx b/src/components/site/SiteFooter.tsx
index bcf033a9..d5480adc 100644
--- a/src/components/site/SiteFooter.tsx
+++ b/src/components/site/SiteFooter.tsx
@@ -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">