making room for context to add to the props

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:

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", .{});
 }

src/layout/Layout.vue

@@ -3,17 +3,25 @@ import { Link } from "@inertiajs/vue3";
 </script>
 
 <template>
+  <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">OwnMedia</span>
+          <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">
-    <div class="p-4 bg-rose-950 rounded">
+    <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>

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,
         });

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>

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>

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>