LukeParke/website
1
0
Fork 0
mirror of https://github.com/LukeHagar/website.git synced 2025-12-09 21:07:46 +00:00
Code Issues Packages Projects Releases Wiki Activity

Update table-of-contents.svelte

Browse Source
This commit is contained in:
Jesse Winton
2025-03-05 09:51:15 -05:00
parent 27a465ae74
commit 58089d4f1e
1 changed files with 31 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
src/lib/components/blog/table-of-contents.svelte
View File

@@ -1,7 +1,7 @@
<script lang="ts"> <script lang="ts">
import type { TocItem } from '$lib/layouts/DocsArticle.svelte'; import type { TocItem } from '$lib/layouts/DocsArticle.svelte';
import { classNames } from '$lib/utils/classnames'; import { classNames } from '$lib/utils/classnames';
import { onMount } from 'svelte'; //import { onMount } from 'svelte';
const backToTop = () => { const backToTop = () => {
window.scrollTo({ top: 0, behavior: 'smooth' }); window.scrollTo({ top: 0, behavior: 'smooth' });
@@ -9,37 +9,37 @@
export let toc: Array<TocItem> = []; export let toc: Array<TocItem> = [];
$: activeIndex = 0; //$: activeIndex = 0;
onMount(() => { // onMount(() => {
const observer = new IntersectionObserver( // const observer = new IntersectionObserver(
(entries) => { // (entries) => {
entries.forEach((entry) => { // entries.forEach((entry) => {
if (entry.isIntersecting) { // if (entry.isIntersecting) {
const index = toc.findIndex((item) => item.href === `#${entry.target.id}`); // const index = toc.findIndex((item) => item.href === `#${entry.target.id}`);
if (index !== -1) { // if (index !== -1) {
activeIndex = index; // activeIndex = index;
} // }
} // }
}); // });
}, // },
{ // {
rootMargin: '0px', // rootMargin: '0px',
threshold: 0.5 // threshold: 0.5
} // }
); // );
toc.forEach((item) => { // toc.forEach((item) => {
const target = document.querySelector(item.href); // const target = document.querySelector(item.href);
if (target) { // if (target) {
observer.observe(target); // observer.observe(target);
} // }
}); // });
return () => { // return () => {
observer.disconnect(); // observer.disconnect();
}; // };
}); // });
</script> </script>
<nav class="sticky top-32 col-span-3 -ml-4 hidden h-[600px] lg:block"> <nav class="sticky top-32 col-span-3 -ml-4 hidden h-[600px] lg:block">
@@ -74,10 +74,10 @@
</li> </li>
{/each} {/each}
</ul> </ul>
<div <!-- <div
class="bg-primary absolute top-0 -left-px h-6 w-px rounded-full transition duration-500 ease-in-out" class="bg-primary absolute top-0 -left-px h-6 w-px rounded-full transition duration-500 ease-in-out"
style:transform={`translateY(${activeIndex * 52}px)`} style:transform={`translateY(${activeIndex * 52}px)`}
/> /> -->
</div> </div>
<button <button