chore(docs): add transition to banner numbers

Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>

docs/components/home/Banner.vue

@@ -3,15 +3,30 @@ import { $fetch } from 'ohmyfetch'
 import Star from '~icons/carbon/star'
 import Download from '~icons/carbon/download'
 
-const githubData = ref()
+const starGazersCount = ref(0)
 
-$fetch('https://api.github.com/repos/bcakmakoglu/vue-flow?page=$i&per_page=100').then((data) => {
-  githubData.value = data
+const downloadCount = ref(0)
+
+const starGazersCountTransitioned = useTransition(starGazersCount, {
+  duration: 1000,
+  transition: (n) => {
+    return n === 0 ? 0 : n === 1 ? 1 : 2 ** (-10 * n) * Math.sin((n * 10 - 0.75) * ((2 * Math.PI) / 3)) + 1
+  },
+})
+
+const downloadCountTransitioned = useTransition(downloadCount, {
+  duration: 1000,
+  transition: (n) => {
+    return n === 0 ? 0 : n === 1 ? 1 : 2 ** (-10 * n) * Math.sin((n * 10 - 0.75) * ((2 * Math.PI) / 3)) + 1
+  },
+})
+
+$fetch('https://api.github.com/repos/bcakmakoglu/vue-flow?page=$i&per_page=100').then((data) => {
+  starGazersCount.value = data.stargazers_count
 })
 
-const npmData = ref()
 $fetch('https://api.npmjs.org/downloads/point/last-month/@vue-flow/core').then((data) => {
-  npmData.value = data
+  downloadCount.value = data.downloads
 })
 </script>
 
@@ -21,17 +36,19 @@ $fetch('https://api.npmjs.org/downloads/point/last-month/@vue-flow/core').then((
       <div class="grid md:grid-cols-3 gap-3 text-center <md:divide-y md:divide-x dark:divide-white divide-black">
         <div class="grid grid-rows-auto gap-2 py-4 md:py-0">
           <div class="text-gray-400 font-semibold text-lg">Stargazers</div>
-          <div class="font-bold text-3xl flex gap-2 items-center justify-center"><Star /> {{ githubData?.stargazers_count }}</div>
+          <div class="font-bold text-3xl flex gap-2 items-center justify-center">
+            <Star /> {{ Math.floor(starGazersCountTransitioned) }}
+          </div>
         </div>
         <div class="grid grid-rows-2 gap-2 py-4 md:py-0">
           <div class="text-gray-400 font-semibold text-lg">Downloads (last month)</div>
-          <div class="font-bold text-3xl flex gap-2 items-center justify-center"><Download /> {{ npmData?.downloads }}</div>
+          <div class="font-bold text-3xl flex gap-2 items-center justify-center">
+            <Download /> {{ Math.floor(downloadCountTransitioned) }}
+          </div>
         </div>
         <div class="grid grid-rows-2 gap-2 py-4 md:py-0">
           <div class="text-gray-400 font-semibold text-lg">License</div>
-          <div class="font-bold text-3xl">
-            {{ githubData?.license.key.toUpperCase() }}
-          </div>
+          <div class="font-bold text-3xl">MIT</div>
         </div>
       </div>
     </div>

docs/src/custom.d.ts

@@ -1 +1,13 @@
 declare const __ANALYTICS_ID__: string
+
+declare module 'virtual:icons/*' {
+  import type { FunctionalComponent, SVGAttributes } from 'vue'
+  const component: FunctionalComponent<SVGAttributes>
+  export default component
+}
+
+declare module '~icons/*' {
+  import type { FunctionalComponent, SVGAttributes } from 'vue'
+  const component: FunctionalComponent<SVGAttributes>
+  export default component
+}