refactor(blog) remove blog toc component

src/components/blog/blog-toc.tsx

@@ -1,112 +0,0 @@
-'use client';
-
-import { useMounted } from '@/hooks/use-mounted';
-import type { TableOfContents } from '@/lib/blog/toc';
-import { cn } from '@/lib/utils';
-import * as React from 'react';
-
-interface TocProps {
-  toc: TableOfContents;
-}
-
-export function BlogToc({ toc }: TocProps) {
-  const itemIds = React.useMemo(
-    () =>
-      toc.items
-        ? toc.items
-            .flatMap((item) => [item.url, item?.items?.map((item) => item.url)])
-            .flat()
-            .filter(Boolean)
-            .map((id) => id?.split('#')[1])
-        : [],
-    [toc]
-  );
-  const activeHeading = useActiveItem(itemIds);
-  const mounted = useMounted();
-
-  if (!toc?.items) {
-    return null;
-  }
-
-  return mounted ? (
-    <div className="space-y-2">
-      <Tree tree={toc} activeItem={activeHeading} />
-    </div>
-  ) : null;
-}
-
-function useActiveItem(itemIds: (string | undefined)[]) {
-  const [activeId, setActiveId] = React.useState<string>('');
-
-  React.useEffect(() => {
-    const observer = new IntersectionObserver(
-      (entries) => {
-        for (const entry of entries) {
-          if (entry.isIntersecting) {
-            setActiveId(entry.target.id);
-          }
-        }
-      },
-      { rootMargin: '0% 0% -80% 0%' }
-    );
-
-    for (const id of itemIds) {
-      if (!id) {
-        continue;
-      }
-
-      const element = document.getElementById(id);
-      if (element) {
-        observer.observe(element);
-      }
-    }
-
-    return () => {
-      for (const id of itemIds) {
-        if (!id) {
-          continue;
-        }
-
-        const element = document.getElementById(id);
-        if (element) {
-          observer.unobserve(element);
-        }
-      }
-    };
-  }, [itemIds]);
-
-  return activeId;
-}
-
-interface TreeProps {
-  tree: TableOfContents;
-  level?: number;
-  activeItem?: string | null;
-}
-
-function Tree({ tree, level = 1, activeItem }: TreeProps) {
-  return tree?.items?.length && level < 3 ? (
-    <ul className={cn('m-0 list-none', { 'pl-4': level !== 1 })}>
-      {tree.items.map((item, index) => {
-        return (
-          <li key={index} className={cn('mt-0 pt-1')}>
-            <a
-              href={item.url}
-              className={cn(
-                'inline-block text-sm no-underline hover:text-primary line-clamp-1',
-                item.url === `#${activeItem}`
-                  ? 'font-medium text-primary'
-                  : 'text-muted-foreground'
-              )}
-            >
-              {item.title}
-            </a>
-            {item.items?.length ? (
-              <Tree tree={item} level={level + 1} activeItem={activeItem} />
-            ) : null}
-          </li>
-        );
-      })}
-    </ul>
-  ) : null;
-}

src/lib/blog/toc.ts

@@ -1,77 +0,0 @@
-// @ts-nocheck
-import { toc } from 'mdast-util-toc';
-import { remark } from 'remark';
-import { visit } from 'unist-util-visit';
-
-const textTypes = ['text', 'emphasis', 'strong', 'inlineCode'];
-
-function flattenNode(node) {
-  const p = [];
-  visit(node, (node) => {
-    if (!textTypes.includes(node.type)) return;
-    p.push(node.value);
-  });
-  return p.join('');
-}
-
-interface Item {
-  title: string;
-  url: string;
-  items?: Item[];
-}
-
-interface Items {
-  items?: Item[];
-}
-
-function getItems(node, current): Items {
-  if (!node) {
-    return {};
-  }
-
-  if (node.type === 'paragraph') {
-    visit(node, (item) => {
-      if (item.type === 'link') {
-        current.url = item.url;
-        current.title = flattenNode(node);
-      }
-
-      if (item.type === 'text') {
-        current.title = flattenNode(node);
-      }
-    });
-
-    return current;
-  }
-
-  if (node.type === 'list') {
-    current.items = node.children.map((i) => getItems(i, {}));
-
-    return current;
-  }
-  if (node.type === 'listItem') {
-    const heading = getItems(node.children[0], {});
-
-    if (node.children.length > 1) {
-      getItems(node.children[1], heading);
-    }
-
-    return heading;
-  }
-
-  return {};
-}
-
-const getToc = () => (node, file) => {
-  const table = toc(node);
-  file.data = getItems(table.map, {});
-};
-
-export type TableOfContents = Items;
-
-export async function getTableOfContents(
-  content: string
-): Promise<TableOfContents> {
-  const result = await remark().use(getToc).process(content);
-  return result.data;
-}