Skip to content

Commit 13bc304

Browse files
pastleopastleo
committed
use next-optimized-images@canary and its <Img />
1 parent 405b45c commit 13bc304

File tree

11 files changed

+1195
-2527
lines changed

11 files changed

+1195
-2527
lines changed

‎.babelrc

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"presets": ["next/babel"],
3+
"plugins": ["react-optimized-image/plugin"]
4+
}

‎components/Background.js

+13-16
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,20 @@
11
import classnames from 'classnames';
22

3-
import bgWebpSrc from '../assets/bg.jpg?webp';
4-
import bgJpgSrc from '../assets/bg.jpg';
3+
import Img from 'react-optimized-image';
4+
5+
import bgSrc from '../assets/bg.jpg';
56

67
const Background = ({ className }) => (
7-
<picture>
8-
<source srcSet={bgWebpSrc} type='image/webp' />
9-
<source srcSet={bgJpgSrc} type='image/jpeg' />
10-
<img
11-
alt='background'
12-
src={bgJpgSrc}
13-
className={
14-
classnames(
15-
'bg-background-avg print:hidden top-0 left-0 h-full w-full object-cover -z-1',
16-
className,
17-
)
18-
}
19-
/>
20-
</picture>
8+
<Img
9+
alt='background'
10+
src={bgSrc} webp
11+
className={
12+
classnames(
13+
'bg-background-avg print:hidden top-0 left-0 h-full w-full object-cover -z-1',
14+
className,
15+
)
16+
}
17+
/>
2118
);
2219

2320
export default Background;

‎components/IndexNavbar.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -13,8 +13,8 @@ import styles from '../styles/components/index-navbar.module.scss';
1313
const Navbar = () => (
1414
<nav className={classnames(styles.indexNavbar, 'relative py-6')}>
1515
<Background className='absolute object-left-top' />
16-
<div className='py-4 max-w-2xl mx-auto flex'>
17-
<Logo className='w-32 pl-8' />
16+
<div className='pl-8 py-4 max-w-2xl mx-auto flex'>
17+
<Logo width='108' />
1818
<div className='flex-1 pl-4 pr-4 screen:text-center flex flex-col justify-center'>
1919
<h1 className='text-4xl font-bold'>PastLeo</h1>
2020
<div className='pt-1 sm:pt-3'>

‎components/Logo.js

+37-36
Original file line numberDiff line numberDiff line change
@@ -1,52 +1,53 @@
11
import { useState } from 'react';
22
import classnames from 'classnames';
33

4+
import Img from 'react-optimized-image';
5+
46
import styles from '../styles/components/logo.module.scss';
57

6-
import hackerWebpSrc from '../assets/logo/avatar-hacker.jpg?webp';
7-
import hackerJpgSrc from '../assets/logo/avatar-hacker.jpg';
8-
import avatarWebpSrc from '../assets/logo/avatar.jpg?webp';
9-
import avatarJpgSrc from '../assets/logo/avatar.jpg';
10-
import speakerWebpSrc from '../assets/logo/speaker.jpg?webp';
11-
import speakerJpgSrc from '../assets/logo/speaker.jpg';
8+
import avatarSrc from '../assets/logo/avatar.jpg';
9+
import hackerSrc from '../assets/logo/avatar-hacker.jpg';
10+
import speakerSrc from '../assets/logo/speaker.jpg';
1211

13-
const srcSets = {
14-
normal: {
15-
webp: hackerWebpSrc,
16-
jpg: hackerJpgSrc,
17-
},
18-
hover: {
19-
webp: avatarWebpSrc,
20-
jpg: avatarJpgSrc,
21-
},
22-
revealed: {
23-
webp: speakerWebpSrc,
24-
jpg: speakerJpgSrc,
25-
},
26-
};
12+
const NormalLogoImg = props => (
13+
<Img
14+
src={avatarSrc} webp
15+
className={classnames(styles.normal, 'rounded-full')}
16+
{...props}
17+
/>
18+
);
19+
const HackerLogoImg = props => (
20+
<Img
21+
src={hackerSrc} webp
22+
className={classnames(styles.hacker, 'rounded-full')}
23+
{...props}
24+
/>
25+
);
26+
const SpeakerLogoImg = props => (
27+
<Img
28+
src={speakerSrc} webp
29+
className={classnames(styles.speaker, 'rounded-full')}
30+
{...props}
31+
/>
32+
);
2733

28-
const Logo = ({ className, forcerRvealed }) => {
34+
const Logo = ({ className, width, forcedRvealed }) => {
2935
const [revealed, setRevealed] = useState(false);
30-
const [hover, setHover] = useState(false);
31-
32-
const srcSetKey = (forcerRvealed || revealed) ? 'revealed' : (hover ? 'hover' : 'normal');
36+
const widthProps = { width, height: width };
3337

3438
return (
3539
<div
36-
className={classnames(styles.logo, className)}
40+
className={
41+
classnames(
42+
styles.logo, className,
43+
{ [styles.revealed]: revealed || forcedRvealed },
44+
)
45+
}
3746
onClick={() => setRevealed(r => !r)}
38-
onMouseEnter={() => setHover(true)}
39-
onMouseLeave={() => setHover(false)}
4047
>
41-
<picture>
42-
<source srcSet={srcSets[srcSetKey].webp} type='image/webp' />
43-
<source srcSet={srcSets[srcSetKey].jpg} type='image/jpeg' />
44-
<img
45-
alt='logo'
46-
src={srcSets[srcSetKey].jpg}
47-
className={classnames(styles.img, 'max-w-full max-h-full rounded-full border')}
48-
/>
49-
</picture>
48+
<NormalLogoImg alt='logo' {...widthProps} />
49+
<HackerLogoImg {...widthProps} />
50+
<SpeakerLogoImg {...widthProps} />
5051
</div>
5152
);
5253
};

‎components/Navbar.js

+8-11
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,24 @@
11
import Link from 'next/link';
22
import classnames from 'classnames';
33

4+
import Img from 'react-optimized-image';
5+
46
import Background from '../components/Background.js';
57

68
import styles from '../styles/components/navbar.module.scss';
79

8-
import avatarWebpSrc from '../assets/logo/avatar-hacker.jpg?webp';
9-
import avatarJpgSrc from '../assets/logo/avatar-hacker.jpg';
10+
import avatarSrc from '../assets/logo/avatar.jpg';
1011

1112
const Navbar = () => (
1213
<nav className={classnames(styles.navbar, 'relative h-16 p-1 flex justify-center items-center')}>
1314
<Background className='absolute object-left-top' />
1415
<Link href='/'>
1516
<a className='flex justify-center items-center p-1'>
16-
<picture>
17-
<source srcSet={avatarWebpSrc} type='image/webp' />
18-
<source srcSet={avatarJpgSrc} type='image/jpeg' />
19-
<img
20-
alt='logo'
21-
src={avatarJpgSrc}
22-
className={classnames(styles.logo, 'rounded-full w-8 md:w-10')}
23-
/>
24-
</picture>
17+
<Img
18+
alt='logo'
19+
src={avatarSrc} webp
20+
className={classnames(styles.logo, 'rounded-full w-8 md:w-10')}
21+
/>
2522
<h1 className='hidden md:block md:mx-3 md:text-xl font-bold'>PastLeo</h1>
2623
</a>
2724
</Link>

0 commit comments

Comments
 (0)