You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
132 lines
4.2 KiB
Vue
132 lines
4.2 KiB
Vue
<template>
|
|
<div class="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">
|
|
<div class="grid grid-cols-[70%,30%] gap-1 font-thin">
|
|
<p class="italic text-sm">{{ work.title }}</p>
|
|
<div class="grid grid-cols-4">
|
|
<div class="p-1">
|
|
<button
|
|
type="button"
|
|
class="inline-flex bg-black rounded-full text-xs p-1"
|
|
>
|
|
<Icon name="ion:book-outline" color="white" />
|
|
</button>
|
|
</div>
|
|
|
|
<div class="p-1">
|
|
<button
|
|
type="button"
|
|
class="inline-flex bg-black rounded-full text-xs p-1"
|
|
>
|
|
<Icon name="wpf:speaker" color="white" />
|
|
</button>
|
|
</div>
|
|
|
|
<div class="p-1">
|
|
<button
|
|
type="button"
|
|
class="inline-flex bg-black rounded-full text-xs p-1"
|
|
>
|
|
<Icon name="fluent:video-48-filled" color="white" />
|
|
</button>
|
|
</div>
|
|
|
|
<div class="p-1">
|
|
<button
|
|
type="button"
|
|
class="inline-flex bg-black rounded-full text-xs p-1"
|
|
>
|
|
<Icon name="mdi:camera" color="white" />
|
|
</button>
|
|
</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">{{ item.entryTags.title }}</div>
|
|
</div>
|
|
|
|
<div class="px-5">
|
|
<p class="text-lg">releases</p>
|
|
<div class="leading-tight py-2 ml-3 text-sm" v-for="item in releases">
|
|
{{ item.title }}
|
|
<nuxt-img :src="'https://unboundedpress.org/api/album_art.files/' + item.album_art_id + '/binary'" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
|
|
const groupBy = (x,f)=>x.reduce((a,b,i)=>((a[f(b,i,x)]||=[]).push(b),a),{});
|
|
|
|
const { data: works } = await useFetch('https://unboundedpress.org/api/works?pagesize=200', {
|
|
transform: (works) => {
|
|
let res = groupBy(works, work => new Date(work.date.$date).getFullYear())
|
|
res = Object.keys(res).map((year) => {
|
|
return {
|
|
year,
|
|
works: res[year]
|
|
};
|
|
});
|
|
res.sort((a,b) => b.year - a.year)
|
|
return res
|
|
}
|
|
})
|
|
|
|
//const { data: pubs } = await useFetch('https://unboundedpress.org/api/publications/_aggrs/publications?pagesize=200')
|
|
//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)
|
|
}
|
|
})
|
|
|
|
const { data: album_art } = await useFetch('https://unboundedpress.org/api/album_art.files?pagesize=200')
|
|
|
|
const { data: releases } = await useFetch('https://unboundedpress.org/api/releases?pagesize=200', {
|
|
//lazy: true,
|
|
//server: false,
|
|
transform: (releases) => {
|
|
for (const release of releases) {
|
|
release.album_art_id = album_art.value.find(obj => {return obj.filename === release.album_art})._id.$oid
|
|
}
|
|
return releases
|
|
}
|
|
})
|
|
|
|
/*
|
|
watch(releases, (response)=>{
|
|
//console.log(response)
|
|
for (const item of response) {
|
|
useFetch(`https://unboundedpress.org/api/album_art.files?filter={"filename":"${item.album_art}"}`).then((response) => {
|
|
item.album_art_id = response.data.value[0]._id.$oid
|
|
})
|
|
}
|
|
return response
|
|
|
|
}, {
|
|
//deep: true,
|
|
immediate: true
|
|
})
|
|
*/
|
|
</script>
|
|
|
|
|
|
<style>
|
|
.metamask-icon {
|
|
width:25px;
|
|
height: 25px;
|
|
background-size: contain!important;
|
|
background: url('../../styles/img/metamask-icon.svg');
|
|
background-repeat: no-repeat;
|
|
}
|
|
</style> |