Remove VueClid and change loading color bar

package.json

@@ -13,7 +13,6 @@
     "lint:fix": "eslint . --fix"
   },
   "dependencies": {
-    "@ksassnowski/vueclid": "1.1.1",
     "@nuxt/content": "2.12.0",
     "@nuxt/ui": "2.14.1",
     "@pinia/nuxt": "0.5.1",

src/components/main/MainMaths.vue

@@ -1,95 +0,0 @@
-<script lang="ts" setup>
-import { Circle, FunctionPlot, Graph, Label, Line, Point, Vector } from '@ksassnowski/vueclid'
-
-const angle = ref(45)
-const time = ref(0)
-useIntervalFn(() => {
-  angle.value = angle.value === 1 ? 0 : angle.value + 0.01
-  time.value += 0.1
-}, 10)
-</script>
-
-<template>
-  <ClientOnly>
-    <section class="flex flex-col md:flex-row items-center justify-center gap-5 overflow-hidden py-4 sm:gap-8 mb-16">
-      <div>
-        <Graph :domain-x="[-3, 3]" :domain-y="[-3, 3]">
-          <FunctionPlot
-            :function="(x) => Math.cos(x)"
-            :line-width="2"
-            animated
-            color="hotpink"
-          />
-          <Label text="cos(x)" color="hotpink" :position="[2, -0.5]" size="small" />
-          <FunctionPlot
-            :function="(x) => Math.sin(x)"
-            :line-width="2"
-            animated
-            color="#33aabb"
-          />
-          <Label text="sin(x)" color="#33aabb" :position="[2, 1]" size="small" />
-          <FunctionPlot
-            :function="(x) => Math.exp(x)"
-            :line-width="2"
-            animated
-          />
-          <Label text="exp(x)" :position="[0.7, 2]" size="small" />
-          <FunctionPlot
-            :function="(x) => Math.log(x)"
-            :domain="[0.001, 4]"
-            :line-width="2"
-            animated
-            color="limegreen"
-          />
-          <Label text="ln(x)" color="limegreen" :position="[0.2, -2]" size="small" />
-          <FunctionPlot
-            :function="(x) => -x"
-            :domain="[-3, 0]"
-            :line-width="2"
-            animated
-            color="orange"
-          />
-          <FunctionPlot
-            :function="(x) => x"
-            :domain="[0, 3]"
-            :line-width="2"
-            animated
-            color="orange"
-          />
-          <Label text="|x|" color="orange" :position="[-2, 2]" size="small" />
-        </Graph>
-      </div>
-      <div>
-        <Graph
-          :domain-x="[-2, 2]"
-          :domain-y="[-2, 2]"
-        >
-          <Circle :radius="1" color="#aaa" />
-          <Vector :to="[Math.cos(angle), Math.sin(angle)]" />
-          <Line
-            :from="[Math.cos(angle), 0]"
-            :to="[Math.cos(angle), Math.sin(angle)]"
-            :line-width="1.5"
-            color="hotpink"
-            dashed
-          />
-          <Line
-            :from="[0, Math.sin(angle)]"
-            :to="[Math.cos(angle), Math.sin(angle)]"
-            :line-width="1.5"
-            color="#33aabb"
-            dashed
-          />
-          <Point :position="[Math.cos(angle), Math.sin(angle)]" label="M" />
-          <Point :position="[Math.cos(angle), 0]" color="hotpink" label="cos(x)" />
-          <Point
-            :position="[0, Math.sin(angle)]"
-            color="#33aabb"
-            label="sin(x)"
-            label-position="top"
-          />
-        </Graph>
-      </div>
-    </section>
-  </ClientOnly>
-</template>

src/layouts/default.vue

@@ -1,25 +1,17 @@
 <script setup lang="ts">
 import { SpeedInsights } from '@vercel/speed-insights/nuxt'
 
-import { configureGraphs } from '@ksassnowski/vueclid'
-
-const appConfig = useAppConfig()
-
 const router = useRouter()
 router.afterEach((route) => {
   useCookie('last-route', { path: '/', default: () => '/' }).value = route.fullPath
 })
-
-const colorMode = useColorMode()
-watch(colorMode, () => configureGraphs({ darkMode: colorMode.value === 'dark' }))
-onMounted(() => configureGraphs({ darkMode: colorMode.value === 'dark' }))
 </script>
 
 <template>
   <div>
     <SpeedInsights />
     <Background />
-    <NuxtLoadingIndicator :color="appConfig.ui.primary" />
+    <NuxtLoadingIndicator :color="$colorMode.value === 'light' ? 'black' : 'white'" />
     <section class="fixed inset-0 flex justify-center sm:px-8">
       <div class="flex w-full max-w-7xl">
         <div class="w-full z-20 bg-white ring-1 ring-zinc-100 dark:bg-zinc-900 dark:ring-zinc-300/20" />

src/pages/index.vue

@@ -12,6 +12,5 @@ useHead({
       <MainActivity />
       <MainStats />
     </div>
-    <MainMaths />
   </section>
 </template>

yarn.lock

@@ -1089,11 +1089,6 @@
     methods "^1.1.2"
     path-to-regexp "^6.2.1"
 
-"@ksassnowski/vueclid@1.1.1":
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/@ksassnowski/vueclid/-/vueclid-1.1.1.tgz#e7423836d49b2ecb2541ea755f37408388c2d62d"
-  integrity sha512-dOHXkGfNE3/g+wvAB8PoS2qEFc2Cibn1sQIPFUlBLNgek0UxOvIAdsvSK8vsB6irwvszZrecN4eQnFTmpdTCAQ==
-
 "@kwsites/file-exists@^1.1.1":
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/@kwsites/file-exists/-/file-exists-1.1.1.tgz#ad1efcac13e1987d8dbaf235ef3be5b0d96faa99"