Skip to content

Commit 26ff9c0

Browse files
mukezhzmukezhz
authored
Merge pull request #12 from SatyaRajAwasth1/card-view-layout
feature: Adds a card layout for viewing alumni info in card layout where required & implements on profile highlight and profiles page
2 parents b3e476f + b298244 commit 26ff9c0

File tree

7 files changed

+125
-74
lines changed

7 files changed

+125
-74
lines changed

‎src/components/homepage/ProfileHighlight.astro

+12-65
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
---
2+
import AlumniCard from '../../layout/AlumniCardLayout.astro';
23
import { loadConfig } from "../../utils/loadconfig";
34
import { getFeaturedProfiles } from "../../utils/loadconfig";
45
@@ -13,71 +14,17 @@ const featuredProfiles = await getFeaturedProfiles(featuredProfilePaths);
1314
<h2 class="text-3xl md:text-4xl font-bold">Meet Our Alumni</h2>
1415
</div>
1516

16-
{
17-
Array.isArray(featuredProfiles) && featuredProfiles.length > 0 ? (
18-
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
19-
{featuredProfiles.slice(0, 3).map((alumn) => {
20-
const { name, program, batch, image, slogan, tags, history } =
21-
alumn.data;
22-
return (
23-
<div class="bg-gray-800 rounded-lg shadow-lg p-6 hover:shadow-xl transition-shadow duration-300">
24-
{image?.url ? (
25-
<img
26-
src={image.url}
27-
alt={`Profile picture of ${name}`}
28-
class="w-full h-48 object-cover rounded-t-lg"
29-
/>
30-
) : (
31-
<div class="w-full h-48 bg-gray-700 rounded-t-lg flex items-center justify-center">
32-
<span class="text-gray-400">No Image Available</span>
33-
</div>
34-
)}
35-
<div class="pt-4 text-center">
36-
<h3 class="text-xl font-semibold">{name}</h3>
37-
<span class="text-sm">
38-
{program}, Class of {batch}
39-
</span>
40-
{slogan && <p class="text-gray-400 italic">{slogan}</p>}
41-
<div class="flex space-x-2 mt-4 ">
42-
{tags.map((tag, index) => (
43-
<span
44-
style={{ marginRight: "0.5rem", marginLeft: "0.5rem" }}
45-
class="bg-blue-200 text-blue-800 text-xs font-semibold px-2 py-1 rounded">
46-
{tag}
47-
</span>
48-
))}
49-
</div>
50-
<div class="mt-4 text-left">
51-
<ul class="text-sm">
52-
{history.map((item, index) => (
53-
<li>
54-
<strong>{item.year}:</strong> {item.position} at{" "}
55-
{item.company}
56-
</li>
57-
))}
58-
</ul>
59-
</div>
60-
<div class="mt-6 text-center">
61-
<a
62-
href={`/profiles/${alumn.slug}`}
63-
class="text-blue-500 hover:underline"
64-
>
65-
See More
66-
</a>
67-
</div>
68-
</div>
69-
</div>
70-
);
71-
})}
72-
</div>
73-
) : (
74-
<div class="text-center text-gray-400">
75-
<p>
76-
No alumni profiles available at this time. Please check back later!
77-
</p>
78-
</div>
79-
)
80-
}
17+
{ featuredProfiles.length ? (
18+
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
19+
{featuredProfiles.slice(0, 3).map((alumn) => (
20+
<AlumniCard slug={alumn.slug} {...alumn.data} />
21+
))}
22+
</div>
23+
) : (
24+
<div class="text-center text-gray-400">
25+
<p>No alumni profiles available at this time. Please check back later!</p>
26+
</div>
27+
)}
8128

8229
<div class="text-center mt-12">
8330
<a

‎src/content/profiles/2021/satyarajawasth1.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ name: Satya Raj Awasthi
33
program: BE Software
44
batch: '2021'
55
image:
6-
url: https://satyarajawasthi.com.np/resources/imgs/profile-avatar-round.png
6+
url: https://avatars.githubusercontent.com/u/77236280
77
alt: Satya Raj Awasthi
88
tags:
99
- Backend

‎src/layout/AlumniCardLayout.astro

+52
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
---
2+
import { AlumniProfileInfo } from '../utils/types';
3+
4+
const { name, program, batch, image, slogan, tags, history, slug } = Astro.props as AlumniProfileInfo;
5+
---
6+
7+
<div class="bg-gray-800 rounded-lg shadow-lg p-6 hover:shadow-xl transition-shadow duration-300">
8+
{image?.url ? (
9+
<img
10+
src={image.url}
11+
alt={`Profile picture of ${name}`}
12+
class="w-full h-48 object-cover rounded-t-lg"
13+
/>
14+
) : (
15+
<div class="w-full h-48 bg-gray-700 rounded-t-lg flex items-center justify-center">
16+
<span class="text-gray-400">No Image Available</span>
17+
</div>
18+
)}
19+
<div class="pt-4 text-center">
20+
<h3 class="text-xl font-semibold">{name}</h3>
21+
<span class="text-sm">
22+
{program}, Class of {batch}
23+
</span>
24+
{slogan && <p class="text-gray-400 italic">{slogan}</p>}
25+
<div class="flex space-x-2 mt-4 ">
26+
{tags.map((tag, index) => (
27+
<span
28+
class="bg-blue-200 text-blue-800 text-xs font-semibold px-2 py-1 rounded"
29+
>
30+
{tag}
31+
</span>
32+
))}
33+
</div>
34+
<div class="mt-4 text-left">
35+
<ul class="text-sm">
36+
{history.map((item) => (
37+
<li>
38+
<strong>{item.year}:</strong> {item.position} at {item.company}
39+
</li>
40+
))}
41+
</ul>
42+
</div>
43+
<div class="mt-6 text-center">
44+
<a
45+
href={`/profiles/${slug}`}
46+
class="text-blue-500 hover:underline"
47+
>
48+
See More
49+
</a>
50+
</div>
51+
</div>
52+
</div>

‎src/layout/TwoColLayout.astro

+1-1
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,6 @@ const { children } = Astro.props;
88
<div class="flex h-screen">
99
<LeftSidebar />
1010
<MainContent>
11-
{children}
11+
<slot/>
1212
</MainContent>
1313
</div>

‎src/pages/index.astro

+1-5
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
11
---
22
import HomeLayout from "../layout/HomeLayout.astro";
3-
4-
53
---
64

75
<html lang="en">
@@ -13,8 +11,6 @@ import HomeLayout from "../layout/HomeLayout.astro";
1311
<title>NCIT Alumni Portal</title>
1412
</head>
1513
<body>
16-
<HomeLayout>
17-
<h2>This is the landing page.</h2>
18-
</HomeLayout>
14+
<HomeLayout/>
1915
</body>
2016
</html>

‎src/pages/profiles/index.astro

+48-2
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,54 @@
11
---
2+
import { getCollection } from "astro:content";
23
import TwoColLayout from "../../layout/TwoColLayout.astro";
4+
import ProfileCard from '../../layout/AlumniCardLayout.astro';
35
6+
const allProfiles = await getCollection('profiles');
7+
8+
// A map to hold data in map with year/batch as key and set of profiles in alphabetical order as value
9+
const batchMap = allProfiles.reduce((map, profile) => {
10+
const batch = profile.data.batch;
11+
12+
if (!map.has(batch)) {
13+
map.set(batch, new Set());
14+
}
15+
16+
map.get(batch).add(profile);
17+
18+
return map;
19+
}, new Map());
20+
21+
// Convert each set to an array and sort by name
22+
for (const [batch, profilesSet] of batchMap.entries()) {
23+
const profilesArray = Array.from(profilesSet);
24+
25+
profilesArray.sort((a, b) => a.data.name.localeCompare(b.data.name));
26+
27+
// Replace the set with the sorted array in the map
28+
batchMap.set(batch, profilesArray);
29+
}
30+
31+
// Create an array of sorted years/batches
32+
const sortedYears = Array.from(batchMap.keys()).sort();
433
---
534

635
<TwoColLayout>
7-
Featured Profiles go here
8-
</TwoColLayout>
36+
{sortedYears.map((year) => {
37+
let showAll = false;
38+
39+
return (
40+
<div class="mb-8">
41+
<h3 class="text-lg font-bold flex items-center justify-between">
42+
{year} Batch
43+
</h3>
44+
<div class="grid grid-cols-1 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mt-4 text-white">
45+
{(showAll ? batchMap.get(year) : batchMap.get(year).slice(0, 3))
46+
.map((profile) => (
47+
<ProfileCard key={profile.slug} slug={profile.slug} {...profile.data} />
48+
))}
49+
</div>
50+
</div>
51+
);
52+
})}
53+
</TwoColLayout>
54+

‎src/utils/types.ts

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
export interface AlumniProfileInfo {
2+
name: string;
3+
program: string;
4+
batch: string;
5+
image?: { url: string };
6+
slogan?: string;
7+
tags: string[];
8+
history: { year: string; position: string; company: string }[];
9+
slug: string;
10+
}

0 commit comments

Comments
 (0)