fix: slug replacer

Signed-off-by: Innei <i@innei.in>

src/app/(app)/posts/(post-detail)/[category]/[slug]/page.tsx

@@ -1,8 +1,15 @@
+import type { ModelWithLiked, PostModel } from '@mx-space/api-client'
+import type { Metadata } from 'next'
 import type { PageParams } from './api'
 
 import { AckRead } from '~/components/common/AckRead'
 import { ClientOnly } from '~/components/common/ClientOnly'
-import { Presence } from '~/components/modules/activity'
+import {
+  buildRoomName,
+  Presence,
+  RoomProvider,
+} from '~/components/modules/activity'
+import { CommentAreaRootLazy } from '~/components/modules/comment'
 import {
   PostActionAside,
   PostBottomBarAction,
@@ -14,8 +21,21 @@ import { ArticleRightAside } from '~/components/modules/shared/ArticleRightAside
 import { GoToAdminEditingButton } from '~/components/modules/shared/GoToAdminEditingButton'
 import { ReadIndicatorForMobile } from '~/components/modules/shared/ReadIndicator'
 import { SummarySwitcher } from '~/components/modules/shared/SummarySwitcher'
+import { TocFAB } from '~/components/modules/toc/TocFAB'
 import { XLogInfoForPost } from '~/components/modules/xlog'
-import { LayoutRightSidePortal } from '~/providers/shared/LayoutRightSideProvider'
+import {
+  BottomToUpSoftScaleTransitionView,
+  BottomToUpTransitionView,
+} from '~/components/ui/transition'
+import { OnlyMobile } from '~/components/ui/viewport/OnlyMobile'
+import { getOgUrl } from '~/lib/helper.server'
+import { getSummaryFromMd } from '~/lib/markdown'
+import { definePrerenderPage } from '~/lib/request.server'
+import { CurrentPostDataProvider } from '~/providers/post/CurrentPostDataProvider'
+import {
+  LayoutRightSidePortal,
+  LayoutRightSideProvider,
+} from '~/providers/shared/LayoutRightSideProvider'
 import { WrappedElementProvider } from '~/providers/shared/WrappedElementProvider'
 
 import { getData } from './api'
@@ -26,13 +46,56 @@ import {
   PostMarkdownImageRecordProvider,
   PostMetaBarInternal,
   PostTitle,
+  SlugReplacer,
 } from './pageExtra'
 
 export const dynamic = 'force-dynamic'
-const PostPage = async ({ params }: { params: PageParams }) => {
-  const data = await getData(params)
-  const { id } = data
 
+export const generateMetadata = async ({
+  params,
+}: {
+  params: PageParams
+}): Promise<Metadata> => {
+  const { slug } = params
+  try {
+    const data = await getData(params)
+    const {
+      title,
+      category: { slug: categorySlug },
+      text,
+      meta,
+    } = data
+    const description = getSummaryFromMd(text ?? '')
+
+    const ogImage = getOgUrl('post', {
+      category: categorySlug,
+      slug,
+    })
+
+    return {
+      title,
+      description,
+      openGraph: {
+        title,
+        description,
+        images: ogImage,
+        type: 'article',
+      },
+      twitter: {
+        images: ogImage,
+        title,
+        description,
+        card: 'summary_large_image',
+      },
+      category: categorySlug,
+    } satisfies Metadata
+  } catch {
+    return {}
+  }
+}
+
+const PostPage = ({ data }: { data: ModelWithLiked<PostModel> }) => {
+  const { id } = data
   return (
     <div className="relative w-full min-w-0">
       <AckRead id={id} type="post" />
@@ -49,6 +112,7 @@ const PostPage = async ({ params }: { params: PageParams }) => {
           <PostMetaBarInternal className="mb-8 justify-center" />
 
           <SummarySwitcher data={data} />
+
           <PostOutdate />
 
           <PostRelated infoText="阅读此文章之前，你可能需要首先阅读以下的文章才能更好的理解上下文。" />
@@ -77,6 +141,7 @@ const PostPage = async ({ params }: { params: PageParams }) => {
       <ClientOnly>
         <PostRelated infoText="关联阅读" />
         <PostCopyright />
+
         {/* <SubscribeBell defaultType="post_c" /> */}
         <XLogInfoForPost />
         <PostBottomBarAction />
@@ -85,4 +150,43 @@ const PostPage = async ({ params }: { params: PageParams }) => {
   )
 }
 
-export default PostPage
+export default definePrerenderPage<PageParams>()({
+  fetcher(params) {
+    return getData(params)
+  },
+
+  Component: async (props) => {
+    const { data, params } = props
+
+    const fullPath = `/posts/${data.category.slug}/${data.slug}`
+    const currentPath = `/posts/${params.category}/${params.slug}`
+
+    return (
+      <>
+        {currentPath !== fullPath && <SlugReplacer to={fullPath} />}
+
+        <CurrentPostDataProvider data={data} />
+        <div className="relative flex min-h-[120px] grid-cols-[auto,200px] lg:grid">
+          <BottomToUpTransitionView className="min-w-0">
+            <RoomProvider roomName={buildRoomName(data.id)}>
+              <PostPage data={data} />
+            </RoomProvider>
+
+            <BottomToUpSoftScaleTransitionView delay={500}>
+              <CommentAreaRootLazy
+                refId={data.id}
+                allowComment={data.allowComment}
+              />
+            </BottomToUpSoftScaleTransitionView>
+          </BottomToUpTransitionView>
+
+          <LayoutRightSideProvider className="relative hidden lg:block" />
+        </div>
+
+        <OnlyMobile>
+          <TocFAB />
+        </OnlyMobile>
+      </>
+    )
+  },
+})

src/app/(app)/posts/(post-detail)/[category]/[slug]/pageExtra.tsx

@@ -1,6 +1,7 @@
 'use client'
 
-import { useEffect } from 'react'
+import { useEffect, useRef } from 'react'
+import { useRouter } from 'next/navigation'
 import type { Image } from '@mx-space/api-client'
 import type { PropsWithChildren } from 'react'
 
@@ -97,3 +98,15 @@ export const PostMetaBarInternal: Component = ({ className }) => {
     </PostMetaBar>
   )
 }
+
+export const SlugReplacer = ({ to }: { to: string }) => {
+  const router = useRouter()
+  const onceRef = useRef(false)
+
+  if (!onceRef.current) {
+    onceRef.current = true
+    router.replace(to)
+  }
+
+  return null
+}