refactor(techdemo): compose page with hemplate views
Move the techdemo page shell and remaining board/inspector/hero boundaries to hemplate-owned views instead of Rust raw HTML or placeholder replacement. Keep rendered HTML assertions DOM-aware with scraper. req: html_safety/002 req: view/001 req: test/005
This commit is contained in:
slhx agent
+155
-105
@@ -121,6 +121,25 @@ struct IssueCard {
|
||||
delete_handle: u32,
|
||||
}
|
||||
|
||||
#[derive(Hemplate)]
|
||||
#[hemplate = "partials"]
|
||||
struct BoardLanes {
|
||||
lanes: Vec<IssueLane>,
|
||||
}
|
||||
|
||||
#[derive(Hemplate)]
|
||||
struct ControlCenter {
|
||||
hero: SafeHtml,
|
||||
board: SafeHtml,
|
||||
inspector: SafeHtml,
|
||||
activity: SafeHtml,
|
||||
}
|
||||
|
||||
#[derive(Hemplate)]
|
||||
struct AppShell {
|
||||
body: SafeHtml,
|
||||
}
|
||||
|
||||
#[derive(Hemplate)]
|
||||
#[hemplate = "partials"]
|
||||
struct InspectorPanel {
|
||||
@@ -169,6 +188,15 @@ struct ArchitectureHero;
|
||||
#[hemplate = "partials"]
|
||||
struct ArchitectureBoard;
|
||||
|
||||
#[derive(Hemplate)]
|
||||
#[hemplate = "partials"]
|
||||
struct HeroMetrics {
|
||||
resource_count: u64,
|
||||
active_count: usize,
|
||||
shipped_count: usize,
|
||||
impact_score: u64,
|
||||
}
|
||||
|
||||
#[tokio::main]
|
||||
async fn main() {
|
||||
let state = Arc::new(Shared { demo: Mutex::new(DemoState::default()) });
|
||||
@@ -177,6 +205,8 @@ async fn main() {
|
||||
.route("/architecture", get(architecture))
|
||||
.route("/events", get(events))
|
||||
.route("/slhx.js", get(runtime))
|
||||
.route("/app.css", get(app_css))
|
||||
.route("/control_center.css", get(control_center_css))
|
||||
.with_state(state);
|
||||
|
||||
let addr = std::env::var("SLHX_TECHDEMO_ADDR")
|
||||
@@ -199,11 +229,12 @@ async fn home(State(state): State<Arc<Shared>>, request: PageRequest) -> impl In
|
||||
|
||||
// req: page_swap/001 req: page_swap/002 req: examples/001
|
||||
async fn architecture(request: PageRequest) -> impl IntoResponse {
|
||||
let body = ui::control_center::lower_html(include_str!("../templates/control_center.heml"))
|
||||
.replace("__HERO__", architecture_hero().as_str())
|
||||
.replace("__BOARD__", architecture_board().as_str())
|
||||
.replace("__INSPECTOR__", architecture_inspector().as_str())
|
||||
.replace("__ACTIVITY__", architecture_activity().as_str());
|
||||
let body = render_control_center(ControlCenter {
|
||||
hero: architecture_hero(),
|
||||
board: architecture_board(),
|
||||
inspector: architecture_inspector(),
|
||||
activity: architecture_activity(),
|
||||
});
|
||||
request
|
||||
.page(body, shell)
|
||||
.title("slhx Architecture")
|
||||
@@ -214,6 +245,14 @@ async fn runtime() -> impl IntoResponse {
|
||||
runtime_js()
|
||||
}
|
||||
|
||||
async fn app_css() -> impl IntoResponse {
|
||||
([("content-type", "text/css; charset=utf-8")], include_str!("../templates/app_shell.css"))
|
||||
}
|
||||
|
||||
async fn control_center_css() -> impl IntoResponse {
|
||||
([("content-type", "text/css; charset=utf-8")], include_str!("../templates/control_center.css"))
|
||||
}
|
||||
|
||||
async fn interact(
|
||||
State(state): State<Arc<Shared>>,
|
||||
form: InteractionForm,
|
||||
@@ -366,10 +405,10 @@ fn update_work(demo: &mut DemoState, id: Option<&str>, update: impl FnOnce(&mut
|
||||
|
||||
fn demo_effects(demo: &DemoState, notice: &'static str) -> impl IntoEffect {
|
||||
(
|
||||
ui::control_center::slots::hero_metrics.html(SafeHtml::trusted(render_hero(demo))),
|
||||
ui::control_center::slots::board.html(SafeHtml::trusted(render_board(demo))),
|
||||
ui::control_center::slots::hero_metrics.html(render_hero(demo)),
|
||||
ui::control_center::slots::board.html(render_board(demo)),
|
||||
ui::control_center::slots::activity.html(render_activity(demo)),
|
||||
ui::control_center::slots::inspector.html(SafeHtml::trusted(render_inspector(demo))),
|
||||
ui::control_center::slots::inspector.html(render_inspector(demo)),
|
||||
ui::control_center::slots::notice.text(notice),
|
||||
ui::control_center::forms::launch_work.clear("title"),
|
||||
)
|
||||
@@ -381,104 +420,34 @@ fn parse_lane(value: Option<&str>) -> usize {
|
||||
}
|
||||
|
||||
fn page_html(demo: &DemoState) -> String {
|
||||
ui::control_center::lower_html(include_str!("../templates/control_center.heml"))
|
||||
.replace("__HERO__", &render_hero(demo))
|
||||
.replace("__BOARD__", &render_board(demo))
|
||||
.replace("__INSPECTOR__", &render_inspector(demo))
|
||||
.replace("__ACTIVITY__", render_activity(demo).as_str())
|
||||
render_control_center(ControlCenter {
|
||||
hero: render_hero(demo),
|
||||
board: render_board(demo),
|
||||
inspector: render_inspector(demo),
|
||||
activity: render_activity(demo),
|
||||
})
|
||||
}
|
||||
|
||||
fn shell(body: String) -> String {
|
||||
let control_css = include_str!("../templates/control_center.css");
|
||||
format!(
|
||||
r#"<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>slhx Techdemo</title>
|
||||
<script src="/slhx.js" defer></script>
|
||||
<style>
|
||||
:root {{ color-scheme: dark; --bg:#070814; --panel:rgba(255,255,255,.08); --line:rgba(255,255,255,.16); --text:#f7f7ff; --muted:#aeb3d8; --hot:#ff4fd8; --cyan:#44e7ff; --lime:#b8ff5a; --amber:#ffd166; }}
|
||||
* {{ box-sizing:border-box; min-width:0; }}
|
||||
html {{ font-feature-settings:"cv02","cv03","cv04","ss01"; text-rendering:geometricPrecision; }}
|
||||
body {{ margin:0; min-height:100vh; font-family:Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif; color:var(--text); background: radial-gradient(circle at 12% 8%, rgba(68,231,255,.28), transparent 28rem), radial-gradient(circle at 82% 4%, rgba(255,79,216,.22), transparent 24rem), radial-gradient(circle at 70% 70%, rgba(184,255,90,.08), transparent 30rem), linear-gradient(135deg, #070814 0%, #111534 55%, #080916 100%); overflow-x:hidden; }}
|
||||
body::before {{ content:""; position:fixed; inset:0; pointer-events:none; background-image:linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size:42px 42px; mask-image:linear-gradient(to bottom, black, transparent); }}
|
||||
main {{ width:min(1180px, calc(100vw - 32px)); margin:0 auto; padding:38px 0 56px; }}
|
||||
.hero-shell {{ display:grid; grid-template-columns:1.35fr .85fr; gap:22px; align-items:stretch; }}
|
||||
.hero-copy, .hero-panel, .command-card, .board-card, .glass-card, .topology {{ border:1px solid var(--line); background:linear-gradient(145deg, rgba(255,255,255,.14), rgba(255,255,255,.055)); box-shadow:0 24px 90px rgba(0,0,0,.36), inset 0 1px 0 rgba(255,255,255,.12); backdrop-filter: blur(22px) saturate(145%); border-radius:28px; }}
|
||||
.hero-copy {{ padding:34px; overflow:hidden; position:relative; }}
|
||||
.hero-copy::after {{ content:"EffectBatch"; position:absolute; right:-18px; bottom:8px; font-size:86px; font-weight:900; color:rgba(255,255,255,.045); }}
|
||||
.eyebrow {{ color:var(--cyan); text-transform:uppercase; letter-spacing:.2em; font-weight:800; font-size:12px; }}
|
||||
h1 {{ font-size:clamp(42px, 7vw, 84px); line-height:.88; letter-spacing:-.075em; margin:12px 0 18px; max-width:900px; text-wrap:balance; overflow-wrap:anywhere; }}
|
||||
h2 {{ margin:0 0 16px; letter-spacing:-.035em; }}
|
||||
.lede {{ color:var(--muted); font-size:19px; line-height:1.55; max-width:720px; }}
|
||||
.hero-panel {{ padding:24px; }}
|
||||
.metrics {{ display:grid; gap:14px; }}
|
||||
.metric {{ border:1px solid var(--line); border-radius:22px; padding:18px; background:rgba(0,0,0,.18); }}
|
||||
.metric strong {{ display:block; font-size:34px; line-height:1; }}
|
||||
.metric span {{ color:var(--muted); font-size:13px; }}
|
||||
.topology {{ display:flex; gap:10px; margin:18px 0; padding:10px; }}
|
||||
.topology a {{ color:var(--text); text-decoration:none; padding:12px 16px; border-radius:18px; background:rgba(255,255,255,.08); }}
|
||||
.workspace {{ display:grid; grid-template-columns:360px 1fr; gap:18px; }}
|
||||
.command-card, .board-card, .glass-card {{ padding:22px; }}
|
||||
label {{ display:grid; gap:8px; color:var(--muted); font-size:13px; margin:12px 0; }}
|
||||
input, select, button {{ width:100%; border:1px solid var(--line); border-radius:16px; color:var(--text); background:rgba(2,4,18,.55); padding:13px 14px; font:inherit; outline:none; transition:transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease; }}
|
||||
input:focus, select:focus {{ border-color:rgba(68,231,255,.75); box-shadow:0 0 0 4px rgba(68,231,255,.11); }}
|
||||
button {{ cursor:pointer; font-weight:800; background:linear-gradient(135deg, rgba(68,231,255,.25), rgba(255,79,216,.22)); }}
|
||||
.primary-action {{ background:linear-gradient(135deg, var(--cyan), var(--hot)); color:#050610; border:0; box-shadow:0 16px 42px rgba(68,231,255,.24); }}
|
||||
button:hover {{ border-color:rgba(68,231,255,.7); transform:translateY(-1px); box-shadow:0 14px 40px rgba(0,0,0,.24); }}
|
||||
.quick-actions {{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:12px; }}
|
||||
.notice {{ color:var(--lime); min-height:1.4em; }}
|
||||
.section-heading {{ display:flex; justify-content:space-between; gap:12px; color:var(--muted); margin-bottom:14px; }}
|
||||
.section-heading strong {{ color:var(--cyan); }}
|
||||
.lanes {{ display:grid; grid-template-columns:repeat(3, minmax(220px, 1fr)); gap:14px; align-items:start; }}
|
||||
.work-card header {{ display:flex; justify-content:space-between; gap:10px; align-items:start; }}
|
||||
.pill {{ display:inline-flex; border:1px solid var(--line); border-radius:999px; padding:4px 9px; font-size:12px; color:var(--lime); }}
|
||||
.impact {{ height:7px; border-radius:999px; background:rgba(255,255,255,.12); overflow:hidden; margin:12px 0; }}
|
||||
.impact i {{ display:block; height:100%; background:linear-gradient(90deg,var(--cyan),var(--hot)); }}
|
||||
.card-actions {{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:8px; }}
|
||||
.card-actions button {{ padding:9px 10px; font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }}
|
||||
.insight-grid {{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:18px; margin-top:18px; }}
|
||||
.glass-card {{ min-height:220px; }}
|
||||
.glow {{ box-shadow:0 0 0 1px rgba(184,255,90,.12), 0 24px 90px rgba(184,255,90,.08); }}
|
||||
.activity {{ display:grid; gap:10px; padding:0; margin:0; list-style:none; }}
|
||||
.activity li, .inspector-row, .live-row {{ border:1px solid var(--line); border-radius:16px; padding:12px; background:rgba(0,0,0,.18); color:var(--muted); overflow-wrap:anywhere; }}
|
||||
.inspector-hero {{ border:1px solid rgba(68,231,255,.35); border-radius:20px; padding:16px; margin-bottom:12px; background:linear-gradient(135deg, rgba(68,231,255,.15), rgba(255,79,216,.1)); }}
|
||||
.inspector-hero span {{ display:block; color:var(--cyan); font-size:12px; text-transform:uppercase; letter-spacing:.14em; font-weight:900; }}
|
||||
.inspector-hero strong {{ display:block; font-size:22px; letter-spacing:-.035em; margin-top:8px; overflow-wrap:anywhere; }}
|
||||
.inspector-hero em {{ display:block; color:var(--muted); font-style:normal; margin-top:6px; }}
|
||||
.inspector-row b {{ color:var(--text); }}
|
||||
.live-row strong {{ color:var(--lime); }}
|
||||
code {{ color:var(--cyan); }}
|
||||
@media (max-width: 920px) {{ .hero-shell,.workspace,.insight-grid {{ grid-template-columns:1fr; }} .lanes {{ grid-template-columns:1fr; }} }}
|
||||
</style>
|
||||
<style>{control_css}</style>
|
||||
</head>
|
||||
<body>{body}</body>
|
||||
</html>"#
|
||||
)
|
||||
// req: html_safety/002 req: view/001
|
||||
render_template(&AppShell { body: SafeHtml::trusted(body) })
|
||||
}
|
||||
|
||||
fn render_hero(demo: &DemoState) -> String {
|
||||
fn render_hero(demo: &DemoState) -> SafeHtml {
|
||||
// req: html_safety/002 req: view/001
|
||||
let shipped = demo.work.iter().filter(|item| item.stage == Stage::Shipped).count();
|
||||
let active = demo.work.iter().filter(|item| item.stage == Stage::Active).count();
|
||||
let impact: u64 = demo.work.iter().map(|item| item.impact as u64).sum();
|
||||
format!(
|
||||
r#"<div class="metrics">
|
||||
<div class="metric"><strong>{}</strong><span>generated resources on this page</span></div>
|
||||
<div class="metric"><strong>{}</strong><span>active typed work items</span></div>
|
||||
<div class="metric"><strong>{}</strong><span>shipped without app JS</span></div>
|
||||
<div class="metric"><strong>{}</strong><span>aggregate impact score</span></div>
|
||||
</div>"#,
|
||||
13,
|
||||
active,
|
||||
shipped,
|
||||
impact,
|
||||
)
|
||||
render_html(&HeroMetrics {
|
||||
resource_count: 13,
|
||||
active_count: active,
|
||||
shipped_count: shipped,
|
||||
impact_score: impact,
|
||||
})
|
||||
}
|
||||
|
||||
fn render_board(demo: &DemoState) -> String {
|
||||
fn render_board(demo: &DemoState) -> SafeHtml {
|
||||
// req: html_safety/002 req: view/001
|
||||
let lanes = LANES
|
||||
.iter()
|
||||
.enumerate()
|
||||
@@ -497,12 +466,7 @@ fn render_board(demo: &DemoState) -> String {
|
||||
})
|
||||
.collect::<Vec<_>>();
|
||||
|
||||
let mut out = String::from("<div class=\"lanes\">");
|
||||
for lane in lanes {
|
||||
out.push_str(&render_template(&lane));
|
||||
}
|
||||
out.push_str("</div>");
|
||||
out
|
||||
render_html(&BoardLanes { lanes })
|
||||
}
|
||||
|
||||
fn issue_card(item: &WorkItem, selected: bool) -> IssueCard {
|
||||
@@ -532,7 +496,8 @@ fn render_activity(demo: &DemoState) -> SafeHtml {
|
||||
})
|
||||
}
|
||||
|
||||
fn render_inspector(demo: &DemoState) -> String {
|
||||
fn render_inspector(demo: &DemoState) -> SafeHtml {
|
||||
// req: html_safety/002 req: view/001
|
||||
let selected = demo
|
||||
.selected_id
|
||||
.and_then(|id| demo.work.iter().find(|item| item.id == id));
|
||||
@@ -547,7 +512,7 @@ fn render_inspector(demo: &DemoState) -> String {
|
||||
})
|
||||
},
|
||||
);
|
||||
render_template(&InspectorPanel {
|
||||
render_html(&InspectorPanel {
|
||||
selected,
|
||||
spotlight: demo.spotlight.clone(),
|
||||
})
|
||||
@@ -578,6 +543,11 @@ fn architecture_activity() -> SafeHtml {
|
||||
render_html(&ArchitectureActivity)
|
||||
}
|
||||
|
||||
fn render_control_center(page: ControlCenter) -> String {
|
||||
// req: html_safety/002 req: view/001
|
||||
ui::control_center::lower_html(render_template(&page))
|
||||
}
|
||||
|
||||
fn render_template(template: &impl Hemplate) -> String {
|
||||
template.render().expect("techdemo hemplate partial renders")
|
||||
}
|
||||
@@ -595,6 +565,64 @@ mod tests {
|
||||
Selector::parse(value).expect("test selector parses")
|
||||
}
|
||||
|
||||
// req: html_safety/002 req: view/001 req: test/005
|
||||
#[test]
|
||||
fn shell_is_composed_by_a_hemplate_view() {
|
||||
let html = shell(page_html(&DemoState::default()));
|
||||
let document = Html::parse_document(&html);
|
||||
assert_eq!(
|
||||
document
|
||||
.select(&selector("title"))
|
||||
.next()
|
||||
.map(|title| title.text().collect::<String>()),
|
||||
Some("slhx Techdemo".to_owned())
|
||||
);
|
||||
assert_eq!(document.select(&selector("script[src=\"/slhx.js\"]")).count(), 1);
|
||||
assert_eq!(document.select(&selector("link[rel=\"stylesheet\"]")).count(), 2);
|
||||
assert_eq!(document.select(&selector("link[href=\"/app.css\"]")).count(), 1);
|
||||
assert_eq!(document.select(&selector("link[href=\"/control_center.css\"]")).count(), 1);
|
||||
assert_eq!(document.select(&selector("main[data-slhx-root=\"techdemo\"]")).count(), 1);
|
||||
assert!(!html.contains("{+="));
|
||||
}
|
||||
|
||||
// req: html_safety/002 req: view/001 req: test/005
|
||||
#[test]
|
||||
fn control_center_page_is_composed_by_hemplate_not_placeholders() {
|
||||
let html = page_html(&DemoState::default());
|
||||
assert!(!html.contains("__HERO__"));
|
||||
assert!(!html.contains("__BOARD__"));
|
||||
assert!(!html.contains("__INSPECTOR__"));
|
||||
assert!(!html.contains("__ACTIVITY__"));
|
||||
|
||||
let document = Html::parse_fragment(&html);
|
||||
assert_eq!(document.select(&selector("[data-slhx-root=\"techdemo\"]")).count(), 1);
|
||||
assert!(document.select(&selector("[data-sid]")).count() >= 7);
|
||||
assert!(document.select(&selector("[data-hid]")).count() >= 7);
|
||||
assert_eq!(document.select(&selector(".hero-panel .metrics")).count(), 1);
|
||||
assert_eq!(document.select(&selector(".board-card .lanes")).count(), 1);
|
||||
assert_eq!(document.select(&selector(".glass-card .inspector-hero")).count(), 1);
|
||||
assert_eq!(document.select(&selector(".glass-card ol.activity")).count(), 1);
|
||||
}
|
||||
|
||||
// req: html_safety/002 req: view/001 req: test/005
|
||||
#[test]
|
||||
fn hero_metrics_are_rendered_by_a_hemplate_view() {
|
||||
let html = render_hero(&DemoState::default());
|
||||
let document = Html::parse_fragment(html.as_str());
|
||||
let metrics = document.select(&selector(".metrics > .metric")).collect::<Vec<_>>();
|
||||
assert_eq!(metrics.len(), 4);
|
||||
assert_eq!(
|
||||
metrics[0]
|
||||
.select(&selector("span"))
|
||||
.next()
|
||||
.map(|span| span.text().collect::<String>()),
|
||||
Some("generated resources on this page".to_owned())
|
||||
);
|
||||
assert!(metrics
|
||||
.iter()
|
||||
.any(|metric| metric.text().collect::<String>().contains("aggregate impact score")));
|
||||
}
|
||||
|
||||
// req: style/001 req: style/002 req: style/003 req: test/005
|
||||
#[test]
|
||||
fn generated_css_class_flows_through_hemplate_dynamic_attribute() {
|
||||
@@ -603,7 +631,8 @@ mod tests {
|
||||
assert_eq!(ui::control_center::classes::work_card.as_str(), "work-card");
|
||||
assert_eq!(ui::control_center::classes::is_selected.as_str(), "is-selected");
|
||||
|
||||
let document = Html::parse_fragment(&board);
|
||||
let document = Html::parse_fragment(board.as_str());
|
||||
assert_eq!(document.select(&selector(".lanes > section.lane")).count(), 3);
|
||||
let lane = document
|
||||
.select(&selector(r#"section.lane[data-lane="compiler"]"#))
|
||||
.next()
|
||||
@@ -617,6 +646,27 @@ mod tests {
|
||||
assert_eq!(selected_card.value().attr("class"), Some("work-card is-selected"));
|
||||
}
|
||||
|
||||
// req: html_safety/002 req: view/001 req: test/005
|
||||
#[test]
|
||||
fn inspector_payload_is_rendered_by_a_hemplate_view() {
|
||||
let html = render_inspector(&DemoState::default());
|
||||
let document = Html::parse_fragment(html.as_str());
|
||||
let hero = document
|
||||
.select(&selector(".inspector-hero"))
|
||||
.next()
|
||||
.expect("selected inspector hero renders");
|
||||
assert_eq!(
|
||||
hero.select(&selector("span"))
|
||||
.next()
|
||||
.map(|span| span.text().collect::<String>()),
|
||||
Some("Selected issue".to_owned())
|
||||
);
|
||||
assert_eq!(document.select(&selector(".inspector-row")).count(), 3);
|
||||
assert!(document
|
||||
.select(&selector("code"))
|
||||
.any(|code| code.text().collect::<String>().contains("EffectBatch")));
|
||||
}
|
||||
|
||||
// req: html_safety/002 req: view/001 req: test/005
|
||||
#[test]
|
||||
fn live_feed_payload_is_rendered_by_a_hemplate_view() {
|
||||
|
||||
@@ -0,0 +1,53 @@
|
||||
:root { color-scheme: dark; --bg:#070814; --panel:rgba(255,255,255,.08); --line:rgba(255,255,255,.16); --text:#f7f7ff; --muted:#aeb3d8; --hot:#ff4fd8; --cyan:#44e7ff; --lime:#b8ff5a; --amber:#ffd166; }
|
||||
* { box-sizing:border-box; min-width:0; }
|
||||
html { font-feature-settings:"cv02","cv03","cv04","ss01"; text-rendering:geometricPrecision; }
|
||||
body { margin:0; min-height:100vh; font-family:Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif; color:var(--text); background: radial-gradient(circle at 12% 8%, rgba(68,231,255,.28), transparent 28rem), radial-gradient(circle at 82% 4%, rgba(255,79,216,.22), transparent 24rem), radial-gradient(circle at 70% 70%, rgba(184,255,90,.08), transparent 30rem), linear-gradient(135deg, #070814 0%, #111534 55%, #080916 100%); overflow-x:hidden; }
|
||||
body::before { content:""; position:fixed; inset:0; pointer-events:none; background-image:linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size:42px 42px; mask-image:linear-gradient(to bottom, black, transparent); }
|
||||
main { width:min(1180px, calc(100vw - 32px)); margin:0 auto; padding:38px 0 56px; }
|
||||
.hero-shell { display:grid; grid-template-columns:1.35fr .85fr; gap:22px; align-items:stretch; }
|
||||
.hero-copy, .hero-panel, .command-card, .board-card, .glass-card, .topology { border:1px solid var(--line); background:linear-gradient(145deg, rgba(255,255,255,.14), rgba(255,255,255,.055)); box-shadow:0 24px 90px rgba(0,0,0,.36), inset 0 1px 0 rgba(255,255,255,.12); backdrop-filter: blur(22px) saturate(145%); border-radius:28px; }
|
||||
.hero-copy { padding:34px; overflow:hidden; position:relative; }
|
||||
.hero-copy::after { content:"EffectBatch"; position:absolute; right:-18px; bottom:8px; font-size:86px; font-weight:900; color:rgba(255,255,255,.045); }
|
||||
.eyebrow { color:var(--cyan); text-transform:uppercase; letter-spacing:.2em; font-weight:800; font-size:12px; }
|
||||
h1 { font-size:clamp(42px, 7vw, 84px); line-height:.88; letter-spacing:-.075em; margin:12px 0 18px; max-width:900px; text-wrap:balance; overflow-wrap:anywhere; }
|
||||
h2 { margin:0 0 16px; letter-spacing:-.035em; }
|
||||
.lede { color:var(--muted); font-size:19px; line-height:1.55; max-width:720px; }
|
||||
.hero-panel { padding:24px; }
|
||||
.metrics { display:grid; gap:14px; }
|
||||
.metric { border:1px solid var(--line); border-radius:22px; padding:18px; background:rgba(0,0,0,.18); }
|
||||
.metric strong { display:block; font-size:34px; line-height:1; }
|
||||
.metric span { color:var(--muted); font-size:13px; }
|
||||
.topology { display:flex; gap:10px; margin:18px 0; padding:10px; }
|
||||
.topology a { color:var(--text); text-decoration:none; padding:12px 16px; border-radius:18px; background:rgba(255,255,255,.08); }
|
||||
.workspace { display:grid; grid-template-columns:360px 1fr; gap:18px; }
|
||||
.command-card, .board-card, .glass-card { padding:22px; }
|
||||
label { display:grid; gap:8px; color:var(--muted); font-size:13px; margin:12px 0; }
|
||||
input, select, button { width:100%; border:1px solid var(--line); border-radius:16px; color:var(--text); background:rgba(2,4,18,.55); padding:13px 14px; font:inherit; outline:none; transition:transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease; }
|
||||
input:focus, select:focus { border-color:rgba(68,231,255,.75); box-shadow:0 0 0 4px rgba(68,231,255,.11); }
|
||||
button { cursor:pointer; font-weight:800; background:linear-gradient(135deg, rgba(68,231,255,.25), rgba(255,79,216,.22)); }
|
||||
.primary-action { background:linear-gradient(135deg, var(--cyan), var(--hot)); color:#050610; border:0; box-shadow:0 16px 42px rgba(68,231,255,.24); }
|
||||
button:hover { border-color:rgba(68,231,255,.7); transform:translateY(-1px); box-shadow:0 14px 40px rgba(0,0,0,.24); }
|
||||
.quick-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:12px; }
|
||||
.notice { color:var(--lime); min-height:1.4em; }
|
||||
.section-heading { display:flex; justify-content:space-between; gap:12px; color:var(--muted); margin-bottom:14px; }
|
||||
.section-heading strong { color:var(--cyan); }
|
||||
.lanes { display:grid; grid-template-columns:repeat(3, minmax(220px, 1fr)); gap:14px; align-items:start; }
|
||||
.work-card header { display:flex; justify-content:space-between; gap:10px; align-items:start; }
|
||||
.pill { display:inline-flex; border:1px solid var(--line); border-radius:999px; padding:4px 9px; font-size:12px; color:var(--lime); }
|
||||
.impact { height:7px; border-radius:999px; background:rgba(255,255,255,.12); overflow:hidden; margin:12px 0; }
|
||||
.impact i { display:block; height:100%; background:linear-gradient(90deg,var(--cyan),var(--hot)); }
|
||||
.card-actions { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:8px; }
|
||||
.card-actions button { padding:9px 10px; font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
|
||||
.insight-grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:18px; margin-top:18px; }
|
||||
.glass-card { min-height:220px; }
|
||||
.glow { box-shadow:0 0 0 1px rgba(184,255,90,.12), 0 24px 90px rgba(184,255,90,.08); }
|
||||
.activity { display:grid; gap:10px; padding:0; margin:0; list-style:none; }
|
||||
.activity li, .inspector-row, .live-row { border:1px solid var(--line); border-radius:16px; padding:12px; background:rgba(0,0,0,.18); color:var(--muted); overflow-wrap:anywhere; }
|
||||
.inspector-hero { border:1px solid rgba(68,231,255,.35); border-radius:20px; padding:16px; margin-bottom:12px; background:linear-gradient(135deg, rgba(68,231,255,.15), rgba(255,79,216,.1)); }
|
||||
.inspector-hero span { display:block; color:var(--cyan); font-size:12px; text-transform:uppercase; letter-spacing:.14em; font-weight:900; }
|
||||
.inspector-hero strong { display:block; font-size:22px; letter-spacing:-.035em; margin-top:8px; overflow-wrap:anywhere; }
|
||||
.inspector-hero em { display:block; color:var(--muted); font-style:normal; margin-top:6px; }
|
||||
.inspector-row b { color:var(--text); }
|
||||
.live-row strong { color:var(--lime); }
|
||||
code { color:var(--cyan); }
|
||||
@media (max-width: 920px) { .hero-shell,.workspace,.insight-grid { grid-template-columns:1fr; } .lanes { grid-template-columns:1fr; } }
|
||||
@@ -0,0 +1,12 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>slhx Techdemo</title>
|
||||
<script src="/slhx.js" defer></script>
|
||||
<link rel="stylesheet" href="/app.css">
|
||||
<link rel="stylesheet" href="/control_center.css">
|
||||
</head>
|
||||
<body>{+= self.body =+}</body>
|
||||
</html>
|
||||
@@ -5,7 +5,7 @@
|
||||
<h1>A Linear-class work system without a frontend framework.</h1>
|
||||
<p class="lede">Create, inspect, advance, and stream work through native HTML, generated typed resources, and compact EffectBatches. The UI feels app-grade; the model stays server-owned and boring.</p>
|
||||
</div>
|
||||
<div class="hero-panel" data-slhx-slot="hero_metrics">__HERO__</div>
|
||||
<div class="hero-panel" data-slhx-slot="hero_metrics">{+= self.hero =+}</div>
|
||||
</section>
|
||||
|
||||
<nav class="topology" data-slhx-slot="nav">
|
||||
@@ -41,18 +41,18 @@
|
||||
<span>Generated slots + keyed cards</span>
|
||||
<strong>generated resources, no selectors</strong>
|
||||
</div>
|
||||
<div data-slhx-slot="board">__BOARD__</div>
|
||||
<div data-slhx-slot="board">{+= self.board =+}</div>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<section class="insight-grid">
|
||||
<article class="glass-card">
|
||||
<h2>Effect inspector</h2>
|
||||
<div data-slhx-slot="inspector">__INSPECTOR__</div>
|
||||
<div data-slhx-slot="inspector">{+= self.inspector =+}</div>
|
||||
</article>
|
||||
<article class="glass-card">
|
||||
<h2>Activity stream</h2>
|
||||
<div data-slhx-slot="activity">__ACTIVITY__</div>
|
||||
<div data-slhx-slot="activity">{+= self.activity =+}</div>
|
||||
</article>
|
||||
<article class="glass-card glow">
|
||||
<h2>Server push</h2>
|
||||
|
||||
@@ -0,0 +1,5 @@
|
||||
<div class="lanes">
|
||||
<template h-for="lane in &self.lanes">
|
||||
{+ lane +}
|
||||
</template>
|
||||
</div>
|
||||
@@ -0,0 +1,6 @@
|
||||
<div class="metrics">
|
||||
<div class="metric"><strong>{+ self.resource_count +}</strong><span>generated resources on this page</span></div>
|
||||
<div class="metric"><strong>{+ self.active_count +}</strong><span>active typed work items</span></div>
|
||||
<div class="metric"><strong>{+ self.shipped_count +}</strong><span>shipped without app JS</span></div>
|
||||
<div class="metric"><strong>{+ self.impact_score +}</strong><span>aggregate impact score</span></div>
|
||||
</div>
|
||||
@@ -143,6 +143,18 @@ impl SafeHtml {
|
||||
}
|
||||
}
|
||||
|
||||
impl AsRef<str> for SafeHtml {
|
||||
fn as_ref(&self) -> &str {
|
||||
self.as_str()
|
||||
}
|
||||
}
|
||||
|
||||
impl core::fmt::Display for SafeHtml {
|
||||
fn fmt(&self, f: &mut core::fmt::Formatter<'_>) -> core::fmt::Result {
|
||||
f.write_str(self.as_str())
|
||||
}
|
||||
}
|
||||
|
||||
/// A generated, checked CSS class token.
|
||||
///
|
||||
/// Plain CSS/SCSS owns appearance; slhx only gives Rust a typed reference to
|
||||
|
||||
Reference in New Issue
Block a user