Fix GraphQL field names: Remove aliases for paintingLabel and locationLabel

The GraphQL schema doesn't support field aliases like 'title: paintingLabel'.
Changed to query fields directly as 'paintingLabel' and 'locationLabel'
and updated all component references accordingly.

- Updated GraphQL queries in Index.vue and Painting.vue
- Updated component references from .title to .paintingLabel
- Updated component references from .location to .locationLabel
- Updated test mocks to use correct field names

Fixes GitHub Action build error:
Error: Cannot query field 'paintingLabel' on type 'Painting'.

Author: hunsalz

package.json

@@ -40,9 +40,6 @@
     "@babel/core": "^7.25.0",
     "@babel/eslint-parser": "^7.25.0",
     "@babel/preset-env": "^7.25.0",
-    "@vue/test-utils": "^1.3.0",
-    "@vue/vue2-jest": "^29.0.0",
-    "babel-jest": "^29.7.0",
     "eslint": "^9.39.1",
     "eslint-config-prettier": "^10.1.8",
     "eslint-loader": "^4.0.2",
@@ -51,13 +48,16 @@
     "eslint-plugin-vue": "^10.6.2",
     "gh-pages": "^6.3.0",
     "globals": "^15.11.0",
-    "jest": "^29.7.0",
-    "jest-environment-jsdom": "^29.7.0",
     "lodash": "^4.17.21",
     "prettier": "^3.7.4",
     "sass": "^1.77.0",
     "sass-loader": "^10.5.2",
-    "vue-eslint-parser": "^10.0.0"
+    "vue-eslint-parser": "^10.0.0",
+    "@vue/test-utils": "^1.3.0",
+    "@vue/vue2-jest": "^29.0.0",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "babel-jest": "^29.7.0"
   },
   "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
 }

src/components/CardLayout.vue

@@ -5,17 +5,17 @@
         v-if="painting.cover_image"
         :src="painting.cover_image"
         :alt="
-          painting.title
-            ? `${painting.title} - Cover image`
+          painting.paintingLabel
+            ? `${painting.paintingLabel} - Cover image`
             : 'Artwork cover image'
         "
         loading="lazy"
       />
     </div>
     <div class="card-layout__content">
-      <h2 class="card-layout__title">{{ painting.title }}</h2>
+      <h2 class="card-layout__title">{{ painting.paintingLabel }}</h2>
       <div>Year: {{ painting.year }}</div>
-      <div>Collection: {{ painting.location }}</div>
+      <div>Collection: {{ painting.locationLabel }}</div>
       <div>Material: {{ painting.materials }}</div>
       <TagCloud class="card-layout__tags" :event="addTag()" :tags="getTags()" />
       <ActionBar class="card-layout__actions" :painting="painting" />

src/components/__tests__/ActionBar.spec.js

@@ -10,7 +10,7 @@ Vue.prototype.$eventBus = new Vue();
 describe("ActionBar", () => {
   const mockPainting = {
     path: "/Q12345",
-    title: "Test Painting",
+    paintingLabel: "Test Painting",
     image: "https://example.com/image.jpg",
     cover_image: "https://example.com/cover.jpg"
   };

src/components/__tests__/CardLayout.spec.js

@@ -24,9 +24,9 @@ localVue.component("g-link", {
 describe("CardLayout", () => {
   const mockPainting = {
     id: "1",
-    title: "Test Painting",
+    paintingLabel: "Test Painting",
     year: "1503",
-    location: "Louvre",
+    locationLabel: "Louvre",
     materials: "Oil on canvas",
     tags: ["1503", "Louvre", "portrait"],
     path: "/test-painting",

src/pages/Index.vue

@@ -50,11 +50,11 @@ query {
       node {
         id
         path
-        title: paintingLabel
+        paintingLabel
         image
         cover_image: image (width: 770, height: 380, blur: 10)
         year: date (format: "YYYY")
-  			location: locationLabel
+        locationLabel
         materials
         depicts
       }
@@ -165,7 +165,7 @@ export default {
     if (this.$page.paintings && this.$page.paintings.edges) {
       this.$page.paintings.edges.forEach(edge => {
         // basic tags
-        edge.node.tags = [edge.node.year, edge.node.location];
+        edge.node.tags = [edge.node.year, edge.node.locationLabel];
         // concat with available depicts (with null safety)
         if (edge.node.depicts) {
           edge.node.tags = edge.node.tags.concat(edge.node.depicts.split(","));

src/templates/Painting.vue

@@ -10,22 +10,22 @@
       </div>
       <div v-else>
         <h1 class="painting__header">
-          {{ $page.painting.title || "Untitled" }}
+          {{ $page.painting.paintingLabel || "Untitled" }}
         </h1>
         <div class="painting__content">
           <g-image
             v-if="$page.painting.image"
             :src="$page.painting.image"
             :alt="
-              $page.painting.title
-                ? `${$page.painting.title} by Leonardo da Vinci`
+              $page.painting.paintingLabel
+                ? `${$page.painting.paintingLabel} by Leonardo da Vinci`
                 : 'Painting by Leonardo da Vinci'
             "
             loading="lazy"
           />
           <div v-if="$page.painting.year">Year: {{ $page.painting.year }}</div>
-          <div v-if="$page.painting.location">
-            Collection: {{ $page.painting.location }}
+          <div v-if="$page.painting.locationLabel">
+            Collection: {{ $page.painting.locationLabel }}
           </div>
           <div v-if="$page.painting.materials">
             Material: {{ $page.painting.materials }}
@@ -45,8 +45,8 @@ export default {
       };
     }
 
-    const title = this.$page.painting.title || "Untitled Painting";
-    const description = `${title} by Leonardo da Vinci. ${this.$page.painting.year ? `Created in ${this.$page.painting.year}.` : ""} ${this.$page.painting.location ? `Collection: ${this.$page.painting.location}.` : ""}`;
+    const title = this.$page.painting.paintingLabel || "Untitled Painting";
+    const description = `${title} by Leonardo da Vinci. ${this.$page.painting.year ? `Created in ${this.$page.painting.year}.` : ""} ${this.$page.painting.locationLabel ? `Collection: ${this.$page.painting.locationLabel}.` : ""}`;
     const image = this.$page.painting.image || "";
     const siteUrl =
       process.env.GRIDSOME_SITE_URL || "https://hunsalz.github.io";
@@ -110,10 +110,10 @@ query painting ($id: ID!) {
   painting: painting (id: $id) {
     id
     path
-    title: paintingLabel
+    paintingLabel
     image
     year: date (format: "YYYY")
-    location: locationLabel
+    locationLabel
     materials
     depicts
   }