mirror of
https://github.com/luminous-devs/lume.git
synced 2024-10-02 09:50:47 +00:00
wip: dark mode - light mode
This commit is contained in:
parent
c71bfb3f6d
commit
cb91373d33
@ -71,8 +71,10 @@
|
||||
"react-hook-form": "^7.47.0",
|
||||
"react-markdown": "^8.0.7",
|
||||
"react-router-dom": "^6.16.0",
|
||||
"react-string-replace": "^1.1.1",
|
||||
"reactflow": "^11.9.2",
|
||||
"remark-gfm": "^3.0.1",
|
||||
"tauri-controls": "^0.2.0",
|
||||
"tippy.js": "^6.3.7",
|
||||
"virtua": "^0.9.1",
|
||||
"zustand": "^4.4.2"
|
||||
|
@ -164,12 +164,18 @@ dependencies:
|
||||
react-router-dom:
|
||||
specifier: ^6.16.0
|
||||
version: 6.16.0(react-dom@18.2.0)(react@18.2.0)
|
||||
react-string-replace:
|
||||
specifier: ^1.1.1
|
||||
version: 1.1.1
|
||||
reactflow:
|
||||
specifier: ^11.9.2
|
||||
version: 11.9.2(@types/react@18.2.24)(react-dom@18.2.0)(react@18.2.0)
|
||||
remark-gfm:
|
||||
specifier: ^3.0.1
|
||||
version: 3.0.1
|
||||
tauri-controls:
|
||||
specifier: ^0.2.0
|
||||
version: 0.2.0(@tauri-apps/plugin-os@2.0.0-alpha.2)(@tauri-apps/plugin-window@2.0.0-alpha.1)(clsx@2.0.0)(react-dom@18.2.0)(react@18.2.0)(tailwind-merge@1.14.0)
|
||||
tippy.js:
|
||||
specifier: ^6.3.7
|
||||
version: 6.3.7
|
||||
@ -3153,7 +3159,6 @@ packages:
|
||||
/clsx@2.0.0:
|
||||
resolution: {integrity: sha512-rQ1+kcj+ttHG0MKVGBUXwayCCF1oh39BF5COIpRzuCEv8Mwjv0XucrI2ExNTOn9IlLifGClWQcU9BrZORvtw6Q==}
|
||||
engines: {node: '>=6'}
|
||||
dev: true
|
||||
|
||||
/color-convert@1.9.3:
|
||||
resolution: {integrity: sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==}
|
||||
@ -5804,6 +5809,11 @@ packages:
|
||||
react: 18.2.0
|
||||
dev: false
|
||||
|
||||
/react-string-replace@1.1.1:
|
||||
resolution: {integrity: sha512-26TUbLzLfHQ5jO5N7y3Mx88eeKo0Ml0UjCQuX4BMfOd/JX+enQqlKpL1CZnmjeBRvQE8TR+ds9j1rqx9CxhKHQ==}
|
||||
engines: {node: '>=0.12.0'}
|
||||
dev: false
|
||||
|
||||
/react-style-singleton@2.2.1(@types/react@18.2.24)(react@18.2.0):
|
||||
resolution: {integrity: sha512-ZWj0fHEMyWkHzKYUr2Bs/4zU6XLmq9HsgBURm7g5pAVfyn49DgUiNgY2d4lXRlYSiCif9YBGpQleewkcqddc7g==}
|
||||
engines: {node: '>=10'}
|
||||
@ -6211,7 +6221,6 @@ packages:
|
||||
|
||||
/tailwind-merge@1.14.0:
|
||||
resolution: {integrity: sha512-3mFKyCo/MBcgyOTlrY8T7odzZFx+w+qKSMAmdFzRvqBfLlSigU6TZnlFHK0lkMwj9Bj8OYU+9yW9lmGuS0QEnQ==}
|
||||
dev: true
|
||||
|
||||
/tailwindcss@3.3.3:
|
||||
resolution: {integrity: sha512-A0KgSkef7eE4Mf+nKJ83i75TMyq8HqY3qmFIJSWy8bNt0v1lG7jUcpGpoTFxAwYcWOphcTBLPPJg+bDfhDf52w==}
|
||||
@ -6244,6 +6253,25 @@ packages:
|
||||
- ts-node
|
||||
dev: true
|
||||
|
||||
/tauri-controls@0.2.0(@tauri-apps/plugin-os@2.0.0-alpha.2)(@tauri-apps/plugin-window@2.0.0-alpha.1)(clsx@2.0.0)(react-dom@18.2.0)(react@18.2.0)(tailwind-merge@1.14.0):
|
||||
resolution: {integrity: sha512-/IDXLhcqGRjNN7QKfzgyr2y4QfnWT9MSIdqxrjH2oElXyngSo/cQltTb8LT6h/sH/7gRiSQMvQBEmavfn9Hk0w==}
|
||||
peerDependencies:
|
||||
'@tauri-apps/plugin-os': 2.0.0-alpha.2
|
||||
'@tauri-apps/plugin-window': 2.0.0-alpha.1
|
||||
clsx: ^2.0.0
|
||||
react: ^18.2.0
|
||||
react-dom: ^18.2.0
|
||||
tailwind-merge: ^1.14.0
|
||||
dependencies:
|
||||
'@tauri-apps/api': 2.0.0-alpha.8
|
||||
'@tauri-apps/plugin-os': 2.0.0-alpha.2
|
||||
'@tauri-apps/plugin-window': 2.0.0-alpha.1
|
||||
clsx: 2.0.0
|
||||
react: 18.2.0
|
||||
react-dom: 18.2.0(react@18.2.0)
|
||||
tailwind-merge: 1.14.0
|
||||
dev: false
|
||||
|
||||
/text-table@0.2.0:
|
||||
resolution: {integrity: sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==}
|
||||
dev: true
|
||||
|
BIN
public/lockscreen/1.png
Normal file
BIN
public/lockscreen/1.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 6.6 MiB |
@ -17,6 +17,7 @@
|
||||
"height": 800,
|
||||
"minWidth": 1080,
|
||||
"minHeight": 800,
|
||||
"decorations": false,
|
||||
"resizable": true,
|
||||
"theme": "Dark",
|
||||
"title": "Lume",
|
||||
|
@ -83,44 +83,37 @@ export function UnlockScreen() {
|
||||
return (
|
||||
<div className="flex h-full w-full items-center justify-center">
|
||||
<div className="mx-auto w-full max-w-md">
|
||||
<div className="mb-4 pb-4">
|
||||
<h1 className="text-center text-2xl font-semibold text-white">
|
||||
Enter password to unlock
|
||||
</h1>
|
||||
</div>
|
||||
<form onSubmit={handleSubmit(onSubmit)} className="mb-0 flex flex-col">
|
||||
<div className="flex flex-col rounded-lg bg-white/5">
|
||||
<div className="w-full rounded-t-lg border-b border-white/10 bg-white/5 p-4">
|
||||
<User pubkey={db.account.pubkey} variant="simple" />
|
||||
<div className="mb-8 inline-flex w-full items-center justify-center">
|
||||
<User pubkey={db.account.pubkey} variant="avatar" />
|
||||
</div>
|
||||
<form
|
||||
onSubmit={handleSubmit(onSubmit)}
|
||||
className="mx-auto mb-0 flex w-2/3 flex-col"
|
||||
>
|
||||
<div className="relative">
|
||||
<input
|
||||
{...register('password', { required: true, minLength: 4 })}
|
||||
type={showPassword ? 'text' : 'password'}
|
||||
placeholder="Password"
|
||||
className="relative h-12 w-full rounded-b-lg bg-white/10 py-1 text-center tracking-widest text-white !outline-none backdrop-blur-xl placeholder:tracking-normal placeholder:text-white/50"
|
||||
placeholder="Enter password"
|
||||
className="relative h-12 w-full rounded-lg bg-zinc-300 py-1 text-center tracking-widest text-zinc-900 !outline-none backdrop-blur-xl placeholder:tracking-normal placeholder:text-zinc-500 dark:bg-zinc-800 dark:text-zinc-100 dark:placeholder:text-zinc-500"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowPassword((prev) => !prev)}
|
||||
className="group absolute right-2 top-1/2 -translate-y-1/2 transform rounded p-1 backdrop-blur-xl hover:bg-white/10"
|
||||
className="group absolute right-2 top-1/2 -translate-y-1/2 transform rounded-full p-1 backdrop-blur-xl hover:bg-black/10 dark:hover:bg-white/10"
|
||||
>
|
||||
{showPassword ? (
|
||||
<EyeOffIcon className="h-5 w-5 text-white/50 group-hover:text-white" />
|
||||
<EyeOffIcon className="group-hover:text-dark h-5 w-5 text-black/50 dark:text-white/50 dark:group-hover:text-white" />
|
||||
) : (
|
||||
<EyeOnIcon className="h-5 w-5 text-white/50 group-hover:text-white" />
|
||||
<EyeOnIcon className="group-hover:text-dark h-5 w-5 text-black/50 dark:text-white/50 dark:group-hover:text-white" />
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col items-center justify-center">
|
||||
<span className="mb-3 text-sm text-red-400">
|
||||
{errors.password && <p>{errors.password.message}</p>}
|
||||
</span>
|
||||
<div className="mt-2 flex flex-col">
|
||||
<button
|
||||
type="submit"
|
||||
disabled={!isDirty || !isValid}
|
||||
className="inline-flex h-12 w-full items-center justify-between gap-2 rounded-lg bg-fuchsia-500 px-6 font-medium leading-none text-white hover:bg-fuchsia-600 focus:outline-none disabled:opacity-50"
|
||||
className="inline-flex h-10 w-full items-center justify-between gap-2 rounded-lg bg-interor-600 px-6 text-white hover:bg-interor-700 focus:outline-none disabled:opacity-50"
|
||||
>
|
||||
{loading ? (
|
||||
<>
|
||||
@ -136,30 +129,6 @@ export function UnlockScreen() {
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
<div className="mt-8 w-full">
|
||||
<div className="flex items-center gap-2.5">
|
||||
<div className="h-px flex-1 bg-white/10" />
|
||||
<p className="shrink-0 text-sm font-medium text-white/50">
|
||||
Forgot password?
|
||||
</p>
|
||||
<div className="h-px flex-1 bg-white/10" />
|
||||
</div>
|
||||
<div className="mt-2 flex flex-col">
|
||||
<Link
|
||||
to="/auth/reset"
|
||||
className="inline-flex h-10 w-full items-center justify-center rounded-lg text-center text-sm font-medium text-white/70 hover:bg-white/20"
|
||||
>
|
||||
Reset password if you still have a private key
|
||||
</Link>
|
||||
<button
|
||||
type="button"
|
||||
onClick={logout}
|
||||
className="inline-flex h-10 w-full items-center justify-center rounded-lg text-center text-sm font-medium text-white/70 hover:bg-white/20"
|
||||
>
|
||||
Login with another account
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
@ -84,7 +84,7 @@ export function SpaceScreen() {
|
||||
}, [fetchWidgets]);
|
||||
|
||||
return (
|
||||
<div className="scrollbar-hide inline-flex h-full w-full min-w-full flex-nowrap items-start divide-x divide-white/5 overflow-x-auto overflow-y-hidden">
|
||||
<div className="scrollbar-hide inline-flex h-full w-full min-w-full flex-nowrap items-start divide-x divide-zinc-200 overflow-x-auto overflow-y-hidden dark:divide-zinc-800">
|
||||
{!widgets ? (
|
||||
<div className="flex shrink-0 grow-0 basis-[400px] flex-col">
|
||||
<div className="flex w-full flex-1 items-center justify-center p-3">
|
||||
|
@ -50,12 +50,12 @@ export function SplashScreen() {
|
||||
}, [ndk, db.account]);
|
||||
|
||||
return (
|
||||
<div className="relative flex h-screen w-screen items-center justify-center bg-black">
|
||||
<div data-tauri-drag-region className="absolute left-0 top-0 z-10 h-11 w-full" />
|
||||
<div className="bg-zinc-50 dark:bg-zinc-950 relative flex h-screen w-screen items-center justify-center">
|
||||
<div data-tauri-drag-region className="absolute left-0 top-0 z-10 h-16 w-full" />
|
||||
<div className="flex min-h-0 w-full flex-1 items-center justify-center px-8">
|
||||
<div className="flex flex-col items-center justify-center gap-6">
|
||||
<LoaderIcon className="h-6 w-6 animate-spin text-white" />
|
||||
<h3 className="text-lg font-semibold leading-none text-white">
|
||||
<LoaderIcon className="text-zinc-950 dark:text-zinc-50 h-6 w-6 animate-spin" />
|
||||
<h3 className="text-zinc-950 dark:text-zinc-50 text-lg font-medium leading-none">
|
||||
{!ndk ? 'Connecting...' : 'Syncing...'}
|
||||
</h3>
|
||||
</div>
|
||||
|
@ -28,10 +28,10 @@ export function ComposerModal() {
|
||||
<Dialog.Trigger asChild>
|
||||
<button
|
||||
type="button"
|
||||
className="flex h-9 items-center gap-2 rounded-full border-t border-white/10 bg-white/20 px-4 text-sm font-semibold text-white/80 hover:bg-fuchsia-500 hover:text-white"
|
||||
className="flex h-9 items-center gap-2 rounded-full bg-zinc-200 px-4 text-sm font-semibold text-zinc-900 hover:bg-interor-600 hover:text-white dark:bg-zinc-900 dark:text-zinc-100 dark:hover:bg-interor-600"
|
||||
>
|
||||
New
|
||||
<ComposeIcon className="h-4 w-4 text-white" />
|
||||
<ComposeIcon className="h-4 w-4" />
|
||||
</button>
|
||||
</Dialog.Trigger>
|
||||
<Dialog.Portal>
|
||||
|
@ -1,14 +1,17 @@
|
||||
import { Outlet, ScrollRestoration } from 'react-router-dom';
|
||||
import { WindowTitlebar } from 'tauri-controls';
|
||||
|
||||
import { Navigation } from '@shared/navigation';
|
||||
|
||||
export function AppLayout() {
|
||||
return (
|
||||
<div className="flex h-screen w-screen">
|
||||
<div className="shrink-0">
|
||||
<div className="h-screen w-screen bg-zinc-50 text-zinc-50 dark:bg-zinc-950 dark:text-zinc-950">
|
||||
<WindowTitlebar className="border-b border-zinc-200 dark:border-zinc-800" />
|
||||
<div className="flex h-full">
|
||||
<div className="h-full shrink-0">
|
||||
<Navigation />
|
||||
</div>
|
||||
<div className="h-full w-full flex-1">
|
||||
<div className="h-full flex-1">
|
||||
<Outlet />
|
||||
<ScrollRestoration
|
||||
getKey={(location) => {
|
||||
@ -17,5 +20,6 @@ export function AppLayout() {
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
@ -1,10 +1,13 @@
|
||||
import { Outlet } from 'react-router-dom';
|
||||
import { WindowTitlebar } from 'tauri-controls';
|
||||
|
||||
export function AuthLayout() {
|
||||
return (
|
||||
<div className="relative h-screen w-screen">
|
||||
<div className="absolute left-0 top-0 z-50 h-16 w-full" data-tauri-drag-region />
|
||||
<div className="relative h-screen w-screen bg-zinc-50 dark:bg-zinc-950">
|
||||
<WindowTitlebar className="border-b border-zinc-200 dark:border-zinc-800" />
|
||||
<div className="bg-zinc-100 dark:bg-zinc-900">
|
||||
<Outlet />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
@ -20,28 +20,23 @@ export function Navigation() {
|
||||
const navigate = useNavigate();
|
||||
|
||||
return (
|
||||
<div className="relative flex h-full w-[232px] flex-col border-r border-white/5">
|
||||
<div className="relative flex h-full w-[232px] flex-col border-r border-zinc-200 dark:border-zinc-800">
|
||||
<div
|
||||
data-tauri-drag-region
|
||||
className="inline-flex h-16 w-full items-center justify-between px-3"
|
||||
>
|
||||
<div
|
||||
className={twMerge(
|
||||
'inline-flex items-center gap-4',
|
||||
db.platform === 'darwin' ? 'pl-20' : 'pl-2'
|
||||
)}
|
||||
>
|
||||
<div className="inline-flex items-center gap-4 pl-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => navigate(-1)}
|
||||
className="inline-flex h-9 items-center justify-center text-white/50 hover:text-white"
|
||||
className="inline-flex h-9 items-center justify-center text-zinc-400 hover:text-zinc-500 dark:text-zinc-500 dark:hover:text-zinc-100"
|
||||
>
|
||||
<ArrowLeftIcon className="h-5 w-5" />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => navigate(1)}
|
||||
className="inline-flex h-9 items-center justify-center text-white/50 hover:text-white"
|
||||
className="inline-flex h-9 items-center justify-center text-zinc-400 hover:text-zinc-500 dark:text-zinc-500 dark:hover:text-zinc-100"
|
||||
>
|
||||
<ArrowRightIcon className="h-5 w-5" />
|
||||
</button>
|
||||
@ -60,8 +55,8 @@ export function Navigation() {
|
||||
twMerge(
|
||||
'flex h-10 items-center gap-2.5 rounded-r-lg border-l-2 px-3 font-medium',
|
||||
isActive
|
||||
? 'border-fuchsia-500 bg-white/5 text-white'
|
||||
: 'border-transparent text-white/70'
|
||||
? 'border-interor-600 bg-zinc-100 text-zinc-900 dark:bg-zinc-900 dark:text-zinc-100'
|
||||
: 'border-transparent text-zinc-500 dark:text-zinc-500'
|
||||
)
|
||||
}
|
||||
>
|
||||
@ -77,8 +72,8 @@ export function Navigation() {
|
||||
twMerge(
|
||||
'flex h-10 items-center gap-2.5 rounded-r-lg border-l-2 px-3 font-medium',
|
||||
isActive
|
||||
? 'border-fuchsia-500 bg-white/5 text-white'
|
||||
: 'border-transparent text-white/70'
|
||||
? 'border-interor-600 bg-zinc-100 text-zinc-900 dark:bg-zinc-900 dark:text-zinc-100'
|
||||
: 'border-transparent text-zinc-500 dark:text-zinc-500'
|
||||
)
|
||||
}
|
||||
>
|
||||
@ -94,8 +89,8 @@ export function Navigation() {
|
||||
twMerge(
|
||||
'flex h-10 items-center gap-2.5 rounded-r-lg border-l-2 px-3 font-medium',
|
||||
isActive
|
||||
? 'border-fuchsia-500 bg-white/5 text-white'
|
||||
: 'border-transparent text-white/70'
|
||||
? 'border-interor-600 bg-zinc-100 text-zinc-900 dark:bg-zinc-900 dark:text-zinc-100'
|
||||
: 'border-transparent text-zinc-500 dark:text-zinc-500'
|
||||
)
|
||||
}
|
||||
>
|
||||
@ -111,8 +106,8 @@ export function Navigation() {
|
||||
twMerge(
|
||||
'flex h-10 items-center gap-2.5 rounded-r-lg border-l-2 px-3 font-medium',
|
||||
isActive
|
||||
? 'border-fuchsia-500 bg-white/5 text-white'
|
||||
: 'border-transparent text-white/70'
|
||||
? 'border-interor-600 bg-zinc-100 text-zinc-900 dark:bg-zinc-900 dark:text-zinc-100'
|
||||
: 'border-transparent text-zinc-500 dark:text-zinc-500'
|
||||
)
|
||||
}
|
||||
>
|
||||
@ -128,8 +123,8 @@ export function Navigation() {
|
||||
twMerge(
|
||||
'flex h-10 items-center gap-2.5 rounded-r-lg border-l-2 px-3 font-medium',
|
||||
isActive
|
||||
? 'border-fuchsia-500 bg-white/5 text-white'
|
||||
: 'border-transparent text-white/70'
|
||||
? 'border-interor-600 bg-zinc-100 text-zinc-900 dark:bg-zinc-900 dark:text-zinc-100'
|
||||
: 'border-transparent text-zinc-500 dark:text-zinc-500'
|
||||
)
|
||||
}
|
||||
>
|
||||
|
@ -81,7 +81,7 @@ export function ChildNote({ id, root }: { id: string; root?: string }) {
|
||||
<div className="absolute bottom-0 left-[18px] h-[calc(100%-3.6rem)] w-0.5 bg-gradient-to-t from-white/20 to-white/10" />
|
||||
<div className="mb-6 flex flex-col">
|
||||
<User pubkey={data.pubkey} time={data.created_at} />
|
||||
<div className="-mt-5 flex items-start gap-3">
|
||||
<div className="-mt-4 flex items-start gap-3">
|
||||
<div className="w-10 shrink-0" />
|
||||
<div className="relative z-20 flex-1">
|
||||
{renderKind(data)}
|
||||
|
@ -65,13 +65,13 @@ export function Repost({
|
||||
<div
|
||||
className={twMerge(
|
||||
'relative flex flex-col gap-1 overflow-hidden rounded-xl px-3 py-3',
|
||||
!lighter ? 'bg-white/10 backdrop-blur-xl' : ''
|
||||
!lighter ? 'bg-zinc-100 dark:bg-zinc-900' : 'bg-transparent'
|
||||
)}
|
||||
>
|
||||
<User pubkey={event.pubkey} time={event.created_at} variant="repost" />
|
||||
<div className="relative flex flex-col">
|
||||
<User pubkey={embedEvent.pubkey} time={embedEvent.created_at} />
|
||||
<div className="-mt-5 flex items-start gap-3">
|
||||
<div className="-mt-4 flex items-start gap-3">
|
||||
<div className="w-10 shrink-0" />
|
||||
<div className="relative z-20 flex-1">
|
||||
{renderKind(embedEvent)}
|
||||
@ -104,7 +104,7 @@ export function Repost({
|
||||
<div
|
||||
className={twMerge(
|
||||
'relative overflow-hidden rounded-xl px-3 py-3',
|
||||
!lighter ? 'bg-white/10 backdrop-blur-xl' : ''
|
||||
!lighter ? 'bg-zinc-100 dark:bg-zinc-900' : 'bg-transparent'
|
||||
)}
|
||||
>
|
||||
<div className="relative flex flex-col">
|
||||
@ -116,7 +116,7 @@ export function Repost({
|
||||
Lume <span className="text-green-500">(System)</span>
|
||||
</h5>
|
||||
</div>
|
||||
<div className="-mt-6 flex items-start gap-3">
|
||||
<div className="-mt-4 flex items-start gap-3">
|
||||
<div className="w-11 shrink-0" />
|
||||
<div>
|
||||
<div className="relative z-20 mt-1 flex-1 select-text">
|
||||
@ -142,13 +142,13 @@ export function Repost({
|
||||
<div
|
||||
className={twMerge(
|
||||
'relative flex flex-col gap-1 overflow-hidden rounded-xl px-3 py-3',
|
||||
!lighter ? 'bg-white/10 backdrop-blur-xl' : ''
|
||||
!lighter ? 'bg-zinc-100 dark:bg-zinc-900' : 'bg-transparent'
|
||||
)}
|
||||
>
|
||||
<User pubkey={event.pubkey} time={event.created_at} variant="repost" />
|
||||
<div className="relative flex flex-col">
|
||||
<User pubkey={data.pubkey} time={data.created_at} />
|
||||
<div className="-mt-5 flex items-start gap-3">
|
||||
<div className="-mt-4 flex items-start gap-3">
|
||||
<div className="w-10 shrink-0" />
|
||||
<div className="relative z-20 flex-1">
|
||||
{renderKind(data)}
|
||||
|
@ -36,14 +36,14 @@ export function TextNote(props: { content?: string }) {
|
||||
return (
|
||||
<div>
|
||||
<ReactMarkdown
|
||||
className="markdown"
|
||||
className="prose prose-zinc max-w-none select-text dark:prose-invert prose-headings:mb-1 prose-headings:mt-3 prose-p:mb-0 prose-p:mt-0 prose-p:last:mb-0 prose-a:font-normal prose-a:text-interor-500 hover:prose-a:text-interor-600 prose-blockquote:mb-1 prose-blockquote:mt-1 prose-blockquote:border-l-[2px] prose-blockquote:border-interor-500 prose-blockquote:pl-2 prose-pre:whitespace-pre-wrap prose-pre:break-words prose-pre:break-all prose-pre:bg-white/10 prose-ol:m-0 prose-ol:mb-1 prose-ul:mb-1 prose-ul:mt-1 prose-img:mb-2 prose-img:mt-3 prose-hr:mx-0 prose-hr:my-2"
|
||||
remarkPlugins={[remarkGfm]}
|
||||
components={{
|
||||
a: ({ href }) => {
|
||||
const cleanURL = new URL(href);
|
||||
cleanURL.search = '';
|
||||
return (
|
||||
<Link to={href} target="_blank" className="line-clamp-1">
|
||||
<Link to={href} target="_blank" className="line-clamp-1 w-full break-all">
|
||||
{cleanURL.hostname + cleanURL.pathname}
|
||||
</Link>
|
||||
);
|
||||
|
@ -24,7 +24,7 @@ export function Hashtag({ tag }: { tag: string }) {
|
||||
content: tag.replace('#', ''),
|
||||
})
|
||||
}
|
||||
className="break-all text-fuchsia-400 hover:text-fuchsia-500"
|
||||
className="break-all text-interor-500 hover:text-interor-600"
|
||||
>
|
||||
{tag}
|
||||
</span>
|
||||
|
@ -30,7 +30,7 @@ export const MentionUser = memo(function MentionUser({ pubkey }: { pubkey: strin
|
||||
content: pubkey,
|
||||
})
|
||||
}
|
||||
className="break-words text-fuchsia-400 hover:text-fuchsia-500"
|
||||
className="break-words text-interor-500 hover:text-interor-600"
|
||||
>
|
||||
{'@' +
|
||||
(user?.name ||
|
||||
|
@ -17,7 +17,7 @@ export function ImagePreview({ urls, truncate }: { urls: string[]; truncate?: bo
|
||||
<div key={url} className="group relative min-w-0 shrink-0 grow-0 basis-full">
|
||||
<img
|
||||
src={url}
|
||||
alt={url}
|
||||
alt="image"
|
||||
className={`${
|
||||
truncate ? 'h-auto max-h-[300px]' : 'h-auto'
|
||||
} w-full rounded-lg border border-white/10 object-cover`}
|
||||
|
@ -21,7 +21,7 @@ export function VideoPreview({ urls }: { urls: string[] }) {
|
||||
<MediaProvider>
|
||||
<Poster
|
||||
className="vds-poster"
|
||||
src="https://thumbnail.video/api/get?url=${url}&seconds=1"
|
||||
src={`https://thumbnail.video/api/get?url=${url}&seconds=1`}
|
||||
alt={url}
|
||||
/>
|
||||
</MediaProvider>
|
||||
|
@ -24,14 +24,14 @@ export function NoteWrapper({
|
||||
<div
|
||||
className={twMerge(
|
||||
'relative overflow-hidden rounded-xl px-3 py-4',
|
||||
!lighter ? 'bg-white/10 backdrop-blur-xl' : 'bg-transparent'
|
||||
!lighter ? 'bg-zinc-100 dark:bg-zinc-900' : 'bg-transparent'
|
||||
)}
|
||||
>
|
||||
<div className="relative">{root && <ChildNote id={root} />}</div>
|
||||
<div className="relative">{reply && <ChildNote id={reply} root={root} />}</div>
|
||||
<div className="relative flex flex-col">
|
||||
<User pubkey={event.pubkey} time={event.created_at} />
|
||||
<div className="-mt-5 flex items-start gap-3">
|
||||
<div className="-mt-4 flex items-start gap-3">
|
||||
<div className="w-10 shrink-0" />
|
||||
<div className="relative z-20 flex-1">
|
||||
{cloneElement(
|
||||
|
@ -14,14 +14,14 @@ export function TitleBar({ id, title }: { id?: string; title: string }) {
|
||||
className="flex h-11 w-full shrink-0 items-center justify-between overflow-hidden px-3"
|
||||
>
|
||||
<div className="w-6" />
|
||||
<h3 className="text-sm font-bold text-white">{title}</h3>
|
||||
<h3 className="text-sm font-medium text-zinc-900 dark:text-zinc-100">{title}</h3>
|
||||
{id ? (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => remove(db, id)}
|
||||
className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded backdrop-blur-xl hover:bg-white/10"
|
||||
className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded text-zinc-900 backdrop-blur-xl hover:bg-zinc-100 dark:text-zinc-100 dark:hover:bg-zinc-900"
|
||||
>
|
||||
<CancelIcon className="h-3 w-3 text-white" />
|
||||
<CancelIcon className="h-3 w-3" />
|
||||
</button>
|
||||
) : (
|
||||
<div className="w-6" />
|
||||
|
@ -1,5 +1,5 @@
|
||||
import { nip19 } from 'nostr-tools';
|
||||
import { EventPointer, ProfilePointer } from 'nostr-tools/lib/nip19';
|
||||
import { AddressPointer, EventPointer, ProfilePointer } from 'nostr-tools/lib/nip19';
|
||||
|
||||
import { RichContent } from '@utils/types';
|
||||
|
||||
@ -84,7 +84,7 @@ export function parser(eventContent: string) {
|
||||
}
|
||||
|
||||
// nostr account references
|
||||
if (word.startsWith('nostr:note1') || word.startsWith('noté')) {
|
||||
if (word.startsWith('nostr:note1') || word.startsWith('note1')) {
|
||||
const note = word.replace('nostr:', '').replace(/[^a-zA-Z0-9 ]/g, '');
|
||||
content.notes.push(nip19.decode(note).data as string);
|
||||
return word.replace(word, '');
|
||||
@ -98,6 +98,15 @@ export function parser(eventContent: string) {
|
||||
return word.replace(word, '');
|
||||
}
|
||||
|
||||
// nostr address references
|
||||
if (word.startsWith('nostr:naddr1') || word.startsWith('naddr1')) {
|
||||
const naddr = word.replace('nostr:', '').replace(/[^a-zA-Z0-9 ]/g, '');
|
||||
const decoded = nip19.decode(naddr).data as AddressPointer;
|
||||
// TODO
|
||||
console.log('todo: ', decoded);
|
||||
return word.replace(word, '');
|
||||
}
|
||||
|
||||
// normal word
|
||||
return word;
|
||||
});
|
||||
|
@ -1,12 +1,28 @@
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
|
||||
const defaultTheme = require('tailwindcss/defaultTheme')
|
||||
const defaultTheme = require('tailwindcss/defaultTheme');
|
||||
|
||||
module.exports = {
|
||||
content: ['./src/**/*.{js,ts,jsx,tsx}', 'index.html'],
|
||||
darkMode: 'class',
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
// 'international orange'
|
||||
interor: {
|
||||
50: 'hsl(32, 100%, 96%)',
|
||||
100: 'hsl(34, 100%, 91%)',
|
||||
200: 'hsl(31, 100%, 82%)',
|
||||
300: 'hsl(30, 100%, 71%)',
|
||||
400: 'hsl(26, 100%, 60%)',
|
||||
500: 'hsl(23, 100%, 52%)',
|
||||
600: 'hsl(19, 100%, 50%)',
|
||||
700: 'hsl(15, 98%, 40%)',
|
||||
800: 'hsl(13, 87%, 34%)',
|
||||
900: 'hsl(13, 83%, 28%)',
|
||||
950: 'hsl(11, 89%, 15%)',
|
||||
},
|
||||
},
|
||||
fontFamily: {
|
||||
sans: ['Inter Variable', ...defaultTheme.fontFamily.sans],
|
||||
},
|
||||
|
Loading…
Reference in New Issue
Block a user