feat: change generate toc

docs/src/content/pages/posts/markdown-style-guide.md

@@ -12,17 +12,17 @@ Here is a sample of some basic Markdown syntax that can be used when writing Mar
 
 The following HTML `<h1>`—`<h6>` elements represent six levels of section headings. `<h1>` is the highest section level while `<h6>` is the lowest.
 
-# H1
+<h1>H1</h1>
 
-## H2
+<h2>H2</h2>
 
-### H3
+<h3>H3</h3>
 
-#### H4
+<h4>H4</h4>
 
-##### H5
+<h5>H5</h5>
 
-###### H6
+<h6>H6</h6>
 
 ## Paragraph
 

package.json

@@ -55,14 +55,14 @@
     "@astrojs/markdown-remark": "^5.2.0",
     "@astrojs/mdx": "^3.1.7",
     "@astrojs/sitemap": "^3.2.0",
-    "@microflash/rehype-toc": "^1.0.2",
     "bcp-47": "^2.1.0",
     "dayjs": "^1.11.13",
     "fast-glob": "^3.3.2",
-    "hastscript": "^9.0.0",
+    "hast-util-find-and-replace": "^5.0.1",
     "i18next": "^23.15.2",
     "nprogress": "^0.2.0",
-    "rehype-autolink-headings": "^7.1.0"
+    "rehype-autolink-headings": "^7.1.0",
+    "unist-util-visit": "^5.0.0"
   },
   "devDependencies": {
     "@antfu/eslint-config": "^3.7.3",

src/components/Toc.astro

@@ -0,0 +1,19 @@
+---
+import { TocHeading } from '../utils/toc'
+import TocItem from './TocItem.astro'
+
+export interface Props {
+  headings: TocHeading[]
+}
+
+const { headings } = Astro.props
+---
+
+<div class="table-of-contents">
+  <div class="table-of-contents-anchor">
+    <div class="i-ri-menu-2-fill"></div>
+  </div>
+  <ul>
+    {headings.map((toc) => <TocItem {...toc} />)}
+  </ul>
+</div>

src/components/TocItem.astro

@@ -0,0 +1,22 @@
+---
+import { TocHeading } from '../utils/toc'
+
+export type Props = TocHeading
+
+const { slug, text, children } = Astro.props
+---
+
+<li>
+  <a href={'#' + slug}>
+    {text}
+  </a>
+  {
+    !!children?.length && (
+      <ul>
+        {children.map((toc) => (
+          <Astro.self {...toc} />
+        ))}
+      </ul>
+    )
+  }
+</li>