From ee5104cd8fac7f9fed8b5df02847e58b66f3c147 Mon Sep 17 00:00:00 2001
From: Devlin Junker <devlin.junker@gmail.com>
Date: Wed, 4 Oct 2023 15:02:39 -0700
Subject: [PATCH 1/2] cleaning up explore page

Signed-off-by: Devlin Junker <devlin.junker@gmail.com>
---
 src/components/AddFeed.vue        | 13 ++++++++-
 src/components/routes/Explore.vue | 44 ++++++++++++++++++++++---------
 2 files changed, 43 insertions(+), 14 deletions(-)

diff --git a/src/components/AddFeed.vue b/src/components/AddFeed.vue
index 77f5e5b6e..79f359b24 100644
--- a/src/components/AddFeed.vue
+++ b/src/components/AddFeed.vue
@@ -127,6 +127,15 @@ export default Vue.extend({
 		NcButton,
 		NcSelect,
 	},
+	props: {
+		feed: {
+			type: Object,
+			required: false,
+			default: () => {
+				return { url: '' }
+			},
+		},
+	},
 	data: (): AddFeedState => {
 		return {
 			folder: undefined,
@@ -152,7 +161,9 @@ export default Vue.extend({
 		},
 	},
 	created() {
-		if (this.$route.query.subscribe_to) {
+		if (this.feed.feed) {
+			this.feedUrl = this.feed.feed
+		} else if (this.$route.query.subscribe_to) {
 			this.feedUrl = this.$route.query.subscribe_to as string
 		}
 	},
diff --git a/src/components/routes/Explore.vue b/src/components/routes/Explore.vue
index 5edca3dfe..837314f27 100644
--- a/src/components/routes/Explore.vue
+++ b/src/components/routes/Explore.vue
@@ -1,9 +1,13 @@
 <template>
-	<div id="explore">
+	<div id="explore" style="display: flex; justify-items: center;">
 		<AddFeed v-if="showAddFeed" :feed="feed" @close="closeShowAddFeed()" />
-		<div class="grid-container">
+		<div v-if="!exploreSites" style="margin: auto;">
+			{{ t('news', 'No feeds found to add') }}
+		</div>
+		<div v-else class="grid-container" style="display:flex;flex-wrap: wrap;">
 			<div v-for="entry in exploreSites"
 				:key="entry.title"
+				style="flex-grow: 1; max-width: calc(50% - 24px); min-width: 300px; display: flex; flex-direction: column;"
 				class="explore-feed grid-item">
 				<h2 v-if="entry.favicon"
 					class="explore-title"
@@ -15,14 +19,14 @@
 				<h2 v-if="!entry.favicon" class="icon-rss explore-title">
 					{{ entry.title }}
 				</h2>
-				<div class="explore-content">
+				<div class="explore-content" style="flex-grow: 1">
 					<p>{{ entry.description }}</p>
 
 					<div class="explore-logo">
 						<img :src="entry.image">
 					</div>
 				</div>
-				<NcButton @click="subscribe(entry.feed)">
+				<NcButton style="max-width: 100%;" @click="subscribe(entry)">
 					{{ t("news", "Subscribe to") }} {{ entry.title }}
 				</NcButton>
 			</div>
@@ -48,8 +52,12 @@ const ExploreComponent = Vue.extend({
 		NcButton,
 		AddFeed,
 	},
-	data: () => {
-		const exploreSites: ExploreSite[] = []
+	data: (): {
+		exploreSites: ExploreSite[] | undefined;
+		feed: Feed;
+		showAddFeed: boolean;
+	} => {
+		const exploreSites: ExploreSite[] | undefined = []
 		const feed: Feed = {} as Feed
 		const showAddFeed = false
 
@@ -68,15 +76,25 @@ const ExploreComponent = Vue.extend({
 			const settings = await axios.get(router.generateUrl('/apps/news/settings'))
 
 			const exploreUrl = settings.data.settings?.exploreUrl + 'feeds.en.json'
-			const explore = await axios.get(exploreUrl)
+			try {
+				const explore = await axios.get(exploreUrl)
+
+				Object.keys(explore.data).forEach((key) =>
+					explore.data[key].forEach((value: ExploreSite) => {
+						if (this.exploreSites) {
+							this.exploreSites.push(value)
+						} else {
+							this.exploreSites = [value]
+						}
+					},
+					),
+				)
+			} catch {
+				this.exploreSites = undefined
+			}
 
-			Object.keys(explore.data).forEach((key) =>
-				explore.data[key].forEach((value: ExploreSite) =>
-					this.exploreSites.push(value),
-				),
-			)
 		},
-		async subscribe(feed: Feed) {
+		subscribe(feed: Feed) {
 			this.feed = feed
 			this.showAddFeed = true
 		},

From bbffc0bcb161223f8bda26cc1a2c494b0bfc3798 Mon Sep 17 00:00:00 2001
From: Devlin Junker <devlin.junker@gmail.com>
Date: Tue, 10 Oct 2023 14:02:47 -0700
Subject: [PATCH 2/2] copy files from explore.scss file

Signed-off-by: Devlin Junker <devlin.junker@gmail.com>
---
 lib/Explore/feeds/feeds.en.json   |  2 -
 src/components/routes/Explore.vue | 79 +++++++++++++++++++++++++++++--
 2 files changed, 74 insertions(+), 7 deletions(-)

diff --git a/lib/Explore/feeds/feeds.en.json b/lib/Explore/feeds/feeds.en.json
index d855b243c..9ccd2ac02 100644
--- a/lib/Explore/feeds/feeds.en.json
+++ b/lib/Explore/feeds/feeds.en.json
@@ -1,7 +1,6 @@
 {
     "Nextcloud": [{
         "title": "Nextcloud News",
-        "favicon": "https://nextcloud.com/wp-content/themes/next/assets/img/common/favicon-touch.png",
         "url": "https://nextcloud.com/news/",
         "feed": "https://nextcloud.com/blog/feed",
         "description": "See what is going on in and around Nextcloud",
@@ -9,7 +8,6 @@
     },
 	{
 		"title": "Nextcloud Podcast",
-		"favicon": "https://nextcloud.com/wp-content/themes/next/assets/img/common/favicon-touch.png",
 		"url": "https://nextcloud.com/podcast/",
 		"feed": "https://nextcloud.com/podcast-feed.rss",
 		"description": "Digital Sovereignty, self hosting, privacy and more",
diff --git a/src/components/routes/Explore.vue b/src/components/routes/Explore.vue
index 837314f27..7ba2bd3e9 100644
--- a/src/components/routes/Explore.vue
+++ b/src/components/routes/Explore.vue
@@ -1,16 +1,15 @@
 <template>
-	<div id="explore" style="display: flex; justify-items: center;">
+	<div id="explore">
 		<AddFeed v-if="showAddFeed" :feed="feed" @close="closeShowAddFeed()" />
 		<div v-if="!exploreSites" style="margin: auto;">
 			{{ t('news', 'No feeds found to add') }}
 		</div>
-		<div v-else class="grid-container" style="display:flex;flex-wrap: wrap;">
+		<div v-else class="grid-container">
 			<div v-for="entry in exploreSites"
 				:key="entry.title"
-				style="flex-grow: 1; max-width: calc(50% - 24px); min-width: 300px; display: flex; flex-direction: column;"
 				class="explore-feed grid-item">
 				<h2 v-if="entry.favicon"
-					class="explore-title"
+					class="explore-title icon"
 					:style="{ backgroundImage: 'url(' + entry.favicon + ')' }">
 					<a target="_blank" rel="noreferrer" :href="entry.url">
 						{{ entry.title }}
@@ -22,7 +21,7 @@
 				<div class="explore-content" style="flex-grow: 1">
 					<p>{{ entry.description }}</p>
 
-					<div class="explore-logo">
+					<div v-if="entry.image" class="explore-logo">
 						<img :src="entry.image">
 					</div>
 				</div>
@@ -107,3 +106,73 @@ const ExploreComponent = Vue.extend({
 export default ExploreComponent
 
 </script>
+
+<style scoped>
+#explore {
+    height: 100%;
+    width: 100%;
+    padding: 45px 0 45px 45px;
+		display: flex;
+		justify-items: center;
+}
+
+#explore .grid-container {
+	display:flex;
+	flex-wrap: wrap;
+}
+
+#explore .grid-item {
+    width: 300px;
+    border: 2px solid var(--color-border);
+    border-radius: var(--border-radius-large);
+    margin: 0 24px 24px 0;
+    padding: 24px;
+		flex-grow: 1;
+		max-width: calc(50% - 24px);
+		display: flex;
+		flex-direction: column;
+}
+
+#explore .grid-item .explore-title {
+    background-repeat: no-repeat;
+    background-position: 0 center;
+    background-size: 24px;
+}
+
+#explore .grid-item .explore-title.icon {
+	padding-left: 32px;
+}
+
+#explore .grid-item .explore-title a {
+    word-wrap: break-word;
+}
+
+#explore .grid-item .explore-title a:hover,
+#explore .grid-item .explore-title a:focus {
+    text-decoration: underline;
+}
+
+#explore .grid-item .explore-logo {
+    text-align: center;
+    margin-top: 25px;
+}
+
+#explore .grid-item .explore-logo img {
+    width: 100%;
+}
+
+#explore .grid-item .explore-subscribe {
+    margin-top: 16px;
+    max-width: 100%;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+#explore .grid-item .explore-content {
+	justify-content: center;
+  display: flex;
+  flex-direction: column;
+	margin-bottom: 10px;
+}
+</style>