Upcoming events section added! (#21)

* feat: upcoming events section

* fix: cta bg and events fetch from official repo events.json file

* fix: changed the events url to be imported from config

* fix: project structure change in semicolon at eol

Author: axyut

config.yml

@@ -46,3 +46,8 @@ featured:
   -  "2021/satyarajawasth1" # slug
   blogs:
   -  "2017/ncit-alumni-reflections"
+
+events:
+  upcoming:
+    title: Upcoming Events
+    link: "https://raw.githubusercontent.com/noskofficial/noskofficial.github.io/main/events.json"

public/event.jpg

@@ -1,4 +1,4 @@
-<section class="w-full flex-col justify-start items-center bg-gray-700 text-white py-8">
+<section class="w-full flex-col justify-start items-center bg-gray-800 text-white py-8">
   <div class="text-center mb-12">
     <h2 class="text-3xl md:text-5xl font-bold my-4 mx-4 sm:mx-8">
       Join Our Open Source Movement
@@ -16,8 +16,5 @@
         Learn More
       </a>
     </div>
-    <p class="text-lg md:text-xl pt-8 mx-4 sm:mx-8">
-      A Call To Action!
-    </p>
   </div>
 </section>

src/components/homepage/JoinCTA.astro

@@ -0,0 +1,79 @@
+---
+import { loadConfig } from "../../utils/loadconfig";
+import { EventData } from "../../utils/types";
+
+const config = loadConfig();
+const upcoming_event_link = config.events.upcoming.link;
+
+let eventsData: EventData[];
+try {
+  const response = await fetch(upcoming_event_link);
+  if (!response.ok) {
+    throw new Error(`HTTP error! status: ${response.status}`);
+  }
+  eventsData = await response.json();
+  eventsData.forEach((event, index) => {
+    if (!event.BannerURL) {
+      event.BannerURL = "event.jpg";
+    }
+  });
+  
+} catch (error) {
+  console.error('Error fetching events:', error);
+  eventsData = [];
+}
+---
+<section class="w-full flex-col justify-start items-center bg-gray-900 text-white py-16">
+  <div class="text-center mb-12">
+    <h2 class="text-3xl md:text-5xl font-bold mb-4 mx-4 sm:mx-8">
+      Upcoming Events
+    </h2>
+    <p class="text-lg md:text-xl mb-10 mx-4 sm:mx-8">
+      Stay updated with the latest events and gatherings happening soon. Don't miss out on the action!
+    </p>
+  </div>
+
+  <div class="flex-row items-center py-5">
+    <div class="grid grid-cols-1 sm:grid-cols-1 md:grid-cols-2 gap-6 mx-6 lg:mx-16">
+      {eventsData.slice(0,2).map(({ Title, By, Date, Time, URL, BannerURL }) => (
+        <div class="bg-gray-800 rounded-lg p-6 shadow-lg flex flex-col md:flex-row justify-between items-center h-full">
+          <div class="flex flex-col justify-between flex-1 mb-4 md:mb-0 md:mr-6 h-full">
+            <div>
+              <h3 class="text-2xl font-semibold text-lime-300 mb-2">{Title}</h3>
+              <div class="flex items-center text-lg font-medium mb-2">
+                <span class="text-lime-300">{Date}</span>
+                <span class="mx-2">|</span>
+                <span class="text-gray-400">{Time}</span>
+              </div>
+              {/* By: */}
+              {
+                By.map((by) => (
+                <p class="mb-4 text-lg text-gray-300">
+                  {by}
+                </p>
+              ))
+              }
+            
+            </div>
+            <div class="mt-auto">
+              <a
+                href={URL}
+                class="border border-yellow-500 hover:bg-yellow-500 text-white py-1 px-2 transition-all duration-300">
+                Learn More
+              </a>
+            </div>
+          </div>
+          <div class="w-full md:w-1/3 h-auto">
+            <img class="w-full h-auto rounded-md" src={BannerURL} alt="Event image" />
+          </div>
+        </div>
+      ))}
+    </div>
+  </div>
+
+  <div class="text-center mt-12">
+    <a href="/events" class="border border-green-500 hover:bg-green-500 text-white py-3 px-6 transition-all duration-300">
+      View More Events
+    </a>
+  </div>
+</section>

src/components/homepage/UpEvents.astro

@@ -3,6 +3,7 @@ import TopNavigation from "../components/shared/TopNavigation.astro"
 import HeroSection from '../components/homepage/HeroSection.astro';
 import ProfileHighlight from '../components/homepage/ProfileHighlight.astro';
 import BlogHighlight from '../components/homepage/BlogHighlight.astro';
+import UpEvents from "../components/homepage/UpEvents.astro";
 import JoinCTA from '../components/homepage/JoinCTA.astro';
 import Footer from '../components/shared/Footer.astro';
 
@@ -15,6 +16,7 @@ const { children } = Astro.props;
   <HeroSection />
   <ProfileHighlight />
   <BlogHighlight />
+  <UpEvents />
   <JoinCTA />
   <Footer />
 

src/layout/HomeLayout.astro

@@ -1,12 +1,22 @@
-import fs from "fs";
-import path from "path";
-import yaml from "js-yaml";
-import { getCollection } from 'astro:content';
+import fs from "fs"
+import path from "path"
+import yaml from "js-yaml"
+import { getCollection } from "astro:content"
 
 export interface Root {
   menu: Menu
   featured: FeaturedDetails
   footer: Footer
+  events: Event
+}
+
+export interface Event {
+  upcoming: Upcoming
+}
+
+export interface Upcoming {
+  title: string
+  link: string
 }
 
 export interface Menu {
@@ -35,19 +45,19 @@ export interface SubMenu {
 }
 
 interface FeaturedDetails {
-  profiles: string[];
-  blogs: string[];
+  profiles: string[]
+  blogs: string[]
 }
 
 export function loadConfig(): Root {
-  const filePath = path.resolve("./config.yml");
-  const fileContents = fs.readFileSync(filePath, "utf8");
-  return yaml.load(fileContents) as Root;
+  const filePath = path.resolve("./config.yml")
+  const fileContents = fs.readFileSync(filePath, "utf8")
+  return yaml.load(fileContents) as Root
 }
 
 export const getFeaturedProfiles = async (paths: string[]) => {
-  const allProfiles = await getCollection('profiles');
-  
+  const allProfiles = await getCollection("profiles")
+
   // Filter profiles based on featured.profiles in the config.yml file
-  return allProfiles.filter(profile => paths.includes(profile.slug));
-};
+  return allProfiles.filter((profile) => paths.includes(profile.slug))
+}

src/utils/loadconfig.ts

@@ -1,10 +1,22 @@
 export interface AlumniProfileInfo {
-    name: string;
-    program: string;
-    batch: string;
-    image?: { url: string };
-    slogan?: string;
-    tags: string[];
-    history: { year: string; position: string; company: string }[];
-    slug: string;
-  }
+  name: string
+  program: string
+  batch: string
+  image?: { url: string }
+  slogan?: string
+  tags: string[]
+  history: { year: string; position: string; company: string }[]
+  slug: string
+}
+
+export interface EventData {
+  id: string
+  Title: string
+  By: string[]
+  Date: string
+  Time: string
+  URL: string
+  IMGURL: string // this is the url to the section on html page so it cannot be used for the image
+  BannerURL: string // there is no banner url but should be added for latest entries to the events.json
+  ProfileLink: string[]
+}