some tweaks; add CurrentlyListening

2.0
adb-sh 2 years ago
parent 1b8aa36a5b
commit cffa95a91e

@ -28,7 +28,7 @@ export default {
mounted() { mounted() {
setTimeout(() => setTimeout(() =>
this.animation = new ParticleNetworkAnimation(this.$refs.pna, this.options this.animation = new ParticleNetworkAnimation(this.$refs.pna, this.options
), 200); ), 1000);
}, },
updated() { updated() {
this.animation?.forceUpdate(); this.animation?.forceUpdate();

@ -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>

@ -1,29 +1,25 @@
<template> <template>
<div> <BannerWrapperNetwork>
<div class="row"> <div>
<StickyWrapper class="col-auto mx-4"> <CurrentlyListening />
<router-link to="/projects" class="btn btn-outline-light">Projects</router-link> <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> </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>
</div> </BannerWrapperNetwork>
</template> </template>
<script> <script>
export default { export default {
name: "HomeContent" name: "HomeContent",
} }
</script> </script>
<style scoped>
</style>

@ -1,5 +1,6 @@
<template> <template>
<div class="StickyWrapper"> <div class="StickyWrapper">
<slot name="top"/>
<div class="content"> <div class="content">
<slot /> <slot />
</div> </div>

@ -1,23 +1,7 @@
--- ---
home: true home: true
--- ---
<BannerWrapperNetwork> <HomeContent />
<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>
## services I'm hosting ## services I'm hosting
---- ----

Loading…
Cancel
Save