Merge branch 'new-footer' into dev

.gitignore

@@ -43,5 +43,4 @@ app/
 **/vendor
 lymp/
 
-#google creds
 **/*-google-*.json

src/components/footer/Feedback.astro

@@ -0,0 +1,54 @@
+---
+import { FEEDBACK_TEXT } from "../../config/footer";
+import GroupTitle from "./GroupTitle.astro";
+---
+
+<div class="w-full my-6 hidden xl:block">
+    <GroupTitle title="Feedback." />
+
+    <textarea id="feedback-txt" placeholder={FEEDBACK_TEXT.placeholder} rows="3"
+cols="60"              class="block mt-4 bg-spc-dark text-spc-light rounded-sm p-2" />
+
+    <button id="feedback-btn" class="bg-spc-dark mt-2 px-4 py-1 rounded-sm">Send.</button>
+    <p class="text-[10px] font-mono mt-2 text-spc-light/50">{FEEDBACK_TEXT.rate}</p>
+</div>
+
+<script>
+    import { get_api_route } from "../../config/global";
+
+    const btn = document.querySelector("#feedback-btn");
+    const textarea = document.querySelector("#feedback-txt");
+    let rate = 0;
+
+    function rateLimitSend() {
+        btn.innerHTML = `Resend in ${120 - rate} minutes`;
+        rate += 1;
+    }
+
+    async function submitFeedback() {
+        if (rate > 0) {
+            return;
+        }
+
+        const feedback = textarea.value;
+        console.info(feedback, "feature not yet implemented");
+
+        const res = await fetch(get_api_route("annon-feedback"), {
+            method: "POST"
+        });
+
+        textarea.value = "";
+        if (res.status === 201) {
+            console.info("feedback submitted");
+        } else {
+            console.info("something wrong with annonym-feedback endpoint");
+        }
+
+        rateLimitSend();
+        setInterval(rateLimitSend, 60 * 1000);
+
+    }
+
+    btn.addEventListener("click", submitFeedback);
+
+</script>

src/components/footer/Footer.astro

@@ -1,18 +1,118 @@
 ---
-import FooterTail from "./FooterTail.astro";
 import FooterAcknowledgement from "./FooterAcknowledgement.astro";
 import FooterBanner from "./FooterBanner.astro";
 
 import "@fontsource/playfair-display/700.css";
 import "@fontsource/space-mono/400.css";
+import QuickNavi from "./QuickNavi.astro";
+import GroupTitle from "./GroupTitle.astro";
+import { CONTACT_INFO, FEEDBACK_TEXT, SOCIAL } from "../../config/footer";
+import SPCLogo from "../common/SPCLogo.astro";
+import Feedback from "@components/footer/Feedback.astro";
 ---
 
-<footer class="bg-[#393939] text-spc-light px-6 py-12 md:px-0">
-  <div class="md:px-12 xl:px-96">
-    <FooterBanner />
+<footer class="lg:hidden bg-[#393939] text-spc-light px-6 py-12 md:px-0">
+    <div class="md:px-12 xl:px-96">
+        <FooterBanner />
+
+        <!--<HolyMassDates />-->
+
+        <QuickNavi />
+
+        {/* contact info */}
+        <div class="my-8">
+            <GroupTitle title="Contact Us." />
+
+            <div>
+                {CONTACT_INFO.map(c => <p class="mt-2 text-spc-light" set:html={c} />)}
+            </div>
+        </div>
+
+        {/* social links */}
+        <div class="my-8">
+            <GroupTitle title="Follow Us." />
+
+            <div class="space-y-1 mt-1">
+                {
+                    SOCIAL.map(s => <a class="block" href={s.link}>{s.text}</a>)
+                }
+            </div>
+
+        </div>
+
+        {/* fineprints */}
+        <div class="my-8">
+            <GroupTitle title="Fineprints." />
 
-    <FooterAcknowledgement />
+            <div class="space-y-1 mt-1">
+                <a class="block" href="/pop">Privacy Policy</a>
+                <a class="block" href="/toc">Terms and Conditions</a>
+                <a class="block" href="https://github.com/BirnadinErick/spc-175#Apache-2.0-1-ov-file">
+                    Apache 2.0 License
+                </a>
+            </div>
+        </div>
 
-    <FooterTail />
-  </div>
+        <FooterAcknowledgement />
+
+        <div class="my-4">
+            <hr class="my-4 border-white/20">
+        </div>
+        <div class="my-2 flex items-center justify-around">
+            <div class="flex justify-start items-center space-x-0">
+                <SPCLogo dim="72" />
+                <p class="font-bold text-lg text-spc-light/90">St. Patrick's College</p>
+            </div>
+        </div>
+    </div>
 </footer>
+
+<footer class="hidden lg:block space-y-2 bg-[#393939] text-spc-light overflow-clip p-12 xl:p-20 xl:pb-0 rounded-t-2xl">
+    <FooterBanner />
+
+    <div class="flex items-start justify-start">
+        <div class="w-4/5">
+            <div class="flex items-start justify-start space-x-32">
+                <QuickNavi />
+
+                <div class="my-8">
+                    <GroupTitle title="Contact Us." />
+
+                    <div>
+                        {CONTACT_INFO.map(c => <p class="mt-2 text-spc-light" set:html={c} />)}
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <Feedback is:client />
+    </div>
+    <div class="w-5/5">
+        <FooterAcknowledgement />
+    </div>
+    <div class="my-8">
+        <hr class="border-spc-light/20 my-8 border">
+
+        <div class="pb-4 flex items-center justify-between">
+            <div class="space-x-4 flex items-baseline text-spc-light/80 justify-start">
+                {
+                    SOCIAL.map(c => <a href={c.link}>{c.text}</a>)
+                }
+            </div>
+            <div>
+                <div class="flex justify-start items-center space-x-4">
+                    <SPCLogo dim="100" />
+                    <p class="font-bold text-lg text-spc-light/90">St. Patrick's College</p>
+                </div>
+            </div>
+
+            <div class="flex items-baseline justify-end space-x-4 text-spc-light/80">
+                <a class="block" href="/pop">Privacy Policy</a>
+                <a class="block" href="/toc">TOC</a>
+                <a class="block" href="https://github.com/BirnadinErick/spc-175#Apache-2.0-1-ov-file">
+                    Apache 2.0 License
+                </a>
+            </div>
+        </div>
+    </div>
+</footer>

src/components/footer/FooterAcknowledgement.astro

@@ -1,4 +1,4 @@
-<p class="mt-10 text-sm text-white/60 md:w-3/5">
+<p class="mt-10 text-sm text-white/60 md:w-3/5 xl:w-full">
   <span class="text-white"> All rights reserved by SPC Media Unit.</span>{" "}
   Neither code nor graphics can be used without prior written knowledge of the Unit
   Members. Source text is owned by the members of{" "}

src/components/footer/FooterTail.astro

@@ -5,18 +5,5 @@ import SPCLogo from "@components/common/SPCLogo.astro";
 
 <div class="flex justify-start items-center -m-2 mt-10 space-x-4">
   <a href="/">
-    <SPCLogo />
   </a>
-
-  {/* divider */}
-  <h2 class="text-4xl text-spc-light/50">|</h2>
-
-  <FooterSocialItem
-    url="https://www.youtube.com/@st.patrickscollegejaffna.8326"
-    display="Yt."
-  />
-  <FooterSocialItem
-    url="https://www.facebook.com/StPatricksCollegeJaffna"
-    display="Fb."
-  />
 </div>

src/components/footer/GroupTitle.astro

@@ -0,0 +1,4 @@
+---
+const {title} = Astro.props;
+---
+<h3 class="font-bold">{title}</h3>

src/components/footer/HolyMassDates.astro

@@ -0,0 +1,18 @@
+---
+import { MASS } from "../../config/footer";
+import GroupTitle from "./GroupTitle.astro";
+---
+
+<div class="my-8">
+    <GroupTitle title="Holy Mass Schedules." />
+
+    <div>
+        {
+            MASS.map(m =>
+                <div class="flex items-baseline justify-start space-x-6">
+                    <p class="text-white/70 font-mono text-sm">{m.date}</p>
+                    <p>{m.text}</p>
+                </div>)
+        }
+    </div>
+</div>

src/components/footer/QuickNavi.astro

@@ -0,0 +1,11 @@
+---
+import GroupTitle from "./GroupTitle.astro";
+import { QUICK_NAVI } from "../../config/footer";
+---
+<div class="my-8">
+    <GroupTitle title="Quick Navigation." />
+
+    <div class="grid grid-cols-2">
+        {QUICK_NAVI.map(n => <a class="hover:underline hover:underline-offset-4" href={n.link}>{n.text}</a>)}
+    </div>
+</div>

src/config/footer.ts

@@ -0,0 +1,37 @@
+const MASS: Array<{ date: string; text: string; }> = [
+    { "date": "01. Jan", "text": "Our Lady Mother of God" },
+    { "date": "17. Mar", "text": "St. Patrick's Day" },
+    { "date": "05. Mar", "text": "Ash Wednesday" },
+    { "date": "20. Apr", "text": "Easter Celebration" },
+    { "date": "08. Dec", "text": "Immaculate Holy Marry" },
+    { "date": "25. Dec", "text": "Birth of Lord Jesus Christ" }
+];
+
+const QUICK_NAVI: Array<{ text: string; link: string; }> = [
+    { "text": "Home", "link": "/" },
+    { "text": "Academics", "link": "/academics/achievements" },
+    { "text": "Blogs & News", "link": "/blogs" },
+    { "text": "Our Spirituality", "link": "/alma-mater/our-spirituality" },
+    { "text": "Projects", "link": "/projects" },
+    { "text": "Our History", "link": "/alma-mater/history-of-the-college" },
+    { "text": "Live Streams", "link": "https://www.youtube.com/@st.patrickscollegejaffna.8326/streams" },
+    { "text": "175 Celebrations", "link": "#" },
+    { "text": "Gallery", "link": "/gallery" },
+    { "text": "Sports", "link": "/co-curriculum/sports" }
+];
+
+const CONTACT_INFO = [
+    "[email protected]", "0212222388", "St. Patrick's College, <br/> St. Patrick's Road, <br /> 40 000 Jaffna"
+];
+
+const SOCIAL: Array<{ icon: any; text: string; link: string; }> = [
+    { "icon": "", "text": "Facebook", "link": "https://www.facebook.com/StPatricksCollegeJaffna/" },
+    { "icon": "", "text": " YouTube", "link": "https://www.youtube.com/@st.patrickscollegejaffna.8326/streams" }
+];
+
+const FEEDBACK_TEXT = {
+    placeholder: "Let the SPC Media Unit what you think of site and enable them to further enhance the experience.",
+    rate: "Rate limited to once per 120 minutes for DDOS and Sloth protection!"
+};
+
+export { MASS, QUICK_NAVI, CONTACT_INFO, SOCIAL, FEEDBACK_TEXT };