feat: add vscode status to header

Author: lareii

src/components/Header.vue

@@ -3,6 +3,8 @@ import { ref, onMounted, onUnmounted } from "vue";
 
 const ws = ref(null);
 const status = ref("text-gruvbox-gray");
+
+const vscode = ref(null);
 const spotify = ref(null);
 
 const connectWebSocket = () => {
@@ -22,6 +24,9 @@ const connectWebSocket = () => {
     if (data.t === "INIT_STATE" || data.t === "PRESENCE_UPDATE") {
       const presence = data.d;
       spotify.value = presence.spotify;
+      vscode.value = presence.activities.find(
+        (activity) => activity.name === "Visual Studio Code",
+      );
 
       switch (presence.discord_status) {
         case "online":
@@ -66,39 +71,32 @@ onUnmounted(() => {
   </div>
   <div>
     emirhan (aka larei), 18 years-old. self-taught developer,
-    <a
-      href="https://www.youtube.com/watch?v=9sJUDx7iEJw"
-      target="_blank"
-      class="underline"
-      >open-source</a
-    >
+    <a href="https://www.youtube.com/watch?v=9sJUDx7iEJw" target="_blank" class="underline">open-source</a>
     enthusiast. programming, music, math.
   </div>
-  <div class="flex gap-2 text-sm text-gruvbox-gray">
-    <font-awesome-icon :icon="['fab', 'spotify']" class="mt-[3px]" />
+  <div class="flex items-center gap-2 text-sm text-gruvbox-gray">
+    <font-awesome-icon :icon="['fab', 'spotify']" class="w-4 h-4 mr-0.5" />
     <div v-if="spotify">
       i'm currently listening to
-      <a
-        :href="`https://open.spotify.com/track/${spotify.track_id}`"
-        target="_blank"
-        class="font-black underline"
-        >{{ spotify.song }} - {{ spotify.artist }}</a
-      >.
+      <a :href="`https://open.spotify.com/track/${spotify.track_id}`" target="_blank" class="font-black underline">{{
+        spotify.song }} - {{ spotify.artist }}</a>.
     </div>
     <div v-else>i'm not listening to anything right now.</div>
   </div>
+  <div class="flex items-center gap-2 text-sm text-gruvbox-gray">
+    <font-awesome-icon :icon="['fas', 'code']" class="w-4 h-4 mr-0.5" />
+    <div v-if="vscode">
+      i'm currently working on
+      <span class="font-black">{{ vscode.details }}</span>
+      <span v-if="vscode.state"> in <span class="font-black">{{ vscode.state }}</span></span>
+    </div>
+    <div v-else>i'm not working on anything right now.</div>
+  </div>
   <div class="flex gap-10 mt-5 text-xl">
-    <a href="https://github.com/lareii/" target="_blank"
-      ><font-awesome-icon :icon="['fab', 'github']"
-    /></a>
-    <a href="https://www.linkedin.com/in/larei/" target="_blank"
-      ><font-awesome-icon :icon="['fab', 'linkedin']"
-    /></a>
-    <a href="https://discord.gg/taMRRAHb6y" target="_blank"
-      ><font-awesome-icon :icon="['fab', 'discord']"
-    /></a>
-    <a href="https://mastodon.com.tr/@larei" target="_blank" rel="me"
-      ><font-awesome-icon :icon="['fab', 'mastodon']"
-    /></a>
+    <a href="https://github.com/lareii/" target="_blank"><font-awesome-icon :icon="['fab', 'github']" /></a>
+    <a href="https://www.linkedin.com/in/larei/" target="_blank"><font-awesome-icon :icon="['fab', 'linkedin']" /></a>
+    <a href="https://discord.gg/taMRRAHb6y" target="_blank"><font-awesome-icon :icon="['fab', 'discord']" /></a>
+    <a href="https://mastodon.com.tr/@larei" target="_blank" rel="me"><font-awesome-icon
+        :icon="['fab', 'mastodon']" /></a>
   </div>
 </template>

src/main.js

@@ -5,10 +5,10 @@ import App from './App.vue'
 
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
-import { faStar, faCodeBranch } from '@fortawesome/free-solid-svg-icons'
+import { faStar, faCodeBranch, faCode } from '@fortawesome/free-solid-svg-icons'
 import { faGithub, faLinkedin, faDiscord, faSpotify, faMastodon } from '@fortawesome/free-brands-svg-icons'
 
-library.add(faGithub, faLinkedin, faDiscord, faSpotify, faMastodon, faStar, faCodeBranch)
+library.add(faGithub, faLinkedin, faDiscord, faSpotify, faMastodon, faStar, faCodeBranch, faCode)
 
 createApp(App)
   .component('font-awesome-icon', FontAwesomeIcon)