Added art detail attributes

src/components/Gallery.vue

@@ -5,7 +5,8 @@
         <div
           v-for="artwork in getColumnArtworks(i)"
           :key="artwork.id"
-          class="masonry-item"
+          class="masonry-item hover:shadow-lg transition-all cursor-pointer"
+          @click="navigateToArtDetail(artwork.id)"
         >
           <img
             :src="artwork.image_url"
@@ -23,8 +24,19 @@
   </div>
 </template>
 <script>
+import { useRouter } from "vue-router";
 export default {
   props: ["artworks"],
+  setup() {
+    const router = useRouter();
+
+    const navigateToArtDetail = (artworkId) => {
+      console.log(artworkId);
+      router.push({ name: "ArtDetail", params: { id: artworkId } });
+    };
+
+    return { navigateToArtDetail };
+  },
   data() {
     return {
       columnCount: 3,

src/router/index.ts

@@ -1,5 +1,6 @@
 import { createRouter, createWebHistory } from "vue-router";
 import HomeView from "../views/HomeView.vue";
+import ArtDetail from "@/views/ArtDetail.vue";
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
@@ -17,6 +18,11 @@ const router = createRouter({
       // which is lazy-loaded when the route is visited.
       component: () => import("../views/AboutView.vue"),
     },
+    {
+      path: "/artwork/:id",
+      name: "ArtDetail",
+      component: () => import("@/views/ArtDetail.vue"),
+    },
   ],
 });
 

src/views/ArtDetail.vue

@@ -0,0 +1,68 @@
+<template>
+  <div class="artwork-detail" v-if="artwork">
+    <h1>{{ artwork.title }}</h1>
+    <img
+      :src="artwork.image_url"
+      :alt="artwork.title"
+      v-if="artwork.image_url"
+    />
+    <p>Artist: {{ artwork.artist_title }}</p>
+    <p>Date: {{ artwork.date_start }}</p>
+    <p>Origin: {{ artwork.place_of_origin }}</p>
+    <p>Artist Display: {{ artwork.artist_display }}</p>
+    <p>On Display: {{ artwork.is_on_view }}</p>
+    <div v-if="!artwork.on_loan_display">
+      <p>Gallery: {{ artwork.gallery_title }}, {{ artwork.gallery_id }}</p>
+    </div>
+    <div v-else v-html="artwork.on_loan_display"></div>
+
+    <p>Style: {{ artwork.style_title }}</p>
+    <p>Classification: {{ artwork.classification_title }}</p>
+    <p>Medium: {{ artwork.medium_display }}</p>
+    <p>Themes: {{ artwork.theme_titles }}</p>
+    <p>Techniques: {{ artwork.technique_titles }}</p>
+    <p>Inscription: {{ artwork.inscriptions }}</p>
+    <!-- Add more details as needed -->
+  </div>
+  <div v-else>Loading...</div>
+</template>
+
+<script>
+import axios from "axios";
+
+export default {
+  data() {
+    return {
+      artwork: null,
+    };
+  },
+  created() {
+    // Fetch artwork details using the ID from the route
+    const artworkId = this.$route.params.id;
+    this.fetchArtworkDetails(artworkId);
+  },
+  methods: {
+    async fetchArtworkDetails(id) {
+      try {
+        const response = await axios.get(
+          `https://api.artic.edu/api/v1/artworks/${id}`,
+          {
+            params: {
+              fields:
+                "id,title,image_id,artist_title,date_start,place_of_origin,artist_display,medium_display,is_on_view,on_loan_display,style_title,classification_title,material_titles,theme_titles,technique_titles,gallery_title,inscriptions,gallery_id",
+            },
+          }
+        );
+
+        const artworkData = response.data.data;
+        this.artwork = {
+          ...artworkData,
+          image_url: `https://www.artic.edu/iiif/2/${artworkData.image_id}/full/843,/0/default.jpg`,
+        };
+      } catch (error) {
+        console.error("Error fetching artwork details:", error);
+      }
+    },
+  },
+};
+</script>

src/views/HomeView.vue

@@ -2,7 +2,7 @@
   <div class="w-screen h-svh overflow-y-scroll bg-neutral-100">
     <transition mode="out-in" name="fade">
       <div
-        v-if="loading"
+        v-if="isFirstVisit"
         key="loading"
         class="w-screen h-screen gap-2 flex bg-[#b50938]"
       >
@@ -63,10 +63,11 @@ export default {
     };
   },
   setup() {
-    const number = ref(1);
+    let number = ref(1);
     const loading = ref(true);
     const artworks = ref([]);
     const page = ref(1);
+    const uniqueArtworkIds = new Set();
 
     const formattedNumber = computed(() => {
       if (number.value >= 100) {
@@ -95,13 +96,25 @@ export default {
     };
 
     onMounted(() => {
-      setTimeout(() => {
-        animateNumber(90, 2000);
-      }, 100);
+      const isFirstVisit = !localStorage.getItem("hasVisited");
 
-      setTimeout(() => {
-        animateNumber(100, 1000);
-      }, 2100);
+      if (isFirstVisit) {
+        console.log("First visit");
+        setTimeout(() => {
+          animateNumber(90, 2000);
+        }, 100);
+
+        setTimeout(() => {
+          animateNumber(100, 1000);
+        }, 2100);
+
+        setTimeout(() => {
+          localStorage.setItem("hasVisited", "true");
+          fetchArtworks();
+        }, 3000);
+      } else {
+        fetchArtworks();
+      }
     });
 
     const fetchArtworks = async () => {
@@ -118,10 +131,18 @@ export default {
           }
         );
 
-        const newArtworks = response.data.data.map((artwork) => ({
-          ...artwork,
-          image_url: `https://www.artic.edu/iiif/2/${artwork.image_id}/full/843,/0/default.jpg`,
-        }));
+        const newArtworks = response.data.data
+          .filter(
+            (artwork) => !uniqueArtworkIds.has(artwork.id) && artwork.image_id
+          )
+          .map((artwork) => {
+            uniqueArtworkIds.add(artwork.id);
+            return {
+              ...artwork,
+              image_url: `https://www.artic.edu/iiif/2/${artwork.image_id}/full/843,/0/default.jpg`,
+            };
+          });
+
         artworks.value = newArtworks;
         page.value++;
       } catch (error) {
@@ -146,10 +167,17 @@ export default {
           }
         );
 
-        const newArtworks = response.data.data.map((artwork) => ({
-          ...artwork,
-          image_url: `https://www.artic.edu/iiif/2/${artwork.image_id}/full/843,/0/default.jpg`,
-        }));
+        const newArtworks = response.data.data
+          .filter(
+            (artwork) => !uniqueArtworkIds.has(artwork.id) && artwork.image_id
+          )
+          .map((artwork) => {
+            uniqueArtworkIds.add(artwork.id);
+            return {
+              ...artwork,
+              image_url: `https://www.artic.edu/iiif/2/${artwork.image_id}/full/843,/0/default.jpg`,
+            };
+          });
 
         artworks.value = [...artworks.value, ...newArtworks];
         page.value++;
@@ -169,7 +197,6 @@ export default {
   },
 };
 </script>
-
 <style scoped>
 /* ************************ */
 /* ************************ */