tidied up

src/lib/components/EventDetails.svelte

@@ -71,7 +71,6 @@
     if (event.kind === 0) {
       // NIP-05
       const nip05 = profile?.nip05 || getMatchingTags(event, 'nip05')[0]?.[1];
-      if (nip05) ids.push({ label: 'NIP-05', value: nip05 });
       // npub
       const npub = toNpub(event.pubkey);
       if (npub) ids.push({ label: 'npub', value: npub, link: `/events?id=${npub}` });
@@ -155,7 +154,7 @@
 
   <!-- If event is profile -->
   {#if event.kind === 0}
-    <ProfileHeader {event} {profile} />
+    <ProfileHeader {event} {profile} identifiers={getIdentifiers(event, profile)} />
   {/if}
 
   <!-- Tags Array -->
@@ -170,23 +169,6 @@
     </div>
   {/if}
 
-  <!-- Identifier List -->
-  <div class="flex flex-col space-y-1">
-    <span class="text-gray-600 dark:text-gray-400">Identifiers:</span>
-    <div class="flex flex-wrap gap-2">
-      {#each getIdentifiers(event, profile) as id}
-        {#if id.link}
-          <a href={id.link}
-            class="px-2 py-1 rounded border font-mono text-xs bg-primary-50 dark:bg-primary-900 hover:bg-primary-100 dark:hover:bg-primary-800 transition-all {isCurrentSearch(id.value) ? 'border-primary-500 ring-2 ring-primary-400' : 'border-gray-300'}"
-            >{id.label}: {id.value}</a>
-        {:else}
-          <span class="px-2 py-1 rounded border font-mono text-xs bg-primary-50 dark:bg-primary-900 {isCurrentSearch(id.value) ? 'border-primary-500 ring-2 ring-primary-400' : 'border-gray-300'}"
-            >{id.label}: {id.value}</span>
-        {/if}
-      {/each}
-    </div>
-  </div>
-
   <!-- Raw Event JSON -->
   <details class="bg-primary-50 dark:bg-primary-900 rounded p-4">
     <summary class="cursor-pointer font-semibold text-primary-700 dark:text-primary-300 mb-2">

src/lib/components/Preview.svelte

@@ -5,6 +5,7 @@
   import Self from './Preview.svelte';
   import { contentParagraph, sectionHeading } from '$lib/snippets/PublicationSnippets.svelte';
   import BlogHeader from "$components/cards/BlogHeader.svelte";
+  import { getMatchingTags } from '$lib/utils/nostrUtils';
 
   // TODO: Fix move between parents.
 
@@ -101,14 +102,14 @@
   function byline(rootId: string, index: number) {
     console.log(rootId, index, blogEntries);
     const event = blogEntries[index][1];
-    const author = event ? event.getMatchingTags("author")[0][1] : '';
+    const author = event ? getMatchingTags(event, 'author')[0][1] : '';
     return author ?? "";
   }
 
   function hasCoverImage(rootId: string, index: number) {
     console.log(rootId);
     const event = blogEntries[index][1];
-    const image = event && event.getMatchingTags("image")[0] ? event.getMatchingTags("image")[0][1] : '';
+    const image = event && getMatchingTags(event, 'image')[0] ? getMatchingTags(event, 'image')[0][1] : '';
     return image ?? '';
   }
 

src/lib/components/cards/ProfileHeader.svelte

@@ -5,10 +5,11 @@
   import { type NostrProfile, toNpub } from "$lib/utils/nostrUtils.ts";
   import QrCode from "$components/util/QrCode.svelte";
   import CopyToClipboard from "$components/util/CopyToClipboard.svelte";
-  import { bech32 } from 'bech32';
+  // @ts-ignore
+  import { bech32 } from 'https://esm.sh/bech32';
   import type { NDKEvent } from "@nostr-dev-kit/ndk";
 
-  const { event, profile } = $props<{ event: NDKEvent, profile: NostrProfile }>();
+  const { event, profile, identifiers = [] } = $props<{ event: NDKEvent, profile: NostrProfile, identifiers?: { label: string, value: string, link?: string }[] }>();
 
   let lnModalOpen = $state(false);
   let lnurl = $state<string | null>(null);
@@ -71,18 +72,24 @@
               </dd>
             </div>
           {/if}
+          {#if profile.lud16}
+            <div class="flex items-center gap-2 mt-4">
+              <dt class="font-semibold min-w-[120px]">Lightning Address:</dt>
+              <dd><Button class="btn-leather" color="primary" outline onclick={() => lnModalOpen = true}>{profile.lud16}</Button> </dd>
+            </div>
+          {/if}
           {#if profile.nip05}
             <div class="flex gap-2">
               <dt class="font-semibold min-w-[120px]">NIP-05:</dt>
               <dd>{profile.nip05}</dd>
             </div>
           {/if}
-          {#if profile.lud16}
-            <div class="flex items-center gap-2 mt-4">
-              <dt class="font-semibold min-w-[120px]">Lightning Address:</dt>
-              <dd><Button class="btn-leather" color="primary" outline onclick={() => lnModalOpen = true}>{profile.lud16}</Button> </dd>
+          {#each identifiers as id}
+            <div class="flex gap-2">
+              <dt class="font-semibold min-w-[120px]">{id.label}:</dt>
+              <dd class="break-all">{#if id.link}<a href={id.link} class="underline text-primary-700 dark:text-primary-200 break-all">{id.value}</a>{:else}{id.value}{/if}</dd>
             </div>
-          {/if}
+          {/each}
         </dl>
       </div>
     </div>

src/lib/components/util/CopyToClipboard.svelte

@@ -34,8 +34,10 @@
   {#if copied}
     <ClipboardCheckOutline class="inline mr-2" /> Copied!
   {:else}
-    {#if icon}
-      <svelte:component this={icon} class="inline mr-2" />
+    {#if icon === ClipboardCleanOutline}
+      <ClipboardCleanOutline class="inline mr-2" />
+    {:else if icon === ClipboardCheckOutline}
+      <ClipboardCheckOutline class="inline mr-2" />
     {/if}
     {displayText}
   {/if}

src/lib/components/util/QrCode.svelte

@@ -14,4 +14,4 @@
   onMount(renderQR);
 </script>
 
-<canvas class="qr-code" bind:this={canvas} />
+<canvas class="qr-code" bind:this={canvas}></canvas>

src/lib/parser.ts

@@ -629,7 +629,7 @@ export default class Pharos {
     let content: string = '';
 
     // Format title into AsciiDoc header.
-    const title = event.getMatchingTags('title')[0][1];
+    const title = getMatchingTags(event, 'title')[0][1];
     let titleLevel = '';
     for (let i = 0; i <= depth; i++) {
       titleLevel += '=';
@@ -639,7 +639,7 @@ export default class Pharos {
     // TODO: Deprecate `e` tags in favor of `a` tags required by NIP-62.
     let tags = getMatchingTags(event, 'a');
     if (tags.length === 0) {
-      tags = event.getMatchingTags('e');
+      tags = getMatchingTags(event, 'e');
     }
 
     // Base case: The event is a zettel.
@@ -654,10 +654,10 @@ export default class Pharos {
     );
 
     // if a blog, save complete events for later
-    if (event.getMatchingTags("type").length > 0 && event.getMatchingTags("type")[0][1] === 'blog') {
+    if (getMatchingTags(event, 'type').length > 0 && getMatchingTags(event, 'type')[0][1] === 'blog') {
       childEvents.forEach(child => {
         if (child) {
-          this.blogEntries.set(child?.getMatchingTags("d")?.[0]?.[1], child);
+          this.blogEntries.set(getMatchingTags(child, 'd')?.[0]?.[1], child);
         }
       })
     }
@@ -666,8 +666,8 @@ export default class Pharos {
     if (event.created_at) {
       this.rootIndexMetadata.publicationDate = new Date(event.created_at * 1000).toDateString();
     }
-    if (event.getMatchingTags('image').length > 0) {
-      this.rootIndexMetadata.coverImage = event.getMatchingTags('image')[0][1];
+    if (getMatchingTags(event, 'image').length > 0) {
+      this.rootIndexMetadata.coverImage = getMatchingTags(event, 'image')[0][1];
     }
 
     // Michael J - 15 December 2024 - This could be further parallelized by recursively fetching

vite.config.ts

@@ -26,6 +26,11 @@ export default defineConfig({
       $components: './src/components'
     }
   },
+  build: {
+    rollupOptions: {
+      external: ['bech32']
+    }
+  },
   test: {
     include: ['./tests/unit/**/*.test.ts', './tests/integration/**/*.test.ts']
   },