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.zon

@@ -6,12 +6,12 @@
     .minimum_zig_version = "0.16.0-dev.463+f624191f9",
     .dependencies = .{
         .zterm = .{
-            .url = "git+https://gitea.yves-biener.de/yves-biener/zterm#ad32e46bc9fd6d1d9b7a3615979a3b80877c9300",
-            .hash = "zterm-0.3.0-1xmmEO8PHABP4tE6BnEZllJTh6Hpza_5C9wS8s2vjwou",
+            .url = "git+https://gitea.yves-biener.de/yves-biener/zterm#4874252e8c3a5d645ac2c37bbfd0e669964912fc",
+            .hash = "zterm-0.3.0-1xmmEH82HABfsn5imAK8lw93LevIaqNV10g6xfkNj_OT",
         },
         .zlog = .{
-            .url = "git+https://gitea.yves-biener.de/yves-biener/zlog#f43034cea9a0863e618c3d0a43706ce38c8791cf",
-            .hash = "zlog-0.16.0-6JSlRx1JAADasbK5FS6Qaf0Iq1SCQaH5VZRxT2SRE2xs",
+            .url = "git+https://gitea.yves-biener.de/yves-biener/zlog#b3c8a3ab1ccae1ba50efbdf26d68a18da8594d2c",
+            .hash = "zlog-0.16.0-6JSlRwNJAACVd89xnhXRHzCnCs7qab9Jcmx11VMS2ZpL",
         },
     },
     .paths = .{

src/content.zig

@@ -1,80 +1,74 @@
-pub fn Content(App: type) type {
+pub fn Website(App: type) type {
     return struct {
-        allocator: Allocator,
-        document: *const App.Model.Document,
+        gpa: Allocator,
 
-        pub fn init(allocator: Allocator, document: *const App.Model.Document) @This() {
-            return .{
-                .allocator = allocator,
-                .document = document,
-            };
+        pub fn init(gpa: Allocator) @This() {
+            return .{ .gpa = gpa };
         }
 
         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;
+                .page => |page| switch (page) {
+                    .about => {
+                        model.page.deinit(this.gpa);
+                        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;
+                        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 };
+                    },
                 },
-                .blog => |path| {
-                    model.page.deinit(this.allocator);
-                    model.document.deinit(this.allocator);
-                    errdefer {
-                        if (path) |p| this.allocator.free(p);
-                        model.document = .invalidPage;
-                        model.page = .{ .blog = null };
-                    }
+                .key => |key| {
+                    if (key.eql(.{ .cp = '/' })) model.searching = true;
 
-                    model.document = .init(try std.fs.cwd().readFileAlloc(if (path) |p| p else "./doc/blog.md", this.allocator, .unlimited));
-                    model.page = .{ .blog = path };
-
-                    this.document = &model.document;
+                    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 {
-            _ = ctx;
+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;
@@ -93,6 +87,10 @@ 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;
+                }
             }
         }
     };
@@ -109,9 +107,7 @@ pub fn Title(App: type) type {
             };
         }
 
-        fn content(ctx: *anyopaque, model: *const App.Model, cells: []zterm.Cell, size: zterm.Point) !void {
-            const this: *const @This() = @ptrCast(@alignCast(ctx));
-            _ = this;
+        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| {
@@ -129,24 +125,69 @@ pub fn Title(App: type) type {
 }
 
 pub fn InfoBanner(App: type) type {
+    const left_text: []const u8 = "Build using zig";
+    const right_text: []const u8 = "Yves Biener";
+
     return struct {
-        left_text: []const u8 = "Build with zig",
-        right_text: []const u8 = "Yves Biener (@yves-biener)",
+        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 {
-            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| {
+            for (0.., left_text) |idx, cp| {
                 // NOTE do not write over the contents of this `Container`'s `Size`
                 if (idx == cells.len) break;
 
@@ -159,7 +200,7 @@ pub fn InfoBanner(App: type) type {
                 .about => {},
                 .blog => |path| if (path) |p| page: {
                     const start_idx = (size.x -| p.len) / 2;
-                    if (start_idx <= this.left_text.len) break :page;
+                    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`
@@ -171,10 +212,10 @@ pub fn InfoBanner(App: type) type {
                 },
             }
 
-            var start_idx = size.x -| this.right_text.len;
-            if (start_idx <= this.left_text.len) start_idx = this.left_text.len + 1;
+            var start_idx = size.x -| right_text.len;
+            if (start_idx <= left_text.len) start_idx = left_text.len + 1;
 
-            for (start_idx.., this.right_text) |idx, cp| {
+            for (start_idx.., right_text) |idx, cp| {
                 // NOTE do not write over the contents of this `Container`'s `Size`
                 if (idx == cells.len) break;
 
@@ -182,6 +223,11 @@ pub fn InfoBanner(App: type) type {
                 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 });
+            }
         }
     };
 }
@@ -190,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

@@ -20,25 +20,24 @@ pub fn main() !void {
     // skip own executable name
     _ = arg_it.skip();
 
-    var app: App = .init(.{
+    var app: App = .init(.{}, .{
         .page = .about,
-        .document = .init(try std.fs.cwd().readFileAlloc("./doc/about.md", allocator, .unlimited)),
+        .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();
-    var content_container: App.Container = undefined;
-    defer content_container.deinit();
 
     // header with navigation buttons and content's title
     {
@@ -61,7 +60,6 @@ pub fn main() !void {
             var button: NavigationButton(.about) = .init(&app.model, &app.queue);
             try header.append(try .init(allocator, .{
                 .size = .{
-                    .dim = .{ .x = 5 + 2 },
                     .grow = .vertical,
                 },
             }, button.element()));
@@ -71,34 +69,30 @@ pub fn main() !void {
             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
+    // page contents
     {
-        var content: Content = .init(allocator, &app.model.document);
-        content_container = try .init(allocator, .{}, content.element());
+        var content: Content = .{};
+        var scrollable: App.Scrollable = .init(try .init(allocator, .{}, content.element()), .enabled(.green, false));
 
-        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 = .{};
+        var info_banner: InfoBanner = .init(allocator, &app.queue);
         const footer: App.Container = try .init(allocator, .{
-            .size = .{
-                .dim = .{ .y = 1 },
-                .grow = .horizontal,
-            },
+            .size = .{ .grow = .horizontal },
         }, info_banner.element());
         try container.append(footer);
     }
@@ -117,7 +111,11 @@ pub fn main() !void {
         blog = std.mem.trimStart(u8, blog, "./");
         blog = std.mem.trimEnd(u8, blog, ".md");
         blog = std.mem.trimEnd(u8, blog, "/");
-        app.postEvent(.{ .blog = try std.fmt.allocPrint(allocator, "./doc/{s}.md", .{blog}) });
+        app.postEvent(.{
+            .page = .{
+                .blog = try std.fmt.allocPrint(allocator, "./doc/{s}.md", .{blog}),
+            },
+        });
     }
     arg_it.deinit();
 
@@ -140,10 +138,16 @@ pub fn main() !void {
                 .key => |key| {
                     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(.{ .blog = allocator.dupe(u8, "./doc/test.md") catch unreachable });
+                    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"}),
                 },
-                .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 => {},
             }
@@ -162,9 +166,8 @@ pub fn main() !void {
             }
         }
 
-        container.resize(try renderer.resize());
-        container.reposition(.{});
-
+        container.resize(&app.model, try renderer.resize());
+        container.reposition(&app.model, .{});
         try renderer.render(@TypeOf(container), &container, App.Model, &app.model);
         try renderer.flush();
     }
@@ -182,11 +185,15 @@ const zlog = @import("zlog");
 const zterm = @import("zterm");
 const App = zterm.App(
     Model,
-    Model.Pages,
+    union(enum) {
+        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);

src/model.zig

@@ -1,6 +1,8 @@
 page: Pages,
 document: Document,
 
+searching: bool = false,
+
 pub fn deinit(this: *@This(), allocator: Allocator) void {
     this.page.deinit(allocator);
     this.document.deinit(allocator);
@@ -26,7 +28,7 @@ pub const Document = struct {
     title: ?[]const u8 = null,
     date: ?[]const u8 = null,
     content: []const u8 = undefined,
-    ptr: []const u8,
+    ptr: ?[]const u8,
 
     const Preemble = enum {
         title,
@@ -36,7 +38,7 @@ pub const Document = struct {
     pub const invalidPage: @This() = .{
         .title = "Page not found",
         .content = "Requested page does not exist",
-        .ptr = undefined,
+        .ptr = null,
     };
 
     pub fn init(content: []const u8) @This() {
@@ -67,8 +69,8 @@ pub const Document = struct {
     }
 
     pub fn deinit(this: *@This(), allocator: Allocator) void {
-        allocator.free(this.ptr);
-        this.* = .{ .ptr = undefined };
+        if (this.ptr) |ptr| allocator.free(ptr);
+        this.* = .{ .ptr = null };
     }
 };
 

src/navigation.zig

@@ -1,6 +1,6 @@
-pub fn NavigationButton(App: type) fn (std.meta.FieldEnum(App.Event)) type {
+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.Event)) type {
+        fn navigation_fn(page: std.meta.FieldEnum(App.Model.Pages)) type {
             return struct {
                 text: []const u8,
                 highlight: bool,
@@ -12,7 +12,6 @@ pub fn NavigationButton(App: type) fn (std.meta.FieldEnum(App.Event)) type {
                         .highlight = switch (page) {
                             .about => model.page == .about,
                             .blog => model.page == .blog,
-                            else => @compileError("NavigationButton initiated with non page `App.Event` variant"),
                         },
                         .queue = queue,
                     };
@@ -22,21 +21,27 @@ pub fn NavigationButton(App: type) fn (std.meta.FieldEnum(App.Event)) type {
                     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) {
-                        .about, .blog => this.highlight = event == page,
+                        .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 => .about,
-                            .blog => .{ .blog = null },
-                            else => @compileError("The provided navigation button event to trigger is not a `App.Model.Pages` enum variation."),
+                            .about => .{ .page = .about },
+                            .blog => .{
+                                .page = .{ .blog = null },
+                            },
                         }),
                         else => {},
                     }
@@ -49,8 +54,7 @@ pub fn NavigationButton(App: type) fn (std.meta.FieldEnum(App.Event)) type {
                     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;
+                        if (this.highlight) cells[idx].style.ul = .green;
                         cells[idx].style.emphasis = &.{.underline};
                         cells[idx].cp = cp;
                     }