use urlFactory to generate URLs on rendering engine

nostr-dev-kit · Sep 24, 2024 · 5ac3ce8 · 5ac3ce8
1 parent d6cfa8a
commit 5ac3ce8
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 13 deletions.
diff --git a/.changeset/witty-starfishes-move.md b/.changeset/witty-starfishes-move.md
@@ -0,0 +1,5 @@
+---
+"@nostr-dev-kit/ndk-svelte-components": patch
+---
+
+use urlFactory to generate URLs on rendering engine
diff --git a/ndk-svelte-components/src/lib/event/content/EventContent.svelte b/ndk-svelte-components/src/lib/event/content/EventContent.svelte
@@ -72,6 +72,8 @@
             {showMedia}
             on:click
             class={$$props.class}
+            {urlFactory}
+            {eventCardComponent}
             {markedExtensions}
         />
     {:else if event.kind === 30818}

diff --git a/ndk-svelte-components/src/lib/event/content/Kind1.svelte b/ndk-svelte-components/src/lib/event/content/Kind1.svelte
@@ -24,7 +24,7 @@
     import type NDK from '@nostr-dev-kit/ndk';
     import EventCard from '../EventCard.svelte';
     import { pluck, values, without } from 'ramda';
-    import type { SvelteComponent } from 'svelte';
+    import type { ComponentType, SvelteComponent } from 'svelte';
     import type { UrlFactory } from '$lib';
     // import NoteContentEntity from "./NoteContentEntity.svelte"
 
@@ -35,7 +35,7 @@
     export let showMedia = true;
     export let content = event.content;
     export let mediaCollectionComponent: typeof SvelteComponent | undefined = undefined;
-    export let eventCardComponent: typeof SvelteComponent = EventCard;
+    export let eventCardComponent: ComponentType = EventCard;
     export let urlFactory: UrlFactory;
 
     export const getLinks = (parts: any[]) => pluck(

diff --git a/ndk-svelte-components/src/lib/event/content/Kind30023.svelte b/ndk-svelte-components/src/lib/event/content/Kind30023.svelte
@@ -9,18 +9,21 @@
     import NoteContentPerson from "./NoteContentPerson.svelte";
     import { LINK, HTML, NEWLINE, TOPIC, parseContent, LINKCOLLECTION } from "../../utils/notes.js";
     import { markdownToHtml } from "$lib/utils/markdown";
-    import type { SvelteComponent } from "svelte";
+    import type { ComponentType } from "svelte";
     import RenderHtml from "./RenderHtml.svelte";
     import type sanitizeHtml from "sanitize-html";
     import type { MarkedExtension } from "marked";
+    import type { UrlFactory } from "$lib";
 
     export let ndk: NDK;
     export let article: NDKArticle;
     export let showMedia: boolean = true;
     export let content = article.content;
-    export let mediaCollectionComponent: typeof SvelteComponent | undefined = undefined;
+    export let mediaCollectionComponent: ComponentType | undefined = undefined;
     export let sanitizeHtmlOptions: sanitizeHtml.IOptions | undefined = undefined;
+    export let eventCardComponent: ComponentType = EventCard;
     export let markedExtensions: MarkedExtension[] = [];
+    export let urlFactory: UrlFactory;
 
     const htmlContent = markdownToHtml(content, sanitizeHtmlOptions, markedExtensions);
     const parsed = parseContent({ content: htmlContent, tags: article.tags, html: true });
@@ -37,7 +40,7 @@
             <!-- eslint-disable-next-line svelte/no-at-html-tags -->
             {@html value}
         {:else if type === TOPIC}
-            <NoteContentTopic {value} on:click />
+            <NoteContentTopic {value} {urlFactory} on:click />
         {:else if type === LINK}
             <NoteContentLink {value} {showMedia} on:click={() => alert(value)} />
         {:else if type === LINKCOLLECTION}
@@ -50,14 +53,10 @@
                     {/each}
                 </div>
             {/if}
-        {:else if type.match(/^nostr:np(rofile|ub)$/)}
-            <NoteContentPerson {ndk} {value} on:click />
+        {:else if type.match(/^nostr:np(rofile|ub)$/) && value.pubkey}
+            <NoteContentPerson {ndk} {value} {urlFactory} on:click />
         {:else if type.startsWith('nostr:')}
-            {#if showMedia}
-                <EventCard {ndk} id={value.id} relays={value.relays} />
-            {:else}
-                {value.entity}
-            {/if}
+            <svelte:component this={eventCardComponent} {ndk} id={value.id??value.entity} relays={value.relays} />
         {:else}
             <!-- eslint-disable-next-line svelte/no-at-html-tags -->
             <RenderHtml {ndk} content={value} on:click />

diff --git a/ndk-svelte-components/src/lib/utils/notes.ts b/ndk-svelte-components/src/lib/utils/notes.ts
@@ -233,7 +233,7 @@ export const parseContent = ({ content, tags = [], html = false }: ContentArgs):
         let part: any[] | undefined;
 
         if (html) {
-            // part = parseMention() || parseTopic();
+            part = parseBech32() || parseMention() || parseTopic();
         } else {
             part = parseHtml() ||
                 parseNewline() ||