Fix warnings & update deps

.storybook/main.ts

@@ -6,6 +6,7 @@ const config: StorybookConfig = {
         "@storybook/addon-links",
         "@storybook/addon-essentials",
         "@storybook/addon-interactions",
+        "@storybook/addon-mdx-gfm"
     ],
     framework: {
         name: "@storybook/sveltekit",

package.json

@@ -30,54 +30,55 @@
         "svelte": "^4.1"
     },
     "devDependencies": {
-        "@storybook/addon-essentials": "^7.3.1",
-        "@storybook/addon-interactions": "^7.3.1",
-        "@storybook/addon-links": "^7.3.1",
-        "@storybook/blocks": "^7.3.1",
-        "@storybook/manager-api": "^7.3.1",
-        "@storybook/svelte": "^7.3.1",
-        "@storybook/sveltekit": "^7.3.1",
+        "@storybook/addon-essentials": "^7.3.2",
+        "@storybook/addon-interactions": "^7.3.2",
+        "@storybook/addon-links": "^7.3.2",
+        "@storybook/addon-mdx-gfm": "^7.3.2",
+        "@storybook/blocks": "^7.3.2",
+        "@storybook/manager-api": "^7.3.2",
+        "@storybook/svelte": "^7.3.2",
+        "@storybook/sveltekit": "^7.3.2",
         "@storybook/testing-library": "^0.2.0",
-        "@storybook/theming": "^7.3.1",
+        "@storybook/theming": "^7.3.2",
         "@sveltejs/adapter-auto": "^2.1.0",
-        "@sveltejs/kit": "^1.22.6",
-        "@sveltejs/package": "^2.2.1",
+        "@sveltejs/kit": "^1.23.0",
+        "@sveltejs/package": "^2.2.2",
         "@types/ramda": "^0.29.3",
-        "@typescript-eslint/eslint-plugin": "^6.4.0",
-        "@typescript-eslint/parser": "^6.4.0",
+        "@typescript-eslint/eslint-plugin": "^6.4.1",
+        "@typescript-eslint/parser": "^6.4.1",
         "autoprefixer": "^10.4.15",
-        "eslint": "^8.47.0",
-        "eslint-config-prettier": "^8.10.0",
+        "eslint": "^8.48.0",
+        "eslint-config-prettier": "^9.0.0",
         "eslint-plugin-storybook": "^0.6.13",
-        "eslint-plugin-svelte": "^2.32.4",
+        "eslint-plugin-svelte": "^2.33.0",
         "mdsvex": "^0.11.0",
         "postcss": "^8.4.28",
         "prettier": "^3.0.2",
         "prettier-plugin-svelte": "^3.0.3",
-        "publint": "^0.2.0",
+        "publint": "^0.2.2",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
-        "storybook": "^7.3.1",
+        "storybook": "^7.3.2",
         "svelte": "^4.2.0",
         "svelte-check": "^3.5.0",
         "tailwindcss": "^3.3.3",
-        "tslib": "^2.6.1",
-        "typescript": "^5.1.6",
+        "tslib": "^2.6.2",
+        "typescript": "^5.2.2",
         "vite": "^4.4.9"
     },
     "svelte": "./dist/index.js",
     "types": "./dist/index.d.ts",
     "type": "module",
     "dependencies": {
-        "@nostr-dev-kit/ndk": "^0.8.17",
+        "@nostr-dev-kit/ndk": "0.8.21-1",
         "@trivago/prettier-plugin-sort-imports": "^4.2.0",
         "classnames": "^2.3.2",
         "isomorphic-dompurify": "^1.8.0",
-        "lucide-svelte": "^0.268.0",
-        "marked": "^7.0.3",
+        "lucide-svelte": "^0.269.0",
+        "marked": "^7.0.5",
         "marked-gfm-heading-id": "^3.0.6",
         "marked-mangle": "^1.1.2",
-        "nostr-tools": "^1.14.0",
+        "nostr-tools": "^1.14.2",
         "ramda": "^0.29.0",
         "rehype-autolink-headings": "^6.1.1",
         "rehype-slug": "^5.1.0",

src/lib/event/EventCard.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
-    import { EventContent, Name } from '$lib';
-    import Avatar from '$lib/user/Avatar.svelte';
-    import type { NDKEvent } from '@nostr-dev-kit/ndk';
-    import type NDK from '@nostr-dev-kit/ndk';
+    import { EventContent, Name } from "$lib";
+    import Avatar from "$lib/user/Avatar.svelte";
+    import type { NDKEvent } from "@nostr-dev-kit/ndk";
+    import type NDK from "@nostr-dev-kit/ndk";
 
     export let ndk: NDK;
     export let id: string | undefined = undefined;
@@ -15,7 +15,7 @@
         } else if (id) {
             event = await ndk.fetchEvent(id);
 
-            if (!event) reject('Event not found');
+            if (!event) reject("Event not found");
             else resolve(event);
         }
     });

src/lib/event/content/EventContent.svelte

@@ -28,7 +28,7 @@
 {:else if event.kind === 1985}
     <!-- <Kind1985 {event} {anchorId} {maxLength} {showEntire} /> -->
 {:else if event.kind === 9802}
-    <Kind9802 {ndk} {event} />
+    <Kind9802 {event} />
 {:else if event.kind === 30000}
     <Kind30000 {ndk} list={NDKList.from(event)} />
 {:else if event.kind === 30001}

src/lib/event/content/Kind9802.svelte

@@ -5,15 +5,14 @@
     import { urlIsMedia } from "$lib/utils/notes";
     import DOMPurify from "isomorphic-dompurify";
 
-    export let ndk: NDK;
     export let event: NDKEvent;
     // export const showMedia = false; // Unused so far
 
     const ref = event?.tagValue("r");
     let context = event?.tagValue("context");
     context = context?.replace(
         event?.content as string,
-        `<span class='highlight--content'>${event?.content}</span>`,
+        `<span class='highlight--content'>${event?.content}</span>`
     );
 </script>
 

src/lib/event/content/NoteContentLink.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    export let value;
+    export let value: any;
     export let showMedia = false;
 
     const isImage = value.url.match(/^.*\.(jpg|jpeg|png|webp|gif|avif|svg)/gi);
@@ -13,18 +13,19 @@
     {#if isImage}
         <img src={value.url} alt={value.url} />
     {:else if isVideo}
-        <video key={value.url} src={value.url} controls />
+        <!-- svelte-ignore a11y-media-has-caption -->
+        <video src={value.url} controls />
     {:else if isAudio}
         <audio src={value.url} controls>
-            <a href={value.url}>{value.url.replace(/https?:\/\/(www\.)?/, '')}</a>
+            <a href={value.url}>{value.url.replace(/https?:\/\/(www\.)?/, "")}</a>
         </audio>
     {:else}
         <a href={value.url}>
-            {value.url.replace(/https?:\/\/(www\.)?/, '')}
+            {value.url.replace(/https?:\/\/(www\.)?/, "")}
         </a>
     {/if}
 {:else}
     <a href={value.url}>
-        {value.url.replace(/https?:\/\/(www\.)?/, '')}
+        {value.url.replace(/https?:\/\/(www\.)?/, "")}
     </a>
 {/if}

src/lib/user/Nip05.svelte

@@ -55,9 +55,10 @@
 
 <span class="name">
     {#await fetchProfilePromise}
+        <span class="nip05 {$$props.class}" style={$$props.style}></span>
     {:then userProfile}
         <span class="nip05 {$$props.class}" style={$$props.style}>
-            {prettifyNip05(userProfile)}
+            {userProfile.nip05 ? prettifyNip05(userProfile.nip05) : ""}
         </span>
     {:catch error}
         <span class="nip05--error {$$props.class}" style={$$props.style}>

src/lib/user/UserCard.svelte

@@ -58,7 +58,7 @@
     .userCard {
         display: flex;
         flex-direction: row;
-        align-items: start;
+        align-items: flex-start;
         gap: 1rem;
         padding: 1rem;
         border: 1px solid var(--color-border);