Fix TOC links with invalid querySelector

Author: stelcodes

astro.config.mjs

@@ -3,7 +3,6 @@ import { defineConfig } from 'astro/config'
 import tailwindcss from '@tailwindcss/vite'
 import sitemap from '@astrojs/sitemap'
 import mdx from '@astrojs/mdx'
-import rehypeSlug from 'rehype-slug'
 import rehypeAutolinkHeadings from 'rehype-autolink-headings'
 import expressiveCode from 'astro-expressive-code'
 import siteConfig from './src/site.config'
@@ -39,7 +38,6 @@ export default defineConfig({
       remarkGemoji,
     ],
     rehypePlugins: [
-      rehypeSlug,
       [
         rehypeAutolinkHeadings,
         {

package-lock.json

@@ -42,7 +42,6 @@
     "rehype-autolink-headings": "^7.1.0",
     "rehype-external-links": "^3.0.0",
     "rehype-katex": "^7.0.1",
-    "rehype-slug": "^6.0.0",
     "rehype-unwrap-images": "^1.0.0",
     "remark-directive": "^4.0.0",
     "remark-math": "^6.0.0",

package.json

@@ -59,7 +59,8 @@ const toc = generateToc(headings)
       e.preventDefault()
       const href = anchor.getAttribute('href')
       if (!href) return
-      document.querySelector(href)?.scrollIntoView({
+      const id = href.startsWith('#') ? href.slice(1) : href
+      document.getElementById(id)?.scrollIntoView({
         behavior: 'smooth',
       })
     })

src/components/TableOfContents.astro

@@ -10,6 +10,10 @@ tags: ['typescript']
 echo "Exploring advanced TypeScript features like conditional types"
 ```
 
+## 3 Test
+
+## #test
+
 Conditional types in TypeScript allow you to create types based on conditions. Here's an example:
 
 ```typescript

src/content/posts/advanced-typescript-conditional-types.md

@@ -55,7 +55,7 @@ if (addendum.length > 0) {
         />
       )
     }
-    <h1 class="mb-3 text-3xl text-[var(--theme-h1)] font-semibold">
+    <h1 class="mb-3 text-2xl text-[var(--theme-h1)] font-semibold">
       # {postData.title}
     </h1>
     <div class="text-foreground/80 mb-2.5">