Merge pull request #73 from botmaster/chore/no-ref/upgrade-nuxt

chore/no-ref/upgrade-nuxt

.vscode/settings.json

@@ -43,5 +43,6 @@
     "jsonc",
     "yaml",
     "toml"
-  ]
+  ],
+  "typescript.tsdk": "node_modules/typescript/lib"
 }

package.json

@@ -24,25 +24,25 @@
     "splitting": "^1.0.6"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "^2.6.2",
+    "@antfu/eslint-config": "^2.6.3",
     "@eslint/eslintrc": "^3.0.0",
     "@nuxt/content": "^2.10.0",
     "@nuxt/devtools": "^1.0.8",
     "@nuxtjs/color-mode": "^3.3.2",
     "@nuxtjs/eslint-config-typescript": "^12.1.0",
     "@nuxtjs/fontaine": "^0.4.1",
     "@nuxtjs/i18n": "^8.0.0",
-    "@nuxtjs/sitemap": "^5.0.2",
+    "@nuxtjs/sitemap": "^5.0.4",
     "@nuxtjs/tailwindcss": "^6.10.4",
-    "@types/node": "^20.10.8",
+    "@types/node": "^20.11.5",
     "@types/splitting": "^1.0.5",
     "@types/uuid": "^9.0.7",
-    "@typescript-eslint/parser": "^6.18.1",
+    "@typescript-eslint/parser": "^6.19.0",
     "eslint": "^8.56.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.1.3",
     "eslint-plugin-tailwindcss": "^3.14.0",
-    "nuxt": "^3.9.1",
+    "nuxt": "^3.9.3",
     "nuxt-headlessui": "^1.1.5",
     "nuxt-icon": "^0.6.8",
     "nuxt-simple-robots": "4.0.0-rc.11",

pages/about.vue

@@ -22,8 +22,8 @@ const { data } = await useAsyncData(`about-${currentLocale.value}`, () =>
       return data;
     }));
 
-if (data)
-  useContentHead(data as any); // TODO: fix type
+if (data?.value)
+  useContentHead(data as Ref<IPage>);
 
 const dependencies = computed(() => {
   const merged = {

pages/index.vue

@@ -12,35 +12,13 @@ const { data } = await useAsyncData(`home-${currentLocale.value}`, () =>
     .where({ _locale: currentLocale.value, _path: '/' })
     .findOne());
 
-if (data)
-  useContentHead(data as any); // TODO: fix type
+if (data?.value)
+  useContentHead(data as Ref<IPage>);
 
 // Animation setup
 const contextScope = ref<HTMLElement | null>(null);
 let ctx: gsap.Context;
 
-const colorMode = useColorMode();
-
-// map of color mode colors
-const colors: { [key: string]: string[] } = {
-  light: [],
-  dark: [],
-};
-
-const colorMap = ref(['']);
-
-// WatchEffect
-watchEffect(
-  () => {
-    if (!process.client)
-      return;
-    colorMap.value = colors[colorMode.value] || [];
-  },
-  { flush: 'post' },
-);
-
-const isClient = computed(() => process.client);
-
 onMounted(() => {
   if (!process.client)
     return;
@@ -104,11 +82,6 @@ onUnmounted(() => {
       <section
         v-for="(element, index) in data?.body?.children"
         :key="index"
-        :style="
-          isClient
-            ? `background-color: hsl(var(${colorMap[index % colorMap.length]}))`
-            : ''
-        "
         class="page-index__content-wrapper"
       >
         <div class="container mx-auto">

pages/lab.vue

@@ -18,8 +18,8 @@ const { data: contentData } = await useAsyncData(`lab-${currentLocale.value}`, (
     .where({ _locale: currentLocale.value, _path: '/lab' })
     .findOne());
 
-if (contentData)
-  useContentHead(contentData as any); // TODO: fix type
+if (contentData?.value)
+  useContentHead(contentData as Ref<IPage>);
 
 // Fetch Last.fm data
 const page = ref(1);