Dashboard
An at-a-glance overview screen: key stats up top, an alert for anything that needs attention, and card-based summaries below. No sidebar — built for a single focused view rather than deep navigation.
Each module card’s category pill (Database, Web Server, Networking) uses the extended color palette — a fixed hue per category, distinguishable at a glance regardless of how many categories a real module list ends up with.
Full HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Overview — Forge Dashboard</title>
<link rel="stylesheet" href="https://unpkg.com/@openvoxproject/voxblocks/dist/cdn/voxblocks.css" />
<script type="module" src="https://unpkg.com/@openvoxproject/voxblocks/dist/cdn/voxblocks.js"></script>
</head>
<body>
<vox-header site-title="Forge Dashboard" href="/">
<a href="/overview" aria-current="page">Overview</a>
<a href="/modules">Modules</a>
<a href="/team">Team</a>
<vox-avatar slot="actions" size="sm" initials="DR" alt="D. Ramírez"></vox-avatar>
</vox-header>
<div class="vox-p-all-lg">
<h1 class="vox-ts-xl vox-m-bottom-md">Overview</h1>
<vox-alert variant="warning" heading="Two modules need a maintainer" class="vox-m-bottom-lg">
<p>puppet-legacy-app and puppet-old-tool haven't had a release in over a year.</p>
</vox-alert>
<vox-grid min="160px" gap="lg" class="vox-m-bottom-lg">
<vox-stat value="450+" label="Modules">Community-maintained</vox-stat>
<vox-stat value="12" label="Pending PRs">Awaiting review</vox-stat>
<vox-stat value="3" label="Releases">This week</vox-stat>
<vox-stat value="98%" label="CI passing">Across all modules</vox-stat>
</vox-grid>
<vox-grid min="240px" gap="md">
<vox-card heading="puppetdb">
<span slot="badge">8.1.0</span>
<span class="vox-bg-blue-100 vox-color-blue-900 vox-p-x-sm vox-radius-full vox-ts-xs vox-text-semibold" style="display: inline-block; margin-bottom: 0.35rem;">Database</span>
Installs PostgreSQL and PuppetDB, sets up the connection to Puppet master.
<span slot="footer">313,347,865 downloads</span>
</vox-card>
<vox-card heading="apache">
<span slot="badge">12.0.1</span>
<span class="vox-bg-gold-100 vox-color-gold-900 vox-p-x-sm vox-radius-full vox-ts-xs vox-text-semibold" style="display: inline-block; margin-bottom: 0.35rem;">Web Server</span>
Installs and configures Apache HTTP Server, including virtual hosts and modules.
<span slot="footer">204,981,112 downloads</span>
</vox-card>
<vox-card heading="nginx">
<span slot="badge">6.0.1</span>
<span class="vox-bg-purple-100 vox-color-purple-900 vox-p-x-sm vox-radius-full vox-ts-xs vox-text-semibold" style="display: inline-block; margin-bottom: 0.35rem;">Networking</span>
Installs and configures nginx, including sites, upstreams, and SSL/TLS.
<span slot="footer">128,442,003 downloads</span>
</vox-card>
</vox-grid>
</div>
</body>
</html>