work-on-documents-page

package.json

@@ -14,6 +14,8 @@
   "dependencies": {
     "@astrojs/tailwind": "^2.1.3",
     "@astrojs/vue": "^1.2.2",
+    "@headlessui/vue": "^1.7.13",
+    "@heroicons/vue": "1.0.6",
     "astro": "^1.7.2",
     "tailwindcss": "^3.2.4",
     "vue": "^3.2.45"

src/components/Footer.astro

@@ -1,12 +1,9 @@
-<template>
+<div class="container-fluid bg-stone-600">
-  <footer>
+    <div class="">
-      <div>
+        <div class="container mx-auto px-4 grid grid-cols-1 md:grid-cols-3 bg-stone-600">
-          <div
-              class="grid grid-cols-1 md:grid-cols-3 bg-stone-600 "
-          >
             <div class="bg-stone-800 rounded-md  h-44 m-6 text-gray-100 text-left text-xl p-3">Important Links<hr class="blue-400">
                 <div class="grid grid-rows-3 text-blue-600 p-3 gap-4">    
-                      <router-link to="/gallery">Gallery <hr class="border-slate-900"></router-link>
+                    <a href="/gallery">Gallery <hr class="border-slate-900"></a>
                     <a href="/notice">Notice <hr class="border-slate-900"></a>
                     <a href="/documents">Documents</a>
                 </div>
@@ -20,17 +17,16 @@
             </div>
             <div class="bg-stone-800 rounded-md h-44 m-6 text-gray-100 text-left text-xl p-3">Document Links <hr>
                 <div class="grid grid-rows-3 text-blue-600 p-3 gap-4">    
-                      <router-link to="/documents/aqar">AQAR<hr class="border-slate-900"></router-link>
+                    <a href="/documents/aqar">AQAR<hr class="border-slate-900"></a>
-                      <router-link to="/documents/iqac">IQAC<hr class="border-slate-900"></router-link>
+                    <a href="/documents/iqac">IQAC<hr class="border-slate-900"></a>
-                      <router-link to="/documents/academic-calendar">Academic Calendar</router-link>
+                    <a href="/documents/academic-calendar">Academic Calendar</a>
                 </div>
             </div>
         </div>
-          <div class="grid grid-cols-1 md:grid-cols-3 bg-stone-600 place-items-center text-gray-100 -mt-4 ">
+        <div class="container mx-auto px-4 flex flex-col md:flex-row place-items-center md:place-content-between bg-stone-600 text-gray-100 -mt-4 ">
-              <a href=""><div class="">© sreechaitanyacollege.in <hr> </div></a>
+            <a href=""><span class="">© sreechaitanyacollege.in <hr> </span></a>
-              <a href="https://dwd.siliconpin.com"><div class="">	Powered by DWD Consultancy Services  <hr></div></a>
+            <a href="https://dwd.siliconpin.com"><span class="">	Powered by DWD Consultancy Services  <hr></span></a>
-              <a href=""><div class=""> Count 112964  | Site Performance  <hr> </div></a>
+            <a href=""><span class=""> Count 112964  | Site Performance  <hr> </span></a>
+        </div>
     </div>
 </div>
-  </footer>
-</template>

src/components/Header.astro

@@ -0,0 +1,23 @@
+<main>
+    <header>
+        <div class="lg:hidden grid grid-cols-6 bg-blue-700 place-items-center text-white">
+            <div class="grid col-span-1 "> <img class="w-16" src="/img/logo3.png" alt=""></div>
+            <div class="grid col-span-4 ">SREE CHAITANYA COLLEGE</div>
+            <div class="grid col-span-1 "><button class="hover:bg-white hover:text-blue-700 rounded-md p-1">Log In</button></div>
+        </div>
+        <div
+            class="hidden lg:block flex flex-cols bg-blue-600 h-48 text-right justify-end text-white text-3xl pt-5 font-semibold pr-12">
+            <img src="/img/logo3.png" alt="/img/logo3.png" class="absolute left-0 top-0 h-44 w-44 mt-2 ml-14"
+            />
+            Estd.-1956
+            <br />Sree Chaitanya College,Habra
+            <br />(Arts and Science)
+            <br />Prafullanagar, Habra, 24Pgs(N) Pin-743268, W.B
+        </div>
+        <!-- <Menu /> -->
+
+    </header>
+</main>
+
+<script setup>
+</script> 

src/pages/documents/[id].astro

@@ -0,0 +1,46 @@
+---
+import Layout from "../../layouts/Layout.astro"
+import Header from "../../components/Header.astro"
+import MainMenu from "../../components/MainMenu.vue"
+import Footer from "../../components/Footer.astro"
+
+export async function getStaticPaths() {
+  const response = await fetch('https://api8.siliconpin.com/items/scc22?filter[status][_eq]=published&filter[type][_eq]=documents');
+  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]=documents');
+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>
+        <div class="container bg-white mx-auto mt-3  p-4">
+            <div v-if="isLoading">
+                <!-- <h2>Loading ...</h2> -->
+            </div>
+            <div>
+                <h2 class="text-center t-8">{data.data[idx].title}</h2>
+                <div></div>
+                <div >
+                    <!-- <h2>Attachments.</h2> -->
+                    <div>
+                        <div class="flex flex-col place-items-center justify-center" set:html={data.data[idx].content}></div>
+                        <a href=""></a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </main>
+    <Footer />
+</Layout>
+
+    
+   

src/pages/documents/index.astro

@@ -0,0 +1,33 @@
+---
+import Layout from "../../layouts/Layout.astro"
+import Header from "../../components/Header.astro"
+import MainMenu from "../../components/MainMenu.vue"
+import Footer from "../../components/Footer.astro"
+const response = await fetch('https://api8.siliconpin.com/items/scc22?filter[status][_eq]=published&filter[type][_eq]=documents&sort=-date_created');
+const data = await response.json();
+const notice = data.data;
+// console.log(data)
+---
+<Layout title="">
+    <Header />
+    <MainMenu />
+    <main>
+        <div class="container mx-auto mt-3 p-4 ">
+            <div>
+                <h1 class="text-center text-4xl font-bold underline decoration-4 decoration-blue-700 py-10">Documents</h1>
+                <div class="text-blue-700 leading-loose">
+                    {
+                        notice.map(item =>
+                            <a href={'/documents/'+item.slug}>
+                                <h3>{item.title}</h3>
+                            </a>
+                        )
+                    }
+                </div>
+            </div>
+        </div>
+    </main>
+    <Footer />    
+</Layout>
+
+   

src/pages/index.astro

@@ -1,90 +1,103 @@
 ---
-import Layout from '../layouts/Layout.astro';
+import Layout from "../layouts/Layout.astro"
-import Card from '../components/Card.astro';
+import Header from "../components/Header.astro"
-import Modal from '../components/Modal.astro';
+import MainMenu from "../components/MainMenu.vue"
-import Header from '../components/Header.html';
+import Footer from "../components/Footer.astro"
-import MainHeader from '../components/MainHeader.vue';
-import Footer from '../components/Footer.astro';
 ---
-
+<Layout title="">
-<Layout title="Welcome to Astro.">
-	<Header />
-	<MainHeader />
 	<main>
-		<h1>Welcome to <span class="text-gradient">Astro</span></h1>
+		<Header />
-		<p class="instructions">
+		<MainMenu client:visible />
-			To get started, open the directory <code>src/pages</code> in your project.<br />
+		<div class="container mx-auto px-4">
-			<strong>Code Challenge:</strong> Tweak the "Welcome to Astro" message above.
+			<div class="flex justify-center">
-		</p>
+				  <img src="/img/clg.jpg" alt="clg" class="mb-5 rounded-b-2xl" width="100%"height="100%"/>
-		<button id="myBtn">Open Modal</button>
+			</div>
-		<Modal text=" This is a sample modal" /> 
+			<div class="flex justify-center">
-		<ul role="list" class="link-card-grid">
+				<div class="flex justify-center right-56 bg-blue-700 w-56 text-white p-1 text-xl rounded-full">Vision of The College</div>
-			<Card
+			</div>
-				href="https://docs.astro.build/"
+			  <div class="flex-none mt-5 justify-center">
-				title="Documentation"
+				  <div class="flex h-8 border-b border-slate-200 ml-5 text-xl">Character Formation through Knowledge and Value-based Education for Transformation of the Society and the Nation</div>
-				body="Learn how Astro works and explore the official API docs."
+			  </div>
-			/>
+			  <br />
-			<Card
+			  <div class="flex justify-center">
-				href="https://astro.build/integrations/"
+				  <div
-				title="Integrations"
+					  class="flex justify-center right-56 bg-blue-700 w-56 text-white p-1 text-xl rounded-full mt-14"
-				body="Supercharge your project with new frameworks and libraries."
+				  >Our Mission</div>
-			/>
+			  </div>
-			<Card
+			  <div class="flex-none justify-center p-5 text-xl text-justify">
-				href="https://astro.build/themes/"
+				  <div
-				title="Themes"
+					  class="flex border-b border-slate-200"
-				body="Explore a galaxy of community-built starter themes."
+				  >a) To suit the above 'Vision', the 'Mission' of the College is to provide balanced, value based and knowledge based education informed by latest technology, with a view to instilling self-confidence among the students, in order to turn them into sensitive, dedicated and disciplined citizens who will display a high intellectual calibre, together with emotional balance and social commitment and particularly at helping the students with backward social and economic backgrounds living around the institution.</div>
-			/>
+				  <div
-			<Card
+					  class="flex border-b border-slate-200 mt-3"
-				href="https://astro.build/chat/"
+				  >b) The college aims at moulding and shaping the students as good citizens with qualities of mind and heart showing commitment towards the nation as well as the community in which they live, extending the role of governance and leadership in discharging the different activities to its stakeholders and inculcating innovative practices. With such orientation students are expected to get involved in societal transformation.</div>
-				title="Community"
+				  <div
-				body="Come say hi to our amazing Discord community. ❤️"
+					  class="flex border-b border-slate-200 mt-3"
-			/>
+				  >c) Needless to say that since our College was established to serve the higher education needs of the hapless of youth, who had to bear the toll of Partition, we have always strove to spread education among this section of the society. Besides, we have to cater a huge number of students coming from the First Generation Literate families. Thus, our Vision and Mission does not come from any ivory tower but from the 'real' situation around us.</div>
-		</ul>
+			  
+			  <div class="grid grid-cols-1 lg:grid-cols-2 bg-local md:gap-0 mt-4" style="background-image: url('/img/clg_grdnt.jpg')">
+				  <div class="grid place-items-center p-4">
+					<img src="/img/clgprin.jpg" alt="" class="w-full h-full rounded-md">
+				</div>
+				  <div class="grid text-white place-items-center text-justify p-6"> To suit the above 'Vision', the 'Mission' of the College is to provide balanced, value based and knowledge based education informed by latest technology, with a view to instilling self-confidence among the students, in order to turn them into sensitive, dedicated and disciplined citizens who will display a high intellectual calibre, together with emotional balance and social commitment and particularly at helping the students with backward social and economic backgrounds living around the institution.Needless to say that since our College was established to serve the higher education needs of the hapless of youth, who had to bear the toll of Partition, we have always strove to spread education among this section of the society. Besides, we have to cater a huge number of students coming from the First Generation Literate families. Thus, our Vision and Mission does not come from any ivory tower but from the 'real' situation around us. rer</div>
+			  </div>
+			  <div class="flex justify-center">
+					  <a href="/gallery"><button class="bg-blue-700 w-56 text-white p-1 mt-14 text-xl rounded-full">Gallery</button></a>
+				  </div>
+			  </div>
+			  <!-- <div
+				  class="grid grid-cols-12 bg-gradient-to-r from-stone-600 to-stone-800 h-56 content-center gap-5"
+			  >
+				  <div class="grid col-span-4 bg-stone-800 rounded-md h-44 w-80 ml-14 grid grid-rows-17">
+					  <div
+						  class="grid row-span-5 text-white border-b border-white text-2xl content-center pl-4"
+					  >Important Links</div>
+					  <div class="grid row-span-4 text-blue-600 pl-4 border-b border-black">
+						  <a
+							  href="https://www.youtube.com/watch?v=BT4MQ2gA65Q&ab_channel=AllinOne"
+						  >Gallery</a>
+					  </div>
+					  <div class="grid row-span-4 text-blue-600 pl-4 border-b border-black">
+						  <a href="https://www.youtube.com/watch?v=BT4MQ2gA65Q&ab_channel=AllinOne">Notice</a>
+					  </div>
+					  <div class="grid row-span-4 text-blue-600 pl-4">
+						  <a
+							  href="https://www.youtube.com/watch?v=BT4MQ2gA65Q&ab_channel=AllinOne"
+						  >Document</a>
+					  </div>
+				  </div>
+				  <div class="grid col-span-4 bg-stone-800 rounded-md h-44 w-80 ml-14">
+					  <div
+						  class="grid row-span-5 text-white border-b border-white text-2xl content-center pl-4"
+					  >Related Sites</div>
+					  <div class="grid row-span-5 text-blue-600 pl-4 border-b border-black target-blank">
+						  <a href="https://www.wbsubregistration.org/">W.B.S.U.</a>
+					  </div>
+					  <div class="grid row-span-4 text-blue-600 pl-4 border-b border-black">
+						  <a href="https://www.ugc.ac.in/">U.G.C.</a>
+					  </div>
+					  <div class="grid row-span-4 text-blue-600 pl-4">
+						  <a href="https://banglaruchchashiksha.wb.gov.in/">W.B.H.E.D.</a>
+					  </div>
+				  </div>
+				  <div class="grid col-span-4 bg-stone-800 rounded-md h-44 w-80 ml-14">
+					  <div
+						  class="grid row-span-5 text-white border-b border-white text-2xl content-center pl-4"
+					  >Document Links</div>
+					  <div class="grid row-span-5 text-blue-600 pl-4 border-b border-black">
+						  <a href="AQAR">AQAR</a>
+					  </div>
+					  <div class="grid row-span-4 text-blue-600 pl-4 border-b border-black">
+						  <a href="">R & D Cell</a>
+					  </div>
+					  <div class="grid row-span-4 text-blue-600 pl-4">
+						  <a href="">Academic Calendar</a>
+					  </div>
+				  </div>
+			  </div> -->
+		</div>
 	</main>
 	<Footer />
 </Layout>
 
-<style>
+  
-	main {
-		margin: auto;
-		padding: 1.5rem;
-		max-width: 60ch;
-	}
-	h1 {
-		font-size: 3rem;
-		font-weight: 800;
-		margin: 0;
-	}
-	.text-gradient {
-		background-image: var(--accent-gradient);
-		-webkit-background-clip: text;
-		-webkit-text-fill-color: transparent;
-		background-size: 400%;
-		background-position: 0%;
-	}
-	.instructions {
-		line-height: 1.6;
-		margin: 1rem 0;
-		border: 1px solid rgba(var(--accent), 25%);
-		background-color: white;
-		padding: 1rem;
-		border-radius: 0.4rem;
-	}
-	.instructions code {
-		font-size: 0.875em;
-		font-weight: bold;
-		background: rgba(var(--accent), 12%);
-		color: rgb(var(--accent));
-		border-radius: 4px;
-		padding: 0.3em 0.45em;
-	}
-	.instructions strong {
-		color: rgb(var(--accent));
-	}
-	.link-card-grid {
-		display: grid;
-		grid-template-columns: repeat(auto-fit, minmax(24ch, 1fr));
-		gap: 1rem;
-		padding: 0;
-	}
-</style>

src/pages/notice/[id].astro

@@ -0,0 +1,46 @@
+---
+import Layout from "../../layouts/Layout.astro"
+import Header from "../../components/Header.astro"
+import MainMenu from "../../components/MainMenu.vue"
+import Footer from "../../components/Footer.astro"
+
+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>
+        <div class="container bg-white mx-auto mt-3  p-4">
+            <div v-if="isLoading">
+                <!-- <h2>Loading ...</h2> -->
+            </div>
+            <div>
+                <h2 class="text-center t-8">{data.data[idx].title}</h2>
+                <div></div>
+                <div >
+                    <!-- <h2>Attachments.</h2> -->
+                    <div>
+                        <div class="flex flex-col place-items-center justify-center" set:html={data.data[idx].content}></div>
+                        <a href=""></a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </main>
+    <Footer />
+</Layout>
+
+    
+   

src/pages/notice/index.astro

@@ -0,0 +1,33 @@
+---
+import Layout from "../../layouts/Layout.astro"
+import Header from "../../components/Header.astro"
+import MainMenu from "../../components/MainMenu.vue"
+import Footer from "../../components/Footer.astro"
+const response = await fetch('https://api8.siliconpin.com/items/scc22?filter[status][_eq]=published&filter[type][_eq]=notice&sort=-date_created');
+const data = await response.json();
+const notice = data.data;
+// console.log(data)
+---
+<Layout title="">
+    <Header />
+    <MainMenu />
+    <main>
+        <div class="container mx-auto mt-3 p-4 ">
+            <div>
+                <h1 class="text-center text-4xl font-bold underline decoration-4 decoration-blue-700 py-10">Notice</h1>
+                <div class="text-blue-700 leading-loose">
+                    {
+                        notice.map(item =>
+                            <a href={'/notice/'+item.slug}>
+                                <h3>{item.title}</h3>
+                            </a>
+                        )
+                    }
+                </div>
+            </div>
+        </div>
+    </main>
+    <Footer />    
+</Layout>
+
+   

yarn.lock

@@ -425,6 +425,16 @@
   resolved "https://registry.yarnpkg.com/@esbuild/linux-loong64/-/linux-loong64-0.15.18.tgz#128b76ecb9be48b60cf5cfc1c63a4f00691a3239"
   integrity sha512-L4jVKS82XVhw2nvzLg/19ClLWg0y27ulRwuP7lcyL6AbUWB5aPglXY3M21mauDQMDfRLs8cQmeT03r/+X3cZYQ==
 
+"@headlessui/vue@^1.7.13":
+  version "1.7.13"
+  resolved "https://registry.yarnpkg.com/@headlessui/vue/-/vue-1.7.13.tgz#bf4c5e324c3a724f6f7911362e7f38989b754590"
+  integrity sha512-obG5TdPdBDfs+jiA1mY29LPFqyJl93Q90EL86ontfRe1B6XvbjPkx+x1aAC5DA18bXbb0Juni1ayDbXo0w1u0A==
+
+"@heroicons/vue@1.0.6":
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/@heroicons/vue/-/vue-1.0.6.tgz#d8b90734b436eb5a87f40cc300b64a0fb0031f7f"
+  integrity sha512-ng2YcCQrdoQWEFpw+ipFl2rZo8mZ56v0T5+MyfQQvNqfKChwgP6DMloZLW+rl17GEcHkE3H82UTAMKBKZr4+WA==
+
 "@jridgewell/gen-mapping@^0.1.0":
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/@jridgewell/gen-mapping/-/gen-mapping-0.1.1.tgz#e5d2e450306a9491e3bd77e323e38d7aff315996"