ssmithxandClaude Sonnet 5
a22a9c9826
Build and validate / build (push) Successful in 1m38s
Modeled on three researched precedents (see README): OpenWrt's Table of Hardware for the browsable sortable/filterable table UX, postmarketOS's working/community/testing tiers for the status field (collapsed to working/partial/broken here), and RaspiBlitz's scattered GitHub-issues approach as a negative example to avoid — hence structured YAML report files validated against a JSON Schema instead of free-text issue threads. - data/reports/*.yml + data/schema.json: one file per report, schema requires `issues` whenever status is partial/broken - scripts/build.py: validates every report and builds site/data.json, fails loudly on bad data (same idea as archy's own validate-app-manifest.sh) - site/: plain HTML/CSS/JS, no framework or build step, fetches data.json client-side — search, filter by status/form-factor, sortable columns, click a row for issues/notes detail - .github/ISSUE_TEMPLATE/hardware-report.yml: structured submission path for contributors who don't want to touch git directly - .gitea/workflows/ci.yml: runs the build/validate step on push and PRs Not yet deployed anywhere — see README's Deployment section. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
67 lines
2.8 KiB
HTML
67 lines
2.8 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>ArchyHCL — Archipelago Hardware Compatibility List</title>
|
|
<link rel="stylesheet" href="style.css">
|
|
</head>
|
|
<body>
|
|
<header>
|
|
<h1>ArchyHCL</h1>
|
|
<p>Community-reported hardware compatibility for <a href="https://source.archipelago-foundation.org/lfg2025/archy" target="_blank" rel="noopener">Archipelago</a>. Every row here is a real install someone tested and reported — see it on GitHub/Gitea as a plain data file, no login required to browse.</p>
|
|
<p class="cta">
|
|
Tested Archipelago on your own hardware? <a href="https://source.archipelago-foundation.org/lfg2025/ArchyHCL/issues/new?template=hardware-report.yml" target="_blank" rel="noopener">Report it</a> —
|
|
takes two minutes and helps the next person know what to expect before they buy or repurpose a machine.
|
|
</p>
|
|
</header>
|
|
|
|
<main>
|
|
<div class="controls">
|
|
<input id="search" type="search" placeholder="Search model, CPU, WiFi chip…" autocomplete="off">
|
|
<select id="status-filter">
|
|
<option value="">All statuses</option>
|
|
<option value="working">Working</option>
|
|
<option value="partial">Partial</option>
|
|
<option value="broken">Broken</option>
|
|
</select>
|
|
<select id="form-factor-filter">
|
|
<option value="">All form factors</option>
|
|
<option value="laptop">Laptop</option>
|
|
<option value="desktop">Desktop</option>
|
|
<option value="mini-pc">Mini PC</option>
|
|
<option value="sbc">SBC</option>
|
|
<option value="server">Server</option>
|
|
<option value="other">Other</option>
|
|
</select>
|
|
<span id="count" class="count"></span>
|
|
</div>
|
|
|
|
<table id="table">
|
|
<thead>
|
|
<tr>
|
|
<th data-sort="device_model">Device</th>
|
|
<th data-sort="form_factor">Type</th>
|
|
<th data-sort="cpu">CPU</th>
|
|
<th data-sort="ram_gb">RAM</th>
|
|
<th data-sort="storage">Storage</th>
|
|
<th data-sort="wifi_chip">WiFi chip</th>
|
|
<th data-sort="status">Status</th>
|
|
<th data-sort="archy_version">Archy ver.</th>
|
|
<th data-sort="tested_date">Tested</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="rows"></tbody>
|
|
</table>
|
|
|
|
<p id="empty" class="empty" hidden>No reports match your filters.</p>
|
|
</main>
|
|
|
|
<footer>
|
|
<p>Data lives in <code>data/reports/*.yml</code>, one file per report — browse or fork the raw data <a href="https://source.archipelago-foundation.org/lfg2025/ArchyHCL/src/branch/main/data/reports" target="_blank" rel="noopener">here</a>. See <a href="https://source.archipelago-foundation.org/lfg2025/ArchyHCL/src/branch/main/CONTRIBUTING.md" target="_blank" rel="noopener">CONTRIBUTING.md</a> for the two ways to add a report.</p>
|
|
</footer>
|
|
|
|
<script src="app.js"></script>
|
|
</body>
|
|
</html>
|