Deploy Vue project to GitHub Pages

Author: AlacrisDevs

src/components/cards/GalleryCard.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { ref, computed } from 'vue'
+
 const props = defineProps({
     index: {
         type: Number,
@@ -12,24 +14,31 @@ const props = defineProps({
         type: String,
         required: true,
     },
-});
+})
+
+const emit = defineEmits(['open-overlay'])
+const imageLoadingError = ref(false)
 
-const emit = defineEmits(['open-overlay']);
+const computedImageSrc = computed(() => {
+    if (imageLoadingError.value || !props.imageSrc.trim()) {
+        return '/something_wrong.png'
+    }
+    return props.imageSrc
+})
 
 const handleClick = () => {
-    emit('open-overlay', props.index);
-};
+    emit('open-overlay', props.index)
+}
+
+const handleImageError = () => {
+    imageLoadingError.value = true
+}
 </script>
 
 <template>
     <button @click="handleClick"
-        class="w-full h-full max-h-56 flex-col justify-center items-center flex relative shadow-card">
-        <img class="w-full h-full aspect-video object-cover" :src="imageSrc" :alt="cardName" />
+        class="shadow-card relative flex h-full max-h-56 w-full flex-col items-center justify-center">
+        <img class="aspect-video h-full w-full object-cover" :src="computedImageSrc" :alt="cardName"
+            @error="handleImageError" />
     </button>
 </template>
-
-<script lang="ts">
-export default {
-    name: 'GalleryCard'
-};
-</script>

src/components/cards/GalleryOverlay.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import { onMounted, onUnmounted } from 'vue';
+import { onMounted, onUnmounted } from 'vue'
 
 interface Photo {
-    src: string;
-    name: string;
+    src: string
+    name: string
 }
 
 const props = defineProps({
@@ -19,54 +19,53 @@ const props = defineProps({
         type: Boolean,
         required: true,
     },
-});
+})
 
-const emit = defineEmits(['close-overlay', 'update-index']);
+const emit = defineEmits(['close-overlay', 'update-index'])
 
 const handleClose = () => {
-    emit('close-overlay');
-};
+    emit('close-overlay')
+}
 
 const showNextImage = () => {
     if (props.currentIndex < props.photos.length - 1) {
-        emit('update-index', props.currentIndex + 1);
+        emit('update-index', props.currentIndex + 1)
     }
-};
+}
 
 const showPreviousImage = () => {
     if (props.currentIndex > 0) {
-        emit('update-index', props.currentIndex - 1);
+        emit('update-index', props.currentIndex - 1)
     }
-};
+}
 
 // Handle Keydown Events
 const handleKeyDown = (event: KeyboardEvent) => {
     switch (event.key) {
         case 'Escape':
-            handleClose();
+            handleClose()
             // console.log('Escape');
-            break;
+            break
         case 'ArrowRight':
-            showNextImage();
+            showNextImage()
             // console.log('ArrowRight');
-            break;
+            break
         case 'ArrowLeft':
-            showPreviousImage();
+            showPreviousImage()
             // console.log('ArrowLeft');
-            break;
+            break
     }
-};
+}
 
 onMounted(() => {
-    window.addEventListener('keydown', handleKeyDown);
-});
+    window.addEventListener('keydown', handleKeyDown)
+})
 
 onUnmounted(() => {
-    window.removeEventListener('keydown', handleKeyDown);
-});
+    window.removeEventListener('keydown', handleKeyDown)
+})
 </script>
 
-
 <template>
     <div v-if="isOpen"
         class="p-0 2xl:py-24 2xl:px-8 fixed inset-0 bg-dark/90 z-20 flex flex-row items-center justify-center">

src/views/Home.vue

@@ -11,7 +11,7 @@ import LinkedIn from '@/components/icons/LinkedIn.vue';
 import YouTube from '@/components/icons/YouTube.vue';
 
 const galleries = {
-    mainGallery: galleryList,
+  mainGallery: galleryList,
 };
 
 const galleryStates = ref<Record<string, { isOpen: boolean; currentIndex: number }>>(
@@ -98,16 +98,13 @@ const updateIndex = (galleryKey: string, index: number) => {
   </div>
   <div id="gallery" class="w-full px-8 xl:px-32 py-24 bg-dark flex-col justify-center items-center gap-8 inline-flex">
     <h2 class="text-center">Memories</h2>
-    <div class="grid grid-cols-2 xl:grid-cols-4 sm:grid-cols-4 gap-4 place-items-center">
-      <GalleryCard v-for="(image, index) in galleries.mainGallery" :key="`mainGallery-${index}`"
-                :index="index" :image-src="image.src" :card-name="image.name"
-                @open-overlay="() => openOverlay('mainGallery', index)" />
+    <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-4 place-items-center">
+      <GalleryCard v-for="(image, index) in galleries.mainGallery" :key="`mainGallery-${index}`" :index="index"
+        :image-src="image.src" :card-name="image.name" @open-overlay="() => openOverlay('mainGallery', index)" />
     </div>
     <GalleryOverlay v-if="galleryStates['mainGallery'].isOpen" :photos="galleries.mainGallery"
-            :currentIndex="galleryStates['mainGallery'].currentIndex"
-            :isOpen="galleryStates['mainGallery'].isOpen"
-            @close-overlay="() => closeOverlay('mainGallery')"
-            @update-index="(index) => updateIndex('mainGallery', index)" />
+      :currentIndex="galleryStates['mainGallery'].currentIndex" :isOpen="galleryStates['mainGallery'].isOpen"
+      @close-overlay="() => closeOverlay('mainGallery')" @update-index="(index) => updateIndex('mainGallery', index)" />
   </div>
   <div id="contact"
     class="w-full px-8 xl:px-32 py-24 bg-[url('/images/footer_bg.png')] bg-cover bg-center flex-col justify-between gap-4 items-center flex">