StaticMania · kausarpial · Oct 23, 2024 · Oct 18, 2024 · Oct 18, 2024 · Oct 18, 2024
diff --git a/README.md b/README.md
diff --git a/components/TableOfContent.vue b/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>

diff --git a/components/ThemeSwitcher.vue b/components/ThemeSwitcher.vue
@@ -13,8 +13,11 @@ const toggleTheme = () => {
     <Button
       class="rounded-lg border border-metal-100 bg-white p-2.5 transition-all duration-300 hover:bg-metal-25 dark:border-metal-800 dark:bg-metal-900 dark:hover:border-metal-600 dark:hover:bg-metal-900"
       @click="() => toggleTheme()">
-      <PhosphorIconMoon v-if="colorMode.preference === 'dark'" :size="21" />
-      <PhosphorIconSunDim v-else color="black" :size="21" />
+      <PhosphorIconMoon
+        v-if="colorMode.preference === 'dark'"
+        v-motion-slide-top
+        :size="21" />
+      <PhosphorIconSunDim v-else v-motion-slide-top color="black" :size="21" />
     </Button>
   </ClientOnly>
 </template>
diff --git a/components/content/CodeHighlight.vue b/components/content/CodeHighlight.vue
@@ -1,6 +1,5 @@
 <script lang="ts" setup>
 import { computed, type HTMLAttributes } from "vue";
-import { useCopy } from "~/hooks/UseCopy";
 import { Toast } from "~/src";
 import { cn } from "~/src/utils/cn";
 import type { ClassProps } from "~/src/utils/interface";
@@ -15,15 +14,17 @@ interface CodeHighlightWithPreviewProps
 const props = defineProps<CodeHighlightWithPreviewProps & ClassProps>();
 
 const codeType = ref(0);
-const { copy, copyToClipboard } = useCopy();
+const { copied, copy } = useClipboard({
+  copiedDuring: 3000,
+});
 
 const restProps = computed(() => {
   const { class: _, code, ...rest } = props;
   return rest;
 });
 
 const handleCopy = (code: object, codeType: number): void => {
-  copyToClipboard(Object.values(code)[codeType]);
+  copy(Object.values(code)[codeType]);
   Toast.success("Copied to clipboard");
 };
 </script>
@@ -55,7 +56,7 @@ const handleCopy = (code: object, codeType: number): void => {
       <div>
         <button class="mx-6 my-2.5" @click="() => handleCopy(code, codeType)">
           <PhosphorIconCheck
-            v-if="copy"
+            v-if="copied"
             :size="20"
             weight="light"
             color="#fff" />

diff --git a/components/content/CodeHighlightWithPreview.vue b/components/content/CodeHighlightWithPreview.vue
@@ -1,6 +1,5 @@
 <script lang="ts" setup>
 import { computed, ref, type HTMLAttributes } from "vue";
-import { useCopy } from "~/hooks/UseCopy";
 import { Toast } from "~/src";
 import { cn } from "~/src/utils/cn";
 import type { ClassProps } from "~/src/utils/interface";
@@ -16,17 +15,16 @@ interface CodeHighlightWithPreviewProps
 const props = defineProps<CodeHighlightWithPreviewProps & ClassProps>();
 const active = ref(props.activeTab ?? 0);
 
-const { copy, copyToClipboard } = useCopy();
-
+const { copied, copy } = useClipboard({
+  copiedDuring: 3000,
+});
 const restProps = computed(() => {
   const { class: _, activeTab, code, ...rest } = props;
   return rest;
 });
 
 const handleCopy = (code: object) => {
-  copyToClipboard(
-    Object.values(code)[active.value === 0 ? 0 : active.value - 1],
-  );
+  copy(Object.values(code)[active.value === 0 ? 0 : active.value - 1]);
   Toast.success("Copied to clipboard");
 };
 </script>
@@ -76,7 +74,7 @@ const handleCopy = (code: object) => {
       <div>
         <button class="mx-6 my-2.5" @click="() => handleCopy(code)">
           <PhosphorIconCheck
-            v-if="copy"
+            v-if="copied"
             :size="20"
             weight="light"
             color="#fff" />

diff --git a/hooks/UseCopy.ts b/hooks/UseCopy.ts
diff --git 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: {
@@ -57,5 +53,6 @@ export default defineNuxtConfig({
     "nuxt-shiki",
     "@nuxtjs/color-mode",
     "nuxt-phosphor-icons",
+    "@vueuse/motion/nuxt",
   ],
 });
diff --git a/package.json b/package.json
@@ -15,6 +15,7 @@
   },
   "dependencies": {
     "@vueuse/core": "^11.0.1",
+    "@vueuse/motion": "^2.2.6",
     "chart.js": "^4.4.3",
     "clsx": "^2.1.1",
     "deepmerge": "^4.3.1",
@@ -38,6 +39,10 @@
     "src/**/*.{ts,js,vue,css,}": [
       "npm run lint",
       "npm run format"
+    ],
+    "components/**/*.{ts,js,vue,css,}": [
+      "npm run lint",
+      "npm run format"
     ]
   },
   "devDependencies": {

diff --git 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,

diff --git a/yarn.lock b/yarn.lock
@@ -1213,7 +1213,7 @@
     unimport "^3.9.0"
     untyped "^1.4.2"
 
-"@nuxt/kit@^3.13.1":
+"@nuxt/kit@^3.13.0", "@nuxt/kit@^3.13.1":
   version "3.13.2"
   resolved "https://registry.npmjs.org/@nuxt/kit/-/kit-3.13.2.tgz"
   integrity sha512-KvRw21zU//wdz25IeE1E5m/aFSzhJloBRAQtv+evcFeZvuroIxpIQuUqhbzuwznaUwpiWbmwlcsp5uOWmi4vwA==
@@ -2600,7 +2600,7 @@
   resolved "https://registry.npmjs.org/@vue/shared/-/shared-3.4.30.tgz"
   integrity sha512-CLg+f8RQCHQnKvuHY9adMsMaQOcqclh6Z5V9TaoMgy0ut0tz848joZ7/CYFFyF/yZ5i2yaw7Fn498C+CNZVHIg==
 
-"@vueuse/core@10.11.1", "@vueuse/core@^10.11.0", "@vueuse/core@^10.8.0":
+"@vueuse/core@10.11.1", "@vueuse/core@^10.10.0", "@vueuse/core@^10.11.0", "@vueuse/core@^10.8.0":
   version "10.11.1"
   resolved "https://registry.npmjs.org/@vueuse/core/-/core-10.11.1.tgz"
   integrity sha512-guoy26JQktXPcz+0n3GukWIy/JDNKti9v6VEMu6kV2sYBsWuGiTU8OWdg+ADfUbHg3/3DlqySDe7JmdHrktiww==
@@ -2640,6 +2640,20 @@
   resolved "https://registry.npmjs.org/@vueuse/metadata/-/metadata-11.0.1.tgz"
   integrity sha512-dTFvuHFAjLYOiSd+t9Sk7xUiuL6jbfay/eX+g+jaipXXlwKur2VCqBCZX+jfu+2vROUGcUsdn3fJR9KkpadIOg==
 
+"@vueuse/motion@^2.2.6":
+  version "2.2.6"
+  resolved "https://registry.yarnpkg.com/@vueuse/motion/-/motion-2.2.6.tgz#26fe7b1f3aefd8159fdfbc1ce32dffa27296946c"
+  integrity sha512-gKFktPtrdypSv44SaW1oBJKLBiP6kE5NcoQ6RsAU3InemESdiAutgQncfPe/rhLSLCtL4jTAhMmFfxoR6gm5LQ==
+  dependencies:
+    "@vueuse/core" "^10.10.0"
+    "@vueuse/shared" "^10.10.0"
+    csstype "^3.1.3"
+    framesync "^6.1.2"
+    popmotion "^11.0.5"
+    style-value-types "^5.1.2"
+  optionalDependencies:
+    "@nuxt/kit" "^3.13.0"
+
 "@vueuse/nuxt@^10.11.0":
   version "10.11.1"
   resolved "https://registry.npmjs.org/@vueuse/nuxt/-/nuxt-10.11.1.tgz"
@@ -2662,7 +2676,7 @@
     local-pkg "^0.5.0"
     vue-demi ">=0.14.10"
 
-"@vueuse/shared@10.11.1", "@vueuse/shared@^10.11.0":
+"@vueuse/shared@10.11.1", "@vueuse/shared@^10.10.0", "@vueuse/shared@^10.11.0":
   version "10.11.1"
   resolved "https://registry.npmjs.org/@vueuse/shared/-/shared-10.11.1.tgz"
   integrity sha512-LHpC8711VFZlDaYUXEBbFBCQ7GS3dVU9mjOhhMhXP6txTV4EhYQg/KGnQuvt/sPAtoUKq7VVUnL6mVtFoL42sA==
@@ -4565,6 +4579,13 @@ fraction.js@^4.3.7:
   resolved "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.7.tgz"
   integrity sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==
 
+framesync@6.1.2, framesync@^6.1.2:
+  version "6.1.2"
+  resolved "https://registry.yarnpkg.com/framesync/-/framesync-6.1.2.tgz#755eff2fb5b8f3b4d2b266dd18121b300aefea27"
+  integrity sha512-jBTqhX6KaQVDyus8muwZbBeGGP0XgujBRbQ7gM7BRdS3CadCZIHiawyzYLnafYcvZIh5j8WE7cxZKFn7dXhu9g==
+  dependencies:
+    tslib "2.4.0"
+
 fresh@0.5.2:
   version "0.5.2"
   resolved "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz"
@@ -4971,6 +4992,11 @@ he@^1.2.0:
   resolved "https://registry.npmjs.org/he/-/he-1.2.0.tgz"
   integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==
 
+hey-listen@^1.0.8:
+  version "1.0.8"
+  resolved "https://registry.yarnpkg.com/hey-listen/-/hey-listen-1.0.8.tgz#8e59561ff724908de1aa924ed6ecc84a56a9aa68"
+  integrity sha512-COpmrF2NOg4TBWUJ5UVyaCU2A88wEMkUPK4hNqyCkqHbxT92BbvfjoSozkAIIm6XhicGlJHhFdullInrdhwU8Q==
+
 highlight.js@^11.10.0:
   version "11.10.0"
   resolved "https://registry.npmjs.org/highlight.js/-/highlight.js-11.10.0.tgz"
@@ -7226,6 +7252,16 @@ pluralize@^8.0.0:
   resolved "https://registry.npmjs.org/pluralize/-/pluralize-8.0.0.tgz"
   integrity sha512-Nc3IT5yHzflTfbjgqWcCPpo7DaKy4FnpB0l/zCAW0Tc7jxAiuqSxHasntB3D7887LSrA93kDJ9IXovxJYxyLCA==
 
+popmotion@^11.0.5:
+  version "11.0.5"
+  resolved "https://registry.yarnpkg.com/popmotion/-/popmotion-11.0.5.tgz#8e3e014421a0ffa30ecd722564fd2558954e1f7d"
+  integrity sha512-la8gPM1WYeFznb/JqF4GiTkRRPZsfaj2+kCxqQgr2MJylMmIKUwBfWW8Wa5fml/8gmtlD5yI01MP1QCZPWmppA==
+  dependencies:
+    framesync "6.1.2"
+    hey-listen "^1.0.8"
+    style-value-types "5.1.2"
+    tslib "2.4.0"
+
 postcss-calc@^10.0.0:
   version "10.0.0"
   resolved "https://registry.npmjs.org/postcss-calc/-/postcss-calc-10.0.0.tgz"
@@ -8577,6 +8613,14 @@ strip-literal@^2.1.0:
   dependencies:
     js-tokens "^9.0.0"
 
+style-value-types@5.1.2, style-value-types@^5.1.2:
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/style-value-types/-/style-value-types-5.1.2.tgz#6be66b237bd546048a764883528072ed95713b62"
+  integrity sha512-Vs9fNreYF9j6W2VvuDTP7kepALi7sk0xtk2Tu8Yxi9UoajJdEVpNpCov0HsLTqXvNGKX+Uv09pkozVITi1jf3Q==
+  dependencies:
+    hey-listen "^1.0.8"
+    tslib "2.4.0"
+
 stylehacks@^7.0.2:
   version "7.0.2"
   resolved "https://registry.npmjs.org/stylehacks/-/stylehacks-7.0.2.tgz"
@@ -8858,6 +8902,11 @@ tsc-alias@^1.8.10:
     normalize-path "^3.0.0"
     plimit-lit "^1.2.6"
 
+tslib@2.4.0:
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.4.0.tgz#7cecaa7f073ce680a05847aa77be941098f36dc3"
+  integrity sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==
+
 tslib@^2.0.0, tslib@^2.0.3, tslib@^2.4.0, tslib@^2.6.2:
   version "2.6.3"
   resolved "https://registry.npmjs.org/tslib/-/tslib-2.6.3.tgz"