diff --git a/src/app.css b/src/app.css index 79fee31..358d034 100644 --- a/src/app.css +++ b/src/app.css @@ -36,7 +36,7 @@ /* Card */ div.card-leather { @apply shadow-none text-primary-1000 border-s-4 bg-highlight border-primary-200 has-[:hover]:border-primary-700; - @apply dark:bg-primary-1000 dark:border-primary-800 dark:has-[:hover]:border-primary-500; + @apply dark:bg-primary-1000 dark:border-primary-800 dark:has-[:hover]:bg-primary-950 dark:has-[:hover]:border-primary-500; } div.card-leather h1, @@ -48,6 +48,10 @@ @apply text-gray-800 hover:text-primary-400 dark:text-gray-300 dark:hover:text-primary-500; } + div.card-leather .font-thin { + @apply text-gray-900 hover:text-primary-600 dark:text-gray-200 dark:hover:text-primary-200; + } + /* Content */ main { @apply max-w-full; @@ -106,7 +110,7 @@ /* Modal */ div.modal-leather > div { - @apply bg-primary-0 dark:bg-primary-1000 border-b-[1px] border-gray-800 dark:border-gray-500; + @apply bg-primary-0 dark:bg-primary-950 border-b-[1px] border-primary-100 dark:border-primary-600; } div.modal-leather > div > h1, @@ -119,7 +123,7 @@ } div.modal-leather button { - @apply bg-primary-0 hover:bg-primary-0 dark:bg-primary-1000 dark:hover:bg-primary-1000 text-gray-800 hover:text-primary-400 dark:text-gray-300 dark:hover:text-primary-500; + @apply bg-primary-0 hover:bg-primary-0 dark:bg-primary-950 dark:hover:bg-primary-950 text-gray-800 hover:text-primary-400 dark:text-gray-300 dark:hover:text-primary-500; } /* Navbar */ diff --git a/src/lib/components/Login.svelte b/src/lib/components/Login.svelte index 84af5db..2d77763 100644 --- a/src/lib/components/Login.svelte +++ b/src/lib/components/Login.svelte @@ -2,12 +2,13 @@ import { type NDKUserProfile } from '@nostr-dev-kit/ndk'; import { activePubkey, loginWithExtension, logout, ndkInstance, ndkSignedIn, persistLogin } from '$lib/ndk'; import { Avatar, Button, Popover, Tooltip } from 'flowbite-svelte'; - import { ArrowRightToBracketOutline } from 'flowbite-svelte-icons'; + import Profile from "$components/util/Profile.svelte"; let profile = $state(null); let pfp = $derived(profile?.image); let username = $derived(profile?.name); let tag = $derived(profile?.name); + let npub = $state(undefined); let signInFailed = $state(false); @@ -19,6 +20,7 @@ .then(userProfile => { profile = userProfile; }); + npub = $ndkInstance.activeUser?.npub; } }); @@ -38,71 +40,31 @@ } } - async function handleSignOutClick() { - logout($ndkInstance.activeUser!); - profile = null; - } -{#if $ndkSignedIn} - - {#key username || tag} +
+ {#if $ndkSignedIn} + + {:else} + -
-
-

{username}

-

@{tag}

-
-
- -
+
+ +
- {/key} -{:else} - - -
- - -
- -{/if} + {/if} +
diff --git a/src/lib/components/PublicationHeader.svelte b/src/lib/components/PublicationHeader.svelte index 6986ee0..ac4269a 100644 --- a/src/lib/components/PublicationHeader.svelte +++ b/src/lib/components/PublicationHeader.svelte @@ -2,10 +2,11 @@ import { ndkInstance } from '$lib/ndk'; import { neventEncode } from '$lib/utils'; import type { NDKEvent } from '@nostr-dev-kit/ndk'; - import { naddrEncode, type AddressPointer } from 'nostr-tools/nip19'; import { standardRelays } from '../consts'; - import { Card, Button, Modal, Tooltip } from 'flowbite-svelte'; - import { ClipboardCheckOutline, ClipboardCleanOutline, CodeOutline, ShareNodesOutline } from 'flowbite-svelte-icons'; + import { Card, Img } from "flowbite-svelte"; + import CardActions from "$components/util/CardActions.svelte"; + import Profile from "$components/util/Profile.svelte"; + import InlineProfile from "$components/util/InlineProfile.svelte"; const { event } = $props<{ event: NDKEvent }>(); @@ -25,83 +26,41 @@ let title: string = $derived(event.getMatchingTags('title')[0]?.[1]); let author: string = $derived(event.getMatchingTags('author')[0]?.[1] ?? 'unknown'); let version: string = $derived(event.getMatchingTags('version')[0]?.[1] ?? '1'); - - let eventIdCopied: boolean = $state(false); - let jsonModalOpen: boolean = $state(false); - let shareLinkCopied: boolean = $state(false); - - function copyEventId() { - console.debug("copyEventID"); - const relays: string[] = standardRelays; - const nevent = neventEncode(event, relays); - - navigator.clipboard.writeText(nevent); - - eventIdCopied = true; - } - - function viewJson() { - console.debug("viewJSON"); - jsonModalOpen = true; - } - - function shareNjump() { - const relays: string[] = standardRelays; - const dTag : string | undefined = event.dTag; - - if (typeof dTag === 'string') { - const opts: AddressPointer = { - identifier: dTag, - pubkey: event.pubkey, - kind: 30040, - relays - }; - const naddr = naddrEncode(opts); - console.debug(naddr); - navigator.clipboard.writeText(`https://njump.me/${naddr}`); - shareLinkCopied = true; - } - - else { - console.log('dTag is undefined'); - } - } + let image: string = $derived(event.getMatchingTags('image')[0]?.[1] ?? null); + let authorPubkey: string = $derived(event.getMatchingTags('p')[0]?.[1] ?? null); {#if title != null && href != null} - -
- -

{title}

-

by {author}

- {#if version != '1'} -

version: {version}

- {/if} - -
- - shareLinkCopied = false}> - {#if shareLinkCopied} - - {:else} - Share via NJump - {/if} - - - eventIdCopied = false}> - {#if eventIdCopied} - - {:else} - Copy event ID + + {#if image} +
+ +
+ {/if} +
+
+ +

{title}

+

+ by + {#if authorPubkey != null} + + {:else} + {author} + {/if} +

+ {#if version != '1'} +

version: {version}

{/if} - - - View JSON + +
+
+ +
+ +
- - {JSON.stringify(event.rawEvent())} - {/if} diff --git a/src/lib/components/util/CardActions.svelte b/src/lib/components/util/CardActions.svelte new file mode 100644 index 0000000..41f0c1c --- /dev/null +++ b/src/lib/components/util/CardActions.svelte @@ -0,0 +1,206 @@ + + +
+ + + + {#if isOpen} + +
+
+ +
+
+ + {/if} + + +
+ {JSON.stringify(event.rawEvent())} +
+ + + +
+ {#if image} +
+ +
+ {/if} +
+

{title}

+

by + {#if originalAuthor !== null} + + {:else} + {author} + {/if} +

+

Version: {version}

+
+
+ + {#if summary} +
+

{summary}

+
+ {/if} + +
+

Index author:

+
+ +
+ {#if source !== null} +
Source: {source}
+ {/if} + {#if type !== null} +
Publication type: {type}
+ {/if} + {#if language !== null} +
Language: {language}
+ {/if} + {#if publisher !== null} +
Published by: {publisher}
+ {/if} + {#if identifier !== null} +
{identifier}
+ {/if} + +
+ + +
diff --git a/src/lib/components/util/CopyToClipboard.svelte b/src/lib/components/util/CopyToClipboard.svelte new file mode 100644 index 0000000..9e72c79 --- /dev/null +++ b/src/lib/components/util/CopyToClipboard.svelte @@ -0,0 +1,27 @@ + + + + {#if copied} + Copied! + {:else} + {displayText} + {/if} + \ No newline at end of file diff --git a/src/lib/components/util/InlineProfile.svelte b/src/lib/components/util/InlineProfile.svelte new file mode 100644 index 0000000..4b9efe3 --- /dev/null +++ b/src/lib/components/util/InlineProfile.svelte @@ -0,0 +1,59 @@ + + +{#if loading} + {title ?? '…'} +{:else if anon } + {shortenNpub(npub)} +{:else if npub } + + + {username ?? shortenNpub(npub)} + +{:else} + {title ?? pubkey} +{/if} \ No newline at end of file diff --git a/src/lib/components/util/Profile.svelte b/src/lib/components/util/Profile.svelte new file mode 100644 index 0000000..fd23c9f --- /dev/null +++ b/src/lib/components/util/Profile.svelte @@ -0,0 +1,101 @@ + + +
+ {#if profile} +
+ + {#key username || tag} + +
+
+ {#if username} +

{username}

+ {#if isNav}

@{tag}

{/if} + {/if} + +
+
+ + {/key} +
+ {/if} +
diff --git a/src/routes/about/+page.svelte b/src/routes/about/+page.svelte index b16db6d..9e4ee80 100644 --- a/src/routes/about/+page.svelte +++ b/src/routes/about/+page.svelte @@ -5,15 +5,15 @@
About -

Alexandria is a reader and writer for curated publications (in Asciidoc), and will eventually also support long-form articles (Markdown) and wiki pages (Asciidoc). It is produced by the GitCitadel project team.

+

Alexandria is a reader and writer for curated publications (in Asciidoc), and will eventually also support long-form articles (Markdown) and wiki pages (Asciidoc). It is produced by the GitCitadel project team.

-

Please submit support issues on the project repo page and follow us on GitHub and Geyserfund.

+

Please submit support issues on the project repo page and follow us on GitHub and Geyserfund.

-

We are easiest to contact over our Nostr address npub1s3ht77dq4zqnya8vjun5jp3p44pr794ru36d0ltxu65chljw8xjqd975wz.

+

We are easiest to contact over our Nostr address npub1s3h…75wz.

Overview -

Alexandria opens up to the landing page, where the user can: login (top-right), select whether to only view the publications hosted on the thecitadel document relay or add in their own relays, and scroll/search the publications.

+

Alexandria opens up to the landing page, where the user can: login (top-right), select whether to only view the publications hosted on the thecitadel document relay or add in their own relays, and scroll/search the publications.

Landing page

Relay selection

diff --git a/src/styles/publications.css b/src/styles/publications.css index a48919a..b2b2847 100644 --- a/src/styles/publications.css +++ b/src/styles/publications.css @@ -90,7 +90,7 @@ .videoblock .title, .olist .title, .ulist .title { - @apply my-2; + @apply my-2 font-thin text-lg; } .note-leather li p { @@ -115,6 +115,10 @@ @apply text-sm; } + .leading-normal.first-letter\:text-7xl .quoteblock { + min-height: 108px; + } + /* admonition */ .note-leather .admonitionblock .title { @apply font-semibold; @@ -128,6 +132,10 @@ @apply flex flex-col; } + .note-leather .admonitionblock p:has(code) { + @apply my-3; + } + .note-leather .admonitionblock { @apply rounded overflow-hidden border; } @@ -212,4 +220,13 @@ .videoblock .content video { @apply w-full h-full; } + + /* audio */ + .audioblock .content { + @apply my-3; + } + + .audioblock .content audio { + @apply w-full; + } } \ No newline at end of file diff --git a/tailwind.config.cjs b/tailwind.config.cjs index e9f0183..380981b 100644 --- a/tailwind.config.cjs +++ b/tailwind.config.cjs @@ -24,6 +24,7 @@ const config = { 700: '#574229', 800: '#342718', 900: '#231a10', + 950: '#17110A', 1000: '#110d08', }, success: {