From 4dc6ce0b90ea6cd4ff7aee47e52cd06cba0a1ccf Mon Sep 17 00:00:00 2001
From: Sebastian Jeltsch <sebastian@trailbase.io>
Date: Tue, 14 Apr 2026 09:40:37 +0200
Subject: [PATCH] Load `*.wasm` components via symlinks. Fixes blog example's
 auth UI.

Minor: also fix avatar fallback in blog example.
---
 crates/wasm-runtime-host/src/lib.rs       | 11 ++++---
 examples/blog/web/src/components/Auth.tsx | 36 ++++++++++-------------
 2 files changed, 21 insertions(+), 26 deletions(-)

diff --git a/crates/wasm-runtime-host/src/lib.rs b/crates/wasm-runtime-host/src/lib.rs
index a76a7786..dce00ee2 100644
--- a/crates/wasm-runtime-host/src/lib.rs
+++ b/crates/wasm-runtime-host/src/lib.rs
@@ -424,14 +424,13 @@ pub fn find_wasm_components(components_path: impl AsRef<std::path::Path>) -> Vec
         return None;
       };
 
-      if !metadata.is_file() {
-        return None;
+      if metadata.is_file() || metadata.is_symlink() {
+        let path = entry.path();
+        if path.extension()? == "wasm" {
+          return Some(path);
+        }
       }
 
-      let path = entry.path();
-      if path.extension()? == "wasm" {
-        return Some(path);
-      }
       return None;
     })
     .collect();
diff --git a/examples/blog/web/src/components/Auth.tsx b/examples/blog/web/src/components/Auth.tsx
index 1e0591f8..ab963f5c 100644
--- a/examples/blog/web/src/components/Auth.tsx
+++ b/examples/blog/web/src/components/Auth.tsx
@@ -1,6 +1,6 @@
-import { Match, Suspense, Switch } from "solid-js";
+import { Match, Switch } from "solid-js";
 import { useStore } from "@nanostores/solid";
-import { TbOutlineUser } from "solid-icons/tb";
+import { TbFillUser } from "solid-icons/tb";
 import type { User } from "trailbase";
 
 import { $client, $user, removeTokens, HOST } from "@/lib/client";
@@ -17,26 +17,22 @@ function UserBadge(props: { user: User | undefined }) {
     return undefined;
   };
 
-  const Fallback = () => (
-    <TbOutlineUser class="inline-block size-6 rounded-full bg-pacamara-secondary p-1 dark:text-white" />
-  );
-
   return (
-    <Suspense fallback={<p>...</p>}>
-      <div class="flex items-center gap-2">
-        <Switch fallback={<Fallback />}>
-          <Match when={avatar()}>
-            <img
-              class="inline-block size-6 rounded-full"
-              src={avatar()!}
-              alt="avatar"
-            />
-          </Match>
-        </Switch>
+    <div class="flex items-center gap-2">
+      <object
+        class="inline-block size-6 rounded-full hover:bg-gray-200"
+        type="image/png"
+        data={avatar()}
+        aria-label="Avatar image"
+      >
+        {/* Fallback */}
+        <div class="size-6 flex items-center justify-center">
+          <TbFillUser size={18} color="#0073aa" />
+        </div>
+      </object>
 
-        <span>{profile()?.profile?.username ?? props.user?.email}</span>
-      </div>
-    </Suspense>
+      <span>{profile()?.profile?.username ?? props.user?.email}</span>
+    </div>
   );
 }