feat: tocAside

Author: coderz-w

src/app/(app)/notes/[nid]/page.tsx

@@ -9,6 +9,9 @@ import {
   PageTransition,
 } from './pageExtra';
 
+import { LayoutRightSidePortal } from '@/providers/shared/LayoutRightSideProvider';
+import { ArticleRightAside } from '@/components/modules/shared/ArticleRightAside';
+
 export default async function Page({ params }: { params: Record<string, any> }) {
   const { nid } = params;
   console.log('id', nid);
@@ -32,6 +35,9 @@ const PageInner = () => (
     </div>
     <IndentArticleContainer>
       <NoteMarkdown />
+      <LayoutRightSidePortal>
+        <ArticleRightAside></ArticleRightAside>
+      </LayoutRightSidePortal>
     </IndentArticleContainer>
   </>
 );

src/app/(app)/notes/[nid]/pageExtra.tsx

@@ -2,14 +2,14 @@
 
 import React, { PropsWithChildren, useEffect, useRef } from 'react';
 import { m } from 'framer-motion';
+import { useShallow } from 'zustand/react/shallow';
 
 import text from './test.md';
 
 import { MdiClockOutline } from '@/components/icons/clock';
 import { cn } from '@/lib/helper';
 import { MainMarkdown } from '@/components/ui/markdown';
-
-console.log(text);
+import { useMainArticleStore } from '@/store/mainArticleStore';
 
 export const NoteTitle = () => {
   const title = '我的一篇文章';
@@ -55,17 +55,24 @@ export const NoteMarkdown = () => {
 };
 
 export const PaperLayout = ({ children, className }: PropsWithChildren<{ className?: string }>) => {
+  const { setOffsetHeight, setElement } = useMainArticleStore(
+    useShallow((state) => ({
+      setOffsetHeight: state.setOffsetHeight,
+      setElement: state.setElement,
+    })),
+  );
+
   const paperLayoutRef = useRef<HTMLDivElement>(null);
   useEffect(() => {
     if (!paperLayoutRef.current) return;
-    //侧边可能需要
+    if (setElement) setElement(paperLayoutRef.current);
 
     const mainHeight = paperLayoutRef.current.offsetHeight;
-    console.log(mainHeight);
+    setOffsetHeight(mainHeight);
 
     const ob = new ResizeObserver((entries) => {
       const mainHeight = (entries[0].target as HTMLElement).offsetHeight;
-      if (mainHeight) console.log(mainHeight);
+      if (mainHeight) setOffsetHeight(mainHeight);
     });
     ob.observe(paperLayoutRef.current);
 

src/components/modules/shared/ArticleRightAside.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { PropsWithChildren } from 'react';
+
+import { TocAside } from '../toc/TocAside';
+
+export const ArticleRightAside = ({ children }: PropsWithChildren) => {
+  return (
+    <aside className="sticky top-[120px] mt-[120px] h-[calc(100vh-6rem-4.5rem-150px-120px)]">
+      <div className="relative h-full">
+        <TocAside
+          as="div"
+          className="static ml-4"
+          treeClassName="absolute h-full min-h-[120px] flex flex-col"
+        />
+      </div>
+      {!!children &&
+        React.cloneElement(children as any, {
+          className: 'translate-y-[calc(100%+24px)]',
+        })}
+    </aside>
+  );
+};

src/components/modules/toc/TocAside.tsx

@@ -0,0 +1,69 @@
+'use client';
+
+import type React from 'react';
+import { PropsWithChildren, useEffect, useMemo, useRef } from 'react';
+import { useShallow } from 'zustand/react/shallow';
+
+import { TocTree } from './TocTree';
+
+import { cn } from '@/lib/helper';
+import { useMainArticleStore } from '@/store/mainArticleStore';
+
+export type TocAsideProps = {
+  treeClassName?: string;
+  accessory?: React.ReactNode | React.FC;
+  as?: React.ElementType;
+  className?: string;
+};
+
+export const TocAside = ({
+  className,
+  children,
+  treeClassName,
+  as: As = 'aside',
+}: TocAsideProps & PropsWithChildren) => {
+  const containerRef = useRef<HTMLUListElement>(null);
+  const $article = useMainArticleStore(useShallow((state) => state.Element));
+
+  if ($article === undefined) {
+    throw new TypeError('<Toc /> must be used in <WrappedElementProvider />');
+  }
+
+  const $headings = useMemo(() => {
+    if (!$article) {
+      return [];
+    }
+
+    return [...$article.querySelectorAll('h1,h2,h3,h4,h5,h6')].filter(($heading) => {
+      return ($heading as HTMLElement).dataset['markdownHeading'] === 'true';
+    }) as HTMLHeadingElement[];
+  }, [$article]);
+  useEffect(() => {
+    const setMaxWidth = () => {
+      if (containerRef.current) {
+        containerRef.current.style.maxWidth = `${
+          window.innerWidth - containerRef.current.getBoundingClientRect().x - 30
+        }px`;
+      }
+    };
+
+    setMaxWidth();
+
+    window.addEventListener('resize', setMaxWidth);
+
+    return () => {
+      window.removeEventListener('resize', setMaxWidth);
+    };
+  }, []);
+
+  return (
+    <As className={cn('st-toc z-[3]', 'relative font-sans', className)}>
+      <TocTree
+        $headings={$headings}
+        containerRef={containerRef}
+        className={cn('absolute max-h-[75vh]', treeClassName)}
+      />
+      {children}
+    </As>
+  );
+};

src/components/modules/toc/TocItem.tsx

@@ -0,0 +1,77 @@
+'use client';
+
+import type { FC, MouseEvent } from 'react';
+import { memo, useCallback, useMemo, useRef } from 'react';
+import { tv } from 'tailwind-variants';
+
+import { cn } from '@/lib/helper';
+
+const styles = tv({
+  base: cn(
+    'relative mb-[1.5px] inline-block min-w-0 max-w-full leading-normal text-neutral-content',
+    'truncate text-left tabular-nums opacity-50 transition-all duration-500 hover:opacity-80',
+  ),
+  variants: {
+    status: {
+      active: 'ml-2 opacity-100',
+    },
+  },
+});
+export interface ITocItem {
+  depth: number;
+  title: string;
+  anchorId: string;
+  index: number;
+
+  $heading: HTMLHeadingElement;
+}
+
+export const TocItem: FC<{
+  heading: ITocItem;
+
+  active: boolean;
+  rootDepth: number;
+  onClick?: (i: number, $el: HTMLElement | null, anchorId: string) => void;
+}> = memo((props) => {
+  const { active, rootDepth, onClick, heading } = props;
+  const { $heading, anchorId, depth, index, title } = heading;
+
+  const $ref = useRef<HTMLAnchorElement>(null);
+
+  const renderDepth = useMemo(() => {
+    const result = depth - rootDepth;
+
+    return result;
+  }, [depth, rootDepth]);
+
+  return (
+    <a
+      ref={$ref}
+      data-index={index}
+      href={`#${anchorId}`}
+      className={cn(
+        styles({
+          status: active ? 'active' : undefined,
+        }),
+      )}
+      style={useMemo(
+        () => ({
+          paddingLeft: depth >= rootDepth ? `${renderDepth * 0.6 + 0.5}rem` : '0.5rem',
+        }),
+        [depth, renderDepth, rootDepth],
+      )}
+      data-depth={depth}
+      onClick={useCallback(
+        (e: MouseEvent) => {
+          e.preventDefault();
+
+          onClick?.(index, $heading, anchorId);
+        },
+        [onClick, index, $heading, anchorId],
+      )}
+      title={title}
+    >
+      <span className="cursor-pointer">{title}</span>
+    </a>
+  );
+});