Encode url in base64

src/components/FeedListItem.vue

@@ -1,7 +1,7 @@
 <template>
 	<NcAppNavigationItem :loading="loading"
 		:title="feed ? feed.title : url"
-		:to="`/${url}`">
+		:to="toUrl">
 		<template #icon>
 			<NcAvatar v-if="feed"
 				:display-name="feed.author"
@@ -50,6 +50,11 @@ export default {
 			feed: null,
 		}
 	},
+	computed: {
+		toUrl() {
+			return `/${btoa(this.url)}`
+		},
+	},
 	async mounted() {
 		try {
 			const podcastData = await axios.get(generateUrl('/apps/gpoddersync/personal_settings/podcast_data?url={url}', { url: this.url }))

src/components/Search.vue

@@ -5,7 +5,7 @@
 			:counter-number="feed.episode_count"
 			:details="formatTimeAgo(new Date(feed.lastpub))"
 			:title="feed.title"
-			:to="`/${feed.url}`">
+			:to="toUrl(feed.url)">
 			<template #icon>
 				<NcAvatar :display-name="feed.author"
 					:is-no-user="true"
@@ -66,6 +66,9 @@ export default {
 				showError(t('Could not fetch search results'))
 			}
 		}, 200),
+		toUrl(url) {
+			return `/${btoa(url)}`
+		},
 		formatTimeAgo,
 		generateUrl,
 	},

src/router.js

@@ -14,7 +14,7 @@ const router = new Router({
 			component: Discover,
 		},
 		{
-			path: '/:feedUrl',
+			path: '/:url',
 			component: Feed,
 		},
 	],

src/views/Feed.vue

@@ -1,10 +1,70 @@
 <template>
-	<span>oui</span>
+	<fragment>
+		<NcLoadingIcon v-if="loading" />
+		<NcEmptyContent v-if="failed" :title="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>
+				<i>{{ feed.description }}</i>
+			</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: {},
+	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/gpoddersync/personal_settings/podcast_data?url={url}', { url: this.url }))
+			this.feed = podcastData.data.data
+		} catch (e) {
+			this.failed = true
+			console.error(e)
+		} finally {
+			this.loading = false
+		}
+	},
 }
 </script>