examples: add demo app markup with full feature showcase
This commit is contained in:
Glint Dev
257
examples/demo/app.gltm
Normal file
257
examples/demo/app.gltm
Normal file
@@ -0,0 +1,257 @@
|
||||
// ============================================================================
|
||||
// Glint System Monitor — Full Feature Demonstration
|
||||
// ============================================================================
|
||||
// Showcases: @global, @singleton, !rhei:, @component, @if/@else, @each,
|
||||
// @on click, variable binding, positioning (fixed, absolute, sticky),
|
||||
// typography, box model, opacity, overflow, grid layout, style inheritance.
|
||||
// ============================================================================
|
||||
|
||||
@version 1
|
||||
@style "styles.glts"
|
||||
|
||||
// ── 1. Global State ──────────────────────────────────────────────────────────
|
||||
@global $title = "System Monitor"
|
||||
@global $user = "admin"
|
||||
@global $cpu = 23.0
|
||||
@global $memory = 47.0
|
||||
@global $online = true
|
||||
@global $alert = 70.0
|
||||
@global $nodes = ["Alpha", "Bravo", "Charlie", "Delta"]
|
||||
@global $notif = true
|
||||
|
||||
@singleton AppInfo {
|
||||
build = "2026-07-22",
|
||||
mode = "release"
|
||||
}
|
||||
|
||||
!rhei: {
|
||||
fn pct(v) { v + "%" }
|
||||
fn label(v) {
|
||||
if v >= 80.0 { "Critical" }
|
||||
else if v >= 50.0 { "Elevated" }
|
||||
else { "Normal" }
|
||||
}
|
||||
print("[Monitor] " + nodes.len() + " node channels allocated.");
|
||||
}
|
||||
|
||||
// ── 2. Components ────────────────────────────────────────────────────────────
|
||||
@component Gauge(name: String, val: Float) {
|
||||
Panel(class="gauge") {
|
||||
Panel(class="gauge-row") {
|
||||
Text(text=$name)
|
||||
Text !rhei: { pct(val) }
|
||||
}
|
||||
ProgressBar(value=$val)
|
||||
Text(class="gauge-label") !rhei: { label(val) }
|
||||
}
|
||||
}
|
||||
|
||||
@component NodeTile(tag: String, active: Bool) {
|
||||
Panel(class="tile") {
|
||||
Panel(class="tile-row") {
|
||||
Icon "🖥"
|
||||
Text(text=$tag)
|
||||
}
|
||||
@if $active {
|
||||
Text(class="tag-on") "● Online"
|
||||
} @else {
|
||||
Text(class="tag-off") "○ Offline"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ── 3. Layout ────────────────────────────────────────────────────────────────
|
||||
Window(title=$title) {
|
||||
|
||||
// ── Sticky Header ────────────────────────────────────────────────────────
|
||||
Panel(class="header") {
|
||||
Panel(class="header-inner") {
|
||||
Icon "⚙"
|
||||
Header "Glint Monitor"
|
||||
Panel(width="fill")
|
||||
Text !rhei: { "👤 " + user }
|
||||
}
|
||||
}
|
||||
|
||||
Panel(class="body") {
|
||||
|
||||
// ── LEFT COLUMN ──────────────────────────────────────────────────────
|
||||
Panel(class="col-left") {
|
||||
|
||||
// Engine Controls
|
||||
Panel(class="card") {
|
||||
Header "Engine"
|
||||
Toggle(label="Online", value=$online)
|
||||
@if $online {
|
||||
Text(class="ok") "🟢 Running"
|
||||
} @else {
|
||||
Text(class="err") "🔴 Stopped"
|
||||
}
|
||||
Input(placeholder="Username", value=$user)
|
||||
}
|
||||
|
||||
// Gauges
|
||||
Panel(class="card") {
|
||||
Header "Metrics"
|
||||
Gauge(name="CPU", val=$cpu)
|
||||
Gauge(name="Memory", val=$memory)
|
||||
}
|
||||
|
||||
// Threshold Slider
|
||||
Panel(class="card") {
|
||||
Header "Alert Threshold"
|
||||
Slider(value=$alert)
|
||||
Text !rhei: { "Alert when > " + alert + "%" }
|
||||
}
|
||||
|
||||
// Buttons
|
||||
Panel(class="card") {
|
||||
Header "Actions"
|
||||
Panel(class="btn-row") {
|
||||
Button(label="Reset CPU") {
|
||||
@on click { !rhei: { cpu = 5.0; } }
|
||||
}
|
||||
Button(label="Stress CPU") {
|
||||
@on click { !rhei: { cpu = 92.0; } }
|
||||
}
|
||||
}
|
||||
Button(label="Toggle Notification", class="btn-outline") {
|
||||
@on click { !rhei: { notif = !notif; } }
|
||||
}
|
||||
}
|
||||
|
||||
// Node Grid
|
||||
Panel(class="card") {
|
||||
Header "Nodes"
|
||||
Panel(direction="grid", columns=2, gap=8) {
|
||||
@each $n in $nodes {
|
||||
NodeTile(tag=$n, active=$online)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ── RIGHT COLUMN ─────────────────────────────────────────────────────
|
||||
Panel(class="col-right") {
|
||||
|
||||
// Typography
|
||||
Panel(class="card") {
|
||||
Header "Typography"
|
||||
Panel(class="demo-row") {
|
||||
Text(class="fw-300") "Light"
|
||||
Text(class="fw-400") "Normal"
|
||||
Text(class="fw-700") "Bold"
|
||||
Text(class="fw-900") "Black"
|
||||
}
|
||||
Panel(class="demo-col") {
|
||||
Panel(class="ta-box") { Text(class="ta-l") "Left" }
|
||||
Panel(class="ta-box") { Text(class="ta-c") "Center" }
|
||||
Panel(class="ta-box") { Text(class="ta-r") "Right" }
|
||||
}
|
||||
Panel(class="lh-box") {
|
||||
Text(class="lh-08") "Tight 0.8"
|
||||
Text(class="lh-12") "Normal 1.2"
|
||||
Text(class="lh-20") "Loose 2.0"
|
||||
}
|
||||
}
|
||||
|
||||
// Box Model
|
||||
Panel(class="card") {
|
||||
Header "Box Model"
|
||||
Panel(class="box-pad") {
|
||||
Text "padding: 24px top, 12px sides"
|
||||
}
|
||||
Panel(class="box-margin") {
|
||||
Text "margin-top: 16px"
|
||||
}
|
||||
Panel(class="box-combo") {
|
||||
Text "border: 2px dashed, radius: 10px"
|
||||
}
|
||||
}
|
||||
|
||||
// Absolute Positioning
|
||||
Panel(class="card") {
|
||||
Header "Position: Absolute"
|
||||
Panel(class="abs-stage") {
|
||||
Text "Stage with an overlay badge:"
|
||||
Panel(class="abs-badge") {
|
||||
Panel(class="badge-inner") {
|
||||
Text "★ HOT"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Opacity
|
||||
Panel(class="card") {
|
||||
Header "Opacity"
|
||||
Panel(class="op-row") {
|
||||
Panel(class="op-30") { Text "30%" }
|
||||
Panel(class="op-60") { Text "60%" }
|
||||
Panel(class="op-85") { Text "85%" }
|
||||
Panel(class="op-100") { Text "100%" }
|
||||
}
|
||||
}
|
||||
|
||||
// Scroll + Sticky
|
||||
Panel(class="card") {
|
||||
Header "Scrollable Log"
|
||||
Panel(class="log") {
|
||||
Panel(class="log-header") {
|
||||
Text "📋 Event Log (sticky)"
|
||||
}
|
||||
Text "Init: system boot"
|
||||
Text "Info: all modules OK"
|
||||
Text "Warn: CPU at $cpu%"
|
||||
Text "Info: mem at $memory%"
|
||||
Text "Debug: threshold $alert"
|
||||
Text "Info: user $user"
|
||||
Text "Warn: node check"
|
||||
Text "Info: heartbeat OK"
|
||||
Text "Debug: idle"
|
||||
}
|
||||
}
|
||||
|
||||
// Inheritance
|
||||
Panel(class="card") {
|
||||
Header "Style Inheritance"
|
||||
Panel(class="inherit") {
|
||||
Text "Yellow from parent"
|
||||
Text(class="override") "Pink — override"
|
||||
}
|
||||
}
|
||||
|
||||
// Display: none demo
|
||||
Panel(class="card") {
|
||||
Header "Display: None"
|
||||
Panel(class="demo-row") {
|
||||
Panel(class="vis") { Text "Visible" }
|
||||
Panel(class="hid") { Text "Hidden" }
|
||||
Panel(class="vis") { Text "Still Here" }
|
||||
}
|
||||
}
|
||||
|
||||
// Flex Grow
|
||||
Panel(class="card") {
|
||||
Header "Flex Grow"
|
||||
Panel(class="grow-bar") {
|
||||
Panel(class="grow-1") { Text "1" }
|
||||
Panel(class="grow-2") { Text "2" }
|
||||
Panel(class="grow-1") { Text "1" }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ── Fixed Toast ──────────────────────────────────────────────────────────
|
||||
@if $notif {
|
||||
Panel(class="toast") {
|
||||
Panel(class="toast-row") {
|
||||
Text "✅ Monitor ready"
|
||||
Button(label="×", class="toast-x") {
|
||||
@on click { !rhei: { notif = false; } }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user