mod: bump to version 0.0.3

This is a starting point to dynamically loading `markdown` files as blog
entries. With this change the *doc/about.md* and *doc/blog.md* files
are no longer builded into the executable and instead read from the
filesystem during runtime (along with the new test file *doc/test.md*).

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

@@ -4,6 +4,14 @@ pub fn build(b: *std.Build) void {
     const target = b.standardTargetOptions(.{});
     const optimize = b.standardOptimizeOption(.{});
 
+    const zlog = b.dependency("zlog", .{
+        .target = target,
+        .optimize = optimize,
+        .timestamp = true,
+        .stderr = false,
+        .file = "log",
+    });
+
     const zterm = b.dependency("zterm", .{
         .target = target,
         .optimize = optimize,
@@ -17,6 +25,7 @@ pub fn build(b: *std.Build) void {
             .optimize = optimize,
             .imports = &.{
                 .{ .name = "zterm", .module = zterm.module("zterm") },
+                .{ .name = "zlog", .module = zlog.module("zlog") },
             },
         }),
     });

build.zig.zon

@@ -1,48 +1,24 @@
 .{
-    // 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.3",
     .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",
-            .hash = "zterm-0.3.0-1xmmELjzGwBxVlqXRHn7p-sXFU9xPxqFMxF0PY2CkzFn",
+            .url = "git+https://gitea.yves-biener.de/yves-biener/zterm#ad32e46bc9fd6d1d9b7a3615979a3b80877c9300",
+            .hash = "zterm-0.3.0-1xmmEO8PHABP4tE6BnEZllJTh6Hpza_5C9wS8s2vjwou",
+        },
+        .zlog = .{
+            .url = "git+https://gitea.yves-biener.de/yves-biener/zlog#f43034cea9a0863e618c3d0a43706ce38c8791cf",
+            .hash = "zlog-0.16.0-6JSlRx1JAADasbK5FS6Qaf0Iq1SCQaH5VZRxT2SRE2xs",
         },
     },
     .paths = .{
         "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,7 @@
+---
+title: Welcome to my Blog
+date: 2025-11-01
+---
+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.

doc/test.md

@@ -0,0 +1,51 @@
+---
+title: Capabilities of tui-website
+---
+Not everything that can be done with markdown can be representented by this tui-application. It is simple enough to
+support basic markdown files. Currently the text has to be manually reflowed to 120 characters, such that there is no
+issue when rendering (i.e. correct line breaks, etc.)
+
+The following list contains all the available features that are supported (with some examples below):
+
+  - unordered lists (using `-`, `+` and `*`, where the corresponding symbol is used when rendering)
+  * links
+  + blocks
+  - `inline blocks` (written as `inline blocks`)
+  * _italic_ (written as `_italic_`)
+  + **bold** (written as `**bold**`)
+  - headlines (corresponding sub heading six levels deep)
+
+Headings currently require a second newline before the list items to render correctly with a empty line in between the
+following contents and the last list item.
+
+Another paragraph.
+
+# Examples
+
+> quotes are not supported (yet)
+
+The following is a block. Which renders as follows (containing line numbers and **no code highlighting**):
+
+---
+
+```zig
+fn myFunction() void {
+    if (hasFeature()) {
+        // Feature-specific code
+    } else {
+        // Default code
+    }
+}
+
+inline fn hasFeature() bool {
+    return (comptime comptimeCheck()) and runtimeCheck();
+}
+```
+
+## Combinations are possible
+
+1. see this excellent blog post: [Conditionally Disabling Code with comptime in Zig - Mitchell Hashimoto](https://mitchellh.com/writing/zig-comptime-conditional-disable)
+
+### See deeper levels are possible and will be rendered correctly
+
+This is just some placeholder text.

src/content.zig

@@ -0,0 +1,186 @@
+pub fn Content(App: type) type {
+    return struct {
+        allocator: Allocator,
+        document: *const App.Model.Document,
+
+        pub fn init(allocator: Allocator, document: *const App.Model.Document) @This() {
+            return .{
+                .allocator = allocator,
+                .document = document,
+            };
+        }
+
+        pub fn element(this: *@This()) App.Element {
+            return .{
+                .ptr = this,
+                .vtable = &.{
+                    .minSize = minSize,
+                    .handle = handle,
+                    .content = content,
+                },
+            };
+        }
+
+        fn minSize(ctx: *anyopaque, size: zterm.Point) zterm.Point {
+            const this: *const @This() = @ptrCast(@alignCast(ctx));
+            const text = this.document.content;
+            var index: usize = 0;
+            var new_size: zterm.Point = .{ .x = size.x };
+
+            for (0..text.len) |_| rows: {
+                for (0..size.x - 1) |_| { // assume that there is one cell reserved for the scrollbar
+                    if (index == text.len) break :rows;
+                    const cp = text[index];
+                    index += 1;
+
+                    switch (cp) {
+                        '\n' => break,
+                        else => {},
+                    }
+                }
+                new_size.y += 1;
+            }
+            return new_size;
+        }
+
+        fn handle(ctx: *anyopaque, model: *App.Model, event: App.Event) !void {
+            const this: *@This() = @ptrCast(@alignCast(ctx));
+            switch (event) {
+                .init => this.document = &model.document,
+                .about => {
+                    model.page.deinit(this.allocator);
+                    model.page = .about;
+
+                    model.document.deinit(this.allocator);
+                    model.document = .init(try std.fs.cwd().readFileAlloc("./doc/about.md", this.allocator, .unlimited));
+                    this.document = &model.document;
+                },
+                .blog => |path| {
+                    model.page.deinit(this.allocator);
+                    model.page = .{ .blog = path };
+
+                    model.document.deinit(this.allocator);
+                    model.document = .init(try std.fs.cwd().readFileAlloc(if (path) |p| p else "./doc/blog.md", this.allocator, .unlimited));
+                    this.document = &model.document;
+                },
+                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 = model.document.content;
+            var index: usize = 0;
+
+            for (0..size.y) |row| {
+                for (0..size.x) |col| {
+                    const cell = row * size.x + col;
+
+                    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 {
+        pub fn element(this: *@This()) App.Element {
+            return .{
+                .ptr = this,
+                .vtable = &.{
+                    .content = content,
+                },
+            };
+        }
+
+        fn content(ctx: *anyopaque, model: *const App.Model, cells: []zterm.Cell, size: zterm.Point) !void {
+            const this: *const @This() = @ptrCast(@alignCast(ctx));
+            _ = this;
+            assert(cells.len == @as(usize, size.x) * @as(usize, size.y));
+
+            if (model.document.title) |text| {
+                for (0.., 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 = "Build with zig",
+        right_text: []const u8 = "Yves Biener (@yves-biener)",
+
+        pub fn element(this: *@This()) App.Element {
+            return .{
+                .ptr = this,
+                .vtable = &.{
+                    .content = content,
+                },
+            };
+        }
+
+        fn content(ctx: *anyopaque, model: *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;
+            }
+
+            switch (model.page) {
+                .about => {},
+                .blog => |path| if (path) |p| page: {
+                    const start_idx = (size.x -| p.len) / 2;
+                    if (start_idx <= this.left_text.len) break :page;
+
+                    for (start_idx.., p) |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].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,4 @@
-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;
-        }
-    }
-};
-
+// usage: tui_website <path>
 pub fn main() !void {
     errdefer |err| log.err("Application Error: {any}", .{err});
 
@@ -32,89 +7,114 @@ pub fn main() !void {
 
     const allocator = gpa.allocator();
 
-    var app: App = .init(.{});
+    var arg_it = try std.process.argsWithAllocator(allocator);
+    errdefer arg_it.deinit();
+
+    // skip own executable name
+    _ = arg_it.skip();
+
+    var app: App = .init(.{
+        .page = .about,
+        .document = .init(try std.fs.cwd().readFileAlloc("./doc/about.md", allocator, .unlimited)),
+    });
+    defer app.model.deinit(allocator);
+
     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 content_container: App.Container = undefined;
+    defer content_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 = .{};
+            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
+    {
+        var content: Content = .init(allocator, &app.model.document);
+        content_container = try .init(allocator, .{}, content.element());
+
+        var scrollable: App.Scrollable = .init(content_container, .enabled(.green, false));
+        // intermediate container for *padding* containing the scrollable `Content`
+        var scrollable_container: App.Container = try .init(allocator, .{
+            .layout = .{ .padding = .horizontal(2) },
+        }, .{});
+        try scrollable_container.append(try .init(allocator, .{}, scrollable.element()));
+        try container.append(scrollable_container);
+    }
+    // footer
+    {
+        var info_banner: InfoBanner = .{};
+        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 });
+    if (arg_it.next()) |path| {
+        // TODO check path is only pointing to allowed files?
+        // - only *markdown* files (file extension `.md`)
+        // - only in a specific path / directory?
+        //   -> enforce a specific structure?
+        // -> in case an invalid path is provided the 404 error page shall be shown
+        // -> reporte an corresponding error! (such that I can see that in the log)
+        app.postEvent(.{ .blog = try allocator.dupe(u8, path) });
     }
+    arg_it.deinit();
 
+    // event loop
+    loop: while (true) {
+        // batch events since last iteration
         const len = blk: {
+            app.queue.poll();
             app.queue.lock();
             defer app.queue.unlock();
             break :blk app.queue.len();
@@ -122,19 +122,16 @@ pub fn main() !void {
 
         // handle events
         for (0..len) |_| {
-            const event = app.queue.drain() orelse break;
-            log.debug("handling event: {s}", .{@tagName(event)});
+            const event = app.queue.pop();
+
             // pre event handling
             switch (event) {
                 .key => |key| {
                     if (key.eql(.{ .cp = 'c', .mod = .{ .ctrl = true } })) app.quit();
+                    // test if the event handling is working correctly
+                    if (key.eql(.{ .cp = zterm.input.Space })) app.postEvent(.{ .blog = allocator.dupe(u8, "./doc/test.md") catch unreachable });
                 },
                 .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,32 +144,39 @@ pub fn main() !void {
 
             // post event handling
             switch (event) {
-                .quit => break :draw,
+                .quit => break :loop,
                 else => {},
             }
         }
 
         container.resize(try renderer.resize());
         container.reposition(.{});
+
         try renderer.render(@TypeOf(container), &container, App.Model, &app.model);
         try renderer.flush();
     }
 }
 
 pub const panic = App.panic_handler;
+pub const std_options = zlog.std_options;
 const log = std.log.scoped(.default);
 
 const std = @import("std");
-const time = std.time;
 const assert = std.debug.assert;
+const zlog = @import("zlog");
 const zterm = @import("zterm");
 const App = zterm.App(
-    struct {},
-    union(enum) {
-        progress: u8,
-    },
+    Model,
+    Model.Pages,
 );
 
+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,71 @@
+page: Pages,
+document: Document,
+
+pub fn deinit(this: *@This(), allocator: Allocator) void {
+    this.page.deinit(allocator);
+    this.document.deinit(allocator);
+
+    this.page = undefined;
+    this.document = undefined;
+}
+
+pub const Pages = union(enum) {
+    about,
+    blog: ?[]const u8,
+
+    pub fn deinit(this: @This(), allocator: Allocator) void {
+        switch (this) {
+            .blog => |path| if (path) |p| allocator.free(p),
+            else => {},
+        }
+    }
+};
+
+pub const Document = struct {
+    // preemble:
+    title: ?[]const u8 = null,
+    date: ?[]const u8 = null,
+    content: []const u8 = undefined,
+    ptr: []const u8,
+
+    const Preemble = enum {
+        title,
+        date,
+    };
+
+    pub fn init(content: []const u8) @This() {
+        if (std.mem.startsWith(u8, content, "---\n")) {
+            var document: @This() = .{ .ptr = content };
+            // we assume the content includes a preemble
+            var iter = std.mem.splitSequence(u8, content, "---\n");
+            assert(iter.next().?.len == 0);
+            if (iter.next()) |preemble| {
+                var lines = std.mem.splitScalar(u8, preemble, '\n');
+                while (lines.next()) |line| {
+                    var entry = std.mem.splitSequence(u8, line, ": ");
+                    const key = entry.next().?;
+                    const value = entry.next();
+                    assert(entry.next() == null);
+                    if (std.meta.stringToEnum(Preemble, key)) |k| switch (k) {
+                        .title => document.title = value,
+                        .date => document.date = value,
+                    };
+                }
+            }
+            document.content = iter.rest();
+            return document;
+        } else return .{
+            .content = content,
+            .ptr = content,
+        };
+    }
+
+    pub fn deinit(this: *@This(), allocator: Allocator) void {
+        allocator.free(this.ptr);
+        this.* = .{ .ptr = undefined };
+    }
+};
+
+const std = @import("std");
+const assert = std.debug.assert;
+const Allocator = std.mem.Allocator;

src/navigation.zig

@@ -0,0 +1,67 @@
+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(switch (page) {
+                            .about => .about,
+                            .blog => .{ .blog = null },
+                            else => @compileError("The provided navigation button event to trigger is not a `App.Model.Pages` enum variation."),
+                        }),
+                        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");