Browse Source

added dropdown actions menu

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

2
package.json

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

5
src/app.html

@ -5,7 +5,10 @@
<link rel="icon" href="%sveltekit.assets%/favicon.png" /> <link rel="icon" href="%sveltekit.assets%/favicon.png" />
<meta name="viewport" content="width=device-width" /> <meta name="viewport" content="width=device-width" />
%sveltekit.head% %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" /> <html data-theme="dark" />
</head> </head>

60
src/lib/ArticleHeader.svelte

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

2
src/lib/stores.ts

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

32
src/routes/+layout.svelte

@ -1,12 +1,32 @@
<script> <script>
// import Login from '$lib/login.svelte'; // import Login from '$lib/login.svelte';
import {tabs, userPublickey} from '$lib/state'; import { tabs, userPublickey } from "$lib/state";
// import {ndk} from '$lib/ndk'; // import {ndk} from '$lib/ndk';
import {browser} from '$app/environment'; import { browser } from "$app/environment";
import {NDKNip07Signer} from '@nostr-dev-kit/ndk'; import { NDKNip07Signer } from "@nostr-dev-kit/ndk";
import {onMount} from 'svelte'; import { onMount } from "svelte";
</script> </script>
<!-- <nav class="abtBox">
<!-- <Login /> --> <a href="./">home</a>
<a href="./create">New Note</a>
<a href="./about">About</a>
</nav> -->
<slot /> <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>

12
src/routes/+page.svelte

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

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

@ -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 @@
import { sveltekit } from '@sveltejs/kit/vite'; import { sveltekit } from "@sveltejs/kit/vite";
import { defineConfig } from 'vite'; import { defineConfig } from "vite";
export default defineConfig({ export default defineConfig({
plugins: [sveltekit()] plugins: [sveltekit()],
}); });

Loading…
Cancel
Save