nostr/lume
1
0
Fork 0
mirror of https://github.com/luminous-devs/lume.git synced 2024-09-14 09:13:31 +00:00
Code Issues Packages Projects Releases Wiki Activity

optimize img tag

Browse Source
This commit is contained in:
Ren Amamiya 2023-04-24 09:16:10 +07:00
parent 740dc85f13
commit 2014720f93
14 changed files with 66 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.eslintrc
View File

@ -10,7 +10,8 @@
],
"rules": {
"@typescript-eslint/no-unused-vars": "error",
"@typescript-eslint/no-explicit-any": "warn"
"@typescript-eslint/no-explicit-any": "warn",
"react/no-unknown-property": ["error", { "ignore": ["fetchpriority"] }]
},
"ignorePatterns": ["dist", "**/*.js", "**/*.json", "node_modules"]
}

7
global.d.ts vendored Normal file
View File

@ -0,0 +1,7 @@
import { AriaAttributes, DOMAttributes } from 'react';
declare module 'react' {
interface HTMLAttributes<T> extends AriaAttributes, DOMAttributes<T> {
fetchpriority?: 'high' | 'low' | 'auto';
}
}

2
src/components/channels/channelListItem.tsx
View File

@ -25,6 +25,8 @@ export const ChannelListItem = ({ data }: { data: any }) => {
src={channel?.picture || DEFAULT_AVATAR}
alt={data.event_id}
className="h-5 w-5 rounded bg-zinc-900 object-cover"
loading="lazy"
fetchpriority="high"
/>
</div>
<div>

2
src/components/chats/chatList.tsx
View File

@ -30,6 +30,8 @@ export default function ChatList() {
src={profile?.picture || DEFAULT_AVATAR}
alt={activeAccount.pubkey}
className="h-5 w-5 rounded object-cover"
loading="lazy"
fetchpriority="high"
/>
</div>
<div>

8
src/components/chats/chatListItem.tsx
View File

@ -22,7 +22,13 @@ export const ChatListItem = ({ pubkey }: { pubkey: string }) => {
)}
>
<div className="relative h-5 w-5 shrink rounded">
<img src={profile?.picture || DEFAULT_AVATAR} alt={pubkey} className="h-5 w-5 rounded object-cover" />
<img
src={profile?.picture || DEFAULT_AVATAR}
alt={pubkey}
className="h-5 w-5 rounded object-cover"
loading="lazy"
fetchpriority="high"
/>
</div>
<div>
<h5 className="text-sm font-medium text-zinc-400">

8
src/components/chats/messageUser.tsx
View File

@ -14,7 +14,13 @@ export const MessageUser = ({ pubkey, time }: { pubkey: string; time: number })
return (
<div className="group flex items-start gap-3">
<div className="relative h-9 w-9 shrink rounded-md">
<img src={profile?.picture || DEFAULT_AVATAR} alt={pubkey} className="h-9 w-9 rounded-md object-cover" />
<img
src={profile?.picture || DEFAULT_AVATAR}
alt={pubkey}
className="h-9 w-9 rounded-md object-cover"
loading="lazy"
fetchpriority="high"
/>
</div>
<div className="flex w-full flex-1 items-start justify-between">
<div className="flex items-baseline gap-2 text-sm">

2
src/components/note/preview/image.tsx
View File

@ -3,7 +3,7 @@ import { memo } from 'react';
export const ImagePreview = memo(function ImagePreview({ url, size }: { url: string; size: string }) {
return (
<div className={`relative h-full ${size === 'large' ? 'w-4/5' : 'w-1/2'} mt-2 rounded-lg border border-zinc-800`}>
<img src={url} alt={url} className="h-auto w-full rounded-lg object-cover" />
<img src={url} alt={url} className="h-auto w-full rounded-lg object-cover" loading="lazy" fetchpriority="high" />
</div>
);
});

8
src/components/user/base.tsx
View File

@ -11,7 +11,13 @@ export const UserBase = memo(function UserBase({ pubkey }: { pubkey: string }) {
return (
<div className="flex items-center gap-2">
<div className="relative h-11 w-11 shrink overflow-hidden rounded-full border border-white/10">
<img src={profile?.picture || DEFAULT_AVATAR} alt={pubkey} className="h-11 w-11 rounded-full object-cover" />
<img
src={profile?.picture || DEFAULT_AVATAR}
alt={pubkey}
className="h-11 w-11 rounded-full object-cover"
loading="lazy"
fetchpriority="high"
/>
</div>
<div className="flex w-full flex-1 flex-col items-start text-start">
<span className="truncate font-medium leading-tight text-zinc-200">

8
src/components/user/extend.tsx
View File

@ -14,7 +14,13 @@ export const UserExtend = ({ pubkey, time }: { pubkey: string; time: number }) =
return (
<div className="group flex h-11 items-center gap-2">
<div className="relative h-11 w-11 shrink overflow-hidden rounded-md bg-white">
<img src={profile?.picture || DEFAULT_AVATAR} alt={pubkey} className="h-11 w-11 rounded-md object-cover" />
<img
src={profile?.picture || DEFAULT_AVATAR}
alt={pubkey}
className="h-11 w-11 rounded-md object-cover"
loading="lazy"
fetchpriority="high"
/>
</div>
<div className="flex w-full flex-1 items-start justify-between">
<div className="flex flex-col gap-1">

8
src/components/user/follow.tsx
View File

@ -9,7 +9,13 @@ export const UserFollow = ({ pubkey }: { pubkey: string }) => {
return (
<div className="flex items-center gap-2">
<div className="relative h-11 w-11 shrink overflow-hidden rounded-full border border-white/10">
<img src={profile?.picture || DEFAULT_AVATAR} alt={pubkey} className="h-11 w-11 rounded-full object-cover" />
<img
src={profile?.picture || DEFAULT_AVATAR}
alt={pubkey}
className="h-11 w-11 rounded-full object-cover"
loading="lazy"
fetchpriority="high"
/>
</div>
<div className="flex w-full flex-1 flex-col items-start text-start">
<span className="truncate font-medium leading-tight text-zinc-200">

2
src/components/user/large.tsx
View File

@ -19,6 +19,8 @@ export const UserLarge = ({ pubkey, time }: { pubkey: string; time: number }) =>
src={profile?.picture || DEFAULT_AVATAR}
alt={pubkey}
className="h-11 w-11 rounded-md border border-white/10 object-cover"
loading="lazy"
fetchpriority="high"
/>
</div>
<div className="w-full flex-1">

8
src/components/user/mini.tsx
View File

@ -9,7 +9,13 @@ export const UserMini = ({ pubkey }: { pubkey: string }) => {
return (
<div className="group flex items-start gap-1">
<div className="relative h-7 w-7 shrink overflow-hidden rounded border border-white/10">
<img src={profile?.picture || DEFAULT_AVATAR} alt={pubkey} className="h-7 w-7 rounded object-cover" />
<img
src={profile?.picture || DEFAULT_AVATAR}
alt={pubkey}
className="h-7 w-7 rounded object-cover"
loading="lazy"
fetchpriority="high"
/>
</div>
<span className="text-xs font-medium leading-none text-zinc-500">
Replying to {profile?.name || shortenKey(pubkey)}

8
src/components/user/quoteRepost.tsx
View File

@ -14,7 +14,13 @@ export const UserQuoteRepost = ({ pubkey, time }: { pubkey: string; time: number
return (
<div className="group flex items-center gap-2">
<div className="relative h-11 w-11 shrink overflow-hidden rounded-md bg-white">
<img src={profile?.picture || DEFAULT_AVATAR} alt={pubkey} className="h-11 w-11 rounded-md object-cover" />
<img
src={profile?.picture || DEFAULT_AVATAR}
alt={pubkey}
className="h-11 w-11 rounded-md object-cover"
loading="lazy"
fetchpriority="high"
/>
</div>
<div className="flex items-baseline gap-2 text-sm">
<h5 className="font-semibold leading-tight group-hover:underline">

2
tsconfig.json
View File

@ -30,6 +30,6 @@
],
"strictNullChecks": false
},
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
"include": ["global.d.ts", "**/*.ts", "**/*.tsx"],
"exclude": ["node_modules"]
}