feat: Modern styling, draw.io integration, and C4 architecture docs
Build and Deploy Documentation / build (push) Failing after 8s

Styling:
- Dark-first design (Vercel/Linear inspired) with Geist font
- Custom CSS with full --ifm- token overrides
- Glassmorphic navbar, refined sidebar, modern tables
- Gradient hero with animated glow, app cards, C4 section
- Custom badge, tag, and callout components
- Announcement bar, TOC config, dark scrollbar

draw.io:
- Added docusaurus-plugin-drawio + raw-loader
- SMP full pipeline diagram (smp-pipeline.drawio)
- Embedded in architecture overview

Mermaid:
- Added @docusaurus/theme-mermaid
- C4Context, C4Container, C4Component diagrams
- Sequence and graph diagrams in architecture

C4 Architecture (Stock Market Professional):
- L1 Context: system in the world, actors, external systems
- L2 Containers: Data Ingestor, Analysis Engine, Signal Generator, TimescaleDB, Notifier
- L3 Components: deep component breakdown with mermaid C4Component diagrams

Other:
- Sidebar restructured with C4 section and Modules section
- Homepage rebuilt as modern dark landing page
This commit is contained in:
2026-07-16 20:25:09 +00:00
parent f39c2a1e5f
commit 674ec348ce
14 changed files with 2164 additions and 144 deletions
+48 -28
View File
@@ -6,47 +6,67 @@ sidebar_position: 1
## Overview
All SKIC Playground applications share a common infrastructure pattern:
All SKIC Playground applications share a common infrastructure built on TrueNAS SCALE and Gitea.
```
┌─────────────────────────────────────────────────────┐
│ TrueNAS SCALE │
│ │
│ ┌──────────┐ ┌──────────┐ ┌──────────────────┐ │
│ │ Gitea │ │ Registry │ │ App Containers │ │
│ │ + CI/CD │ │ (Zot) │ │ │ │
│ └──────────┘ └──────────┘ └──────────────────┘ │
│ │
│ ┌──────────┐ ┌──────────┐ ┌──────────────────┐ │
│ │Keycloak │ │ Hermes │ │ Monitoring │ │
│ │ (Auth) │ │ (Agent) │ │ │ │
│ └──────────┘ └──────────┘ └──────────────────┘ │
└─────────────────────────────────────────────────────┘
## Full Pipeline — Interactive Diagram
import Drawio from '@theme/Drawio';
import smpPipeline from '!!raw-loader!./diagrams/smp-pipeline.drawio';
<Drawio content={smpPipeline} />
## Infrastructure
```mermaid
graph TB
subgraph TrueNAS["🖥 TrueNAS SCALE — lego-cloud.eu"]
Gitea["🗂 Gitea\nSource + CI/CD"]
Zot["📦 Zot Registry\n:30264"]
Apps["🐳 App Containers"]
Hermes["🤖 Hermes Agent\nAI Operations"]
Keycloak["🔐 Keycloak\nAuth / SSO"]
end
Gitea -->|push image| Zot
Zot -->|pull & deploy| Apps
Hermes -->|automates| Gitea
Hermes -->|manages| Apps
Keycloak -->|secures| Apps
```
## Shared Services
| Service | URL | Purpose |
|---|---|---|
| Gitea | gitea.lego-cloud.eu | Source code, CI/CD |
| Keycloak | keycloak.lego-cloud.eu | Authentication, SSO |
| Zot Registry | :30264 | Container images |
| Hermes Agent | Local | AI operations, automation |
| Gitea | gitea.lego-cloud.eu | Source code, CI/CD, issue tracking |
| Keycloak | keycloak.lego-cloud.eu | Authentication & SSO |
| Zot Registry | :30264 | OCI container image registry |
| Hermes Agent | Local | AI operations, automation, documentation |
## CI/CD Pattern
## CI/CD Flow
All applications follow the same Gitea Actions workflow:
```mermaid
sequenceDiagram
participant Dev as Developer / Jarvis
participant Git as Gitea
participant CI as Gitea Actions
participant Reg as Zot Registry
participant Host as TrueNAS
1. **Push to main** → Build + Test
2. **Build container** → Push to Zot registry
3. **Deploy** → Update running container
4. **Docs update** → Rebuild documentation site
Dev->>Git: git push main
Git->>CI: Trigger workflow
CI->>CI: pnpm install
CI->>CI: pnpm build
CI->>Reg: docker push image
CI->>Host: Deploy updated container
Host-->>Dev: ✅ Live
```
## Repository Structure
```
skic-v1-playground/
├── documentation/ # This docs site
├── stock-market-pro/ # (Planned) Trading system
└── ... # Future applications
├── documentation/ ← This docs site (Docusaurus)
├── stock-market-pro/ ← (Planned) Trading system
└── ... ← Future applications
```