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
This commit is contained in:
Claude
9
.gitignore
vendored
Normal file
9
.gitignore
vendored
Normal file
@@ -0,0 +1,9 @@
|
||||
# Dependencies
|
||||
node_modules/
|
||||
|
||||
# Build output (Cloudflare Pages builds this)
|
||||
_site/
|
||||
|
||||
# Environment
|
||||
.env
|
||||
.env.local
|
||||
128
_data/tasks.js
Normal file
128
_data/tasks.js
Normal file
@@ -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 [];
|
||||
}
|
||||
};
|
||||
45
package-lock.json
generated
45
package-lock.json
generated
@@ -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",
|
||||
|
||||
@@ -11,5 +11,8 @@
|
||||
"license": "ISC",
|
||||
"devDependencies": {
|
||||
"@11ty/eleventy": "^3.0.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"node-fetch": "^2.7.0"
|
||||
}
|
||||
}
|
||||
|
||||
263
tasks-index.njk
Normal file
263
tasks-index.njk
Normal file
@@ -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>
|
||||
Reference in New Issue
Block a user