Working on site

app/components/AppHeader.vue

@@ -5,6 +5,7 @@ watch(isDark, () => {
   colorMode.preference = colorMode.value === 'dark' ? 'light' : 'dark'
 })
 
+const { cloud } = useRuntimeConfig()
 const navs = [
   {
     label: 'home',
@@ -23,7 +24,7 @@ const navs = [
   },
   {
     label: 'resume',
-    to: 'https://cvws.icloud-content.com/B/AX71VtCX0vhZs6_jUHDuotOGnb0VAQE4MV8KB7QIeY5Q5Gik5J1erx4y/CV+English.pdf?o=AkIvC5IrO-5fS21fwPXq7UGd0lswyMuXT-P7E5CowQQ0&v=1&x=3&a=CAogqklcIUioRMDFGNGnrRfaDkS9YEmojlUNZ6rG0QyMiuwSbxDU2oOLhDIY1LffjIQyIgEAUgSGnb0VWgRerx4yaieUQJCUnGaHq9iuUS1_UtlGN8Ioa3fXnJFInkj9n6PaXX4XnUO2y_ByJ8VXz1TffVsstlH_R9jT0WX2nkZVem0ZdiIZue6zB1iI0RG7vslM9A&e=1719087389&fl=&r=76b32fd5-6d83-4903-83a5-2ab70677813b-1&k=_NuEhyMkXeSuqqVw_4seIg&ckc=com.apple.clouddocs&ckz=com.apple.CloudDocs&p=160&s=j5LuqIi_tMAZoyRrQVfV3PNfcjI&cd=i',
+    to: '',
     target: '_blank',
     icon: 'i-ph-address-book-duotone'
   }

app/components/content/Activity.vue

@@ -1,43 +1,87 @@
 <script lang="ts" setup>
-import { type Activity, IDEs } from '~~/types'
+import { type Activity, type CodingActivity, IDEs } from '~~/types'
 
 const { data: activity, refresh } = await useAsyncData<Activity>('activity', () => $fetch('/api/activity'))
 useIntervalFn(async () => await refresh(), 5000)
 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}`
-}
+// eslint-disable-next-line vue/return-in-computed-property
+const getActivity = computed<CodingActivity | undefined>(() => {
+  const activity = codingActivity.value
+  if (!activity) return
+  switch (activity.name) {
+    case 'Visual Studio Code':
+      return {
+        active: !activity.details.includes('Idling'),
+        name: activity.name,
+        project: activity.state ? activity.state.replace('Workspace:', '') : '',
+        state: activity.details.charAt(0).toLowerCase() + activity.details.slice(1),
+        start: {
+          ago: useTimeAgo(activity.timestamps.start).value,
+          formated: `${useDateFormat(activity.timestamps.start, 'DD MMM YYYY').value} at ${useDateFormat(activity.timestamps.start, 'HH:mm:ss').value}`
+        }
+      }
+    case 'WebStorm':
+    case 'IntelliJ IDEA Ultimate':
+      return {
+        active: activity.state.toLowerCase().includes('editing'),
+        project: activity.details,
+        state: activity.state.charAt(0).toLowerCase() + activity.state.slice(1),
+        name: activity.name,
+        start: {
+          ago: useTimeAgo(activity.timestamps.start).value,
+          formated: `${useDateFormat(activity.timestamps.start, 'DD MMM YYYY').value} at ${useDateFormat(activity.timestamps.start, 'HH:mm:ss').value}`
+        }
+      }
+  }
+})
 </script>
 
 <template>
-  <p
-    v-if="codingActivity"
+  <div
+    v-if="getActivity"
     class="flex items-start gap-2"
   >
-    <UTooltip :text="codingActivity.state.toLowerCase().includes('editing') ? 'I\'m online 👋' : 'I\'m sleeping 😴'">
+    <UTooltip :text="getActivity.active ? 'I\'m online 👋' : 'I\'m sleeping 😴'">
       <div class="relative flex h-3 w-3 mt-2">
         <div
-          v-if="codingActivity.state.toLowerCase().includes('editing')"
+          v-if="getActivity.active"
           class="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-500 opacity-75"
         />
         <div
-          :class="codingActivity.state.toLowerCase().includes('editing') ? 'bg-green-500' : 'bg-amber-500'"
+          :class="getActivity.active ? 'bg-green-500' : 'bg-amber-500'"
           class="relative inline-flex rounded-full h-3 w-3"
         />
       </div>
     </UTooltip>
-    <span v-if="codingActivity.state.toLowerCase().includes('editing')">
-      I'm actually working on <strong>{{ codingActivity.details }}</strong>,
-      {{ codingActivity.state.charAt(0).toLowerCase() + codingActivity.state.slice(1) }}.
-      using <strong>{{ codingActivity.name }}</strong>.
-      I've started <strong>{{ useTimeAgo(codingActivity.timestamps.start).value }}</strong>, the
-      <strong>{{ formatDate(codingActivity.timestamps.start) }}</strong>.
+    <span
+      v-if="getActivity.active"
+      class="space-x-1"
+    >
+      <span>I'm actually working on <strong>{{ getActivity.project }}</strong>, {{ getActivity.state }}, using</span>
+      <UIcon
+        :name="IDEs.find(ide => ide.name === getActivity!.name)!.icon"
+        size="16"
+      />
+      <span>
+        <strong>{{ getActivity.name }}</strong>.
+        I've started <strong>{{ getActivity.start.ago }}</strong>, the <strong>{{ getActivity.start.formated }}</strong>.
+      </span>
     </span>
-    <span v-else>
-      I'm Idling on my computer with <strong>{{ codingActivity.name }}</strong> running in background.
-    </span>
-  </p>
+    <div
+      v-else
+      class="space-x-1"
+    >
+      <span>I'm Idling on my computer with</span>
+      <UIcon
+        :name="IDEs.find(ide => ide.name === getActivity!.name)!.icon"
+        size="20"
+      />
+      <span>
+        <strong>{{ getActivity.name }}</strong> running in background.
+      </span>
+    </div>
+  </div>
   <div
     v-else
     class="my-5 flex md:items-start gap-2"

app/components/content/ProseIcon.vue

@@ -12,7 +12,6 @@ defineProps({
     <UIcon
       class="mb-1 mr-1"
       :name="icon"
-      :dynamic="true"
     />
     <span class="sofia font-medium underline decoration-neutral-300 dark:decoration-neutral-700">
       <slot />

app/components/content/Stats.vue

@@ -5,18 +5,20 @@ const { data: stats } = await useFetch<Stats>('/api/stats')
 </script>
 
 <template>
-  <p v-if="stats">
-    I collect some data for {{ useTimeAgo(new Date(stats.coding.data.range.start)).value }}, started the
-    <strong>{{ useDateFormat(new Date(stats.coding.data.range.start), 'Do MMMM YYYY').value }}</strong>.
-    I've coded for a total of <strong>{{
-      usePrecision(stats.coding.data.grand_total.total_seconds_including_other_language / 3600, 0)
-    }}</strong> hours.
-    My best editors are
-    {{ stats.editors.data.slice(0, 2).map(editor => `${editor.name} (${editor.percent}%)`).join(' and ') }}.
-    <template v-if="stats.os.data[0]">
-      My best OS is {{ stats.os.data[0].name }} ({{ stats.os.data[0].percent }}%).
-    </template>
-    My top languages are
-    {{ stats.languages.data.slice(0, 2).map(language => `${language.name} (${language.percent}%)`).join(' and ') }}.
-  </p>
+  <ClientOnly>
+    <p v-if="stats">
+      I collect some data for {{ useTimeAgo(new Date(stats.coding.data.range.start)).value }}, started the
+      <strong>{{ useDateFormat(new Date(stats.coding.data.range.start), 'Do MMMM YYYY').value }}</strong>.
+      I've coded for a total of <strong>{{
+        usePrecision(stats.coding.data.grand_total.total_seconds_including_other_language / 3600, 0)
+      }}</strong> hours.
+      My best editors are
+      {{ stats.editors.data.slice(0, 2).map(editor => `${editor.name} (${editor.percent}%)`).join(' and ') }}.
+      <template v-if="stats.os.data[0]">
+        My best OS is {{ stats.os.data[0].name }} ({{ stats.os.data[0].percent }}%).
+      </template>
+      My top languages are
+      {{ stats.languages.data.slice(0, 2).map(language => `${language.name} (${language.percent}%)`).join(' and ') }}.
+    </p>
+  </ClientOnly>
 </template>