repod/src/views/Feed.vue

<template>
	<fragment>
		<NcLoadingIcon v-if="loading" />
		<NcEmptyContent v-if="failed" :name="t('Error loading feed')">
			<template #icon>
				<Alert />
			</template>
		</NcEmptyContent>
		<div v-if="feed" class="header">
			<NcAvatar :display-name="feed.author"
				:is-no-user="true"
				:url="feed.imageUrl" />
			<div class="infos">
				<h1>{{ feed.title }}</h1>
				<a :href="feed.link" target="_blank">
					{{ feed.author }}
				</a>
			</div>
			<NcAppNavigationNew :text="t('Subscribe')">
				<template #icon>
					<Plus :size="20" />
				</template>
			</NcAppNavigationNew>
		</div>
	</fragment>
</template>

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

export default {
	name: 'Feed',
	components: {
		Alert,
		NcAvatar,
		NcAppNavigationNew,
		NcEmptyContent,
		NcLoadingIcon,
		Plus,
	},
	data() {
		return {
			failed: false,
			loading: true,
			feed: null,
		}
	},
	computed: {
		url() {
			return atob(this.$route.params.url)
		},
	},
	async mounted() {
		try {
			const podcastData = await axios.get(generateUrl('/apps/repod/fetch?url={url}', { url: this.url }))
			this.feed = podcastData.data.data
		} catch (e) {
			this.failed = true
			console.error(e)
		} finally {
			this.loading = false
		}
	},
}
</script>