mirror of
https://github.com/luminous-devs/lume.git
synced 2024-09-19 11:43:30 +00:00
optimize img tag
This commit is contained in:
parent
740dc85f13
commit
2014720f93
@ -10,7 +10,8 @@
|
|||||||
],
|
],
|
||||||
"rules": {
|
"rules": {
|
||||||
"@typescript-eslint/no-unused-vars": "error",
|
"@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"]
|
"ignorePatterns": ["dist", "**/*.js", "**/*.json", "node_modules"]
|
||||||
}
|
}
|
||||||
|
7
global.d.ts
vendored
Normal file
7
global.d.ts
vendored
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
import { AriaAttributes, DOMAttributes } from 'react';
|
||||||
|
|
||||||
|
declare module 'react' {
|
||||||
|
interface HTMLAttributes<T> extends AriaAttributes, DOMAttributes<T> {
|
||||||
|
fetchpriority?: 'high' | 'low' | 'auto';
|
||||||
|
}
|
||||||
|
}
|
@ -25,6 +25,8 @@ export const ChannelListItem = ({ data }: { data: any }) => {
|
|||||||
src={channel?.picture || DEFAULT_AVATAR}
|
src={channel?.picture || DEFAULT_AVATAR}
|
||||||
alt={data.event_id}
|
alt={data.event_id}
|
||||||
className="h-5 w-5 rounded bg-zinc-900 object-cover"
|
className="h-5 w-5 rounded bg-zinc-900 object-cover"
|
||||||
|
loading="lazy"
|
||||||
|
fetchpriority="high"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
|
@ -30,6 +30,8 @@ export default function ChatList() {
|
|||||||
src={profile?.picture || DEFAULT_AVATAR}
|
src={profile?.picture || DEFAULT_AVATAR}
|
||||||
alt={activeAccount.pubkey}
|
alt={activeAccount.pubkey}
|
||||||
className="h-5 w-5 rounded object-cover"
|
className="h-5 w-5 rounded object-cover"
|
||||||
|
loading="lazy"
|
||||||
|
fetchpriority="high"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
|
@ -22,7 +22,13 @@ export const ChatListItem = ({ pubkey }: { pubkey: string }) => {
|
|||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
<div className="relative h-5 w-5 shrink rounded">
|
<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>
|
||||||
<div>
|
<div>
|
||||||
<h5 className="text-sm font-medium text-zinc-400">
|
<h5 className="text-sm font-medium text-zinc-400">
|
||||||
|
@ -14,7 +14,13 @@ export const MessageUser = ({ pubkey, time }: { pubkey: string; time: number })
|
|||||||
return (
|
return (
|
||||||
<div className="group flex items-start gap-3">
|
<div className="group flex items-start gap-3">
|
||||||
<div className="relative h-9 w-9 shrink rounded-md">
|
<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>
|
||||||
<div className="flex w-full flex-1 items-start justify-between">
|
<div className="flex w-full flex-1 items-start justify-between">
|
||||||
<div className="flex items-baseline gap-2 text-sm">
|
<div className="flex items-baseline gap-2 text-sm">
|
||||||
|
@ -3,7 +3,7 @@ import { memo } from 'react';
|
|||||||
export const ImagePreview = memo(function ImagePreview({ url, size }: { url: string; size: string }) {
|
export const ImagePreview = memo(function ImagePreview({ url, size }: { url: string; size: string }) {
|
||||||
return (
|
return (
|
||||||
<div className={`relative h-full ${size === 'large' ? 'w-4/5' : 'w-1/2'} mt-2 rounded-lg border border-zinc-800`}>
|
<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>
|
</div>
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
@ -11,7 +11,13 @@ export const UserBase = memo(function UserBase({ pubkey }: { pubkey: string }) {
|
|||||||
return (
|
return (
|
||||||
<div className="flex items-center gap-2">
|
<div className="flex items-center gap-2">
|
||||||
<div className="relative h-11 w-11 shrink overflow-hidden rounded-full border border-white/10">
|
<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>
|
||||||
<div className="flex w-full flex-1 flex-col items-start text-start">
|
<div className="flex w-full flex-1 flex-col items-start text-start">
|
||||||
<span className="truncate font-medium leading-tight text-zinc-200">
|
<span className="truncate font-medium leading-tight text-zinc-200">
|
||||||
|
@ -14,7 +14,13 @@ export const UserExtend = ({ pubkey, time }: { pubkey: string; time: number }) =
|
|||||||
return (
|
return (
|
||||||
<div className="group flex h-11 items-center gap-2">
|
<div className="group flex h-11 items-center gap-2">
|
||||||
<div className="relative h-11 w-11 shrink overflow-hidden rounded-md bg-white">
|
<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>
|
||||||
<div className="flex w-full flex-1 items-start justify-between">
|
<div className="flex w-full flex-1 items-start justify-between">
|
||||||
<div className="flex flex-col gap-1">
|
<div className="flex flex-col gap-1">
|
||||||
|
@ -9,7 +9,13 @@ export const UserFollow = ({ pubkey }: { pubkey: string }) => {
|
|||||||
return (
|
return (
|
||||||
<div className="flex items-center gap-2">
|
<div className="flex items-center gap-2">
|
||||||
<div className="relative h-11 w-11 shrink overflow-hidden rounded-full border border-white/10">
|
<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>
|
||||||
<div className="flex w-full flex-1 flex-col items-start text-start">
|
<div className="flex w-full flex-1 flex-col items-start text-start">
|
||||||
<span className="truncate font-medium leading-tight text-zinc-200">
|
<span className="truncate font-medium leading-tight text-zinc-200">
|
||||||
|
@ -19,6 +19,8 @@ export const UserLarge = ({ pubkey, time }: { pubkey: string; time: number }) =>
|
|||||||
src={profile?.picture || DEFAULT_AVATAR}
|
src={profile?.picture || DEFAULT_AVATAR}
|
||||||
alt={pubkey}
|
alt={pubkey}
|
||||||
className="h-11 w-11 rounded-md border border-white/10 object-cover"
|
className="h-11 w-11 rounded-md border border-white/10 object-cover"
|
||||||
|
loading="lazy"
|
||||||
|
fetchpriority="high"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div className="w-full flex-1">
|
<div className="w-full flex-1">
|
||||||
|
@ -9,7 +9,13 @@ export const UserMini = ({ pubkey }: { pubkey: string }) => {
|
|||||||
return (
|
return (
|
||||||
<div className="group flex items-start gap-1">
|
<div className="group flex items-start gap-1">
|
||||||
<div className="relative h-7 w-7 shrink overflow-hidden rounded border border-white/10">
|
<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>
|
</div>
|
||||||
<span className="text-xs font-medium leading-none text-zinc-500">
|
<span className="text-xs font-medium leading-none text-zinc-500">
|
||||||
Replying to {profile?.name || shortenKey(pubkey)}
|
Replying to {profile?.name || shortenKey(pubkey)}
|
||||||
|
@ -14,7 +14,13 @@ export const UserQuoteRepost = ({ pubkey, time }: { pubkey: string; time: number
|
|||||||
return (
|
return (
|
||||||
<div className="group flex items-center gap-2">
|
<div className="group flex items-center gap-2">
|
||||||
<div className="relative h-11 w-11 shrink overflow-hidden rounded-md bg-white">
|
<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>
|
||||||
<div className="flex items-baseline gap-2 text-sm">
|
<div className="flex items-baseline gap-2 text-sm">
|
||||||
<h5 className="font-semibold leading-tight group-hover:underline">
|
<h5 className="font-semibold leading-tight group-hover:underline">
|
||||||
|
@ -30,6 +30,6 @@
|
|||||||
],
|
],
|
||||||
"strictNullChecks": false
|
"strictNullChecks": false
|
||||||
},
|
},
|
||||||
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
|
"include": ["global.d.ts", "**/*.ts", "**/*.tsx"],
|
||||||
"exclude": ["node_modules"]
|
"exclude": ["node_modules"]
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user