From a3a64a5913464c73a5e93396ebcdbb7840bfdb61 Mon Sep 17 00:00:00 2001
From: mwinter <mwinter@unboundedpress.org>
Date: Mon, 19 Jun 2023 14:30:09 +0200
Subject: [PATCH] more final tweaks in prep for deployment

---
 docker-compose.yml                            |  4 +-
 .../components/Collapsible/Collapsible.vue    |  7 ++-
 portfolio-nuxt/components/ImageSlider.vue     |  2 -
 portfolio-nuxt/components/Modal/Backdrop.vue  |  2 +-
 portfolio-nuxt/components/Modal/Modal.vue     |  6 +--
 portfolio-nuxt/layouts/default.vue            |  8 +--
 portfolio-nuxt/pages/about.vue                | 12 ++---
 portfolio-nuxt/pages/events.vue               | 51 ++++++++++---------
 portfolio-nuxt/pages/index.vue                |  6 ++-
 9 files changed, 54 insertions(+), 44 deletions(-)

diff --git a/docker-compose.yml b/docker-compose.yml
index 532127b..ef72c9d 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -86,7 +86,9 @@ services:
     # To rebuild the site and the server run this
     #command: bash -c "npm run build && node .output/server/index.mjs"
     # To just start the server run this
-    command: bash -c "node .output/server/index.mjs"
+    #command: bash -c "node .output/server/index.mjs"
+    # To start the server in dev mode
+    command: bash -c "yarn dev -o"
     volumes:
       #- portfolio-nuxt:/src/node_modules
       - ./portfolio-nuxt:/src
diff --git a/portfolio-nuxt/components/Collapsible/Collapsible.vue b/portfolio-nuxt/components/Collapsible/Collapsible.vue
index b17e7ea..e74556d 100644
--- a/portfolio-nuxt/components/Collapsible/Collapsible.vue
+++ b/portfolio-nuxt/components/Collapsible/Collapsible.vue
@@ -2,6 +2,7 @@
 import { Disclosure, DisclosureButton, DisclosurePanel } from '@headlessui/vue'
 import { ref, toRefs, watch } from 'vue'
 import CollapseTransition from './CollapseTransition.vue'
+import Modal from '../Modal/Modal.vue';
 
 const props = withDefaults(
   defineProps<{
@@ -70,12 +71,14 @@ const toggle = () => {
       type="button"
       @click="toggle"
     >
-      <slot name="title"></slot>
+    <div class="inline-flex w-full">
       <Icon
         name="heroicons:chevron-down"
-        :class="open ? 'transform rotate-180' : ''"
+        :class="isOpen ? 'transform rotate-180' : ''"
         class="w-5 h-5"
       />
+      <slot name="title"></slot>
+    </div>
     </DisclosureButton>
     <CollapseTransition>
       <div v-show="isOpen">
diff --git a/portfolio-nuxt/components/ImageSlider.vue b/portfolio-nuxt/components/ImageSlider.vue
index abd6319..aee23e4 100644
--- a/portfolio-nuxt/components/ImageSlider.vue
+++ b/portfolio-nuxt/components/ImageSlider.vue
@@ -23,10 +23,8 @@
     >
 
       <SwiperSlide v-for="image in gallery" class="p-10 bg-zinc-100">
-        <div class="place-items-center">
           <nuxt-img :src="'https://unboundedpress.org/api/' + bucket + '.files/' + image.image_id + '/binary'" 
           quality="50"/>
-        </div>
       </SwiperSlide>
     </Swiper>
   </template>
diff --git a/portfolio-nuxt/components/Modal/Backdrop.vue b/portfolio-nuxt/components/Modal/Backdrop.vue
index f59293c..6a14409 100644
--- a/portfolio-nuxt/components/Modal/Backdrop.vue
+++ b/portfolio-nuxt/components/Modal/Backdrop.vue
@@ -1,3 +1,3 @@
 <template>
-  <div class="fixed inset-0 bg-black/50 z-5 transition duration-300" />
+  <div class="fixed inset-0 bg-black/50 z-15 transition duration-300" />
 </template>
diff --git a/portfolio-nuxt/components/Modal/Modal.vue b/portfolio-nuxt/components/Modal/Modal.vue
index 957bd45..9c0e6f0 100644
--- a/portfolio-nuxt/components/Modal/Modal.vue
+++ b/portfolio-nuxt/components/Modal/Modal.vue
@@ -59,11 +59,11 @@ provide('modal', api)
 </script>
 
 <template>
-  <ClientOnly>
+  
     <slot name="activator" :open="openModal" :on="{ click: openModal }" />
 
     <TransitionRoot appear :show="isOpen" as="template">
-      <Dialog as="div" class="relative z-10" @close="onModalClose">
+      <Dialog as="div" class="relative z-20" @close="onModalClose">
         <TransitionChild
           as="template"
           enter="duration-300 ease-out"
@@ -106,5 +106,5 @@ provide('modal', api)
         </div>
       </Dialog>
     </TransitionRoot>
-  </ClientOnly>
+  
 </template>
diff --git a/portfolio-nuxt/layouts/default.vue b/portfolio-nuxt/layouts/default.vue
index 4710548..784818a 100644
--- a/portfolio-nuxt/layouts/default.vue
+++ b/portfolio-nuxt/layouts/default.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="font-thin sticky top-0 bg-white p-2">
+  <div class="font-thin sticky top-0 bg-white p-2 z-20">
     <div class="text-5xl p-2"> <NuxtLink to='/'>michael winter</NuxtLink></div>
     <div class="inline-flex text-2xl">
       <NuxtLink class="px-8" to='/'>works</NuxtLink>
@@ -9,15 +9,15 @@
     </div>
   </div>
   <slot /> <!-- required here only -->
-  <div class="sticky bottom-0 bg-white p-2 flex justify-center">
+  <div class="sticky bottom-0 bg-white p-2 flex justify-center z-20">
     <iframe width="400rem" height="20" scrolling="no" frameborder="no" allow="autoplay" 
     :src="'https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/' + audioPlayerStore.soundcloud_trackid + '&inverse=false&auto_play=true&show_user=false'"></iframe>
   </div>
 
   <Modal v-model="modalStore.isOpen">
       <ModalBody :class="modalStore.aspect">
-          <ImageSlider v-if="modalStore.type === 'image'" :bucket="modalStore.bucket" :gallery="modalStore.gallery"></ImageSlider>
-          <iframe v-if="modalStore.type === 'video'" :src="'https://player.vimeo.com/video/' + modalStore.vimeo_trackid" width="100%" height="100%" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
+        <ImageSlider v-if="modalStore.type === 'image'" :bucket="modalStore.bucket" :gallery="modalStore.gallery"></ImageSlider>
+        <iframe v-if="modalStore.type === 'video'" :src="'https://player.vimeo.com/video/' + modalStore.vimeo_trackid" width="100%" height="100%" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
       </ModalBody>
   </Modal>
 </template>
diff --git a/portfolio-nuxt/pages/about.vue b/portfolio-nuxt/pages/about.vue
index 6b2eb55..c657952 100644
--- a/portfolio-nuxt/pages/about.vue
+++ b/portfolio-nuxt/pages/about.vue
@@ -1,14 +1,14 @@
 <template>
-    <div class="bg-zinc-100 rounded-lg m-5 grid grid-cols-[60%,40%] gap-10 bg-white divide-x divide-solid divide-black p-4">
-        <div class="px-5 h-[76vh]">
+    <div class="bg-zinc-100 rounded-lg m-5 grid grid-cols-[60%,37%] gap-10 bg-white divide-x divide-solid divide-black p-4 min-h-[86vh]">
+        <div class="px-5">
             <p class="text-lg">about</p>
         
             <div class="leading-tight py-2 ml-3 text-sm">
                 <div class="leading-tight py-2">
-                    My work often explores simple processes where dynamic systems, situations, and settings are realized in a variety of ways from performances to installations. To me, everything we experience is computable. Given this digital philosophy, I acknowledge even my most open works as algorithmic; and, while not always apparent on the surface of any given piece, the considerations of computability and epistemology are integral to my practice. I often reconcile epistemological limits with artistic practicality by considering and addressing the limits of computation from an artistic and experiential vantage point and by collaborating with other artists, mathematicians, and scientists in order to integrate objects, ideas, and texts from various domains as structural elements in my pieces.
+                    My practice as a composer and sound artist is diverse, ranging from music created by digital and acoustic instruments to installations and kinetic sculptures. Each piece typically explores one simple process and often reflects various related interests of mine such as phenomenology, mathematics, epistemology, algorithmic information theory, and the history of science. To me, everything we experience is computable. Given this digital philosophy, I acknowledge even my most open works as algorithmic; and, while not always apparent on the surface of any given piece, the considerations of computability and epistemology are integral to my practice. I often reconcile epistemological limits with artistic practicality by considering and addressing the limits of computation from an artistic and experiential vantage point and by collaborating with other artists, mathematicians, and scientists in order to integrate objects, ideas, and texts from various domains as structural elements in my pieces. My work also aims to subvert discriminatory conventions and hierarchies by exploring alternative forms of presentation and interaction, often with minimal resources and low information.
                 </div>
                 <div class="leading-tight py-2">
-                    My work has been presented at venues and festivals throughout the world such as REDCAT, in Los Angeles; the Ostrava Festival of New Music in the Czech Republic; Tsonami Arte Sonoro Festival in Valparaiso, Chile; the Huddersfield New Music Festival in the United Kingdom; and Umbral Sesiones at the Museo de Arte Contemporáneo in Oaxaca, Mexico. Recordings of my music have been released by Another Timbre, New World Records, Edition Wandelweiser, Bahn Mi Verlag, Tsonami Records, and Pogus Productions. From 2018 to 2019, I was a fellow / artist-in-residence at the Akademie Schloss Solitude in Stuttgart, Germany. In 2008, I co-founded <em>the wulf.</em>, a Los Angeles-based organization dedicated to experimental performance and art. As a laboratory and hub for exploring new ideas, <em>the wulf.</em> has become an experiment in alternative communities and economies. Similarly, my work subverts discriminatory conventions and hierarchies by exploring alternative forms of presentation and interaction.
+                    My work has been presented at venues and festivals throughout the world such as REDCAT, in Los Angeles; the Ostrava Festival of New Music in the Czech Republic; Tsonami Arte Sonoro Festival in Valparaiso, Chile; the Huddersfield New Music Festival in the United Kingdom; and Umbral Sesiones at the Museo de Arte Contemporáneo in Oaxaca, Mexico. Recordings of my music have been released by XI Records, Another Timbre, New World Records, Edition Wandelweiser, Bahn Mi Verlag, Tsonami Records, and Pogus Productions. In 2008, I co-founded <em>the wulf.</em>, a Los Angeles-based organization dedicated to experimental performance and art. From 2018 to 2019, I was a fellow / artist-in-residence at the Akademie Schloss Solitude in Stuttgart, Germany. I currently reside in Berlin.
                 </div>  
                 <br>
                 <div id="mc_embed_signup">
@@ -29,8 +29,8 @@
                 </div>     
             </div> 
         </div>
-        <div>
-            <ImageSlider bucket="images" :gallery="gallery" class="max-w-[70%]"></ImageSlider>
+        <div class="px-5">
+            <ImageSlider bucket="images" :gallery="gallery" class="max-w-[90%]"></ImageSlider>
         </div>
     </div>
 </template>
diff --git a/portfolio-nuxt/pages/events.vue b/portfolio-nuxt/pages/events.vue
index b2b16e6..727ba1e 100644
--- a/portfolio-nuxt/pages/events.vue
+++ b/portfolio-nuxt/pages/events.vue
@@ -4,32 +4,37 @@
         <div class="px-5">
             <p class="text-lg">performances</p>
 
-            <Collapsible title='placeholder' class="leading-tight py-2 ml-3 text-sm" v-for="item in events">
-                <template v-slot:title>
-                    <div class="gap-1 w-[85%]">
-                        <div>
-                            {{ item.formatted_date }}: {{item.venue.city}}, {{item.venue.state}}
-                            <div class="ml-4 text-[#7F7F7F]">
-                                {{ item.venue.name }}
+            <div v-for="(item, index) in events">
+                <Collapsible title='placeholder' :modelValue='index <= 10' class="leading-tight py-2 ml-3 text-sm">
+                    <template v-slot:title>
+                        <div class="gap-1 w-[95%] px-2">
+                            <div>
+                                {{ item.formatted_date }}: {{item.venue.city}}, {{item.venue.state}}
+                                <div class="ml-4 text-[#7F7F7F]">
+                                    {{ item.venue.name }}
+                                </div>
                             </div>
                         </div>
-                    </div>
-                </template>
-                <template v-slot:content>
-                    <div v-for="performance in item.program">
-                        <div class="italic text-sm ml-8 pt-1">{{performance.work}}</div>
-                        <div v-for="performer in performance.performers" class="ml-12">
-                            {{ performer.name }} - 
-                            <span v-for="(instrument, index) in performer.instrument_tags">
-                                <span v-if="index !== 0">, </span>
-                                {{ instrument }}
-                            </span>
+                    </template>
+                    <template v-slot:content>
+                        <div v-for="performance in item.program">
+                            <div class="italic text-sm ml-16 pt-1">{{performance.work}}</div>
+                            <div v-if="performance.ensemble" class="ml-20">
+                                {{ performance.ensemble }}
+                            </div>
+                            <div v-for="performer in performance.performers" class="ml-20">
+                                {{ performer.name }} - 
+                                <span v-for="(instrument, index) in performer.instrument_tags">
+                                    <span v-if="index !== 0">, </span>
+                                    {{ instrument }}
+                                </span>
+                            </div>
                         </div>
-                    </div>
-                    <div class="italic text-sm ml-8 pt-1">{{item.legacy_program}}</div>
-                    <div class="ml-12">{{item.legacy_performers}}</div>
-                </template>
-            </Collapsible>
+                        <div class="italic text-sm ml-16 pt-1">{{item.legacy_program}}</div>
+                        <div class="ml-20">{{item.legacy_performers}}</div>
+                    </template>
+                </Collapsible>
+            </div>
         </div>
 
         <div class="px-5">
diff --git a/portfolio-nuxt/pages/index.vue b/portfolio-nuxt/pages/index.vue
index 7337585..689a25d 100644
--- a/portfolio-nuxt/pages/index.vue
+++ b/portfolio-nuxt/pages/index.vue
@@ -31,7 +31,7 @@
       <div class="leading-tight py-2 ml-3 text-sm" v-for="item in pubs">
         <div class="grid grid-cols-[95%,5%] gap-1">
           <div>
-            {{ item.entryTags.title }}
+            <span v-html="item.entryTags.title"></span>
             <div class="ml-4 text-[#7F7F7F]">
               {{ item.entryTags.author }}
               <span v-if=item.entryTags.booktitle>{{ item.entryTags.booktitle}}.&nbsp;</span>
@@ -118,7 +118,8 @@
           work.gallery = gallery
         }
       }
-      let groups = groupBy(works, work => new Date(work.date.$date).getFullYear())
+      let priorityGroups = groupBy(works, work => work.priority)
+      let groups = groupBy(priorityGroups["1"], work => new Date(work.date.$date).getFullYear())
       groups = Object.keys(groups).map((year) => {
         return {
           year,
@@ -126,6 +127,7 @@
         };
       });
       groups.sort((a,b) => b.year - a.year)
+      groups.push({year: "miscellany", works: priorityGroups["2"].sort((a,b) => b.date.$date - a.date.$date)})
       return groups
     }
   })