From ce67365a498f3d0ada746ca37a859bac31081df7 Mon Sep 17 00:00:00 2001
From: Alan Daniels <alan.daniels10@gmail.com>
Date: Sun, 2 Nov 2025 15:55:01 +1100
Subject: [PATCH] making room for context to add to the props

---
 src/App.zig               |  2 +-
 src/context.zig           | 12 ++++++++----
 src/layout/Layout.vue     | 30 +++++++++++++++++++-----------
 src/main.zig              |  2 +-
 src/modules/404.vue       |  8 ++++++--
 src/modules/home/home.vue |  7 ++++---
 src/modules/home/test.vue |  9 +++++----
 7 files changed, 44 insertions(+), 26 deletions(-)

diff --git a/src/App.zig b/src/App.zig
index 46fd1b7..86e55e1 100644
--- a/src/App.zig
+++ b/src/App.zig
@@ -467,7 +467,7 @@ pub fn Create(
             if (r.path) |unsan_p| {
                 const p = sanitizePath(unsan_p);
                 for (_static.endpoints.items) |interface| {
-                    if (std.mem.startsWith(u8, p, interface.path) and std.mem.eql(u8, p, interface.path)) {
+                    if (std.mem.eql(u8, p, interface.path)) {
                         return interface.call(interface, r) catch |err| {
                             // if error is not dealt with in the interface, e.g.
                             // if error strategy is .raise:
diff --git a/src/context.zig b/src/context.zig
index ae57085..fd6ed07 100644
--- a/src/context.zig
+++ b/src/context.zig
@@ -15,13 +15,17 @@ pub fn init(connection: sqlite.Db) @This() {
     };
 }
 
-pub fn SendInertiaResponse(endpoint: anytype, r: zap.Request, arena: Allocator, component: []const u8, props: anytype) !void {
+pub fn SendInertiaResponse(endpoint: anytype, context: ?*@This(), r: zap.Request, arena: Allocator, component: []const u8, props: anytype) !void {
+    _ = context;
     const inertia_json = try std.fmt.allocPrint(
         arena,
         "{f}",
         .{std.json.fmt(.{
             .component = component,
-            .props = props,
+            .props = .{
+                .nav = .{},
+                .page = props,
+            },
             .url = endpoint.path,
             .version = "",
         }, .{
@@ -82,6 +86,6 @@ pub const HtmlEncodeFormatter = struct {
 };
 
 pub fn unhandledRequest(ctx: *@This(), arena: Allocator, r: zap.Request) anyerror!void {
-    _ = ctx;
-    try SendInertiaResponse(.{ .path = r.path orelse "/" }, r, arena, "404", .{});
+    const path = r.path orelse "/not-found";
+    try SendInertiaResponse(.{ .path = path }, ctx, r, arena, "404", .{});
 }
diff --git a/src/layout/Layout.vue b/src/layout/Layout.vue
index f88e57e..79eea45 100644
--- a/src/layout/Layout.vue
+++ b/src/layout/Layout.vue
@@ -3,17 +3,25 @@ import { Link } from "@inertiajs/vue3";
 </script>
 
 <template>
-  <header class="p-3 bg-rose-800 dark:bg-rose-950">
-    <div class="max-w-5xl flex gap-2 mx-auto">
-      <Link href="/" class="text-white font-extrabold">
-        <img src="@/favicon.svg" class="h-8 inline" />
-        <span class="px-1 relative top-0.5">OwnMedia</span>
-      </Link>
-    </div>
-  </header>
-  <div class="p-4">
-    <div class="p-4 bg-rose-950 rounded">
-      <slot />
+  <div class="h-screen flex flex-col">
+    <header class="p-3 bg-rose-800 dark:bg-rose-950">
+      <div class="max-w-5xl flex gap-2 mx-auto">
+        <Link href="/" class="text-white font-extrabold">
+          <img src="@/favicon.svg" class="h-8 inline" />
+          <span
+            class="px-1 relative top-0.5 text-transparent bg-clip-text bg-gradient-to-r to-slate-600 from-[#2f365f]"
+            >OwnMedia</span
+          >
+        </Link>
+      </div>
+    </header>
+    <div class="p-4 h-full">
+      <div class="p-4 bg-rose-950 rounded h-full">
+        <slot />
+      </div>
     </div>
+    <footer class="bg-slate-800 px-4">
+      footer
+    </footer>
   </div>
 </template>
diff --git a/src/main.zig b/src/main.zig
index 12a8181..5a12c7d 100644
--- a/src/main.zig
+++ b/src/main.zig
@@ -36,7 +36,7 @@ const SimpleEndpoint = struct {
     pub fn get(e: *SimpleEndpoint, arena: Allocator, context: *Context, r: zap.Request) !void {
         const thread_id = std.Thread.getCurrentId();
 
-        try Context.SendInertiaResponse(e, r, arena, e.component, .{
+        try Context.SendInertiaResponse(e, context, r, arena, e.component, .{
             .thread_id = thread_id,
             .counter = context.counter,
         });
diff --git a/src/modules/404.vue b/src/modules/404.vue
index a71b133..62b1f73 100644
--- a/src/modules/404.vue
+++ b/src/modules/404.vue
@@ -7,7 +7,11 @@ defineProps({ thread_id: Number, counter: Number });
 
 <template>
   <Layout>
-    <h1>404</h1>
-    <Link href="/" class="p-button mt-4">Back Home</Link>
+    <div class="flex w-full h-full">
+      <div class="self-center mx-auto">
+        <h1 class="self-center w-fit mx-auto font-extrabold text-4xl" >404</h1>
+        <Link href="/" class="mt-4 font-thin">Back Home</Link>
+      </div>
+    </div>
   </Layout>
 </template>
diff --git a/src/modules/home/home.vue b/src/modules/home/home.vue
index d06cb58..61e9422 100644
--- a/src/modules/home/home.vue
+++ b/src/modules/home/home.vue
@@ -1,8 +1,9 @@
-<script setup>
+<script setup lang="ts">
 import Layout from "@/layout/Layout.vue";
 import { Head, Link } from "@inertiajs/vue3";
 
-defineProps({ thread_id: Number, counter: Number });
+const props = defineProps<{ page: object }>();
+const { thread_id, counter } = props.page;
 </script>
 
 <template>
@@ -12,6 +13,6 @@ defineProps({ thread_id: Number, counter: Number });
     <h1 class="">Welcome</h1>
     <p>The thread id is '{{ thread_id }}'.</p>
     <p>The counter is at '{{ counter }}'.</p>
-    <Link href="/test" class="p-button mt-4">To Test</Link>
+    <Link href="/test" class="mt-4">To Test</Link>
   </Layout>
 </template>
diff --git a/src/modules/home/test.vue b/src/modules/home/test.vue
index 8d93334..2e68aab 100644
--- a/src/modules/home/test.vue
+++ b/src/modules/home/test.vue
@@ -1,8 +1,9 @@
-<script setup>
+<script setup lang="ts">
 import Layout from "@/layout/Layout.vue";
 import { Head, Link } from "@inertiajs/vue3";
 
-defineProps({ thread_id: Number, counter: Number });
+const props = defineProps<{ page: object }>();
+const { thread_id, counter } = props.page;
 </script>
 
 <template>
@@ -12,7 +13,7 @@ defineProps({ thread_id: Number, counter: Number });
     <h1 class="">Welcome</h1>
     <p>The thread id is '{{ thread_id }}'.</p>
     <p>The counter is at '{{ counter }}'.</p>
-    <Link href="/test" class="p-button mt-4 mr-2">Again!</Link>
-    <Link href="/" class="p-button mt-4">Back Home</Link>
+    <Link href="/test" class="mt-4 mr-2">Again!</Link>
+    <Link href="/" class="mt-4">Back Home</Link>
   </Layout>
 </template>