updated keys to be more unique, also updaed DS VByline key to be more…

… unique (#174)

components/Byline.vue

@@ -74,11 +74,7 @@ const sponsor = ref(props.article?.sponsors ? props.article?.sponsors[0] : null)
       :class="isMultipleAuthors ? 'multiple-authors' : 'one-author'"
     >
       <div class="author-images flex">
-        <div
-          v-for="author of authors"
-          :key="author.photoID"
-          class="author-image"
-        >
+        <div v-for="author of authors" :key="author.id" class="author-image">
           <v-flexible-link :to="author.url" raw>
             <v-simple-responsive-image
               v-if="author.photoID"

components/GothamistFooter.vue

@@ -2,7 +2,7 @@
 import VShareTools from '@nypublicradio/nypr-design-system-vue3/v2/src/components/VShareTools.vue'
 import VShareToolsItem from '@nypublicradio/nypr-design-system-vue3/v2/src/components/VShareToolsItem.vue'
 import VFlexibleLink from '@nypublicradio/nypr-design-system-vue3/v2/src/components/VFlexibleLink.vue'
-import Navigation from '~~/composables/types/Navigation.js';
+import Navigation from '~~/composables/types/Navigation.js'
 
 const props = defineProps<{
   navigation: Navigation
@@ -56,7 +56,7 @@ const copyrightYear = ref(props.navigation.copyrightYear)
             <v-flexible-link
               v-for="(item, index) in legalLinks"
               :to="item.value.url"
-              :key="`legalLinks-${index}`"
+              :key="`legalLinks-${item.value.title}-${index}`"
             >
               {{ item.value.title }}
             </v-flexible-link>

components/MenuList.vue

@@ -13,7 +13,7 @@ const emit = defineEmits(['menu-list-click'])
     <v-flexible-link
       v-for="(item, index) in navLinks"
       :to="item.value.url"
-      :key="`primaryFooterLinks-${index}`"
+      :key="`primaryFooterLinks-${item.value.title}-${index}`"
       @click="emit('menu-list-click', item.value.title)"
     >
       {{ item.value.title }}

package.json

@@ -19,7 +19,7 @@
     "typescript": "^4.5.4"
   },
   "dependencies": {
-    "@nypublicradio/nypr-design-system-vue3": "^0.4.26",
+    "@nypublicradio/nypr-design-system-vue3": "^0.4.27",
     "@sentry/tracing": "^6.18.2",
     "@sentry/vue": "^6.18.2",
     "@vitejs/plugin-vue": "^2.3.2",

pages/[sectionSlug]/index.vue

@@ -50,8 +50,8 @@ const newsletterSubmitEvent = () => {
           <div class="col">
             <div
               v-for="(article, index) in articles.slice(0, articlesToShow)"
-              :key="index"
-            >
+              :key="`${article.id}-${index}`"
+            >            
               <v-card
                 class="mod-horizontal mb-5"
                 :image="useImageUrl(article.listingImage)"

pages/[sectionSlug]/photos/[gallerySlug].vue

@@ -125,7 +125,7 @@ onUnmounted(() => {
           v-for="(slide, index) in gallery.slides"
           class="col-12"
           :class="{ 'xl:col-6': index % 3 !== 0 }"
-          :key="index"
+          :key="`${slide.image.id}-${index}`"
         >
           <template v-if="index === 3 || (index > 0 && index % 6 === 0)">
             <HtlAd

pages/index.vue

@@ -17,17 +17,16 @@ const homePageCollectionsPromise = findPage('/').then(({ data }) => {
   })
 })
 
-const [articles, homePageCollections] = await Promise.all(
-  [articlesPromise, homePageCollectionsPromise]
-)
+const [articles, homePageCollections] = await Promise.all([
+  articlesPromise,
+  homePageCollectionsPromise,
+])
 
 // the latest 4 articles
-const latestArticles = articles.slice(0,4)
+const latestArticles = articles.slice(0, 4)
 
 // the home page featured article should display only the first story in the home page content collection
-const featuredArticle = normalizeArticlePage(
-  homePageCollections?.[0].data?.[0]
-)
+const featuredArticle = normalizeArticlePage(homePageCollections?.[0].data?.[0])
 
 const riverStoryCount = ref(6)
 const riverAdOffset = ref(2)
@@ -77,7 +76,7 @@ const nativoSectionLoaded = (name) => {
       <template v-if="homePageCollections && homePageCollections.length > 0">
         <template
           v-for="(collection, index) in homePageCollections"
-          :key="collection.id"
+          :key="`${collection.id}-${collection.data[0].id}`"
         >
           <single-story-feature
             v-if="collection.layout === 'single-story-feature'"

pages/tags/[tagSlug].vue

@@ -91,7 +91,7 @@ const newsletterSubmitEvent = () => {
           <div class="col">
             <div
               v-for="(article, index) in articles.slice(0, articlesToShow)"
-              :key="index"
+              :key="`${article.id}-${index}`"
             >
               <v-card
                 class="mod-horizontal mb-5"