diff options
Diffstat (limited to 'src')
-rw-r--r-- | src/app.css | 3 | ||||
-rw-r--r-- | src/lib/Modal.svelte | 12 | ||||
-rw-r--r-- | src/lib/components/Navigation.svelte | 38 | ||||
-rw-r--r-- | src/lib/defaultShareButton.svelte | 111 | ||||
-rw-r--r-- | src/routes/[...eventID]/+page.svelte | 12 | ||||
-rw-r--r-- | src/routes/about/+page.svelte | 43 |
6 files changed, 219 insertions, 0 deletions
diff --git a/src/app.css b/src/app.css new file mode 100644 index 0000000..ae9d7f5 --- /dev/null +++ b/src/app.css @@ -0,0 +1,3 @@ +body { + padding-top: 50px; +} diff --git a/src/lib/Modal.svelte b/src/lib/Modal.svelte new file mode 100644 index 0000000..b9b6e14 --- /dev/null +++ b/src/lib/Modal.svelte @@ -0,0 +1,12 @@ +<script lang="ts"> + import type { NDKEvent } from "@nostr-dev-kit/ndk"; + export let showModal; + export let event: NDKEvent; + // let str: string = JSON.stringify(event); +</script> + +{#if showModal} + <div class="backdrop"> + <div class="Modal">{event.id}</div> + </div> +{/if} diff --git a/src/lib/components/Navigation.svelte b/src/lib/components/Navigation.svelte new file mode 100644 index 0000000..6ffeeb5 --- /dev/null +++ b/src/lib/components/Navigation.svelte @@ -0,0 +1,38 @@ +<script lang="ts"> +</script> + +<div class="NavBar"> + <a href="./about"> About</a> + <a href="./create"> New Note</a> + <a href="./visualize"> Visualize</a> + <a href="./login" class="login"> Login</a> +</div> + +<style> + .login { + float: right; + } + .NavBar { + overflow: hidden; + background-color: #333; + } + + .NavBar a { + float: left; + display: block; + color: #f2f2f2; + text-align: center; + padding: 14px 16px; + text-decoration: none; + } + + .NavBar a:hover { + background-color: #ddd; + color: black; + } + + .NavBar a.active { + background-color: #4caf50; + color: white; + } +</style> diff --git a/src/lib/defaultShareButton.svelte b/src/lib/defaultShareButton.svelte new file mode 100644 index 0000000..0563afc --- /dev/null +++ b/src/lib/defaultShareButton.svelte @@ -0,0 +1,111 @@ +<script lang="ts"> + import { ndk } from "$lib/ndk"; + import type { NDKEvent } from "@nostr-dev-kit/ndk"; + import { neventEncode } from "$lib/utils.ts"; + import { nip19 } from "nostr-tools"; + import { standardRelays } from "./consts"; + import Modal from "$lib/Modal.svelte"; + + export let event: NDKEvent; + // const eventString: string = JSON.stringify(event); + // event.toString(); + let modal = false; + + function copyEventID() { + console.log("copyEventID"); + const relays: string[] = standardRelays; + const naddr = neventEncode(event, relays); + navigator.clipboard.writeText(naddr); + } + function viewJSON() { + console.log("viewJSON"); + modal = !modal; + console.log(modal); + } + + function shareNjump() { + const relays: string[] = standardRelays; + const naddr = neventEncode(event, relays); + console.log(naddr); + navigator.clipboard.writeText(`njump.me/${naddr}`); + } +</script> + +<div class="dropdown"> + <button class="dropbtn"> + <div class="dot" /> + <div class="dot" /> + <div class="dot" /> + </button> + + <div class="dropdown-content"> + <a on:click={copyEventID}>Copy Event ID</a> + <!-- <a on:click={viewJSON}>View JSON</a> --> + <a on:click={shareNjump}>Share (njump)</a> + </div> +</div> +<Modal showModal={modal} {event} /> + +<style> + .dropdown { + position: relative; + display: inline-block; + display: grid; + grid-template-columns: 1fr 1fr 1fr; + border-color: green; + /* boarder-width: 100px; */ + } + .dropbtn { + color: white; + grid-column: 2; + margin: 50px; + padding: 16px; + font-size: 16px; + border: none; + cursor: pointer; + border: 1px solid red; + } + .dot { + height: 9px; + width: 9px; + background-color: white; + border-radius: 50%; + display: inline-block; + margin: 0 5px; + } + + /* The container <div> - needed to position the dropdown content */ + + /* Dropdown Content (Hidden by Default) */ + .dropdown-content { + display: none; + position: absolute; + background-color: #f9f9f9; + min-width: 160px; + box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); + z-index: 1; + } + + /* Links inside the dropdown */ + .dropdown-content a { + color: black; + padding: 12px 16px; + text-decoration: none; + display: block; + } + + /* Change color of dropdown links on hover */ + .dropdown-content a:hover { + background-color: #cacaca; + } + + /* Show the dropdown menu on hover */ + .dropdown:hover .dropdown-content { + display: block; + } + + /* Change the background color of the dropdown button when the dropdown content is shown */ + .dropdown:hover .dropbtn { + /* background-color: #3e8e41; */ + } +</style> diff --git a/src/routes/[...eventID]/+page.svelte b/src/routes/[...eventID]/+page.svelte new file mode 100644 index 0000000..f48186d --- /dev/null +++ b/src/routes/[...eventID]/+page.svelte @@ -0,0 +1,12 @@ +<script lang="ts"> + import {ndk} from '$lib/ndk'; + import { page } from '$app/stores'; + import Article from '$lib/Article.svelte'; + import {idList} from '$lib/stores'; + import {nip19} from 'nostr-tools'; + // const id = nip19.decode($page.params.path).data; + + + +</script> +<Article /> diff --git a/src/routes/about/+page.svelte b/src/routes/about/+page.svelte new file mode 100644 index 0000000..c81f7b4 --- /dev/null +++ b/src/routes/about/+page.svelte @@ -0,0 +1,43 @@ +<div id="content"> + <div>1</div> + <div>2</div> + <div> + Lorem Ipsum is simply dummy text of the printing and typesetting industry. + Lorem Ipsum has been the industry's standard dummy text ever since the + 1500s, when an unknown printer took a galley of type and scrambled it to + make a type specimen book. It has survived not only five centuries, but also + the leap into electronic typesetting, remaining essentially unchanged. It + was popularised in the 1960s with the release of Letraset sheets containing + Lorem Ipsum passages, and more recently with desktop publishing software + like Aldus PageMaker including versions of Lorem Ipsum. + </div> + <div>4</div> + <div>5</div> + <div>6</div> + <div>7</div> + <div>8</div> + <div>9</div> +</div> + +<style> + #content { + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-template-rows: repeat(3, minmax(150px, auto)); + /* grid-auto-row: 200px; */ + gap: 10px; + color: green; + background-color: black; + } + + #content > div { + background-color: blue; + padding: 10px; + font-size: 30px; + text-align: center; + } + #content div:nth-child(even) { + background: #777; + padding: 30px; + } +</style> |