add task index

Signed-off-by: bitliu <[email protected]>

Author: Xunzhuo

website/src/pages/roadmap/roadmap.module.css

@@ -323,6 +323,45 @@
   width: 100%;
 }
 
+.taskLink {
+  color: #007bff;
+  text-decoration: none;
+  font-weight: 700;
+  font-size: 0.9rem;
+  padding: 0.2rem 0.5rem;
+  border-radius: 4px;
+  background: rgba(0, 123, 255, 0.1);
+  border: 1px solid rgba(0, 123, 255, 0.2);
+  transition: all 0.3s ease;
+  display: inline-block;
+  margin-right: 0.5rem;
+  position: relative;
+  overflow: hidden;
+}
+
+.taskLink::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
+  transition: left 0.3s ease;
+}
+
+.taskLink:hover {
+  color: #0056b3;
+  background: rgba(0, 123, 255, 0.15);
+  border-color: rgba(0, 123, 255, 0.4);
+  text-decoration: none;
+  transform: scale(1.05);
+}
+
+.taskLink:hover::before {
+  left: 100%;
+}
+
 .itemDescription {
   margin-bottom: 1.25rem;
   color: var(--ifm-color-emphasis-700);

website/src/pages/roadmap/v0.1.js

@@ -9,28 +9,43 @@ const priorityColors = {
 };
 
 const PriorityBadge = ({ priority }) => (
-  <span 
+  <span
     className={styles.priorityBadge}
     style={{ backgroundColor: priorityColors[priority] }}
   >
     {priority}
   </span>
 );
 
-const RoadmapItem = ({ title, priority, acceptance, children }) => (
-  <div className={styles.roadmapItem}>
-    <div className={styles.itemHeader}>
-      <h4 className={styles.itemTitle}>{title}</h4>
-      <PriorityBadge priority={priority} />
-    </div>
-    {children && <div className={styles.itemDescription}>{children}</div>}
-    {acceptance && (
-      <div className={styles.acceptance}>
-        <strong>Acceptance:</strong> {acceptance}
+// Counter for generating unique task numbers
+let taskCounter = 0;
+
+const RoadmapItem = ({ title, priority, acceptance, children, id }) => {
+  taskCounter++;
+  const taskId = id || `task-${taskCounter}`;
+  const taskNumber = taskCounter;
+
+  return (
+    <div className={styles.roadmapItem} id={taskId}>
+      <div className={styles.itemHeader}>
+        <h4 className={styles.itemTitle}>
+          <a href={`#${taskId}`} className={styles.taskLink}>
+            #{taskNumber}
+          </a>
+          {' '}
+          {title}
+        </h4>
+        <PriorityBadge priority={priority} />
       </div>
-    )}
-  </div>
-);
+      {children && <div className={styles.itemDescription}>{children}</div>}
+      {acceptance && (
+        <div className={styles.acceptance}>
+          <strong>Acceptance:</strong> {acceptance}
+        </div>
+      )}
+    </div>
+  );
+};
 
 const AreaSection = ({ title, children }) => (
   <div className={styles.areaSection}>
@@ -42,6 +57,9 @@ const AreaSection = ({ title, children }) => (
 );
 
 export default function RoadmapV01() {
+  // Reset task counter for consistent numbering on re-renders
+  taskCounter = 0;
+
   return (
     <Layout
       title="Roadmap v0.1"