fix: toc width

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

next.config.mjs

@@ -13,7 +13,7 @@ const isProd = process.env.NODE_ENV === 'production'
 // eslint-disable-next-line import/no-mutable-exports
 let nextConfig = {
   compiler: {
-    reactRemoveProperties: { properties: ['^data-id$', '^data-(\\w+)-id$'] },
+    // reactRemoveProperties: { properties: ['^data-id$', '^data-(\\w+)-id$'] },
   },
   experimental: {
     appDir: true,

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

@@ -103,13 +103,15 @@ const NotePage = memo(function Notepage() {
             </NoteMarkdownImageRecordProvider>
 
             <LayoutRightSidePortal>
-              <TocAside
-                className="sticky top-[120px] ml-4 mt-[120px]"
-                treeClassName="max-h-[calc(100vh-6rem-4.5rem-300px)] h-[calc(100vh-6rem-4.5rem-300px)] min-h-[120px] relative"
-                accessory={ReadIndicator}
-              >
+              <aside className="sticky top-2 h-[calc(100vh-6rem-4.5rem-150px)]">
+                <TocAside
+                  as="div"
+                  className="top-[120px] ml-4"
+                  treeClassName="absolute h-full min-h-[120px]"
+                  accessory={ReadIndicator}
+                />
                 <NoteActionAside className="translate-y-full" />
-              </TocAside>
+              </aside>
             </LayoutRightSidePortal>
           </WrappedElementProvider>
         </NoteHideIfSecret>
@@ -118,7 +120,7 @@ const NotePage = memo(function Notepage() {
       <SubscribeBell defaultType="note_c" />
       <NoteTopic />
       <XLogInfoForNote />
-      <NoteFooterNavigationBarForMobile noteId={noteId} />
+      <NoteFooterNavigationBarForMobile />
     </>
   )
 })

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

@@ -54,13 +54,15 @@ const PostPage = () => {
           </PostMarkdownImageRecordProvider>
 
           <LayoutRightSidePortal>
-            <TocAside
-              className="sticky top-[120px] ml-4 mt-[120px]"
-              treeClassName="max-h-[calc(100vh-6rem-4.5rem-300px)] h-[calc(100vh-6rem-4.5rem-300px)] min-h-[120px] relative"
-              accessory={ReadIndicator}
-            >
-              <PostActionAside className="translate-y-full" />
-            </TocAside>
+            <aside className="sticky top-2 h-[calc(100vh-6rem-4.5rem-150px)]">
+              <TocAside
+                as="div"
+                className="top-[120px] ml-4"
+                treeClassName="absolute h-full min-h-[120px]"
+                accessory={ReadIndicator}
+              />
+              <PostActionAside className="ml-4 translate-y-full" />
+            </aside>
           </LayoutRightSidePortal>
         </WrappedElementProvider>
       </article>

src/app/posts/page.tsx

@@ -26,7 +26,7 @@ export default async (props: Props) => {
 
   if (!data?.length) {
     return (
-      <NormalContainer className="flex h-[500px] flex-col space-y-4 center">
+      <NormalContainer className="flex h-[500px] flex-col space-y-4 center [&_p]:my-4">
         <EmptyIcon />
         <p>这里空空如也</p>
         <p>稍后再来看看吧！</p>

src/app/timeline/page.tsx

@@ -1,6 +1,7 @@
 'use client'
 
 import { useQuery } from '@tanstack/react-query'
+import { useEffect } from 'react'
 import clsx from 'clsx'
 import { m } from 'framer-motion'
 import Link from 'next/link'
@@ -17,6 +18,7 @@ import { TimelineList } from '~/components/ui/list/TimelineList'
 import { BottomToUpSoftScaleTransitionView } from '~/components/ui/transition/BottomToUpSoftScaleTransitionView'
 import { TimelinProgress } from '~/components/widgets/timeline/TimelineProgress'
 import { apiClient } from '~/utils/request'
+import { springScrollToElement } from '~/utils/scroller'
 
 enum ArticleType {
   Post,
@@ -33,6 +35,43 @@ type MapType = {
   important?: boolean
 }
 
+const useJumpTo = () => {
+  useEffect(() => {
+    setTimeout(() => {
+      const jumpToId = new URLSearchParams(location.search).get('selectId')
+
+      if (!jumpToId) return
+
+      const target = document.querySelector(
+        `[data-id="${jumpToId}"]`,
+      ) as HTMLElement
+
+      if (!target) return
+
+      springScrollToElement(target, -500).then(() => {
+        target.animate(
+          [
+            {
+              backgroundColor: 'hsl(var(--a) / 50)',
+            },
+            {
+              backgroundColor: 'transparent',
+            },
+          ],
+          {
+            duration: 1500,
+            easing: 'ease-in-out',
+            fill: 'both',
+            iterations: 1,
+          },
+        )
+      })
+
+      // wait for user focus
+    }, 100)
+  }, [])
+}
+
 export default function TimelinePage() {
   const search = useSearchParams()
 
@@ -60,9 +99,12 @@ export default function TimelinePage() {
         .then((res) => res.data)
     },
   })
-  const router = useRouter()
 
+  const router = useRouter()
   const isMobile = useIsMobile()
+
+  useJumpTo()
+
   if (!data) return null
 
   const memory = search.get('bookmark') || search.get('memory')

src/components/layout/header/hooks.ts

@@ -11,7 +11,6 @@ export const useHideHeaderBgInRoute = () => {
   const setter = useSetHeaderShouldShowBg()
   useEffect(() => {
     setter(false)
-    console.log('useHideHeaderBgInRoute')
     return () => {
       setter(true)
     }

src/components/layout/header/internal/hooks.ts

@@ -25,13 +25,6 @@ export const useHeaderBgOpacity = () => {
   const isMobile = useIsMobile()
   const headerShouldShowBg = useHeaderShouldShowBg() || isMobile
 
-  console.log(
-    headerShouldShowBg,
-    'headerShouldShowBg',
-    useHeaderShouldShowBg(),
-    isMobile,
-  )
-
   return usePageScrollLocationSelector(
     (y) =>
       headerShouldShowBg

src/components/widgets/note/NoteFooterNavigation.tsx

@@ -2,31 +2,29 @@
 
 import Link from 'next/link'
 import { useRouter } from 'next/navigation'
-import type { FC } from 'react'
 
 import { MdiClockTimeThreeOutline } from '~/components/icons/clock'
 import { OnlyMobile } from '~/components/ui/viewport/OnlyMobile'
 import { routeBuilder, Routes } from '~/lib/route-builder'
 import { useCurrentNoteDataSelector } from '~/providers/note/CurrentNoteDataProvider'
 import { springScrollToTop } from '~/utils/scroller'
 
-export const NoteFooterNavigation: FC<{ noteId: string }> = ({
-  noteId: id,
-}) => {
+export const NoteFooterNavigation = () => {
   const data = useCurrentNoteDataSelector((data) =>
     !data
       ? null
       : {
-          nextNid: data?.next?.nid,
-          prevNid: data?.prev?.nid,
+          nextNid: data.next?.nid,
+          prevNid: data.prev?.nid,
+          currentObjectId: data.data.id,
         },
   )
 
   const router = useRouter()
 
   if (!data) return null
 
-  const { nextNid, prevNid } = data
+  const { nextNid, prevNid, currentObjectId } = data
 
   return (
     <>
@@ -72,7 +70,7 @@ export const NoteFooterNavigation: FC<{ noteId: string }> = ({
                 router.push(
                   routeBuilder(Routes.Timelime, {
                     type: 'note',
-                    selectId: id,
+                    selectId: currentObjectId,
                   }),
                 )
               }}
@@ -87,12 +85,11 @@ export const NoteFooterNavigation: FC<{ noteId: string }> = ({
   )
 }
 
-export const NoteFooterNavigationBarForMobile: typeof NoteFooterNavigation = (
-  props,
-) => {
-  return (
-    <OnlyMobile>
-      <NoteFooterNavigation {...props} />
-    </OnlyMobile>
-  )
-}
+export const NoteFooterNavigationBarForMobile: typeof NoteFooterNavigation =
+  () => {
+    return (
+      <OnlyMobile>
+        <NoteFooterNavigation />
+      </OnlyMobile>
+    )
+  }

src/components/widgets/subscribe/SubscribeBell.tsx

@@ -21,15 +21,12 @@ export const SubscribeBell: FC<SubscribeBellProps> = (props) => {
   }
 
   return (
-    <div className="mb-6 flex justify-center">
-      <MotionButtonBase
-        className="flex flex-col items-center justify-center p-4"
-        onClick={present}
-      >
-        <p className="text-gray-1 leading-8 opacity-80">
-          站点已开启邮件订阅，点亮小铃铛，订阅最新文章哦~
-        </p>
-
+    <div className="mb-6 flex flex-col items-center justify-center p-4">
+      <p className="text-gray-1 leading-8 opacity-80">
+        站点已开启邮件订阅，点亮小铃铛，订阅最新文章哦~
+      </p>
+      <MotionButtonBase onClick={present}>
+        <span className="sr-only">订阅</span>
         <i className="icon-[material-symbols--notifications-active-outline] mt-4 scale-150 transform text-3xl text-accent opacity-50 transition-opacity hover:opacity-100" />
       </MotionButtonBase>
     </div>

src/components/widgets/toc/TocAside.tsx

@@ -14,12 +14,15 @@ export type TocAsideProps = {
 
 export interface TocSharedProps {
   accessory?: React.ReactNode | React.FC
+
+  as?: React.ElementType
 }
 export const TocAside: Component<TocAsideProps & TocSharedProps> = ({
   className,
   children,
   treeClassName,
   accessory,
+  as: As = 'aside',
 }) => {
   const containerRef = useRef<HTMLUListElement>(null)
   const $article = useWrappedElement()
@@ -42,7 +45,7 @@ export const TocAside: Component<TocAsideProps & TocSharedProps> = ({
     const setMaxWidth = throttle(() => {
       if (containerRef.current) {
         containerRef.current.style.maxWidth = `${
-          document.documentElement.getBoundingClientRect().width -
+          window.innerWidth -
           containerRef.current.getBoundingClientRect().x -
           30
         }px`
@@ -57,14 +60,14 @@ export const TocAside: Component<TocAsideProps & TocSharedProps> = ({
   }, [])
 
   return (
-    <aside className={clsxm('st-toc z-[3]', 'relative font-sans', className)}>
+    <As className={clsxm('st-toc z-[3]', 'relative font-sans', className)}>
       <TocTree
         $headings={$headings}
         containerRef={containerRef}
         className={clsxm('absolute max-h-[75vh]', treeClassName)}
         accessory={accessory}
       />
       {children}
-    </aside>
+    </As>
   )
 }

src/lib/fonts.ts

@@ -12,6 +12,8 @@ const serifFont = Noto_Serif_SC({
   weight: ['400'],
   variable: '--font-serif',
   display: 'swap',
+  // adjustFontFallback: false,
+  fallback: ['Noto Serif SC'],
 })
 
 export { sansFont, serifFont }

tailwind.config.ts

@@ -176,7 +176,7 @@ const twConfig: Config = {
       fontFamily: {
         sans: 'var(--font-sans),system-ui,-apple-system,PingFang SC,"Microsoft YaHei",Segoe UI,Roboto,Helvetica,noto sans sc,hiragino sans gb,"sans-serif",Apple Color Emoji,Segoe UI Emoji,Not Color Emoji',
         serif:
-          'var(--font-serif),"Noto Serif CJK SC","Noto Serif SC","Source Han Serif SC","Source Han Serif",source-han-serif-sc,SongTi SC,SimSum,"Hiragino Sans GB",system-ui,-apple-system,Segoe UI,Roboto,Helvetica,"Microsoft YaHei","WenQuanYi Micro Hei",sans-serif',
+          '"Noto Serif CJK SC","Noto Serif SC",var(--font-serif),"Source Han Serif SC","Source Han Serif",source-han-serif-sc,SongTi SC,SimSum,"Hiragino Sans GB",system-ui,-apple-system,Segoe UI,Roboto,Helvetica,"Microsoft YaHei","WenQuanYi Micro Hei",sans-serif',
         mono: `"OperatorMonoSSmLig Nerd Font","Cascadia Code PL","FantasqueSansMono Nerd Font","operator mono","Fira code Retina","Fira code","Consolas", Monaco, "Hannotate SC", monospace, -apple-system`,
       },
       screens: {