30818 component powered by svelte-asciidoc. (#247)

nostr-dev-kit · Jun 30, 2024 · 26c7ee7 · 26c7ee7
1 parent 7699d49
commit 26c7ee7
Show file tree

Hide file tree

Showing 4 changed files with 102 additions and 3 deletions.
diff --git a/ndk-svelte-components/package.json b/ndk-svelte-components/package.json
@@ -84,6 +84,7 @@
     "rehype-autolink-headings": "^7.0.0",
     "rehype-slug": "^6.0.0",
     "sanitize-html": "^2.11.0",
+    "svelte-asciidoc": "^0.0.2",
     "svelte-preprocess": "^5.0.4",
     "svelte-time": "^0.8.3"
   },

diff --git a/ndk-svelte-components/src/lib/event/content/EventContent.svelte b/ndk-svelte-components/src/lib/event/content/EventContent.svelte
@@ -10,7 +10,7 @@
     import Kind30000 from "./Kind30000.svelte";
     import Kind30001 from "./Kind30001.svelte";
     import Kind30023 from "./Kind30023.svelte";
-    // import Kind30818 from "./Kind30818.svelte";
+    import Kind30818 from "./Kind30818.svelte";
     import type { SvelteComponent } from "svelte";
     import type { MarkedExtension } from "marked";
 
@@ -33,7 +33,7 @@
      */
     export let content = event?.content;
 
-    const markdownKinds = [ NDKKind.Article, 30818, 30041 ]
+    const markdownKinds = [ NDKKind.Article, 30041 ]
 </script>
 
 {#if event}
@@ -62,7 +62,15 @@
             class={$$props.class}
             {markedExtensions}
         />
+    {:else if event.kind === 30818}
+        <Kind30818
+            {ndk}
+            {event}
+            {...$$props}
+            on:click
+            class={$$props.class}
+        />
     {:else}
         <Kind1 {ndk} {content} {event} {anchorId} {showMedia} on:click class={$$props.class} {maxLength} {showEntire} {mediaCollectionComponent} {eventCardComponent} />
     {/if}
-{/if}
+{/if}
diff --git a/ndk-svelte-components/src/lib/event/content/Kind30818.svelte b/ndk-svelte-components/src/lib/event/content/Kind30818.svelte
@@ -0,0 +1,40 @@
+<script lang="ts">
+    import { createEventDispatcher } from 'svelte';
+    // import type NDK from "@nostr-dev-kit/ndk";
+    import { NDKEvent } from "@nostr-dev-kit/ndk";
+    import SvelteAsciidoc from "svelte-asciidoc";
+    import WikilinkComponent from "../../utils/components/WikilinkComponent.svelte";
+
+    // export let ndk: NDK;
+    export let event: NDKEvent;
+
+    const dispatch = createEventDispatcher();
+
+    const content = event.content.replace(/\[\[(.*?)\]\]/g, (_: any, content: any) => {
+      let [target, display] = content.split('|');
+      display = display || target;
+      target = normalizeArticleName(target);
+      return `link:wikilink:${target}[${display}]`;
+    });
+
+    function normalizeArticleName(input: string): string {
+      return input.trim().toLowerCase().replace(/\W/g, '-');
+    }
+</script>
+
+<!-- svelte-ignore a11y-click-events-have-key-events a11y-no-static-element-interactions -->
+<div class="wiki-article {$$props.class??""}" on:click>
+    <SvelteAsciidoc
+      source={content}
+      naturalRenderers={{ a: WikilinkComponent }}
+      extra={{dispatch}}
+    />
+</div>
+
+<style lang="postcss">
+    * > :global(.article img) {
+        object-fit: contain;
+        width: 100%;
+        height: 100%;
+    }
+</style>
diff --git a/ndk-svelte-components/src/lib/utils/components/WikilinkComponent.svelte b/ndk-svelte-components/src/lib/utils/components/WikilinkComponent.svelte
@@ -0,0 +1,50 @@
+<script lang="ts">
+  import { getExtra } from 'svelte-asciidoc';
+
+  export let attrs: { [_: string]: string };
+
+  const { href } = attrs;
+  const { dispatch } = getExtra()
+
+  let wikitarget: string;
+  if (href.startsWith('wikilink:')) {
+    wikitarget = href.substring(9);
+  }
+
+  function handleWikilinkClick(e: MouseEvent) {
+    e.preventDefault()
+    dispatch('click', {
+      type: 'wikilink',
+      target: wikitarget,
+    })
+  }
+</script>
+
+{#if href.startsWith('wikilink')}
+  <a
+    title={`wikilink to: "${wikitarget}"`}
+    href={`/${wikitarget}`} on:click={handleWikilinkClick}><slot /></a
+  >
+{:else}
+  <!-- svelte-ignore a11y-missing-attribute -->
+  <a target="_blank" {...attrs}>
+    <slot />
+    <svg
+      class="align-text-top h-3.5 inline pl-1"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      ><g stroke-linecap="round" stroke-linejoin="round"></g><g>
+        <g>
+          <path
+            d="M10.0002 5H8.2002C7.08009 5 6.51962 5 6.0918 5.21799C5.71547 5.40973 5.40973 5.71547 5.21799 6.0918C5 6.51962 5 7.08009 5 8.2002V15.8002C5 16.9203 5 17.4801 5.21799 17.9079C5.40973 18.2842 5.71547 18.5905 6.0918 18.7822C6.5192 19 7.07899 19 8.19691 19H15.8031C16.921 19 17.48 19 17.9074 18.7822C18.2837 18.5905 18.5905 18.2839 18.7822 17.9076C19 17.4802 19 16.921 19 15.8031V14M20 9V4M20 4H15M20 4L13 11"
+            stroke="#000000"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          ></path>
+        </g>
+      </g></svg
+    >
+  </a>
+{/if}