reya/lume
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

wip: new design

Browse Source
This commit is contained in:
reya
2024-02-14 08:29:24 +07:00
parent 4292def206
commit 60fd09000b
131 changed files with 2026 additions and 5853 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
packages/ark/src/ark.ts
View File

@@ -19,6 +19,15 @@ export class Ark {
}
}
public async create_keys() {
try {
const cmd: Keys = await invoke("create_keys");
return cmd;
} catch (e) {
console.error(String(e));
}
}
public async save_account(keys: Keys) {
try {
const cmd: boolean = await invoke("save_key", { nsec: keys.nsec });

153
packages/ark/src/components/note/preview/link.tsx
View File

@@ -1,88 +1,87 @@
import { useOpenGraph } from "@lume/utils";
import { Link } from "react-router-dom";
function isImage(url: string) {
return /^https?:\/\/.+\.(jpg|jpeg|png|webp|avif)$/.test(url);
return /^https?:\/\/.+\.(jpg|jpeg|png|webp|avif)$/.test(url);
}
export function LinkPreview({ url }: { url: string }) {
const domain = new URL(url);
const { isLoading, isError, data } = useOpenGraph(url);
const domain = new URL(url);
const { isLoading, isError, data } = useOpenGraph(url);
if (isLoading) {
return (
<div className="flex flex-col w-full mt-1 mb-2.5 rounded-xl overflow-hidden bg-neutral-100 dark:bg-neutral-900 border border-black/5 dark:border-white/5">
<div className="w-full h-48 shrink-0 animate-pulse bg-neutral-300 dark:bg-neutral-700" />
<div className="flex flex-col gap-2 px-3 py-3">
<div className="w-2/3 h-3 rounded animate-pulse bg-neutral-300 dark:bg-neutral-700" />
<div className="w-3/4 h-3 rounded animate-pulse bg-neutral-300 dark:bg-neutral-700" />
<span className="mt-2.5 text-sm leading-none text-neutral-600 dark:text-neutral-400">
{domain.hostname}
</span>
</div>
</div>
);
}
if (isLoading) {
return (
<div className="mb-2.5 mt-1 flex w-full flex-col overflow-hidden rounded-xl border border-black/5 bg-neutral-100 dark:border-white/5 dark:bg-neutral-900">
<div className="h-48 w-full shrink-0 animate-pulse bg-neutral-300 dark:bg-neutral-700" />
<div className="flex flex-col gap-2 px-3 py-3">
<div className="h-3 w-2/3 animate-pulse rounded bg-neutral-300 dark:bg-neutral-700" />
<div className="h-3 w-3/4 animate-pulse rounded bg-neutral-300 dark:bg-neutral-700" />
<span className="mt-2.5 text-sm leading-none text-neutral-600 dark:text-neutral-400">
{domain.hostname}
</span>
</div>
</div>
);
}
if (!data.title && !data.image && !data.description) {
return (
<Link
to={url}
target="_blank"
rel="noreferrer"
className="text-blue-500 hover:text-blue-600"
>
{url}
</Link>
);
}
if (!data.title && !data.image && !data.description) {
return (
<a
href={url}
target="_blank"
rel="noreferrer"
className="text-blue-500 hover:text-blue-600"
>
{url}
</a>
);
}
if (isError) {
return (
<Link
to={url}
target="_blank"
rel="noreferrer"
className="text-blue-500 hover:text-blue-600"
>
{url}
</Link>
);
}
if (isError) {
return (
<a
href={url}
target="_blank"
rel="noreferrer"
className="text-blue-500 hover:text-blue-600"
>
{url}
</a>
);
}
return (
<Link
to={url}
target="_blank"
rel="noreferrer"
className="flex flex-col w-full mt-1 mb-2.5 overflow-hidden rounded-xl bg-neutral-100 dark:bg-neutral-900 border border-black/5 dark:border-white/5"
>
{isImage(data.image) ? (
<img
src={data.image}
alt={url}
loading="lazy"
decoding="async"
className="object-cover w-full h-48 shrink-0 bg-white rounded-t-lg"
/>
) : null}
<div className="flex flex-col items-start p-3">
<div className="flex flex-col items-start text-left">
{data.title ? (
<div className="text-base font-semibold break-p text-neutral-900 dark:text-neutral-100">
{data.title}
</div>
) : null}
{data.description ? (
<div className="mb-2 text-balance text-sm break-p line-clamp-3 text-neutral-700 dark:text-neutral-400">
{data.description}
</div>
) : null}
</div>
<div className="text-sm break-all text-blue-500 font-semibold">
{domain.hostname}
</div>
</div>
</Link>
);
return (
<a
href={url}
target="_blank"
rel="noreferrer"
className="mb-2.5 mt-1 flex w-full flex-col overflow-hidden rounded-xl border border-black/5 bg-neutral-100 dark:border-white/5 dark:bg-neutral-900"
>
{isImage(data.image) ? (
<img
src={data.image}
alt={url}
loading="lazy"
decoding="async"
className="h-48 w-full shrink-0 rounded-t-lg bg-white object-cover"
/>
) : null}
<div className="flex flex-col items-start p-3">
<div className="flex flex-col items-start text-left">
{data.title ? (
<div className="break-p text-base font-semibold text-neutral-900 dark:text-neutral-100">
{data.title}
</div>
) : null}
{data.description ? (
<div className="break-p mb-2 line-clamp-3 text-balance text-sm text-neutral-700 dark:text-neutral-400">
{data.description}
</div>
) : null}
</div>
<div className="break-all text-sm font-semibold text-blue-500">
{domain.hostname}
</div>
</div>
</a>
);
}

9
packages/ark/src/components/user/cover.tsx
View File

@@ -7,14 +7,19 @@ export function UserCover({ className }: { className?: string }) {
if (!user) {
return (
<div
className={cn("animate-pulse bg-gray-3 dark:bg-gray-7", className)}
className={cn(
"animate-pulse bg-neutral-300 dark:bg-neutral-700",
className,
)}
/>
);
}
if (user && !user.profile.banner) {
return (
<div className={cn("bg-gradient-to-b from-sky-4 to-blue-2", className)} />
<div
className={cn("bg-gradient-to-b from-blue-400 to-teal-200", className)}
/>
);
}

2
packages/ark/src/components/user/nip05.tsx
View File

@@ -37,7 +37,7 @@ export function UserNip05({ className }: { className?: string }) {
: user?.profile.nip05}
</p>
{!isLoading && verified ? (
<VerifiedIcon className="size-4 text-green-10" />
<VerifiedIcon className="text-teal-500 size-4" />
) : null}
</div>
);