From 9edc8b71f74c5b829ecf61702f575973bc5b8aad Mon Sep 17 00:00:00 2001
From: Ludoviko <me@ludoviko.ch>
Date: Sun, 22 May 2022 17:15:42 +0100
Subject: [PATCH] Updated LinkCard

LinkCard now uses vue-router when it is an internal resource
---
 components/LinkCard.vue   | 27 ++++++++++++++++++++++++---
 pages/index.vue           | 15 ++++++---------
 pages/utilities/index.vue |  2 +-
 3 files changed, 31 insertions(+), 13 deletions(-)

diff --git a/components/LinkCard.vue b/components/LinkCard.vue
index 96d857f..e64164f 100644
--- a/components/LinkCard.vue
+++ b/components/LinkCard.vue
@@ -1,12 +1,34 @@
 <template>
-	<a class="card" :href="link">
+	<a v-if="isExternal" target="_blank" rel="nofollow noreferrer" class="card" :href="to">
 		<p>{{ title }} →</p>
 	</a>
+	<router-link v-else v-bind="$props" class="card">
+		<p>{{ title }} →</p>
+	</router-link>
 </template>
 
 <script>
+import { RouterLink } from 'vue-router';
+
 export default {
-	props: ['title', 'link'],
+	props: {
+		title: {
+			type: String,
+			required: true,
+		},
+		to: {
+			type: String,
+			required: true,
+		},
+		...RouterLink.props,
+	},
+	computed: {
+		isExternal() {
+			return (
+				typeof this.to === 'string' && this.to.startsWith('http')
+			);
+		},
+	},
 };
 </script>
 
@@ -45,6 +67,5 @@ export default {
 		padding: 1.25rem;
 		width: 9rem;
 	}
-	
 }
 </style>
diff --git a/pages/index.vue b/pages/index.vue
index 1cfa55f..3b98699 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -13,25 +13,22 @@ import '@/assets/styles/index.scss';
 		<div class="grid">
 			<LinkCard
 				title="Watch"
-				link="https://www.netflix.com/title/81210762"
+				to="https://www.netflix.com/title/81210762"
 			/>
-			<LinkCard title="Discord" link="https://discord.gg/hyKVDeRJ8Y" />
+			<LinkCard title="Discord" to="https://discord.gg/hyKVDeRJ8Y" />
 			<LinkCard
 				title="Reddit"
-				link="https://www.reddit.com/r/YoungRoyals/"
+				to="https://www.reddit.com/r/YoungRoyals/"
 			/>
 			<LinkCard
 				title="Babbel (ref)"
-				link="https://www.talkable.com/x/IchxFl"
+				to="https://www.talkable.com/x/IchxFl"
 			/>
 			<LinkCard
 				title="Matrix →"
-				link="https://matrix.to/#/#young-royals:matrix.org"
-			/>
-			<LinkCard
-				title="Discord Utilities"
-				link="/utilities"
+				to="https://matrix.to/#/#young-royals:matrix.org"
 			/>
+			<LinkCard title="Discord Utilities" to="/utilities" />
 		</div>
 	</div>
 </template>
diff --git a/pages/utilities/index.vue b/pages/utilities/index.vue
index 2240344..b43608b 100644
--- a/pages/utilities/index.vue
+++ b/pages/utilities/index.vue
@@ -3,7 +3,7 @@
 		<h1 class="title">Utilities for the Discord Server</h1>
         <LinkCard
             title="Birthdays"
-            link="/utilities/birthdays"
+            to="/utilities/birthdays"
          />
 	</div>
 </template>