From 331f08ba8f5cd0285cee309af07ffd8d83910b94 Mon Sep 17 00:00:00 2001
From: Arthur DANJOU <arthurdanjou@outlook.fr>
Date: Mon, 26 Feb 2024 14:44:50 +0100
Subject: [PATCH] Change client-only tag position

---
 src/components/header/Header.vue     | 12 ++--
 src/components/main/MainActivity.vue |  8 ++-
 src/components/main/MainStats.vue    | 98 ++++++++++++++--------------
 3 files changed, 59 insertions(+), 59 deletions(-)

diff --git a/src/components/header/Header.vue b/src/components/header/Header.vue
index 185871f..58e93c9 100644
--- a/src/components/header/Header.vue
+++ b/src/components/header/Header.vue
@@ -1,13 +1,11 @@
 <template>
   <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 items-center bg-white dark:bg-zinc-900 border-b border-zinc-100 dark:border-zinc-300/10">
-      <ClientOnly>
-        <Logo />
-        <NavBar />
-        <div class="flex gap-2 items-center">
-          <ThemePicker />
-          <MobileNavBar />
-        </div>
+      <Logo />
+      <NavBar />
+      <ClientOnly fallback-tag="div" class="flex gap-2 items-center">
+        <ThemePicker />
+        <MobileNavBar />
       </ClientOnly>
     </div>
   </header>
diff --git a/src/components/main/MainActivity.vue b/src/components/main/MainActivity.vue
index 7f9c88c..bff6135 100644
--- a/src/components/main/MainActivity.vue
+++ b/src/components/main/MainActivity.vue
@@ -62,9 +62,11 @@ useIntervalFn(async () => await refresh(), 5000)
     </div>
     <template #footer>
       <div class="flex items-center justify-end w-full">
-        <p v-if="codingActivity" class="text-subtitle text-xs w-1/2">
-          Started the {{ formatDate(codingActivity.timestamps.start) }}
-        </p>
+        <ClientOnly>
+          <p v-if="codingActivity" class="text-subtitle text-xs w-1/2">
+            Started the {{ formatDate(codingActivity.timestamps.start) }}
+          </p>
+        </ClientOnly>
         <div class="flex items-center space-x-1 w-1/2 justify-end">
           <p class="text-subtitle text-xs">
             powered by
diff --git a/src/components/main/MainStats.vue b/src/components/main/MainStats.vue
index 9e2e58d..7b7f688 100644
--- a/src/components/main/MainStats.vue
+++ b/src/components/main/MainStats.vue
@@ -10,63 +10,63 @@ const CardUi = {
 </script>
 
 <template>
-  <ClientOnly>
-    <UCard class="flex flex-col justify-between" :ui="CardUi">
-      <div class="flex items-center gap-x-4 h-full">
-        <p
-          class="uppercase tracking-widest text-sm"
-          :style="{ writingMode: 'vertical-rl', textOrientation: 'sideways' }"
-        >
-          STATS
-        </p>
-        <div v-if="stats">
-          <div class="flex gap-4 items-center">
-            <div class="text-md">
-              <div class="flex items-center gap-1">
-                <h3>Total hours:</h3>
-                <p>{{ usePrecision(stats.coding.data.grand_total.total_seconds_including_other_language / 3600, 0) }} hours</p>
-              </div>
-              <div class="flex items-start gap-1 flex-wrap">
-                <h3>Best Editors:</h3>
-                <p>
-                  {{ stats.editors.data.slice(0, 2).map(editor => `${editor.name} (${editor.percent}%)`).join(', ') }}
-                </p>
-              </div>
-              <div class="flex items-center gap-1">
-                <h3>Best OS:</h3>
-                <p>{{ stats.os.data[0].name }} with {{ stats.os.data[0].percent }}%</p>
-              </div>
-              <div class="flex items-start gap-1 flex-wrap">
-                <h3>Top languages:</h3>
-                <p>{{ stats.languages.data.slice(0, 2).map(language => `${language.name} (${language.percent}%)`).join(', ') }}</p>
-              </div>
+  <UCard class="flex flex-col justify-between" :ui="CardUi">
+    <div class="flex items-center gap-x-4 h-full">
+      <p
+        class="uppercase tracking-widest text-sm"
+        :style="{ writingMode: 'vertical-rl', textOrientation: 'sideways' }"
+      >
+        STATS
+      </p>
+      <div v-if="stats">
+        <div class="flex gap-4 items-center">
+          <div class="text-md">
+            <div class="flex items-center gap-1">
+              <h3>Total hours:</h3>
+              <p>{{ usePrecision(stats.coding.data.grand_total.total_seconds_including_other_language / 3600, 0) }} hours</p>
+            </div>
+            <div class="flex items-start gap-1 flex-wrap">
+              <h3>Best Editors:</h3>
+              <p>
+                {{ stats.editors.data.slice(0, 2).map(editor => `${editor.name} (${editor.percent}%)`).join(', ') }}
+              </p>
+            </div>
+            <div class="flex items-center gap-1">
+              <h3>Best OS:</h3>
+              <p>{{ stats.os.data[0].name }} with {{ stats.os.data[0].percent }}%</p>
+            </div>
+            <div class="flex items-start gap-1 flex-wrap">
+              <h3>Top languages:</h3>
+              <p>{{ stats.languages.data.slice(0, 2).map(language => `${language.name} (${language.percent}%)`).join(', ') }}</p>
             </div>
           </div>
         </div>
       </div>
-      <template #footer>
-        <div class="flex items-center justify-between">
+    </div>
+    <template #footer>
+      <div class="flex items-center justify-between">
+        <ClientOnly>
           <p v-if="stats" class="text-subtitle text-xs w-1/2">
             Started {{ useTimeAgo(new Date(stats.coding.data.range.start)).value }}, the {{ useDateFormat(new Date(stats.coding.data.range.start), 'Do MMMM YYYY').value }}
           </p>
-          <div class="flex items-center justify-end space-x-1">
-            <p class="text-subtitle text-xs">
-              powered by
-            </p>
-            <UButton
-              size="xs"
-              :padded="false"
-              variant="link"
-              to="https://wakatime.com/"
-              target="_blank"
-              label="Wakatime"
-            />
-            <UIcon name="i-jam-thunder" class="text-subtitle" />
-          </div>
+        </ClientOnly>
+        <div class="flex items-center justify-end space-x-1">
+          <p class="text-subtitle text-xs">
+            powered by
+          </p>
+          <UButton
+            size="xs"
+            :padded="false"
+            variant="link"
+            to="https://wakatime.com/"
+            target="_blank"
+            label="Wakatime"
+          />
+          <UIcon name="i-jam-thunder" class="text-subtitle" />
         </div>
-      </template>
-    </UCard>
-  </ClientOnly>
+      </div>
+    </template>
+  </UCard>
 </template>
 
 <style>