mirror of
https://github.com/pixelfed/pixelfed.git
synced 2024-11-14 02:24:31 +00:00
120 lines
2.8 KiB
Vue
120 lines
2.8 KiB
Vue
<template>
|
|
<div class="landing-explore-component">
|
|
<section class="page-wrapper">
|
|
<div class="container container-compact">
|
|
<div class="card bg-bluegray-900" style="border-radius: 10px;">
|
|
<div class="card-header bg-bluegray-800 nav-menu" style="border-top-left-radius: 10px; border-top-right-radius: 10px;">
|
|
<ul class="nav justify-content-around">
|
|
<li class="nav-item">
|
|
<router-link to="/" class="nav-link">{{ $t('landing.navmenu.about') }}</router-link>
|
|
</li>
|
|
<li v-if="config.show_directory" class="nav-item">
|
|
<router-link to="/web/directory" class="nav-link">{{ $t('landing.navmenu.directory') }}</router-link>
|
|
</li>
|
|
<li v-if="config.show_explore_feed" class="nav-item">
|
|
<router-link to="/web/explore" class="nav-link">{{ $t('landing.navmenu.explore') }}</router-link>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="card-body">
|
|
<div class="py-3">
|
|
<p class="lead text-center">{{ $t('landing.explore.tagline') }}</p>
|
|
</div>
|
|
|
|
<div v-if="loading" class="d-flex justify-content-center align-items-center" style="min-height: 500px;">
|
|
<b-spinner />
|
|
</div>
|
|
|
|
<div v-else class="feed-list">
|
|
<post-card
|
|
v-for="post in feed"
|
|
:key="post.id"
|
|
:post="post"
|
|
:range="ranges[rangeIndex]" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<footer-component />
|
|
</section>
|
|
</div>
|
|
</template>
|
|
|
|
<script type="text/javascript">
|
|
import PostCard from './partials/PostCard';
|
|
|
|
export default {
|
|
components: {
|
|
"post-card": PostCard
|
|
},
|
|
|
|
data() {
|
|
return {
|
|
loading: true,
|
|
config: window.pfl,
|
|
isFetching: false,
|
|
range: 'daily',
|
|
ranges: ['daily', 'monthly', 'yearly'],
|
|
rangeIndex: 0,
|
|
feed: [],
|
|
}
|
|
},
|
|
|
|
beforeMount() {
|
|
if(this.config.show_explore_feed == false) {
|
|
this.$router.push('/');
|
|
}
|
|
},
|
|
|
|
mounted() {
|
|
this.init();
|
|
},
|
|
|
|
methods: {
|
|
init() {
|
|
axios.get('/api/pixelfed/v2/discover/posts/trending?range=daily')
|
|
.then(res => {
|
|
if(res && res.data.length > 3) {
|
|
this.feed = res.data;
|
|
this.loading = false;
|
|
} else {
|
|
this.rangeIndex++;
|
|
this.fetchTrending();
|
|
}
|
|
})
|
|
},
|
|
|
|
fetchTrending() {
|
|
if(this.isFetching || this.rangeIndex >= 3) {
|
|
return;
|
|
}
|
|
this.isFetching = true;
|
|
|
|
axios.get('/api/pixelfed/v2/discover/posts/trending', {
|
|
params: {
|
|
range: this.ranges[this.rangeIndex]
|
|
}
|
|
})
|
|
.then(res => {
|
|
if(res && res.data.length) {
|
|
if(this.rangeIndex == 2 && res.data.length > 3) {
|
|
this.feed = res.data;
|
|
this.loading = false;
|
|
} else {
|
|
this.rangeIndex++;
|
|
this.isFetching = false;
|
|
this.fetchTrending();
|
|
}
|
|
} else {
|
|
this.rangeIndex++;
|
|
this.isFetching = false;
|
|
this.fetchTrending();
|
|
}
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|