refactor: 🚚 rework how routing works

appinfo/routes.php

@@ -13,6 +13,7 @@ declare(strict_types=1);
 return [
 	'routes' => [
 		['name' => 'page#index', 'url' => '/', 'verb' => 'GET'],
+		['name' => 'page#feed', 'url' => '/feed/{path}', 'verb' => 'GET', 'requirements' => ['path' => '.+']],
 		['name' => 'episodes#action', 'url' => '/episodes/action', 'verb' => 'GET'],
 		['name' => 'episodes#list', 'url' => '/episodes/list', 'verb' => 'GET'],
 		['name' => 'opml#export', 'url' => '/opml/export', 'verb' => 'GET'],

lib/Controller/PageController.php

@@ -44,4 +44,12 @@ class PageController extends Controller
 
 		return $response;
 	}
+
+	/**
+	 * @NoAdminRequired
+	 * @NoCSRFRequired
+	 */
+	public function feed(): TemplateResponse {
+		return $this->index();
+	}
 }

src/components/Discover/AddRss.vue

@@ -2,7 +2,7 @@
 	<NcAppNavigationList>
 		<NcAppNavigationNewItem
 			:name="t('repod', 'Add a RSS link')"
-			@new-item="addSubscription">
+			@new-item="(url) => $router.push(toFeedUrl(url))">
 			<template #icon>
 				<PlusIcon :size="20" />
 			</template>
@@ -13,7 +13,7 @@
 <script>
 import { NcAppNavigationList, NcAppNavigationNewItem } from '@nextcloud/vue'
 import PlusIcon from 'vue-material-design-icons/Plus.vue'
-import { encodeUrl } from '../../utils/url.js'
+import { toFeedUrl } from '../../utils/url.js'
 
 export default {
 	name: 'AddRss',
@@ -23,9 +23,7 @@ export default {
 		PlusIcon,
 	},
 	methods: {
-		addSubscription(feedUrl) {
-			this.$router.push(encodeUrl(feedUrl))
-		},
+		toFeedUrl,
 	},
 }
 </script>

src/components/Discover/Search.vue

@@ -7,7 +7,7 @@
 				:key="feed.link"
 				:details="formatLocaleDate(new Date(feed.fetchedAtUnix * 1000))"
 				:name="feed.title"
-				:to="toUrl(feed.link)">
+				:to="toFeedUrl(feed.link)">
 				<template #icon>
 					<NcAvatar
 						:display-name="feed.author"
@@ -44,7 +44,7 @@ import { debounce } from '../../utils/debounce.js'
 import { formatLocaleDate } from '../../utils/time.js'
 import { generateUrl } from '@nextcloud/router'
 import { showError } from '../../utils/toast.js'
-import { toUrl } from '../../utils/url.js'
+import { toFeedUrl } from '../../utils/url.js'
 import { useSubscriptions } from '../../store/subscriptions.js'
 
 export default {
@@ -77,7 +77,7 @@ export default {
 	methods: {
 		...mapActions(useSubscriptions, ['fetch']),
 		formatLocaleDate,
-		toUrl,
+		toFeedUrl,
 		async addSubscription(url) {
 			try {
 				await axios.post(

src/components/Discover/Toplist.vue

@@ -4,7 +4,7 @@
 		<Loading v-if="loading" />
 		<ul v-if="!loading">
 			<li v-for="top in tops" :key="top.link">
-				<router-link :to="toUrl(top.link)">
+				<router-link :to="toFeedUrl(top.link)">
 					<img :src="top.imageUrl" :title="top.author" />
 				</router-link>
 			</li>
@@ -17,7 +17,7 @@ import Loading from '../Atoms/Loading.vue'
 import axios from '@nextcloud/axios'
 import { generateUrl } from '@nextcloud/router'
 import { showError } from '../../utils/toast.js'
-import { toUrl } from '../../utils/url.js'
+import { toFeedUrl } from '../../utils/url.js'
 
 export default {
 	name: 'Toplist',
@@ -61,7 +61,7 @@ export default {
 		}
 	},
 	methods: {
-		toUrl,
+		toFeedUrl,
 	},
 }
 </script>

src/components/Feed/Episodes.vue

@@ -8,7 +8,6 @@
 				:active="isCurrentEpisode(episode)"
 				:details="formatLocaleDate(new Date(episode.pubDate?.date))"
 				:force-display-actions="true"
-				:href="$route.href"
 				:name="episode.name"
 				:style="{ opacity: hasEnded(episode) ? 0.4 : 1 }"
 				target="_self"

src/components/Player/Infos.vue

@@ -3,7 +3,7 @@
 		<strong class="pointer" @click="modal = true">
 			{{ episode.name }}
 		</strong>
-		<router-link :to="hash">
+		<router-link :to="toFeedUrl(podcastUrl)">
 			<i>{{ episode.title }}</i>
 		</router-link>
 		<NcModal v-if="modal" @close="modal = false">
@@ -23,7 +23,7 @@
 import Modal from '../Atoms/Modal.vue'
 import { NcModal } from '@nextcloud/vue'
 import { mapState } from 'pinia'
-import { toUrl } from '../../utils/url.js'
+import { toFeedUrl } from '../../utils/url.js'
 import { usePlayer } from '../../store/player.js'
 
 export default {
@@ -37,9 +37,9 @@ export default {
 	}),
 	computed: {
 		...mapState(usePlayer, ['episode', 'podcastUrl']),
-		hash() {
-			return toUrl(this.podcastUrl)
-		},
+	},
+	methods: {
+		toFeedUrl,
 	},
 }
 </script>

src/components/Sidebar/Item.vue

@@ -2,7 +2,7 @@
 	<NcAppNavigationItem
 		:loading="loading"
 		:name="feed ? feed.title : url"
-		:to="hash">
+		:to="toFeedUrl(url)">
 		<template #actions>
 			<NcActionButton
 				:aria-label="t('repod', 'Favorite')"
@@ -48,7 +48,7 @@ import StarRemoveIcon from 'vue-material-design-icons/StarRemove.vue'
 import axios from '@nextcloud/axios'
 import { generateUrl } from '@nextcloud/router'
 import { showError } from '../../utils/toast.js'
-import { toUrl } from '../../utils/url.js'
+import { toFeedUrl } from '../../utils/url.js'
 import { useSubscriptions } from '../../store/subscriptions.js'
 
 export default {
@@ -76,9 +76,6 @@ export default {
 	}),
 	computed: {
 		...mapState(useSubscriptions, ['favs']),
-		hash() {
-			return toUrl(this.url)
-		},
 		isFavorite() {
 			return this.favs.map((fav) => fav.url).includes(this.url)
 		},
@@ -109,6 +106,7 @@ export default {
 			'editFavoriteData',
 			'removeFavorite',
 		]),
+		toFeedUrl,
 		async deleteSubscription() {
 			if (
 				confirm(

src/router.js

@@ -1,11 +1,11 @@
-import { createRouter, createWebHashHistory } from 'vue-router'
+import { createRouter, createWebHistory } from 'vue-router'
 import Discover from './views/Discover.vue'
 import Feed from './views/Feed.vue'
 import Home from './views/Home.vue'
 import { generateUrl } from '@nextcloud/router'
 
 const router = createRouter({
-	history: createWebHashHistory(generateUrl('apps/repod')),
+	history: createWebHistory(generateUrl('apps/repod')),
 	routes: [
 		{
 			path: '/',
@@ -16,7 +16,7 @@ const router = createRouter({
 			component: Discover,
 		},
 		{
-			path: '/:url',
+			path: '/feed/:url',
 			component: Feed,
 		},
 	],

src/utils/url.js

@@ -1,6 +1,6 @@
 export const encodeUrl = (url) => encodeURIComponent(btoa(url))
 export const decodeUrl = (url) => atob(decodeURIComponent(url))
-export const toUrl = (url) => `/${encodeUrl(url)}`
+export const toFeedUrl = (url) => `/feed/${encodeUrl(url)}`
 export const filenameFromUrl = (str) => {
 	const url = new URL(str)
 	return url.pathname.split('/').pop()