feature: Adds a card layout for viewing alumni info in card layout where required & implements on profile highlight and profiles page

src/components/homepage/ProfileHighlight.astro

@@ -1,4 +1,5 @@
 ---
+import AlumniCard from '../../layout/AlumniCardLayout.astro';
 import { loadConfig } from "../../utils/loadconfig";
 import { getFeaturedProfiles } from "../../utils/loadconfig";
 
@@ -13,71 +14,17 @@ const featuredProfiles = await getFeaturedProfiles(featuredProfilePaths);
       <h2 class="text-3xl md:text-4xl font-bold">Meet Our Alumni</h2>
     </div>
 
-    {
-      Array.isArray(featuredProfiles) && featuredProfiles.length > 0 ? (
-        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
-          {featuredProfiles.slice(0, 3).map((alumn) => {
-            const { name, program, batch, image, slogan, tags, history } =
-              alumn.data;
-            return (
-              <div class="bg-gray-800 rounded-lg shadow-lg p-6 hover:shadow-xl transition-shadow duration-300">
-                {image?.url ? (
-                  <img
-                    src={image.url}
-                    alt={`Profile picture of ${name}`}
-                    class="w-full h-48 object-cover rounded-t-lg"
-                  />
-                ) : (
-                  <div class="w-full h-48 bg-gray-700 rounded-t-lg flex items-center justify-center">
-                    <span class="text-gray-400">No Image Available</span>
-                  </div>
-                )}
-                <div class="pt-4 text-center">
-                  <h3 class="text-xl font-semibold">{name}</h3>
-                  <span class="text-sm">
-                    {program}, Class of {batch}
-                  </span>
-                  {slogan && <p class="text-gray-400 italic">{slogan}</p>}
-                  <div class="flex space-x-2 mt-4 ">
-                    {tags.map((tag, index) => (
-                      <span
-                        style={{ marginRight: "0.5rem", marginLeft: "0.5rem" }}
-                        class="bg-blue-200 text-blue-800 text-xs font-semibold px-2 py-1 rounded">
-                        {tag}
-                      </span>
-                    ))}
-                  </div>
-                  <div class="mt-4 text-left">
-                    <ul class="text-sm">
-                      {history.map((item, index) => (
-                        <li>
-                          <strong>{item.year}:</strong> {item.position} at{" "}
-                          {item.company}
-                        </li>
-                      ))}
-                    </ul>
-                  </div>
-                  <div class="mt-6 text-center">
-                    <a
-                      href={`/profiles/${alumn.slug}`}
-                      class="text-blue-500 hover:underline"
-                    >
-                      See More
-                    </a>
-                  </div>
-                </div>
-              </div>
-            );
-          })}
-        </div>
-      ) : (
-        <div class="text-center text-gray-400">
-          <p>
-            No alumni profiles available at this time. Please check back later!
-          </p>
-        </div>
-      )
-    }
+    { featuredProfiles.length ? (
+      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+        {featuredProfiles.slice(0, 3).map((alumn) => (
+          <AlumniCard slug={alumn.slug} {...alumn.data} />
+        ))}
+      </div>
+    ) : (
+      <div class="text-center text-gray-400">
+        <p>No alumni profiles available at this time. Please check back later!</p>
+      </div>
+    )}
 
     <div class="text-center mt-12">
       <a

src/content/profiles/2021/satyarajawasth1.md

@@ -3,7 +3,7 @@ name: Satya Raj Awasthi
 program: BE Software
 batch: '2021'
 image:
-  url: https://satyarajawasthi.com.np/resources/imgs/profile-avatar-round.png
+  url: https://avatars.githubusercontent.com/u/77236280
   alt: Satya Raj Awasthi
 tags:
   - Backend

src/layout/AlumniCardLayout.astro

@@ -0,0 +1,52 @@
+---
+import { AlumniProfileInfo } from '../utils/types';
+
+const { name, program, batch, image, slogan, tags, history, slug } = Astro.props as AlumniProfileInfo;
+---
+
+<div class="bg-gray-800 rounded-lg shadow-lg p-6 hover:shadow-xl transition-shadow duration-300">
+  {image?.url ? (
+    <img
+      src={image.url}
+      alt={`Profile picture of ${name}`}
+      class="w-full h-48 object-cover rounded-t-lg"
+    />
+  ) : (
+    <div class="w-full h-48 bg-gray-700 rounded-t-lg flex items-center justify-center">
+      <span class="text-gray-400">No Image Available</span>
+    </div>
+  )}
+  <div class="pt-4 text-center">
+    <h3 class="text-xl font-semibold">{name}</h3>
+    <span class="text-sm">
+      {program}, Class of {batch}
+    </span>
+    {slogan && <p class="text-gray-400 italic">{slogan}</p>}
+    <div class="flex space-x-2 mt-4 ">
+      {tags.map((tag, index) => (
+        <span
+          class="bg-blue-200 text-blue-800 text-xs font-semibold px-2 py-1 rounded"
+        >
+          {tag}
+        </span>
+      ))}
+    </div>
+    <div class="mt-4 text-left">
+      <ul class="text-sm">
+        {history.map((item) => (
+          <li>
+            <strong>{item.year}:</strong> {item.position} at {item.company}
+          </li>
+        ))}
+      </ul>
+    </div>
+    <div class="mt-6 text-center">
+      <a
+        href={`/profiles/${slug}`}
+        class="text-blue-500 hover:underline"
+      >
+        See More
+      </a>
+    </div>
+  </div>
+</div>

src/layout/TwoColLayout.astro

@@ -8,6 +8,6 @@ const { children } = Astro.props;
 <div class="flex h-screen">
   <LeftSidebar />
   <MainContent>
-    {children}
+    <slot/>
   </MainContent>
 </div>

src/pages/index.astro

@@ -1,7 +1,5 @@
 ---
 import HomeLayout from "../layout/HomeLayout.astro";
-
-
 ---
 
 <html lang="en">
@@ -13,8 +11,6 @@ import HomeLayout from "../layout/HomeLayout.astro";
 		<title>NCIT Alumni Portal</title>
 	</head>
 	<body>
-		<HomeLayout>
-			<h2>This is the landing page.</h2>
-		</HomeLayout>
+		<HomeLayout/>
 	</body>
 </html>

src/pages/profiles/index.astro

@@ -1,8 +1,54 @@
 ---
+import { getCollection } from "astro:content";
 import TwoColLayout from "../../layout/TwoColLayout.astro";
+import ProfileCard from '../../layout/AlumniCardLayout.astro';
 
+const allProfiles = await getCollection('profiles');
+
+// A map to hold data in map with year/batch as key and set of profiles in alphabetical order as value
+const batchMap = allProfiles.reduce((map, profile) => {
+  const batch = profile.data.batch;
+
+  if (!map.has(batch)) {
+    map.set(batch, new Set());
+  }
+
+  map.get(batch).add(profile);
+
+  return map;
+}, new Map());
+
+// Convert each set to an array and sort by name
+for (const [batch, profilesSet] of batchMap.entries()) {
+  const profilesArray = Array.from(profilesSet);
+
+  profilesArray.sort((a, b) => a.data.name.localeCompare(b.data.name));
+
+  // Replace the set with the sorted array in the map
+  batchMap.set(batch, profilesArray);
+}
+
+// Create an array of sorted years/batches
+const sortedYears = Array.from(batchMap.keys()).sort();
 ---
 
 <TwoColLayout>
-  Featured Profiles go here
-</TwoColLayout>
+  {sortedYears.map((year) => {
+    let showAll = false;
+
+    return (
+      <div class="mb-8">
+        <h3 class="text-lg font-bold flex items-center justify-between">
+          {year} Batch
+        </h3>
+        <div class="grid grid-cols-1 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mt-4 text-white">
+          {(showAll ? batchMap.get(year) : batchMap.get(year).slice(0, 3))
+            .map((profile) => (
+              <ProfileCard key={profile.slug} slug={profile.slug} {...profile.data} />
+            ))}
+        </div>
+      </div>
+    );
+  })}
+</TwoColLayout>
+

src/utils/types.ts

@@ -0,0 +1,10 @@
+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;
+  }