Skip to content

Commit

Permalink
Merge pull request #16 from nostr-dev-kit/add-kind30023
Browse files Browse the repository at this point in the history
Add kind30023
  • Loading branch information
pablof7z authored Aug 12, 2023
2 parents 638d728 + 80c1b5b commit c1cb1b5
Show file tree
Hide file tree
Showing 14 changed files with 276 additions and 121 deletions.
1 change: 0 additions & 1 deletion .prettierrc
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@
"printWidth": 100,
"tabWidth": 4,
"plugins": ["prettier-plugin-svelte"],
"pluginSearchDirs": ["."],
"overrides": [
{
"files": "*.svelte",
Expand Down
158 changes: 81 additions & 77 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,80 +1,84 @@
{
"name": "@nostr-dev-kit/ndk-svelte-components",
"version": "0.8.8-2",
"scripts": {
"dev": "vite dev",
"build": "vite build && npm run package",
"preview": "vite preview",
"package": "svelte-kit sync && svelte-package && publint",
"prepublishOnly": "npm run package",
"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
"lint": "prettier --plugin-search-dir . --check . && eslint .",
"format": "prettier --plugin-search-dir . --write .",
"storybook": "storybook dev -p 6006",
"build-storybook": "storybook build"
},
"exports": {
".": {
"types": "./dist/index.d.ts",
"svelte": "./dist/index.js"
"name": "@nostr-dev-kit/ndk-svelte-components",
"version": "0.8.8-2",
"scripts": {
"dev": "vite dev",
"build": "vite build && npm run package",
"preview": "vite preview",
"package": "svelte-kit sync && svelte-package && publint",
"prepublishOnly": "npm run package",
"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
"lint": "prettier --plugin-search-dir . --check . && eslint .",
"format": "prettier --write .",
"storybook": "storybook dev -p 6006",
"build-storybook": "storybook build"
},
"exports": {
".": {
"types": "./dist/index.d.ts",
"svelte": "./dist/index.js"
}
},
"files": [
"dist",
"!dist/**/*.test.*",
"!dist/**/*.spec.*"
],
"peerDependencies": {
"svelte": "^3.54.0"
},
"devDependencies": {
"@storybook/addon-essentials": "^7.2.0",
"@storybook/addon-interactions": "^7.2.0",
"@storybook/addon-links": "^7.2.0",
"@storybook/blocks": "^7.2.0",
"@storybook/manager-api": "^7.2.0",
"@storybook/svelte": "^7.2.0",
"@storybook/sveltekit": "^7.2.0",
"@storybook/testing-library": "^0.2.0",
"@storybook/theming": "^7.2.0",
"@sveltejs/adapter-auto": "^2.1.0",
"@sveltejs/kit": "^1.22.4",
"@sveltejs/package": "^2.2.0",
"@types/ramda": "^0.29.3",
"@typescript-eslint/eslint-plugin": "^6.2.1",
"@typescript-eslint/parser": "^6.2.1",
"autoprefixer": "^10.4.14",
"eslint": "^8.46.0",
"eslint-config-prettier": "^8.10.0",
"eslint-plugin-storybook": "^0.6.13",
"eslint-plugin-svelte": "^2.32.4",
"mdsvex": "^0.11.0",
"postcss": "^8.4.27",
"prettier": "^3.0.1",
"prettier-plugin-svelte": "^3.0.3",
"publint": "^0.2.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"storybook": "^7.2.3",
"svelte": "^4.1.2",
"svelte-check": "^3.4.6",
"tailwindcss": "^3.3.3",
"tslib": "^2.6.1",
"typescript": "^5.1.6",
"vite": "^4.4.8"
},
"svelte": "./dist/index.js",
"types": "./dist/index.d.ts",
"type": "module",
"dependencies": {
"@nostr-dev-kit/ndk": "^0.8.7",
"classnames": "^2.3.2",
"hurdak": "github:ConsignCloud/hurdak",
"isomorphic-dompurify": "^1.8.0",
"marked": "^7.0.1",
"marked-gfm-heading-id": "^3.0.6",
"marked-mangle": "^1.1.2",
"nostr-tools": "^1.14.0",
"ramda": "^0.29.0",
"rehype-autolink-headings": "^6.1.1",
"rehype-slug": "^5.1.0",
"svelte-preprocess": "^5.0.4"
}
},
"files": [
"dist",
"!dist/**/*.test.*",
"!dist/**/*.spec.*"
],
"peerDependencies": {
"svelte": "^3.54.0"
},
"devDependencies": {
"@storybook/addon-essentials": "^7.2.0",
"@storybook/addon-interactions": "^7.2.0",
"@storybook/addon-links": "^7.2.0",
"@storybook/blocks": "^7.2.0",
"@storybook/manager-api": "^7.2.0",
"@storybook/svelte": "^7.2.0",
"@storybook/sveltekit": "^7.2.0",
"@storybook/testing-library": "^0.2.0",
"@storybook/theming": "^7.2.0",
"@sveltejs/adapter-auto": "^2.1.0",
"@sveltejs/kit": "^1.22.4",
"@sveltejs/package": "^2.2.0",
"@types/ramda": "^0.29.3",
"@typescript-eslint/eslint-plugin": "^6.2.1",
"@typescript-eslint/parser": "^6.2.1",
"autoprefixer": "^10.4.14",
"eslint": "^8.46.0",
"eslint-config-prettier": "^8.10.0",
"eslint-plugin-storybook": "^0.6.13",
"eslint-plugin-svelte": "^2.32.4",
"mdsvex": "^0.11.0",
"postcss": "^8.4.27",
"prettier": "^3.0.1",
"prettier-plugin-svelte": "^3.0.3",
"publint": "^0.2.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"storybook": "^7.2.0",
"svelte": "^4.1.2",
"svelte-check": "^3.4.6",
"tailwindcss": "^3.3.3",
"tslib": "^2.6.1",
"typescript": "^5.1.6",
"vite": "^4.4.8"
},
"svelte": "./dist/index.js",
"types": "./dist/index.d.ts",
"type": "module",
"dependencies": {
"@nostr-dev-kit/ndk": "^0.8.7",
"classnames": "^2.3.2",
"hurdak": "github:ConsignCloud/hurdak",
"nostr-tools": "^1.14.0",
"ramda": "^0.29.0",
"rehype-autolink-headings": "^6.1.1",
"rehype-slug": "^5.1.0",
"svelte-preprocess": "^5.0.4"
}
}
20 changes: 8 additions & 12 deletions src/lib/event/EventCard.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -24,14 +24,19 @@
{#await eventPromise then}
<div class="event-card">
<div class="event-card--header">
<Avatar {ndk} user={event?.author} class="event-card--avatar" />
<Avatar
{ndk}
user={event?.author}
class="event-card--avatar"
style="width:40px; height:40px; object-fit:cover; border-radius: 100%; margin-right: 1rem;"
/>
<Name {ndk} user={event?.author} class="event-card--name" />
</div>
<EventContent {ndk} {event} />
</div>
{:catch error}
<div class="event">
<p class="error">{error}</p>
<div class="event-card">
<p class="event-card--error">{error}</p>
</div>
{/await}

Expand All @@ -41,7 +46,6 @@
flex-direction: column;
align-items: flex-start;
justify-content: center;
width: 100%;
padding: 1rem;
border: 1px solid var(--color-border);
background-color: var(--color-bg);
Expand All @@ -57,12 +61,4 @@
width: 100%;
padding: 0;
}
* > :global(.event-card--avatar) {
width: 40px;
height: 40px;
padding: 0px;
margin: 0px;
border-radius: 100%;
}
</style>
18 changes: 9 additions & 9 deletions src/lib/event/content/EventContent.svelte
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
<script lang="ts">
import type NDK from '@nostr-dev-kit/ndk';
import { NDKList, type NDKEvent } from '@nostr-dev-kit/ndk';
import Kind1 from './Kind1.svelte';
import type NDK from "@nostr-dev-kit/ndk";
import { NDKList, type NDKEvent } from "@nostr-dev-kit/ndk";
import { NDKArticle } from "@nostr-dev-kit/ndk";
import Kind1 from "./Kind1.svelte";
// import Kind40 from "./Kind40.svelte"
import Kind1063 from './Kind1063.svelte';
import Kind1063 from "./Kind1063.svelte";
// import Kind1985 from "./Kind1985.svelte"
// import Kind9802 from './Kind9802.svelte';
import Kind30000 from './Kind30000.svelte';
import Kind30001 from './Kind30001.svelte';
// import Kind30023 from "./Kind30023.svelte"
import Kind30000 from "./Kind30000.svelte";
import Kind30001 from "./Kind30001.svelte";
import Kind30023 from "./Kind30023.svelte";
export let ndk: NDK;
export let event: NDKEvent;
Expand All @@ -34,5 +34,5 @@
{:else if event.kind === 30001}
<Kind30001 {ndk} list={NDKList.from(event)} />
{:else if event.kind === 30023}
<!-- <Kind30023 {event} {showEntire} {showMedia} /> -->
<Kind30023 {ndk} article={NDKArticle.from(event)} {showMedia} on:click />
{/if}
50 changes: 50 additions & 0 deletions src/lib/event/content/Kind30023.svelte
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
<script lang="ts">
import type { NDKArticle } from "@nostr-dev-kit/ndk";
import type NDK from "@nostr-dev-kit/ndk";
import NoteContentNewline from "./NoteContentNewline.svelte";
import NoteContentTopic from "./NoteContentTopic.svelte";
import NoteContentLink from "./NoteContentLink.svelte";
import EventCard from "../EventCard.svelte";
import NoteContentPerson from "./NoteContentPerson.svelte";
import { LINK, HTML, NEWLINE, TOPIC, parseContent } from "../../utils/notes.js";
import { markdownToHtml } from "$lib/utils/markdown";
export let ndk: NDK;
export let article: NDKArticle;
export let showMedia: boolean = true;
export let anchorId: string | null = null;
const htmlContent = markdownToHtml(article.content);
const parsed = parseContent({ content: htmlContent, tags: article.tags, html: true });
</script>

<div class="article">
{#each parsed as { type, value }, i}
{#if type === NEWLINE}
<NoteContentNewline {value} />
{:else if type === HTML}
{@html value}
{:else if type === TOPIC}
<NoteContentTopic {value} />
{:else if type === LINK}
<NoteContentLink {value} {showMedia} />
{:else if type.match(/^nostr:np(rofile|ub)$/)}
<NoteContentPerson {ndk} {value} on:click />
{:else if type.startsWith("nostr:") && showMedia && value.id !== anchorId}
<EventCard {ndk} id={value.id} relays={value.relays} />
{:else if type.startsWith("nostr:")}
<!-- <NoteContentEntity {value} /> -->
{:else}
{@html value}
{/if}
{/each}
</div>

<style lang="postcss">
* > :global(.article img) {
object-fit: contain;
width: 100%;
height: 100%;
}
</style>
26 changes: 20 additions & 6 deletions src/lib/event/content/NoteContentLink.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -2,15 +2,29 @@
export let value;
export let showMedia = false;
let hidden = false
const isImage = value.url.match(/^.*\.(jpg|jpeg|png|webp|gif|avif|svg)/gi);
const isVideo = value.url.match(/^.*\.(mov|mkv|avi|m4v|webm)/gi);
const isAudio = value.url.match(/^.*\.(ogg|mp3|wav)/gi);
let hidden = false;
</script>

{#if showMedia && value.isMedia}
<!-- <div class="py-2">
<Media link={annotateMedia(value.url)} onClose={close} />
</div> -->
{#if isImage}
<img src={value.url} alt={value.url} />
{:else if isVideo}
<video key={value.url} src={value.url} controls />
{:else if isAudio}
<audio src={value.url} controls>
<a href={value.url}>{value.url.replace(/https?:\/\/(www\.)?/, '')}</a>
</audio>
{:else}
<a href={value.url}>
{value.url.replace(/https?:\/\/(www\.)?/, '')}
</a>
{/if}
{:else}
<a href={value.url}>
{value.url.replace(/https?:\/\/(www\.)?/, "")}
{value.url.replace(/https?:\/\/(www\.)?/, '')}
</a>
{/if}
{/if}
2 changes: 1 addition & 1 deletion src/lib/event/content/NoteContentTopic.svelte
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<script lang="ts">
export let value: string = ""
export let value: string = '';
</script>

#{value}
4 changes: 2 additions & 2 deletions src/lib/user/Avatar.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@
try {
user = ndk.getUser(opts);
} catch (e) {
console.error(`error trying to get user`, {opts}, e);
console.error(`error trying to get user`, { opts }, e);
}
npub = user?.npub;
}
Expand All @@ -41,7 +41,7 @@
/>
{:then value}
<img
src={user?.profile?.image??"https://placehold.co/400/ccc/ccc/webp"}
src={user?.profile?.image ?? 'https://placehold.co/400/ccc/ccc/webp'}
alt="Avatar for {npub}"
class="avatar avatar--image {$$props.class}"
style={$$props.style}
Expand Down
14 changes: 14 additions & 0 deletions src/lib/utils/markdown.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
import { marked } from "marked";
import { gfmHeadingId } from "marked-gfm-heading-id";
import { mangle } from "marked-mangle";
import DOMPurify from "isomorphic-dompurify";

export const markdownToHtml = (content: string): string => {
marked.use(mangle());
marked.use(gfmHeadingId());

return DOMPurify.sanitize(
// eslint-disable-next-line no-misleading-character-class
marked.parse(content.replace(/^[\u200B\u200C\u200D\u200E\u200F\uFEFF]/, "")),
);
};
Loading

0 comments on commit c1cb1b5

Please sign in to comment.