a2nr
/
velxio
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: add board gallery and supported boards sections to documentation

pull/47/head
David Montero Crespo 2026-03-16 14:39:18 -03:00
parent eb4b691f2d
commit e24ab79ffe
2 changed files with 75 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
frontend/src/pages/DocsPage.css
View File

@ -460,3 +460,36 @@
font-size: 1.6rem; font-size: 1.6rem;
} }
} }
/* ── Board gallery ──────────────────────────────────────── */
.docs-board-gallery {
display: flex;
flex-wrap: wrap;
gap: 16px;
margin: 16px 0 24px;
}
.docs-board-card {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
background: var(--bg-secondary, #1e1e2e);
border: 1px solid var(--border, #2a2a3a);
border-radius: 10px;
padding: 16px 20px;
min-width: 140px;
}
.docs-board-card img {
width: 120px;
height: 120px;
object-fit: contain;
}
.docs-board-card span {
font-size: 12px;
color: var(--text-muted, #888);
text-align: center;
font-family: var(--mono, monospace);
}

42
frontend/src/pages/DocsPage.tsx
View File

@ -1052,6 +1052,20 @@ const RiscVEmulationSection: React.FC = () => (
</p> </p>
<h2>Supported Boards</h2> <h2>Supported Boards</h2>
<div className="docs-board-gallery">
<div className="docs-board-card">
<img src="/boards/esp32-c3.svg" alt="ESP32-C3 DevKit" />
<span>ESP32-C3 DevKit</span>
</div>
<div className="docs-board-card">
<img src="/boards/xiao-esp32-c3.svg" alt="Seeed XIAO ESP32-C3" />
<span>Seeed XIAO ESP32-C3</span>
</div>
<div className="docs-board-card">
<img src="/boards/esp32c3-supermini.svg" alt="ESP32-C3 SuperMini" />
<span>ESP32-C3 SuperMini</span>
</div>
</div>
<table> <table>
<thead> <thead>
<tr><th>Board</th><th>CPU</th><th>Flash</th><th>RAM</th></tr> <tr><th>Board</th><th>CPU</th><th>Flash</th><th>RAM</th></tr>
@ -1170,6 +1184,28 @@ const Esp32EmulationSection: React.FC = () => (
</ol> </ol>
<h2>Supported Boards</h2> <h2>Supported Boards</h2>
<div className="docs-board-gallery">
<div className="docs-board-card">
<img src="/boards/esp32-devkit-c-v4.svg" alt="ESP32 DevKit C V4" />
<span>ESP32 DevKit C V4</span>
</div>
<div className="docs-board-card">
<img src="/boards/esp32-s3.svg" alt="ESP32-S3" />
<span>ESP32-S3</span>
</div>
<div className="docs-board-card">
<img src="/boards/esp32-cam.svg" alt="ESP32-CAM" />
<span>ESP32-CAM</span>
</div>
<div className="docs-board-card">
<img src="/boards/xiao-esp32-s3.svg" alt="Seeed XIAO ESP32-S3" />
<span>Seeed XIAO ESP32-S3</span>
</div>
<div className="docs-board-card">
<img src="/boards/arduino-nano-esp32.svg" alt="Arduino Nano ESP32" />
<span>Arduino Nano ESP32</span>
</div>
</div>
<table> <table>
<thead> <thead>
<tr><th>Board</th><th>CPU</th><th>Emulation</th></tr> <tr><th>Board</th><th>CPU</th><th>Emulation</th></tr>
@ -1309,6 +1345,12 @@ const RaspberryPi3EmulationSection: React.FC = () => (
</p> </p>
<h2>Supported Boards</h2> <h2>Supported Boards</h2>
<div className="docs-board-gallery">
<div className="docs-board-card">
<img src="/boards/Raspberry_Pi_3.svg" alt="Raspberry Pi 3B" />
<span>Raspberry Pi 3B</span>
</div>
</div>
<table> <table>
<thead><tr><th>Board</th><th>QEMU Machine</th><th>CPU</th></tr></thead> <thead><tr><th>Board</th><th>QEMU Machine</th><th>CPU</th></tr></thead>
<tbody> <tbody>