Update: Calender component, And Doc Toc.

components/TableOfContent.vue

@@ -1,12 +1,53 @@
 <script lang="ts" setup>
-import { ref } from "vue";
+import { onMounted, ref } from "vue";
 
 const { toc } = useContent();
 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>

nuxt.config.ts

@@ -9,10 +9,6 @@ export default defineNuxtConfig({
       Inter: {
         wght: "100..900",
       },
-      // SpaceMono: {
-      //   subsets: "latin",
-      //   wght: ["400"],
-      // },
     },
   },
   postcss: {

src/components/Calender/Calendar.vue

@@ -1,3 +1,4 @@
+<!-- eslint-disable vue/require-default-prop -->
 <script lang="ts" setup>
 import {
   CalendarRoot,