From bf0d068b4b4d4fe728dc7e800b16b024ad791f98 Mon Sep 17 00:00:00 2001 From: Yves Biener Date: Wed, 29 Oct 2025 16:30:09 +0100 Subject: [PATCH] feat: embedded content incl. rendering; simple layout with nav-bar --- build.zig | 12 ++++ src/main.zig | 193 +++++++++++++++++---------------------------------- 2 files changed, 77 insertions(+), 128 deletions(-) diff --git a/build.zig b/build.zig index 8b537e8..8b70755 100644 --- a/build.zig +++ b/build.zig @@ -17,6 +17,18 @@ pub fn build(b: *std.Build) void { .optimize = optimize, .imports = &.{ .{ .name = "zterm", .module = zterm.module("zterm") }, + .{ + .name = "about", + .module = b.createModule(.{ + .root_source_file = b.path("doc/about.md"), + }), + }, + .{ + .name = "blog", + .module = b.createModule(.{ + .root_source_file = b.path("doc/blog.md"), + }), + }, }, }), }); diff --git a/src/main.zig b/src/main.zig index c7b7c77..0b623b4 100644 --- a/src/main.zig +++ b/src/main.zig @@ -1,29 +1,3 @@ -const QuitText = struct { - const text = "Press ctrl+c to quit."; - - pub fn element(this: *@This()) App.Element { - return .{ .ptr = this, .vtable = &.{ .content = content } }; - } - - fn content(ctx: *anyopaque, _: *const App.Model, cells: []zterm.Cell, size: zterm.Point) !void { - _ = ctx; - assert(cells.len == @as(usize, size.x) * @as(usize, size.y)); - - const row = 2; - const col = size.x / 2 -| (text.len / 2); - const anchor = (row * size.x) + col; - - for (text, 0..) |cp, idx| { - cells[anchor + idx].style.fg = .white; - cells[anchor + idx].style.bg = .black; - cells[anchor + idx].cp = cp; - - // NOTE do not write over the contents of this `Container`'s `Size` - if (anchor + idx == cells.len - 1) break; - } - } -}; - pub fn main() !void { errdefer |err| log.err("Application Error: {any}", .{err}); @@ -36,124 +10,84 @@ pub fn main() !void { var renderer = zterm.Renderer.Buffered.init(allocator); defer renderer.deinit(); - var progress_percent: u8 = 0; - var quit_text: QuitText = .{}; - var container = try App.Container.init(allocator, .{ - .layout = .{ .padding = .all(5), .direction = .vertical }, - }, quit_text.element()); + .layout = .{ + .padding = .horizontal(2), + .direction = .vertical, + .separator = .{ .enabled = true }, + }, + }, .{}); defer container.deinit(); + var header: App.Container = try .init(allocator, .{ + .size = .{ + .dim = .{ .y = 1 }, + .grow = .horizontal, + }, + }, .{}); + var navigation: App.Container = try .init(allocator, .{ + .layout = .{ + .separator = .{ .enabled = true }, + }, + }, .{}); + // about navigation button { - var progress: App.Progress(.progress) = .init(&app.queue, .{ - .percent = .{ - .enabled = true, - .alignment = .left, + var button: App.Button(.about) = .init(&app.queue, .init(.default, "about")); + try navigation.append(try .init(allocator, .{ + .size = .{ + .dim = .{ .x = 5 + 2 }, + .grow = .vertical, }, - .fg = .blue, - .bg = .grey, - }); - try container.append(try App.Container.init(allocator, .{}, progress.element())); + }, button.element())); } + // blog navigation button { - var progress: App.Progress(.progress) = .init(&app.queue, .{ - .percent = .{ - .enabled = true, - .alignment = .middle, // default + var button: App.Button(.blog) = .init(&app.queue, .init(.default, "blog")); + try navigation.append(try .init(allocator, .{ + .size = .{ + .dim = .{ .x = 4 + 2 }, + .grow = .vertical, }, - .fg = .red, - .bg = .grey, - }); - try container.append(try App.Container.init(allocator, .{}, progress.element())); - } - { - var progress: App.Progress(.progress) = .init(&app.queue, .{ - .percent = .{ - .enabled = true, - .alignment = .right, - }, - .fg = .green, - .bg = .grey, - }); - try container.append(try App.Container.init(allocator, .{}, progress.element())); - } - { - var progress: App.Progress(.progress) = .init(&app.queue, .{ - .percent = .{ .enabled = false }, - .fg = .default, - .bg = .grey, - }); - try container.append(try App.Container.init(allocator, .{}, progress.element())); + }, button.element())); } + try header.append(navigation); + try container.append(header); + var content: Content = .init(allocator); + try container.append(try .init(allocator, .{}, content.element())); + try app.start(); defer app.stop() catch |err| log.err("Failed to stop application: {any}", .{err}); - var framerate: u64 = 60; - var tick_ms: u64 = @divFloor(time.ms_per_s, framerate); - var next_frame_ms: u64 = 0; - - var increase_progress: u64 = 10; - - // Continuous drawing - // draw loop - draw: while (true) { - const now_ms: u64 = @intCast(time.milliTimestamp()); - if (now_ms >= next_frame_ms) { - next_frame_ms = now_ms + tick_ms; - } else { - std.Thread.sleep((next_frame_ms - now_ms) * time.ns_per_ms); - next_frame_ms += tick_ms; - } - - // NOTE time based progress increasion - increase_progress -= 1; - if (increase_progress == 0) { - increase_progress = 10; - progress_percent += 1; - if (progress_percent > 100) progress_percent = 0; - app.postEvent(.{ .progress = progress_percent }); - } - - const len = blk: { - app.queue.lock(); - defer app.queue.unlock(); - break :blk app.queue.len(); - }; - + // event loop + while (true) { // handle events - for (0..len) |_| { - const event = app.queue.drain() orelse break; - log.debug("handling event: {s}", .{@tagName(event)}); - // pre event handling - switch (event) { - .key => |key| { - if (key.eql(.{ .cp = 'c', .mod = .{ .ctrl = true } })) app.quit(); - }, - .err => |err| log.err("Received {s} with message: {s}", .{ @errorName(err.err), err.msg }), - .focus => |b| { - // NOTE reduce framerate in case the window is not focused and restore again when focused - framerate = if (b) 60 else 15; - tick_ms = @divFloor(time.ms_per_s, framerate); - }, - else => {}, - } + const event = app.nextEvent(); - container.handle(&app.model, event) catch |err| app.postEvent(.{ - .err = .{ - .err = err, - .msg = "Container Event handling failed", - }, - }); + // pre event handling + switch (event) { + .key => |key| { + if (key.eql(.{ .cp = 'c', .mod = .{ .ctrl = true } })) app.quit(); + }, + .err => |err| log.err("Received {s} with message: {s}", .{ @errorName(err.err), err.msg }), + else => {}, + } - // post event handling - switch (event) { - .quit => break :draw, - else => {}, - } + container.handle(&app.model, event) catch |err| app.postEvent(.{ + .err = .{ + .err = err, + .msg = "Container Event handling failed", + }, + }); + + // post event handling + switch (event) { + .quit => break, + else => {}, } container.resize(try renderer.resize()); container.reposition(.{}); + try renderer.render(@TypeOf(container), &container, App.Model, &app.model); try renderer.flush(); } @@ -163,16 +97,19 @@ pub const panic = App.panic_handler; const log = std.log.scoped(.default); const std = @import("std"); -const time = std.time; const assert = std.debug.assert; const zterm = @import("zterm"); const App = zterm.App( - struct {}, + Model, union(enum) { - progress: u8, + about, + blog, }, ); +const Model = @import("model.zig"); +const Content = @import("content.zig").Content(App); + test { std.testing.refAllDeclsRecursive(@This()); }