71 lines
2.6 KiB
Markdown
71 lines
2.6 KiB
Markdown
# Strike Freedom Cockpit — dashboard skin demo
|
|
|
|
Demonstrates how the dashboard skin+plugin system can be used to build a
|
|
fully custom cockpit-style reskin without touching the core dashboard.
|
|
|
|
Two pieces:
|
|
|
|
- `theme/strike-freedom.yaml` — a dashboard theme YAML that paints the
|
|
palette, typography, layout variant (`cockpit`), component chrome
|
|
(notched card corners, scanlines, accent colors), and declares asset
|
|
slots (`hero`, `crest`, `bg`).
|
|
- `dashboard/` — a plugin that populates the `sidebar`, `header-left`,
|
|
and `footer-right` slots reserved by the cockpit layout. The sidebar
|
|
renders an MS-STATUS panel with segmented telemetry bars driven by
|
|
real agent status; the header-left injects a COMPASS crest; the
|
|
footer-right replaces the default org tagline.
|
|
|
|
## Install
|
|
|
|
1. **Theme** — copy the theme YAML into your Hermes home:
|
|
|
|
```
|
|
cp theme/strike-freedom.yaml ~/.hermes/dashboard-themes/
|
|
```
|
|
|
|
2. **Plugin** — the `dashboard/` directory gets auto-discovered because
|
|
it lives under `plugins/` in the repo. On a user install, copy the
|
|
whole plugin directory into `~/.hermes/plugins/`:
|
|
|
|
```
|
|
cp -r . ~/.hermes/plugins/strike-freedom-cockpit
|
|
```
|
|
|
|
3. Restart the web UI (or `GET /api/dashboard/plugins/rescan`), open it,
|
|
pick **Strike Freedom** from the theme switcher.
|
|
|
|
## Customising the artwork
|
|
|
|
The sidebar plugin reads `--theme-asset-hero` and `--theme-asset-crest`
|
|
from the active theme. Drop your own URLs into the theme YAML:
|
|
|
|
```yaml
|
|
assets:
|
|
hero: "/my-images/strike-freedom.png"
|
|
crest: "/my-images/compass-crest.svg"
|
|
bg: "/my-images/cosmic-era-bg.jpg"
|
|
```
|
|
|
|
The plugin reads those at render time — no plugin code changes needed
|
|
to swap artwork across themes.
|
|
|
|
## What this demo proves
|
|
|
|
The dashboard skin+plugin system supports (ref: `web/src/themes/types.ts`,
|
|
`web/src/plugins/slots.ts`):
|
|
|
|
- Palette, typography, font URLs, density, radius — already present
|
|
- **Asset URLs exposed as CSS vars** (bg / hero / crest / logo /
|
|
sidebar / header + arbitrary `custom.*`)
|
|
- **Raw `customCSS` blocks** injected as scoped `<style>` tags
|
|
- **Per-component style overrides** (card / header / sidebar / backdrop /
|
|
tab / progress / footer / badge / page) via CSS vars
|
|
- **`layoutVariant`** — `standard`, `cockpit`, or `tiled`
|
|
- **Plugin slots** — 10 named shell slots plugins can inject into
|
|
(`backdrop`, `header-left/right/banner`, `sidebar`, `pre-main`,
|
|
`post-main`, `footer-left/right`, `overlay`)
|
|
- **Route overrides** — plugins can replace a built-in page entirely
|
|
(`tab.override: "/"`) instead of just adding a tab
|
|
- **Hidden plugins** — slot-only plugins that never show in the nav
|
|
(`tab.hidden: true`) — as used here
|