From 41e3f11c37c0facb56e0fd7c218503423a0e91e4 Mon Sep 17 00:00:00 2001
From: moshiur01 <mr.moshiur314@gmail.com>
Date: Fri, 18 Oct 2024 15:52:20 +0600
Subject: [PATCH] Update: Calender component, And Doc Toc.

---
 components/TableOfContent.vue        | 43 +++++++++++++++++++++++++++-
 nuxt.config.ts                       |  4 ---
 src/components/Calender/Calendar.vue |  1 +
 3 files changed, 43 insertions(+), 5 deletions(-)

diff --git a/components/TableOfContent.vue b/components/TableOfContent.vue
index 4b0a2db..f6b24e0 100644
--- a/components/TableOfContent.vue
+++ b/components/TableOfContent.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { ref } from "vue";
+import { onMounted, ref } from "vue";
 
 const { toc } = useContent();
 const activeLink = ref("");
@@ -7,6 +7,47 @@ const activeLink = ref("");
 const setActiveLink = (id: string) => {
   activeLink.value = id;
 };
+
+//handle current active link
+const updateActiveLinkOnScroll = () => {
+  // in doc the heading element is h2
+  const headingElements = Array.from(
+    document?.querySelectorAll<HTMLHeadingElement>("h2[id]"),
+  );
+
+  const scrollTop =
+    document?.documentElement.scrollTop || document?.body.scrollTop;
+
+  headingElements?.forEach((anchor) => {
+    // get anchor tag under the h2 element
+    const link = document?.querySelector<HTMLAnchorElement>(
+      `h2[id="${anchor.id}"] a`,
+    );
+
+    if (link) {
+      link?.classList.remove("active-link");
+    }
+  });
+
+  // Activate the first matching anchor as  scroll
+  for (let i = headingElements?.length; i >= 0; i--) {
+    const singleHeading = headingElements[i];
+    if (scrollTop > singleHeading?.offsetTop - 75) {
+      const link = document?.querySelector<HTMLAnchorElement>(
+        `h2[id="${singleHeading.id}"] a`,
+      );
+      if (link) {
+        setActiveLink(singleHeading.id);
+        link.classList.add("active-link");
+        break;
+      }
+    }
+  }
+};
+
+onMounted(() => {
+  document.addEventListener("scroll", updateActiveLinkOnScroll);
+});
 </script>
 
 <template>
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 7b8415b..9af0876 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -9,10 +9,6 @@ export default defineNuxtConfig({
       Inter: {
         wght: "100..900",
       },
-      // SpaceMono: {
-      //   subsets: "latin",
-      //   wght: ["400"],
-      // },
     },
   },
   postcss: {
diff --git a/src/components/Calender/Calendar.vue b/src/components/Calender/Calendar.vue
index c3e475c..76f8e6b 100644
--- a/src/components/Calender/Calendar.vue
+++ b/src/components/Calender/Calendar.vue
@@ -1,3 +1,4 @@
+<!-- eslint-disable vue/require-default-prop -->
 <script lang="ts" setup>
 import {
   CalendarRoot,