feat: dynamic loading of PostActions and PostToc

src/components/common/PageContent.tsx

@@ -1,13 +1,17 @@
+import dynamic from "next/dynamic"
 import { type MutableRefObject } from "react"
 
-import { PostActions } from "~/components/site/PostActions"
-import { PostToc } from "~/components/site/PostToc"
 import { ExpandedCharacter, ExpandedNote } from "~/lib/types"
 import { cn } from "~/lib/utils"
 import { renderPageContent } from "~/markdown"
 
 import { PageContentContainer } from "./PageContentContainer"
 
+const DynamicPostActions = dynamic(
+  () => import("~/components/site/PostActions"),
+)
+const DynamicPostToc = dynamic(() => import("~/components/site/PostToc"))
+
 export const PageContent = ({
   className,
   content,
@@ -51,8 +55,10 @@ export const PageContent = ({
         <div className="xlog-post-content prose" ref={inputRef}>
           {inParsedContent?.element}
         </div>
-        {toc && inParsedContent?.toc && <PostToc data={inParsedContent?.toc} />}
-        {withActions && <PostActions page={page} site={site} />}
+        {toc && inParsedContent?.toc && (
+          <DynamicPostToc data={inParsedContent?.toc} />
+        )}
+        {withActions && <DynamicPostActions page={page} site={site} />}
       </>
     </PageContentContainer>
   )

src/components/site/PostActions.tsx

@@ -9,7 +9,7 @@ import { ExpandedCharacter, ExpandedNote } from "~/lib/types"
 
 import { usePostFooterInView } from "./PostFooter"
 
-export const PostActions = ({
+const PostActions = ({
   page,
   site,
 }: {
@@ -55,3 +55,5 @@ export const PostActions = ({
     </div>
   )
 }
+
+export default PostActions

src/components/site/PostToc.tsx

@@ -6,7 +6,7 @@ import katex from "katex"
 import type { List } from "mdast"
 import { toHast } from "mdast-util-to-hast"
 import type { Result as TocResult } from "mdast-util-toc"
-import React, { createElement, useEffect, useRef, useState } from "react"
+import React, { createElement, useEffect, useState } from "react"
 
 import { scrollTo } from "~/lib/utils"
 
@@ -130,17 +130,12 @@ function Items(props: ItemsProps) {
   )
 }
 
-export const PostToc = ({ data }: { data: TocResult }) => {
-  const containerRef = useRef<HTMLDivElement | null>(null)
-
+const PostToc = ({ data }: { data: TocResult }) => {
   const idList = getIds(data?.map)
   const activeId = useActiveId(idList)
 
   return (
-    <div
-      className="xlog-post-toc absolute left-full pl-14 h-full top-0 lg:block hidden"
-      ref={containerRef}
-    >
+    <div className="xlog-post-toc absolute left-full pl-14 h-full top-0 lg:block hidden">
       <div
         className="sticky top-14 text-sm leading-loose whitespace-nowrap text-ellipsis max-h-[calc(100vh-theme('spacing.28'))] truncate"
         style={{
@@ -152,3 +147,5 @@ export const PostToc = ({ data }: { data: TocResult }) => {
     </div>
   )
 }
+
+export default PostToc