Implement multiple authors for lectures (#250)

Co-authored-by: Felix <[email protected]>

Author: Lauritz-Tieste

components/course/Header.vue

@@ -12,7 +12,27 @@
 			<SectionTitle full size="xl" :subheading="category" :heading="title" />
 			<p>
 				{{ t('Body.CreatedBy') }}
-				<span class="text-accent">{{ author }}</span>
+        <span v-if="authors.length === 1">
+          <a class="text-accent" :href="authors[0].url">{{ authors[0].name }}</a>
+        </span>
+        <span v-else-if="authors.length === 2">
+          <a class="text-accent" :href="authors[0].url">{{ authors[0].name }}</a>
+          {{ t('Body.And') }}
+          <a class="text-accent" :href="authors[1].url">{{ authors[1].name }}</a>
+        </span>
+        <span v-else>
+          <template v-for="(author, index) in authors">
+            <template v-if="index !== authors.length - 1">
+              <span>
+                <a class="text-accent" :href="author.url">{{ author.name }}</a>,
+              </span>
+            </template>
+            <template v-else>
+              {{ t('Body.And') }}
+              <a class="text-accent" :href="author.url">{{ author.name }}</a>
+            </template>
+          </template>
+        </span>
 			</p>
 		</div>
 
@@ -47,8 +67,8 @@ export default defineComponent({
       return props.data?.title ?? '';
     });
 
-    const author = computed(() => {
-      return props.data?.author ?? '';
+    const authors = computed(() => {
+      return props.data?.authors ?? '';
     });
 
     const lastUpdated = computed(() => {
@@ -59,7 +79,7 @@ export default defineComponent({
       return `${t(month.string).substring(0, 3)}, ${year}`;
     });
 
-    return { image, title, category, author, lastUpdated, t };
+    return { image, title, category, authors, lastUpdated, t };
   },
 });
 </script>

locales/de.json

@@ -453,6 +453,7 @@
     "GetMorphcoins": "Du willst kein Geld bezahlen? Die Coins kannst du auch auf andere Weise erhalten",
     "MoreComingSoon": "Mehr folgt bald...",
     "CreatedBy": "Erstellt von",
+    "And": "und",
     "LastUpdated": "Zuletzt aktualisiert",
     "VerifyCertificate": "Bitte gib das Zertifikatspasswort ein, um das Zertifikat anzuzeigen.",
     "EnterNewTag": "Gib ein neues Tag ein",

locales/en-US.json

@@ -451,6 +451,7 @@
     "GetMorphcoins": "Don't want to pay? You can get coins by other ways",
     "MoreComingSoon": "More coming soon...",
     "CreatedBy": "Created by",
+    "And": "and",
     "LastUpdated": "Last Updated",
     "VerifyCertificate": "Please enter certificate password in order to view certificate.",
     "EnterNewTag": "Enter a new tag",

types/courseTypes.ts

@@ -1,7 +1,10 @@
-
+type Author = {
+  name: string;
+  url: string;
+};
 
 export class Course{
-  author: string = "";
+  authors: Author[] = [];
   category: string = "";
   description: string = "";
   id: string = "";