Attachment

src/components/FooterComponent.vue

@@ -2,7 +2,7 @@
     <section class="container mx-auto px-4 my-6">
     <div class="grid grid-cols-1 lg:grid-cols-2 gap-x-10 gap-y-4">
         <div class="grid border-4 border-blue-700 rounded-xl ">
-            <p class="bg-blue-700 text-white px-6 py-2 text-2xl font-bold"><span class="underline decoration-4 decoration-[#7c4c23]">Latest Updates</span><span class="shape text-2xl font-bold p-1 rounded-full h-fit">*</span></p>
+            <p class="bg-blue-700 text-white px-6 py-2 text-2xl font-bold"><span class="underline decoration-4 decoration-[#7c4c23]">Latest Notice</span><span class="shape text-2xl font-bold p-1 rounded-full h-fit">*</span></p>
             <div  class="flex flex-col h-[250px] overflow-y-scroll w-full bg-blue-50 rounded-b-lg">
                     <a v-for="data in notice" :key="notice.id" target="_blank" :href="'/notice/'+data.slug" class="px-6 text-xl text-blue-700 hover:underline">{{data.title}}</a>
             </div>

src/components/MainMenu.astro

@@ -21,15 +21,15 @@
    
       <!-- Navbar items -->
       <div class="nav-links">
-        <a href="/">Home</a>|
+        <a href="/">Home |</a>
-        <a href="/about-us">About</a>|
+        <a href="/about-us">About |</a>
-        <a href="/contact-us">Contact Us</a>|
+        <a href="/contact-us">Contact Us |</a>
-        <a href="/notice">Notice</a>|
+        <a href="/notice">Notice |</a>
-        <a href="/library">Library</a>|
+        <a href="/library">Library|</a>
         <div class="dropdown">
-          <a class="dropBtn" href="#">Administration
+          <a class="dropBtn" href="#">Administration |
             <i class="fas fa-angle-down"></i>
-          </a>|
+          </a>
           <div class="drop-content" >
             <a href="/governing-body">Governing Body</a>
             <a href="/composition-of-gb">Composition of GB</a>
@@ -40,9 +40,9 @@
         <!-- <a href="https://center.rgyci.org/center_list">Center List</a> -->
         <!-- Dropdown menu -->
         <div class="dropdown">
-          <a class="dropBtn" href="#">Academics
+          <a class="dropBtn" href="#">Academics |
             <i class="fas fa-angle-down"></i>
-          </a>|
+          </a>
           <div class="drop-content">
             <a href="/departments">Departments & Faculty</a>
             <a href="/admission">Admission</a>
@@ -58,9 +58,9 @@
           </div>
         </div>
         <div class="dropdown">
-          <a class="dropBtn" href="#">Organizations
+          <a class="dropBtn" href="#">Organizations |
             <i class="fas fa-angle-down"></i>
-          </a>|
+          </a>
           <div class="drop-content">
             <a href="/iqac">IQAC</a>
             <a href="/naac">NAAC</a>
@@ -73,9 +73,9 @@
           </div>
         </div>
         <div class="dropdown">
-          <a class="dropBtn" href="#">Facilities
+          <a class="dropBtn" href="#">Facilities |
             <i class="fas fa-angle-down"></i>
-          </a>|
+          </a>
           <div class="drop-content">
             <a href="/facilities">Facilities</a>
             <a href="/rti">RTI</a>           

src/components/NoticeIDPage.vue

@@ -0,0 +1,102 @@
+<template>
+    <div class="container mx-auto px-4 text-justify">
+        <!-- <div v-for="files in file" :key="file.id">
+            <a :href="'https://api8.siliconpin.com/assets/'+files[0]">wsrvfsgv</a>
+        </div> -->
+        <div v-if="isLoading" class="">
+            <div class="text-center text-2xl flex flex-col justify-center place-items-center">
+                <svg class="animate-spin delay-1000 mt-24" fill="#1068c6" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="64px" height="64px" viewBox="0 0 26.349 26.35" xml:space="preserve"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <g> <g> <circle cx="13.792" cy="3.082" r="3.082"></circle> <circle cx="13.792" cy="24.501" r="1.849"></circle> <circle cx="6.219" cy="6.218" r="2.774"></circle> <circle cx="21.365" cy="21.363" r="1.541"></circle> <circle cx="3.082" cy="13.792" r="2.465"></circle> <circle cx="24.501" cy="13.791" r="1.232"></circle> <path d="M4.694,19.84c-0.843,0.843-0.843,2.207,0,3.05c0.842,0.843,2.208,0.843,3.05,0c0.843-0.843,0.843-2.207,0-3.05 C6.902,18.996,5.537,18.988,4.694,19.84z"></path> <circle cx="21.364" cy="6.218" r="0.924"></circle> </g> </g> </g></svg>
+                Loading....
+            </div>
+        </div>
+        <div v-else="content" class="py-10">
+            <p class="text-center text-2xl font-bold pb-4 font-smooth underline">{{ page.title }}</p>
+            <div class="flex flex-col justify-center place-items-center w-[100%] " v-html="content"></div>
+        </div>
+        <div v-if="fileAttached">
+                <h2>Attachments.</h2>
+                <div>
+                    <div v-for="(file, index) in files">
+                        {{index+1}}. 
+                            <a class="text-blue-600" :href="`https://api8.siliconpin.com/assets/` + file.id+'?download' "  :download="file.filename_download">
+                                {{ file.filename_download }}
+                            </a>
+                    </div>
+
+                </div>
+
+            </div>
+        
+    </div>
+</template>
+    
+<script>
+export default {
+    data() {
+        return {
+            page: null,
+            attachment:null,
+            fileAttached:false,
+            content:null,
+            isLoading: true,
+            fileAttached: false,
+            file: null,
+        }
+    },
+    mounted: function () {
+        let path=window.location.pathname.split('/');
+        // console.log(path[2]);
+
+        // fetch('https://api8.siliconpin.com/items/scc22?filter[type][_eq]=notice&limit=-1')
+        let queryP='https://api8.siliconpin.com/items/scc22?filter[type][_eq]=notice&filter[slug][_eq]='+path[2];
+        fetch(queryP)
+            .then(response => response.json())
+            .then(data => {
+          this.page = data.data[0]
+          this.content = this.page.content
+          this.file = this.page.attachments
+        //   console.log(this.file)
+          this.isLoading = false
+        });
+        fetch('https://api8.siliconpin.com/items/scc22?filter[slug][_eq]=' + path[2])
+        .then((response) => {
+            if (response.ok) {
+                return response.json();
+            }
+            // throw new Error('Something went wrong');
+            })
+            .then(jsonPageData => {
+                this.page = jsonPageData.data
+                console.log(this.page)
+                this.isLoading = false
+                return jsonPageData.data[0].id
+                }
+            )
+            .then((pageID) => {
+                fetch('https://api8.siliconpin.com/items/scc22_files_1?filter[scc22_id][_in]=' + pageID)
+                .then(resp => resp.json())
+                    .then(file => {
+                            let attIDs = ''
+                            let t = 0
+                            file.data.forEach(ids => {
+                                if (t == 0) attIDs = ids.directus_files_id
+                                else attIDs = attIDs + ',' + ids.directus_files_id
+                                t++
+                            });
+                            if(t>0) this.fileAttached=true
+                        return attIDs
+                    })
+                        .then((attIDs) => {
+                            fetch('https://api8.siliconpin.com/files?filter[id][_in]=' + attIDs)
+                            .then(resp => resp.json())
+                                .then(file => {
+                                    this.files = file.data
+                                })
+                        })
+            })
+            .catch((error) => {
+                console.log(error)
+                });
+    }
+}
+</script>

src/components/NoticePage.vue

@@ -1,11 +1,9 @@
 <template>
     <div class="container bg-white mx-auto mt-3  p-4 text-blue-700 leading-loose">
         <div v-if="isLoading">
-            <h2 class="text-black text-4xl font-bold underline decoration-4 decoration-blue-700 text-center py-10">Loading ...</h2>
+            <h2>Loading ...</h2>
         </div>
-        
         <div v-else>
-            <h2 class="text-black text-4xl font-bold underline decoration-4 decoration-blue-700 text-center py-10">Notice</h2>
             <div  v-for="(item, index) in page" >
                 <a :href="'/notice/'+item.slug"> <h3> {{item.title}}</h3> </a>
 

src/components/RoutePage.vue

@@ -3,6 +3,9 @@
         <div v-if="content">
             <div v-html="content"></div>
         </div>
+        <div v-else class="text-center font-bold text-4xl font-smooth py-16 text-gray-600 ">
+            404 | Page Not Found!
+        </div>
     </div>
 </template>
 <script>
@@ -12,7 +15,7 @@ export default {
             page: null,
             attachment:null,
             content:null,
-            isLoading: true
+            isLoading: true,
         }
     },
     mounted: function () {

src/pages/notice/[id].astro

@@ -3,29 +3,32 @@ import Layout from "../../layouts/Layout.astro"
 import Header from "../../components/Header.astro"
 import MainMenu from "../../components/MainMenu.astro"
 import Footer from "../../components/Footer.astro"
+import NoticeIDPage from "../../components/NoticeIDPage.vue"
 
 export async function getStaticPaths() {
   const response = await fetch('https://api8.siliconpin.com/items/scc22?filter[status][_eq]=published&filter[type][_eq]=notice');
   const data = await response.json();
   const finalData = data.data.map((n: { slug: string | undefined; })=>{
       return {params: {id:n.slug}}
-  }) 
+  })
   return finalData;
 }
-
 const response = await fetch('https://api8.siliconpin.com/items/scc22?filter[status][_eq]=published&filter[type][_eq]=notice');
 const data = await response.json();
 const { id } = Astro.params;
 const idx = data.data.findIndex((n: { slug: string | undefined; }) => n.slug ===id);
+
 ---
 <Layout title="">
     <Header />
     <MainMenu />
-    <main>
+    <NoticeIDPage client:visible />
+    <!-- <main>
         <div class="container bg-white mx-auto mt-3  p-4">
             <div>
             </div>
             <div>
+                </ul>
                 <h2 class="text-center t-8">{data.data[idx].title}</h2>
                 <div></div>
                 <div >
@@ -36,7 +39,7 @@ const idx = data.data.findIndex((n: { slug: string | undefined; }) => n.slug ===
                 </div>
             </div>
         </div>
-    </main>
+    </main> -->
     <Footer />
 </Layout>