analytics and sliders working

portfolio-nuxt/components/IconButton.vue

@@ -21,8 +21,15 @@
                 
             </button>
 
-            <button v-else="type === 'image'" class="inline-flex p-1">
+            <button @click="isOpen = true" v-else="type === 'image'" class="inline-flex p-1">
                 <Icon name="mdi:camera" color="white" />
+
+                <Modal v-model="isOpen">
+                    <ModalBody>
+                        <ImageSlider :image_ids="work.image_ids"></ImageSlider>
+                    </ModalBody>
+                </Modal>
+
             </button>
 
         </div>

portfolio-nuxt/components/ImageSlider.vue

@@ -0,0 +1,29 @@
+<template>
+    <Swiper
+      :spaceBetween="30"
+      :centeredSlides="true"
+      :autoplay="{
+        delay: 7000,
+        disableOnInteraction: false,
+      }"
+      :pagination="{
+        clickable: true,
+      }"
+      :navigation="true"
+      :modules="[SwiperAutoplay, SwiperPagination, SwiperNavigation]"
+    >
+
+      <SwiperSlide v-for="image_id in image_ids">
+        <div>
+          <nuxt-img :src="'https://unboundedpress.org/api/images.files/' + image_id + '/binary'" 
+          quality="50"/>
+        </div>
+      </SwiperSlide>
+    </Swiper>
+  </template>
+
+<script>
+export default {
+    props: ['image_ids']
+}
+</script>

portfolio-nuxt/nuxt.config.ts

@@ -1,10 +1,20 @@
+//import { defineNuxtConfig } from 'nuxt3'
+
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
-  modules: ['@nuxtjs/tailwindcss', '@nuxt/image', 'nuxt-icon', '@pinia/nuxt'],
+  modules: ['@nuxtjs/tailwindcss', '@nuxt/image', 'nuxt-icon', '@pinia/nuxt', 'nuxt-headlessui', 'nuxt-swiper'],
+  extends: ['nuxt-umami'],
   image: {
     domains: ['unboundedpress.org']
   },
   app: {
     pageTransition: { name: 'page', mode: 'out-in' }
+  },
+  appConfig: {
+    umami: {
+      id: '51f4f246-9c2e-4a86-9ffb-7a7967d9013d',
+      host: 'https://analytics.umami.is/',
+      version: 2
+    },
   }
 })

portfolio-nuxt/package-lock.json

@@ -7,7 +7,6 @@
       "name": "nuxt-app",
       "hasInstallScript": true,
       "dependencies": {
-        "@headlessui/vue": "^1.7.14",
         "@pinia/nuxt": "^0.4.11",
         "pinia": "^2.1.3"
       },
@@ -16,6 +15,7 @@
         "@nuxtjs/tailwindcss": "^6.7.0",
         "@types/node": "^18",
         "nuxt": "^3.5.2",
+        "nuxt-headlessui": "^1.1.4",
         "nuxt-icon": "^0.4.1"
       }
     },
@@ -727,6 +727,7 @@
       "version": "1.7.14",
       "resolved": "https://registry.npmjs.org/@headlessui/vue/-/vue-1.7.14.tgz",
       "integrity": "sha512-aL9U9Sa7wdOzlrfjx6EjMIYNRCma5mngWcWzQBcHFwznpRZ8g/QZ/AYFtRDrZZUw22Ttttja4D7ZRXFwhONewA==",
+      "dev": true,
       "engines": {
         "node": ">=10"
       },
@@ -6563,6 +6564,17 @@
         }
       }
     },
+    "node_modules/nuxt-headlessui": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/nuxt-headlessui/-/nuxt-headlessui-1.1.4.tgz",
+      "integrity": "sha512-/8C1w/nfBJBFzWvD/WUxwHFviPECO6owj8JgmwOK348E0IE7ZKhpFuEuy8rZ2hSm/JWexvz3QbmMRfndfzl3qw==",
+      "dev": true,
+      "dependencies": {
+        "@headlessui/vue": "^1.0.0",
+        "@nuxt/kit": "^3.4.1",
+        "pathe": "^1.1.0"
+      }
+    },
     "node_modules/nuxt-icon": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/nuxt-icon/-/nuxt-icon-0.4.1.tgz",
@@ -10671,6 +10683,7 @@
       "version": "1.7.14",
       "resolved": "https://registry.npmjs.org/@headlessui/vue/-/vue-1.7.14.tgz",
       "integrity": "sha512-aL9U9Sa7wdOzlrfjx6EjMIYNRCma5mngWcWzQBcHFwznpRZ8g/QZ/AYFtRDrZZUw22Ttttja4D7ZRXFwhONewA==",
+      "dev": true,
       "requires": {}
     },
     "@iconify/types": {
@@ -14782,6 +14795,17 @@
         }
       }
     },
+    "nuxt-headlessui": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/nuxt-headlessui/-/nuxt-headlessui-1.1.4.tgz",
+      "integrity": "sha512-/8C1w/nfBJBFzWvD/WUxwHFviPECO6owj8JgmwOK348E0IE7ZKhpFuEuy8rZ2hSm/JWexvz3QbmMRfndfzl3qw==",
+      "dev": true,
+      "requires": {
+        "@headlessui/vue": "^1.0.0",
+        "@nuxt/kit": "^3.4.1",
+        "pathe": "^1.1.0"
+      }
+    },
     "nuxt-icon": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/nuxt-icon/-/nuxt-icon-0.4.1.tgz",

portfolio-nuxt/package.json

@@ -13,11 +13,13 @@
     "@nuxtjs/tailwindcss": "^6.7.0",
     "@types/node": "^18",
     "nuxt": "^3.5.2",
+    "nuxt-headlessui": "^1.1.4",
     "nuxt-icon": "^0.4.1"
   },
   "dependencies": {
-    "@headlessui/vue": "^1.7.14",
     "@pinia/nuxt": "^0.4.11",
+    "nuxt-swiper": "^1.1.0",
+    "nuxt-umami": "^2.4.2",
     "pinia": "^2.1.3"
   }
 }

portfolio-nuxt/pages/index.vue

@@ -9,13 +9,13 @@
             <p class="italic text-sm">{{ work.title }}</p>
              <div class="grid grid-cols-4">
 
-              <Button :visible="work.score" type="document" :work="work"></Button>
+              <IconButton :visible="work.score" type="document" :work="work"></IconButton>
  
-              <Button :visible="work.soundcloud_trackid" type="audio" :work="work"></Button>
+              <IconButton :visible="work.soundcloud_trackid" type="audio" :work="work"></IconButton>
 
-              <Button :visible="work.vimeo_trackid" type="video" :work="work"></Button>
+              <IconButton :visible="work.vimeo_trackid" type="video" :work="work"></IconButton>
 
-              <Button :visible="work.images" type="image" :work="work"></Button>
+              <IconButton :visible="work.image_ids" type="image" :work="work"></IconButton>
 
             </div>
           </div>
@@ -46,8 +46,19 @@
 
   const groupBy = (x,f)=>x.reduce((a,b,i)=>((a[f(b,i,x)]||=[]).push(b),a),{});
 
+  const { data: images } = await useFetch('https://unboundedpress.org/api/images.files?pagesize=200')
+
   const { data: works } = await useFetch('https://unboundedpress.org/api/works?pagesize=200', {
     transform: (works) => {
+      for (const work of works) {
+        if(work.images){
+          let image_ids = [];
+          for (const image of work.images){
+            image_ids.push(images.value.find(obj => {return obj.filename === image.filename})._id.$oid)
+          }
+          work.image_ids = image_ids
+        }
+      }
       let res = groupBy(works, work => new Date(work.date.$date).getFullYear())
       res = Object.keys(res).map((year) => {
         return {
@@ -98,7 +109,6 @@
   */
 </script>
 
-
 <style>
   .metamask-icon {
     width:25px;