mwinter/unboundedpress
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

analytics and sliders working

Browse source
This commit is contained in:
mwinter 2023-06-11 23:53:56 +02:00
parent bd6efb24b6
commit e432d9ac7e
7 changed files with 4200 additions and 4262 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
portfolio-nuxt/components/button.vue → portfolio-nuxt/components/IconButton.vue
View file

@ -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>

29
portfolio-nuxt/components/ImageSlider.vue Normal file
View file

@ -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>

12
portfolio-nuxt/nuxt.config.ts
View file

@ -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
},
}
})

26
portfolio-nuxt/package-lock.json generated
View file

@ -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",

4
portfolio-nuxt/package.json
View file

@ -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"
}
}

20
portfolio-nuxt/pages/index.vue
View file

@ -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;

8362
portfolio-nuxt/yarn.lock
View file

File diff suppressed because it is too large Load diff