feat: Add mobile task index with 11ty build-time data

Phase 2 of task management consolidation:

- Added _data/tasks.js - fetches tasks from Gitea API at build time
- Added tasks-index.njk - mobile-friendly task list page
- Added node-fetch dependency for API calls
- Added .gitignore for node_modules and _site

Features:
- Shows only open/blocked tasks (filters out complete)
- Priority filtering (P1/P2/P3/P4)
- Color-coded priority badges (Fire/Gold/Frost/Arcane)
- Links to Gitea for full task details
- Mobile-optimized touch targets

Access at: firefrostgaming.com/tasks-index.html

Chronicler #69

.gitignore

@@ -0,0 +1,9 @@
+# Dependencies
+node_modules/
+
+# Build output (Cloudflare Pages builds this)
+_site/
+
+# Environment
+.env
+.env.local

_data/tasks.js

@@ -0,0 +1,128 @@
+const fetch = (...args) => import('node-fetch').then(({default: fetch}) => fetch(...args));
+
+module.exports = async function() {
+  const GITEA_API = 'https://git.firefrostgaming.com/api/v1';
+  const REPO_OWNER = 'firefrost-gaming';
+  const REPO_NAME = 'firefrost-operations-manual';
+  const TOKEN = process.env.GITEA_TOKEN || 'e0e330cba1749b01ab505093a160e4423ebbbe36';
+  
+  const tasks = [];
+  
+  try {
+    // Get list of task directories
+    const response = await fetch(
+      `${GITEA_API}/repos/${REPO_OWNER}/${REPO_NAME}/contents/docs/tasks?ref=master`,
+      {
+        headers: {
+          'Authorization': `token ${TOKEN}`,
+          'Accept': 'application/json'
+        },
+        timeout: 30000
+      }
+    );
+    
+    if (!response.ok) {
+      console.error('Failed to fetch task list:', response.status);
+      return [];
+    }
+    
+    const dirs = await response.json();
+    const taskDirs = dirs.filter(d => d.type === 'dir' && d.name !== '_archive');
+    
+    // Fetch each task's README
+    for (const dir of taskDirs) {
+      try {
+        // Try README.md first
+        let readmePath = `docs/tasks/${dir.name}/README.md`;
+        let readmeResponse = await fetch(
+          `${GITEA_API}/repos/${REPO_OWNER}/${REPO_NAME}/contents/${encodeURIComponent(readmePath)}?ref=master`,
+          {
+            headers: {
+              'Authorization': `token ${TOKEN}`,
+              'Accept': 'application/json'
+            }
+          }
+        );
+        
+        if (!readmeResponse.ok) {
+          // Try to find any .md file
+          const filesResponse = await fetch(
+            `${GITEA_API}/repos/${REPO_OWNER}/${REPO_NAME}/contents/docs/tasks/${encodeURIComponent(dir.name)}?ref=master`,
+            {
+              headers: {
+                'Authorization': `token ${TOKEN}`,
+                'Accept': 'application/json'
+              }
+            }
+          );
+          
+          if (filesResponse.ok) {
+            const files = await filesResponse.json();
+            const mdFile = files.find(f => f.name.endsWith('.md'));
+            if (mdFile) {
+              readmePath = `docs/tasks/${dir.name}/${mdFile.name}`;
+              readmeResponse = await fetch(
+                `${GITEA_API}/repos/${REPO_OWNER}/${REPO_NAME}/contents/${encodeURIComponent(readmePath)}?ref=master`,
+                {
+                  headers: {
+                    'Authorization': `token ${TOKEN}`,
+                    'Accept': 'application/json'
+                  }
+                }
+              );
+            }
+          }
+        }
+        
+        if (readmeResponse && readmeResponse.ok) {
+          const fileData = await readmeResponse.json();
+          const content = Buffer.from(fileData.content, 'base64').toString('utf-8');
+          
+          // Parse YAML frontmatter
+          const frontmatterMatch = content.match(/^---\n([\s\S]*?)\n---/);
+          if (frontmatterMatch) {
+            const frontmatter = {};
+            frontmatterMatch[1].split('\n').forEach(line => {
+              const match = line.match(/^(\w+):\s*(.+)$/);
+              if (match) {
+                frontmatter[match[1]] = match[2].trim();
+              }
+            });
+            
+            // Extract title from first H1
+            const titleMatch = content.match(/^#\s+(.+)$/m);
+            const title = titleMatch ? titleMatch[1] : dir.name;
+            
+            tasks.push({
+              slug: dir.name,
+              title: title,
+              status: frontmatter.status || 'open',
+              priority: frontmatter.priority || 'P3',
+              owner: frontmatter.owner || 'Michael',
+              created: frontmatter.created || '2026-01-01',
+              giteaUrl: `https://git.firefrostgaming.com/${REPO_OWNER}/${REPO_NAME}/src/branch/master/docs/tasks/${encodeURIComponent(dir.name)}`
+            });
+          }
+        }
+      } catch (err) {
+        console.error(`Error processing ${dir.name}:`, err.message);
+      }
+    }
+    
+    // Sort by priority (P1 first) then by title
+    tasks.sort((a, b) => {
+      if (a.priority !== b.priority) {
+        return a.priority.localeCompare(b.priority);
+      }
+      return a.title.localeCompare(b.title);
+    });
+    
+    console.log(`[11ty] Loaded ${tasks.length} tasks from Gitea`);
+    return tasks;
+    
+  } catch (err) {
+    console.error('[11ty] Error fetching tasks:', err.message);
+    // Return empty array - page will still build, just with no tasks
+    return [];
+  }
+};

package-lock.json

@@ -8,6 +8,9 @@
       "name": "firefrost-website",
       "version": "1.0.0",
       "license": "ISC",
+      "dependencies": {
+        "node-fetch": "^2.7.0"
+      },
       "devDependencies": {
         "@11ty/eleventy": "^3.0.0"
       }
@@ -1218,6 +1221,26 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/node-fetch": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.7.0.tgz",
+      "integrity": "sha512-c4FRfUm/dbcWZ7U+1Wq0AwCyFL+3nt2bEw05wfxSz+DWpWsitgmSgYmy2dQdWyKC1694ELPqMs/YzUSNozLt8A==",
+      "license": "MIT",
+      "dependencies": {
+        "whatwg-url": "^5.0.0"
+      },
+      "engines": {
+        "node": "4.x || >=6.0.0"
+      },
+      "peerDependencies": {
+        "encoding": "^0.1.0"
+      },
+      "peerDependenciesMeta": {
+        "encoding": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/node-retrieve-globals": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/node-retrieve-globals/-/node-retrieve-globals-6.0.1.tgz",
@@ -1603,6 +1626,12 @@
         "node": ">=0.6"
       }
     },
+    "node_modules/tr46": {
+      "version": "0.0.3",
+      "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
+      "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==",
+      "license": "MIT"
+    },
     "node_modules/uc.micro": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/uc.micro/-/uc.micro-2.1.0.tgz",
@@ -1627,6 +1656,22 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/webidl-conversions": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
+      "integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==",
+      "license": "BSD-2-Clause"
+    },
+    "node_modules/whatwg-url": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz",
+      "integrity": "sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==",
+      "license": "MIT",
+      "dependencies": {
+        "tr46": "~0.0.3",
+        "webidl-conversions": "^3.0.0"
+      }
+    },
     "node_modules/ws": {
       "version": "8.20.0",
       "resolved": "https://registry.npmjs.org/ws/-/ws-8.20.0.tgz",

package.json

@@ -11,5 +11,8 @@
   "license": "ISC",
   "devDependencies": {
     "@11ty/eleventy": "^3.0.0"
+  },
+  "dependencies": {
+    "node-fetch": "^2.7.0"
   }
 }

tasks-index.njk

@@ -0,0 +1,263 @@
+---
+layout: false
+permalink: /tasks-index.html
+---
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Tasks - Firefrost Gaming</title>
+    <style>
+        :root {
+            --fire: #FF6B35;
+            --frost: #4ECDC4;
+            --arcane: #A855F7;
+            --gold: #FFD700;
+            --dark: #0F0F1E;
+            --dark-lighter: #1a1a2e;
+        }
+        
+        * {
+            box-sizing: border-box;
+            margin: 0;
+            padding: 0;
+        }
+        
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+            background: var(--dark);
+            color: #fff;
+            min-height: 100vh;
+            padding: 16px;
+        }
+        
+        header {
+            text-align: center;
+            margin-bottom: 24px;
+        }
+        
+        h1 {
+            font-size: 1.5rem;
+            background: linear-gradient(135deg, var(--fire), var(--frost));
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+        }
+        
+        .stats {
+            display: flex;
+            justify-content: center;
+            gap: 16px;
+            margin-top: 8px;
+            font-size: 0.875rem;
+            color: #888;
+        }
+        
+        .stats span {
+            padding: 4px 8px;
+            border-radius: 4px;
+            background: var(--dark-lighter);
+        }
+        
+        .filters {
+            display: flex;
+            gap: 8px;
+            margin-bottom: 16px;
+            flex-wrap: wrap;
+        }
+        
+        .filter-btn {
+            padding: 8px 16px;
+            border: none;
+            border-radius: 8px;
+            background: var(--dark-lighter);
+            color: #fff;
+            cursor: pointer;
+            font-size: 0.875rem;
+            transition: all 0.2s;
+        }
+        
+        .filter-btn:hover {
+            background: #2a2a3e;
+        }
+        
+        .filter-btn.active {
+            background: linear-gradient(135deg, var(--fire), var(--frost));
+        }
+        
+        .task-list {
+            display: flex;
+            flex-direction: column;
+            gap: 12px;
+        }
+        
+        .task-card {
+            background: var(--dark-lighter);
+            border-radius: 12px;
+            padding: 16px;
+            border-left: 4px solid var(--frost);
+            transition: transform 0.2s;
+        }
+        
+        .task-card:active {
+            transform: scale(0.98);
+        }
+        
+        .task-card.P1 { border-left-color: var(--fire); }
+        .task-card.P2 { border-left-color: var(--gold); }
+        .task-card.P3 { border-left-color: var(--frost); }
+        .task-card.P4 { border-left-color: var(--arcane); }
+        
+        .task-card.blocked {
+            opacity: 0.7;
+            border-left-style: dashed;
+        }
+        
+        .task-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: flex-start;
+            gap: 8px;
+        }
+        
+        .task-title {
+            font-size: 1rem;
+            font-weight: 600;
+            flex: 1;
+        }
+        
+        .task-title a {
+            color: #fff;
+            text-decoration: none;
+        }
+        
+        .task-title a:hover {
+            text-decoration: underline;
+        }
+        
+        .priority-badge {
+            font-size: 0.75rem;
+            padding: 2px 8px;
+            border-radius: 4px;
+            font-weight: 600;
+        }
+        
+        .priority-badge.P1 { background: var(--fire); }
+        .priority-badge.P2 { background: var(--gold); color: #000; }
+        .priority-badge.P3 { background: var(--frost); color: #000; }
+        .priority-badge.P4 { background: var(--arcane); }
+        
+        .task-meta {
+            display: flex;
+            gap: 12px;
+            margin-top: 8px;
+            font-size: 0.75rem;
+            color: #888;
+        }
+        
+        .owner {
+            color: var(--frost);
+        }
+        
+        .status-blocked {
+            color: var(--fire);
+            font-weight: 600;
+        }
+        
+        .empty-state {
+            text-align: center;
+            padding: 48px 16px;
+            color: #666;
+        }
+        
+        footer {
+            text-align: center;
+            margin-top: 32px;
+            padding-top: 16px;
+            border-top: 1px solid #333;
+            font-size: 0.75rem;
+            color: #666;
+        }
+        
+        footer a {
+            color: var(--frost);
+        }
+    </style>
+</head>
+<body>
+    <header>
+        <h1>🔥 Firefrost Tasks ❄️</h1>
+        <div class="stats" id="stats">
+            <!-- Populated by JS -->
+        </div>
+    </header>
+    
+    <div class="filters">
+        <button class="filter-btn active" data-filter="all">All Open</button>
+        <button class="filter-btn" data-filter="P1">🔴 P1</button>
+        <button class="filter-btn" data-filter="P2">🟡 P2</button>
+        <button class="filter-btn" data-filter="P3">🔵 P3</button>
+        <button class="filter-btn" data-filter="P4">🟣 P4</button>
+    </div>
+    
+    <div class="task-list">
+        {% for task in tasks %}
+            {% if task.status == "open" or task.status == "blocked" %}
+            <div class="task-card {{ task.priority }} {{ task.status }}" data-priority="{{ task.priority }}" data-status="{{ task.status }}">
+                <div class="task-header">
+                    <div class="task-title">
+                        <a href="{{ task.giteaUrl }}" target="_blank" rel="noopener">
+                            {{ task.title }}
+                        </a>
+                    </div>
+                    <span class="priority-badge {{ task.priority }}">{{ task.priority }}</span>
+                </div>
+                <div class="task-meta">
+                    <span class="owner">{{ task.owner }}</span>
+                    <span>{{ task.created }}</span>
+                    {% if task.status == "blocked" %}
+                    <span class="status-blocked">⚠️ BLOCKED</span>
+                    {% endif %}
+                </div>
+            </div>
+            {% endif %}
+        {% endfor %}
+    </div>
+    
+    <footer>
+        <p><a href="https://git.firefrostgaming.com/firefrost-gaming/firefrost-operations-manual/src/branch/master/docs/tasks">View in Gitea</a></p>
+    </footer>
+    
+    <script>
+        // Calculate stats
+        const cards = document.querySelectorAll('.task-card');
+        let openCount = 0;
+        let blockedCount = 0;
+        cards.forEach(card => {
+            if (card.dataset.status === 'open') openCount++;
+            if (card.dataset.status === 'blocked') blockedCount++;
+        });
+        document.getElementById('stats').innerHTML = 
+            '<span>' + openCount + ' Open</span><span>' + blockedCount + ' Blocked</span>';
+        
+        // Filtering
+        document.querySelectorAll('.filter-btn').forEach(btn => {
+            btn.addEventListener('click', () => {
+                document.querySelectorAll('.filter-btn').forEach(b => b.classList.remove('active'));
+                btn.classList.add('active');
+                
+                const filter = btn.dataset.filter;
+                
+                document.querySelectorAll('.task-card').forEach(card => {
+                    if (filter === 'all') {
+                        card.style.display = 'block';
+                    } else {
+                        card.style.display = card.dataset.priority === filter ? 'block' : 'none';
+                    }
+                });
+            });
+        });
+    </script>
+</body>
+</html>