Update to use news shortname instead of index (which is not stable)

contents/research/news.yaml

@@ -5,6 +5,7 @@
 #   url: ""
 
 - date: "2024-12-10"
+  shortname: "neurips-2024"
   title: "SFU at NeurIPS 2024"
   venue: "neurips"
   year: 2024
@@ -29,18 +30,21 @@
       organizer: Angel X. Chang
 
 - date: "2024-06-21"
+  shortname: "icml-2024"
   title: "SFU at ICML 2024"
   venue: "icml"
   year: 2024
   type: conference
 
 - date: "2024-05-06"
+  shortname: "iclr-2024"
   title: "SFU at ICLR 2024"
   venue: "iclr"
   year: 2024
   type: conference
 
 - date: "2024-02-23"
+  shortname: "sfu-aaai-ws-2024"
   location: "TASC1 9204"
   title: "SFU AAAI mini-workshop"
   description: "AAAI 2024 is in Vancouver!  We are hosting several visitors from other universities attending AAAI for a mini-workshop at the SFU Burnaby campus."
@@ -63,6 +67,7 @@
       event: Layout Design for Large-Scale Multi-Robot Coordination
 
 - date: "2024-02-04"
+  shortname: "sfu-ubc-vc-2024"
   location: "TASC1 9204"
   title: "SFU-UBC visual computing seminar"
   description: "SFU-UBC Visual Computing Meeting was held at the SFU Burnaby campus (Feb 2nd from 10:00 am-3:00 pm). This special session featured professors and students from the UBC and SFU visual computing community for a day of engaging discussions and networking."
@@ -77,6 +82,7 @@
       event: Talks (Session 3)
 
 - date: "2023-12-10"
+  shortname: "neurips-2023"
   title: "SFU at NeurIPS 2023"
   venue: "neurips"
   year: 2023

src/components/News.vue

@@ -4,7 +4,7 @@
         <div>
           <h2 class="section-title">News and Events</h2>
           <div style="display: flex; justify-content: center; flex-wrap: wrap;">
-            <newsitem class="news" :item="item" v-for="(item,index) in news" :key="index" :id="index"/>
+            <newsitem class="news" :item="item" v-for="(item,index) in news" :key="index" :index="index"/>
           </div>
         </div>
       </section>

src/components/NewsItem.vue

@@ -4,7 +4,7 @@
       <h3 class="title" v-if="item.url"><a :href="item.url" target="_blank">{{item.title}}</a></h3>
       <h3 class="title" v-else>
         <!-- <router-link :to="{ name: 'pubs-year-venue', params: { year: item.year, venue: item.venue, title: item.title }}">{{item.title}}</router-link> -->
-        <router-link :to="{ name: 'news-item', params: { id: id }}">{{item.title}}</router-link>
+        <router-link :to="{ name: 'news-item', params: { id: (item.shortname != null) ? item.shortname : index }}">{{item.title}}</router-link>
       </h3>
       <div class="img-wrapper" v-if="item.image">
         <img :src="require(`Content/research/${item.image}`)">
@@ -21,7 +21,7 @@ export default {
     return {
     }
   },
-  props: ['item', 'id']
+  props: ['item', 'index']
 }
 </script>
 <!-- Add "scoped" attribute to limit CSS to this component only -->

src/components/NewsItemPage.vue

@@ -17,7 +17,15 @@ export default {
   },
   methods: {
     getItem: function(id) {
-      const item = this.news[id]
+      let news = this.news
+      let item = news[id]
+      if (item == null) {
+        news = news.filter(item => item.shortname === id)
+        item = news[0]
+      }
+      return item ? this.populateItem(item) : null
+    },
+    populateItem: function(item) {
       const pubtypes = ['conference', 'pubs']
       if (pubtypes.indexOf(item.type) >= 0) {
         let filteredPubs = this.pubs