Skip to content

Commit ab7b5c1

Browse files
fezcodefezcode
committed
feat: roadmap piml
1 parent c010c89 commit ab7b5c1

File tree

5 files changed

+114
-96
lines changed

5 files changed

+114
-96
lines changed

‎public/roadmap/roadmap.json‎

Lines changed: 0 additions & 74 deletions
This file was deleted.

‎public/roadmap/roadmap.piml‎

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
(issues)
2+
> (issues)
3+
(id) 21aef85f-77c7-4eb4-9d1a-e54d0bf80185
4+
(title) MIDI Support for FeZynth
5+
(description) Integrate MIDI input to play FeZynth with external MIDI controllers.
6+
(category) Games
7+
(status) Planned
8+
(priority) High
9+
(created_at) 2025-11-29T10:00:00+03:00
10+
(due_date) 2026-01-15T00:00:00+03:00
11+
(notes) Requires Web MIDI API research.
12+
13+
> (issues)
14+
(id) 0afd0226-8076-4b92-a597-e7f8118106cd
15+
(title) Multiplayer FezType
16+
(description) Allow users to compete in real-time typing races.
17+
(category) Games
18+
(status) In Progress
19+
(priority) High
20+
(created_at) 2025-11-20T11:30:00+03:00
21+
(due_date) 2026-03-01T00:00:00+03:00
22+
(notes) Backend infrastructure and WebSocket implementation needed.
23+
24+
> (issues)
25+
(id) 6286e039-75ec-4b8c-8056-4f6a71e06362
26+
(title) More Commands for Code Seance
27+
(description) Expand the set of available commands and interactions in Code Seance.
28+
(category) Games
29+
(status) In Progress
30+
(priority) Medium
31+
(created_at) 2025-11-28T15:00:00+03:00
32+
(notes) Focus on developer-themed commands.
33+
34+
> (issues)
35+
(id) 237dffab-441f-4942-bc51-2ae4865a6d32
36+
(title) Save/Load Color Palettes
37+
(description) Add functionality to save and load generated color palettes.
38+
(category) Generators
39+
(status) Planned
40+
(priority) Medium
41+
(created_at) 2025-11-25T09:00:00+03:00
42+
(notes) Local storage first, then user accounts.
43+
44+
> (issues)
45+
(id) 41ae55f4-8641-4565-b817-5024fd4bd1e7
46+
(title) Notepad Markdown Support
47+
(description) Implement basic Markdown rendering and editing capabilities in Notepad.
48+
(category) Utilities
49+
(status) Planned
50+
(priority) High
51+
(created_at) 2025-11-27T16:00:00+03:00
52+
(notes) Requires a Markdown parsing library.
53+
54+
> (issues)
55+
(id) ef9a9a2e-a929-44d8-a2f4-1ccd0018b6fa
56+
(title) Customizable Morse Code Translator
57+
(description) Allow users to customize Morse code speed, tone, and character mappings.
58+
(category) Converters
59+
(status) On Hold
60+
(priority) Low
61+
(created_at) 2025-11-15T14:00:00+03:00
62+
(notes) Lower priority, focus on core features first.
63+
64+
> (issues)
65+
(id) f7a9de56-d1db-48ec-9607-3e37dda35c30
66+
(title) New App: Project Timeline Visualizer
67+
(description) A tool to visualize project timelines and dependencies.
68+
(category) Utilities
69+
(status) Completed
70+
(priority) High
71+
(created_at) 2025-11-29T18:00:00+03:00
72+
(notes) Research Gantt chart libraries.

src/components/RoadmapCard.js renamed to src/components/roadmap/RoadmapCard.js

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,8 +13,8 @@ const RoadmapCard = ({ app, index }) => {
1313
borderColor = 'border-blue-700'; // Darker shade for border
1414
break;
1515
case 'In Progress':
16-
bgColor = 'bg-yellow-500';
17-
borderColor = 'border-yellow-700';
16+
bgColor = 'bg-orange-500';
17+
borderColor = 'border-orange-700';
1818
break;
1919
case 'Completed':
2020
bgColor = 'bg-green-500';
@@ -55,7 +55,8 @@ const RoadmapCard = ({ app, index }) => {
5555
};
5656

5757
const statusTextColor = (status) => {
58-
return 'text-white';
58+
if (status === 'Planned') return 'text-white';
59+
return 'text-black';
5960
};
6061

6162
return (

‎src/pages/roadmap/RoadmapItemDetailPage.js‎

Lines changed: 16 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { useParams, Link } from 'react-router-dom';
33
import useSeo from '../../hooks/useSeo';
44
import { ArrowLeftIcon } from '@phosphor-icons/react';
55
import { motion } from 'framer-motion';
6+
import piml from 'piml'; // Import piml
67

78
const RoadmapItemDetailPage = () => {
89
const { id } = useParams();
@@ -25,9 +26,13 @@ const RoadmapItemDetailPage = () => {
2526
useEffect(() => {
2627
const fetchRoadmapItem = async () => {
2728
try {
28-
const response = await fetch('/roadmap/roadmap.json');
29-
const data = await response.json();
30-
const foundItem = data.find((item) => item.id === id);
29+
const pimlResponse = await fetch('/roadmap/roadmap.piml');
30+
if (!pimlResponse.ok) {
31+
throw new Error(`HTTP error! status: ${pimlResponse.status}`);
32+
}
33+
const issuesPimlText = await pimlResponse.text();
34+
const issuesData = piml.parse(issuesPimlText);
35+
const foundItem = issuesData.issues.find((item) => item.id === id);
3136
setRoadmapItem(foundItem);
3237
setIsLoading(false);
3338
} catch (error) {
@@ -48,8 +53,8 @@ const RoadmapItemDetailPage = () => {
4853
borderColor = 'border-blue-700';
4954
break;
5055
case 'In Progress':
51-
bgColor = 'bg-yellow-500';
52-
borderColor = 'border-yellow-700';
56+
bgColor = 'bg-orange-500';
57+
borderColor = 'border-orange-700';
5358
break;
5459
case 'Completed':
5560
bgColor = 'bg-green-500';
@@ -66,6 +71,11 @@ const RoadmapItemDetailPage = () => {
6671
return `${bgColor} ${borderColor}`;
6772
};
6873

74+
const statusTextColor = (status) => {
75+
if (status === 'Planned') return 'text-white';
76+
return 'text-black';
77+
};
78+
6979
const getPriorityClasses = (priority) => {
7080
let textColor = '';
7181
let borderColor = '';
@@ -140,7 +150,7 @@ const RoadmapItemDetailPage = () => {
140150
<div>
141151
<p className="text-gray-400 font-mono font-medium">Status:</p>
142152
<span
143-
className={`px-2 py-0 inline-flex text-xs font-mono font-semibold rounded-md shadow-sm border ${getStatusClasses(roadmapItem.status)} text-white`}
153+
className={`px-2 py-0 inline-flex text-xs font-mono font-semibold rounded-md shadow-sm border ${getStatusClasses(roadmapItem.status)} ${statusTextColor(roadmapItem.status)}`}
144154
>
145155
{roadmapItem.status || 'Planned'}
146156
</span>

‎src/pages/roadmap/RoadmapViewerPage.js‎

Lines changed: 22 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,8 @@ import { Link } from 'react-router-dom';
33
import useSeo from '../../hooks/useSeo';
44
import { ArrowLeftIcon, KanbanIcon, ListBulletsIcon, FunnelIcon } from '@phosphor-icons/react';
55
import CustomDropdown from '../../components/CustomDropdown';
6-
import RoadmapCard from '../../components/RoadmapCard'; // Added import for RoadmapCard
6+
import RoadmapCard from '../../components/roadmap/RoadmapCard'; // Added import for RoadmapCard
7+
import piml from 'piml'; // Import piml
78

89
const RoadmapViewerPage = () => {
910
useSeo({
@@ -19,16 +20,19 @@ const RoadmapViewerPage = () => {
1920
twitterImage: 'https://fezcode.github.io/logo512.png',
2021
});
2122

22-
const [appsData, setAppsData] = useState([]);
23+
const [issuesData, setIssuesData] = useState([]);
2324
const [viewMode, setViewMode] = useState('roadmap'); // 'roadmap' or 'table'
2425

2526
useEffect(() => {
2627
const fetchRoadmap = async () => {
2728
try {
28-
const response = await fetch('/roadmap/roadmap.json');
29-
const data = await response.json();
30-
// Roadmap.json is a flat array, no need to flatten categories
31-
setAppsData(data);
29+
const pimlResponse = await fetch('/roadmap/roadmap.piml');
30+
if (!pimlResponse.ok) {
31+
throw new Error(`HTTP error! status: ${pimlResponse.status}`);
32+
}
33+
const issuesPimlText = await pimlResponse.text();
34+
const issuesData = piml.parse(issuesPimlText);
35+
setIssuesData(issuesData.issues);
3236
} catch (error) {
3337
console.error('Failed to fetch roadmap data:', error);
3438
}
@@ -46,8 +50,8 @@ const RoadmapViewerPage = () => {
4650
borderColor = 'border-blue-700';
4751
break;
4852
case 'In Progress':
49-
bgColor = 'bg-yellow-500';
50-
borderColor = 'border-yellow-700';
53+
bgColor = 'bg-orange-500';
54+
borderColor = 'border-orange-700';
5155
break;
5256
case 'Completed':
5357
bgColor = 'bg-green-500';
@@ -92,8 +96,13 @@ const RoadmapViewerPage = () => {
9296
return classes.split(' ')[0]; // Returns only the bgColor class (e.g., "bg-blue-500")
9397
};
9498

99+
const statusTextColor = (status) => {
100+
if (status === 'Planned') return 'text-white';
101+
return 'text-black';
102+
};
103+
95104
const RoadmapView = () => {
96-
const groupedApps = appsData.reduce((acc, app) => {
105+
const groupedApps = issuesData.reduce((acc, app) => {
97106
const status = app.status || 'Planned'; // Default to Planned if not specified
98107
if (!acc[status]) {
99108
acc[status] = [];
@@ -112,7 +121,7 @@ const RoadmapViewerPage = () => {
112121
className={`text-lg font-mono tracking-wider mb-4 flex items-center gap-2 text-white`}
113122
>
114123
<span
115-
className={`w-3 h-3 rounded-full ${getOnlyBgStatusColor(status)}`}
124+
className={`w-3 h-3 rounded-full ${getOnlyBgStatusColor(status)} ${statusTextColor(status)}`}
116125
></span>
117126
{status} ({groupedApps[status]?.length || 0})
118127
</h3>
@@ -132,7 +141,7 @@ const RoadmapViewerPage = () => {
132141
const [sortOrder, setSortOrder] = useState('asc'); // 'asc' or 'desc'
133142
const [filterStatus, setFilterStatus] = useState('All');
134143

135-
const filteredApps = appsData.filter((app) =>
144+
const filteredApps = issuesData.filter((app) =>
136145
filterStatus === 'All' ? true : (app.status || 'Planned') === filterStatus,
137146
);
138147

@@ -248,14 +257,14 @@ const RoadmapViewerPage = () => {
248257
</td>
249258
<td className="px-6 py-4 whitespace-nowrap">
250259
<span
251-
className={`px-2 py-0 inline-flex text-xs font-mono font-semibold rounded-md shadow-sm border ${getStatusClasses(app.status || 'Planned')} text-white`}
260+
className={`px-2 py-0 inline-flex text-xs font-mono font-semibold rounded-md shadow-sm border ${getStatusClasses(app.status)} ${statusTextColor(app.status)} `}
252261
>
253262
{app.status || 'Planned'}
254263
</span>
255264
</td>
256265
<td className="px-6 py-4 whitespace-nowrap">
257266
<span
258-
className={`px-2 py-0 inline-flex text-xs font-mono font-semibold rounded-md shadow-sm border ${getPriorityClasses(app.priority || 'Low')}`}
267+
className={`px-2 py-0 inline-flex text-xs font-mono font-semibold rounded-md shadow-sm border ${getPriorityClasses(app.priority)}`}
259268
>
260269
{app.priority || 'Low'}
261270
</span>

0 commit comments

Comments
 (0)