Subscribe button working

src/components/Discover/TopList.vue

@@ -53,6 +53,12 @@ export default {
 </script>
 
 <style scoped>
+	.caption {
+		float: right;
+		font-size: small;
+		margin: .5rem;
+	}
+
 	.tops {
 		display: flex;
 		flex-wrap: wrap;
@@ -63,10 +69,4 @@ export default {
 	.tops li {
 		flex-basis: 15%;
 	}
-
-	.caption {
-		float: right;
-		font-size: small;
-		margin: .5rem;
-	}
 </style>

src/components/Feed/Banner.vue

@@ -2,16 +2,21 @@
 	<div class="header">
 		<img class="background" :src="imageUrl">
 		<div class="content">
-			<NcAvatar :display-name="author"
+			<NcAvatar class="avatar"
+				:display-name="author"
 				:is-no-user="true"
 				:url="imageUrl" />
 			<div class="infos">
-				<h1>{{ title }}</h1>
+				<h2>{{ title }}</h2>
 				<a :href="link" target="_blank">
-					{{ author }}
+					<i>{{ author }}</i>
 				</a>
+				<br><br>
+				<p>
+					<small>{{ description }}</small>
+				</p>
 			</div>
-			<NcAppNavigationNew :text="t('Subscribe')">
+			<NcAppNavigationNew :text="t('Subscribe')" @click="addSubscription">
 				<template #icon>
 					<Plus :size="20" />
 				</template>
@@ -23,6 +28,9 @@
 <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',
@@ -36,6 +44,10 @@ export default {
 			type: String,
 			required: true,
 		},
+		description: {
+			type: String,
+			required: true,
+		},
 		imageUrl: {
 			type: String,
 			required: true,
@@ -49,26 +61,54 @@ export default {
 			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>
-	.header {
-		overflow: hidden;
-		position: relative;
+	.avatar {
+		height: 8rem;
+		width: 8rem;
 	}
 
 	.background {
 		filter: blur(.5rem) brightness(50%);
+		height: auto;
+		left: 0;
 		opacity: 0.4;
 		position: absolute;
 		top: 0;
-		left: 0;
 		width: 100%;
-		height: auto;
 	}
 
 	.content {
+		display: flex;
+		gap: 2rem;
+		height: 10rem;
+		overflow: hidden;
+		position: relative;
+	}
+
+	.header {
+		height: 14rem;
+		overflow: hidden;
+		padding: 2rem;
 		position: relative;
 	}
 </style>

src/views/Discover.vue

@@ -37,9 +37,9 @@ export default {
 
 <style scoped>
 	.main {
-		margin: 15px 51px;
 		display: flex;
 		flex-direction: column;
 		gap: 1rem;
+		margin: 15px 51px;
 	}
 </style>

src/views/Feed.vue

@@ -8,6 +8,7 @@
 		</NcEmptyContent>
 		<Banner v-if="feed"
 			:author="feed.author"
+			:description="feed.description"
 			:image-url="feed.imageUrl"
 			:link="feed.link"
 			:title="feed.title" />

src/views/GPodder.vue

@@ -30,10 +30,10 @@ export default {
 		NcButton,
 		NcEmptyContent,
 	},
-	data() {
-		return {
-			gPodderSyncUrl: generateUrl('/settings/apps/installed/gpoddersync'),
-		}
+	computed: {
+		gPodderSyncUrl() {
+			return generateUrl('/settings/apps/installed/gpoddersync')
+		},
 	},
 }
 </script>