feat: post outdate info

Signed-off-by: Innei <[email protected]>

Author: Innei

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

@@ -12,6 +12,7 @@ import { Markdown } from '~/components/ui/markdown'
 import { PostActionAside } from '~/components/widgets/post/PostActionAside'
 import { PostCopyright } from '~/components/widgets/post/PostCopyright'
 import { PostMetaBar } from '~/components/widgets/post/PostMetaBar'
+import { PostOutdate } from '~/components/widgets/post/PostOutdate'
 import { PostRelated } from '~/components/widgets/post/PostRelated'
 import { SubscribeBell } from '~/components/widgets/subscribe/SubscribeBell'
 import { TocAside } from '~/components/widgets/toc'
@@ -43,6 +44,8 @@ const PostPage = () => {
           <PostMetaBarInternal className="mb-8 justify-center" />
 
           <XLogSummaryForPost />
+
+          <PostOutdate />
         </header>
         <WrappedElementProvider>
           <PostMarkdownImageRecordProvider>

src/components/hoc/with-no-ssr.tsx

@@ -7,7 +7,7 @@ export const withNoSSR = <P,>(
 ): FC<PropsWithChildren<P>> => {
   return (props: PropsWithChildren<P>) => {
     const isClient = useIsClientTransition()
-    if (!isClient) return props.children ?? null
+    if (!isClient) return null
     // @ts-ignore
     return <Component {...props} />
   }

src/components/layout/footer/GatewayCount.tsx

@@ -1,12 +1,15 @@
 'use client'
 
 import { useOnlineCount } from '~/atoms'
-import { withNoSSR } from '~/components/hoc/with-no-ssr'
 import { FloatPopover } from '~/components/ui/float-popover'
 
-export const GatewayCount = withNoSSR(() => {
+export const GatewayCount = () => {
   return (
-    <FloatPopover TriggerComponent={GatewayCountTrigger} type="tooltip">
+    <FloatPopover
+      as="span"
+      TriggerComponent={GatewayCountTrigger}
+      type="tooltip"
+    >
       <div className="space-y-2 leading-relaxed">
         <p className="flex items-center space-x-1 opacity-80">
           <i className="icon-[mingcute--question-line]" />
@@ -23,7 +26,7 @@ export const GatewayCount = withNoSSR(() => {
       </div>
     </FloatPopover>
   )
-})
+}
 const GatewayCountTrigger = () => {
   const count = useOnlineCount()
   return <span>正在被 {count} 人看爆</span>

src/components/widgets/post/PostOutdate.tsx

@@ -0,0 +1,20 @@
+import dayjs from 'dayjs'
+
+import { Banner } from '~/components/ui/banner'
+import { RelativeTime } from '~/components/ui/relative-time'
+import { useCurrentPostDataSelector } from '~/providers/post/CurrentPostDataProvider'
+
+export const PostOutdate = () => {
+  const time = useCurrentPostDataSelector((s) => s?.modified)
+  if (!time) {
+    return null
+  }
+  return dayjs().diff(dayjs(time), 'day') > 60 ? (
+    <Banner type="warning" className="mb-10">
+      <span className="leading-[1.8]">
+        这篇文章上次修改于 <RelativeTime date={time} />
+        ，可能部分内容已经不适用，如有疑问可询问作者。
+      </span>
+    </Banner>
+  ) : null
+}