aboutsummaryrefslogtreecommitdiff
path: root/src/lib/ArticleHeader.svelte
blob: af64e6e324f233e8595ae3c1018a6969b2008968 (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
89
90
91
92
93
94
<script lang="ts">
  import { neventEncode } from "$lib/utils";
  import type { NDKEvent } from "@nostr-dev-kit/ndk";
  import { standardRelays } from "./consts";
  import { idList } from "$lib/stores";
  import { Card, Button, Modal, Tooltip } from "flowbite-svelte";
  import { ClipboardCheckOutline, ClipboardCleanOutline, CodeOutline, ShareNodesOutline } from "flowbite-svelte-icons";
  import { ndk } from "./ndk";

  export let event: NDKEvent;

  let title: string;
  let href: string;

  try {
    const relays = $ndk.activeUser?.relayUrls ?? standardRelays;
    title = event.getMatchingTags('title')[0][1];
    href = neventEncode(event, relays);
  } catch (e) {
    console.warn(e);
  }

  const handleSendEvents = () => {
    $idList = [];
    for (const id of event.tags
      .filter((tag) => tag[0] === "e")
      .map((tag) => tag[1])) {
      $idList = [...$idList, id];
    }
  };

  let eventIdCopied: boolean = false;
  function copyEventId() {
    console.debug("copyEventID");
    const relays: string[] = standardRelays;
    const naddr = neventEncode(event, relays);

    navigator.clipboard.writeText(naddr);

    eventIdCopied = true;
  }

  let jsonModalOpen: boolean = false;
  function viewJson() {
    console.debug("viewJSON");
    const relays: string[] = standardRelays;
    const naddr = neventEncode(event, relays);
    jsonModalOpen = true;
  }

  let shareLinkCopied: boolean = false;
  function shareNjump() {
    const relays: string[] = standardRelays;
    const naddr = neventEncode(event, relays);

    console.debug(naddr);
    navigator.clipboard.writeText(`njump.me/${naddr}`);

    shareLinkCopied = true;
  }
</script>

{#if title != null && href != null}
  <Card class='ArticleBox card-leather w-lg'>
    <div class='flex flex-col space-y-4'>
      <a href="/{href}" on:click={handleSendEvents}>
        <h2>{title}</h2>
      </a>
      <div class='w-full flex space-x-2 justify-end'>
        <Button class='btn-leather' size='xs' on:click={shareNjump}><ShareNodesOutline /></Button>
        <Tooltip class='tooltip-leather' type='auto' placement='top' on:show={() => shareLinkCopied = false}>
          {#if shareLinkCopied}
            <ClipboardCheckOutline />
          {:else}
            Share via NJump
          {/if}
        </Tooltip>
        <Button class='btn-leather' size='xs' outline on:click={copyEventId}><ClipboardCleanOutline /></Button>
        <Tooltip class='tooltip-leather' type='auto' placement='top' on:show={() => eventIdCopied = false}>
          {#if eventIdCopied}
            <ClipboardCheckOutline />
          {:else}
            Copy event ID
          {/if}
        </Tooltip>
        <Button class='btn-leather' size='xs' outline on:click={viewJson}><CodeOutline /></Button>
        <Tooltip class='tooltip-leather' type='auto' placement='top'>View JSON</Tooltip>
      </div>
    </div>
    <Modal class='modal-leather' title='Event JSON' bind:open={jsonModalOpen} autoclose outsideclose size='sm'>
      <code>{JSON.stringify(event.rawEvent())}</code>
    </Modal>
  </Card>
{/if}