pixelfed/resources/assets/components/partials/placeholders/TimelineOnboarding.vue

<template>
	<div class="timeline-onboarding">
		<div class="card card-body shadow-sm mb-3 p-5" style="border-radius: 15px;">
			<h1 class="text-center mb-4">✨ {{ $t('timeline.onboarding.welcome') }}</h1>

			<p class="text-center mb-3" style="font-size: 22px;">
				{{ $t('timeline.onboarding.thisIsYourHomeFeed') }}
			</p>

			<p class="text-center lead">{{ $t('timeline.onboarding.letUsHelpYouFind') }}</p>

			<p v-if="newlyFollowed" class="text-center mb-0">
				<a href="/i/web" class="btn btn-primary btn-lg primary font-weight-bold rounded-pill px-4" onclick="location.reload()">
					{{ $t('timeline.onboarding.refreshFeed') }}
				</a>
			</p>
		</div>

		<div class="row">
			<div class="col-12 col-md-6 mb-3" v-for="(profile, index) in popularAccounts">
				<div class="card shadow-sm border-0 rounded-px">
					<div class="card-body p-2">
						<profile-card
							:key="'pfc' + index"
							:profile="profile"
							class="w-100"
							v-on:follow="follow(index)"
							v-on:unfollow="unfollow(index)"
						/>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script type="text/javascript">
	import ProfileCard from './../profile/ProfileHoverCard.vue';

	export default {
		props: {
			profile: {
				type: Object
			}
		},

		components: {
			"profile-card": ProfileCard
		},

		data() {
			return {
				popularAccounts: [],
				newlyFollowed: 0
			};
		},

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

		methods: {
			fetchPopularAccounts() {
        		axios.get('/api/pixelfed/discover/accounts/popular')
        		.then(res => {
        			this.popularAccounts = res.data;
        		})
        	},

        	follow(index) {
        		axios.post('/api/v1/accounts/' + this.popularAccounts[index].id + '/follow')
				.then(res => {
					this.newlyFollowed++;
					this.$store.commit('updateRelationship', [res.data]);
					this.$emit('update-profile', {
						'following_count': this.profile.following_count + 1
					})
				});
        	},

        	unfollow(index) {
        		axios.post('/api/v1/accounts/' + this.popularAccounts[index].id + '/unfollow')
				.then(res => {
					this.newlyFollowed--;
					this.$store.commit('updateRelationship', [res.data]);
					this.$emit('update-profile', {
						'following_count': this.profile.following_count - 1
					})
				});
        	}
		}
	}
</script>

<style lang="scss">
.timeline-onboarding {
	.profile-hover-card-inner {
		width: 100%;

		.d-flex {
			max-width: 100% !important;
		}
	}
}
</style>