Fix nuxt error and working

src/components/Footer.vue

@@ -3,21 +3,23 @@ const year = computed(() => new Date().getFullYear())
 </script>
 
 <template>
-  <footer class="w-container flex justify-between py-4 bg-white dark:bg-zinc-900 border-t border-zinc-100 dark:border-zinc-300/10">
-    <div class="w-full duration-300 text-center flex flex-col md:flex-row md:justify-between items-center gap-y-2">
-      <p class="text-subtitle text-sm">
-        © {{ year }} ArtDanjProduction
-      </p>
-      <div class="flex items-center">
-        <p class="text-subtitle">
-          Designed & Built by
+  <footer class="w-full flex justify-center">
+    <div class="w-full px-4 sm:px-6 lg:px-8 sm:mx-8 max-w-7xl py-4 flex justify-between bg-white dark:bg-zinc-900 border-t border-zinc-100 dark:border-zinc-300/10">
+      <div class="w-full duration-300 text-center flex flex-col md:flex-row md:justify-between items-center gap-y-2">
+        <p class="text-subtitle text-sm">
+          © {{ year }} ArtDanjProduction
+        </p>
+        <div class="flex items-center">
+          <p class="text-subtitle">
+            Designed & Built by
+          </p>
+          <UButton variant="link" color="primary" label="Arthur Danjou" to="https://twitter.com/arthurdanj" target="_blank" />
+        </div>
+        <p class="text-subtitle flex items-center">
+          Made with
+          <UButton variant="link" color="green" label="Nuxt 3" to="https://nuxt.com/" target="_blank" icon="i-vscode-icons-file-type-nuxt" trailing />
         </p>
-        <UButton variant="link" color="primary" label="Arthur Danjou" to="https://twitter.com/arthurdanj" target="_blank" />
       </div>
-      <p class="text-subtitle flex items-center">
-        Made with
-        <UButton variant="link" color="green" label="Nuxt 3" to="https://nuxt.com/" target="_blank" icon="i-vscode-icons-file-type-nuxt" trailing />
-      </p>
     </div>
   </footer>
 </template>

src/components/content/UsesSection.vue

@@ -8,15 +8,13 @@ defineProps({
 
 const appConfig = useAppConfig()
 
-function getColor() {
-  return `text-${appConfig.ui.primary}-500`
-}
+const getColor = computed(() => `text-${appConfig.ui.primary}-500`)
 </script>
 
 <template>
   <section class="md:border-l md:border-zinc-100 md:pl-6 md:dark:border-zinc-700/40 mb-24">
     <div class="grid max-w-3xl grid-cols-1 items-baseline gap-y-8 md:grid-cols-4">
-      <h2 class="text-sm font-semibold" :class="getColor()">
+      <h2 class="text-sm font-semibold" :class="getColor">
         {{ title }}
       </h2>
       <div class="md:col-span-3">

src/components/header/ColorPicker.vue

@@ -4,7 +4,7 @@ import { ColorsTheme } from '~~/types'
 
 const colors = Object.values(ColorsTheme)
 
-const { setColor, getColor } = useColorStore()
+const { getColor, setColor } = useColorStore()
 </script>
 
 <template>

src/components/header/Header.vue

@@ -1,6 +1,6 @@
 <template>
-  <header class="z-30 sticky top-0 left-0 w-container bg-white dark:bg-zinc-900 border-b border-zinc-100 dark:border-zinc-300/10">
-    <div class="mx-auto px-4 sm:px-6 lg:px-8 max-w-7xl py-4 flex justify-between">
+  <header class="z-30 sticky top-0 left-0 flex justify-center w-full">
+    <div class="w-full px-4 sm:px-6 lg:px-8 sm:mx-8 max-w-7xl py-4 flex justify-between bg-white dark:bg-zinc-900 border-b border-zinc-100 dark:border-zinc-300/10">
       <Logo />
       <NavBar />
       <div class="flex gap-2">

src/layouts/default.vue

@@ -1,5 +1,6 @@
 <template>
   <CommandPalette />
+  <NuxtLoadingIndicator />
   <section class="fixed inset-0 flex justify-center sm:px-8">
     <div class="flex w-full max-w-7xl">
       <div class="w-full bg-white ring-1 ring-zinc-100 dark:bg-zinc-900 dark:ring-zinc-300/20" />

src/pages/uses.vue

@@ -13,10 +13,15 @@ useHead({
       <p class="leading-relaxed text-subtitle">
         I get often asked what I use to create software, to play games or to work and learn. Here's a big list of all my favourite things.
       </p>
-      <ContentDoc
-        class="my-16"
-        path="/uses"
-      />
+      <ClientOnly>
+        <ContentDoc
+          class="my-16"
+          path="/uses"
+        />
+        <template #fallback>
+          <p class="my-16 text-subtitle">The content of the page is loading...</p>
+        </template>
+      </ClientOnly>
     </div>
   </div>
 </template>

src/server/trpc/routers/index.ts

@@ -1,7 +1,7 @@
-import announcement from './announcement'
-import maintenance from './maintenance'
-import talents from './talents'
-import post from './post'
+import announcement from '~/server/trpc/routers/announcement'
+import maintenance from '~/server/trpc/routers/maintenance'
+import talents from '~/server/trpc/routers/talents'
+import post from '~/server/trpc/routers/post'
 import { router } from '~/server/trpc/trpc'
 
 export const appRouter = router({