65 lines
2 KiB
Vue
65 lines
2 KiB
Vue
<template>
|
|
<div>
|
|
<section>
|
|
<h1 class="text-2xl mb-6 border-b border-gray-200 pb-2">albums</h1>
|
|
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
|
|
<div v-for="item in releases" :key="item.title" class="text-center group">
|
|
<button @click="openAlbumModal(item)" class="block w-full relative overflow-hidden">
|
|
<nuxt-img
|
|
:src="'/album_art/' + item.album_art"
|
|
quality="50"
|
|
class="w-full aspect-[2/1] object-contain border border-gray-300 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">{{ item.title }}</p>
|
|
</button>
|
|
<div class="flex justify-center gap-4 mt-2 text-sm text-gray-500">
|
|
<a
|
|
v-if="item.discogs_id"
|
|
:href="'https://www.discogs.com/release/' + item.discogs_id"
|
|
target="_blank"
|
|
class="hover:underline"
|
|
>
|
|
discogs
|
|
</a>
|
|
<a
|
|
v-if="item.buy_link"
|
|
:href="item.buy_link"
|
|
target="_blank"
|
|
class="hover:underline"
|
|
>
|
|
buy
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { useModalStore } from "@/stores/ModalStore"
|
|
|
|
const modalStore = useModalStore()
|
|
|
|
const { data: releases } = await useFetch('/api/releases', {
|
|
key: 'releases-page',
|
|
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 openAlbumModal = (album) => {
|
|
modalStore.setModalProps('image', 'aspect-auto', true, 'album_art', [{image: album.album_art}], '')
|
|
}
|
|
|
|
useHead({
|
|
titleTemplate: 'Michael Winter - Albums'
|
|
})
|
|
</script>
|