portfolio/pages/pieces.vue

<template>
  <div class="grid grid-cols-1 lg:grid-cols-5 gap-8">
    <div class="lg:col-span-3">
      <section>
        <h1 class="text-2xl mb-6 border-b border-gray-200 pb-2">pieces</h1>
        
        <div v-for="item in works" :key="item.year" class="mb-8">
          <p class="text-sm text-gray-500 mb-3">{{ item.year }}</p>
          <div v-for="work in item.works" :key="work.title" class="mb-4">
            <div class="flex items-start gap-2">
              <NuxtLink 
                v-if="hasItems(work)" 
                :to="'/works/' + slugify(work.title)" 
                class="italic hover:underline"
              >
                <span v-html="work.title"></span>
              </NuxtLink>
              <span v-else class="italic">
                <span v-html="work.title"></span>
              </span>

              <div class="flex gap-1">
                <IconButton v-if="work.score" type="score" :work="work" :link="work.score"></IconButton>
                <IconButton v-if="work.soundcloud_trackid" type="audio" :work="work"></IconButton>
                <IconButton v-if="work.vimeo_trackid" type="video" :work="work"></IconButton>
                <IconButton v-if="work.gallery" type="image" :work="work"></IconButton>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>

    <div class="lg:col-span-2">
      <section v-if="worksWithImages.length">
        <div class="grid grid-cols-1 gap-4">
          <NuxtLink 
            v-for="work in worksWithImages" 
            :key="work.title"
            :to="'/works/' + slugify(work.title)"
            class="block group relative overflow-hidden"
          >
            <nuxt-img 
              :src="'/images/' + work.images[0].filename"
              :alt="work.title"
              class="w-full aspect-[4/3] object-cover transition-opacity duration-200 group-hover:opacity-50"
            />
            <p class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 text-center italic px-2" v-html="work.title"></p>
          </NuxtLink>
        </div>
      </section>
    </div>
  </div>
</template>

<script setup>
import { useModalStore } from "@/stores/ModalStore"

const modalStore = useModalStore()
const route = useRoute()

const slugify = (title) => {
  if (!title) return ''
  return title.toLowerCase().replace(/[^a-z0-9]+/g, '_').replace(/^_+|_+$/g, '')
}

const groupBy = (x,f)=>x.reduce((a,b,i)=>((a[f(b,i,x)]||=[]).push(b),a),{});

const hasItems = (work) => {
  return work.vimeo_trackid || (work.images && work.images.length) || work.score
}

const worksWithImages = computed(() => {
  if (!works.value) return []
  const allWorks = works.value.flatMap(group => group.works)
  return allWorks.filter(work => work.images && work.images.length)
})

const { data: works } = await useFetch('/api/works', {
  key: 'works-pieces',
  transform: (works) => {
    const cloned = JSON.parse(JSON.stringify(works))
    for (const work of cloned) {
      if(work.score){
        work.score = "/scores/" + work.score
      }
      if(work.images){
        let gallery = [];
        for (const image of work.images){
          gallery.push({
            image: image.filename,
          })
        }
        work.gallery = gallery
      }
    }
    let priorityGroups = groupBy(cloned, work => work.priority)
    let groups = groupBy(priorityGroups["1"], work => new Date(work.date).getFullYear())
    groups = Object.keys(groups).map((year) => {
      return {
        year,
        works: groups[year].sort((a,b) => new Date(b.date) - new Date(a.date))
      };
    });
    groups.sort((a,b) => b.year - a.year)
    if (priorityGroups["2"]) {
      groups.push({year: "miscellany", works: priorityGroups["2"].sort((a,b) => new Date(b.date) - new Date(a.date))})
    }
    return groups
  }
})

useHead({
  titleTemplate: 'Michael Winter - Pieces'
})
</script>