Display: Show system announcement component on index page

assets/vue/components/systemannouncement/SystemAnnouncementCardList.vue

@@ -1,21 +1,31 @@
 <template>
   <div
-      v-for="announcement in announcements"
-      :key="announcement.id"
+    v-if="announcements.length > 0"
   >
     <SystemAnnouncementCard
-        :announcement="announcement"
+      v-for="announcement in announcements"
+      :key="announcement.id"
+      :announcement="announcement"
     />
   </div>
 </template>
 
 <script setup>
+import { ref } from "vue"
+import axios from "axios"
+
 import SystemAnnouncementCard from './SystemAnnouncementCard.vue';
 
-defineProps({
-  announcements: {
-    type: Array,
-    required: true,
-  },
-})
+const announcements = ref([]);
+
+axios
+  .get("/news/list")
+  .then((response) => {
+    if (Array.isArray(response.data)) {
+      announcements.value = response.data;
+    }
+  })
+  .catch(function (error) {
+    console.log(error);
+  });
 </script>

assets/vue/pages/Home.vue

@@ -1,23 +1,18 @@
 <template>
   <!-- Homepage for logged-in users -->
-  <div class="flex flex-col gap-4">
-    <div v-if="announcements.length">
-      <SystemAnnouncementCardList :announcements="announcements" />
-    </div>
+  <div class="flex flex-col gap-4 items-center">
+    <SystemAnnouncementCardList />
 
     <PageCardList class="grid gap-4 grid-cols-1" />
   </div>
 </template>
 
 <script setup>
-import axios from "axios";
-import { ref } from "vue";
 import { useRouter } from 'vue-router';
 import PageCardList from "../components/page/PageCardList";
 import SystemAnnouncementCardList from "../components/systemannouncement/SystemAnnouncementCardList";
 import { usePlatformConfig } from "../store/platformConfig";
 
-const announcements = ref([]);
 const router = useRouter();
 const platformConfigStore = usePlatformConfig();
 
@@ -25,15 +20,4 @@ const redirectValue = platformConfigStore.getSetting("platform.redirect_index_to
 if (typeof redirectValue === 'string' && redirectValue.trim() !== '') {
   router.push(`/${redirectValue}`);
 }
-
-axios
-  .get("/news/list")
-  .then((response) => {
-    if (Array.isArray(response.data)) {
-      announcements.value = response.data;
-    }
-  })
-  .catch(function (error) {
-    console.log(error);
-  });
 </script>

assets/vue/pages/Index.vue

@@ -1,11 +1,12 @@
 <template>
   <!-- Public homepage (no login required) -->
-  <div class="container mx-auto flex gap-8">
+  <div class="container mx-auto flex flex-columm md:flex-row gap-8">
     <Login class="md:w-4/12 lg:order-1" />
     <div
-      v-if="pages.length"
       class="flex-1 md:w-8/12 lg:order-0"
     >
+      <SystemAnnouncementCardList />
+
       <PageCardList
         :pages="pages"
         class="grid gap-4 grid-cols-1"
@@ -20,6 +21,7 @@ import { useStore } from "vuex"
 import { useI18n } from "vue-i18n"
 import Login from "../components/Login"
 import PageCardList from "../components/page/PageCardList"
+import SystemAnnouncementCardList from "../components/systemannouncement/SystemAnnouncementCardList.vue"
 
 const store = useStore()
 const { locale } = useI18n()