From 22ceeab986334480bc3489526932a964176cae63 Mon Sep 17 00:00:00 2001
From: Arthur DANJOU <arthurdanjou@outlook.fr>
Date: Sun, 25 Feb 2024 15:57:56 +0100
Subject: [PATCH] Add type

---
 src/components/main/MainActivity.vue |  10 +--
 src/components/main/MainStats.vue    | 104 ++++++++++++++-------------
 types.ts                             |  45 ++++++++++--
 3 files changed, 101 insertions(+), 58 deletions(-)

diff --git a/src/components/main/MainActivity.vue b/src/components/main/MainActivity.vue
index 1cefa24..7f9c88c 100644
--- a/src/components/main/MainActivity.vue
+++ b/src/components/main/MainActivity.vue
@@ -1,8 +1,10 @@
 <script lang="ts" setup>
-const { data: activity, refresh } = await useAsyncData('activity', () => $fetch('/api/activity'))
-const codingActivity = computed(() => activity.value.data.activities.filter(activity => activity.name === 'Visual Studio Code')[0])
+import type { Activity } from '~~/types'
 
-function formatDate(date) {
+const { data: activity, refresh } = await useAsyncData<Activity>('activity', () => $fetch('/api/activity'))
+const codingActivity = computed(() => activity.value!.data.activities.filter(activity => activity.name === 'Visual Studio Code')[0])
+
+function formatDate(date: number) {
   return `${useDateFormat(date, 'DD MMM YYYY').value} at ${useDateFormat(date, 'HH:mm:ss').value}`
 }
 
@@ -19,7 +21,7 @@ useIntervalFn(async () => await refresh(), 5000)
     <div v-if="activity && activity.data.activities" class="flex items-center gap-x-4">
       <p
         class="uppercase tracking-widest text-sm"
-        :style="{ writingMode: 'vertical-rl', textOrientation: 'sideways-right' }"
+        :style="{ writingMode: 'vertical-rl', textOrientation: 'sideways' }"
       >
         Activity
       </p>
diff --git a/src/components/main/MainStats.vue b/src/components/main/MainStats.vue
index e0279dc..9e2e58d 100644
--- a/src/components/main/MainStats.vue
+++ b/src/components/main/MainStats.vue
@@ -1,5 +1,7 @@
 <script lang="ts" setup>
-const stats = await $fetch('/api/stats')
+import type { Stats } from '~~/types'
+
+const stats = await $fetch<Stats>('/api/stats')
 
 const CardUi = {
   footer: { padding: 'px-4 py-2' },
@@ -8,61 +10,63 @@ const CardUi = {
 </script>
 
 <template>
-  <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-right' }"
-      >
-        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>
+  <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>
             </div>
           </div>
         </div>
       </div>
-    </div>
-    <template #footer>
-      <div class="flex items-center justify-between">
-        <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
+      <template #footer>
+        <div class="flex items-center justify-between">
+          <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>
-          <UButton
-            size="xs"
-            :padded="false"
-            variant="link"
-            to="https://wakatime.com/"
-            target="_blank"
-            label="Wakatime"
-          />
-          <UIcon name="i-jam-thunder" class="text-subtitle" />
+          <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>
         </div>
-      </div>
-    </template>
-  </UCard>
+      </template>
+    </UCard>
+  </ClientOnly>
 </template>
 
 <style>
diff --git a/types.ts b/types.ts
index 85ea590..df47e2e 100644
--- a/types.ts
+++ b/types.ts
@@ -1,4 +1,4 @@
-import type { MarkdownParsedContent, ParsedContent } from '@nuxt/content/dist/runtime/types'
+import type { MarkdownParsedContent, MarkdownRoot, ParsedContent } from '@nuxt/content/dist/runtime/types'
 
 export enum ColorsTheme {
   RED = 'red',
@@ -20,9 +20,46 @@ export enum ColorsTheme {
   ROSE = 'rose',
 }
 
-export interface JsonParsedContent<T> extends ParsedContent {
-  body: T
-  excerpt: ''
+interface WakatimeData {
+  name: string
+  percent: number
+}
+
+export interface Stats {
+  coding: {
+    data: {
+      grand_total: {
+        total_seconds_including_other_language: number
+      }
+      range: {
+        start: string
+      }
+    }
+  }
+  editors: {
+    data: Array<WakatimeData>
+  }
+  os: {
+    data: Array<WakatimeData>
+  }
+  languages: {
+    data: Array<WakatimeData>
+  }
+}
+
+interface LanyardActivity {
+  name: string
+  state: string
+  details: string
+  timestamps: {
+    start: number
+  }
+}
+
+export interface Activity {
+  data: {
+    activities: Array<LanyardActivity>
+  }
 }
 
 export interface Post extends MarkdownParsedContent {