aboutsummaryrefslogtreecommitdiff
path: root/src/lib/cards/UserArticles.svelte
blob: e601d267b88874e97959908d43b354a05f9c24bc (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
<script lang="ts">
  import { parsePlainText } from '$lib/articleParser';
  import { wikiKind } from '$lib/consts';
  import { ndk } from '$lib/ndk';
  import { tabBehaviour } from '$lib/state';
  import type { Tab } from '$lib/types';
  import { next } from '$lib/utils';
  import type { NDKEvent } from '@nostr-dev-kit/ndk';
  import { onMount } from 'svelte';

  let results: NDKEvent[] = [];
  let username = '...';
  export let createChild: (tab: Tab) => void;
  export let replaceSelf: (tab: Tab) => void;
  export let data: string;

  async function search() {
    results = [];
    const filter = { kinds: [wikiKind], limit: 1024, authors: [data] };
    const events = await $ndk.fetchEvents(filter);
    if (!events) {
      results = [];
      return;
    }
    results = Array.from(events);
  }

  onMount(async () => {
    // get user
    const user = await $ndk.getUser({ hexpubkey: data });
    const profile = await user.fetchProfile();
    if (profile) {
      username = JSON.parse(Array.from(profile)[0].content).name;
    }

    await search();
  });
</script>

<article class="font-sans mx-auto p-2 lg:max-w-4xl">
  <div>
    <div class="prose">
      <h1><a href={`nostr://${data}`}>{username}</a>'s articles</h1>
    </div>
    {#each results as result}
      <!-- svelte-ignore a11y-click-events-have-key-events a11y-no-static-element-interactions -->
      <div
        on:click={() =>
          $tabBehaviour == 'replace'
            ? replaceSelf({ id: next(), type: 'article', data: result.id })
            : createChild({ id: next(), type: 'article', data: result.id })}
        class="cursor-pointer px-4 py-5 bg-white border border-gray-300 hover:bg-slate-50 rounded-lg mt-2 min-h-[48px]"
      >
        <h1>
          {result.tags.find((e) => e[0] == 'title')?.[0] &&
          result.tags.find((e) => e[0] == 'title')?.[1]
            ? result.tags.find((e) => e[0] == 'title')?.[1]
            : result.tags.find((e) => e[0] == 'd')?.[1]}
        </h1>
        <p class="text-xs">
          <!-- implement published at? -->
          <!-- {#if result.tags.find((e) => e[0] == "published_at")}
                  on {formatDate(result.tags.find((e) => e[0] == "published_at")[1])}
                  {/if} -->
          {#await result.author?.fetchProfile()}
            by <span class="text-gray-600 font-[600]">...</span>
          {:then result}
            by {result !== null && JSON.parse(Array.from(result)[0]?.content)?.name}
          {/await}
        </p>
        <p class="text-xs">
          {#if result.tags.find((e) => e[0] == 'summary')?.[0] && result.tags.find((e) => e[0] == 'summary')?.[1]}
            {result.tags
              .find((e) => e[0] == 'summary')?.[1]
              .slice(
                0,
                192
              )}{#if String(result.tags.find((e) => e[0] == 'summary')?.[1])?.length > 192}...{/if}
          {:else}
            {result.content.length <= 192
              ? parsePlainText(result.content.slice(0, 189))
              : parsePlainText(result.content.slice(0, 189)) + '...'}
          {/if}
        </p>
      </div>
    {/each}
  </div>
</article>