portfolio/components/IndexContent.vue

<template>
  <div class="bg-zinc-100 rounded-lg m-5 grid grid-cols-3 gap-10 divide-x divide-solid divide-black py-4 mb-10">

    <div class="px-5">
      <p class="text-lg">pieces</p>

      <div class="py-2 ml-3" v-for="item in works">
        <p class="text-sm font-semibold mt-4 text-[#7F7F7F]">{{ item.year }}</p>
        <div class="leading-tight py-1 ml-3" v-for="work in item.works">
          <div class="grid grid-cols-[65%,30%] gap-1 items-start">
            <NuxtLink v-if="hasItems(work)" :to="'/work/' + slugify(work.title)" class="italic text-sm">
              <span v-html="work.title"></span>
            </NuxtLink>
            <span v-else class="italic text-sm">
              <span v-html="work.title"></span>
            </span>
            <div class="inline-flex mt-[-4px]">

              <div>
                <IconButton :visible="work.score" type="score" :work="work" :link="work.score" class="inline-flex p-1"></IconButton>
              </div>

              <div>
                <IconButton :visible="work.soundcloud_trackid" type="audio" :work="work" class="inline-flex p-1"></IconButton>
              </div>

              <div>
                <IconButton :visible="work.vimeo_trackid" type="video" :work="work" class="inline-flex p-1"></IconButton>
              </div>

              <div>
                <IconButton :visible="work.gallery" type="image" :work="work" class="inline-flex p-1"></IconButton>
              </div>

            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="px-5">
      <p class="text-lg">writings</p>

      <div class="leading-tight py-2 ml-3 text-sm" v-for="item in pubs">
        <div class="grid grid-cols-[95%,5%] gap-1 items-start">
          <div>
            <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>
              <span v-if=item.entryTags.journal>{{item.entryTags.journal}}.&nbsp;</span>
              <span v-if=item.entryTags.editor>editors {{item.entryTags.editor}}&nbsp;</span>
              <span v-if=item.entryTags.volume>volume {{item.entryTags.volume}}.</span>
              <span v-if=item.entryTags.publisher>{{item.entryTags.publisher}}.</span>
              {{ item.entryTags.year }}.
            </div>
          </div>
          <div>
            <IconButton :visible=item.entryTags.howpublished type="document" :link=item.entryTags.howpublished class="inline-flex p-1 mt-[-6px]"></IconButton>
          </div>
        </div>
      </div>
    </div>

    <div class="px-5">
      <p class="text-lg">albums</p>
      <div class="flex flex-col items-center leading-tight py-4 text-sm" v-for="item in releases">
        <p class="leading-tight py-2">{{ item.title }}</p>
        <button @click="openAlbumModal(item)">
          <nuxt-img :src="'/album_art/' + item.album_art" 
          quality="50"/>
        </button>
        <div class="flex place-content-center place-items-center">
          <IconButton :visible="item.discogs_id" type="discogs" :link="'https://www.discogs.com/release/' + item.discogs_id" :newTab="true"></IconButton>
          <IconButton :visible="item.buy_link" type="buy" :link="item.buy_link" :newTab="true"></IconButton>
        </div>
      </div>
    </div>
    
  </div>
</template>

<script setup>
  import { useModalStore } from "@/stores/ModalStore"
  import { watchEffect, onMounted } from "vue"

  const props = defineProps(['slug'])

  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 isValidUrl = urlString => {
    var pattern = /^((http|https|ftp):\/\/)/;
    return pattern.test(urlString)
  }

  const { data: works } = await useFetch('/api/works', {
    key: 'works-indexcontent',
    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
    }
  })

  const { data: pubs } = await useFetch('/api/publications', {
    key: 'publications-indexcontent',
    transform: (pubs) => {
      const cloned = JSON.parse(JSON.stringify(pubs))
      for (const pub of cloned) {
        if(pub.entryTags && pub.entryTags.howpublished && !(isValidUrl(pub.entryTags.howpublished))){
          pub.entryTags.howpublished = "/pubs/" + pub.entryTags.howpublished
        }
      }
      return cloned.sort((a, b) => {
        const getYear = (key) => parseInt(key.replace(/\D/g, '')) || 0
        const getSuffix = (key) => key.replace(/^Winter\d+/, '') || ''
        
        const yearA = getYear(a.citationKey)
        const yearB = getYear(b.citationKey)
        
        if (yearA !== yearB) return yearB - yearA
        
        return getSuffix(b.citationKey).localeCompare(getSuffix(a.citationKey))
      })
    }
  })

  const { data: releases } = await useFetch('/api/releases', {
    key: 'releases-indexcontent',
    transform: (releases) => {
      const cloned = JSON.parse(JSON.stringify(releases))
      return cloned.sort((a,b) => {
        const dateA = parseInt(a.date) || 0
        const dateB = parseInt(b.date) || 0
        return dateB - dateA
      })
    }
  })

  const findWorkBySlug = (slugToFind) => {
    if (!works.value) return null
    for (const group of works.value) {
      const found = group.works.find(w => slugify(w.title) === slugToFind)
      if (found) return found
    }
    return null
  }

  const openAlbumModal = (album) => {
    modalStore.setModalProps('image', 'aspect-auto', true, 'album_art', [{image: album.album_art}], '')
  }

  const openModalFromHash = () => {
    if (typeof window === 'undefined') return
    
    const hash = window.location.hash.slice(1)
    if (!hash) return
    
    const [hashType, hashSlug] = hash.includes('|') ? hash.split('|') : [null, null]
    if (!hashType || !hashSlug) return
    
    const work = findWorkBySlug(hashSlug)
    if (!work) return

    if (hashType === 'score' && work.score) {
      modalStore.setModalProps(
        'pdf',
        'aspect-[1/1.414]',
        true,
        '',
        '',
        '',
        work.score,
        work.soundcloud_trackid ? 'https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/' + work.soundcloud_trackid + '&auto_play=true&show_user=false' : ''
      )
    } else if (hashType === 'video' && work.vimeo_trackid) {
      modalStore.setModalProps('video', 'aspect-video', true, '', '', work.vimeo_trackid)
    } else if (hashType === 'image' && work.gallery) {
      modalStore.setModalProps(
        'image',
        'aspect-auto',
        true,
        'images',
        work.gallery,
        '',
        '',
        work.soundcloud_trackid ? 'https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/' + work.soundcloud_trackid + '&auto_play=true&show_user=false' : ''
      )
    }
  }

  watchEffect(() => {
    if (props.slug && works.value) {
      const work = findWorkBySlug(props.slug)
      if (work?.score) {
        modalStore.setModalProps(
          'pdf',
          'aspect-[1/1.414]',
          true,
          '',
          '',
          '',
          work.score,
          work.soundcloud_trackid ? 'https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/' + work.soundcloud_trackid + '&auto_play=true&show_user=false' : ''
        )
      }
    }
  })

  onMounted(() => {
    if (!props.slug && typeof window !== 'undefined') {
      openModalFromHash()
    }
  })

  watch(() => modalStore.isOpen, (isOpen) => {
    if (!isOpen && typeof window !== 'undefined' && window.location.hash) {
      window.history.replaceState({}, '', window.location.pathname)
    }
  })
</script>