mod: bump version to 0.0.2

LICENSE

@@ -0,0 +1,10 @@
+MIT License
+
+Copyright (c) 2025 Yves Biener
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+

README.md

@@ -10,11 +10,3 @@ It contains information about me and my projects as well as blog entries about s
 ## zterm
 
 This tui application also serves as an example implementation of the [zterm](https://gitea.yves-biener.de/yves-biener/zterm) library.
-
----
-
-## Open tasks
-
-- [ ] Improve navigation
-- [ ] Have clickable/navigatable links inside of the tui application
-- [ ] Launch simple http server alongside tui application

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"),
+                    }),
+                },
             },
         }),
     });

build.zig.zon

@@ -1,36 +1,9 @@
 .{
-    // This is the default name used by packages depending on this one. For
-    // example, when a user runs `zig fetch --save <url>`, this field is used
-    // as the key in the `dependencies` table. Although the user can choose a
-    // different name, most users will stick with this provided value.
-    //
-    // It is redundant to include "zig" in this name because it is already
-    // within the Zig package namespace.
     .name = .tui_website,
     // This is a [Semantic Version](https://semver.org/).
-    // In a future version of Zig it will be used for package deduplication.
-    .version = "0.0.0",
-    // Together with name, this represents a globally unique package
-    // identifier. This field is generated by the Zig toolchain when the
-    // package is first created, and then *never changes*. This allows
-    // unambiguous detection of one package being an updated version of
-    // another.
-    //
-    // When forking a Zig project, this id should be regenerated (delete the
-    // field and run `zig build`) if the upstream project is still maintained.
-    // Otherwise, the fork is *hostile*, attempting to take control over the
-    // original project's identity. Thus it is recommended to leave the comment
-    // on the following line intact, so that it shows up in code reviews that
-    // modify the field.
+    .version = "0.0.2",
     .fingerprint = 0x93d98a4d9d000e9c, // Changing this has security and trust implications.
-    // Tracks the earliest Zig version that the package considers to be a
-    // supported use case.
     .minimum_zig_version = "0.16.0-dev.463+f624191f9",
-    // This field is optional.
-    // Each dependency must either provide a `url` and `hash`, or a `path`.
-    // `zig build --fetch` can be used to fetch all dependencies of a package, recursively.
-    // Once all dependencies are fetched, `zig build` no longer requires
-    // internet connectivity.
     .dependencies = .{
         .zterm = .{
             .url = "git+https://gitea.yves-biener.de/yves-biener/zterm#89aeac1e968f1390bd945f734aac8612efbab179",
@@ -41,8 +14,7 @@
         "build.zig",
         "build.zig.zon",
         "src",
-        // For example...
-        //"LICENSE",
-        //"README.md",
+        "LICENSE",
+        "README.md",
     },
 }

doc/about.md

@@ -0,0 +1,3 @@
+# About
+
+Hi, I'm Yves. I'm a developer who <3 the terminal and everything around text interfaces.

doc/blog.md

@@ -0,0 +1,5 @@
+# Blog
+
+This is the main entry page for my blog. I plan on writing on things I feel like worth sharing, mentioning for other developers, tinkers like me.
+
+The blog is currently a work in progress and will be updated once a first version of the tui website supports more dynamic contents.

src/content.zig

@@ -0,0 +1,142 @@
+pub fn Content(App: type) type {
+    return struct {
+        pub fn init(allocator: Allocator) @This() {
+            _ = allocator;
+            return .{};
+        }
+
+        pub fn element(this: *@This()) App.Element {
+            return .{
+                .ptr = this,
+                .vtable = &.{
+                    .handle = handle,
+                    .content = content,
+                },
+            };
+        }
+
+        fn handle(ctx: *anyopaque, model: *App.Model, event: App.Event) !void {
+            _ = ctx;
+            switch (event) {
+                .about => model.page = .about,
+                .blog => model.page = .blog,
+                else => {},
+            }
+        }
+
+        fn content(ctx: *anyopaque, model: *const App.Model, cells: []zterm.Cell, size: zterm.Point) !void {
+            _ = ctx;
+            assert(cells.len == @as(usize, size.x) * @as(usize, size.y));
+
+            const text = switch (model.page) {
+                .about => @embedFile("about"),
+                .blog => @embedFile("blog"),
+            };
+            var index: usize = 0;
+
+            for (0..size.y) |row| {
+                for (0..size.x) |col| {
+                    const cell = row * size.x + col;
+                    assert(cell < cells.len);
+
+                    if (index == text.len) return;
+                    const cp = text[index];
+                    index += 1;
+
+                    cells[cell].cp = switch (cp) {
+                        '\n' => break,
+                        else => cp,
+                    };
+                }
+            }
+        }
+    };
+}
+
+pub fn Title(App: type) type {
+    return struct {
+        text: []const u8,
+
+        pub fn init() @This() {
+            return .{
+                .text = "<Title>",
+            };
+        }
+
+        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 {
+            const this: *const @This() = @ptrCast(@alignCast(ctx));
+            assert(cells.len == @as(usize, size.x) * @as(usize, size.y));
+            for (0.., this.text) |idx, cp| {
+                cells[idx].style.fg = .green;
+                cells[idx].style.emphasis = &.{.bold};
+                cells[idx].cp = cp;
+
+                // NOTE do not write over the contents of this `Container`'s `Size`
+                if (idx == cells.len - 1) break;
+            }
+        }
+    };
+}
+
+pub fn InfoBanner(App: type) type {
+    return struct {
+        left_text: []const u8,
+        right_text: []const u8,
+
+        pub fn init() @This() {
+            return .{
+                .left_text = "Build with zig",
+                .right_text = "Yves Biener (@yves-biener)",
+            };
+        }
+
+        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 {
+            const this: *const @This() = @ptrCast(@alignCast(ctx));
+            assert(cells.len == @as(usize, size.x) * @as(usize, size.y));
+
+            for (0.., this.left_text) |idx, cp| {
+                // NOTE do not write over the contents of this `Container`'s `Size`
+                if (idx == cells.len) break;
+
+                cells[idx].style.fg = .default;
+                cells[idx].style.emphasis = &.{.dim};
+                cells[idx].cp = cp;
+            }
+
+            var start_idx = size.x -| this.right_text.len;
+            if (start_idx <= this.left_text.len) start_idx = this.left_text.len + 1;
+
+            for (start_idx.., this.right_text) |idx, cp| {
+                // NOTE do not write over the contents of this `Container`'s `Size`
+                if (idx == cells.len) break;
+
+                cells[idx].style.fg = .default;
+                cells[idx].style.emphasis = &.{.dim};
+                cells[idx].cp = cp;
+            }
+        }
+    };
+}
+
+const std = @import("std");
+const Allocator = std.mem.Allocator;
+const assert = std.debug.assert;
+const zterm = @import("zterm");

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,105 +10,89 @@ 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();
 
+    // header with navigation buttons and content's title
     {
-        var progress: App.Progress(.progress) = .init(&app.queue, .{
-            .percent = .{
-                .enabled = true,
-                .alignment = .left,
+        var header: App.Container = try .init(allocator, .{
+            .size = .{
+                .dim = .{ .y = 1 },
+                .grow = .horizontal,
             },
-            .fg = .blue,
-            .bg = .grey,
-        });
-        try container.append(try App.Container.init(allocator, .{}, progress.element()));
-    }
-    {
-        var progress: App.Progress(.progress) = .init(&app.queue, .{
-            .percent = .{
-                .enabled = true,
-                .alignment = .middle, // default
+            .layout = .{
+                .separator = .{ .enabled = true },
             },
-            .fg = .red,
-            .bg = .grey,
-        });
-        try container.append(try App.Container.init(allocator, .{}, progress.element()));
-    }
+        }, .{});
+        // title
         {
-        var progress: App.Progress(.progress) = .init(&app.queue, .{
-            .percent = .{
-                .enabled = true,
-                .alignment = .right,
+            var title: Title = .init();
+            try header.append(try .init(allocator, .{}, title.element()));
+        }
+        // about navigation button
+        {
+            var button: NavigationButton(.about) = .init(&app.model, &app.queue);
+            try header.append(try .init(allocator, .{
+                .size = .{
+                    .dim = .{ .x = 5 + 2 },
+                    .grow = .vertical,
                 },
-            .fg = .green,
-            .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 = false },
-            .fg = .default,
-            .bg = .grey,
-        });
-        try container.append(try App.Container.init(allocator, .{}, progress.element()));
+            var button: NavigationButton(.blog) = .init(&app.model, &app.queue);
+            try header.append(try .init(allocator, .{
+                .size = .{
+                    .dim = .{ .x = 4 + 2 },
+                    .grow = .vertical,
+                },
+            }, button.element()));
         }
+        try container.append(header);
+    }
+    // main actual tui_website page content
+    {
+        // intermediate container for *padding*
+        var content: Content = .init(allocator);
+        var content_container: App.Container = try .init(allocator, .{
+            .layout = .{ .padding = .horizontal(2) },
+        }, .{});
+        try content_container.append(try .init(allocator, .{}, content.element()));
+        try container.append(content_container);
+    }
+    // footer
+    {
+        var info_banner: InfoBanner = .init();
+        const footer: App.Container = try .init(allocator, .{
+            .size = .{
+                .dim = .{ .y = 1 },
+                .grow = .horizontal,
+            },
+        }, info_banner.element());
+        try container.append(footer);
+    }
+
     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)});
+        const event = app.nextEvent();
+
         // 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 => {},
         }
 
@@ -147,13 +105,13 @@ pub fn main() !void {
 
         // post event handling
         switch (event) {
-                .quit => break :draw,
+            .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 +121,23 @@ 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 contents = @import("content.zig");
+const Model = @import("model.zig");
+const Content = contents.Content(App);
+const Title = contents.Title(App);
+const InfoBanner = contents.InfoBanner(App);
+const NavigationButton = @import("navigation.zig").NavigationButton(App);
+
 test {
     std.testing.refAllDeclsRecursive(@This());
 }

src/model.zig

@@ -0,0 +1,6 @@
+page: Pages = .blog,
+
+const Pages = enum {
+    about,
+    blog,
+};

src/navigation.zig

@@ -0,0 +1,63 @@
+pub fn NavigationButton(App: type) fn (std.meta.FieldEnum(App.Event)) type {
+    const navigation_struct = struct {
+        fn navigation_fn(page: std.meta.FieldEnum(App.Event)) type {
+            return struct {
+                text: []const u8,
+                highlight: bool,
+                queue: *App.Queue,
+
+                pub fn init(model: *const App.Model, queue: *App.Queue) @This() {
+                    return .{
+                        .text = @tagName(page),
+                        .highlight = switch (page) {
+                            .about => model.page == .about,
+                            .blog => model.page == .blog,
+                            else => @compileError("NavigationButton initiated with non page `App.Event` variant"),
+                        },
+                        .queue = queue,
+                    };
+                }
+
+                pub fn element(this: *@This()) App.Element {
+                    return .{
+                        .ptr = this,
+                        .vtable = &.{
+                            .handle = handle,
+                            .content = content,
+                        },
+                    };
+                }
+
+                fn handle(ctx: *anyopaque, _: *App.Model, event: App.Event) !void {
+                    const this: *@This() = @ptrCast(@alignCast(ctx));
+                    switch (event) {
+                        .about, .blog => this.highlight = event == page,
+                        // TODO accept key input too?
+                        .mouse => |mouse| if (mouse.button == .left and mouse.kind == .release) this.queue.push(page),
+                        else => {},
+                    }
+                }
+
+                fn content(ctx: *anyopaque, _: *const App.Model, cells: []zterm.Cell, size: zterm.Point) !void {
+                    const this: *const @This() = @ptrCast(@alignCast(ctx));
+                    assert(cells.len == @as(usize, size.x) * @as(usize, size.y));
+                    assert(size.x == this.text.len + 2);
+                    assert(size.y == 1);
+
+                    for (1.., this.text) |idx, cp| {
+                        cells[idx].style.fg = if (this.highlight) .black else .default;
+                        cells[idx].style.bg = if (this.highlight) .green else .default;
+                        cells[idx].style.emphasis = &.{.underline};
+                        cells[idx].cp = cp;
+                    }
+                }
+            };
+        }
+    };
+    return navigation_struct.navigation_fn;
+}
+
+const std = @import("std");
+const Allocator = std.mem.Allocator;
+const assert = std.debug.assert;
+const zterm = @import("zterm");