Skip to content

Commit 8513fd6

Browse files
aexzhouaexzhou
authored
Merge pull request #13 from UBC-OpenRobotics/projects-detail
Adding Features for Project-specific views, added support for sub-projects
2 parents c222cd5 + 561e558 commit 8513fd6

File tree

14 files changed

+1027
-97
lines changed

14 files changed

+1027
-97
lines changed

‎_includes/gantt-chart.html‎

Lines changed: 650 additions & 0 deletions
Large diffs are not rendered by default.

‎_includes/milestones.html‎

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
{%- if page.milestones -%}
2+
<div class="max-w-4xl mx-auto mb-16">
3+
<h2 class="text-3xl font-bold text-gray-800 dark:text-gray-100 mb-12 text-center">Timeline</h2>
4+
5+
<div class="timeline relative">
6+
<!-- Center line -->
7+
<div class="absolute left-1/2 transform -translate-x-1/2 w-0.5 h-full bg-gray-300 dark:bg-gray-600"></div>
8+
9+
{%- for milestone in page.milestones -%}
10+
{%- assign index = forloop.index | modulo: 2 -%}
11+
12+
{%- if index == 1 -%}
13+
<!-- Left side milestone (odd items) -->
14+
<div class="timeline-item relative mb-8">
15+
<div class="flex items-start">
16+
<!-- Content on left -->
17+
<div class="w-1/2 pr-8 text-right">
18+
<div class="timeline-date text-md font-semibold text-red-600 dark:text-red-400 mb-2">
19+
{{ milestone.date | date: "%B %d, %Y" }}
20+
</div>
21+
22+
{%- if milestone.title -%}
23+
<h3 class="text-xl font-bold text-gray-800 dark:text-gray-100 mb-3">{{ milestone.title }}</h3>
24+
{%- endif -%}
25+
26+
{%- if milestone.image -%}
27+
<div class="mb-4">
28+
<img src="{{ milestone.image | relative_url }}"
29+
alt="{{ milestone.title }}"
30+
class="w-full rounded-lg shadow-md ml-auto">
31+
</div>
32+
{%- endif -%}
33+
34+
{%- if milestone.description -%}
35+
<p class="text-gray-700 dark:text-gray-300">{{ milestone.description }}</p>
36+
{%- endif -%}
37+
</div>
38+
39+
<!-- Center dot -->
40+
<div class="absolute left-1/2 transform -translate-x-1/2 w-4 h-4 rounded-full bg-red-600 dark:bg-red-400 border-4 border-white dark:border-gray-900 z-10 mt-1"></div>
41+
42+
<!-- Empty space on right -->
43+
<div class="w-1/2 pl-8"></div>
44+
</div>
45+
</div>
46+
{%- else -%}
47+
<!-- Right side milestone (even items) -->
48+
<div class="timeline-item relative mb-8 -mt-32">
49+
<div class="flex items-start">
50+
<!-- Empty space on left -->
51+
<div class="w-1/2 pr-8"></div>
52+
53+
<!-- Center dot -->
54+
<div class="absolute left-1/2 transform -translate-x-1/2 w-4 h-4 rounded-full bg-red-600 dark:bg-red-400 border-4 border-white dark:border-gray-900 z-10 mt-1"></div>
55+
56+
<!-- Content on right -->
57+
<div class="w-1/2 pl-8 text-left">
58+
<div class="timeline-date text-md font-semibold text-red-600 dark:text-red-400 mb-2">
59+
{{ milestone.date | date: "%B %d, %Y" }}
60+
</div>
61+
62+
{%- if milestone.title -%}
63+
<h3 class="text-xl font-bold text-gray-800 dark:text-gray-100 mb-3">{{ milestone.title }}</h3>
64+
{%- endif -%}
65+
66+
{%- if milestone.image -%}
67+
<div class="mb-4">
68+
<img src="{{ milestone.image | relative_url }}"
69+
alt="{{ milestone.title }}"
70+
class="w-full rounded-lg shadow-md">
71+
</div>
72+
{%- endif -%}
73+
74+
{%- if milestone.description -%}
75+
<p class="text-gray-700 dark:text-gray-300">{{ milestone.description }}</p>
76+
{%- endif -%}
77+
</div>
78+
</div>
79+
</div>
80+
{%- endif -%}
81+
{%- endfor -%}
82+
</div>
83+
</div>
84+
{%- endif -%}

‎_includes/project-status-badge.html‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
{%- if project.status -%}
2+
<!-- <div class="mt-2"> -->
3+
{%- case project.status -%}
4+
{%- when "active" -%}
5+
<span style="font-family: 'JetBrains Mono', sans-serif" class="inline-flex items-center px-2 py-1 rounded-full text-xs font-semibold bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200">
6+
<!-- <svg class="w-3 h-3 mr-1" fill="currentColor" viewBox="0 0 20 20">
7+
<circle cx="10" cy="10" r="4"/>
8+
</svg> -->
9+
ACTIVE
10+
</span>
11+
{%- when "on hold" -%}
12+
<span style="font-family: 'JetBrains Mono', sans-serif" class="inline-flex items-center px-2 py-1 rounded-full text-xs font-semibold bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200">
13+
<!-- <svg class="w-3 h-3 mr-1" fill="currentColor" viewBox="0 0 20 20">
14+
<path d="M10 2a8 8 0 100 16 8 8 0 000-16zM9 9V5h2v4H9zm0 4v-2h2v2H9z"/>
15+
</svg> -->
16+
ON HOLD
17+
</span>
18+
{%- when "completed" -%}
19+
<span style="font-family: 'JetBrains Mono', sans-serif" class="inline-flex items-center px-2 py-1 rounded-full text-xs font-semibold bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200">
20+
<!-- <svg class="w-3 h-3 mr-1" fill="currentColor" viewBox="0 0 20 20">
21+
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
22+
</svg> -->
23+
COMPLETED
24+
</span>
25+
{%- when "archived" -%}
26+
<span style="font-family: 'JetBrains Mono', sans-serif" class="inline-flex items-center px-2 py-1 rounded-full text-xs font-semibold bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300">
27+
<!-- <svg class="w-3 h-3 mr-1" fill="currentColor" viewBox="0 0 20 20">
28+
<path d="M4 3a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V5a2 2 0 00-2-2H4zm12 12H4l4-8h8l-4 8z"/>
29+
</svg> -->
30+
ARCHIVED
31+
</span>
32+
{%- endcase -%}
33+
<!-- </div> -->
34+
{%- endif -%}

‎_layouts/home.html‎

Lines changed: 42 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -76,7 +76,8 @@ <h2 class="text-5xl font-semibold text-gray-800 dark:text-gray-100 mb-4 text-lef
7676

7777
{% include divider.html %}
7878

79-
{%- assign sorted_projects = site.projects | sort: "order" -%}
79+
{%- assign all_projects = site.projects | sort: "order" -%}
80+
{%- assign sorted_projects = all_projects | where_exp: "item", "item.layout == 'project-main'" -%}
8081
{%- assign total_projects = sorted_projects | size -%}
8182
{%- assign slides_count = total_projects | divided_by: 3.0 | ceil -%}
8283

@@ -119,9 +120,12 @@ <h2 class="text-5xl font-semibold text-gray-800 dark:text-gray-100 text-left">Pr
119120
class="w-full h-48 object-cover">
120121
<div class="p-4">
121122
<a href="{{ project.url | relative_url }}"
122-
class="text-xl font-semibold text-gray-800 dark:text-gray-100 hover:text-red-600 dark:hover:text-red-500 transition-colors block">
123+
class="text-xl mb-2 font-semibold text-gray-800 dark:text-gray-100 hover:text-red-600 dark:hover:text-red-500 transition-colors block">
123124
{{ project.title }}
124125
</a>
126+
127+
{% include project-status-badge.html %}
128+
125129
<p class="text-gray-600 dark:text-gray-300 mt-3 text-sm leading-relaxed line-clamp-3">
126130
{{ project.description }}
127131
</p>
@@ -161,6 +165,42 @@ <h2 class="text-5xl font-semibold text-gray-800 dark:text-gray-100 text-left">Pr
161165
class="text-xl font-semibold text-gray-800 dark:text-gray-100 hover:text-red-600 dark:hover:text-red-500 transition-colors block">
162166
{{ project.title }}
163167
</a>
168+
169+
{%- if project.status -%}
170+
<div class="mt-2">
171+
{%- case project.status -%}
172+
{%- when "active" -%}
173+
<span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-semibold bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200">
174+
<svg class="w-3 h-3 mr-1" fill="currentColor" viewBox="0 0 20 20">
175+
<circle cx="10" cy="10" r="4"/>
176+
</svg>
177+
Active
178+
</span>
179+
{%- when "on hold" -%}
180+
<span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-semibold bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200">
181+
<svg class="w-3 h-3 mr-1" fill="currentColor" viewBox="0 0 20 20">
182+
<path d="M10 2a8 8 0 100 16 8 8 0 000-16zM9 9V5h2v4H9zm0 4v-2h2v2H9z"/>
183+
</svg>
184+
On Hold
185+
</span>
186+
{%- when "completed" -%}
187+
<span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-semibold bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200">
188+
<svg class="w-3 h-3 mr-1" fill="currentColor" viewBox="0 0 20 20">
189+
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
190+
</svg>
191+
Completed
192+
</span>
193+
{%- when "archived" -%}
194+
<span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-semibold bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300">
195+
<svg class="w-3 h-3 mr-1" fill="currentColor" viewBox="0 0 20 20">
196+
<path d="M4 3a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V5a2 2 0 00-2-2H4zm12 12H4l4-8h8l-4 8z"/>
197+
</svg>
198+
Archived
199+
</span>
200+
{%- endcase -%}
201+
</div>
202+
{%- endif -%}
203+
164204
<p class="text-gray-600 dark:text-gray-300 mt-3 text-sm leading-relaxed line-clamp-3">
165205
{{ project.description }}
166206
</p>

‎_layouts/project-detail.html‎

Lines changed: 34 additions & 84 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,41 @@
44

55
<div class="project-detail-page bg-white dark:bg-gray-900 min-h-screen">
66
<div class="container mx-auto px-4 py-16">
7+
8+
<!-- Breadcrumb nav to parent project -->
9+
{%- assign page_path_parts = page.path | split: "/" -%}
10+
{%- assign parent_dir = page_path_parts | slice: 0, 2 | join: "/" -%}
11+
{%- assign parent_filename = page_path_parts[1] | append: ".md" -%}
12+
{%- assign parent_path = parent_dir | append: "/" | append: parent_filename -%}
13+
{%- assign parent_project = site.projects | where: "path", parent_path | where: "layout", "project-main" | first -%}
14+
15+
<!-- {%- if parent_project -%}
16+
<div class="max-w-4xl mx-auto mb-4">
17+
<nav class="flex items-center text-sm text-gray-600 dark:text-gray-400">
18+
<a href="{{ parent_project.url | relative_url }}" class="flex items-center hover:text-red-600 dark:hover:text-red-400 transition-colors">
19+
<svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
20+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
21+
</svg>
22+
{{ parent_project.title }}
23+
</a>
24+
<span class="mx-2">/</span>
25+
<span class="text-gray-800 dark:text-gray-200">{{ page.title }}</span>
26+
</nav>
27+
</div>
28+
{%- endif -%} -->
29+
730
<div class="max-w-4xl mx-auto mb-6 mt-6">
31+
{%- if parent_project -%}
32+
<h1 class="text-center text-4xl font-bold md:text-5xl text-gray-800 dark:text-gray-100 mb-6">
33+
<a href="{{ parent_project.url | relative_url }}" class="text-2xl font-semibold md:text-3xl text-gray-600 dark:text-gray-400 hover:text-red-600 dark:hover:text-red-400 transition-colors">
34+
{{ parent_project.title }}
35+
</a>
36+
<span class="text-2xl font-semibold md:text-3xl text-gray-600 dark:text-gray-400"> / </span>
37+
{{ page.title }}
38+
</h1>
39+
{%- else -%}
840
<h1 class="text-center text-4xl md:text-5xl font-bold text-gray-800 dark:text-gray-100 mb-6">{{ page.title }}</h1>
41+
{%- endif -%}
942
</div>
1043

1144
<!-- {%- if page.thumbnail -%}
@@ -22,90 +55,7 @@ <h1 class="text-center text-4xl md:text-5xl font-bold text-gray-800 dark:text-gr
2255
</div>
2356
{%- endif -%}
2457

25-
{%- if page.milestones -%}
26-
<div class="max-w-4xl mx-auto mb-16">
27-
<h2 class="text-3xl font-bold text-gray-800 dark:text-gray-100 mb-12 text-center">Timeline</h2>
28-
29-
<div class="timeline relative">
30-
<!-- Center line -->
31-
<div class="absolute left-1/2 transform -translate-x-1/2 w-0.5 h-full bg-gray-300 dark:bg-gray-600"></div>
32-
33-
{%- for milestone in page.milestones -%}
34-
{%- assign index = forloop.index | modulo: 2 -%}
35-
36-
{%- if index == 1 -%}
37-
<!-- Left side milestone (odd items) -->
38-
<div class="timeline-item relative mb-8">
39-
<div class="flex items-start">
40-
<!-- Content on left -->
41-
<div class="w-1/2 pr-8 text-right">
42-
<div class="timeline-date text-md font-semibold text-red-600 dark:text-red-400 mb-2">
43-
{{ milestone.date | date: "%B %d, %Y" }}
44-
</div>
45-
46-
{%- if milestone.title -%}
47-
<h3 class="text-xl font-bold text-gray-800 dark:text-gray-100 mb-3">{{ milestone.title }}</h3>
48-
{%- endif -%}
49-
50-
{%- if milestone.image -%}
51-
<div class="mb-4">
52-
<img src="{{ milestone.image | relative_url }}"
53-
alt="{{ milestone.title }}"
54-
class="w-full rounded-lg shadow-md ml-auto">
55-
</div>
56-
{%- endif -%}
57-
58-
{%- if milestone.description -%}
59-
<p class="text-gray-700 dark:text-gray-300">{{ milestone.description }}</p>
60-
{%- endif -%}
61-
</div>
62-
63-
<!-- Center dot -->
64-
<div class="absolute left-1/2 transform -translate-x-1/2 w-4 h-4 rounded-full bg-red-600 dark:bg-red-400 border-4 border-white dark:border-gray-900 z-10 mt-1"></div>
65-
66-
<!-- Empty space on right -->
67-
<div class="w-1/2 pl-8"></div>
68-
</div>
69-
</div>
70-
{%- else -%}
71-
<!-- Right side milestone (even items) -->
72-
<div class="timeline-item relative mb-8 -mt-32">
73-
<div class="flex items-start">
74-
<!-- Empty space on left -->
75-
<div class="w-1/2 pr-8"></div>
76-
77-
<!-- Center dot -->
78-
<div class="absolute left-1/2 transform -translate-x-1/2 w-4 h-4 rounded-full bg-red-600 dark:bg-red-400 border-4 border-white dark:border-gray-900 z-10 mt-1"></div>
79-
80-
<!-- Content on right -->
81-
<div class="w-1/2 pl-8 text-left">
82-
<div class="timeline-date text-md font-semibold text-red-600 dark:text-red-400 mb-2">
83-
{{ milestone.date | date: "%B %d, %Y" }}
84-
</div>
85-
86-
{%- if milestone.title -%}
87-
<h3 class="text-xl font-bold text-gray-800 dark:text-gray-100 mb-3">{{ milestone.title }}</h3>
88-
{%- endif -%}
89-
90-
{%- if milestone.image -%}
91-
<div class="mb-4">
92-
<img src="{{ milestone.image | relative_url }}"
93-
alt="{{ milestone.title }}"
94-
class="w-full rounded-lg shadow-md">
95-
</div>
96-
{%- endif -%}
97-
98-
{%- if milestone.description -%}
99-
<p class="text-gray-700 dark:text-gray-300">{{ milestone.description }}</p>
100-
{%- endif -%}
101-
</div>
102-
</div>
103-
</div>
104-
{%- endif -%}
105-
{%- endfor -%}
106-
</div>
107-
</div>
108-
{%- endif -%}
58+
{% include milestones.html %}
10959

11060
{%- if content != "" -%}
11161
<div class="prose prose-lg dark:prose-invert max-w-4xl mx-auto text-gray-800 dark:text-gray-200">

‎_layouts/project-main.html‎

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
---
2+
layout: default
3+
---
4+
5+
<div class="project-main-page bg-white dark:bg-gray-900 min-h-screen">
6+
<div class="container mx-auto px-4 py-16">
7+
<div class="max-w-4xl mx-auto mb-6 mt-6">
8+
<h1 class="text-center text-4xl md:text-5xl font-bold text-gray-800 dark:text-gray-100 mb-6">{{ page.title }}</h1>
9+
10+
<div class="flex justify-center mb-4">
11+
{%- assign project = page -%}
12+
{% include project-status-badge.html %}
13+
</div>
14+
</div>
15+
16+
{%- if page.description -%}
17+
<div class="max-w-4xl mx-auto mb-12">
18+
<p class="text-lg text-center text-gray-700 dark:text-gray-300">{{ page.description }}</p>
19+
</div>
20+
{%- endif -%}
21+
22+
<!-- Sub-projects -->
23+
{%- assign page_dir = page.path | remove: page.name -%}
24+
{%- assign subprojects = site.projects | where_exp: "item", "item.path contains page_dir" | where_exp: "item", "item.layout == 'project-detail'" | sort: "order" -%}
25+
26+
{%- if subprojects.size > 0 -%}
27+
<div class="max-w-4xl mx-auto mb-16">
28+
<h2 class="text-3xl font-semibold text-gray-800 dark:text-gray-100 mb-8 text-center">Sub-Projects</h2>
29+
30+
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
31+
{%- for subproject in subprojects -%}
32+
<a href="{{ subproject.url | relative_url }}" class="block bg-gray-50 dark:bg-gray-800 rounded-lg shadow-md hover:shadow-xl transition-shadow duration-300 overflow-hidden">
33+
{%- if subproject.thumbnail -%}
34+
<div class="aspect-video overflow-hidden">
35+
<img src="{{ subproject.thumbnail | relative_url }}"
36+
alt="{{ subproject.title }}"
37+
class="w-full h-full object-cover">
38+
</div>
39+
{%- endif -%}
40+
41+
<div class="p-6">
42+
<h3 class="text-xl font-semibold text-gray-800 dark:text-gray-100 mb-3">{{ subproject.title }}</h3>
43+
{%- if subproject.description -%}
44+
<p class="text-gray-700 dark:text-gray-300">{{ subproject.description }}</p>
45+
{%- endif -%}
46+
</div>
47+
</a>
48+
{%- endfor -%}
49+
</div>
50+
</div>
51+
52+
<div class="max-w-6xl mx-auto mb-16">
53+
<div class="max-w-4xl mx-auto mb-16">
54+
<h2 class="text-3xl font-semibold text-gray-800 dark:text-gray-100 mb-8 text-center">Progress and Milestones</h2>
55+
<p class="text-lg text-gray-600 dark:text-gray-300 leading-relaxed">
56+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
57+
</p>
58+
</div>
59+
60+
<!-- Gantt Chart -->
61+
{% include gantt-chart.html %}
62+
</div>
63+
64+
65+
66+
{%- endif -%}
67+
68+
69+
{%- if content != "" -%}
70+
<div class="prose prose-lg dark:prose-invert max-w-4xl mx-auto text-gray-800 dark:text-gray-200">
71+
{{ content }}
72+
</div>
73+
{%- endif -%}
74+
</div>
75+
</div>

0 commit comments

Comments
 (0)