Add carousel with news items to front page

- news items displayed in carousel which scrolls every 3 seconds
- clicking on an item opens the associated url in a new window
- news items are stored in the file src/assets/news.json for now
  - could make it editable from the admin interface in the future
- uses vueperslides library
  - add vuesperslides.d.ts as the library has no typescript support
- resolves #37

frontend/package.json

@@ -19,7 +19,8 @@
     "flowbite-vue": "^0.1.6",
     "pinia": "^2.2.2",
     "vue": "^3.5.10",
-    "vue-router": "^4.4.5"
+    "vue-router": "^4.4.5",
+    "vueperslides": "^3.5.1"
   },
   "devDependencies": {
     "@rushstack/eslint-patch": "^1.10.4",

frontend/src/App.vue

@@ -48,5 +48,5 @@ const login_title = computed(() => {
   <div class="flex flex-col items-stretch justify-center">
     <RouterView />
   </div>
-  <FooterComponent></FooterComponent>
+  <FooterComponent class="sticky"></FooterComponent>
 </template>

frontend/src/assets/news.json

@@ -0,0 +1,32 @@
+[
+  {
+    "id": 1,
+    "url": "https://www.dkfz.de",
+    "text": "News item #1: some text about a paper written that used predicTCR. Click on this text to open the associated link."
+  },
+  {
+    "id": 2,
+    "url": "https://www.dkfz.de",
+    "text": "News item #2: some text about a paper written that used predicTCR."
+  },
+  {
+    "id": 3,
+    "url": "https://www.dkfz.de",
+    "text": "News item #3: some text about a paper written that used predicTCR."
+  },
+  {
+    "id": 4,
+    "url": "https://www.dkfz.de",
+    "text": "News item #4: some text about a paper written that used predicTCR."
+  },
+  {
+    "id": 5,
+    "url": "https://www.dkfz.de",
+    "text": "News item #5: some text about a paper written that used predicTCR."
+  },
+  {
+    "id": 6,
+    "url": "https://www.dkfz.de",
+    "text": "News item #6: some text about a paper written that used predicTCR."
+  }
+]

frontend/src/components/CarouselComponent.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { VueperSlides, VueperSlide } from "vueperslides";
+import "vueperslides/dist/vueperslides.css";
+import items from "@/assets/news.json";
+</script>
+
+<template>
+  <vueper-slides
+    autoplay
+    duration="3000"
+    fixed-height="130px"
+    :touchable="false"
+  >
+    <vueper-slide v-for="item in items" v-bind:key="item.id">
+      <template #content>
+        <div
+          class="h-full mx-14 flex flex-col justify-center text-slate-300 pb-4"
+        >
+          <a :href="item.url" target="_blank">{{ item.text }}</a>
+        </div>
+      </template>
+    </vueper-slide>
+  </vueper-slides>
+</template>

frontend/src/components/FooterComponent.vue

@@ -4,7 +4,6 @@ import {
   FwbFooterCopyright,
   FwbFooterLinkGroup,
   FwbFooterLink,
-  FwbFooterBrand,
 } from "flowbite-vue";
 </script>
 

frontend/src/components/vueperslides.d.ts

@@ -0,0 +1,4 @@
+declare module "vueperslides" {
+  class VueperSlides extends DefineComponent {}
+  class VueperSlide extends DefineComponent {}
+}

frontend/src/views/AboutView.vue

@@ -6,6 +6,7 @@ import ListItem from "@/components/ListItem.vue";
 import LoginComponent from "@/components/LoginComponent.vue";
 import SignupComponent from "@/components/SignupComponent.vue";
 import { RouterLink } from "vue-router";
+import CarouselComponent from "@/components/CarouselComponent.vue";
 const showModalLogin = ref(false);
 function closeModals() {
   showModalSignup.value = false;
@@ -29,7 +30,7 @@ function openModalSignup() {
       header-classes="text-slate-100"
       sub-text="Prediction of tumor-reactive T cells and TCRs from scRNA-seq data."
       sub-text-classes="text-slate-300"
-      class="mb-4 bg-slate-800 bg-splash bg-no-repeat bg-center bg-cover md:rounded-lg"
+      class="mb-4 bg-slate-800 bg-splash bg-no-repeat bg-center bg-cover md:rounded-lg py-0 lg:py-0 pt-8 lg:pt-8"
     >
       <div class="flex flex-row justify-center">
         <fwb-button
@@ -45,6 +46,7 @@ function openModalSignup() {
           Log in
         </fwb-button>
       </div>
+      <CarouselComponent class="mt-4" />
     </fwb-jumbotron>
     <div class="p-4">
       <ListComponent>