add: search text field in preparation for fuzzy search feature

This way no `Element` that is only there for rendering requires
any internal state.

.gitea/workflows/release.yaml

@@ -15,9 +15,15 @@ jobs:
       - name: Checkout repository
         uses: actions/checkout@v4
       - name: Setup zig installation
-        uses: mlugg/setup-zig@v2
+        uses: https://codeberg.org/mlugg/setup-zig@v2
         with:
-          version: master
+          version: latest
+      - name: Lint check
+        run: zig fmt --check .
+      - name: Spell checking
+        uses: crate-ci/typos@v1.39.0
+        with:
+          config: ./.typos-config
       - name: Run tests
         run: zig build --release=fast
       - name: Release build artifacts

.gitea/workflows/test.yaml

@@ -14,9 +14,9 @@ jobs:
       - name: Checkout repository
         uses: actions/checkout@v4
       - name: Setup zig installation
-        uses: mlugg/setup-zig@v2
+        uses: https://codeberg.org/mlugg/setup-zig@v2
         with:
-          version: master
+          version: latest
       - name: Lint check
         run: zig fmt --check .
       - name: Spell checking

README.md

@@ -4,9 +4,6 @@ This is my terminal based website. It is served as a tui application via ssh and
 
 It contains information about me and my projects as well as blog entries about something I feel like writing something about.
 
-> [!caution]
-> Only builds using the zig master version are tested to work.
-
 ## zterm
 
 This tui application also serves as an example implementation of the [zterm](https://gitea.yves-biener.de/yves-biener/zterm) library.

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,18 +25,7 @@ pub fn build(b: *std.Build) void {
             .optimize = optimize,
             .imports = &.{
                 .{ .name = "zterm", .module = zterm.module("zterm") },
-                .{
+                .{ .name = "zlog", .module = zlog.module("zlog") },
-                    .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,13 +1,17 @@
 .{
     .name = .tui_website,
     // This is a [Semantic Version](https://semver.org/).
-    .version = "0.0.1",
+    .version = "0.0.4",
     .fingerprint = 0x93d98a4d9d000e9c, // Changing this has security and trust implications.
     .minimum_zig_version = "0.16.0-dev.463+f624191f9",
     .dependencies = .{
         .zterm = .{
-            .url = "git+https://gitea.yves-biener.de/yves-biener/zterm#89aeac1e968f1390bd945f734aac8612efbab179",
+            .url = "git+https://gitea.yves-biener.de/yves-biener/zterm#4874252e8c3a5d645ac2c37bbfd0e669964912fc",
-            .hash = "zterm-0.3.0-1xmmELjzGwBxVlqXRHn7p-sXFU9xPxqFMxF0PY2CkzFn",
+            .hash = "zterm-0.3.0-1xmmEH82HABfsn5imAK8lw93LevIaqNV10g6xfkNj_OT",
+        },
+        .zlog = .{
+            .url = "git+https://gitea.yves-biener.de/yves-biener/zlog#b3c8a3ab1ccae1ba50efbdf26d68a18da8594d2c",
+            .hash = "zlog-0.16.0-6JSlRwNJAACVd89xnhXRHzCnCs7qab9Jcmx11VMS2ZpL",
         },
     },
     .paths = .{

doc/blog.md

@@ -1,5 +1,7 @@
-# Blog
+---
-
+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

@@ -1,8 +1,9 @@
-pub fn Content(App: type) type {
+pub fn Website(App: type) type {
     return struct {
-        pub fn init(allocator: Allocator) @This() {
+        gpa: Allocator,
-            _ = allocator;
+
-            return .{};
+        pub fn init(gpa: Allocator) @This() {
+            return .{ .gpa = gpa };
         }
 
         pub fn element(this: *@This()) App.Element {
@@ -10,34 +11,72 @@ pub fn Content(App: type) type {
                 .ptr = this,
                 .vtable = &.{
                     .handle = handle,
-                    .content = content,
                 },
             };
         }
 
         fn handle(ctx: *anyopaque, model: *App.Model, event: App.Event) !void {
-            _ = ctx;
+            const this: *@This() = @ptrCast(@alignCast(ctx));
             switch (event) {
-                .about => model.page = .about,
+                .page => |page| switch (page) {
-                .blog => model.page = .blog,
+                    .about => {
+                        model.page.deinit(this.gpa);
+                        model.page = .about;
+
+                        model.document.deinit(this.gpa);
+                        model.document = .init(try std.fs.cwd().readFileAlloc(this.gpa, "./doc/about.md", std.math.maxInt(usize)));
+                    },
+                    .blog => |path| {
+                        model.page.deinit(this.gpa);
+                        model.document.deinit(this.gpa);
+                        errdefer {
+                            if (path) |p| this.gpa.free(p);
+                            model.document = .invalidPage;
+                            model.page = .{ .blog = null };
+                        }
+
+                        model.document = .init(try std.fs.cwd().readFileAlloc(this.gpa, if (path) |p| p else "./doc/blog.md", std.math.maxInt(usize)));
+                        model.page = .{ .blog = path };
+                    },
+                },
+                .key => |key| {
+                    if (key.eql(.{ .cp = '/' })) model.searching = true;
+
+                    if (key.eql(.{ .cp = zterm.input.Escape })) model.searching = false;
+                },
                 else => {},
             }
         }
+    };
+}
 
-        fn content(ctx: *anyopaque, model: *const App.Model, cells: []zterm.Cell, size: zterm.Point) !void {
+pub fn Content(App: type) type {
-            _ = ctx;
+    return struct {
+        pub fn element(this: *@This()) App.Element {
+            return .{
+                .ptr = this,
+                .vtable = &.{
+                    .minSize = minSize,
+                    .content = content,
+                },
+            };
+        }
+
+        fn minSize(_: *anyopaque, model: *const App.Model, _: zterm.Point) zterm.Point {
+            // NOTE currently the contents are assumed to fit into the viewport, excessive lines are cut off
+            // (there currently no horizontal scrolling)
+            return .{ .y = @intCast(std.mem.count(u8, model.document.content, "\n") + 1) };
+        }
+
+        fn content(_: *anyopaque, model: *const App.Model, cells: []zterm.Cell, size: zterm.Point) !void {
             assert(cells.len == @as(usize, size.x) * @as(usize, size.y));
 
-            const text = switch (model.page) {
+            const text = model.document.content;
-                .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];
@@ -48,6 +87,146 @@ pub fn Content(App: type) type {
                         else => cp,
                     };
                 }
+                if (text[index - 1] != '\n') {
+                    // go to the end of the line
+                    while (index < text.len and text[index] != '\n') index += 1;
+                }
+            }
+        }
+    };
+}
+
+pub fn Title(App: type) type {
+    return struct {
+        pub fn element(this: *@This()) App.Element {
+            return .{
+                .ptr = this,
+                .vtable = &.{
+                    .content = content,
+                },
+            };
+        }
+
+        fn content(_: *anyopaque, model: *const App.Model, cells: []zterm.Cell, size: zterm.Point) !void {
+            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 {
+    const left_text: []const u8 = "Build using zig";
+    const right_text: []const u8 = "Yves Biener";
+
+    return struct {
+        gpa: Allocator,
+        search: App.TextField,
+        queue: *App.Queue,
+
+        pub fn init(gpa: Allocator, queue: *App.Queue) @This() {
+            return .{
+                .gpa = gpa,
+                .search = .init(gpa, .init(.default, .default)),
+                .queue = queue,
+            };
+        }
+
+        pub fn element(this: *@This()) App.Element {
+            return .{
+                .ptr = this,
+                .vtable = &.{
+                    .deinit = deinit,
+                    .minSize = minSize,
+                    .handle = handle,
+                    .content = content,
+                },
+            };
+        }
+
+        fn deinit(ctx: *anyopaque) void {
+            const this: *@This() = @ptrCast(@alignCast(ctx));
+            this.search.deinit();
+        }
+
+        fn minSize(ctx: *anyopaque, model: *const App.Model, _: zterm.Point) zterm.Point {
+            const this: *@This() = @ptrCast(@alignCast(ctx));
+            if (!model.searching) this.search.clear();
+            return .{ .y = if (model.searching) 2 else 1 };
+        }
+
+        fn handle(ctx: *anyopaque, model: *App.Model, event: App.Event) !void {
+            const this: *@This() = @ptrCast(@alignCast(ctx));
+            switch (event) {
+                .key => if (model.searching) {
+                    const prev_len = this.search.input.items.len;
+                    try this.search.element().handle(model, event);
+                    const next_len = this.search.input.items.len;
+
+                    if (next_len == 0) {
+                        model.searching = false;
+                        return;
+                    }
+
+                    // NOTE do not include the leading '/' in the `.search` event payload!
+                    if (prev_len != next_len) this.queue.push(.{ .search = this.search.input.items[1..] });
+                },
+                else => {},
+            }
+        }
+
+        fn content(ctx: *anyopaque, model: *const App.Model, cells: []zterm.Cell, size: zterm.Point) !void {
+            assert(cells.len == @as(usize, size.x) * @as(usize, size.y));
+
+            for (0.., 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 <= 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 -| right_text.len;
+            if (start_idx <= left_text.len) start_idx = left_text.len + 1;
+
+            for (start_idx.., 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;
+            }
+
+            if (model.searching) {
+                const this: *@This() = @ptrCast(@alignCast(ctx));
+                try this.search.element().content(model, cells[size.x..], .{ .x = size.x, .y = 1 });
             }
         }
     };
@@ -57,3 +236,4 @@ const std = @import("std");
 const Allocator = std.mem.Allocator;
 const assert = std.debug.assert;
 const zterm = @import("zterm");
+const Model = @import("model.zig");

src/main.zig

@@ -1,3 +1,11 @@
+// TODO
+// - should the path containing the contents of the tui-website reside in the
+//   hardcode `./doc` directory or shall this become a compilation argument to
+//   allow for custom directory locations?
+
+// usage: tui_website <location>
+// <location>: partial path to the document without the file extension and the beginning `./doc` path
+//             ending `/` (as used from the web-world) are trimmed automatically
 pub fn main() !void {
     errdefer |err| log.err("Application Error: {any}", .{err});
 
@@ -6,67 +14,139 @@ 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(allocator, "./doc/about.md", std.math.maxInt(usize))),
+    });
+    defer app.model.deinit(allocator);
+
     var renderer = zterm.Renderer.Buffered.init(allocator);
     defer renderer.deinit();
 
+    var website: Website = .init(allocator);
     var container = try App.Container.init(allocator, .{
         .layout = .{
             .padding = .horizontal(2),
             .direction = .vertical,
             .separator = .{ .enabled = true },
         },
-    }, .{});
+    }, website.element());
     defer container.deinit();
 
+    // header with navigation buttons and content's title
+    {
         var header: App.Container = try .init(allocator, .{
             .size = .{
                 .dim = .{ .y = 1 },
                 .grow = .horizontal,
             },
-    }, .{});
-    var navigation: App.Container = try .init(allocator, .{
             .layout = .{
                 .separator = .{ .enabled = true },
             },
         }, .{});
+        // title
+        {
+            var title: Title = .{};
+            try header.append(try .init(allocator, .{}, title.element()));
+        }
         // about navigation button
         {
-        var button: App.Button(.about) = .init(&app.queue, .init(.default, "about"));
+            var button: NavigationButton(.about) = .init(&app.model, &app.queue);
-        try navigation.append(try .init(allocator, .{
+            try header.append(try .init(allocator, .{
                 .size = .{
-                .dim = .{ .x = 5 + 2 },
                     .grow = .vertical,
                 },
             }, button.element()));
         }
         // blog navigation button
         {
-        var button: App.Button(.blog) = .init(&app.queue, .init(.default, "blog"));
+            var button: NavigationButton(.blog) = .init(&app.model, &app.queue);
-        try navigation.append(try .init(allocator, .{
+            try header.append(try .init(allocator, .{
                 .size = .{
-                .dim = .{ .x = 4 + 2 },
                     .grow = .vertical,
                 },
             }, button.element()));
         }
-    try header.append(navigation);
         try container.append(header);
-    var content: Content = .init(allocator);
+    }
-    try container.append(try .init(allocator, .{}, content.element()));
+    // page contents
+    {
+        var content: Content = .{};
+        var scrollable: App.Scrollable = .init(try .init(allocator, .{}, content.element()), .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 = .init(allocator, &app.queue);
+        const footer: App.Container = try .init(allocator, .{
+            .size = .{ .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});
 
+    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)
+        var blog = path[0..path.len];
+        blog = std.mem.trimStart(u8, blog, "./");
+        blog = std.mem.trimEnd(u8, blog, ".md");
+        blog = std.mem.trimEnd(u8, blog, "/");
+        app.postEvent(.{
+            .page = .{
+                .blog = try std.fmt.allocPrint(allocator, "./doc/{s}.md", .{blog}),
+            },
+        });
+    }
+    arg_it.deinit();
+
     // event loop
-    while (true) {
+    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();
+        };
+
         // handle events
-        const event = app.nextEvent();
+        for (0..len) |_| {
+            const event = app.queue.pop();
 
             // pre event handling
             switch (event) {
                 .key => |key| {
-                if (key.eql(.{ .cp = 'c', .mod = .{ .ctrl = true } })) app.quit();
+                    if (key.eql(.{ .cp = 'c', .mod = .{ .ctrl = true } }) or key.eql(.{ .cp = 'q' })) app.quit();
+                    // test if the event handling is working correctly
+                    if (key.eql(.{ .cp = zterm.input.Space })) app.postEvent(.{
+                        .page = .{
+                            .blog = try allocator.dupe(u8, "./doc/test.md"),
+                        },
+                    });
+                },
+                .page => |page| switch (page) {
+                    .about => log.info(ResourceRequestFormat, .{"./doc/about.md"}),
+                    .blog => |path| log.info(ResourceRequestFormat, .{if (path) |p| p else "./doc/blog.md"}),
                 },
                 .err => |err| log.err("Received {s} with message: {s}", .{ @errorName(err.err), err.msg }),
                 else => {},
@@ -81,34 +161,43 @@ pub fn main() !void {
 
             // post event handling
             switch (event) {
-            .quit => break,
+                .quit => break :loop,
                 else => {},
             }
+        }
 
-        container.resize(try renderer.resize());
+        container.resize(&app.model, try renderer.resize());
-        container.reposition(.{});
+        container.reposition(&app.model, .{});
-
         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 ResourceRequestFormat = "Requesting resource: `{s}`";
+
 const std = @import("std");
 const assert = std.debug.assert;
+const zlog = @import("zlog");
 const zterm = @import("zterm");
 const App = zterm.App(
     Model,
     union(enum) {
-        about,
+        search: []const u21,
-        blog,
+        page: Model.Pages,
     },
 );
 
+const contents = @import("content.zig");
 const Model = @import("model.zig");
-const Content = @import("content.zig").Content(App);
+const Website = contents.Website(App);
+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

@@ -1,6 +1,79 @@
-page: Pages = .blog,
+page: Pages,
+document: Document,
 
-const Pages = enum {
+searching: bool = false,
+
+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,
+    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 const invalidPage: @This() = .{
+        .title = "Page not found",
+        .content = "Requested page does not exist",
+        .ptr = null,
+    };
+
+    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 {
+        if (this.ptr) |ptr| allocator.free(ptr);
+        this.* = .{ .ptr = null };
+    }
+};
+
+const std = @import("std");
+const assert = std.debug.assert;
+const Allocator = std.mem.Allocator;

src/navigation.zig

@@ -0,0 +1,71 @@
+pub fn NavigationButton(App: type) fn (std.meta.FieldEnum(App.Model.Pages)) type {
+    const navigation_struct = struct {
+        fn navigation_fn(page: std.meta.FieldEnum(App.Model.Pages)) 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,
+                        },
+                        .queue = queue,
+                    };
+                }
+
+                pub fn element(this: *@This()) App.Element {
+                    return .{
+                        .ptr = this,
+                        .vtable = &.{
+                            .minSize = minSize,
+                            .handle = handle,
+                            .content = content,
+                        },
+                    };
+                }
+
+                fn minSize(_: *anyopaque, _: *const App.Model, _: zterm.Point) zterm.Point {
+                    return .{ .x = @tagName(page).len + 2 };
+                }
+
+                fn handle(ctx: *anyopaque, _: *App.Model, event: App.Event) !void {
+                    const this: *@This() = @ptrCast(@alignCast(ctx));
+                    switch (event) {
+                        .page => |p| this.highlight = p == page,
+                        // TODO accept key input too?
+                        .mouse => |mouse| if (mouse.button == .left and mouse.kind == .release) this.queue.push(switch (page) {
+                            .about => .{ .page = .about },
+                            .blog => .{
+                                .page = .{ .blog = null },
+                            },
+                        }),
+                        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| {
+                        if (this.highlight) cells[idx].style.ul = .green;
+                        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");