portfolio/components/EventSlider.vue
Michael Winter 711b5b93c2 Clean up data files and fix icon/PDF links
- Clean all JSON data files: convert MongoDB format to clean JSON
  - works.json, images.json, publications.json, pubs.json, talks.json
  - releases.json, album_art.json, scores.json, my_image_gallery.json
  - events.json (with legacy program → program transformation)
  - resume.json (simplified structure)
- Simplify all API routes (remove cleanData functions)
- Fix PDF links to open in new tab (scores, writings, albums)
- Upgrade to Nuxt 4.3.1 and fix carousel (nuxt-swiper)
- Replace nuxt-icon with @nuxt/icon
- Fix IconButton component for new tab links
- Update cv.vue for resume data structure changes
- Add icon collections (@iconify-json packages)
2026-02-18 20:16:09 +01:00

62 lines
2.1 KiB
Vue

<template>
<Swiper
:autoHeight="true"
:loop="true"
:spaceBetween="30"
:centeredSlides="true"
:autoplay="{
delay: 6000,
disableOnInteraction: false,
pauseOnMouseEnter: true
}"
:effect="'fade'"
:fadeEffect="{
crossFade: true
}"
:pagination="{
clickable: true,
}"
:style="{
'--swiper-navigation-color': 'rgb(71 85 105)',
'--swiper-pagination-color': 'rgb(71 85 105)',
'--swiper-pagination-bottom': '0%'
}"
:modules="[SwiperAutoplay, SwiperPagination, SwiperNavigation, SwiperEffectFade]"
>
<SwiperSlide v-for="(item, index) in upcoming_events" class="bg-zinc-100 h-full">
<div class="gap-1 w-[100%] mt-1 mb-1 text-sm h-full">
<div>
{{ item.formatted_date }}: {{item.venue.city}}, {{item.venue.state}}
<div class="text-[#7F7F7F]">
{{ item.venue.name }}
</div>
</div>
</div>
<!-- Comment
<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>
-->
</SwiperSlide>
</Swiper>
</template>
<script>
export default {
props: ['upcoming_events']
}
</script>