Merge pull request #62 from taleeus/dev

feat(merch): added bigcartel integration, feat(images): added lazy images

env.template

@@ -4,6 +4,13 @@
 DATABASE_URL=<string, required>
 
 ######################
-# INTEGRATION #
+# BANDSINTOWN #
 ######################
 VITE_BANDSINTOWN_APP_ID=<string, required>
+
+######################
+# BIGCARTEL #
+######################
+VITE_BIGCARTEL_USERNAME=<string, required>
+VITE_BIGCARTEL_PASSWORD=<string, required>
+VITE_BIGCARTEL_ACCOUNT_ID=<string, required>

package.json

@@ -24,6 +24,7 @@
  "axios": "^1.2.2",
  "moment": "^2.29.4",
  "pinia": "^2.0.28",
+ "v-lazy-image": "^2.1.1",
  "vue": "^3.2.41",
  "vue-router": "4",
  "vue-sweetalert2": "^5.0.5",

src/components/LazyImage.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+defineProps<{
+ src: string;
+ placeholder: string;
+ alt?: string;
+}>();
+</script>
+
+<template>
+ <v-lazy-image
+ :src="src"
+ :src-placeholder="placeholder"
+ :alt="alt"
+ ></v-lazy-image>
+</template>
+
+<style scoped>
+.v-lazy-image {
+ filter: blur(5px);
+ transition: filter 0.5s;
+ will-change: filter;
+}
+
+.v-lazy-image-loaded {
+ filter: blur(0);
+}
+</style>

src/components/MerchBox.vue

@@ -1,7 +1,10 @@
 <script setup lang="ts">
+import LazyImage from "./LazyImage.vue";
+
 defineProps<{
  title: string;
  imageUrl: string;
+ placeholderUrl: string;
  price: string;
  articleUrl: string;
 }>();
@@ -16,10 +19,11 @@ defineProps<{
  >
  <div class="p-6 text-xl uppercase lg:p-8 lg:text-2xl">
  <div
- class="flex h-[12rem] w-[12rem] items-center justify-center lg:h-[20rem] lg:w-[20rem]"
+ class="flex h-[12rem] w-[12rem] items-center justify-center mx-auto lg:h-[20rem] lg:w-[20rem]"
  >
- <img
+ <lazy-image
  :src="imageUrl"
+ :placeholder="placeholderUrl"
  class="drop-shadow-xl transition-all duration-400 hover:scale-105 hover:opacity-95"
  />
  </div>

src/components/MusicBox.vue

@@ -1,8 +1,10 @@
 <script setup lang="ts">
+import LazyImage from "../components/LazyImage.vue";
 import Button from "./Button.vue";
 
 const props = defineProps<{
  coverArtUrl: string;
+ coverArtPlaceholder: string;
  coverArtAlt?: string;
  releaseType: string;
  title: string;
@@ -19,9 +21,12 @@ const openStream = () => {
  class="flex w-full items-center justify-between gap-10 drop-shadow-md md:gap-4 lg:gap-0"
  >
  <a :href="$props.streamUrl" target="_blank" rel="noopener noreferrer">
- <img
+ <lazy-image
  :src="coverArtUrl"
+ :placeholder="coverArtPlaceholder"
  :alt="coverArtAlt"
+ width="250"
+ height="250"
  class="m-4 h-auto w-32 rounded-md transition-all duration-500 hover:scale-110 lg:w-80"
  />
  </a>

src/components/sections/GallerySection.vue

@@ -1,52 +1,36 @@
 <script setup lang="ts">
+import { storeToRefs } from "pinia";
 import { ref } from "vue";
 import { useScreenStore } from "../../stores/useScreen";
-import { storeToRefs } from "pinia";
+import LazyImage from "../LazyImage.vue";
 
 const { isMobile } = storeToRefs(useScreenStore());
 
 defineProps<{
  galleryUris: string[];
+ galleryPlaceholders: string[];
 }>();
 
 const currentImage = ref(0);
 const slideTo = (val: number) => (currentImage.value = val);
 </script>
 
 <template>
- <div
- class="rounded-md bg-cover"
- :style="{ 'background-image': `url(${galleryUris[currentImage]})` }"
- >
+ <div class="rounded-md bg-cover" :style="{ 'background-image': `url(${galleryUris[currentImage]})` }">
  <div class="rounded-md p-4 backdrop-blur backdrop-brightness-75 lg:p-8">
- <Carousel
- id="gallery"
- wrap-around
- items-to-show="1"
- v-model="currentImage"
- class="my-6"
- >
- <Slide v-for="image of galleryUris" :key="image">
+ <Carousel id="gallery" wrap-around items-to-show="1" v-model="currentImage" class="my-6">
+ <Slide v-for="(image, index) of galleryUris" :key="index">
  <div
- class="flex h-[9rem] w-[16rem] items-center justify-center md:h-[18rem] md:w-[32rem] lg:h-[27rem] lg:w-[48rem]"
- >
+ class="flex h-[9rem] w-[16rem] items-center justify-center md:h-[18rem] md:w-[32rem] lg:h-[27rem] lg:w-[48rem]">
  <img :src="image" class="min-h-full" />
  </div>
  </Slide>
  </Carousel>
- <Carousel
- id="thumbnails"
- wrap-around
- :items-to-show="isMobile ? 3 : 4"
- v-model="currentImage"
- ref="carousel"
- >
- <Slide v-for="image of galleryUris" :key="image">
- <div
- class="flex h-[2.7rem] w-[4.8rem] cursor-pointer items-center justify-center lg:h-[9rem] lg:w-[16rem]"
- @click="slideTo(galleryUris.indexOf(image))"
- >
- <img :src="image" class="min-h-full" />
+ <Carousel id="thumbnails" wrap-around :items-to-show="isMobile ? 3 : 4" v-model="currentImage" ref="carousel">
+ <Slide v-for="(image, index) of galleryUris" :key="index">
+ <div class="flex h-[2.7rem] w-[4.8rem] cursor-pointer items-center justify-center lg:h-[9rem] lg:w-[16rem]"
+ @click="slideTo(galleryUris.indexOf(image))">
+ <lazy-image :src="image" :placeholder="galleryPlaceholders[index]" class="min-h-full" />
  </div>
  </Slide>
  </Carousel>

src/declarations/v-lazy-image.d.ts

@@ -0,0 +1 @@
+declare module 'v-lazy-image'

src/main.ts

@@ -5,14 +5,16 @@ import router from './router'
 
 import { createPinia } from 'pinia'
 
-import './style.css'
 import 'vue3-carousel/dist/carousel.css'
+import './style.css'
 
+import { Carousel, Navigation, Pagination, Slide } from 'vue3-carousel'
 import FontAwesomeIcon from './utilities/fontawesome-icons'
-import { Carousel, Slide, Pagination, Navigation } from 'vue3-carousel'
 
-import VueSweetalert2 from 'vue-sweetalert2';
-import 'sweetalert2/dist/sweetalert2.min.css';
+import 'sweetalert2/dist/sweetalert2.min.css'
+import VueSweetalert2 from 'vue-sweetalert2'
+
+import VLazyImage from 'v-lazy-image'
 
 const pinia = createPinia()
 
@@ -25,4 +27,5 @@ createApp(App)
  .component("Slide", Slide)
  .component("Pagination", Pagination)
  .component("Navigation", Navigation)
+ .component("VLazyImage", VLazyImage)
  .mount('#app')

src/stores/useBandsintown.ts

@@ -30,5 +30,6 @@ export const useBandsintownStore = defineStore("bandsintown", () => {
  return events;
  };
 
+ fetchEvents();
  return { events, fetchEvents };
 });

src/stores/useBigcartel.ts

@@ -0,0 +1,42 @@
+import axios from "axios";
+import { defineStore } from "pinia";
+import { ref } from "vue";
+import { DataAttributes, Product, Response } from "../types/bigcartel.types";
+import { Merch } from "../types/merch.types";
+
+export const useBigcartelStore = defineStore("bigcartel", () => {
+ const merch = ref<Merch[]>([]);
+ const fetchMerch = async () => {
+ const accountId = import.meta.env.VITE_BIGCARTEL_ACCOUNT_ID;
+ const response = await axios.get(
+ `https://api.bigcartel.com/v1/accounts/${accountId}/products`,
+ {
+ auth: {
+ username: import.meta.env.VITE_BIGCARTEL_USERNAME,
+ password: import.meta.env.VITE_BIGCARTEL_PASSWORD,
+ },
+ headers: {
+ 'Accept': 'application/vnd.api+json',
+ 'Content-Type': 'application/vnd.api+json',
+ }
+ },
+ );
+
+ const bigcartelResponse = response.data as Response<Product>;
+ merch.value = (bigcartelResponse.data as DataAttributes<Product>[]).map((e) => ({
+ name: e.attributes.name,
+ description: e.attributes.description,
+ price: `€ ${Number.parseFloat(e.attributes.default_price).toFixed(2)}`,
+ position: e.attributes.position,
+ url: e.attributes.url,
+ imageUrl: e.attributes.primary_image_url,
+ onSale: e.attributes.on_sale,
+ }));
+
+ return merch;
+ };
+
+
+ fetchMerch();
+ return { merch, fetchMerch };
+});

src/types/bigcartel.types.ts

@@ -0,0 +1,17 @@
+export interface DataAttributes<T> {
+ attributes: T;
+}
+
+export interface Response<T> {
+ data: DataAttributes<T> | DataAttributes<T>[];
+}
+
+export interface Product {
+ name: string;
+ description?: string;
+ default_price: string;
+ position: number;
+ url: string;
+ primary_image_url: string;
+ on_sale: boolean;
+}

src/types/merch.types.ts

@@ -0,0 +1,9 @@
+export interface Merch {
+ name: string;
+ description?: string;
+ price: string;
+ position: number;
+ url: string;
+ imageUrl: string;
+ onSale: boolean;
+}

src/utilities/predicates.ts

@@ -0,0 +1,6 @@
+
+export function not(predicate: Function) {
+ return function (this: Function) {
+ return !predicate.apply(this, arguments);
+ };
+}

src/views/Epk.vue

@@ -1,26 +1,40 @@
 <script setup lang="ts">
 import EpkBanner from "../components/EpkBanner.vue";
 import Section from "../components/Section.vue";
-import VideosSection from "../components/sections/VideosSection.vue";
 import GallerySection from "../components/sections/GallerySection.vue";
+import VideosSection from "../components/sections/VideosSection.vue";
 
-import { useScreenStore } from "../stores/useScreen";
 import { storeToRefs } from "pinia";
+import { useScreenStore } from "../stores/useScreen";
 
 const { isMobile } = storeToRefs(useScreenStore());
 
 const videoIds = ["hzknSmWxw2I", "TQuuQxOuI_k", "iXOm0oeMGZc", "1tVxbYR59Gc"];
+
 const galleryUris = [
- "/assets/gallery/all-slaughter.avif",
- "/assets/gallery/bside-building.avif",
- "/assets/gallery/gl-slaughter.avif",
- "/assets/gallery/pap-slaughter.avif",
- "/assets/gallery/ale-slaughter.avif",
- "/assets/gallery/heads.avif",
- "/assets/gallery/alby-slaughter.avif",
- "/assets/gallery/all-modena.avif",
- "/assets/gallery/heads-debris.avif",
- "/assets/gallery/trip-slaughter.avif",
+ "/assets/gallery/medium/all-slaughter.medium.avif",
+ "/assets/gallery/medium/bside-building.medium.avif",
+ "/assets/gallery/medium/gl-slaughter.medium.avif",
+ "/assets/gallery/medium/pap-slaughter.medium.avif",
+ "/assets/gallery/medium/ale-slaughter.medium.avif",
+ "/assets/gallery/medium/heads.medium.avif",
+ "/assets/gallery/medium/alby-slaughter.medium.avif",
+ "/assets/gallery/medium/all-modena.medium.avif",
+ "/assets/gallery/medium/heads-debris.medium.avif",
+ "/assets/gallery/medium/trip-slaughter.medium.avif",
+];
+
+const galleryPlaceholders = [
+ "/assets/gallery/small/all-slaughter.small.avif",
+ "/assets/gallery/small/bside-building.small.avif",
+ "/assets/gallery/small/gl-slaughter.small.avif",
+ "/assets/gallery/small/pap-slaughter.small.avif",
+ "/assets/gallery/small/ale-slaughter.small.avif",
+ "/assets/gallery/small/heads.small.avif",
+ "/assets/gallery/small/alby-slaughter.small.avif",
+ "/assets/gallery/small/all-modena.small.avif",
+ "/assets/gallery/small/heads-debris.small.avif",
+ "/assets/gallery/small/trip-slaughter.small.avif",
 ];
 </script>
 
@@ -151,7 +165,7 @@ const galleryUris = [
  <VideosSection :video-ids="videoIds"></VideosSection>
  </Section>
  <Section title="Gallery" class="bg-white pb-16 lg:pb-28 lg:pt-14">
- <GallerySection :gallery-uris="galleryUris"></GallerySection>
+ <GallerySection :gallery-uris="galleryUris" :gallery-placeholders="galleryPlaceholders"></GallerySection>
  </Section>
  <Section
  class="flex flex-col items-center justify-center gap-10 bg-ii bg-cover bg-center py-20"