diff options
author | Manurbhav Arya | 2024-06-20 11:43:24 +0530 |
---|---|---|
committer | Manurbhav Arya | 2024-06-20 11:43:24 +0530 |
commit | 28cf2e54ba73c91386ef4d2166ba234214a06d92 (patch) | |
tree | 9a6ca48661b91ca31e4e0bddd6bbb03481008b5c | |
parent | 9d5ec06abb39390f5ec2947cb7b52641e867ff2c (diff) | |
download | IotJS-Astro-28cf2e54ba73c91386ef4d2166ba234214a06d92.tar.gz IotJS-Astro-28cf2e54ba73c91386ef4d2166ba234214a06d92.tar.bz2 IotJS-Astro-28cf2e54ba73c91386ef4d2166ba234214a06d92.zip |
added comments in every file,
integrated MD files in the components,
active link for movbile navbar,
and some optimisations in code
26 files changed, 405 insertions, 422 deletions
diff --git a/src/components/Accordion.astro b/src/components/Accordion.astro index 8c9d752..efa4510 100644 --- a/src/components/Accordion.astro +++ b/src/components/Accordion.astro @@ -1,40 +1,38 @@ --- -interface BodyLine { - text: string; - link?: string -} -interface AccordionItem{ - heading : string; - body : BodyLine[]; -} +// interface BodyLine { +// text: string; +// link?: string +// } +// interface AccordionItem{ +// heading : string; +// body : BodyLine[]; +// } -import accordionJson from '../../public/jsonData/accordion.json' +// import accordionJson from '../../public/jsonData/accordion.json' +// const accordionData : AccordionItem[] = accordionJson; -const accordionData : AccordionItem[] = accordionJson; +var accordionContent = await Astro.glob("../content/resourcesPage/*.md"); --- <section> + { - accordionData.map((accordion)=>( - <div class="faq"> + accordionContent.map((item)=>{ + const Content = item.Content; + return( + <div class="faq"> <div class="question"> - <h3>{accordion.heading}</h3> + <h3>{item.frontmatter.heading}</h3> <svg width = '15' height = '10' viewBox = '0 0 42 25'> <path d = 'M3 3L21 21L39 3' stroke = 'white' stroke-width="7" stroke-linecape="round" /> </svg> </div> <div class="answer"> - { - accordion.body.map((bodyLine) => ( - <p> - <a href={bodyLine.link} target="_blank">{bodyLine.text}</a> - </p> - )) - } + <Content/> </div> </div> - )) -} + )}) + } </section> @@ -77,7 +75,7 @@ const accordionData : AccordionItem[] = accordionJson; transition: max-height 0.8s ease; } - .answer p{ + .answer ul li{ padding: 1vh 3vh; font-size: 1rem; margin: 0; @@ -87,12 +85,12 @@ const accordionData : AccordionItem[] = accordionJson; background-color: white; } - .answer p a{ + .answer ul li a{ color: #17a2b8; text-decoration: none; } - .answer p a:hover{ + .answer ul li a:hover{ text-decoration: underline; color: #0e8fa3; } @@ -107,7 +105,7 @@ const accordionData : AccordionItem[] = accordionJson; } svg{ - display: none; /* If you want the icon besides the accordion, remove this line */ + display: none; /* If you want an icon besides the accordion, remove this line */ transition: transform 0.5s ease-in; } @@ -138,8 +136,24 @@ const accordionData : AccordionItem[] = accordionJson; <script> - const faqs = document.querySelectorAll('.faq'); + // this is for the styling of the accordion + var answers = Array.from(document.getElementsByClassName("answer")); + answers.forEach(answer => { + const anchors = answer.querySelectorAll("ul li a"); + const lists = answer.querySelectorAll("ul li"); + anchors.forEach(anchor => { + anchor.classList.add("text-[#17a2b8]", "no-underline", "hover:underline", "hover:text-[#0e8fa3]"); + }); + + lists.forEach((list)=>{ + list.classList.add("py-1", "px-3", "text-base", "m-0", "leading-7", "text-black", "font-medium", "bg-white"); + }) +}); + + + // this is for the accordion + const faqs = document.querySelectorAll('.faq'); faqs.forEach(faq => { faq.addEventListener('click', () => { faq.classList.toggle('active'); @@ -149,3 +163,6 @@ const accordionData : AccordionItem[] = accordionJson; </script> + + + diff --git a/src/components/Carousel.astro b/src/components/Carousel.astro index 3eb579e..8df3622 100644 --- a/src/components/Carousel.astro +++ b/src/components/Carousel.astro @@ -1,43 +1,51 @@ --- -import carouselJson from '../../public/jsonData/carousel.json' -interface Carousel{ - img: string; - alt: string; - link?: string; -} +import { chunkArray } from '../utils/chunk'; -const carouselData : Carousel[] = carouselJson; +// import carouselJson from '../../public/jsonData/carousel.json' +// interface Carousel{ +// img: string; +// alt: string; +// link?: string; +// } + +// const carouselData : Carousel[] = carouselJson; + + +var carouselContent = await Astro.glob("../content/partnersCarouselLogo/*.md"); + +//this is the just for chunking the array into 4 parts +const chunkedContent = chunkArray(carouselContent, 4); --- <div class="gallery-wrap"> + + <!-- this is the back button for the carousel --> + <!-- <svg id = "backBtn" xmlns="http://www.w3.org/2000/svg" width="42" height="42" viewBox="0 0 24 24" {...props}> <path fill="black" d="M19.793 3.441v17.118a1.243 1.243 0 0 1-1.83 1.19L3.329 12.991a1.184 1.184 0 0 1 0-1.982l14.634-8.758a1.243 1.243 0 0 1 1.83 1.19" /> </svg> --> + + + <!-- this is the gallery of the carousel --> + <div class="gallery"> - <div>{ - carouselData.slice(0, 4).map((slide) => { - return ( + {chunkedContent.map((chunk, index) => ( + <div> + {chunk.map((slide, idx) => ( <span> - <a href={slide.link} target="_blank"> - <img src={slide.img} alt={slide.alt} /> + <a href={slide.frontmatter.link} target="_blank" rel="noopener noreferrer"> + <img src={slide.frontmatter.img} alt={slide.frontmatter.alt} /> </a> </span> - ); - }) - }</div> - <div>{ - carouselData.slice(4).map((slide) => { - return ( - <span> - <a href={slide.link} target="_blank"> - <img src={slide.img} alt={slide.alt} /> - </a> - </span> - ); - }) - } - </div> + ))} + </div> + ))} </div> + + + + <!-- this is the next button for the carousel --> + <!-- <svg id = "nextBtn" xmlns="http://www.w3.org/2000/svg" width="42" height="42" viewBox="0 0 24 24" {...props}> <path fill="black" d="M19.793 3.441v17.118a1.243 1.243 0 0 1-1.83 1.19L3.329 12.991a1.184 1.184 0 0 1 0-1.982l14.634-8.758a1.243 1.243 0 0 1 1.83 1.19" /> </svg> --> @@ -81,6 +89,8 @@ const carouselData : Carousel[] = carouselJson; align-items: center; } + /* styling of the buttons */ + /* #nextBtn{ transform: rotateY(180deg); } @@ -95,6 +105,8 @@ const carouselData : Carousel[] = carouselJson; .gallery div{ grid-gap: 70px; } + + /* styling of the buttons */ /* #backBtn, #nextBtn{ margin: 0; } */ @@ -105,14 +117,20 @@ const carouselData : Carousel[] = carouselJson; <script> let scrollContainer : HTMLElement | null = document.querySelector(".gallery"); - // let nextBtn : HTMLElement | null = document.getElementById("nextBtn"); - // let backBtn : HTMLElement | null = document.getElementById("backBtn"); + scrollContainer?.addEventListener("wheel", (e)=>{ e.preventDefault(); scrollContainer.scrollLeft += (e as WheelEvent).deltaY; scrollContainer.style.scrollBehavior = "auto"; }); + + // this is the code for accessing the button elements + + // let nextBtn : HTMLElement | null = document.getElementById("nextBtn"); + // let backBtn : HTMLElement | null = document.getElementById("backBtn"); + + // this is the functioning of the buttons // nextBtn?.addEventListener("click", ()=>{ // if(scrollContainer){ diff --git a/src/components/Dummy.astro b/src/components/Dummy.astro deleted file mode 100644 index ec3b8ed..0000000 --- a/src/components/Dummy.astro +++ /dev/null @@ -1,153 +0,0 @@ ---- -var test = await Astro.glob("../content/resourcesPage/*.md"); ---- -<section> - -{ - test.map((item)=>{ - const Content = item.Content; - return( - <div class="faq"> - <div class="question"> - <h3>{item.frontmatter.heading}</h3> - <svg width = '15' height = '10' viewBox = '0 0 42 25'> - <path d = 'M3 3L21 21L39 3' stroke = 'white' stroke-width="7" stroke-linecape="round" /> - </svg> - </div> - <div class="answer"> - <Content/> - </div> - </div> - )}) - } -</section> - - -<style> - - section{ - display: flex; - flex-direction: column; - margin : 0 auto; - width: 60%; - } - - .faq{ - max-width: 100%; - cursor: pointer; - border: 1px solid #f6f4f4; - } - - .question{ - display: flex; - justify-content: space-between; - align-items: center; - color: #1c70cf; - background-color: rgba(0, 0, 0, .02); - padding: 1rem 2rem; - } - - .question h3{ - font-size: 1.1rem; - } - - .question h3:hover{ - text-decoration: underline; - color: #1662b8; - } - - .answer{ - max-height: 0; - overflow: hidden; - transition: max-height 0.8s ease; - } - - .answer ul li{ - padding: 1vh 3vh; - font-size: 1rem; - margin: 0; - line-height: 1.6; - color: black; - font-weight: 500; - background-color: white; - } - - .answer ul li a{ - color: #17a2b8; - text-decoration: none; - } - - .answer ul li a:hover{ - text-decoration: underline; - color: #0e8fa3; - } - - .faq.active .answer{ - max-height: 300px; - animation: fade 1s ease-in-out; - } - - .faq.active svg{ - transform: rotate(180deg); - } - - svg{ - display: none; /* If you want an icon besides the accordion, remove this line */ - transition: transform 0.5s ease-in; - } - - @keyframes fade { - from{ - opacity: 0; - transform: translateY(-10px); - } - to{ - opacity: 1; - transform: translateY(0); - } - } - - @media screen and (max-width: 768px){ - section{ - width: 90%; - } - .answer p{ - padding: 0.4vh 3vh; - font-size: 1rem; - line-height: 1.6; - margin: 0; - } - } -</style> - - -<script> - - var answers = Array.from(document.getElementsByClassName("answer")); - // console.log(answers); - answers.forEach(answer => { - const anchors = answer.querySelectorAll("ul li a"); - const lists = answer.querySelectorAll("ul li"); - // console.log(anchors); - // console.log(lists); - anchors.forEach(anchor => { - anchor.classList.add("text-[#17a2b8]", "no-underline", "hover:underline", "hover:text-[#0e8fa3]"); - }); - - lists.forEach((list)=>{ - list.classList.add("py-1", "px-3", "text-base", "m-0", "leading-7", "text-black", "font-medium", "bg-white"); - }) -}); - - - - const faqs = document.querySelectorAll('.faq'); - faqs.forEach(faq => { - faq.addEventListener('click', () => { - faq.classList.toggle('active'); - }) - }) - -</script> - - diff --git a/src/components/Footer.astro b/src/components/Footer.astro index 0bc5abf..63e4c28 100644 --- a/src/components/Footer.astro +++ b/src/components/Footer.astro @@ -1,41 +1,46 @@ --- -import footerJson from '../../public/jsonData/footer.json' -interface aboutList { - name: string; - link: string; -} +// import footerJson from '../../public/jsonData/footer.json' +// interface aboutList { +// name: string; +// frontmatter.link: string; +// } -interface footerContent { - about: aboutList[]; - resources: aboutList[]; -} +// interface footerContent { +// about: aboutList[]; +// resources: aboutList[]; +// } -const footerData : footerContent = footerJson; +// const footerContent : footerContent = footerJson; +var aboutContent = await Astro.glob("../content/footer/about/*.md"); +var resourcesContent = await Astro.glob("../content/footer/resources/*.md"); --- <div class="footer"> <div class="footer-content"> + <!-- this is the about section --> <ul class="about-list"> <h2>About</h2>{ - footerData.about.map((item) => { + aboutContent.map((item) => { return ( - <li><a class="footer-links" href={item.link} target="_blank">{item.name}</a></li> + <li><a class="footer-links" href={item.frontmatter.link} target="_blank">{item.frontmatter.name}</a></li> ) }) } </ul> </div> <div class="footer-content"> + <!-- this is the resources section --> <ul> <h2>Resources</h2>{ - footerData.resources.map((item) => { + resourcesContent.map((item) => { return ( - <li><a class="footer-links" href={item.link} target="_blank">{item.name}</a></li> + <li><a class="footer-links" href={item.frontmatter.link} target="_blank">{item.frontmatter.name}</a></li> ) }) } </ul> </div> + <!-- this is the license section --> <div class="license-container"> <a href="http://creativecommons.org/licenses/by-sa/4.0/" target="_blank"> <img class ="license-img" alt="Creative Commons License" style="border-width:0" src="https://iitb-isro-aicte-mapathon.fossee.in/static/cms/uploads/images/88x31.png"> diff --git a/src/components/Header.astro b/src/components/Header.astro index 0eba94a..41cbc6c 100644 --- a/src/components/Header.astro +++ b/src/components/Header.astro @@ -3,12 +3,19 @@ import 'bootstrap/dist/css/bootstrap.css' --- <div class="head"> + <!-- this is the main container --> <div class="map"> <img src="https://iot-gis-hackathon.fossee.org/static/cms/uploads/images/indiamap.png" id="left-img"> </div> + <!-- this is the map image --> <div class="registration"> + <!-- this is the hackathon heading --> <h2 class="hack-heading" style="color: #000080ff;">IIT Bombay-FOSSEE-GIS/OSHW, IITTNiF & <br> ICFOSS presents</h2> - <div class="hack-img"><img src="https://iot-gis-hackathon.fossee.org/static/cms/uploads/images/right-img.png" id="right-img"></div> + <!-- this is the hackathon image --> + <div class="hack-img"> + <img src="https://iot-gis-hackathon.fossee.org/static/cms/uploads/images/right-img.png" id="right-img"> + </div> + <!-- this is the hackathon important dates --> <div class="btn-Container"> <p> Registration opens: April 29, 2023 <br> @@ -19,6 +26,7 @@ import 'bootstrap/dist/css/bootstrap.css' Result Declaration: July 31, 2024 </p> + <!-- this is the register button --> <div class="hack-button"> <div id="slide"></div> <a href="#register">Register</a> diff --git a/src/components/HomeBody.astro b/src/components/HomeBody.astro index 302c89e..474ad7c 100644 --- a/src/components/HomeBody.astro +++ b/src/components/HomeBody.astro @@ -1,41 +1,49 @@ --- -import 'bootstrap/dist/css/bootstrap.css' -import Carousel from './Carousel.astro' -import faqJson from '../../public/jsonData/faq.json' -import homeJson from '../../public/jsonData/home.json' const props = Astro.props - -interface Coreteam{ - name : string; - position : string[]; - institute : string; -} - -interface Significance{ - intro : string; - point: string[]; - end: string; -} - -interface PartnerAndOrganisations{ - name: string; - description: string; -} - -interface Faq{ - question: string; - answer: string; -} - -interface Home{ - significance: Significance[]; - purpose: string[]; - partners: PartnerAndOrganisations[]; - coreteam: Coreteam[]; -} - -const homeData : Home = homeJson; -const faqData : Faq[] = faqJson; +import Carousel from './Carousel.astro' +// import 'bootstrap/dist/css/bootstrap.css' +// import faqJson from '../../public/jsonData/faq.json' +// import homeJson from '../../public/jsonData/home.json' + +// interface Coreteam{ +// name : string; +// position : string[]; +// institute : string; +// } + +// interface Significance{ +// intro : string; +// point: string[]; +// end: string; +// } + +// interface PartnerAndOrganisations{ +// name: string; +// description: string; +// } + +// interface Faq{ +// question: string; +// answer: string; +// } + +// interface Home{ +// significance: Significance[]; +// purpose: string[]; +// partners: PartnerAndOrganisations[]; +// coreteam: Coreteam[]; +// } + +// const homeData : Home = homeJson; +// const faqData : Faq[] = faqJson; + +//importing content from markdown files + +const coreTeamContent = await Astro.glob("../content/homePage/coreTeam/*.md"); +const partnerContent = await Astro.glob("../content/homePage/partner/*.md"); +const purposeContent = await Astro.glob("../content/homePage/purpose/*.md"); +const significanceContent = await Astro.glob("../content/homePage/significance/*.md"); +const faqContent = await Astro.glob("../content/faq/*.md"); --- <!-- Introduction --> @@ -45,19 +53,19 @@ const faqData : Faq[] = faqJson; <h2 class="welcome-heading"> Welcome to the Open Source Hardware IoT GIS Hackathon!</h2> <p class="welcome-text"> Welcome to the National Level Open Hardware-IoT Geospatial Hackathon, a stage where innovation knows no boundaries. This premier event brings together visionaries, tech enthusiasts, and problem solvers from across the nation to harness the power of open hardware, the Internet of Things (IoT), and geospatial technology. Get ready to explore uncharted possibilities, collaborate on real-world challenges, and make a significant impact on our world.</p> <h1 class="body-heading">Significance:</h1>{ - homeData.significance.map((point) => { + significanceContent.map((point) => { return ( <ul class="significance-points" style="list-style-type: square;"> - <p>{point.intro}</p> + <p>{point.frontmatter.intro}</p> { - point.point.map((p) => { + point.frontmatter.point.map((p:string) => { return ( <li>{p}</li> ) }) } </ul> - <p class="significance-end">{point.end}</p> + <p class="significance-end">{point.frontmatter.end}</p> ) }) } @@ -68,9 +76,9 @@ const faqData : Faq[] = faqJson; <div class="body-container"> <h1 class="intro" id = "purpose">Purpose</h1>{ - homeData.purpose.map((point) => { + purposeContent.map((point) => { return ( - <p class="significance-end">{point}</p> + <p class="significance-end">{point.frontmatter.desc}</p> ) }) } @@ -98,11 +106,11 @@ const faqData : Faq[] = faqJson; <div class="tech-imgs"> <Carousel/> </div>{ - homeData.partners.map((partner) => { + partnerContent.map((partner) => { return ( <p> - <span class="subheading">{partner.name}</span> - {partner.description} + <span class="subheading">{partner.frontmatter.name}</span> + {partner.frontmatter.description} </p> ) }) @@ -115,10 +123,10 @@ const faqData : Faq[] = faqJson; <div class="faq-container" id = "faq"> <h1 class="intro">Frequently Asked Questions (FAQ)</h1>{ - faqData.map((faq,index) => { + faqContent.map((faq,index) => { return ( - <h4 class="faq-heading">{index + 1}. {faq.question}</h4> - <p> <span>Answer: </span>{faq.answer}</p> + <h4 class="faq-heading">{index + 1}. {faq.frontmatter.question}</h4> + <p> <span>Answer: </span>{faq.frontmatter.answer}</p> ) }) } @@ -134,16 +142,16 @@ const faqData : Faq[] = faqJson; <path fill="currentColor" d="M4.05 21q-.45 0-.75-.3t-.3-.75V15.9q0-.325.225-.587t.575-.363l3.45-.7q.35-.05.713.063t.587.337L10.9 17q.95-.55 1.8-1.213t1.625-1.437q.825-.8 1.513-1.662t1.187-1.788L14.6 8.45q-.2-.2-.275-.475T14.3 7.3l.65-3.5q.05-.325.325-.562T15.9 3h4.05q.45 0 .75.3t.3.75q0 3.125-1.362 6.175t-3.863 5.55t-5.55 3.863T4.05 21" /> </svg></h1> <div class="contact-us">{ - homeData.coreteam.map((member) => { + coreTeamContent.map((member) => { return ( <div class="teach"> - <h4>{member.name}</h4> - {member.position.map((pos) => { + <h4>{member.frontmatter.name}</h4> + {member.frontmatter.position.map((pos:string) => { return ( <p>{pos}</p> ) })} - <p>{member.institute}</p> + <p>{member.frontmatter.institute}</p> </div> ) }) diff --git a/src/components/IconBar.astro b/src/components/IconBar.astro index f1919c3..9440517 100644 --- a/src/components/IconBar.astro +++ b/src/components/IconBar.astro @@ -2,7 +2,12 @@ const props = Astro.props --- +<!-- Social Media Icons --> + + <div class="icon-bar"> + + <!-- Facebook --> <a href="https://www.facebook.com/FOSSEENMEICT/" class="facebook" target="_blank"> <svg xmlns="http://www.w3.org/2000/svg" width="36.75" height="42" viewBox="0 0 448 512" {...props}> @@ -10,6 +15,8 @@ const props = Astro.props </svg> </a> + + <!-- Instagram --> <a href="https://www.instagram.com/fossee_nmeict/" class="instagram" target="_blank"> <svg xmlns="http://www.w3.org/2000/svg" width="36.75" height="42" viewBox="0 0 448 512" {...props}> @@ -17,6 +24,8 @@ const props = Astro.props </svg> </a> + + <!-- Twitter --> <a href="https://twitter.com/FOSSEE/" class="twitter" target="_blank"> <svg xmlns="http://www.w3.org/2000/svg" width="36.75" height="42" viewBox="0 0 448 512" {...props}> @@ -24,6 +33,8 @@ const props = Astro.props </svg> </a> + + <!-- LinkedIn --> <a href="https://www.linkedin.com/company/fossee-iitb/" class="linkedin" target="_blank"> <svg xmlns="http://www.w3.org/2000/svg" width="42" height="42" viewBox="0 0 256 256" {...props}> diff --git a/src/components/LoginBody.astro b/src/components/LoginBody.astro index 5dd25a8..d965274 100644 --- a/src/components/LoginBody.astro +++ b/src/components/LoginBody.astro @@ -1,7 +1,8 @@ --- +--- +<!-- Admin Login Page --> ---- <div class="flex items-center justify-center h-screen"> <div class="bg-white p-10 rounded-lg shadow-lg w-full max-w-sm"> <h1 class="text-2xl font-bold text-gray-800 mb-6 text-center">Admin Login</h1> @@ -17,6 +18,8 @@ </button> <p id="form-error"></p> </form> + + <!-- Signup Button --> <a class="no-underline text-white" href="/signup"> <button class="w-full bg-blue-500 hover:bg-blue-700 text-white py-2 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-600"> Signup @@ -26,6 +29,8 @@ </div> <script> + + // Form Submission const errorMessageElement = document.getElementById("form-error")!; document.forms[0].addEventListener("submit", async (e) => { @@ -37,6 +42,8 @@ body: new FormData(formElement), credentials: 'include' }); + + // Redirect to admin page if login is successful if (response.ok) { window.location.href = "/admin"; } else { diff --git a/src/components/Navbar.astro b/src/components/Navbar.astro index 6d5239d..ccea2e8 100644 --- a/src/components/Navbar.astro +++ b/src/components/Navbar.astro @@ -1,23 +1,26 @@ --- -interface Routes { - path: string; - name: string; -} +// interface Routes { +// frontmatter.path: string; +// name: string; +// }frontmatter. -import navbarJson from '../../public/jsonData/navbar.json' +// import navbarJson from '../../public/jsonData/navbar.json' -const navbarData : Routes[] = navbarJson; ---- +// const navbarContent : Routes[] = navbarJson; +var navbarContent = await Astro.glob("../content/navbarRoute/*.md"); +--- +<!-- web navbar --> <div class="navbar">{ - navbarData.map(route => ( - <a href={ route.path } class="text-blue-800">{ route.name }</a> + navbarContent.map(route => ( + <a href={ route.frontmatter.path } class="text-blue-800">{ route.frontmatter.name }</a> )) }</div> +<!-- hamburger menu --> <div class="hamburger-navbar"> <nav> <div class="ham-menu"> @@ -29,8 +32,8 @@ const navbarData : Routes[] = navbarJson; </div> <div class="off-screen-menu"> { - navbarData.map(route => ( - <a href={ route.path } class="text-blue-800">{ route.name }</a> + navbarContent.map(route => ( + <a href={ route.frontmatter.path } class="text-blue-800">{ route.frontmatter.name }</a> )) } </div> @@ -68,6 +71,11 @@ const navbarData : Routes[] = navbarJson; color: white; } + .off-screen-menu a.active-link { + color: red; + font-size: 3vh; + } + .off-screen-menu:active{ right: 0; } @@ -146,8 +154,8 @@ const navbarData : Routes[] = navbarJson; color: white; } .navbar a.active-link { - color: rgba(223, 78, 78, 0.801); - font-size: 3.5vh; + color: red; + font-size: 3vh; } @media screen and (max-width: 535px){ @@ -223,18 +231,26 @@ const navbarData : Routes[] = navbarJson; } }) - - // for active links - function handleActiveLinks() { - const navbarLinks = document.querySelectorAll('.navbar a'); - // console.log(navbarLinks); + const webNavbarLinks = document.querySelectorAll('.navbar a'); + const offScreenNavbarLinks = document.querySelectorAll('.off-screen-menu a'); var currentPathWithHash = window.location.pathname + window.location.hash; - // console.log(currentPathWithHash); - navbarLinks.forEach(link=>{ + // this is for the web navbar + webNavbarLinks.forEach(link=>{ + const linkPath = link.getAttribute('href'); + if(currentPathWithHash===linkPath){ + link.classList.add('active-link'); + } + else{ + link.classList.remove('active-link'); + } + }) + + // this is for the off-screen navbar + offScreenNavbarLinks.forEach(link=>{ const linkPath = link.getAttribute('href'); // console.log(linkPath); @@ -247,10 +263,13 @@ const navbarData : Routes[] = navbarJson; }) } + // this is for the initial load document.addEventListener('DOMContentLoaded', () => { handleActiveLinks(); }); + + // this is for the hash change window.addEventListener('hashchange', () => { handleActiveLinks(); }); diff --git a/src/components/ResourcesBody.astro b/src/components/ResourcesBody.astro index 70af821..fa6d689 100644 --- a/src/components/ResourcesBody.astro +++ b/src/components/ResourcesBody.astro @@ -1,14 +1,16 @@ --- import Accordion from './Accordion.astro' -import Dummy from './Dummy.astro' --- +<!-- Resources Page--> + <div class="resources-main"> <div class="resources-heading"> <h1>Resources</h1> </div> - <!-- <Accordion/> --> - <Dummy/> + + <!-- Accordion Component --> + <Accordion/> </div> <style> diff --git a/src/components/ResultsBody.astro b/src/components/ResultsBody.astro index 15b8f31..b08b017 100644 --- a/src/components/ResultsBody.astro +++ b/src/components/ResultsBody.astro @@ -1,12 +1,15 @@ --- // Can be used in other pages to check if the user is logged in or not + const user = Astro.locals.user; if(!user) { + // If the user is not logged in, it will redirect to the login page Astro.redirect('/login'); } else{ + // If the user is logged in, it will redirect to the admin page Astro.redirect('/admin'); } @@ -15,7 +18,6 @@ else{ <div class="resultsContainer"> <div class="pre min-h-screen flex flex-col items-center justify-center"> <h1 class="mb-10">Results will be announced soon</h1> - <!-- <Login /> --> <a href = "/login" type="submit" class="w-40 bg-purple-600 no-underline text-center text-white py-2 rounded-lg hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-purple-600" id="Adminbtn">Admin Login<a/> </div> diff --git a/src/components/ScheduleBody.astro b/src/components/ScheduleBody.astro index f42b7c1..7b26b6b 100644 --- a/src/components/ScheduleBody.astro +++ b/src/components/ScheduleBody.astro @@ -1,14 +1,17 @@ --- -import scheduleJson from '../../public/jsonData/schedule.json'; -interface ScheduleItem{ - heading : string; - events : string[]; -} -const scheduleData : ScheduleItem[] = scheduleJson; +// import scheduleJson from '../../public/jsonData/schedule.json'; +// interface ScheduleItem{ +// heading : string; +// events : string[]; +// } +// const scheduleData : ScheduleItem[] = scheduleJson; + +var scheduleContent = await Astro.glob('../content/scheduleEvent/*.md'); --- +<!-- Schedule --> <div class="schedule-main"> <div class="schedule-heading"> @@ -16,15 +19,12 @@ const scheduleData : ScheduleItem[] = scheduleJson; </div> <hr> <div class="schedule-content">{ - scheduleData.map((item)=>{ + scheduleContent.map((item)=>{ + const Content = item.Content; return ( - <h2>{item.heading}</h2> + <h2 class="md:w-[80vw]">{item.frontmatter.heading}</h2> <div class="weeks"> - { - item.events.map((event)=> - <p>{event}</p> - ) - } + <Content /> </div> )}) } @@ -32,46 +32,57 @@ const scheduleData : ScheduleItem[] = scheduleJson; </div> - <style> +<style> - .schedule-heading h1{ - color: rgb(2, 2, 110); - font-size: 7.5vh; - /* font-family: 'Roboto Slab', serif !important; */ - padding: 3vh 6vw; - font-weight: 700; - text-align: center; - } - .schedule-heading:hover{ - color: blue; - } +.schedule-heading h1{ + color: rgb(2, 2, 110); + font-size: 7.5vh; + /* font-family: 'Roboto Slab', serif !important; */ + padding: 3vh 6vw; + font-weight: 700; + text-align: center; +} +.schedule-heading:hover{ + color: blue; +} +.schedule-content{ + padding: 0 0 0 25%; + width: 75vw; +} +.schedule-content h2{ + font-size: 3.3vh; + width:50vw; + background-color: rgb(252, 230, 188); + padding: 1vh; + margin-bottom: 2vh; + color:rgb(2, 2, 110); +} +@media screen and (max-width: 983px) { .schedule-content{ - padding: 0 0 0 25%; + padding: 0 0 0 12%; } .schedule-content h2{ - font-size: 3.3vh; - width:72%; - background-color: rgb(252, 230, 188); - padding: 1vh; - margin-bottom: 2vh; - color:rgb(2, 2, 110); + width: 80vw; + } + .schedule-heading h1{ + font-size: 5vh; + margin-top: 10vh; } .weeks p{ - font-size: 3vh; - padding: 1vh 2.6vh; - width: 75%; - border-left: 4px solid blue; + border-left: 2px solid blue; } - @media screen and (max-width: 983px) { - .schedule-content{ - padding: 0 0 0 12%; - } - .schedule-heading h1{ - font-size: 5vh; - margin-top: 10vh; - } - .weeks p{ - border-left: 2px solid blue; - } - } - </style>
\ No newline at end of file +} +</style> + +<script> + +//styling the schedule Content + +var weeks = Array.from(document.getElementsByClassName("weeks")); +weeks.forEach(answer => { + const paras = answer.querySelectorAll("ul li"); + paras.forEach(para => { + para.classList.add("text-xl", "py-1", "px-4", "border-s-[3px]", "border-blue-800", "border-solid", "my-1", "md:border-s-[4px]"); + }); +}); +</script>
\ No newline at end of file diff --git a/src/components/SignupBody.astro b/src/components/SignupBody.astro index 0601c3d..70b12df 100644 --- a/src/components/SignupBody.astro +++ b/src/components/SignupBody.astro @@ -2,6 +2,8 @@ --- +<!-- Signup form --> + <div class="flex flex-col items-center justify-center min-h-screen bg-gray-100"> <h1 class="text-2xl font-bold mb-6">Create an account</h1> <form method="post" action="/api/signup" class="w-full max-w-sm bg-white p-8 rounded shadow-md"> @@ -13,9 +15,15 @@ <label for="password" class="block text-gray-700 text-sm font-bold mb-2">Password</label> <input type="password" name="password" id="password" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" /> </div> + + <!-- Continue button --> + <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">Continue</button> <p id="form-error" class="mt-4 text-red-500 text-sm"></p> </form> + + <!-- Sign in link --> + <a href="/login" class="mt-4 text-blue-500 hover:underline"> <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"> Sign in @@ -25,6 +33,8 @@ <script> + + // Form submission const errorMessageElement = document.getElementById("form-error")!; document.forms[0].addEventListener("submit", async (e) => { @@ -35,6 +45,7 @@ method: formElement.method, body: new FormData(formElement) }); + // Redirect to admin page if successful if (response.ok) { window.location.href = "/admin"; } else { diff --git a/src/components/TopBar.astro b/src/components/TopBar.astro index feacd39..5f08de0 100644 --- a/src/components/TopBar.astro +++ b/src/components/TopBar.astro @@ -1,68 +1,72 @@ --- -import 'bootstrap/dist/css/bootstrap.css' -import bannerJson from "../../public/jsonData/topbar.json" +// import 'bootstrap/dist/css/bootstrap.css' +// import bannerJson from "../../public/jsonData/topbar.json" -interface BannerImages { - link: string; - image: string; - alt: string; - classname: string; - id? : string; -} +// interface BannerImages { +// link: string; +// image: string; +// alt: string; +// classname: string; +// id? : string; +// } -const bannerData : BannerImages[] = bannerJson; +// const bannerData : BannerImages[] = bannerJson; + +const bannerContent = await Astro.glob("../content/topbarLogo/*.md"); --- + + <div class="banner-content"> - <div id="top-logo-placeholder"> - <div class="d-flex justify-content-center">{ - bannerData.map((image) => { - return ( - <div class="p-2 pb-1"> - <a href={image.link} target="_blank"> - <img src={image.image} class={image.classname} alt={image.alt} id={image.id}/> - </a> - </div> - ) - }) - } - </div> + <div id="top-logo-placeholder"> + <div class="d-flex justify-content-center">{ + bannerContent.map((image) => { + return ( + <div class="p-2 pb-1"> + <a href={image.frontmatter.link} target="_blank"> + <img src={image.frontmatter.image} class={image.frontmatter.classname} alt={image.frontmatter.alt} id={image.frontmatter.id}/> + </a> + </div> + ) + }) + } </div> </div> +</div> - <style> +<style> - a{ - cursor: pointer; - } + a{ + cursor: pointer; + } - .banner-content{ - z-index: 1001; - } - .banner-content div div{ - align-items: center; - } + .banner-content{ + z-index: 1001; + } + .banner-content div div{ + align-items: center; + } - img{ - width: 10vh; - - } - .banner-content .big-img { - width: 18vh; - } + img{ + width: 10vh; + + } + .banner-content .big-img { + width: 18vh; + } - .banner-content #iitb{ - height: 30%; - width: 23vh; - } + .banner-content #iitb{ + height: 30%; + width: 23vh; + } - @media screen and (max-width: 982px){ - .banner-content{ - position: sticky; - top: 0; - background-color: white; - } + @media screen and (max-width: 982px){ + .banner-content{ + position: sticky; + top: 0; + background-color: white; } - </style> + } +</style> diff --git a/src/content/homePage/partner/partner1.md b/src/content/homePage/partner/partner1.md index fb074a0..41a61c1 100644 --- a/src/content/homePage/partner/partner1.md +++ b/src/content/homePage/partner/partner1.md @@ -1,4 +1,5 @@ --- Number: 1 +name: "Main Organizer: IIT Bombay FOSSEE GIS & OSHW project (NMEICT, Ministry of Education, Government of India)" description: "The IIT Bombay FOSSEE GIS & OSHW project teams are the main organizers of this National Level Geospatial IoT Hackathon 2024 (Edition 01). FOSSEE promotes the usage of Free/Libre Open Source Software in academia and industry and is funded through the National Mission on Education through ICT, Ministry of Education, Government of India." --- diff --git a/src/content/homePage/partner/partner2.md b/src/content/homePage/partner/partner2.md index 493cdb5..2784a25 100644 --- a/src/content/homePage/partner/partner2.md +++ b/src/content/homePage/partner/partner2.md @@ -1,4 +1,5 @@ --- Number: 2 +name: "Technical Partner:" description: "The Rural Data Research and Analysis (RuDRA) Lab, IIT Bombay is India's first HPC-powered data center dedicated to Rural Development." --- diff --git a/src/content/homePage/partner/partner3.md b/src/content/homePage/partner/partner3.md index 93eff18..76ce0ad 100644 --- a/src/content/homePage/partner/partner3.md +++ b/src/content/homePage/partner/partner3.md @@ -1,4 +1,5 @@ --- Number: 3 +name: "Organizing Partners: IITTNiF (NM-ICPS, DST, Government of India) & ICFOSS (Government of Kerala): " description: "The <span> IIT Tirupati Navavishkar I-Hub Foundation </span> is the Technology Innovation Hub specializing in Positioning and Precision Technologies, funded through the National Mission on Interdisciplinary Cyber-Physical System (NM-ICPS), Department of Science and Technology, Government of India." --- diff --git a/src/content/homePage/partner/partner4.md b/src/content/homePage/partner/partner4.md index 46dea29..aa14576 100644 --- a/src/content/homePage/partner/partner4.md +++ b/src/content/homePage/partner/partner4.md @@ -1,4 +1,5 @@ --- Number: 4 +name: " ICFOSS : The International Centre for Free and Open Source Software (ICFOSS) is an autonomous organization set up by the Government of Kerala, India," description: "and has the combined mandate of popularizing Free and Open Source Software for universal use; consolidating the early FOSS work done in Kerala; and networking with different nations, communities, and governments to collaboratively promote FOSS" --- diff --git a/src/content/scheduleEvent/s1.md b/src/content/scheduleEvent/s1.md index b8ccbe1..ca346fa 100644 --- a/src/content/scheduleEvent/s1.md +++ b/src/content/scheduleEvent/s1.md @@ -3,9 +3,9 @@ Number: 1 heading: "Week 1: Kickoff and Orientation [March 01 to 07, 2024]" --- -- "Working Day 1: Registration and Welcome Ceremony" -- "Working Day 2: Opening Keynote and Theme Announcement" -- "Working Day 3: Workshop 1 - Introduction to Open Hardware and IoT" -- "Working Day 4: Workshop 2 - Geospatial Technology Fundamentals" -- "Working Day 5: Team Formation and Ideation Session" -- "Working Day 6-7: Self-Study and Project Brainstorming" +- Working Day 1: Registration and Welcome Ceremony +- Working Day 2: Opening Keynote and Theme Announcement +- Working Day 3: Workshop 1 - Introduction to Open Hardware and IoT +- Working Day 4: Workshop 2 - Geospatial Technology Fundamentals +- Working Day 5: Team Formation and Ideation Session +- Working Day 6-7: Self-Study and Project Brainstorming diff --git a/src/content/scheduleEvent/s2.md b/src/content/scheduleEvent/s2.md index c9d3359..68a427c 100644 --- a/src/content/scheduleEvent/s2.md +++ b/src/content/scheduleEvent/s2.md @@ -3,7 +3,7 @@ Number: 2 heading: "Week 2: Deep Dive into IoT and GIS [March 08 to 14, 2024]" --- -- "Working Day 8: Workshop 3 - IoT Sensors and Data Collection" -- "Working Day 9: Workshop 4 - Advanced GIS Applications" -- "Working Day 10: Hacking Session Begins" -- "Working Day 11-14: Guided Hacking, Team Check-Ins, and Progress Reports" +- Working Day 8: Workshop 3 - IoT Sensors and Data Collection +- Working Day 9: Workshop 4 - Advanced GIS Applications +- Working Day 10: Hacking Session Begins +- Working Day 11-14: Guided Hacking, Team Check-Ins, and Progress Reports diff --git a/src/content/scheduleEvent/s3.md b/src/content/scheduleEvent/s3.md index e2deb0f..16a7332 100644 --- a/src/content/scheduleEvent/s3.md +++ b/src/content/scheduleEvent/s3.md @@ -3,6 +3,6 @@ Number: 3 heading: "Week 3: Prototyping and Development [March 15 to 21, 2024]" --- -- "Working Day 15: Workshop 5 - Data Visualization with GIS" -- "Working Day 16: Workshop 6 - Open Source Hardware Prototyping" -- "Working Day 17-21: Dedicated Hacking and Prototype Development" +- Working Day 15: Workshop 5 - Data Visualization with GIS +- Working Day 16: Workshop 6 - Open Source Hardware Prototyping +- Working Day 17-21: Dedicated Hacking and Prototype Development diff --git a/src/content/scheduleEvent/s4.md b/src/content/scheduleEvent/s4.md index bd6d2f3..635d7da 100644 --- a/src/content/scheduleEvent/s4.md +++ b/src/content/scheduleEvent/s4.md @@ -3,7 +3,7 @@ Number: 4 heading: "Week 4: Final Touches and Presentations [March 22 to April 05, 2024]" --- -- "Working Day 22: Workshop 7 - IoT Data Analysis" -- "Working Day 23-25: Final Project Development and Testing" -- "Working Day 26: Project Submissions" -- "Working Day 27-28: Team Rehearsals and Presentation Prep" +- Working Day 22: Workshop 7 - IoT Data Analysis +- Working Day 23-25: Final Project Development and Testing +- Working Day 26: Project Submissions +- Working Day 27-28: Team Rehearsals and Presentation Prep diff --git a/src/content/scheduleEvent/s5.md b/src/content/scheduleEvent/s5.md index f4418c5..d883d26 100644 --- a/src/content/scheduleEvent/s5.md +++ b/src/content/scheduleEvent/s5.md @@ -3,6 +3,6 @@ Number: 5 heading: "Week 5: Grand Finale and Awards" --- -- "Working Day 29: Presentations by Hackathon Teams" -- "April 12, 2023 (tentative): Judging and Results Declaration" -- "Date to be announced: Awards Ceremony and Celebration" +- Working Day 29: Presentations by Hackathon Teams +- April 12, 2023 (tentative): Judging and Results Declaration +- Date to be announced: Awards Ceremony and Celebration diff --git a/src/pages/signup.astro b/src/pages/signup.astro index 5b19cfe..8763288 100644 --- a/src/pages/signup.astro +++ b/src/pages/signup.astro @@ -3,7 +3,6 @@ import Layout from '../layouts/Layout.astro'; import TopBar from '../components/TopBar.astro'; import Navbar from '../components/Navbar.astro'; import Footer from '../components/Footer.astro'; - import IconBar from '../components/IconBar.astro'; import SignupBody from '../components/SignupBody.astro'; --- diff --git a/src/script.py b/src/script.py index 74317ce..646b0b4 100644 --- a/src/script.py +++ b/src/script.py @@ -1,3 +1,6 @@ + +# This script reads the JSON data from the input file and creates a Markdown file for each entry in the JSON data. + import json import os diff --git a/src/utils/chunk.ts b/src/utils/chunk.ts new file mode 100644 index 0000000..a76a48c --- /dev/null +++ b/src/utils/chunk.ts @@ -0,0 +1,7 @@ +export function chunkArray<T>(array: T[], size: number): T[][] { + const chunkedArr: T[][] = []; + for (let i = 0; i < array.length; i += size) { + chunkedArr.push(array.slice(i, i + size)); + } + return chunkedArr; +} |