Add activity and stats

app/components/content/Activity.vue

@@ -0,0 +1,51 @@
+<template>
+  <div
+    v-if="codingActivity"
+    class="mb-4"
+  >
+    <div
+      v-if="codingActivity"
+      class="flex items-start gap-2"
+    >
+      <UTooltip :text="codingActivity.state.toLowerCase().includes('editing') ? 'I\'m online 👋' : 'I\'m sleeping 😴'">
+        <div
+          :class="codingActivity.state.toLowerCase().includes('editing') ? 'bg-green-500' : 'bg-amber-500'"
+          class="h-3 w-3 inline-flex rounded-full cursor-help mt-7"
+        />
+      </UTooltip>
+      <p v-if="codingActivity.state.toLowerCase().includes('editing')">
+        I'm actually working on <strong>{{ codingActivity.details }}</strong>, {{ codingActivity.state.toLowerCase() }}
+        using <strong>{{ codingActivity.name }}</strong>.
+        I've started <strong>{{ useTimeAgo(codingActivity.timestamps.start).value }}</strong>, the
+        <strong>{{ formatDate(codingActivity.timestamps.start) }}</strong>.
+      </p>
+      <p v-else>
+        I'm Idling on my computer with <strong>{{ codingActivity.name }}</strong> running in background.
+      </p>
+    </div>
+    <div
+      v-else
+      class="flex items-center gap-2"
+    >
+      <UTooltip text="I'm offline 🫥">
+        <div class="h-3 w-3 inline-flex rounded-full bg-red-500" />
+      </UTooltip>
+      <p>
+        I'm currently offline. Come back later to see what I'm working on.
+      </p>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { type Activity, IDEs } from '~~/types'
+
+const { data: activity, refresh } = await useAsyncData<Activity>('activity', () => $fetch('/api/activity'))
+const codingActivity = computed(() => activity.value!.data.activities.filter(activity => IDEs.some(ide => ide.name === activity.name))[0])
+
+function formatDate(date: number) {
+  return `${useDateFormat(date, 'DD MMM YYYY').value} at ${useDateFormat(date, 'HH:mm:ss').value}`
+}
+
+useIntervalFn(async () => await refresh(), 5000)
+</script>

app/components/content/Stats.vue

@@ -0,0 +1,24 @@
+<script lang="ts" setup>
+import type { Stats } from '~~/types'
+
+const stats = await $fetch<Stats>('/api/stats')
+</script>
+
+<template>
+  <div
+    v-if="stats"
+    class="flex items-center gap-x-1 text-md"
+  >
+    <p>
+      I collect some data for {{ useTimeAgo(new Date(stats.coding.data.range.start)).value }}, started the
+      {{ useDateFormat(new Date(stats.coding.data.range.start), 'Do MMMM YYYY').value }}.
+      I've coded for a total of
+      {{ usePrecision(stats.coding.data.grand_total.total_seconds_including_other_language / 3600, 0) }} hours.
+      My best editors are
+      {{ stats.editors.data.slice(0, 2).map(editor => `${editor.name} (${editor.percent}%)`).join(' and ') }}.
+      My best OS is {{ stats.os.data[0].name }} ({{ stats.os.data[0].percent }}%).
+      My top languages are
+      {{ stats.languages.data.slice(0, 2).map(language => `${language.name} (${language.percent}%)`).join(' and ') }}.
+    </p>
+  </div>
+</template>