Display structured contacts metadata field

content/0examples/non-vue/index.md

@@ -9,7 +9,10 @@ date: 2021-04-25
 days: 1
 continent: EU
 contact: Strong Mad
-contact_url: https://example.com
+contacts:
+- name: Person
+  email: [email protected]
+  url: https://example.com
 authors: Marzipan
 location:
   name: Strong Badia

content/0examples/vue-remark/index.md

@@ -9,7 +9,10 @@ date: 2021-04-25
 days: 2
 continent: EU
 contact: people
-contact_url: https://example.com
+contacts:
+- name: Person
+  email: [email protected]
+  url: https://example.com
 authors: Jose and me
 location:
   name: Strong Badia

src/components/ArticleHeader.vue

@@ -16,10 +16,9 @@
                 <a v-if="article.location.url" :href="article.location.url">{{ article.location.name }}</a>
                 <template v-else>{{ article.location.name }}</template>
             </li>
-            <li v-if="article.contact">
+            <li v-if="article.contact || article.contacts">
                 <span class="metakey">Contact: </span>
-                <a v-if="article.contact_url" :href="article.contact_url">{{ article.contact }}</a>
-                <template v-else>{{ article.contact }}</template>
+                <Contacts :contact="article.contact" :contacts="article.contacts" />
             </li>
             <li v-if="article.links.length > 0">
                 <span class="metakey">Links: </span>
@@ -46,6 +45,7 @@
 
 <script>
 import Redirect from "@/components/Redirect";
+import Contacts from "@/components/Contacts";
 import { ensureDomain, humanDateSpan } from "~/lib/utils.js";
 import { getImage } from "~/lib/pages.mjs";
 import CONFIG from "~/../config.json";
@@ -58,6 +58,7 @@ const SOCIAL_TAGS_METADATA = [
 export default {
     components: {
         Redirect,
+        Contacts,
     },
     metaInfo() {
         let info = {};
@@ -123,7 +124,7 @@ export default {
             return dayjs(this.article.end);
         },
         articleDateStr() {
-            return this.startDate.format("MMMM D YYYY");
+            return this.startDate.format("MMMM D, YYYY");
         },
         image() {
             return getImage(this.article.image, this.article.images);

src/components/ArticleTableEvents.vue

@@ -36,16 +36,18 @@
                     title="Training offered by GTN Member"
                 />
             </a>
-            {{ article.contact }}
+            <Contacts :contact="article.contact" :contacts="article.contacts" />
         </td>
     </tr>
 </template>
 
 <script>
 import Continent from "@/components/Continent";
+import Contacts from "@/components/Contacts";
 export default {
     components: {
         Continent,
+        Contacts,
     },
     props: {
         article: { type: Object, required: true },

src/components/Contacts.vue

@@ -0,0 +1,23 @@
+<template>
+    <span>
+        <template v-if="contact">
+            {{ contact }}
+        </template>
+        <template v-else-if="contacts && contacts.length > 0" v-for="(thisContact, i) of contacts">
+            <a v-if="thisContact.email" :href="`mailto:${thisContact.email}`" :key="thisContact.email">
+                {{ thisContact.name }}</a
+            ><a v-else-if="thisContact.url" :href="thisContact.url" :key="thisContact.url"> {{ thisContact.name }}</a
+            ><template v-else> {{ thisContact.name }}</template
+            ><template v-if="i < contacts.length - 1">, </template>
+        </template>
+    </span>
+</template>
+
+<script>
+export default {
+    props: {
+        contact: { type: String, required: false, default: "" },
+        contacts: { type: Array, required: false, default: () => [] },
+    },
+};
+</script>

src/components/pages/Events.vue

@@ -126,6 +126,11 @@ fragment articleFields on Article {
     }
     continent
     contact
+    contacts {
+        name
+        email
+        url
+    }
     external_url
     gtn
     links {

src/components/pages/EventsArchive.vue

@@ -76,6 +76,11 @@ query($subsite: String, $mainPath: String, $footerPath: String) {
                 }
                 continent
                 contact
+                contacts {
+                    name
+                    email
+                    url
+                }
                 external_url
                 gtn
                 links {

src/components/pages/TaggedEvents.vue

@@ -115,6 +115,11 @@ fragment articleFields on Article {
     }
     continent
     contact
+    contacts {
+        name
+        email
+        url
+    }
     external_url
     gtn
     links {

src/templates/Article.vue

@@ -19,7 +19,11 @@ query Article($path: String!) {
         date (format: "YYYY-MM-DD")
         end (format: "YYYY-MM-DD")
         contact
-        contact_url
+        contacts {
+            name
+            email
+            url
+        }
         authors
         location {
             name

src/templates/VueArticle.vue

@@ -33,7 +33,11 @@ query VueArticle($path: String!) {
         date (format: "YYYY-MM-DD")
         end (format: "YYYY-MM-DD")
         contact
-        contact_url
+        contacts {
+            name
+            email
+            url
+        }
         authors
         location {
             name