TOC (#154)

package.json

@@ -50,6 +50,8 @@
     "prettier-plugin-svelte": "^3.0.3",
     "rehype-highlight": "^7.0.0",
     "rehype-stringify": "^10.0.0",
+    "rehype-autolink-headings": "^7.1.0",
+    "rehype-slug": "^6.0.0",
     "remark": "^15.0.1",
     "remark-frontmatter": "^5.0.0",
     "remark-parse-frontmatter": "^1.0.3",
@@ -61,7 +63,10 @@
     "typescript": "^5.2.2",
     "unist-util-visit": "^5.0.0",
     "vite": "^4.4.9",
-    "vitest": "^0.34.4"
+    "vitest": "^0.34.4",
+    "github-slugger": "^2.0.0"
   },
-  "type": "module"
+  "type": "module",
+  "dependencies": {
+  }
 }

src/lib/data/posts/helper.ts

@@ -33,7 +33,6 @@ export function getPost(entry: any): Post {
   const type = EntryType.Post
   const slug = getSlug(meta.title)
   const relativePath = `/${type.toLowerCase()}s/${slug}`
-  // TODO add toc: getNestedToc(entry.getHeadings()),
   return {
     type,
     title: meta.title,
@@ -44,49 +43,10 @@ export function getPost(entry: any): Post {
     updated: getDate(meta.updated),
     tldr: meta.tldr,
     discussion: meta.discussion,
-    toc: [],
+    toc: entry.toc,
     slug,
     relativePath,
     fullPath: `https://harambasic.de${relativePath}`,
     html: entry.html
   }
-}
-
-// TODO test
-// TODO can this be rewritten in a nicer way?
-// provided by https://codepen.io/Frnak/pen/mdmEjyG?editors=0011
-// TODO fix markdownHeadings any
-// check if this might be a nicer solution: https://github.com/ryanfiller/portfolio-svelte/blob/main/src/plugins/rehype/table-of-contents.js#L29
-export function getNestedToc(markdownHeading: any): TocNode[] {
-  let latestEntry: TocNode | null
-  let latestParent: TocNode | null
-  const markdownHeadingCopy = JSON.parse(JSON.stringify(markdownHeading))
-  if (markdownHeadingCopy.length <= 1) return markdownHeadingCopy
-  // TODO fix any
-  const entryDepth: number[] = markdownHeading.reduce((acc: number, item: any) => {
-    return item.depth < acc ? item.depth : acc
-  }, Number.POSITIVE_INFINITY)
-  // TODO fix any
-  return markdownHeadingCopy.reduce((result: any, entry: any) => {
-    if (latestEntry && !latestEntry.children) {
-      latestEntry.children = []
-    }
-    const latestEntryDepth = latestEntry?.depth || 0
-    const latestEntryChildren = latestEntry?.children || []
-    const latestParentChildren = latestParent?.children || []
-    if (entry.depth === entryDepth) {
-      entry.children = []
-      result.push(entry)
-      latestParent = null
-    } else if (entry.depth === latestEntryDepth + 1) {
-      latestEntryChildren.push(entry)
-      latestParent = latestEntry
-    } else if (entry.depth === latestEntryDepth) {
-      latestParentChildren.push(entry)
-    } else {
-      console.error('Unexpected Toc behaviour', entry)
-    }
-    latestEntry = entry
-    return result
-  }, [])
-}
+}

src/lib/types/post.d.ts

@@ -3,7 +3,7 @@ import type { Entry } from './entry'
 export interface TocNode {
   depth: number
   slug: string
-  text: string
+  value: string
   children: TocNode[] | null
 }