Fixed relay display on About page

src/lib/ndk.ts

@@ -6,7 +6,7 @@ import NDK, {
   NDKUser,
   NDKEvent,
 } from "@nostr-dev-kit/ndk";
-import { get, writable, type Writable } from "svelte/store";
+import { writable, get, type Writable } from "svelte/store";
 import {
   loginStorageKey,
 } from "./consts.ts";
@@ -33,6 +33,11 @@ export const outboxRelays = writable<string[]>([]);
 export const activeInboxRelays = writable<string[]>([]);
 export const activeOutboxRelays = writable<string[]>([]);
 
+// Subscribe to userStore changes and update ndkSignedIn accordingly
+userStore.subscribe((userState) => {
+  ndkSignedIn.set(userState.signedIn);
+});
+
 /**
  * Custom authentication policy that handles NIP-42 authentication manually
  * when the default NDK authentication fails

src/routes/publication/[type]/[identifier]/+page.svelte

@@ -12,41 +12,51 @@
 
   let { data }: PageProps = $props();
 
-  const indexEvent = createNDKEvent(data.ndk, data.indexEvent);
-  const publicationTree = new SveltePublicationTree(indexEvent, data.ndk);
-  const toc = new TableOfContents(
+  // data.indexEvent can be null from server-side rendering
+  // We need to handle this case properly
+  const indexEvent = data.indexEvent ? createNDKEvent(data.ndk, data.indexEvent) : null;
+  
+  // Only create publication tree if we have a valid index event
+  const publicationTree = indexEvent ? new SveltePublicationTree(indexEvent, data.ndk) : null;
+  const toc = indexEvent ? new TableOfContents(
     indexEvent.tagAddress(),
-    publicationTree,
+    publicationTree!,
     page.url.pathname ?? "",
-  );
+  ) : null;
 
   setContext("publicationTree", publicationTree);
   setContext("toc", toc);
   setContext("asciidoctor", Processor());
 
-  publicationTree.onBookmarkMoved((address) => {
-    goto(`#${address}`, {
-      replaceState: true,
-    });
-
-    // TODO: Extract IndexedDB interaction to a service layer.
-    // Store bookmark in IndexedDB
-    const db = indexedDB.open("alexandria", 1);
-    db.onupgradeneeded = () => {
-      const objectStore = db.result.createObjectStore("bookmarks", {
-        keyPath: "key",
+  // Only set up bookmark handling if we have a valid publication tree
+  if (publicationTree && indexEvent) {
+    publicationTree.onBookmarkMoved((address) => {
+      goto(`#${address}`, {
+        replaceState: true,
       });
-    };
 
-    db.onsuccess = () => {
-      const transaction = db.result.transaction(["bookmarks"], "readwrite");
-      const store = transaction.objectStore("bookmarks");
-      const bookmarkKey = `${indexEvent.tagAddress()}`;
-      store.put({ key: bookmarkKey, address });
-    };
-  });
+      // TODO: Extract IndexedDB interaction to a service layer.
+      // Store bookmark in IndexedDB
+      const db = indexedDB.open("alexandria", 1);
+      db.onupgradeneeded = () => {
+        const objectStore = db.result.createObjectStore("bookmarks", {
+          keyPath: "key",
+        });
+      };
+
+      db.onsuccess = () => {
+        const transaction = db.result.transaction(["bookmarks"], "readwrite");
+        const store = transaction.objectStore("bookmarks");
+        const bookmarkKey = `${indexEvent.tagAddress()}`;
+        store.put({ key: bookmarkKey, address });
+      };
+    });
+  }
 
   onMount(() => {
+    // Only handle bookmarks if we have valid components
+    if (!publicationTree || !indexEvent) return;
+
     // TODO: Extract IndexedDB interaction to a service layer.
     // Read bookmark from IndexedDB
     const db = indexedDB.open("alexandria", 1);
@@ -81,16 +91,24 @@
   });
 </script>
 
-<ArticleNav
-  publicationType={data.publicationType}
-  rootId={data.indexEvent.id}
-  indexEvent={indexEvent}
-/>
-
-<main class="publication {data.publicationType}">
-  <Publication
-    rootAddress={indexEvent.tagAddress()}
+{#if indexEvent && data.indexEvent}
+  <ArticleNav
     publicationType={data.publicationType}
+    rootId={data.indexEvent.id}
     indexEvent={indexEvent}
   />
-</main> 
+
+  <main class="publication {data.publicationType}">
+    <Publication
+      rootAddress={indexEvent.tagAddress()}
+      publicationType={data.publicationType}
+      indexEvent={indexEvent}
+    />
+  </main>
+{:else}
+  <main class="publication">
+    <div class="flex items-center justify-center min-h-screen">
+      <p class="text-gray-600 dark:text-gray-400">Loading publication...</p>
+    </div>
+  </main>
+{/if}