<template> <div> <div class="col-12"> <p class="font-weight-bold text-lighter text-uppercase">Profiles Directory</p> <div v-if="loaded" class=""> <div class="row"> <div class="col-12 col-md-6 p-1" v-for="(profile, index) in profiles"> <div class="card card-body border shadow-none py-2"> <div class="media"> <a :href="profile.url"><img :src="profile.avatar" class="rounded-circle border mr-3" alt="..." width="40px" height="40px"></a> <div class="media-body"> <p class="mt-0 mb-0 font-weight-bold"> <a :href="profile.url" class="text-dark">{{profile.username}}</a> </p> <p class="mb-1 small text-lighter d-flex justify-content-between font-weight-bold"> <span> <span>{{prettyCount(profile.statuses_count)}}</span> POSTS </span> <span> <span>{{prettyCount(profile.followers_count)}}</span> FOLLOWERS </span> </p> <p class="mb-1"> <span v-for="(post, i) in profile.posts" class="shadow-sm" :key="'profile_posts_'+i"> <a :href="post.url" class="text-decoration-none mr-1"> <img :src="thumbUrl(post)" width="62.3px" height="62.3px" class="border rounded"> </a> </span> </p> </div> </div> </div> </div> <div v-if="showLoadMore" class="col-12"> <p class="text-center mb-0 pt-3"> <button class="btn btn-outline-secondary btn-sm px-4 py-1 font-weight-bold" @click="loadMore()">Load More</button> </p> </div> </div> </div> <div v-else> <div class="row"> <div class="col-12 d-flex justify-content-center align-items-center"> <div class="spinner-border" role="status"> <span class="sr-only">Loading...</span> </div> </div> </div> </div> </div> </div> </template> <style type="text/css" scoped></style> <script type="text/javascript"> export default { data() { return { loaded: false, showLoadMore: true, profiles: [], page: 1 } }, beforeMount() { this.fetchData(); }, methods: { fetchData() { axios.get('/api/pixelfed/v2/discover/profiles', { params: { page: this.page } }) .then(res => { if(res.data.length == 0) { this.showLoadMore = false; this.loaded = true; return; } this.profiles = res.data; this.showLoadMore = this.profiles.length == 8; this.loaded = true; }); }, prettyCount(val) { return App.util.format.count(val); }, loadMore() { this.loaded = false; this.page++; this.fetchData(); }, thumbUrl(p) { return p.media_attachments[0].url; } } } </script>