diff --git a/app/app.vue b/app/app.vue index 1f2b208..24542da 100644 --- a/app/app.vue +++ b/app/app.vue @@ -29,6 +29,7 @@ const bgStyle = computed(() => +
-import { formatDate } from "~/utils/helper"; interface Props { title?: string; image?: string; @@ -26,7 +25,7 @@ withDefaults(defineProps(), {
- {{ formatDate(date) }} + {{ date }}
diff --git a/app/components/blog/Toc.vue b/app/components/blog/Toc.vue index 9c6bf09..186443f 100644 --- a/app/components/blog/Toc.vue +++ b/app/components/blog/Toc.vue @@ -2,10 +2,27 @@ const { path } = useRoute(); const articles = await queryCollection("content").path(path).first(); -const links = articles?.body?.toc?.links || []; +interface TocLink { + id: string; + text: string; + children?: TocLink[]; +} + +const links = (articles?.body?.toc?.links || []) as TocLink[]; const activeId = ref(""); +const flattenLinks = (links: TocLink[]) => { + let flat: TocLink[] = []; + links.forEach((link) => { + flat.push(link); + if (link.children) { + flat = flat.concat(flattenLinks(link.children)); + } + }); + return flat; +}; + onMounted(() => { const observer = new IntersectionObserver( (entries) => { @@ -18,7 +35,7 @@ onMounted(() => { { rootMargin: "-100px 0% -80% 0%" }, ); - links.forEach((link) => { + flattenLinks(links).forEach((link) => { const el = document.getElementById(link.id); if (el) observer.observe(el); }); @@ -37,18 +54,48 @@ onMounted(() => { Table Of Content
diff --git a/app/components/blog/card.vue b/app/components/blog/card.vue index 8723d4d..53300b7 100644 --- a/app/components/blog/card.vue +++ b/app/components/blog/card.vue @@ -1,14 +1,13 @@ diff --git a/app/components/main/SocialLinks.vue b/app/components/main/SocialLinks.vue index ecffa95..54b829f 100644 --- a/app/components/main/SocialLinks.vue +++ b/app/components/main/SocialLinks.vue @@ -4,7 +4,7 @@