@portosaur/theme 0.1.5 → 0.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (49) hide show
  1. package/package.json +12 -3
  2. package/src/plugins/theme.mjs +2 -0
  3. package/theme/DocCategoryGeneratedIndexPage/index.jsx +4 -10
  4. package/theme/MDXComponents.jsx +3 -2
  5. package/theme/Root.jsx +1 -1
  6. package/theme/components/AboutSection/index.jsx +89 -249
  7. package/theme/components/ContactSection/index.jsx +72 -153
  8. package/theme/components/ExperienceSection/index.jsx +35 -106
  9. package/theme/components/HeroSection/index.jsx +64 -186
  10. package/theme/components/Indent/index.jsx +10 -0
  11. package/theme/components/NavArrow/index.jsx +38 -55
  12. package/theme/components/NoteCards/index.jsx +110 -0
  13. package/theme/components/Preview/components/FeedbackStates.jsx +45 -190
  14. package/theme/components/Preview/components/FileTabs.jsx +17 -24
  15. package/theme/components/Preview/components/PreviewContent.jsx +37 -62
  16. package/theme/components/Preview/components/PreviewHeader.jsx +146 -380
  17. package/theme/components/Preview/components/Triggers/Pv.jsx +50 -78
  18. package/theme/components/Preview/components/Triggers/SrcPv.jsx +16 -47
  19. package/theme/components/Preview/components/Triggers/index.jsx +2 -2
  20. package/theme/components/Preview/components/ViewerWindow.jsx +160 -268
  21. package/theme/components/Preview/index.jsx +3 -3
  22. package/theme/components/Preview/renderers/CodeRenderer.jsx +81 -109
  23. package/theme/components/Preview/renderers/ImageRenderer.jsx +30 -67
  24. package/theme/components/Preview/renderers/PdfRenderer.jsx +31 -52
  25. package/theme/components/Preview/renderers/WebRenderer.jsx +18 -32
  26. package/theme/components/Preview/state/index.jsx +46 -30
  27. package/theme/components/ProjectsSection/index.jsx +278 -573
  28. package/theme/components/ScrollToTop/index.jsx +93 -0
  29. package/theme/components/ScrollToTop/styles.module.css +97 -0
  30. package/theme/components/SocialLinks/index.jsx +43 -55
  31. package/theme/components/Tooltip/index.jsx +85 -43
  32. package/theme/components/Tooltip/styles.module.css +13 -3
  33. package/theme/components/TopicList/index.jsx +31 -0
  34. package/theme/css/animations.css +61 -0
  35. package/theme/css/custom.css +16 -253
  36. package/theme/css/overrides/base.css +37 -0
  37. package/theme/css/overrides/footer.css +14 -0
  38. package/theme/css/overrides/markdown.css +62 -0
  39. package/theme/css/overrides/navbar.css +37 -0
  40. package/theme/css/overrides/pagination.css +64 -0
  41. package/theme/css/overrides/search.css +28 -0
  42. package/theme/css/{catppuccin.css → overrides/variables.css} +1 -1
  43. package/theme/pages/index.jsx +25 -87
  44. package/theme/pages/notes.jsx +27 -104
  45. package/theme/pages/tasks.jsx +293 -904
  46. package/theme/components/NoteIndex/index.jsx +0 -182
  47. package/theme/css/bootstrap.css +0 -5
  48. /package/theme/components/{NoteIndex → NoteCards}/styles.module.css +0 -0
  49. /package/theme/css/{tasks.css → tasks.module.css} +0 -0
package/theme/pages/tasks.jsx CHANGED
@@ -2,7 +2,8 @@ import { useState } from "react";
2
2
  import Layout from "@theme/Layout";
3
3
  import Head from "@docusaurus/Head";
4
4
  import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
5
- import "../css/tasks.css";
5
+ import styles from "../css/tasks.module.css";
6
+ import clsx from "clsx";
6
7
  import {
7
8
  FaClipboardList,
8
9
  FaSyncAlt,
@@ -14,70 +15,32 @@ import {
14
15
  FaTasks,
15
16
  FaExclamationTriangle,
16
17
  } from "react-icons/fa";
18
+
19
+ // --- TaskList ---
20
+
17
21
  function TaskList({ filterStatus, taskList }) {
18
22
  if (!taskList || !Array.isArray(taskList)) {
19
- return jsxDEV_7x81h0kn(
20
- "div",
21
- {
22
- className: "task-empty-state",
23
- children: [
24
- jsxDEV_7x81h0kn(
25
- FaTasks,
26
- { className: "task-empty-icon" },
27
- undefined,
28
- false,
29
- undefined,
30
- this,
31
- ),
32
- jsxDEV_7x81h0kn(
33
- "p",
34
- { children: "No tasks available" },
35
- undefined,
36
- false,
37
- undefined,
38
- this,
39
- ),
40
- ],
41
- },
42
- undefined,
43
- true,
44
- undefined,
45
- this,
23
+ return (
24
+ <div className={styles["task-empty-state"]}>
25
+ <FaTasks className={styles["task-empty-icon"]} />
26
+ <p>No tasks available</p>
27
+ </div>
46
28
  );
47
29
  }
30
+
48
31
  const filteredTasks = taskList.filter((task) =>
49
32
  filterStatus ? task.status === filterStatus : true,
50
33
  );
34
+
51
35
  if (filteredTasks.length === 0) {
52
- return jsxDEV_7x81h0kn(
53
- "div",
54
- {
55
- className: "task-empty-state",
56
- children: [
57
- jsxDEV_7x81h0kn(
58
- FaTasks,
59
- { className: "task-empty-icon" },
60
- undefined,
61
- false,
62
- undefined,
63
- this,
64
- ),
65
- jsxDEV_7x81h0kn(
66
- "p",
67
- { children: "No tasks in this category" },
68
- undefined,
69
- false,
70
- undefined,
71
- this,
72
- ),
73
- ],
74
- },
75
- undefined,
76
- true,
77
- undefined,
78
- this,
36
+ return (
37
+ <div className={styles["task-empty-state"]}>
38
+ <FaTasks className={styles["task-empty-icon"]} />
39
+ <p>No tasks in this category</p>
40
+ </div>
79
41
  );
80
42
  }
43
+
81
44
  const sortedTasks = [...filteredTasks].sort((a, b) => {
82
45
  const statusOrder = { active: 1, pending: 2, completed: 3 };
83
46
  const statusDiff = statusOrder[a.status] - statusOrder[b.status];
@@ -85,307 +48,132 @@ function TaskList({ filterStatus, taskList }) {
85
48
  const priorityOrder = { high: 1, medium: 2, low: 3 };
86
49
  return priorityOrder[a.priority] - priorityOrder[b.priority];
87
50
  });
88
- return jsxDEV_7x81h0kn(
89
- "div",
90
- {
91
- className: "task-list-container",
92
- children: jsxDEV_7x81h0kn(
93
- "div",
94
- {
95
- className: "task-list-table",
96
- children: [
97
- jsxDEV_7x81h0kn(
98
- "div",
99
- {
100
- className: "task-list-header",
101
- children: [
102
- jsxDEV_7x81h0kn(
103
- "div",
104
- {
105
- className: "task-cell task-cell-status",
106
- children: "Status",
107
- },
108
- undefined,
109
- false,
110
- undefined,
111
- this,
112
- ),
113
- jsxDEV_7x81h0kn(
114
- "div",
115
- {
116
- className: "task-cell task-cell-title",
117
- children: "Task Details",
118
- },
119
- undefined,
120
- false,
121
- undefined,
122
- this,
123
- ),
124
- jsxDEV_7x81h0kn(
125
- "div",
126
- {
127
- className: "task-cell task-cell-priority",
128
- children: "Priority",
129
- },
130
- undefined,
131
- false,
132
- undefined,
133
- this,
134
- ),
135
- ],
136
- },
137
- undefined,
138
- true,
139
- undefined,
140
- this,
141
- ),
142
- jsxDEV_7x81h0kn(
143
- "div",
144
- {
145
- className: "task-rows",
146
- children: sortedTasks.map((task, index) =>
147
- jsxDEV_7x81h0kn(
148
- "div",
149
- {
150
- className: `task-row ${task.status === "completed" ? "task-row-completed" : ""} ${index % 2 === 1 ? "task-row-striped" : ""}`,
151
- children: [
152
- jsxDEV_7x81h0kn(
153
- "div",
154
- {
155
- className: "task-cell task-cell-status",
156
- children: jsxDEV_7x81h0kn(
157
- "span",
158
- {
159
- className: `badge badge-status-${task.status}`,
160
- children: [
161
- task.status === "completed" &&
162
- jsxDEV_7x81h0kn(
163
- Fragment_8vg9x3sq,
164
- {
165
- children: [
166
- jsxDEV_7x81h0kn(
167
- FaCheckCircle,
168
- { className: "badge-icon" },
169
- undefined,
170
- false,
171
- undefined,
172
- this,
173
- ),
174
- " Done",
175
- ],
176
- },
177
- undefined,
178
- true,
179
- undefined,
180
- this,
181
- ),
182
- task.status === "active" &&
183
- jsxDEV_7x81h0kn(
184
- Fragment_8vg9x3sq,
185
- {
186
- children: [
187
- jsxDEV_7x81h0kn(
188
- FaSyncAlt,
189
- { className: "badge-icon spin" },
190
- undefined,
191
- false,
192
- undefined,
193
- this,
194
- ),
195
- " In Progress",
196
- ],
197
- },
198
- undefined,
199
- true,
200
- undefined,
201
- this,
202
- ),
203
- task.status === "pending" &&
204
- jsxDEV_7x81h0kn(
205
- Fragment_8vg9x3sq,
206
- {
207
- children: [
208
- jsxDEV_7x81h0kn(
209
- FaClock,
210
- { className: "badge-icon" },
211
- undefined,
212
- false,
213
- undefined,
214
- this,
215
- ),
216
- " Planned",
217
- ],
218
- },
219
- undefined,
220
- true,
221
- undefined,
222
- this,
223
- ),
224
- ],
225
- },
226
- undefined,
227
- true,
228
- undefined,
229
- this,
230
- ),
231
- },
232
- undefined,
233
- false,
234
- undefined,
235
- this,
236
- ),
237
- jsxDEV_7x81h0kn(
238
- "div",
239
- {
240
- className: "task-cell task-cell-title",
241
- children: [
242
- jsxDEV_7x81h0kn(
243
- "div",
244
- {
245
- className: "task-title",
246
- children: task.title,
247
- },
248
- undefined,
249
- false,
250
- undefined,
251
- this,
252
- ),
253
- task.desc &&
254
- jsxDEV_7x81h0kn(
255
- "div",
256
- {
257
- className: "task-description",
258
- children: task.desc,
259
- },
260
- undefined,
261
- false,
262
- undefined,
263
- this,
264
- ),
265
- ],
266
- },
267
- undefined,
268
- true,
269
- undefined,
270
- this,
271
- ),
272
- jsxDEV_7x81h0kn(
273
- "div",
274
- {
275
- className: "task-cell task-cell-priority",
276
- children: jsxDEV_7x81h0kn(
277
- "span",
278
- {
279
- className: `badge badge-priority-${task.priority}`,
280
- children: [
281
- task.priority === "high" &&
282
- jsxDEV_7x81h0kn(
283
- Fragment_8vg9x3sq,
284
- {
285
- children: [
286
- jsxDEV_7x81h0kn(
287
- FaFire,
288
- { className: "badge-icon" },
289
- undefined,
290
- false,
291
- undefined,
292
- this,
293
- ),
294
- " High",
295
- ],
296
- },
297
- undefined,
298
- true,
299
- undefined,
300
- this,
301
- ),
302
- task.priority === "medium" &&
303
- jsxDEV_7x81h0kn(
304
- Fragment_8vg9x3sq,
305
- {
306
- children: [
307
- jsxDEV_7x81h0kn(
308
- FaThermometerHalf,
309
- { className: "badge-icon" },
310
- undefined,
311
- false,
312
- undefined,
313
- this,
314
- ),
315
- " Medium",
316
- ],
317
- },
318
- undefined,
319
- true,
320
- undefined,
321
- this,
322
- ),
323
- task.priority === "low" &&
324
- jsxDEV_7x81h0kn(
325
- Fragment_8vg9x3sq,
326
- {
327
- children: [
328
- jsxDEV_7x81h0kn(
329
- FaSnowflake,
330
- { className: "badge-icon" },
331
- undefined,
332
- false,
333
- undefined,
334
- this,
335
- ),
336
- " Low",
337
- ],
338
- },
339
- undefined,
340
- true,
341
- undefined,
342
- this,
343
- ),
344
- ],
345
- },
346
- undefined,
347
- true,
348
- undefined,
349
- this,
350
- ),
351
- },
352
- undefined,
353
- false,
354
- undefined,
355
- this,
356
- ),
357
- ],
358
- },
359
- index,
360
- true,
361
- undefined,
362
- this,
363
- ),
364
- ),
365
- },
366
- undefined,
367
- false,
368
- undefined,
369
- this,
370
- ),
371
- ],
372
- },
373
- undefined,
374
- true,
375
- undefined,
376
- this,
377
- ),
378
- },
379
- undefined,
380
- false,
381
- undefined,
382
- this,
51
+
52
+ return (
53
+ <div className={styles["task-list-container"]}>
54
+ <div className={styles["task-list-table"]}>
55
+ {/* Table header */}
56
+ <div className={styles["task-list-header"]}>
57
+ <div
58
+ className={clsx(styles["task-cell"], styles["task-cell-status"])}
59
+ >
60
+ Status
61
+ </div>
62
+ <div className={clsx(styles["task-cell"], styles["task-cell-title"])}>
63
+ Task Details
64
+ </div>
65
+ <div
66
+ className={clsx(styles["task-cell"], styles["task-cell-priority"])}
67
+ >
68
+ Priority
69
+ </div>
70
+ </div>
71
+
72
+ {/* Task rows */}
73
+ <div className={styles["task-rows"]}>
74
+ {sortedTasks.map((task, index) => (
75
+ <div
76
+ key={index}
77
+ className={clsx(
78
+ styles["task-row"],
79
+ task.status === "completed"
80
+ ? "task-row-completed"
81
+ : "" && styles["task-row-completed"],
82
+ index % 2 === 1
83
+ ? "task-row-striped"
84
+ : "" && styles["task-row-striped"],
85
+ )}
86
+ >
87
+ {/* Status cell */}
88
+ <div
89
+ className={clsx(
90
+ styles["task-cell"],
91
+ styles["task-cell-status"],
92
+ )}
93
+ >
94
+ <span
95
+ className={clsx(
96
+ styles["badge"],
97
+ styles[`badge-status-${task.status}`],
98
+ )}
99
+ >
100
+ {task.status === "completed" && (
101
+ <>
102
+ <FaCheckCircle className={styles["badge-icon"]} /> Done
103
+ </>
104
+ )}
105
+ {task.status === "active" && (
106
+ <>
107
+ <FaSyncAlt
108
+ className={clsx(styles["badge-icon"], styles["spin"])}
109
+ />{" "}
110
+ In Progress
111
+ </>
112
+ )}
113
+ {task.status === "pending" && (
114
+ <>
115
+ <FaClock className={styles["badge-icon"]} /> Planned
116
+ </>
117
+ )}
118
+ </span>
119
+ </div>
120
+
121
+ {/* Title cell */}
122
+ <div
123
+ className={clsx(styles["task-cell"], styles["task-cell-title"])}
124
+ >
125
+ <div className={styles["task-title"]}>{task.title}</div>
126
+ {task.desc && (
127
+ <div className={styles["task-description"]}>{task.desc}</div>
128
+ )}
129
+ </div>
130
+
131
+ {/* Priority cell */}
132
+ <div
133
+ className={clsx(
134
+ styles["task-cell"],
135
+ styles["task-cell-priority"],
136
+ )}
137
+ >
138
+ <span
139
+ className={clsx(
140
+ styles["badge"],
141
+ styles[`badge-priority-${task.priority}`],
142
+ )}
143
+ >
144
+ {task.priority === "high" && (
145
+ <>
146
+ <FaFire className={styles["badge-icon"]} /> High
147
+ </>
148
+ )}
149
+ {task.priority === "medium" && (
150
+ <>
151
+ <FaThermometerHalf className={styles["badge-icon"]} />{" "}
152
+ Medium
153
+ </>
154
+ )}
155
+ {task.priority === "low" && (
156
+ <>
157
+ <FaSnowflake className={styles["badge-icon"]} /> Low
158
+ </>
159
+ )}
160
+ </span>
161
+ </div>
162
+ </div>
163
+ ))}
164
+ </div>
165
+ </div>
166
+ </div>
383
167
  );
384
168
  }
169
+
170
+ // --- TaskStats ---
171
+
385
172
  function TaskStats({ taskList }) {
386
173
  if (!taskList || !Array.isArray(taskList)) {
387
174
  return null;
388
175
  }
176
+
389
177
  const total = taskList.length;
390
178
  const completed = taskList.filter(
391
179
  (task) => task.status === "completed",
@@ -393,597 +181,198 @@ function TaskStats({ taskList }) {
393
181
  const active = taskList.filter((task) => task.status === "active").length;
394
182
  const pending = taskList.filter((task) => task.status === "pending").length;
395
183
  const percentComplete = total > 0 ? Math.round((completed / total) * 100) : 0;
396
- return jsxDEV_7x81h0kn(
397
- "div",
398
- {
399
- className: "stats-container",
400
- children: [
401
- jsxDEV_7x81h0kn(
402
- "div",
403
- {
404
- className: "stat-box",
405
- children: [
406
- jsxDEV_7x81h0kn(
407
- "div",
408
- { className: "stat-label", children: "Total Tasks" },
409
- undefined,
410
- false,
411
- undefined,
412
- this,
413
- ),
414
- jsxDEV_7x81h0kn(
415
- "div",
416
- { className: "stat-value", children: total },
417
- undefined,
418
- false,
419
- undefined,
420
- this,
421
- ),
422
- ],
423
- },
424
- undefined,
425
- true,
426
- undefined,
427
- this,
428
- ),
429
- jsxDEV_7x81h0kn(
430
- "div",
431
- {
432
- className: "stat-box",
433
- children: [
434
- jsxDEV_7x81h0kn(
435
- "div",
436
- { className: "stat-label", children: "Completed" },
437
- undefined,
438
- false,
439
- undefined,
440
- this,
441
- ),
442
- jsxDEV_7x81h0kn(
443
- "div",
444
- {
445
- className: "stat-value stat-value-completed",
446
- children: completed,
447
- },
448
- undefined,
449
- false,
450
- undefined,
451
- this,
452
- ),
453
- ],
454
- },
455
- undefined,
456
- true,
457
- undefined,
458
- this,
459
- ),
460
- jsxDEV_7x81h0kn(
461
- "div",
462
- {
463
- className: "stat-box",
464
- children: [
465
- jsxDEV_7x81h0kn(
466
- "div",
467
- { className: "stat-label", children: "In Progress" },
468
- undefined,
469
- false,
470
- undefined,
471
- this,
472
- ),
473
- jsxDEV_7x81h0kn(
474
- "div",
475
- { className: "stat-value stat-value-active", children: active },
476
- undefined,
477
- false,
478
- undefined,
479
- this,
480
- ),
481
- ],
482
- },
483
- undefined,
484
- true,
485
- undefined,
486
- this,
487
- ),
488
- jsxDEV_7x81h0kn(
489
- "div",
490
- {
491
- className: "stat-box",
492
- children: [
493
- jsxDEV_7x81h0kn(
494
- "div",
495
- { className: "stat-label", children: "Planned" },
496
- undefined,
497
- false,
498
- undefined,
499
- this,
500
- ),
501
- jsxDEV_7x81h0kn(
502
- "div",
503
- {
504
- className: "stat-value stat-value-pending",
505
- children: pending,
506
- },
507
- undefined,
508
- false,
509
- undefined,
510
- this,
511
- ),
512
- ],
513
- },
514
- undefined,
515
- true,
516
- undefined,
517
- this,
518
- ),
519
- jsxDEV_7x81h0kn(
520
- "div",
521
- {
522
- className: "stat-box",
523
- children: [
524
- jsxDEV_7x81h0kn(
525
- "div",
526
- { className: "stat-label", children: "Progress" },
527
- undefined,
528
- false,
529
- undefined,
530
- this,
531
- ),
532
- jsxDEV_7x81h0kn(
533
- "div",
534
- { className: "stat-value", children: [percentComplete, "%"] },
535
- undefined,
536
- true,
537
- undefined,
538
- this,
539
- ),
540
- jsxDEV_7x81h0kn(
541
- "div",
542
- {
543
- className: "progress-bar-container",
544
- children: jsxDEV_7x81h0kn(
545
- "div",
546
- {
547
- className: "progress-bar",
548
- style: { width: `${percentComplete}%` },
549
- },
550
- undefined,
551
- false,
552
- undefined,
553
- this,
554
- ),
555
- },
556
- undefined,
557
- false,
558
- undefined,
559
- this,
560
- ),
561
- ],
562
- },
563
- undefined,
564
- true,
565
- undefined,
566
- this,
567
- ),
568
- ],
569
- },
570
- undefined,
571
- true,
572
- undefined,
573
- this,
184
+
185
+ return (
186
+ <div className={styles["stats-container"]}>
187
+ <div className={styles["stat-box"]}>
188
+ <div className={styles["stat-label"]}>Total Tasks</div>
189
+ <div className={styles["stat-value"]}>{total}</div>
190
+ </div>
191
+ <div className={styles["stat-box"]}>
192
+ <div className={styles["stat-label"]}>Completed</div>
193
+ <div
194
+ className={clsx(styles["stat-value"], styles["stat-value-completed"])}
195
+ >
196
+ {completed}
197
+ </div>
198
+ </div>
199
+ <div className={styles["stat-box"]}>
200
+ <div className={styles["stat-label"]}>In Progress</div>
201
+ <div
202
+ className={clsx(styles["stat-value"], styles["stat-value-active"])}
203
+ >
204
+ {active}
205
+ </div>
206
+ </div>
207
+ <div className={styles["stat-box"]}>
208
+ <div className={styles["stat-label"]}>Planned</div>
209
+ <div
210
+ className={clsx(styles["stat-value"], styles["stat-value-pending"])}
211
+ >
212
+ {pending}
213
+ </div>
214
+ </div>
215
+ <div className={styles["stat-box"]}>
216
+ <div className={styles["stat-label"]}>Progress</div>
217
+ <div className={styles["stat-value"]}>{percentComplete}%</div>
218
+ <div className={styles["progress-bar-container"]}>
219
+ <div
220
+ className={styles["progress-bar"]}
221
+ style={{ width: `${percentComplete}%` }}
222
+ />
223
+ </div>
224
+ </div>
225
+ </div>
574
226
  );
575
227
  }
228
+
229
+ // --- TaskTabs ---
230
+
576
231
  function TaskTabs({ taskList }) {
577
232
  const [activeTab, setActiveTab] = useState("all");
233
+
578
234
  if (!taskList || !Array.isArray(taskList)) {
579
235
  return null;
580
236
  }
237
+
581
238
  const tabData = [
582
239
  {
583
240
  id: "all",
584
241
  label: "All Tasks",
585
- icon: jsxDEV_7x81h0kn(
586
- FaClipboardList,
587
- {},
588
- undefined,
589
- false,
590
- undefined,
591
- this,
592
- ),
242
+ icon: <FaClipboardList />,
593
243
  count: taskList.length,
594
244
  },
595
245
  {
596
246
  id: "active",
597
247
  label: "In Progress",
598
- icon: jsxDEV_7x81h0kn(
599
- FaSyncAlt,
600
- { className: "spin" },
601
- undefined,
602
- false,
603
- undefined,
604
- this,
605
- ),
248
+ icon: <FaSyncAlt className={styles["spin"]} />,
606
249
  count: taskList.filter((t) => t.status === "active").length,
607
250
  },
608
251
  {
609
252
  id: "pending",
610
253
  label: "Planned",
611
- icon: jsxDEV_7x81h0kn(FaClock, {}, undefined, false, undefined, this),
254
+ icon: <FaClock />,
612
255
  count: taskList.filter((t) => t.status === "pending").length,
613
256
  },
614
257
  {
615
258
  id: "completed",
616
259
  label: "Completed",
617
- icon: jsxDEV_7x81h0kn(
618
- FaCheckCircle,
619
- {},
620
- undefined,
621
- false,
622
- undefined,
623
- this,
624
- ),
260
+ icon: <FaCheckCircle />,
625
261
  count: taskList.filter((t) => t.status === "completed").length,
626
262
  },
627
263
  ];
628
- return jsxDEV_7x81h0kn(
629
- "div",
630
- {
631
- className: "task-tabs-container",
632
- children: [
633
- jsxDEV_7x81h0kn(
634
- "div",
635
- {
636
- className: "task-tabs",
637
- role: "tablist",
638
- "aria-label": "Task categories",
639
- children: tabData.map((tab) =>
640
- jsxDEV_7x81h0kn(
641
- "button",
642
- {
643
- className: `task-tab ${activeTab === tab.id ? "task-tab-active" : ""}`,
644
- onClick: () => setActiveTab(tab.id),
645
- role: "tab",
646
- "aria-selected": activeTab === tab.id,
647
- "aria-controls": `tab-content-${tab.id}`,
648
- id: `tab-${tab.id}`,
649
- children: [
650
- jsxDEV_7x81h0kn(
651
- "span",
652
- {
653
- className: "task-tab-icon",
654
- "aria-hidden": "true",
655
- children: tab.icon,
656
- },
657
- undefined,
658
- false,
659
- undefined,
660
- this,
661
- ),
662
- jsxDEV_7x81h0kn(
663
- "span",
664
- { className: "task-tab-label", children: tab.label },
665
- undefined,
666
- false,
667
- undefined,
668
- this,
669
- ),
670
- jsxDEV_7x81h0kn(
671
- "span",
672
- { className: "task-tab-count", children: tab.count },
673
- undefined,
674
- false,
675
- undefined,
676
- this,
677
- ),
678
- ],
679
- },
680
- tab.id,
681
- true,
682
- undefined,
683
- this,
684
- ),
685
- ),
686
- },
687
- undefined,
688
- false,
689
- undefined,
690
- this,
691
- ),
692
- jsxDEV_7x81h0kn(
693
- "div",
694
- {
695
- className: "task-tab-content",
696
- role: "tabpanel",
697
- id: `tab-content-${activeTab}`,
698
- "aria-labelledby": `tab-${activeTab}`,
699
- children: [
700
- activeTab === "all" &&
701
- jsxDEV_7x81h0kn(
702
- TaskList,
703
- { taskList },
704
- undefined,
705
- false,
706
- undefined,
707
- this,
708
- ),
709
- activeTab === "active" &&
710
- jsxDEV_7x81h0kn(
711
- TaskList,
712
- { taskList, filterStatus: "active" },
713
- undefined,
714
- false,
715
- undefined,
716
- this,
717
- ),
718
- activeTab === "pending" &&
719
- jsxDEV_7x81h0kn(
720
- TaskList,
721
- { taskList, filterStatus: "pending" },
722
- undefined,
723
- false,
724
- undefined,
725
- this,
726
- ),
727
- activeTab === "completed" &&
728
- jsxDEV_7x81h0kn(
729
- TaskList,
730
- { taskList, filterStatus: "completed" },
731
- undefined,
732
- false,
733
- undefined,
734
- this,
735
- ),
736
- ],
737
- },
738
- undefined,
739
- true,
740
- undefined,
741
- this,
742
- ),
743
- ],
744
- },
745
- undefined,
746
- true,
747
- undefined,
748
- this,
264
+
265
+ return (
266
+ <div className={styles["task-tabs-container"]}>
267
+ <div
268
+ className={styles["task-tabs"]}
269
+ role="tablist"
270
+ aria-label="Task categories"
271
+ >
272
+ {tabData.map((tab) => (
273
+ <button
274
+ key={tab.id}
275
+ className={clsx(
276
+ styles["task-tab"],
277
+ activeTab === tab.id
278
+ ? "task-tab-active"
279
+ : ""
280
+ ? styles["task-tab-active"]
281
+ : "",
282
+ )}
283
+ onClick={() => setActiveTab(tab.id)}
284
+ role="tab"
285
+ aria-selected={activeTab === tab.id}
286
+ aria-controls={`tab-content-${tab.id}`}
287
+ id={`tab-${tab.id}`}
288
+ >
289
+ <span className={styles["task-tab-icon"]} aria-hidden="true">
290
+ {tab.icon}
291
+ </span>
292
+ <span className={styles["task-tab-label"]}>{tab.label}</span>
293
+ <span className={styles["task-tab-count"]}>{tab.count}</span>
294
+ </button>
295
+ ))}
296
+ </div>
297
+
298
+ <div
299
+ className={styles["task-tab-content"]}
300
+ role="tabpanel"
301
+ id={`tab-content-${activeTab}`}
302
+ aria-labelledby={`tab-${activeTab}`}
303
+ >
304
+ {activeTab === "all" && <TaskList taskList={taskList} />}
305
+ {activeTab === "active" && (
306
+ <TaskList taskList={taskList} filterStatus="active" />
307
+ )}
308
+ {activeTab === "pending" && (
309
+ <TaskList taskList={taskList} filterStatus="pending" />
310
+ )}
311
+ {activeTab === "completed" && (
312
+ <TaskList taskList={taskList} filterStatus="completed" />
313
+ )}
314
+ </div>
315
+ </div>
749
316
  );
750
317
  }
318
+
319
+ // --- TasksPage (default export) ---
320
+
751
321
  export default function TasksPage() {
752
322
  const { siteConfig } = useDocusaurusContext();
753
323
  const { customFields } = siteConfig || {};
754
324
  const tasksPage = customFields?.tasksPage;
755
- const heading = tasksPage.heading || "Tasks";
756
- const subheading = tasksPage.subheading || "Roadmap & Goals";
757
- const taskList =
758
- tasksPage.enable && tasksPage.taskList ? tasksPage.taskList : [];
325
+
759
326
  if (!tasksPage || !tasksPage.enable) {
760
- return jsxDEV_7x81h0kn(
761
- Layout,
762
- {
763
- title: "Tasks are Disabled",
764
- description: "Tasks are currently disabled",
765
- children: jsxDEV_7x81h0kn(
766
- "div",
767
- {
768
- className: "tasks-container",
769
- children: jsxDEV_7x81h0kn(
770
- "div",
771
- {
772
- className: "tasks-content",
773
- children: jsxDEV_7x81h0kn(
774
- "div",
775
- {
776
- className: "tasks-disabled-notice",
777
- children: [
778
- jsxDEV_7x81h0kn(
779
- "div",
780
- {
781
- className: "disabled-icon",
782
- children: jsxDEV_7x81h0kn(
783
- FaExclamationTriangle,
784
- { "aria-hidden": "true" },
785
- undefined,
786
- false,
787
- undefined,
788
- this,
789
- ),
790
- },
791
- undefined,
792
- false,
793
- undefined,
794
- this,
795
- ),
796
- jsxDEV_7x81h0kn(
797
- "h2",
798
- {
799
- className: "disabled-title",
800
- children: "Tasks are currently disabled",
801
- },
802
- undefined,
803
- false,
804
- undefined,
805
- this,
806
- ),
807
- jsxDEV_7x81h0kn(
808
- "p",
809
- {
810
- className: "disabled-help",
811
- children: [
812
- "To enable tasks, set ",
813
- jsxDEV_7x81h0kn(
814
- "code",
815
- { children: "tasks.enable" },
816
- undefined,
817
- false,
818
- undefined,
819
- this,
820
- ),
821
- " to",
822
- " ",
823
- jsxDEV_7x81h0kn(
824
- "code",
825
- { children: "true" },
826
- undefined,
827
- false,
828
- undefined,
829
- this,
830
- ),
831
- ],
832
- },
833
- undefined,
834
- true,
835
- undefined,
836
- this,
837
- ),
838
- ],
839
- },
840
- undefined,
841
- true,
842
- undefined,
843
- this,
844
- ),
845
- },
846
- undefined,
847
- false,
848
- undefined,
849
- this,
850
- ),
851
- },
852
- undefined,
853
- false,
854
- undefined,
855
- this,
856
- ),
857
- },
858
- undefined,
859
- false,
860
- undefined,
861
- this,
327
+ return (
328
+ <Layout
329
+ title="Tasks are Disabled"
330
+ description="Tasks are currently disabled"
331
+ >
332
+ <div className={styles["tasks-container"]}>
333
+ <div className={styles["tasks-content"]}>
334
+ <div className={styles["tasks-disabled-notice"]}>
335
+ <div className={styles["disabled-icon"]}>
336
+ <FaExclamationTriangle aria-hidden="true" />
337
+ </div>
338
+ <h2 className={styles["disabled-title"]}>
339
+ Tasks are currently disabled
340
+ </h2>
341
+ <p className={styles["disabled-help"]}>
342
+ To enable tasks, set <code>tasks.enable</code> to{" "}
343
+ <code>true</code>
344
+ </p>
345
+ </div>
346
+ </div>
347
+ </div>
348
+ </Layout>
862
349
  );
863
350
  }
864
- return jsxDEV_7x81h0kn(
865
- Layout,
866
- {
867
- title: heading,
868
- description: subheading,
869
- children: [
870
- jsxDEV_7x81h0kn(
871
- Head,
872
- {
873
- children: [
874
- jsxDEV_7x81h0kn(
875
- "meta",
876
- { property: "og:title", content: heading },
877
- undefined,
878
- false,
879
- undefined,
880
- this,
881
- ),
882
- jsxDEV_7x81h0kn(
883
- "meta",
884
- { property: "og:description", content: subheading },
885
- undefined,
886
- false,
887
- undefined,
888
- this,
889
- ),
890
- jsxDEV_7x81h0kn(
891
- "meta",
892
- { name: "twitter:title", content: heading },
893
- undefined,
894
- false,
895
- undefined,
896
- this,
897
- ),
898
- jsxDEV_7x81h0kn(
899
- "meta",
900
- { name: "twitter:description", content: subheading },
901
- undefined,
902
- false,
903
- undefined,
904
- this,
905
- ),
906
- ],
907
- },
908
- undefined,
909
- true,
910
- undefined,
911
- this,
912
- ),
913
- jsxDEV_7x81h0kn(
914
- "div",
915
- {
916
- className: "tasks-container",
917
- children: [
918
- jsxDEV_7x81h0kn(
919
- "div",
920
- {
921
- className: "tasks-header",
922
- children: [
923
- jsxDEV_7x81h0kn(
924
- "h1",
925
- { className: "tasks-heading", children: heading },
926
- undefined,
927
- false,
928
- undefined,
929
- this,
930
- ),
931
- subheading &&
932
- jsxDEV_7x81h0kn(
933
- "p",
934
- { className: "tasks-subheading", children: subheading },
935
- undefined,
936
- false,
937
- undefined,
938
- this,
939
- ),
940
- ],
941
- },
942
- undefined,
943
- true,
944
- undefined,
945
- this,
946
- ),
947
- jsxDEV_7x81h0kn(
948
- "div",
949
- {
950
- className: "tasks-content",
951
- children: [
952
- jsxDEV_7x81h0kn(
953
- TaskStats,
954
- { taskList },
955
- undefined,
956
- false,
957
- undefined,
958
- this,
959
- ),
960
- jsxDEV_7x81h0kn(
961
- TaskTabs,
962
- { taskList },
963
- undefined,
964
- false,
965
- undefined,
966
- this,
967
- ),
968
- ],
969
- },
970
- undefined,
971
- true,
972
- undefined,
973
- this,
974
- ),
975
- ],
976
- },
977
- undefined,
978
- true,
979
- undefined,
980
- this,
981
- ),
982
- ],
983
- },
984
- undefined,
985
- true,
986
- undefined,
987
- this,
351
+
352
+ const heading = tasksPage.heading || "Tasks";
353
+ const subheading = tasksPage.subheading || "Roadmap & Goals";
354
+ const taskList = tasksPage.taskList ?? [];
355
+
356
+ return (
357
+ <Layout title={heading} description={subheading}>
358
+ <Head>
359
+ <meta property="og:title" content={heading} />
360
+ <meta property="og:description" content={subheading} />
361
+ <meta name="twitter:title" content={heading} />
362
+ <meta name="twitter:description" content={subheading} />
363
+ </Head>
364
+ <div className={styles["tasks-container"]}>
365
+ <div className={styles["tasks-header"]}>
366
+ <h1 className={styles["tasks-heading"]}>{heading}</h1>
367
+ {subheading && (
368
+ <p className={styles["tasks-subheading"]}>{subheading}</p>
369
+ )}
370
+ </div>
371
+ <div className={styles["tasks-content"]}>
372
+ <TaskStats taskList={taskList} />
373
+ <TaskTabs taskList={taskList} />
374
+ </div>
375
+ </div>
376
+ </Layout>
988
377
  );
989
378
  }