[+] Fetch publications

src/components/ZoteroPublication.vue

@@ -1,11 +1,12 @@
 <template>
-    <div id="Publishing">
+    <div id="Publication">
 
     </div>
 </template>
 
 <script lang="ts">
 import {Options, Vue} from 'vue-class-component';
+import {Prop} from "vue-property-decorator";
 
 export interface ZoteroLink
 {
@@ -60,9 +61,9 @@ export interface ZoteroItem
 }
 
 @Options({components: {}})
-export default class Publishing extends Vue
+export default class ZoteroPublicationView extends Vue
 {
-
+    @Prop({required: true}) item!: ZoteroItem
 }
 </script>
 

src/views/About.vue

@@ -1,6 +1,8 @@
 <template>
     <div id="About" class="markdown-content">
         <Dynamic :template="html"></Dynamic>
+
+        <ZoteroPublication v-for="item in publications" :key="item.key" :item="item"/>
     </div>
 </template>
 
@@ -11,11 +13,13 @@ import emojiRegex from 'emoji-regex';
 import {parseExtensions} from '@/scripts/extended_markdown'
 import $ from 'jquery'
 import 'jqueryui'
+import ZoteroPublication, {ZoteroItem} from "@/components/ZoteroPublication.vue";
 
-@Options({components: {}})
+@Options({components: {ZoteroPublication}})
 export default class About extends Vue
 {
     html = ""
+    publications: ZoteroItem[] = []
 
     mounted(): void
     {
@@ -24,6 +28,10 @@ export default class About extends Vue
             .then(it => this.html = marked(parseExtensions(it.replace(emojiRegex(), (emoji) => {
                 return `<span class="emoji">${emoji}</span>`
             }))))
+
+        // Fetch publications from zotero TODO: CDN
+        fetch('https://api.zotero.org/hykilpikonna/publications/items?linkwrap=1&order=date&sort=desc&start=0&include=data&limit=100')
+            .then(it => it.json()).then(it => this.publications = it)
     }
 
     updated(): void