Minor improvements

.github/workflows/deploy.yml

@@ -0,0 +1,38 @@
+name: Deploy to GitHub Pages
+
+on:
+  push:
+    branches: [main]
+  pull_request:
+    branches: [main]
+
+jobs:
+  build-and-deploy:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '22'
+          cache: 'pnpm'
+
+      - name: Install pnpm
+        run: npm install -g pnpm
+
+      - name: Install dependencies
+        run: pnpm install
+
+      - name: Build project
+        run: pnpm build
+
+      - name: Deploy to GitHub Pages
+        if: github.event_name == 'push' && github.ref == 'refs/heads/main'
+        uses: peaceiris/actions-gh-pages@v4
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          publish_dir: ./dist
+          publish_branch: gh-pages

src/components/MovieCard.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { useMoviesStore } from '@/stores/movies'
-import { computed } from 'vue'
+import { computed, ref } from 'vue'
 import type { MovieType } from '@/types/Movie'
 
 const props = defineProps<{
@@ -12,6 +12,8 @@ const emit = defineEmits<{ (e: 'loaded', id: string): void }>()
 
 const store = useMoviesStore()
 
+const imageLoadFailed = ref(false)
+
 const alreadyAdded = computed(() =>
   store.movieList.some((movie) => movie.imdbID === props.movie.imdbID),
 )
@@ -25,12 +27,35 @@ const alreadyAdded = computed(() =>
       >
         <span v-if="props.loading" class="loading loading-ring loading-xl text-primary"></span>
 
+        <div v-else-if="imageLoadFailed" class="flex items-center justify-center">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke-width="1.5"
+            stroke="currentColor"
+            class="w-12 h-12 text-gray-400"
+          >
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M12 9v3.75m9-.75a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 3.75h.008v.008H12v-.008Z"
+            />
+          </svg>
+        </div>
+
         <img
-          v-show="!props.loading"
+          v-show="!props.loading && !imageLoadFailed"
           :src="props.movie.Poster"
           :alt="props.movie.Title"
           class="object-cover w-full h-full"
           @load="emit('loaded', props.movie.imdbID)"
+          @error="
+            () => {
+              imageLoadFailed = true
+              emit('loaded', props.movie.imdbID)
+            }
+          "
         />
       </figure>
     </router-link>

src/views/AddView.vue

@@ -55,7 +55,7 @@ async function loadMore() {
     isLoadingMore.value = true
     searchPage.value++
     const result = await loadMoreMovies(searchQuery.value, searchPage.value)
-    movies.value.push(...result.Search)
+    movies.value?.push(...result.Search)
     state.setState(searchPage.value, searchQuery.value, movies.value)
     for (const m of result.Search) {
       loadingImages.value[m.imdbID] = true