Skip to content

Commit 051884a

Browse files
DonnieBLTDonnieBLT
authored
Merge pull request #5215 from OWASP-BLT/copilot/update-roadmap-page-github-projects
Fetch and display live GitHub Projects data on /roadmap page
2 parents b3e4ffc + c6df7cd commit 051884a

File tree

2 files changed

+272
-481
lines changed

2 files changed

+272
-481
lines changed

‎website/templates/roadmap.html‎

Lines changed: 82 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -23,41 +23,93 @@ <h1 class="text-4xl font-bold text-gray-800 dark:text-gray-200">
2323
Discover our vision for the future of web security. Track our progress and upcoming features as we continue to evolve OWASP BLT.
2424
</p>
2525
</div>
26-
<!-- Milestone List Section -->
26+
<!-- GitHub Projects Section -->
2727
<div class="bg-white dark:bg-gray-800 rounded-2xl shadow-sm border border-gray-100 dark:border-gray-800 p-8 mb-10">
2828
<h2 class="text-3xl font-bold text-gray-800 dark:text-gray-200 mb-8 flex items-center gap-3">
29-
<i class="fas fa-tasks text-[#e74c3c]"></i>
30-
Development Milestones {{ milestones|length }}
29+
<i class="fab fa-github text-[#e74c3c]"></i>
30+
Development Projects
31+
{% if projects %}
32+
<span class="text-lg font-normal text-gray-500 dark:text-gray-400">({{ projects|length }})</span>
33+
{% endif %}
3134
</h2>
3235
<div class="space-y-6">
33-
{% for milestone in milestones %}
34-
<div class="bg-white dark:bg-gray-800 rounded-2xl p-6 shadow-sm border border-gray-100 dark:border-gray-800 transition-all hover:shadow-md hover:-translate-y-1">
35-
<div class="flex flex-wrap items-center gap-4 mb-4">
36-
<div class="flex items-center gap-2">
37-
<i class="{{ milestone.icon }} text-[#e74c3c]"></i>
38-
<h3 class="text-2xl font-bold text-gray-800 dark:text-gray-200">{{ milestone.title }}</h3>
39-
</div>
40-
<div class="flex flex-wrap gap-2">
41-
{% for tag in milestone.tags %}
42-
<span class="px-3 py-1 bg-{{ tag.color }} text-white rounded-full text-sm font-semibold">{{ tag.label }}</span>
43-
{% endfor %}
44-
</div>
45-
</div>
46-
{% if milestone.description %}
47-
<p class="text-gray-700 dark:text-gray-300 mb-4">{{ milestone.description }}</p>
48-
{% endif %}
49-
<div class="flex items-center gap-3">
50-
<div class="w-10 h-10 rounded-full bg-gray-100 dark:bg-gray-800 flex items-center justify-center">
51-
<i class="{{ milestone.progress_icon }} text-[#e74c3c]"></i>
52-
</div>
53-
<div class="flex-1 h-2 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
54-
<div class="h-full bg-[#e74c3c] rounded-full"
55-
style="width: {{ milestone.progress }}"></div>
56-
</div>
57-
<span class="text-sm font-medium text-gray-800 dark:text-gray-200">{{ milestone.progress }}</span>
58-
</div>
36+
<p class="text-lg text-gray-700 dark:text-gray-300 leading-relaxed">
37+
We track all our development milestones, features, and progress on GitHub Projects.
38+
This gives you real-time visibility into what we're working on and what's coming next.
39+
</p>
40+
{% if projects %}
41+
<!-- Projects List -->
42+
<div class="space-y-4 mt-8">
43+
{% for project in projects %}
44+
<a href="{{ project.url }}"
45+
target="_blank"
46+
rel="noopener noreferrer"
47+
class="block bg-white dark:bg-gray-800 rounded-xl p-6 shadow-sm border border-gray-100 dark:border-gray-800 transition-all hover:shadow-md hover:-translate-y-1 hover:border-[#e74c3c]/50">
48+
<div class="flex flex-wrap items-start justify-between gap-4 mb-4">
49+
<div class="flex-1 min-w-0">
50+
<h3 class="text-xl font-bold text-gray-800 dark:text-gray-200 mb-2 flex items-center gap-2">
51+
{{ project.title }}
52+
<i class="fas fa-external-link-alt text-sm text-gray-400"></i>
53+
</h3>
54+
{% if project.description %}<p class="text-gray-700 dark:text-gray-300 mb-3">{{ project.description }}</p>{% endif %}
55+
<div class="flex flex-wrap gap-4 text-sm text-gray-600 dark:text-gray-400">
56+
<span>
57+
<i class="fas fa-tasks text-[#e74c3c]"></i>
58+
{{ project.total_items }} item{{ project.total_items|pluralize }}
59+
</span>
60+
<span>
61+
<i class="fas fa-check-circle text-green-500"></i>
62+
{{ project.done_items }} done
63+
</span>
64+
<span>
65+
<i class="far fa-circle text-gray-400"></i>
66+
{{ project.open_items }} open
67+
</span>
68+
<span>
69+
<i class="fas fa-clock text-gray-400"></i>
70+
Updated {{ project.last_updated }}
71+
</span>
72+
</div>
73+
</div>
74+
</div>
75+
<!-- Progress Bar -->
76+
<div class="flex items-center gap-3">
77+
<div class="flex-1 h-2 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
78+
<div class="h-full bg-[#e74c3c] rounded-full transition-all"
79+
style="width: {{ project.progress }}%"></div>
80+
</div>
81+
<span class="text-sm font-medium text-gray-800 dark:text-gray-200 min-w-[3rem] text-right">{{ project.progress }}%</span>
82+
</div>
83+
</a>
84+
{% endfor %}
85+
</div>
86+
<!-- View All Button -->
87+
<div class="flex justify-center mt-8">
88+
<a href="{{ github_projects_url }}"
89+
target="_blank"
90+
rel="noopener noreferrer"
91+
class="inline-flex items-center gap-2 px-6 py-3 text-[#e74c3c] border-2 border-[#e74c3c] rounded-lg hover:bg-[#e74c3c] hover:text-white transition-all">
92+
<span>View All Projects on GitHub</span>
93+
<i class="fas fa-arrow-right"></i>
94+
</a>
95+
</div>
96+
{% else %}
97+
<!-- Fallback when projects can't be loaded -->
98+
<div class="text-center py-8">
99+
<p class="text-gray-700 dark:text-gray-300 mb-6">
100+
<i class="fas fa-info-circle text-[#e74c3c] mr-2"></i>
101+
Unable to load projects at this time. View them directly on GitHub.
102+
</p>
103+
<a href="{{ github_projects_url }}"
104+
target="_blank"
105+
rel="noopener noreferrer"
106+
class="group inline-flex items-center gap-3 px-8 py-4 bg-[#e74c3c] text-white text-lg font-semibold rounded-xl shadow-lg hover:bg-[#c0392b] transition-all transform hover:scale-105">
107+
<i class="fab fa-github text-2xl"></i>
108+
<span>View Our GitHub Projects</span>
109+
<i class="fas fa-external-link-alt"></i>
110+
</a>
59111
</div>
60-
{% endfor %}
112+
{% endif %}
61113
</div>
62114
</div>
63115
<!-- Community Input Section -->

0 commit comments

Comments
 (0)