Browse Source

added dropdown actions menu

master
limina1 2 years ago
parent
commit
a86c1ccfff
  1. 2
      package.json
  2. 5
      src/app.html
  3. 56
      src/lib/ArticleHeader.svelte
  4. 2
      src/lib/stores.ts
  5. 32
      src/routes/+layout.svelte
  6. 10
      src/routes/+page.svelte
  7. 12
      src/routes/[...path]/+page.svelte
  8. 6
      vite.config.ts

2
package.json

@ -21,7 +21,7 @@ @@ -21,7 +21,7 @@
"flowbite-svelte": "^0.44.22",
"postcss": "^8.4.33",
"postcss-load-config": "^5.0.2",
"prettier": "^3.2.4",
"prettier": "^3.2.5",
"prettier-plugin-svelte": "^3.1.2",
"svelte": "^4.2.9",
"svelte-check": "^3.6.3",

5
src/app.html

@ -5,7 +5,10 @@ @@ -5,7 +5,10 @@
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
<meta name="viewport" content="width=device-width" />
%sveltekit.head%
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@1/css/pico.min.css" />
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@picocss/pico@1/css/pico.min.css"
/>
<html data-theme="dark" />
</head>

56
src/lib/ArticleHeader.svelte

@ -1,43 +1,57 @@ @@ -1,43 +1,57 @@
<script lang="ts">
import {nip19} from 'nostr-tools';
import {ndk} from '$lib/ndk';
import {idList} from '$lib/stores';
import DefaultButton from '$lib/defaultShareButton.svelte';
import { ndk } from "$lib/ndk";
import { nip19 } from "nostr-tools";
import type { NDKEvent } from "@nostr-dev-kit/ndk";
import { idList } from "$lib/stores";
import DefaultButton from "$lib/defaultShareButton.svelte";
export let event: NDKEvent;
const title: string = JSON.parse(event.content).title;
const href: string = nip19.noteEncode(event.id)
const href: string = nip19.noteEncode(event.id);
// console.log(event);
// con
// console.log(nip19.neventEncode(event));
const handleSendEvents = () => {
$idList = [];
for (const id of event.tags.filter((tag)=> tag[0]==='e').map((tag)=> tag[1])) {
for (const id of event.tags
.filter((tag) => tag[0] === "e")
.map((tag) => tag[1])) {
$idList = [...$idList, id];
}
};
</script>
<a data-sveltekit-preload-data="tap" href="/{href}">
<div class="ArticleBox">
<a href="/{href}">
<div class="ArticleHeader" on:click={handleSendEvents}>
<h2>{title}</h2>
<p class="title">{title}</p>
</div>
</a>
<DefaultButton {event} />
</div>
<br />
<style>
.ArticleHeader {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
.ArticleBox {
/* position: relative; */
display: grid;
grid-template-columns: 3fr 1fr;
border: 1px solid purple;
border-radius: 10px;
padding: 5px;
border-top-width: 5px;
/* max-width: 100%; */
}
.ArticleHeader {
border-radius: 10px;
border-top-width: 5px;
text-align: center;
padding: 30px;
border: 1px solid purple;
}
.ArticleHeader h2 {
font-size: 1.5rem;
.title {
color: white;
font-size: 1.5em;
font-weight: bold;
}
/* position button top right corner */
</style>

2
src/lib/stores.ts

@ -1,3 +1,3 @@ @@ -1,3 +1,3 @@
import { writable } from "svelte/store";
export let idList = writable([]);
export let idList = writable<string[]>([]);

32
src/routes/+layout.svelte

@ -1,12 +1,32 @@ @@ -1,12 +1,32 @@
<script>
// import Login from '$lib/login.svelte';
import {tabs, userPublickey} from '$lib/state';
import { tabs, userPublickey } from "$lib/state";
// import {ndk} from '$lib/ndk';
import {browser} from '$app/environment';
import {NDKNip07Signer} from '@nostr-dev-kit/ndk';
import {onMount} from 'svelte';
import { browser } from "$app/environment";
import { NDKNip07Signer } from "@nostr-dev-kit/ndk";
import { onMount } from "svelte";
</script>
<!-- <Login /> -->
<!-- <nav class="abtBox">
<a href="./">home</a>
<a href="./create">New Note</a>
<a href="./about">About</a>
</nav> -->
<slot />
<style>
.abtBox {
position: fixed;
top: 0;
left: 0;
min-width: 100%;
max-height: 40;
padding: 10px;
background-color: black;
/* border-radius: 10px; */
/* margin: 10px; */
text-decoration: none;
font-weight: bold;
z-index: 1;
}
</style>

10
src/routes/+page.svelte

@ -1,10 +1,10 @@ @@ -1,10 +1,10 @@
<script lang="ts">
import ArticleHeader from '$lib/ArticleHeader.svelte';
import {ndk} from '$lib/ndk';
import ArticleHeader from "$lib/ArticleHeader.svelte";
import { ndk } from "$lib/ndk";
import { nip19 } from "nostr-tools";
import {idList} from '$lib/stores';
import { idList } from "$lib/stores";
const kind = 30040;
const count: number = 10
const count: number = 10;
async function loadEvents() {
const eventlist = await $ndk.fetchEvents({ kinds: [kind] });
@ -17,6 +17,6 @@ @@ -17,6 +17,6 @@
<p>Loading...</p>
{:then events}
{#each Array.from(events) as event, i}
<ArticleHeader event={event}/>
<ArticleHeader {event} />
{/each}
{/await}

12
src/routes/[...path]/+page.svelte

@ -1,12 +0,0 @@ @@ -1,12 +0,0 @@
<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 />

6
vite.config.ts

@ -1,6 +1,6 @@ @@ -1,6 +1,6 @@
import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vite';
import { sveltekit } from "@sveltejs/kit/vite";
import { defineConfig } from "vite";
export default defineConfig({
plugins: [sveltekit()]
plugins: [sveltekit()],
});

Loading…
Cancel
Save