feat: search panel

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

Author: Innei

src/app/(page-detail)/[slug]/pageExtra.tsx

@@ -29,7 +29,14 @@ export const PostMarkdown = () => {
   const text = useCurrentPageDataSelector((data) => data?.text)
   if (!text) return null
 
-  return <Markdown value={text} as="main" className="min-w-0 overflow-hidden" />
+  return (
+    <Markdown
+      allowsScript
+      value={text}
+      as="main"
+      className="min-w-0 overflow-hidden"
+    />
+  )
 }
 export const MarkdownImageRecordProviderInternal = (
   props: PropsWithChildren,
@@ -90,7 +97,7 @@ export const PagePaginator = () => {
   const hasNext = indexInPages + 1 < n
   const hasPrev = indexInPages - 1 >= 0
   return (
-    <div className="relative grid h-20 select-none grid-cols-2">
+    <div className="relative mt-8 grid h-20 select-none grid-cols-2">
       <div className="justify-start">
         {hasPrev && (
           <Fragment>

src/app/friends/page.tsx

@@ -34,7 +34,7 @@ export default function Page() {
     },
     staleTime: Infinity,
     cacheTime: Infinity,
-    select(data) {
+    select: useCallback((data: LinkModel[]) => {
       const friends: LinkModel[] = []
       const collections: LinkModel[] = []
       const outdated: LinkModel[] = []
@@ -66,7 +66,7 @@ export default function Page() {
       }
 
       return { friends: shuffle(friends), collections, outdated, banned }
-    },
+    }, []),
   })
 
   if (isLoading) return <Loading useDefaultLoadingText />

src/app/notes/[id]/page.tsx

@@ -169,7 +169,14 @@ const NoteHeaderDate = () => {
 const NoteMarkdown = () => {
   const text = useCurrentNoteDataSelector((data) => data?.data.text)!
 
-  return <Markdown as="main" renderers={MarkdownRenderers} value={text} />
+  return (
+    <Markdown
+      allowsScript
+      as="main"
+      renderers={MarkdownRenderers}
+      value={text}
+    />
+  )
 }
 const NoteMarkdownImageRecordProvider = (props: PropsWithChildren) => {
   const images = useCurrentNoteDataSelector(

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

@@ -74,7 +74,14 @@ const PostMarkdown = () => {
   const text = useCurrentPostDataSelector((data) => data?.text)
   if (!text) return null
 
-  return <Markdown value={text} as="main" className="min-w-0 overflow-hidden" />
+  return (
+    <Markdown
+      allowsScript
+      value={text}
+      as="main"
+      className="min-w-0 overflow-hidden"
+    />
+  )
 }
 const PostMarkdownImageRecordProvider = (props: PropsWithChildren) => {
   const images = useCurrentPostDataSelector(

src/app/posts/page.tsx

@@ -4,6 +4,7 @@ import { PostItem } from '~/components/widgets/post/PostItem'
 import { PostPagination } from '~/components/widgets/post/PostPagination'
 import { PostTagsFAB } from '~/components/widgets/post/PostTagsFAB'
 import { NothingFound } from '~/components/widgets/shared/NothingFound'
+import { SearchFAB } from '~/components/widgets/shared/SearchFAB'
 import { apiClient } from '~/lib/request'
 
 interface Props {
@@ -42,6 +43,8 @@ export default async (props: Props) => {
 
       <PostPagination pagination={pagination} />
       <PostTagsFAB />
+
+      <SearchFAB />
     </NormalContainer>
   )
 }

src/components/layout/header/internal/SiteOwnerAvatar.tsx

@@ -17,9 +17,9 @@ export const SiteOwnerAvatar: Component = ({ className }) => {
       fetch('/api/bilibili/live_check')
         .then((res) => res.json())
         .catch(() => null),
-    select(data) {
+    select: useCallback((data: any) => {
       return !!data
-    },
+    }, []),
     refetchInterval: 1000 * 60,
   })
 

src/components/ui/markdown/Markdown.tsx

@@ -3,6 +3,7 @@ import React, { Fragment, memo, Suspense, useMemo, useRef } from 'react'
 import { clsx } from 'clsx'
 import { compiler, sanitizeUrl } from 'markdown-to-jsx'
 import dynamic from 'next/dynamic'
+import Script from 'next/script'
 import type { MarkdownToJSX } from 'markdown-to-jsx'
 import type { FC, PropsWithChildren } from 'react'
 
@@ -41,6 +42,8 @@ export interface MdProps {
   codeBlockFully?: boolean
   className?: string
   as?: React.ElementType
+
+  allowsScript?: boolean
 }
 
 export const Markdown: FC<MdProps & MarkdownToJSX.Options & PropsWithChildren> =
@@ -56,7 +59,7 @@ export const Markdown: FC<MdProps & MarkdownToJSX.Options & PropsWithChildren> =
       extendsRules,
       additionalParserRules,
       as: As = 'div',
-
+      allowsScript = false,
       ...rest
     } = props
 
@@ -82,6 +85,7 @@ export const Markdown: FC<MdProps & MarkdownToJSX.Options & PropsWithChildren> =
           // for custom react component
           LinkCard,
           Gallery,
+          script: allowsScript ? Script : undefined,
           ...overrides,
         },
 

src/components/widgets/post/PostMetaBar.tsx

@@ -4,7 +4,9 @@ import type { PostModel } from '@mx-space/api-client'
 
 import { MdiClockOutline } from '~/components/icons/clock'
 import { FeHash } from '~/components/icons/fa-hash'
+import { ThumbsupIcon } from '~/components/icons/thumbs-up'
 import { FloatPopover } from '~/components/ui/float-popover'
+import { NumberSmoothTransition } from '~/components/ui/number-transition/NumberSmoothTransition'
 import { RelativeTime } from '~/components/ui/relative-time'
 import { clsxm } from '~/lib/helper'
 
@@ -50,8 +52,10 @@ export const PostMetaBar: Component<{
       )}
       {!!meta.count?.like && (
         <div className="flex min-w-0 items-center space-x-1">
-          <i className="icon-[mingcute--heart-fill]" />
-          <span className="min-w-0 truncate">{meta.count.like}</span>
+          <ThumbsupIcon />
+          <span className="min-w-0 truncate">
+            <NumberSmoothTransition>{meta.count.like}</NumberSmoothTransition>
+          </span>
         </div>
       )}
     </div>