Skip to content

Commit 2daef09

Browse files
yuhwan-parkyuhwan-park
committed
feat: Implement zoomable image
1 parent 3ce879d commit 2daef09

File tree

6 files changed

+92
-14
lines changed

6 files changed

+92
-14
lines changed

‎app/[slug]/page.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import Code from '@/components/Code';
77
import Giscus from '@/components/Giscus';
88
import { HomeIcon } from '@/components/icons';
99
import TableOfContent from '@/components/TableOfContent';
10+
import ZoomableImage from '@/components/ZoomableImage';
1011
import { allBlogPosts, parseToc } from '@/libs/post';
1112

1213
interface PostPageProps {
@@ -42,7 +43,7 @@ export async function generateMetadata({ params }: PostPageProps): Promise<Metad
4243
publishedTime: new Date(post.date).toISOString(),
4344
modifiedTime: new Date(post.date).toISOString(),
4445
authors: ['yuhwan park'],
45-
title: `yuhwan park's blog`,
46+
title: post.title,
4647
url: `https://yuhwan-park.github.io${post.slug}`,
4748
description: post.title,
4849
},
@@ -51,6 +52,7 @@ export async function generateMetadata({ params }: PostPageProps): Promise<Metad
5152

5253
const mdxComponents = {
5354
pre: Code,
55+
img: ZoomableImage,
5456
};
5557

5658
export default function PostPage({ params }: PostPageProps) {

‎app/globals.css‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -152,6 +152,16 @@ body {
152152
@apply bg-neutral-500/30;
153153
}
154154

155+
.medium-zoom-overlay {
156+
background-color: transparent !important;
157+
backdrop-filter: blur(10px) !important;
158+
transition: all 0.3s ease-in-out !important;
159+
}
160+
161+
.medium-zoom-image {
162+
border-radius: 12px;
163+
}
164+
155165
/* animate intro stage */
156166
@media (prefers-reduced-motion: no-preference) {
157167
@keyframes intro-stage {

‎components/ZoomableImage.tsx‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
'use client';
2+
3+
import mediumZoom from 'medium-zoom';
4+
import { useEffect, useRef } from 'react';
5+
6+
export default function ZoomableImage({ src, alt, ...props }: React.ComponentProps<'img'>) {
7+
const ref = useRef<HTMLImageElement>(null);
8+
9+
useEffect(() => {
10+
if (ref.current) {
11+
mediumZoom(ref.current, {
12+
margin: 24,
13+
});
14+
}
15+
}, [ref]);
16+
return <img ref={ref} src={src} alt={alt ?? 'figure image'} {...props} crossOrigin="anonymous" />;
17+
}

‎next.config.mjs‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
import { withContentlayer } from 'next-contentlayer';
33

44
const nextConfig = {
5+
reactStrictMode: false,
56
output: 'export',
67
images: {
78
unoptimized: true,

‎posts/first-post.mdx‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,3 +4,63 @@ date: 2024-11-02 17:19:00
44
---
55

66
# Hello world
7+
8+
![first-image](https://plus.unsplash.com/premium_photo-1683865776032-07bf70b0add1?q=80&w=1932&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D)
9+
10+
<br />
11+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos. Lorem ipsum dolor sit amet
12+
consectetur adipisicing elit. Quisquam, quos. Lorem ipsum dolor sit amet consectetur adipisicing
13+
elit. Quisquam, quos. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos. Lorem
14+
ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos. Lorem ipsum dolor sit amet
15+
consectetur adipisicing elit. Quisquam, quos. Lorem ipsum dolor sit amet consectetur adipisicing
16+
elit. Quisquam, quos. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos. Lorem
17+
ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos. Lorem ipsum dolor sit amet
18+
consectetur adipisicing elit. Quisquam, quos. Lorem ipsum dolor sit amet consectetur adipisicing
19+
elit. Quisquam, quos. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos. Lorem
20+
ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos. Lorem ipsum dolor sit amet
21+
consectetur adipisicing elit. Quisquam, quos. Lorem ipsum dolor sit amet consectetur adipisicing
22+
elit. Quisquam, quos. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos. Lorem
23+
ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos. Lorem ipsum dolor sit amet
24+
consectetur adipisicing elit. Quisquam, quos. Lorem ipsum dolor sit amet consectetur adipisicing
25+
elit. Quisquam, quos. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos. Lorem
26+
ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.
27+
28+
![second-image](https://images.unsplash.com/photo-1517404215738-15263e9f9178?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D)
29+
30+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos. Lorem ipsum dolor sit amet
31+
consectetur adipisicing elit. Quisquam, quos. Lorem ipsum dolor sit amet consectetur adipisicing
32+
elit. Quisquam, quos. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos. Lorem
33+
ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos. Lorem ipsum dolor sit amet
34+
consectetur adipisicing elit. Quisquam, quos. Lorem ipsum dolor sit amet consectetur adipisicing
35+
elit. Quisquam, quos. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos. Lorem
36+
ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos. Lorem ipsum dolor sit amet
37+
consectetur adipisicing elit. Quisquam, quos. Lorem ipsum dolor sit amet consectetur adipisicing
38+
elit. Quisquam, quos. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos. Lorem
39+
ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos. Lorem ipsum dolor sit amet
40+
consectetur adipisicing elit. Quisquam, quos. Lorem ipsum dolor sit amet consectetur adipisicing
41+
elit. Quisquam, quos. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos. Lorem
42+
ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos. Lorem ipsum dolor sit amet
43+
consectetur adipisicing elit. Quisquam, quos. Lorem ipsum dolor sit amet consectetur adipisicing
44+
elit. Quisquam, quos. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos. Lorem
45+
ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.
46+
47+
<br />
48+
49+
![third-image](https://images.unsplash.com/photo-1517404215738-15263e9f9178?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D)
50+
51+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos. Lorem ipsum dolor sit amet
52+
consectetur adipisicing elit. Quisquam, quos. Lorem ipsum dolor sit amet consectetur adipisicing
53+
elit. Quisquam, quos. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos. Lorem
54+
ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos. Lorem ipsum dolor sit amet
55+
consectetur adipisicing elit. Quisquam, quos. Lorem ipsum dolor sit amet consectetur adipisicing
56+
elit. Quisquam, quos. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos. Lorem
57+
ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos. Lorem ipsum dolor sit amet
58+
consectetur adipisicing elit. Quisquam, quos. Lorem ipsum dolor sit amet consectetur adipisicing
59+
elit. Quisquam, quos. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos. Lorem
60+
ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos. Lorem ipsum dolor sit amet
61+
consectetur adipisicing elit. Quisquam, quos. Lorem ipsum dolor sit amet consectetur adipisicing
62+
elit. Quisquam, quos. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos. Lorem
63+
ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos. Lorem ipsum dolor sit amet
64+
consectetur adipisicing elit. Quisquam, quos. Lorem ipsum dolor sit amet consectetur adipisicing
65+
elit. Quisquam, quos. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos. Lorem
66+
ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.

‎styles/prose.css‎

Lines changed: 1 addition & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -164,8 +164,7 @@
164164
}
165165

166166
.prose figure {
167-
overflow: hidden;
168-
border-radius: 6px;
167+
margin: 0;
169168
}
170169

171170
.prose img {
@@ -176,17 +175,6 @@
176175

177176
.prose img + em,
178177
.prose img + em p,
179-
.prose figcaption {
180-
display: inline-block;
181-
margin-top: 8px;
182-
color: var(--shiki-token-comment);
183-
font-family: var(--font-sans);
184-
font-size: 0.9rem;
185-
font-style: normal;
186-
font-weight: 400;
187-
line-height: 20px;
188-
}
189-
190178
.prose a:not([class~='anchor']) {
191179
text-decoration-color: var(--gray-200);
192180
text-underline-offset: 4px;

0 commit comments

Comments
 (0)