Use vue-richtext to render link preview

Signed-off-by: Carl Schwan <carl@carlschwan.eu>

3 files changed, 20 insertions, 10 deletions

diff --git a/src/App.vue b/src/App.vue
index b9108f50..b9c46e25 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -235,14 +235,14 @@ export default {
 <style scoped>
 	#app-content-vue .social__wrapper {
 		padding: 15px;
-		max-width: 630px;
+		max-width: 800px;
 		margin: auto;
 	}
 
 	.setup {
 		margin: 0 auto !important;
 		padding: 15px;
-		max-width: 630px;
+		max-width: 800px;
 	}
 
 	.setup input[type=url] {
diff --git a/src/components/TimelinePost.vue b/src/components/TimelinePost.vue
index eac39e4d..cb3db859 100644
--- a/src/components/TimelinePost.vue
+++ b/src/components/TimelinePost.vue
@@ -25,7 +25,10 @@
 		</div>
 		<!-- eslint-disable-next-line vue/no-v-html -->
 		<div v-if="item.content" class="post-message">
-			<MessageContent :source="source" />
+			<RichText :text="source"
+				:autolink="true"
+				:reference-limit="2"
+				:arguments="richParameters" />
 		</div>
 		<!-- eslint-disable-next-line vue/no-v-html -->
 		<div v-else class="post-message" v-html="item.actor_info.summary" />
@@ -91,6 +94,7 @@ import Logger from '../logger'
 import MessageContent from './MessageContent'
 import moment from '@nextcloud/moment'
 import { generateUrl } from '@nextcloud/router'
+import RichText from '@nextcloud/vue-richtext'
 
 pluginMention(linkify)
 
@@ -106,6 +110,7 @@ export default {
 		Reply,
 		Heart,
 		HeartOutline,
+		RichText,
 	},
 	mixins: [currentUser],
 	props: {
@@ -122,11 +127,10 @@ export default {
 		source() {
 			if (!this.item.source && this.item.content) {
 				// local posts don't have a source json
-				return {
-					content: this.item.content,
-					tag: []
-				}
+				console.debug(this.item.content)
+				return this.item.content
 			}
+			console.debug(JSON.parse(this.item.source))
 			return JSON.parse(this.item.source)
 		},
 		avatarUrl() {
@@ -146,7 +150,10 @@ export default {
 				return false
 			}
 			return !!this.item.action.values.liked
-		}
+		},
+		richParameters() {
+			return {}
+		},
 	},
 	methods: {
 		/**
@@ -210,6 +217,7 @@ export default {
 }
 </script>
 <style scoped lang="scss">
+	@import '@nextcloud/vue-richtext/dist/style.css';
 	.post-content {
 		padding: 4px 4px 4px 8px;
 		font-size: 15px;
@@ -217,6 +225,10 @@ export default {
 		position: relative;
 		width: 100%;
 
+		::v-deep a.widget-default {
+			text-decoration: none !important;
+		}
+
 		&:hover {
 			border-radius: 8px;
 			background-color: var(--color-background-hover);
diff --git a/src/views/Timeline.vue b/src/views/Timeline.vue
index 95828b63..a509fc8a 100644
--- a/src/views/Timeline.vue
+++ b/src/views/Timeline.vue
@@ -32,7 +32,6 @@
 <style scoped>
 
 	.social__welcome {
-		max-width: 600px;
 		margin: 15px auto;
 		padding: 15px;
 		border-bottom: 1px solid var(--color-border);
@@ -68,7 +67,6 @@
 	}
 
 	.social__timeline {
-		max-width: 600px;
 		margin: 15px auto;
 	}