repod/src/components/Feed/Banner.vue

<template>
	<div class="header">
		<img class="background" :src="imageUrl">
		<div class="content">
			<NcAvatar class="avatar"
				:display-name="author"
				:is-no-user="true"
				:url="imageUrl" />
			<div class="infos">
				<h2>{{ title }}</h2>
				<a :href="link" target="_blank">
					<i>{{ author }}</i>
				</a>
				<br><br>
				<p>
					<small>{{ description }}</small>
				</p>
			</div>
			<NcAppNavigationNew :text="t('Subscribe')" @click="addSubscription">
				<template #icon>
					<Plus :size="20" />
				</template>
			</NcAppNavigationNew>
		</div>
	</div>
</template>

<script>
import { NcAppNavigationNew, NcAvatar } from '@nextcloud/vue'
import Plus from 'vue-material-design-icons/Plus.vue'
import axios from '@nextcloud/axios'
import { generateUrl } from '@nextcloud/router'
import { showError } from '@nextcloud/dialogs'

export default {
	name: 'Banner',
	components: {
		NcAvatar,
		NcAppNavigationNew,
		Plus,
	},
	props: {
		author: {
			type: String,
			required: true,
		},
		description: {
			type: String,
			required: true,
		},
		imageUrl: {
			type: String,
			required: true,
		},
		link: {
			type: String,
			required: true,
		},
		title: {
			type: String,
			required: true,
		},
	},
	computed: {
		url() {
			return atob(this.$route.params.url)
		},
	},
	methods: {
		async addSubscription() {
			try {
				await axios.post(generateUrl('/apps/gpoddersync/subscription_change/create'), { add: [this.url], remove: [] })
			} catch (e) {
				console.error(e)
				showError(t('Error while adding the feed'))
			}

			this.$store.dispatch('subscriptions/fetch')
		},
	},
}
</script>

<style scoped>
	.avatar {
		height: 8rem;
		width: 8rem;
	}

	.background {
		filter: blur(.5rem) brightness(50%);
		height: auto;
		left: 0;
		opacity: 0.4;
		position: absolute;
		top: 0;
		width: 100%;
	}

	.content {
		display: flex;
		gap: 2rem;
		height: 10rem;
		overflow: auto;
		position: relative;
	}

	.header {
		height: 14rem;
		padding: 2rem;
		position: relative;
	}
</style>