Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
use next-optimized-images@canary and its <Img />
  • Loading branch information
pastleo committed Feb 25, 2021
1 parent 405b45c commit 13bc304
Show file tree
Hide file tree
Showing 11 changed files with 1,195 additions and 2,527 deletions.
4 changes: 4 additions & 0 deletions .babelrc
@@ -0,0 +1,4 @@
{
"presets": ["next/babel"],
"plugins": ["react-optimized-image/plugin"]
}
29 changes: 13 additions & 16 deletions components/Background.js
@@ -1,23 +1,20 @@
import classnames from 'classnames';

import bgWebpSrc from '../assets/bg.jpg?webp';
import bgJpgSrc from '../assets/bg.jpg';
import Img from 'react-optimized-image';

import bgSrc from '../assets/bg.jpg';

const Background = ({ className }) => (
<picture>
<source srcSet={bgWebpSrc} type='image/webp' />
<source srcSet={bgJpgSrc} type='image/jpeg' />
<img
alt='background'
src={bgJpgSrc}
className={
classnames(
'bg-background-avg print:hidden top-0 left-0 h-full w-full object-cover -z-1',
className,
)
}
/>
</picture>
<Img
alt='background'
src={bgSrc} webp
className={
classnames(
'bg-background-avg print:hidden top-0 left-0 h-full w-full object-cover -z-1',
className,
)
}
/>
);

export default Background;
4 changes: 2 additions & 2 deletions components/IndexNavbar.js
Expand Up @@ -13,8 +13,8 @@ import styles from '../styles/components/index-navbar.module.scss';
const Navbar = () => (
<nav className={classnames(styles.indexNavbar, 'relative py-6')}>
<Background className='absolute object-left-top' />
<div className='py-4 max-w-2xl mx-auto flex'>
<Logo className='w-32 pl-8' />
<div className='pl-8 py-4 max-w-2xl mx-auto flex'>
<Logo width='108' />
<div className='flex-1 pl-4 pr-4 screen:text-center flex flex-col justify-center'>
<h1 className='text-4xl font-bold'>PastLeo</h1>
<div className='pt-1 sm:pt-3'>
Expand Down
73 changes: 37 additions & 36 deletions components/Logo.js
@@ -1,52 +1,53 @@
import { useState } from 'react';
import classnames from 'classnames';

import Img from 'react-optimized-image';

import styles from '../styles/components/logo.module.scss';

import hackerWebpSrc from '../assets/logo/avatar-hacker.jpg?webp';
import hackerJpgSrc from '../assets/logo/avatar-hacker.jpg';
import avatarWebpSrc from '../assets/logo/avatar.jpg?webp';
import avatarJpgSrc from '../assets/logo/avatar.jpg';
import speakerWebpSrc from '../assets/logo/speaker.jpg?webp';
import speakerJpgSrc from '../assets/logo/speaker.jpg';
import avatarSrc from '../assets/logo/avatar.jpg';
import hackerSrc from '../assets/logo/avatar-hacker.jpg';
import speakerSrc from '../assets/logo/speaker.jpg';

const srcSets = {
normal: {
webp: hackerWebpSrc,
jpg: hackerJpgSrc,
},
hover: {
webp: avatarWebpSrc,
jpg: avatarJpgSrc,
},
revealed: {
webp: speakerWebpSrc,
jpg: speakerJpgSrc,
},
};
const NormalLogoImg = props => (
<Img
src={avatarSrc} webp
className={classnames(styles.normal, 'rounded-full')}
{...props}
/>
);
const HackerLogoImg = props => (
<Img
src={hackerSrc} webp
className={classnames(styles.hacker, 'rounded-full')}
{...props}
/>
);
const SpeakerLogoImg = props => (
<Img
src={speakerSrc} webp
className={classnames(styles.speaker, 'rounded-full')}
{...props}
/>
);

const Logo = ({ className, forcerRvealed }) => {
const Logo = ({ className, width, forcedRvealed }) => {
const [revealed, setRevealed] = useState(false);
const [hover, setHover] = useState(false);

const srcSetKey = (forcerRvealed || revealed) ? 'revealed' : (hover ? 'hover' : 'normal');
const widthProps = { width, height: width };

return (
<div
className={classnames(styles.logo, className)}
className={
classnames(
styles.logo, className,
{ [styles.revealed]: revealed || forcedRvealed },
)
}
onClick={() => setRevealed(r => !r)}
onMouseEnter={() => setHover(true)}
onMouseLeave={() => setHover(false)}
>
<picture>
<source srcSet={srcSets[srcSetKey].webp} type='image/webp' />
<source srcSet={srcSets[srcSetKey].jpg} type='image/jpeg' />
<img
alt='logo'
src={srcSets[srcSetKey].jpg}
className={classnames(styles.img, 'max-w-full max-h-full rounded-full border')}
/>
</picture>
<NormalLogoImg alt='logo' {...widthProps} />
<HackerLogoImg {...widthProps} />
<SpeakerLogoImg {...widthProps} />
</div>
);
};
Expand Down
19 changes: 8 additions & 11 deletions components/Navbar.js
@@ -1,27 +1,24 @@
import Link from 'next/link';
import classnames from 'classnames';

import Img from 'react-optimized-image';

import Background from '../components/Background.js';

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

import avatarWebpSrc from '../assets/logo/avatar-hacker.jpg?webp';
import avatarJpgSrc from '../assets/logo/avatar-hacker.jpg';
import avatarSrc from '../assets/logo/avatar.jpg';

const Navbar = () => (
<nav className={classnames(styles.navbar, 'relative h-16 p-1 flex justify-center items-center')}>
<Background className='absolute object-left-top' />
<Link href='/'>
<a className='flex justify-center items-center p-1'>
<picture>
<source srcSet={avatarWebpSrc} type='image/webp' />
<source srcSet={avatarJpgSrc} type='image/jpeg' />
<img
alt='logo'
src={avatarJpgSrc}
className={classnames(styles.logo, 'rounded-full w-8 md:w-10')}
/>
</picture>
<Img
alt='logo'
src={avatarSrc} webp
className={classnames(styles.logo, 'rounded-full w-8 md:w-10')}
/>
<h1 className='hidden md:block md:mx-3 md:text-xl font-bold'>PastLeo</h1>
</a>
</Link>
Expand Down

0 comments on commit 13bc304

Please sign in to comment.