repod/src/components/Feed/Banner.vue

<template>
	<div class="header">
		<img class="background" :src="imageUrl">
		<div class="content">
			<NcAvatar class="avatar"
				:display-name="author || title"
				:is-no-user="true"
				:size="128"
				:url="imageUrl" />
			<div class="inner">
				<div class="infos">
					<h2>{{ title }}</h2>
					<a :href="link" target="_blank">
						<i>{{ author }}</i>
					</a>
					<br><br>
					<p>
						<small>{{ strippedDescription }}</small>
					</p>
				</div>
				<NcAppNavigationNew v-if="!isSubscribed"
					:text="t('repod', 'Subscribe')"
					@click="addSubscription">
					<template #icon>
						<Plus :size="20" />
					</template>
				</NcAppNavigationNew>
			</div>
		</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 { decodeUrl } from '../../utils/url.js'
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 decodeUrl(this.$route.params.url)
		},
		isSubscribed() {
			return this.$store.state.subscriptions.subscriptions.includes(this.url)
		},
		strippedDescription() {
			const pre = document.createElement('pre')
			pre.innerHTML = this.description
			return pre.textContent || pre.innerText || ''
		},
	},
	methods: {
		async addSubscription() {
			try {
				await axios.post(generateUrl('/apps/gpoddersync/subscription_change/create'), { add: [this.url], remove: [] })
			} catch (e) {
				console.error(e)
				showError(t('repod', 'Error while adding the feed'))
			}

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

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

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

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

	.header {
		height: 14rem;
		overflow: hidden;
		padding: 2rem;
		position: relative;
	}

	.infos {
		overflow: auto;
	}

	.inner {
		display: flex;
	}

	@media only screen and (max-width: 768px) {
		.inner {
			flex-direction: column;
		}
	}
</style>