feat: server side rendering for page content

src/components/common/PageContent.tsx

@@ -1,15 +1,12 @@
-"use client"
-
-import { MutableRefObject, useEffect, useMemo } from "react"
+import { type MutableRefObject } from "react"
 
 import { PostActions } from "~/components/site/PostActions"
 import { PostToc } from "~/components/site/PostToc"
-import { useCodeCopy } from "~/hooks/useCodeCopy"
-import { useHash } from "~/hooks/useHash"
 import { ExpandedCharacter, ExpandedNote } from "~/lib/types"
-import { cn, scrollTo } from "~/lib/utils"
+import { cn } from "~/lib/utils"
 import { renderPageContent } from "~/markdown"
-import { useReportStats } from "~/queries/page"
+
+import { PageContentContainer } from "./PageContentContainer"
 
 export const PageContent = ({
   className,
@@ -36,40 +33,26 @@ export const PageContent = ({
   site?: ExpandedCharacter
   withActions?: boolean
 }) => {
-  useCodeCopy()
-
-  const inParsedContent = useMemo(() => {
-    if (parsedContent) {
-      return parsedContent
-    } else if (content) {
-      const result = renderPageContent(content, false, isComment)
-      return result
-    } else {
-      return null
-    }
-  }, [content, isComment, parsedContent])
-
-  const hash = useHash()
-  useEffect(() => {
-    scrollTo(hash)
-  }, [hash])
-
-  useReportStats({
-    characterId: page?.characterId,
-    noteId: page?.noteId,
-  })
+  let inParsedContent
+  if (parsedContent) {
+    inParsedContent = parsedContent
+  } else if (content) {
+    inParsedContent = renderPageContent(content, false, isComment)
+  }
 
   return (
-    <div
+    <PageContentContainer
       className={cn("relative", className)}
+      page={page}
+      inputRef={inputRef}
+      onScroll={onScroll}
       onMouseEnter={onMouseEnter}
-      onScroll={(e) => onScroll?.((e.target as any)?.scrollTop)}
+      element={inParsedContent?.element}
     >
-      <div className="xlog-post-content prose" ref={inputRef}>
-        {inParsedContent?.element}
-      </div>
-      {toc && inParsedContent?.toc && <PostToc data={inParsedContent?.toc} />}
-      {withActions && <PostActions page={page} site={site} />}
-    </div>
+      <>
+        {toc && inParsedContent?.toc && <PostToc data={inParsedContent?.toc} />}
+        {withActions && <PostActions page={page} site={site} />}
+      </>
+    </PageContentContainer>
   )
 }

src/components/common/PageContentContainer.tsx

@@ -0,0 +1,48 @@
+"use client"
+
+import { type MutableRefObject, useEffect } from "react"
+
+import { useCodeCopy } from "~/hooks/useCodeCopy"
+import { useHash } from "~/hooks/useHash"
+import { ExpandedNote } from "~/lib/types"
+import { cn, scrollTo } from "~/lib/utils"
+import { useReportStats } from "~/queries/page"
+
+export const PageContentContainer = ({
+  className,
+  page,
+  inputRef,
+  onScroll,
+  onMouseEnter,
+  children,
+  element,
+}: {
+  className?: string
+  page?: ExpandedNote
+  inputRef?: MutableRefObject<HTMLDivElement | null>
+  onScroll?: (scrollTop: number) => void
+  onMouseEnter?: () => void
+  children?: JSX.Element
+  element?: JSX.Element
+}) => {
+  useCodeCopy()
+
+  const hash = useHash()
+  useEffect(() => {
+    scrollTo(hash)
+  }, [hash])
+
+  useReportStats({
+    characterId: page?.characterId,
+    noteId: page?.noteId,
+  })
+
+  return (
+    <div className={cn("relative", className)}>
+      <div className="xlog-post-content prose" ref={inputRef}>
+        {element}
+      </div>
+      {children}
+    </div>
+  )
+}

src/components/site/PostToc.tsx

@@ -1,3 +1,5 @@
+"use client"
+
 import { toHtml } from "hast-util-to-html"
 import DOMPurify from "isomorphic-dompurify"
 import katex from "katex"

src/components/ui/Mention.tsx

@@ -1,3 +1,5 @@
+"use client"
+
 import React, { memo } from "react"
 
 import { getSiteLink } from "~/lib/helpers"