Add type

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>

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,11 +10,12 @@ 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-right' }"
+          :style="{ writingMode: 'vertical-rl', textOrientation: 'sideways' }"
         >
           STATS
         </p>
@@ -63,6 +66,7 @@ const CardUi = {
         </div>
       </template>
     </UCard>
+  </ClientOnly>
 </template>
 
 <style>

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 {