From 6c78b9e55c7b4d00715e854d1370b1b3f9903ec5 Mon Sep 17 00:00:00 2001
From: aSouchereau <dev@souch.ca>
Date: Thu, 11 Jul 2024 11:56:52 -0400
Subject: [PATCH 1/4] Fix carousel slide sizing

---
 .../{Content => Utility}/Carousel.vue         | 20 ++++++++++++-------
 1 file changed, 13 insertions(+), 7 deletions(-)
 rename src/components/{Content => Utility}/Carousel.vue (84%)

diff --git a/src/components/Content/Carousel.vue b/src/components/Utility/Carousel.vue
similarity index 84%
rename from src/components/Content/Carousel.vue
rename to src/components/Utility/Carousel.vue
index 597e4e8..82d1841 100644
--- a/src/components/Content/Carousel.vue
+++ b/src/components/Utility/Carousel.vue
@@ -5,7 +5,7 @@ const { Carousel } = pkg;
 import "@fancyapps/ui/dist/carousel/carousel.css";
 
 import {onMounted, onUnmounted, ref} from "vue";
-import ActionButton from "@/components/Content/ActionButton.vue";
+import ActionButton from "@/components/Utility/ActionButton.vue";
 
 const props = defineProps({
   options: Object,
@@ -26,17 +26,14 @@ onUnmounted(() => {
   carousel = null;
 });
 
-function navigateToImage(destination: string) {
-console.log(destination);
-}
-
 </script>
 
 <template>
   <div class="f-carousel" ref="container" id="cardSlider">
     <div class="f-carousel__viewport">
-      <div class="f-carousel__slide" v-for="photo in props.photos" :key="photo.id" @click="navigateToImage('/album/' + photo.albumId + '#' + photo.id)">
-        <img :src="photo.thumb" :alt="photo.caption">
+      <div class="f-carousel__slide" v-for="photo in props.photos" :key="photo.id">
+<!--        <img :src="photo.thumb" :alt="photo.caption">-->
+        <div class="img-body" :style="`background-image: url('${photo.thumb}')`"></div>
         <div class="img-nav">
           <ActionButton :destination="'/album/' + photo.albumId + '#' + photo.id" class="view-btn">View</ActionButton>
         </div>
@@ -46,6 +43,12 @@ console.log(destination);
 </template>
 
 <style scoped>
+.img-body {
+  background-size: cover;
+  background-position: center;
+  height: 100%;
+}
+
 .img-nav {
   position: absolute;
   visibility: hidden;
@@ -74,6 +77,7 @@ console.log(destination);
 }
 
 #cardSlider {
+  --f-carousel-slide-height: 30rem;
   --f-carousel-spacing: 16px;
   --f-carousel-slide-padding: 0;
 
@@ -104,6 +108,8 @@ console.log(destination);
   #cardSlider {
     --f-button-prev-pos: -4rem;
     --f-button-next-pos: -4rem;
+
+    --f-carousel-slide-height: 23rem;
   }
 }
 </style>
\ No newline at end of file

From 54ac40980c74a45a6fcf7a55387b11e9c9193e5c Mon Sep 17 00:00:00 2001
From: aSouchereau <dev@souch.ca>
Date: Thu, 11 Jul 2024 12:09:50 -0400
Subject: [PATCH 2/4] Refactor component directory

---
 src/components/Pages/Gallery.vue                     | 2 +-
 src/components/Pages/Index/FeaturedSection.vue       | 4 ++--
 src/components/Pages/Index/HeroSection.vue           | 2 +-
 src/components/{Content => Utility}/ActionButton.vue | 0
 src/components/{Content => Utility}/AlbumThumb.vue   | 0
 5 files changed, 4 insertions(+), 4 deletions(-)
 rename src/components/{Content => Utility}/ActionButton.vue (100%)
 rename src/components/{Content => Utility}/AlbumThumb.vue (100%)

diff --git a/src/components/Pages/Gallery.vue b/src/components/Pages/Gallery.vue
index 93b8357..975717b 100644
--- a/src/components/Pages/Gallery.vue
+++ b/src/components/Pages/Gallery.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import {useAlbum} from "@/composables/api/Album.ts";
-  import AlbumThumb from "@/components/Content/AlbumThumb.vue";
+  import AlbumThumb from "@/components/Utility/AlbumThumb.vue";
   import {Router, useRouter} from "vue-router";
   import Loader from "@/components/Utility/Loader.vue";
   import {watch} from "vue";
diff --git a/src/components/Pages/Index/FeaturedSection.vue b/src/components/Pages/Index/FeaturedSection.vue
index 521fddf..7c825b2 100644
--- a/src/components/Pages/Index/FeaturedSection.vue
+++ b/src/components/Pages/Index/FeaturedSection.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import Carousel from "@/components/Content/Carousel.vue";
+import Carousel from "@/components/Utility/Carousel.vue";
 import {useAlbum} from "@/composables/api/Album";
 import {watch} from "vue";
 
@@ -13,7 +13,7 @@ watch(data, (data) => {
     photos.push({
       id: photo.id,
       albumId: photo.album_id,
-      thumb: photo.size_variants.small.url,
+      thumb: photo.size_variants.small2x.url,
       src: photo.size_variants.medium2x?.url ?? photo.size_variants.medium?.url ?? photo.size_variants.small2x?.url ?? photo.size_variants.small.url,
       caption: `${photo.description ?? ""}<span class="copy-notice">Image &copy; ${date.getFullYear()} Alex Souchereau. All Rights Reserved.</span>`,
     })
diff --git a/src/components/Pages/Index/HeroSection.vue b/src/components/Pages/Index/HeroSection.vue
index 47c1805..8d3cebd 100644
--- a/src/components/Pages/Index/HeroSection.vue
+++ b/src/components/Pages/Index/HeroSection.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import ActionButton from "@/components/Content/ActionButton.vue";
+import ActionButton from "@/components/Utility/ActionButton.vue";
 import {ref, watch} from "vue";
 import {useAlbum} from "@/composables/api/Album.ts";
 
diff --git a/src/components/Content/ActionButton.vue b/src/components/Utility/ActionButton.vue
similarity index 100%
rename from src/components/Content/ActionButton.vue
rename to src/components/Utility/ActionButton.vue
diff --git a/src/components/Content/AlbumThumb.vue b/src/components/Utility/AlbumThumb.vue
similarity index 100%
rename from src/components/Content/AlbumThumb.vue
rename to src/components/Utility/AlbumThumb.vue

From de9c834e0bcf26fa55aee3ca42606b61d8bc8643 Mon Sep 17 00:00:00 2001
From: alexsouchereau <W0632604@myscc.ca>
Date: Fri, 26 Jul 2024 13:26:53 -0400
Subject: [PATCH 3/4] add uncategorized photos to gallery

---
 src/components/Pages/Gallery.vue | 60 +++++++++++++++++++++++++++++---
 1 file changed, 56 insertions(+), 4 deletions(-)

diff --git a/src/components/Pages/Gallery.vue b/src/components/Pages/Gallery.vue
index 975717b..13817da 100644
--- a/src/components/Pages/Gallery.vue
+++ b/src/components/Pages/Gallery.vue
@@ -1,10 +1,12 @@
 <script setup lang="ts">
-import {useAlbum} from "@/composables/api/Album.ts";
+  import {useAlbum} from "@/composables/api/Album.ts";
   import AlbumThumb from "@/components/Utility/AlbumThumb.vue";
   import {Router, useRouter} from "vue-router";
   import Loader from "@/components/Utility/Loader.vue";
   import {watch} from "vue";
   import {useHead} from "@unhead/vue";
+  import Lightbox from "@/components/Utility/Lightbox.vue";
+  import MasonryWall from "@yeger/vue-masonry-wall";
 
   const galleryAlbum = import.meta.env.VITE_GALLERY_ALBUM_ID;
   useHead({
@@ -20,15 +22,65 @@ import {useAlbum} from "@/composables/api/Album.ts";
       router.push('/404');
     }
   });
+
+  let photos: Photo[] = [];
+
+  watch(data, (data) => {
+    data.photos.forEach((photo: any) => {
+      let date = new Date(photo.created_at);
+      photos.push({
+        id: photo.id,
+        albumId: data.id,
+        thumb: photo.size_variants.small.url,
+        caption: `${photo.description ?? ""}<span class="copy-notice">Image &copy; ${date.getFullYear()} Alex Souchereau. All Rights Reserved.</span>`,
+        src: photo.size_variants.medium2x?.url ?? photo.size_variants.medium?.url ?? photo.size_variants.small2x?.url ?? photo.size_variants.small.url,
+      });
+    });
+  });
+
 </script>
 
 <template>
   <div v-if="isFetching" class="loader-container">
     <Loader />
   </div>
-  <div v-else-if="isFinished" class="albums-container container">
-    <div v-for="album in data.albums" :key="album.id" :id="'album' + album.id">
-      <AlbumThumb :album-id="album.id" :title="album.title" :thumb-url="album.thumb ? album.thumb.thumb : null"/>
+  <div v-else-if="isFinished" class="container">
+    <h2>Gallery</h2>
+    <div class="albums-container">
+      <div v-for="album in data.albums" :key="album.id" :id="'album' + album.id">
+        <AlbumThumb :album-id="album.id" :title="album.title" :thumb-url="album.thumb ? album.thumb.thumb : null"/>
+      </div>
+    </div>
+    <div v-if="photos" class="photos-container">
+      <Lightbox id="gallery-wrapper"
+                :options="{
+      contentClick: false,
+      Thumbs: {
+        type: 'classic'
+      },
+      Toolbar: {
+        display: {
+          left: [ 'infobar'],
+          middle: [],
+          right: ['slideshow', 'thumbs', 'close'],
+        }
+      }
+    }">
+        <MasonryWall :items="photos" :ssr-columns="1" :column-width="250" :gap="10">
+          <template #default="{ item }">
+            <li class="gallery-item">
+              <a
+                  :href="item.src"
+                  :data-fancybox="item.albumId"
+                  :data-caption="item.caption"
+                  :data-slug="item.id">
+                <img :src="item.thumb" :alt="item.caption">
+              </a>
+            </li>
+          </template>
+        </MasonryWall>
+
+      </Lightbox>
     </div>
   </div>
 </template>

From 2b3af531538e240f191fdf031f0e6c3f20196ca0 Mon Sep 17 00:00:00 2001
From: aSouchereau <dev@souch.ca>
Date: Fri, 26 Jul 2024 14:29:41 -0400
Subject: [PATCH 4/4] Fix gallery masonry styles

---
 src/components/Pages/Gallery.vue | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/src/components/Pages/Gallery.vue b/src/components/Pages/Gallery.vue
index 13817da..2fa9406 100644
--- a/src/components/Pages/Gallery.vue
+++ b/src/components/Pages/Gallery.vue
@@ -92,6 +92,14 @@
     grid-auto-rows: 15rem;
     row-gap: 1rem;
     column-gap: 1rem;
+    margin-bottom: 3rem;
+  }
+
+  li {
+    list-style: none;
+  }
+  img {
+    width: 100%;
   }
 
   @media only screen