feat: Modern styling, draw.io integration, and C4 architecture docs

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
2026-07-16 20:25:09 +00:00
parent f39c2a1e5f
commit 674ec348ce
14 changed files with 2164 additions and 144 deletions
@@ -0,0 +1,94 @@
+<mxfile host="Electron" modified="2026-07-16T00:00:00.000Z" agent="Jarvis" version="24.0.0" type="device">
+  <diagram id="smp-pipeline" name="SMP Data Pipeline">
+    <mxGraphModel dx="1422" dy="762" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="1169" pageHeight="827" math="0" shadow="0">
+      <root>
+        <mxCell id="0" />
+        <mxCell id="1" parent="0" />
+
+        <!-- Title -->
+        <mxCell id="title" value="Stock Market Professional — Data Pipeline" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;fontSize=18;fontStyle=1;fontColor=#6366f1;" vertex="1" parent="1">
+          <mxGeometry x="200" y="20" width="760" height="40" as="geometry" />
+        </mxCell>
+
+        <!-- Market Data APIs -->
+        <mxCell id="api" value="Market Data APIs&#xa;(Yahoo / Alpha Vantage / Polygon)" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#1a1a2e;strokeColor=#6366f1;fontColor=#ffffff;fontSize=11;fontStyle=1;" vertex="1" parent="1">
+          <mxGeometry x="80" y="120" width="200" height="60" as="geometry" />
+        </mxCell>
+
+        <!-- Data Ingestor -->
+        <mxCell id="ingestor" value="Data Ingestor&#xa;Python / APScheduler" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#111827;strokeColor=#818cf8;fontColor=#ffffff;fontSize=11;fontStyle=1;" vertex="1" parent="1">
+          <mxGeometry x="360" y="120" width="200" height="60" as="geometry" />
+        </mxCell>
+
+        <!-- TimescaleDB -->
+        <mxCell id="tsdb" value="Market Data Store&#xa;SQLite / TimescaleDB" style="shape=cylinder3;whiteSpace=wrap;html=1;boundedLbl=1;backgroundOutline=1;size=15;fillColor=#0f172a;strokeColor=#6366f1;fontColor=#ffffff;fontSize=11;fontStyle=1;" vertex="1" parent="1">
+          <mxGeometry x="640" y="110" width="160" height="80" as="geometry" />
+        </mxCell>
+
+        <!-- Analysis Engine -->
+        <mxCell id="analyser" value="Analysis Engine&#xa;pandas-ta / ta-lib" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#111827;strokeColor=#818cf8;fontColor=#ffffff;fontSize=11;fontStyle=1;" vertex="1" parent="1">
+          <mxGeometry x="360" y="260" width="200" height="60" as="geometry" />
+        </mxCell>
+
+        <!-- Signal Generator -->
+        <mxCell id="signalgen" value="Signal Generator&#xa;Max 3/day · 30min hold" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#1e1b4b;strokeColor=#818cf8;fontColor=#ffffff;fontSize=11;fontStyle=1;" vertex="1" parent="1">
+          <mxGeometry x="360" y="400" width="200" height="60" as="geometry" />
+        </mxCell>
+
+        <!-- News API -->
+        <mxCell id="news" value="Economic Calendar&#xa;Forex Factory / Investing.com" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#1a1a2e;strokeColor=#f59e0b;fontColor=#ffffff;fontSize=11;" vertex="1" parent="1">
+          <mxGeometry x="80" y="400" width="200" height="60" as="geometry" />
+        </mxCell>
+
+        <!-- Notifier -->
+        <mxCell id="notifier" value="Notifier&#xa;Discord Webhook" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#111827;strokeColor=#818cf8;fontColor=#ffffff;fontSize=11;fontStyle=1;" vertex="1" parent="1">
+          <mxGeometry x="640" y="400" width="160" height="60" as="geometry" />
+        </mxCell>
+
+        <!-- Discord -->
+        <mxCell id="discord" value="Discord&#xa;Daily Trading Plan" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#1a1a2e;strokeColor=#6366f1;fontColor=#ffffff;fontSize=11;" vertex="1" parent="1">
+          <mxGeometry x="880" y="400" width="160" height="60" as="geometry" />
+        </mxCell>
+
+        <!-- Trader -->
+        <mxCell id="trader" value="👤 Trader&#xa;Manual Execution" style="ellipse;whiteSpace=wrap;html=1;fillColor=#0f172a;strokeColor=#10b981;fontColor=#ffffff;fontSize=11;fontStyle=1;" vertex="1" parent="1">
+          <mxGeometry x="893" y="540" width="140" height="60" as="geometry" />
+        </mxCell>
+
+        <!-- Arrows -->
+        <mxCell id="e1" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;exitX=1;exitY=0.5;entryX=0;entryY=0.5;strokeColor=#6366f1;fontColor=#a5b4fc;fontSize=10;" edge="1" source="api" target="ingestor" parent="1">
+          <mxGeometry relative="1" as="geometry" />
+          <mxCell id="e1l" value="OHLCV" style="edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;points=[];" vertex="1" connectable="0" parent="e1"><mxGeometry relative="0.5" as="geometry"/></mxCell>
+        </mxCell>
+        <mxCell id="e2" style="edgeStyle=orthogonalEdgeStyle;rounded=0;strokeColor=#818cf8;fontSize=10;" edge="1" source="ingestor" target="tsdb" parent="1">
+          <mxGeometry relative="1" as="geometry" />
+          <mxCell id="e2l" value="write candles" style="edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;fontSize=10;" vertex="1" connectable="0" parent="e2"><mxGeometry relative="0.5" as="geometry"/></mxCell>
+        </mxCell>
+        <mxCell id="e3" style="edgeStyle=orthogonalEdgeStyle;rounded=0;strokeColor=#818cf8;fontSize=10;" edge="1" source="tsdb" target="analyser" parent="1">
+          <mxGeometry relative="1" as="geometry" />
+          <mxCell id="e3l" value="read candles" style="edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;fontSize=10;" vertex="1" connectable="0" parent="e3"><mxGeometry relative="0.5" as="geometry"/></mxCell>
+        </mxCell>
+        <mxCell id="e4" style="edgeStyle=orthogonalEdgeStyle;rounded=0;strokeColor=#818cf8;fontSize=10;" edge="1" source="analyser" target="signalgen" parent="1">
+          <mxGeometry relative="1" as="geometry" />
+          <mxCell id="e4l" value="scored snapshots" style="edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;fontSize=10;" vertex="1" connectable="0" parent="e4"><mxGeometry relative="0.5" as="geometry"/></mxCell>
+        </mxCell>
+        <mxCell id="e5" style="edgeStyle=orthogonalEdgeStyle;rounded=0;strokeColor=#f59e0b;fontSize=10;" edge="1" source="news" target="signalgen" parent="1">
+          <mxGeometry relative="1" as="geometry" />
+          <mxCell id="e5l" value="news filter" style="edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;fontSize=10;" vertex="1" connectable="0" parent="e5"><mxGeometry relative="0.5" as="geometry"/></mxCell>
+        </mxCell>
+        <mxCell id="e6" style="edgeStyle=orthogonalEdgeStyle;rounded=0;strokeColor=#818cf8;fontSize=10;" edge="1" source="signalgen" target="notifier" parent="1">
+          <mxGeometry relative="1" as="geometry" />
+          <mxCell id="e6l" value="≤3 signals" style="edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;fontSize=10;" vertex="1" connectable="0" parent="e6"><mxGeometry relative="0.5" as="geometry"/></mxCell>
+        </mxCell>
+        <mxCell id="e7" style="edgeStyle=orthogonalEdgeStyle;rounded=0;strokeColor=#6366f1;fontSize=10;" edge="1" source="notifier" target="discord" parent="1">
+          <mxGeometry relative="1" as="geometry" />
+          <mxCell id="e7l" value="daily plan" style="edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;fontSize=10;" vertex="1" connectable="0" parent="e7"><mxGeometry relative="0.5" as="geometry"/></mxCell>
+        </mxCell>
+        <mxCell id="e8" style="edgeStyle=orthogonalEdgeStyle;rounded=0;strokeColor=#10b981;fontSize=10;" edge="1" source="discord" target="trader" parent="1">
+          <mxGeometry relative="1" as="geometry" />
+          <mxCell id="e8l" value="reads signals" style="edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;fontSize=10;" vertex="1" connectable="0" parent="e8"><mxGeometry relative="0.5" as="geometry"/></mxCell>
+        </mxCell>
+      </root>
+    </mxGraphModel>
+  </diagram>
+</mxfile>
@@ -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
 ```