pixelfed/resources/assets/components/discover/ServerFeed.vue

<template>
	<div class="discover-serverfeeds-component">
		<div class="container-fluid mt-3">

			<div class="row">
				<div class="col-md-4 col-lg-3">
					<sidebar :user="profile" />
				</div>

				<div class="col-md-6 col-lg-6">
					<b-breadcrumb class="font-default" :items="breadcrumbItems"></b-breadcrumb>

					<h1 class="font-default">Server Timelines</h1>
					<p class="font-default lead">Browse timelines of a specific instance</p>

					<hr>

					<b-spinner v-if="isLoading && !initialTab" />

					<status-card
						v-if="!isLoading"
						v-for="(post, idx) in feed"
						:key="'ti1:'+idx+':'+post.id"
						:profile="profile"
						:status="post"
						/>

					<p v-if="!initialTab && !isLoading && feed.length == 0" class="lead">No posts found :(</p>

					<div v-if="initialTab === true">
						<p v-if="config.server.mode == 'allowlist'" class="lead">Select an instance from the menu</p>
					</div>
				</div>

				<div class="col-md-2 col-lg-3">
					<div v-if="config.server.mode === 'allowlist'" class="nav flex-column nav-pills font-default">
						<a
							v-for="(tag, idx) in domains"
							class="nav-link"
							:class="{ active: tagIndex == idx }"
							href="#"
							@click.prevent="toggleTag(idx)">
							{{ tag }}
						</a>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script type="text/javascript">
import Drawer from './../partials/drawer.vue';
import Sidebar from './../partials/sidebar.vue';
import StatusCard from './../partials/TimelineStatus.vue';

export default {
	components: {
		"drawer": Drawer,
		"sidebar": Sidebar,
		"status-card": StatusCard
	},

	data() {
		return {
			isLoaded: false,
			isLoading: true,
			initialTab: true,
			config: {},
			profile: window._sharedData.user,
			tagIndex: undefined,
			domains: [],
			feed: [],
			breadcrumbItems: [
				{
					text: 'Discover',
					href: '/i/web/discover'
				},
				{
					text: 'Server Timelines',
					active: true
				}
			]
		}
	},

	mounted() {
		this.fetchConfig();
	},

	methods: {
		fetchConfig() {
			axios.get('/api/pixelfed/v2/discover/meta')
			.then(res => {
				this.config = res.data;
				if(this.config.server.enabled == false) {
					this.$router.push('/i/web/discover');
				}
				if(this.config.server.mode === 'allowlist') {
					this.domains = this.config.server.domains.split(',');
				}
			})
		},

		fetchFeed(domain) {
			this.isLoading = true;
			axios.get('/api/pixelfed/v2/discover/server-timeline', {
				params: {
					domain: domain
				}
			}).then(res => {
				this.feed = res.data;
				this.isLoading = false;
				this.isLoaded = true;
			})
			.catch(err => {
				this.feed = [];
				this.tagIndex = null;
				this.isLoaded = true;
				this.isLoading = false;
			})
		},

		toggleTag(tag) {
			this.initialTab = false;
			this.tagIndex = tag;
			this.fetchFeed(this.domains[tag]);
		}
	}
}
</script>

<style lang="scss" scoped>
	.discover-serverfeeds-component {
		.bg-stellar {
			background: #7474BF;
			background: -webkit-linear-gradient(to right, #348AC7, #7474BF);
			background: linear-gradient(to right, #348AC7, #7474BF);
		}
		.font-default {
			font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
			letter-spacing: -0.7px;
		}

		.active {
			font-weight: 700;
		}
	}
</style>