Merge branch 'toc-new'

# Conflicts:
#	astro.config.mjs
#	pnpm-lock.yaml
#	src/components/GlobalStyles.astro

src/layouts/Layout.astro

@@ -343,8 +343,8 @@ const setup = () => {
 		}
 	})
 */
-	// Remove the delay for the first time page load
 	window.swup.hooks.on('link:click', () => {
+		// Remove the delay for the first time page load
 		document.documentElement.style.setProperty('--content-delay', '0ms')
 
 		// prevent elements from overlapping the navbar
@@ -375,6 +375,12 @@ const setup = () => {
 		if (heightExtend) {
 			heightExtend.classList.remove('hidden')
 		}
+
+		// Hide the TOC while scrolling back to top
+		let toc = document.getElementById('toc-wrapper');
+		if (toc) {
+			toc.classList.add('toc-not-ready')
+		}
 	});
 	window.swup.hooks.on('page:view', () => {
 		// hide the temp high element when the transition is done
@@ -385,9 +391,16 @@ const setup = () => {
 	});
 	window.swup.hooks.on('visit:end', (visit: {to: {url: string}}) => {
 		// execute 1s later
-		const heightExtend = document.getElementById('page-height-extend')
-		if (heightExtend) {
-			heightExtend.classList.add('hidden')
+		setTimeout(() => {
+			const heightExtend = document.getElementById('page-height-extend')
+			if (heightExtend) {
+				heightExtend.classList.add('hidden')
+			}
+		}, 200)
+
+		const toc = document.getElementById('toc-wrapper');
+		if (toc) {
+			toc.classList.remove('toc-not-ready')
 		}
 	});
 }
@@ -398,6 +411,7 @@ if (window?.swup?.hooks) {
 }
 
 let backToTopBtn = document.getElementById('back-to-top-btn');
+let toc = document.getElementById('toc-wrapper');
 let navbar = document.getElementById('navbar-wrapper')
 function scrollFunction() {
 	if (backToTopBtn) {
@@ -408,6 +422,14 @@ function scrollFunction() {
 		}
 	}
 
+	if (toc) {
+		if (document.body.scrollTop > 600 || document.documentElement.scrollTop > 600) {
+			toc.classList.remove('toc-hide')
+		} else {
+			toc.classList.add('toc-hide')
+		}
+	}
+
 	if (!bannerEnabled) return
 	if (navbar) {
 		let threshold = window.innerHeight * 0.30 - 72 - 16

src/layouts/MainGridLayout.astro

@@ -6,6 +6,8 @@ import SideBar from '@components/widget/SideBar.astro'
 import Layout from './Layout.astro'
 import { Icon } from 'astro-icon/components'
 import { siteConfig } from '../config'
+import type { MarkdownHeading } from 'astro'
+import TOC from "../components/widget/TOC.astro";
 
 interface Props {
   title?: string
@@ -13,9 +15,10 @@ interface Props {
   description?: string
   lang?: string
   setOGTypeArticle?: boolean;
+  headings? : MarkdownHeading[]
 }
 
-const { title, banner, description, lang, setOGTypeArticle } = Astro.props
+const { title, banner, description, lang, setOGTypeArticle, headings = [] } = Astro.props
 const hasBannerCredit =
   siteConfig.banner.enable && siteConfig.banner.credit.enable
 const hasBannerLink = !!siteConfig.banner.credit.url
@@ -48,7 +51,7 @@ const hasBannerLink = !!siteConfig.banner.credit.url
             </a>}
 
 
-            <SideBar class="mb-4 row-start-2 row-end-3 col-span-2 lg:row-start-1 lg:row-end-2 lg:col-span-1 lg:max-w-[17.5rem] onload-animation"></SideBar>
+            <SideBar class="mb-4 row-start-2 row-end-3 col-span-2 lg:row-start-1 lg:row-end-2 lg:col-span-1 lg:max-w-[17.5rem] onload-animation" headings={headings}></SideBar>
 
             <main id="swup-container" class="transition-swup-fade col-span-2 lg:col-span-1 overflow-hidden">
                 <div id="content-wrapper" class="onload-animation">
@@ -65,6 +68,17 @@ const hasBannerLink = !!siteConfig.banner.credit.url
                 <Footer></Footer>
             </div>
         </div>
+
+        <!-- TOC component -->
+        <div id="toc-wrapper" class="transition absolute top-0 -right-[30rem] w-[30rem] flex items-center toc-hide">
+            <div id="toc-inner-wrapper" class="fixed top-14 w-96 h-[calc(100vh_-_20rem)] overflow-y-scroll overflow-x-hidden hide-scrollbar">
+                <div id="toc" class="w-full h-full transition-swup-fade">
+                    <div class="h-8 w-full"></div>
+                    <TOC headings={headings}></TOC>
+                    <div class="h-8 w-full"></div>
+                </div>
+            </div>
+        </div>
         <BackToTop></BackToTop>
     </div>
 </div>