Begin Discover

.eslintrc.js

@@ -2,4 +2,7 @@ module.exports = {
 	extends: [
 		'@nextcloud',
 	],
+	rules: {
+		'sort-imports': 'error',
+	},
 }

Dockerfile

@@ -3,6 +3,7 @@ FROM nextcloud:27
 ENV NEXTCLOUD_UPDATE 1
 ENV NEXTCLOUD_ADMIN_USER repod
 ENV NEXTCLOUD_ADMIN_PASSWORD repod
+ENV NEXTCLOUD_INIT_HTACCESS 1
 ENV SQLITE_DATABASE repod
 ENV GPODDERSYNC_VERSION 3.8.1
 

package-lock.json

@@ -11,10 +11,12 @@
       "dependencies": {
         "@nextcloud/axios": "^2.3.0",
         "@nextcloud/dialogs": "^4.1.0",
+        "@nextcloud/l10n": "^2.2.0",
         "@nextcloud/router": "^2.1.2",
         "@nextcloud/vue": "^7.12.0",
         "vue": "^2",
-        "vue-material-design-icons": "^5.2.0"
+        "vue-material-design-icons": "^5.2.0",
+        "vue-router": "^3"
       },
       "devDependencies": {
         "@nextcloud/babel-config": "^1.0.0",

package.json

@@ -20,10 +20,12 @@
   "dependencies": {
     "@nextcloud/axios": "^2.3.0",
     "@nextcloud/dialogs": "^4.1.0",
+    "@nextcloud/l10n": "^2.2.0",
     "@nextcloud/router": "^2.1.2",
     "@nextcloud/vue": "^7.12.0",
     "vue": "^2",
-    "vue-material-design-icons": "^5.2.0"
+    "vue-material-design-icons": "^5.2.0",
+    "vue-router": "^3"
   },
   "browserslist": [
     "extends @nextcloud/browserslist-config"

src/App.vue

@@ -2,12 +2,15 @@
 	<NcContent app-name="repod">
 		<NcAppNavigation>
 			<NcAppContentList>
-				<NcAppNavigationNew :text="t('repod', 'Add a podcast')">
+				<router-link to="/discover">
-					<template #icon>
+					<NcAppNavigationNew :text="t('repod', 'Add a podcast')">
-						<Plus :size="20" />
+						<template #icon>
-					</template>
+							<Plus :size="20" />
-				</NcAppNavigationNew>
+						</template>
-				<ul>
+					</NcAppNavigationNew>
+				</router-link>
+				<NcLoadingIcon v-if="loading" />
+				<ul v-if="!loading">
 					<NcAppNavigationItem v-for="subscription in subscriptions"
 						:key="subscription.id"
 						:loading="subscription.loading"
@@ -19,17 +22,27 @@
 				</ul>
 			</NcAppContentList>
 		</NcAppNavigation>
-		<NcAppContent />
+		<NcAppContent>
+			<router-view />
+		</NcAppContent>
 	</NcContent>
 </template>
 
 <script>
-import { NcAppContent, NcContent, NcAppContentList, NcAppNavigation, NcAppNavigationItem, NcAppNavigationNew } from '@nextcloud/vue'
+import '@nextcloud/dialogs/dist/index.css'
+import {
+	NcAppContent,
+	NcAppContentList,
+	NcAppNavigation,
+	NcAppNavigationItem,
+	NcAppNavigationNew,
+	NcContent,
+	NcLoadingIcon,
+} from '@nextcloud/vue'
 import Plus from 'vue-material-design-icons/Plus.vue'
 import axios from '@nextcloud/axios'
-import { showError } from '@nextcloud/dialogs'
 import { generateUrl } from '@nextcloud/router'
-import '@nextcloud/dialogs/dist/index.css'
+import { showError } from '@nextcloud/dialogs'
 
 export default {
 	name: 'App',
@@ -40,6 +53,7 @@ export default {
 		NcAppNavigationItem,
 		NcAppNavigationNew,
 		NcContent,
+		NcLoadingIcon,
 		Plus,
 	},
 	data() {

src/main.js

@@ -1,7 +1,8 @@
-import { generateFilePath } from '@nextcloud/router'
+import { translatePlural as n, translate as t } from '@nextcloud/l10n'
-
-import Vue from 'vue'
 import App from './App.vue'
+import Vue from 'vue'
+import { generateFilePath } from '@nextcloud/router'
+import router from './router.js'
 
 // eslint-disable-next-line
 __webpack_public_path__ = generateFilePath(appName, '', 'js/')
@@ -10,5 +11,6 @@ Vue.mixin({ methods: { t, n } })
 
 export default new Vue({
 	el: '#content',
+	router,
 	render: h => h(App),
 })

src/router.js

@@ -0,0 +1,18 @@
+import Discover from './views/Discover.vue'
+import Router from 'vue-router'
+import Vue from 'vue'
+import { generateUrl } from '@nextcloud/router'
+
+Vue.use(Router)
+
+const router = new Router({
+	base: generateUrl('apps/repod'),
+	routes: [
+		{
+			path: '/',
+			component: Discover,
+		},
+	],
+})
+
+export default router

src/views/Discover.vue

@@ -0,0 +1,42 @@
+<template>
+	<div class="main">
+		<p>
+			<NcTextField :label="t('repod', 'Find a podcast')">
+				<Magnify />
+			</NcTextField>
+		</p>
+		<p>
+			<span>{{ t('repod', 'Discover') }}</span>
+		</p>
+	</div>
+</template>
+
+<script>
+import Magnify from 'vue-material-design-icons/Magnify.vue'
+import { NcTextField } from '@nextcloud/vue'
+
+export default {
+	name: 'Discover',
+	components: {
+		Magnify,
+		NcTextField,
+	},
+	data() {
+		return {
+
+		}
+	},
+	computed: {
+	},
+	async mounted() {
+	},
+	methods: {
+	},
+}
+</script>
+
+<style scoped>
+    .main {
+        margin: 11px 55px;
+    }
+</style>