tocのコードをちゃんとした

bun.lock

@@ -1,10 +1,11 @@
 {
-  "lockfileVersion": 0,
+  "lockfileVersion": 1,
   "workspaces": {
     "": {
       "dependencies": {
         "@twemoji/parser": "^15.1.1",
         "github-slugger": "^2.0.0",
+        "mdast-util-to-string": "^4.0.0",
         "rehype-external-links": "^3.0.0",
         "rehype-github-alert": "^1.0.0",
         "rehype-highlight": "^7.0.1",
@@ -16,6 +17,7 @@
         "remark-gfm": "^4.0.0",
         "remark-math": "^6.0.0",
         "remark-rehype": "^11.1.1",
+        "unist-util-visit-parents": "^6.0.1",
         "yaml": "^2.6.1",
       },
       "devDependencies": {

package.json

@@ -23,6 +23,7 @@
   "dependencies": {
     "@twemoji/parser": "^15.1.1",
     "github-slugger": "^2.0.0",
+    "mdast-util-to-string": "^4.0.0",
     "rehype-external-links": "^3.0.0",
     "rehype-github-alert": "^1.0.0",
     "rehype-highlight": "^7.0.1",
@@ -34,6 +35,7 @@
     "remark-gfm": "^4.0.0",
     "remark-math": "^6.0.0",
     "remark-rehype": "^11.1.1",
+    "unist-util-visit-parents": "^6.0.1",
     "yaml": "^2.6.1"
   },
   "module": "index.ts"

src/routes/(DefaultStyle)/post/[slug]/+page.server.ts

@@ -1,28 +1,39 @@
 import Post from '$lib/server/LoadPost';
-import { remark } from 'remark'
 import Perser from '$lib/components/Markdown'
+import { remark } from 'remark'
+import { visitParents } from 'unist-util-visit-parents'
+import { toString } from 'mdast-util-to-string'
 import GithubSlugger from 'github-slugger';
 
+export interface tocitem {
+    title: string,
+    id: string,
+    depth: 1 | 2 | 3 | 4 | 5 | 6
+}
+
 export async function load({params}) {
-
-    const md = await Post(params.slug);
-
+    const md = await Post(params.slug)
     let persed = Perser(md.post)
 
     let mdast = remark().parse(md.post)
-    let headers = mdast.children.filter((i) => i.type=='heading' && i.depth<4).map((i)=>{
-        let title = i.children[0].value
-        return {"depth": i.depth, "title": title}
+
+    let headers: tocitem[] = []
+    visitParents(mdast, 'heading', (node)=>{
+        let slugs = new GithubSlugger()
+
+        let title = toString(node)
+        let id    = slugs.slug(title)
+        let depth = node.depth
+
+        let toc: tocitem = { title, id, depth }
+
+        headers.push(toc)
     })
 
-    const slugs = new GithubSlugger()
-
-    let slugged = headers.map((x)=>x.depth ?slugs.slug(x.title):'').filter((x)=>x!='')
-
     return {
         id: params.slug,
         metadata: md.metadata,
         post: persed,
-        heading: slugged,
+        toc: headers,
     }
 }

src/routes/(DefaultStyle)/post/[slug]/+page.svelte

@@ -144,9 +144,9 @@
 			<div>
 				<Share share={{url:`${baseURL}/post/${data.id}`, title:data.metadata.title}} />
 			</div>
-			{#if data.heading.length!=0}
+			{#if data.toc.length}
 				<div id='toc'>
-					<Toc toclist={data.heading}></Toc>
+					<Toc toclist={data.toc}></Toc>
 				</div>
 			{/if}
 			<div class="mi-posts js">

src/routes/(DefaultStyle)/post/[slug]/toc.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
-    export let toclist: string[];
+    export let toclist: tocitem[];
+    import type { tocitem } from './+page.server'
 </script>
 
 
@@ -7,7 +8,7 @@
     <div style="margin:4px 0 0 8px;color:#aaaa;font-size:0.85em;">目次</div>
     <ul>
         {#each toclist as toc}
-            <li><a href='#{toc}'>{toc}</a></li>
+            <li><a href='#{toc.id}'>{toc.title}</a></li>
         {/each}
     </ul>
 </nav>