feat: toc item smooth indicator

Signed-off-by: Innei <tukon479@gmail.com>

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

@@ -2,6 +2,7 @@ import RemoveMarkdown from 'remove-markdown'
 import type { Metadata } from 'next'
 
 import { BottomToUpTransitionView } from '~/components/ui/transition/BottomToUpTransitionView'
+import { attachUA } from '~/lib/attach-ua'
 import { queries } from '~/queries/definition'
 import { getQueryClient } from '~/utils/query-client.server'
 
@@ -15,6 +16,7 @@ export const generateMetadata = async ({
  }
 }): Promise<Metadata> => {
  try {
+ attachUA()
  const { data } = await getQueryClient().fetchQuery(
  queries.note.byNid(params.id),
  )
@@ -52,6 +54,7 @@ export default async (
  id: string
  }>,
 ) => {
+ attachUA()
  await getQueryClient().prefetchQuery(queries.note.byNid(props.params.id))
  return (
  <BottomToUpTransitionView>

src/components/widgets/toc/Toc.tsx

@@ -1,4 +1,5 @@
 import { memo, useEffect, useMemo, useRef, useState } from 'react'
+import { motion } from 'framer-motion'
 import type { ITocItem } from './TocItem'
 
 import { RightToLeftTransitionView } from '~/components/ui/transition/RightToLeftTransitionView'
@@ -80,7 +81,7 @@ export const Toc: Component<TocProps> = ({ useAsWeight, className }) => {
  return (
  <aside className={clsxm('st-toc z-[3]', 'relative font-sans', className)}>
  <ul
- className="absolute max-h-[75vh] overflow-y-auto font-medium scrollbar-none"
+ className="absolute max-h-[75vh] overflow-y-auto px-2 font-medium scrollbar-none"
  key={`${toc.map((i) => i.title).join('')}`}
  ref={containerRef}
  >
@@ -124,8 +125,15 @@ const MemoedItem = memo<{
  }
  key={heading.title}
  as="li"
- className="leading-none"
+ className="relative leading-none"
  >
+ {isActive && (
+ <motion.span
+ layoutId="active-toc-item"
+ layout
+ className="absolute -left-2 bottom-[3px] top-[3px] w-[2px] rounded-sm bg-accent"
+ />
+ )}
  <TocItem
  anchorId={heading.anchorId}
  // containerRef={containerRef}

src/lib/attach-ua.ts

@@ -0,0 +1,16 @@
+import { isServer } from '@tanstack/react-query'
+import { headers } from 'next/dist/client/components/headers'
+
+import { $axios } from '~/utils/request'
+
+import PKG from '../../package.json'
+
+export const attachUA = () => {
+ if (!isServer) return
+ const { get } = headers()
+
+ const ua = get('user-agent')
+ $axios.defaults.headers.common[
+ 'User-Agent'
+ ] = `${ua} NextJS/v${PKG.dependencies.next} ${PKG.name}/${PKG.version}`
+}

src/lib/define-metadata.ts

@@ -1,12 +1,12 @@
-import { headers } from 'next/dist/client/components/headers'
 import type { AggregateRoot } from '@mx-space/api-client'
 import type { Metadata } from 'next'
 
 import { captureException } from '@sentry/nextjs'
 
 import { queries } from '~/queries/definition'
 import { getQueryClient } from '~/utils/query-client.server'
-import { $axios } from '~/utils/request'
+
+import { attachUA } from './attach-ua'
 
 export const defineMetadata = <T extends Record<string, string>>(
  fn: (
@@ -16,11 +16,8 @@ export const defineMetadata = <T extends Record<string, string>>(
 ) => {
  const handler = async ({ params }: { params: T }): Promise<Metadata> => {
  const getData = async () => {
- const { get } = headers()
  const queryClient = getQueryClient()
- const ua = get('user-agent')
- $axios.defaults.headers.common['User-Agent'] = ua
-
+ attachUA()
  return await queryClient.fetchQuery({
  ...queries.aggregation.root(),
  })