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

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

@@ -4,17 +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.
-
----
-
-## 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.4",
-    .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.
     .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",
+            .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 = .{
         "build.zig",
         "build.zig.zon",
         "src",
-        // For example...
+        "LICENSE",
-        //"LICENSE",
+        "README.md",
-        //"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,239 @@
+pub fn Website(App: type) type {
+    return struct {
+        gpa: Allocator,
+
+        pub fn init(gpa: Allocator) @This() {
+            return .{ .gpa = gpa };
+        }
+
+        pub fn element(this: *@This()) App.Element {
+            return .{
+                .ptr = this,
+                .vtable = &.{
+                    .handle = handle,
+                },
+            };
+        }
+
+        fn handle(ctx: *anyopaque, model: *App.Model, event: App.Event) !void {
+            const this: *@This() = @ptrCast(@alignCast(ctx));
+            switch (event) {
+                .page => |page| switch (page) {
+                    .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 => {},
+            }
+        }
+    };
+}
+
+pub fn Content(App: type) type {
+    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 = 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,
+                    };
+                }
+                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 });
+            }
+        }
+    };
+}
+
+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,29 +1,11 @@
-const QuitText = struct {
+// TODO
-    const text = "Press ctrl+c to quit.";
+// - should the path containing the contents of the tui-website reside in the
-
+//   hardcode `./doc` directory or shall this become a compilation argument to
-    pub fn element(this: *@This()) App.Element {
+//   allow for custom directory locations?
-        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 <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});
 
@@ -32,89 +14,116 @@ 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 progress_percent: u8 = 0;
+    var website: Website = .init(allocator);
-    var quit_text: QuitText = .{};
-
     var container = try App.Container.init(allocator, .{
-        .layout = .{ .padding = .all(5), .direction = .vertical },
+        .layout = .{
-    }, quit_text.element());
+            .padding = .horizontal(2),
+            .direction = .vertical,
+            .separator = .{ .enabled = true },
+        },
+    }, website.element());
     defer container.deinit();
 
+    // header with navigation buttons and content's title
     {
-        var progress: App.Progress(.progress) = .init(&app.queue, .{
+        var header: App.Container = try .init(allocator, .{
-            .percent = .{
+            .size = .{
-                .enabled = true,
+                .dim = .{ .y = 1 },
-                .alignment = .left,
+                .grow = .horizontal,
             },
-            .fg = .blue,
+            .layout = .{
-            .bg = .grey,
+                .separator = .{ .enabled = true },
-        });
-        try container.append(try App.Container.init(allocator, .{}, progress.element()));
-    }
-    {
-        var progress: App.Progress(.progress) = .init(&app.queue, .{
-            .percent = .{
-                .enabled = true,
-                .alignment = .middle, // default
             },
-            .fg = .red,
+        }, .{});
-            .bg = .grey,
+        // title
-        });
-        try container.append(try App.Container.init(allocator, .{}, progress.element()));
-    }
         {
-        var progress: App.Progress(.progress) = .init(&app.queue, .{
+            var title: Title = .{};
-            .percent = .{
+            try header.append(try .init(allocator, .{}, title.element()));
-                .enabled = true,
+        }
-                .alignment = .right,
+        // about navigation button
+        {
+            var button: NavigationButton(.about) = .init(&app.model, &app.queue);
+            try header.append(try .init(allocator, .{
+                .size = .{
+                    .grow = .vertical,
                 },
-            .fg = .green,
+            }, button.element()));
-            .bg = .grey,
-        });
-        try container.append(try App.Container.init(allocator, .{}, progress.element()));
         }
+        // blog navigation button
         {
-        var progress: App.Progress(.progress) = .init(&app.queue, .{
+            var button: NavigationButton(.blog) = .init(&app.model, &app.queue);
-            .percent = .{ .enabled = false },
+            try header.append(try .init(allocator, .{
-            .fg = .default,
+                .size = .{
-            .bg = .grey,
+                    .grow = .vertical,
-        });
+                },
-        try container.append(try App.Container.init(allocator, .{}, progress.element()));
+            }, button.element()));
         }
+        try container.append(header);
+    }
+    // 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});
 
-    var framerate: u64 = 60;
+    if (arg_it.next()) |path| {
-    var tick_ms: u64 = @divFloor(time.ms_per_s, framerate);
+        // TODO check path is only pointing to allowed files?
-    var next_frame_ms: u64 = 0;
+        // - only *markdown* files (file extension `.md`)
-
+        // - only in a specific path / directory?
-    var increase_progress: u64 = 10;
+        //   -> enforce a specific structure?
-
+        // -> in case an invalid path is provided the 404 error page shall be shown
-    // Continuous drawing
+        // -> reporte an corresponding error! (such that I can see that in the log)
-    // draw loop
+        var blog = path[0..path.len];
-    draw: while (true) {
+        blog = std.mem.trimStart(u8, blog, "./");
-        const now_ms: u64 = @intCast(time.milliTimestamp());
+        blog = std.mem.trimEnd(u8, blog, ".md");
-        if (now_ms >= next_frame_ms) {
+        blog = std.mem.trimEnd(u8, blog, "/");
-            next_frame_ms = now_ms + tick_ms;
+        app.postEvent(.{
-        } else {
+            .page = .{
-            std.Thread.sleep((next_frame_ms - now_ms) * time.ns_per_ms);
+                .blog = try std.fmt.allocPrint(allocator, "./doc/{s}.md", .{blog}),
-            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 });
     }
+    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 +131,24 @@ pub fn main() !void {
 
         // handle events
         for (0..len) |_| {
-            const event = app.queue.drain() orelse break;
+            const event = app.queue.pop();
-            log.debug("handling event: {s}", .{@tagName(event)});
+
             // 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 }),
-                .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 +161,44 @@ pub fn main() !void {
 
             // post event handling
             switch (event) {
-                .quit => break :draw,
+                .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 time = std.time;
 const assert = std.debug.assert;
+const zlog = @import("zlog");
 const zterm = @import("zterm");
 const App = zterm.App(
-    struct {},
+    Model,
     union(enum) {
-        progress: u8,
+        search: []const u21,
+        page: Model.Pages,
     },
 );
 
+const contents = @import("content.zig");
+const Model = @import("model.zig");
+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

@@ -0,0 +1,79 @@
+page: Pages,
+document: Document,
+
+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: ?[]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");