fix: prose layout (#374)

src/components/common/PageContent.tsx

@@ -2,7 +2,8 @@ import { cn } from "~/lib/utils"
 import { useCodeCopy } from "~/hooks/useCodeCopy"
 import { renderPageContent } from "~/markdown"
 import { PostToc } from "~/components/site/PostToc"
-import { MutableRefObject, useMemo } from "react"
+import { MutableRefObject, useEffect, useMemo } from "react"
+import { scroller } from "react-scroll"
 
 export const PageContent: React.FC<{
   content?: string
@@ -34,6 +35,24 @@ export const PageContent: React.FC<{
     }
   }, [content, parsedContent])
 
+  useEffect(() => {
+    const hashChangeHandler = () => {
+      const hash = decodeURIComponent(location.hash.slice(1))
+      if (hash) {
+        scroller.scrollTo(`user-content-${decodeURIComponent(hash)}`, {
+          smooth: true,
+          offset: -20,
+          duration: 500,
+        })
+      }
+    }
+
+    window.addEventListener("hashchange", hashChangeHandler)
+    return () => {
+      window.removeEventListener("hashchange", hashChangeHandler)
+    }
+  }, [])
+
   return (
     <div
       className={cn("relative", className)}

src/components/site/PostToc.tsx

@@ -61,7 +61,9 @@ function renderItems(items: TocResult["map"], activeId: string, prefix = "") {
               <span key={index + "-" + i}>
                 {child.type === "paragraph" && child.children?.[0]?.url && (
                   <Link
-                    to={decodeURI(child.children[0].url.slice(1))}
+                    to={`user-content-${decodeURIComponent(
+                      child.children[0].url.slice(1),
+                    )}`}
                     spy={true}
                     smooth={true}
                     duration={500}

src/components/site/SitePage.tsx

@@ -46,7 +46,7 @@ export const SitePage: React.FC<{
         />
       </Head>
       {page?.preview && (
-        <div className="fixed top-0 left-0 w-full text-center text-red-500 bg-gray-100 py-2 opacity-80 text-sm">
+        <div className="fixed top-0 left-0 w-full text-center text-red-500 bg-gray-100 py-2 opacity-80 text-sm z-10">
           {t(
             "This address is in local editing preview mode and cannot be viewed by the public.",
           )}
@@ -61,7 +61,9 @@ export const SitePage: React.FC<{
               {page?.title}
             </h2>
           )}
-          {page?.tags?.includes("post") && <PostMeta page={page} site={site} />}
+          {page?.tags?.includes("post") && !page?.preview && (
+            <PostMeta page={page} site={site} />
+          )}
         </div>
         <PageContent
           className="mt-10"

src/components/ui/Image.tsx

@@ -51,7 +51,7 @@ export const Image: React.FC<TImageProps> = ({
       if (isMobileLayout !== undefined) {
         if (isMobileLayout) {
           const clickHandler = () => {
-            window.open(getSrc(), "_blank")
+            window.open(toGateway(getSrc()), "_blank")
           }
           $image.addEventListener("click", clickHandler)
           return () => {

src/components/ui/Mermaid.tsx

@@ -49,7 +49,7 @@ export const Mermaid: FC<{
         setLoading(false)
       })
     }
-  }, [props.children])
+  }, [props.children, isDark])
 
   return loading ? (
     <div className="h-[50px] rounded-lg flex items-center justify-center bg-[#ECECFD] dark:bg-[#1F2020] text-sm">

src/css/code.css

@@ -8,7 +8,7 @@ pre {
 }
 
 :not(pre) > code {
-  @apply inline-flex items-center font-mono break-all leading-snug px-1;
+  @apply inline font-mono break-all leading-snug p-1;
   background-color: var(--code-bg);
   color: var(--code-fg);
 }

src/markdown/index.ts

@@ -112,6 +112,34 @@ export const renderPageContent = (
       .use(rehypeRaw)
       .use(rehypeImage, { env })
       .use(rehypeAudio)
+      .use(rehypeSlug)
+      .use(rehypeAutolinkHeadings, {
+        properties: {
+          className: ["xlog-anchor"],
+          ariaHidden: true,
+          tabIndex: -1,
+        },
+        content(node) {
+          return [
+            {
+              type: "element",
+              tagName: "span",
+              properties: {
+                className: ["i-mingcute:link-line"],
+              },
+              children: [],
+            },
+            {
+              type: "element",
+              tagName: "anchor",
+              properties: {
+                name: node.properties?.id,
+              },
+              children: [],
+            },
+          ]
+        },
+      })
       .use(rehypeSanitize, sanitizeScheme)
       .use(rehypePrism, {
         ignoreMissing: true,
@@ -121,7 +149,6 @@ export const renderPageContent = (
       .use(rehypeExternalLink)
       .use(rehypeWrapCode)
       .use(rehypeInferDescriptionMeta)
-      .use(rehypeSlug)
       .use(rehypeRewrite, {
         selector: "p, li",
         rewrite: (node: any) => {
@@ -155,33 +182,6 @@ export const renderPageContent = (
           }
         },
       })
-      .use(rehypeAutolinkHeadings, {
-        properties: {
-          className: ["xlog-anchor"],
-          ariaHidden: true,
-          tabIndex: -1,
-        },
-        content(node) {
-          return [
-            {
-              type: "element",
-              tagName: "span",
-              properties: {
-                className: ["i-mingcute:link-line"],
-              },
-              children: [],
-            },
-            {
-              type: "element",
-              tagName: "anchor",
-              properties: {
-                name: node.properties?.id,
-              },
-              children: [],
-            },
-          ]
-        },
-      })
       .use(html ? () => (tree: any) => {} : rehypeReact, {
         createElement: createElement,
         components: {

src/pages/_site/[site]/[page].tsx

@@ -1,8 +1,6 @@
 import { QueryClient } from "@tanstack/react-query"
 import { GetServerSideProps } from "next"
-import { useRouter } from "next/router"
-import { ReactElement, useEffect } from "react"
-import { scroller } from "react-scroll"
+import { ReactElement } from "react"
 import { SiteLayout } from "~/components/site/SiteLayout"
 import { getServerSideProps as getLayoutServerSideProps } from "~/components/site/SiteLayout.server"
 import { SitePage } from "~/components/site/SitePage"
@@ -48,17 +46,6 @@ function SitePagePage({
   })
   const site = useGetSite(domainOrSubdomain)
 
-  const { asPath } = useRouter()
-  useEffect(() => {
-    const [, hash] = asPath.split("#")
-    if (hash) {
-      scroller.scrollTo(decodeURIComponent(hash), {
-        smooth: true,
-        offset: -20,
-      })
-    }
-  }, [])
-
   return <SitePage page={page.data} site={site.data} />
 }