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,18 +12,24 @@
 
   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());
 
+  // Only set up bookmark handling if we have a valid publication tree
+  if (publicationTree && indexEvent) {
     publicationTree.onBookmarkMoved((address) => {
       goto(`#${address}`, {
         replaceState: true,
@@ -45,8 +51,12 @@
         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
+{#if indexEvent && data.indexEvent}
+  <ArticleNav
     publicationType={data.publicationType}
     rootId={data.indexEvent.id}
     indexEvent={indexEvent}
-/>
+  />
 
-<main class="publication {data.publicationType}">
+  <main class="publication {data.publicationType}">
     <Publication
       rootAddress={indexEvent.tagAddress()}
       publicationType={data.publicationType}
       indexEvent={indexEvent}
     />
-</main> 
+  </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}