From cffa95a91e0420daa3fc26313bba84759cbb3f04 Mon Sep 17 00:00:00 2001
From: adb-sh <git@adb.sh>
Date: Sun, 2 Oct 2022 00:44:39 +0200
Subject: [PATCH] some tweaks; add CurrentlyListening

---
 .../components/BannerWrapperNetwork.vue       |  2 +-
 .../components/CurrentlyListening.vue         | 56 +++++++++++++++++++
 src/.vuepress/components/HomeContent.vue      | 36 ++++++------
 src/.vuepress/components/StickyWrapper.vue    |  1 +
 src/me/index.md                               | 18 +-----
 5 files changed, 75 insertions(+), 38 deletions(-)
 create mode 100644 src/.vuepress/components/CurrentlyListening.vue

diff --git a/src/.vuepress/components/BannerWrapperNetwork.vue b/src/.vuepress/components/BannerWrapperNetwork.vue
index a9dc6de..d7c2aba 100644
--- a/src/.vuepress/components/BannerWrapperNetwork.vue
+++ b/src/.vuepress/components/BannerWrapperNetwork.vue
@@ -28,7 +28,7 @@ export default {
   mounted() {
     setTimeout(() =>
       this.animation = new ParticleNetworkAnimation(this.$refs.pna, this.options
-    ), 200);
+    ), 1000);
   },
   updated() {
     this.animation?.forceUpdate();
diff --git a/src/.vuepress/components/CurrentlyListening.vue b/src/.vuepress/components/CurrentlyListening.vue
new file mode 100644
index 0000000..691fb45
--- /dev/null
+++ b/src/.vuepress/components/CurrentlyListening.vue
@@ -0,0 +1,56 @@
+<template>
+  <a
+    class="btn currentlyListening"
+    href="	https://spot2gether.cybre.town/user/op3q884heqao7laioz05ebaoz"
+    target="_blank"
+    ref="noopener noreferrer"
+  >
+    <div v-if="currentlyPlaying?.item" class="row align-items-center">
+      <i class="bi-music-note col-auto icon" />
+      <div class="col-auto d-flex flex-column text">
+        <b>{{ currentlyPlaying?.item?.name }}</b>
+        <div>{{ currentlyPlaying?.item?.artists.map(artist => artist.name).join(', ') }}</div>
+      </div>
+    </div>
+  </a>
+</template>
+
+<script>
+let updateMusicInfo = null;
+
+export default {
+  name: "CurrentlyListening",
+  data: () => ({
+    currentlyPlaying: null,
+  }),
+  methods: {
+    async fetchMusicInfo() {
+      return await fetch(
+          'https://spot2gether.cybre.town/api/public/users/op3q884heqao7laioz05ebaoz/info'
+      ).then(data => data.json());
+    }
+  },
+  async created() {
+    this.currentlyPlaying = (await this.fetchMusicInfo())?.currentlyPlaying;
+    updateMusicInfo = setInterval(async () => {
+      this.currentlyPlaying = (await this.fetchMusicInfo())?.currentlyPlaying;
+    }, 20000);
+  },
+  beforeDestroy() {
+    clearInterval(updateMusicInfo);
+  },
+};
+</script>
+
+<style lang="scss">
+.currentlyListening {
+  position: relative;
+  .icon {
+    font-size: 1.2rem;
+  }
+  .text {
+    font-size: .8rem;
+    text-align: left !important;
+  }
+}
+</style>
diff --git a/src/.vuepress/components/HomeContent.vue b/src/.vuepress/components/HomeContent.vue
index c8cb04f..ebb3ab2 100644
--- a/src/.vuepress/components/HomeContent.vue
+++ b/src/.vuepress/components/HomeContent.vue
@@ -1,29 +1,25 @@
 <template>
-  <div>
-    <div class="row">
-      <StickyWrapper class="col-auto mx-4">
-        <router-link to="/projects" class="btn btn-outline-light">Projects</router-link>
+  <BannerWrapperNetwork>
+    <div>
+      <CurrentlyListening />
+      <StickyWrapper>
+        <TextScramble :phrases="[
+          'Hey!',
+          'Welcome to adb.sh :D',
+          'I do web development', 'networking / hosting', 'electronics', 'DJing / music',
+         ]" />
+        <SocialIcons />
+        <div class="row my-4 justify-content-center">
+          <router-link class="col-auto mx-2 btn btn-outline-light" to="/projects" >projects</router-link>
+          <router-link class="col-auto mx-2 btn btn-outline-light" to="/music" >music</router-link>
+        </div>
       </StickyWrapper>
-      <div class="col">
-        <FolderList path="/projects/" v-slot="{ page }">
-          <div class="card m-2">
-            <div class="card-header"><router-link :to="page.regularPath">{{ page.title }}</router-link></div>
-            <div class="card-body">
-              {{ page.frontmatter.excerpt }}
-            </div>
-          </div>
-        </FolderList>
-      </div>
     </div>
-  </div>
+  </BannerWrapperNetwork>
 </template>
 
 <script>
 export default {
-  name: "HomeContent"
+  name: "HomeContent",
 }
 </script>
-
-<style scoped>
-
-</style>
\ No newline at end of file
diff --git a/src/.vuepress/components/StickyWrapper.vue b/src/.vuepress/components/StickyWrapper.vue
index 07f93f6..4615659 100644
--- a/src/.vuepress/components/StickyWrapper.vue
+++ b/src/.vuepress/components/StickyWrapper.vue
@@ -1,5 +1,6 @@
 <template>
   <div class="StickyWrapper">
+    <slot name="top"/>
     <div class="content">
       <slot />
     </div>
diff --git a/src/me/index.md b/src/me/index.md
index 8e30df5..82cadab 100755
--- a/src/me/index.md
+++ b/src/me/index.md
@@ -1,23 +1,7 @@
 ---
 home: true
 ---
-<BannerWrapperNetwork>
-  <div>
-    <StickyWrapper>
-      <TextScramble :phrases="[
-        'Hey!',
-        'Welcome to adb.sh :D',
-        'I do web development', 'networking / hosting', 'electronics', 'DJing / music', 
-      ]" />
-      <SocialIcons />
-      <div class="row my-4 justify-content-center">
-        <router-link class="col-auto mx-2 btn btn-outline-light" to="/projects" >projects</router-link>
-        <router-link class="col-auto mx-2 btn btn-outline-light" to="/music" >music</router-link>
-      </div>
-    </StickyWrapper>
-  </div>
-</BannerWrapperNetwork>
-
+<HomeContent />
 
 ## services I'm hosting
 ----