finished works page for the most part and started on events page

portfolio-nuxt/components/IconButton.vue

@@ -2,12 +2,16 @@
     <div class="p-1">
         <div v-show="visible" class="bg-black rounded-full text-xs" >
 
-            <NuxtLink v-if="type === 'score'" class="inline-flex p-1" :to="'/' + bucket + '/' + work.score">
-                <Icon name="ion:book-outline" color="white" />
+            <NuxtLink v-if="type === 'document'" class="inline-flex p-1" :to="link">
+                <Icon name="ion:book-sharp" color="white" />
             </NuxtLink>
 
-            <NuxtLink v-else-if="type === 'pub'" class="inline-flex p-1">
-                <Icon name="ion:book-outline" color="white" />
+            <NuxtLink v-else-if="type === 'buy'" class="inline-flex p-1" :to="link">
+                <Icon name="bxs:purchase-tag" color="white" />
+            </NuxtLink>
+
+            <NuxtLink v-else-if="type === 'discogs'" class="inline-flex p-1" :to="link">
+                <Icon name="simple-icons:discogs" color="white" />
             </NuxtLink>
 
             <button @click="audioPlayerStore.setSoundCloudTrackID(work.soundcloud_trackid)" v-else-if="type === 'audio'" class="inline-flex p-1">
@@ -37,6 +41,6 @@
 
 <script>
     export default {
-        props: ['type', 'work', 'bucket', 'visible']
+        props: ['type', 'work', 'visible', 'link']
     }
 </script>

portfolio-nuxt/pages/[files]/[filename].vue

@@ -1,6 +1,6 @@
 <template>
     <div class="flex min-h-full items-center justify-center text-center">
-        <embed :src="'https://unboundedpress.org/api/scores.files/' + metadata._id.$oid + '/binary'" class="w-[85%] h-[88vh]" />
+        <embed :src="'https://unboundedpress.org/api/' + route.params.files + '.files/' + metadata._id.$oid + '/binary'" class="w-[85%] h-[88vh]" />
     </div>
 </template>
 
@@ -8,7 +8,7 @@
 
 const route = useRoute()
 
-const { data: metadata } = await useFetch('https://unboundedpress.org/api/scores.files?filter={"filename":"' + route.params.filename + '"}', {
+const { data: metadata } = await useFetch('https://unboundedpress.org/api/' + route.params.files + '.files?filter={"filename":"' + route.params.filename + '"}', {
     //lazy: true,
     //server: false,
     transform: (metadata) => {

portfolio-nuxt/pages/events.vue

@@ -0,0 +1,58 @@
+<template>
+    <div class="bg-zinc-100 rounded-lg m-5 grid grid-cols-2 gap-10 bg-white divide-x divide-solid divide-black p-4">
+    
+        <div class="px-5">
+            <p class="text-lg">performances</p>
+
+            <div class="leading-tight py-2 ml-3 text-sm" v-for="item in events">
+                <div class="gap-1">
+                    <div>
+                        {{ item.formatted_date }}: {{item.venue.city}}, {{item.venue.state}}
+                        <div class="ml-4 text-[#7F7F7F]">
+                            {{ item.venue.name }}
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div class="px-5">
+            <p class="text-lg">lectures</p>
+
+            <div class="leading-tight py-2 ml-3 text-sm" v-for="item in lectures">
+                <div class="gap-1">
+                    <div>
+                        {{ item.formatted_date }}: {{item.location}}
+                        <div class="ml-4 text-[#7F7F7F]">
+                            {{ item.title }}
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+
+<script setup>
+    const { data: events } = await useFetch('https://unboundedpress.org/api/events?pagesize=200', {
+        transform: (events) => {
+            for (const event of events) {
+                let date = new Date(event.start_date.$date)
+                event.formatted_date = ("0" + (date.getMonth() + 1)).slice(-2) + "." + ("0" + date.getDate()).slice(-2) + "." + date.getFullYear()
+            }
+            return events.sort((a,b) => b.start_date.$date - a.start_date.$date)
+        }
+    })
+
+    const { data: lectures } = await useFetch('https://unboundedpress.org/api/talks?pagesize=200', {
+        transform: (events) => {
+            for (const event of events) {
+                let date = new Date(event.date)
+                event.formatted_date = ("0" + (date.getMonth() + 1)).slice(-2) + "." + ("0" + date.getDate()).slice(-2) + "." + date.getFullYear()
+            }
+            return events.sort((a,b) => b.date - a.date)
+        }
+    })
+</script>
+

portfolio-nuxt/pages/index.vue

@@ -1,7 +1,9 @@
 <template>
   <div class="bg-zinc-100 rounded-lg m-5 grid grid-cols-3 gap-10 bg-white divide-x divide-solid divide-black p-4">
+
     <div class="px-5">
       <p class="text-lg">pieces</p>
+
       <div class="py-2 ml-3" v-for="item in works">
         <p class="font-thin">{{ item.year }}</p>
         <div class="leading-tight py-1 ml-3" v-for="work in item.works">
@@ -9,7 +11,7 @@
             <p class="italic text-sm">{{ work.title }}</p>
              <div class="grid grid-cols-[28px_28px_28px_28px]">
 
-              <IconButton :visible="work.score" type="score" bucket="scores" :work="work"></IconButton>
+              <IconButton :visible="work.score" type="document" :work="work" :link="work.score"></IconButton>
  
               <IconButton :visible="work.soundcloud_trackid" type="audio" :work="work"></IconButton>
 
@@ -41,7 +43,7 @@
             </div>
           </div>
           <div>
-            <IconButton :visible=true type="pub" class="inline-flex p-1"></IconButton>
+            <IconButton :visible=item.entryTags.howpublished type="document" :link="item.entryTags.howpublished" class="inline-flex p-1"></IconButton>
           </div>
         </div>
       </div>
@@ -55,8 +57,13 @@
           <nuxt-img :src="'https://unboundedpress.org/api/album_art.files/' + item.album_art_id + '/binary'" 
           quality="50"/>
         </button>
+        <div class="flex place-content-center place-items-center">
+          <IconButton :visible="item.discogs_id" type="discogs" :work="work" :link="'https://www.discogs.com/release/' + item.discogs_id"></IconButton>
+          <IconButton :visible="item.buy_link" type="buy" :work="work" :link="item.buy_link"></IconButton>
+        </div>
       </div>
     </div>
+    
   </div>
 </template>
 
@@ -67,11 +74,25 @@
 
   const groupBy = (x,f)=>x.reduce((a,b,i)=>((a[f(b,i,x)]||=[]).push(b),a),{});
 
+  const isValidUrl = urlString => {
+    var urlPattern = new RegExp('^(https?:\\/\\/)?'+ // validate protocol
+    '((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|'+ // validate domain name
+    '((\\d{1,3}\\.){3}\\d{1,3}))'+ // validate OR ip (v4) address
+    '(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*'+ // validate port and path
+    '(\\?[;&a-z\\d%_.~+=-]*)?'+ // validate query string
+    '(\\#[-a-z\\d_]*)?$','i'); // validate fragment locator
+	  return !!urlPattern.test(urlString);
+	}
+
+
   const { data: images } = await useFetch('https://unboundedpress.org/api/images.files?pagesize=200')
 
   const { data: works } = await useFetch('https://unboundedpress.org/api/works?pagesize=200', {
     transform: (works) => {
       for (const work of works) {
+        if(work.score){
+          work.score = "/scores/" + work.score
+        }
         if(work.images){
           let image_ids = [];
           for (const image of work.images){
@@ -96,7 +117,18 @@
   //const { data: pubs } = await useFetch('https://unboundedpress.org/api/publications?sort=-entryTags.year&pagesize=200')
   const { data: pubs } = await useFetch('https://unboundedpress.org/api/publications?pagesize=200', {
     transform: (pubs) => {
-      return pubs.sort((a,b) => b.entryTags.year - a.entryTags.year)
+      for (const pub of pubs) {
+        if(pub.entryTags.howpublished && !(isValidUrl(pub.entryTags.howpublished))){
+          pub.entryTags.howpublished = "/pubs/" + pub.entryTags.howpublished
+        }
+      }
+      return pubs.sort((a,b) => {
+        let aPrime = 5000
+        let bPrime = 5000
+        if(a.entryTags.year === 'forthcoming'){aPrime =  5000} else {aPrime = a.entryTags.year}
+        if(b.entryTags.year === 'forthcoming'){bPrime =  5000} else {bPrime = b.entryTags.year}
+        return bPrime - aPrime
+      })
     }
   })
 
@@ -130,12 +162,3 @@
   */
 </script>
 
-<style>
-  .metamask-icon {
-    width:25px;
-    height: 25px;
-    background-size: contain!important;
-    background: url('../../styles/img/metamask-icon.svg');
-    background-repeat: no-repeat;
-  }
-</style>