Skip to content

Commit 23a942d

Browse files
authored
refactor: image zoom (#1054)
1 parent 390aa29 commit 23a942d

File tree

5 files changed

+55
-30
lines changed

5 files changed

+55
-30
lines changed

docusaurus.config.ts

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -184,7 +184,6 @@ const config: Config = {
184184
},
185185
},
186186
],
187-
"plugin-image-zoom",
188187
[
189188
"docusaurus-plugin-devserver",
190189
{
@@ -250,9 +249,6 @@ const config: Config = {
250249
// Replace with your project's social card
251250
image: "img/logo/logo-no-text.png",
252251
algolia,
253-
imageZoom: {
254-
selector: "article :not(a) > img",
255-
},
256252
mermaid: {
257253
theme: { dark: 'dark' }
258254
},

package.json

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,6 @@
3737
"copyforjs": "^1.0.6",
3838
"docusaurus-plugin-devserver": "^1.0.6",
3939
"docusaurus-plugin-sass": "^0.2.5",
40-
"plugin-image-zoom": "^1.2.0",
4140
"prism-react-renderer": "^2.3.0",
4241
"react": "^18.0.0",
4342
"react-dom": "^18.0.0",

src/css/markdown.scss

Lines changed: 18 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,8 @@
7272
line-height: 1.25rem;
7373
border: unset;
7474
padding: 0.2rem 0.3rem;
75-
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
75+
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
76+
Liberation Mono, Courier New, monospace;
7677
background-color: hsl(var(--muted));
7778
}
7879
h1 {
@@ -93,6 +94,7 @@
9394
padding: 0.6rem;
9495
border: 1px solid hsl(var(--border));
9596
background-color: var(--color-bg-1);
97+
cursor: zoom-in;
9698
}
9799
table {
98100
tr,
@@ -158,7 +160,8 @@
158160
border-bottom-left-radius: 0 !important;
159161
.token {
160162
color: var(--ifm-font-color-base) !important;
161-
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
163+
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
164+
Liberation Mono, Courier New, monospace;
162165
font-size: 0.9rem;
163166
line-height: 1.6rem;
164167
font-weight: 500;
@@ -246,9 +249,21 @@
246249
margin-top: 1.5rem !important;
247250
border-bottom: 1px solid var(--color-border);
248251
padding-bottom: 12px;
249-
margin-bottom: calc(var(--ifm-h1-vertical-rhythm-bottom) * var(--ifm-leading));
252+
margin-bottom: calc(
253+
var(--ifm-h1-vertical-rhythm-bottom) * var(--ifm-leading)
254+
);
250255
}
251256

252257
.DOCITEM-PAGE-FUNCTION-DESCRIPTION-DOM {
253258
padding-bottom: 0 !important;
254259
}
260+
.ant-image-preview-close {
261+
background-color: rgb(0, 96, 210);
262+
&:hover {
263+
background-color: rgba(0, 96, 210, 0.8);
264+
}
265+
}
266+
267+
.ant-image-preview-root .ant-image-preview-mask {
268+
background-color: rgb(0, 0, 0, 0.89);
269+
}
Lines changed: 37 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,56 @@
1-
import React from 'react';
2-
import clsx from 'clsx';
3-
import {useDocsSidebar} from '@docusaurus/theme-common/internal';
4-
import type {Props} from '@theme/DocRoot/Layout/Main';
1+
import React, { MouseEvent, useState } from "react";
2+
import clsx from "clsx";
3+
import { useDocsSidebar } from "@docusaurus/theme-common/internal";
4+
import type { Props } from "@theme/DocRoot/Layout/Main";
55

6-
import styles from './styles.module.css';
6+
import styles from "./styles.module.css";
7+
import { Image } from "antd";
78

89
export default function DocRootLayoutMain({
910
hiddenSidebarContainer,
1011
children,
1112
}: Props): JSX.Element {
1213
const sidebar = useDocsSidebar();
14+
const [previewImage, setPreviewImage] = useState(false);
15+
const [previewImageSrc, setPreviewImageSrc] = useState("");
16+
17+
function getImgElement(e: MouseEvent<HTMLElement>) {
18+
const target = e.target as HTMLImageElement;
19+
const src = target?.currentSrc;
20+
if (src) {
21+
setPreviewImageSrc(src);
22+
setPreviewImage(true);
23+
}
24+
}
1325
return (
1426
<main
1527
className={clsx(
1628
styles.docMainContainer,
17-
(hiddenSidebarContainer || !sidebar) && styles.docMainContainerEnhanced,
18-
)}>
29+
(hiddenSidebarContainer || !sidebar) && styles.docMainContainerEnhanced
30+
)}
31+
>
1932
<div
33+
onClick={getImgElement}
2034
className={clsx(
21-
'container padding-top--md padding-bottom--lg',
35+
"container padding-top--md padding-bottom--lg",
2236
styles.docItemWrapper,
23-
hiddenSidebarContainer && styles.docItemWrapperEnhanced,
24-
)}>
37+
hiddenSidebarContainer && styles.docItemWrapperEnhanced
38+
)}
39+
>
2540
{children}
2641
</div>
42+
<Image
43+
width={200}
44+
style={{ display: "none" }}
45+
preview={{
46+
scaleStep: 0.25,
47+
visible: previewImage,
48+
src: previewImageSrc,
49+
onVisibleChange: (value) => {
50+
setPreviewImage(value);
51+
},
52+
}}
53+
/>
2754
</main>
2855
);
2956
}

yarn.lock

Lines changed: 0 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -6757,11 +6757,6 @@ [email protected]:
67576757
resolved "https://registry.yarnpkg.com/media-typer/-/media-typer-0.3.0.tgz#8710d7af0aa626f8fffa1ce00168545263255748"
67586758
integrity sha512-dq+qelQ9akHpcOl/gUVRTxVIOkAJ1wR3QAvb4RsVjS8oVoFjDGTc679wJYmUmknUF5HwMLOgb5O+a3KxfWapPQ==
67596759

6760-
medium-zoom@^1.0.4:
6761-
version "1.1.0"
6762-
resolved "https://registry.yarnpkg.com/medium-zoom/-/medium-zoom-1.1.0.tgz#6efb6bbda861a02064ee71a2617a8dc4381ecc71"
6763-
integrity sha512-ewyDsp7k4InCUp3jRmwHBRFGyjBimKps/AJLjRSox+2q/2H4p/PNpQf+pwONWlJiOudkBXtbdmVbFjqyybfTmQ==
6764-
67656760
memfs@^3.1.2, memfs@^3.4.3:
67666761
version "3.6.0"
67676762
resolved "https://registry.yarnpkg.com/memfs/-/memfs-3.6.0.tgz#d7a2110f86f79dd950a8b6df6d57bc984aa185f6"
@@ -7912,13 +7907,6 @@ pkg-up@^3.1.0:
79127907
dependencies:
79137908
find-up "^3.0.0"
79147909

7915-
plugin-image-zoom@^1.2.0:
7916-
version "1.2.0"
7917-
resolved "https://registry.yarnpkg.com/plugin-image-zoom/-/plugin-image-zoom-1.2.0.tgz#f2ab8a6a082e0c728b870dd8213078d449a67b6d"
7918-
integrity sha512-uVCjp4bXuli39gmBs+JQvXMtpfLL+5yWfRIKZyM41d3D9oxGBEHmRzDu9EgusIwmBrKJvF9QuOZENw/9s6G+Jw==
7919-
dependencies:
7920-
medium-zoom "^1.0.4"
7921-
79227910
possible-typed-array-names@^1.0.0:
79237911
version "1.0.0"
79247912
resolved "https://registry.yarnpkg.com/possible-typed-array-names/-/possible-typed-array-names-1.0.0.tgz#89bb63c6fada2c3e90adc4a647beeeb39cc7bf8f"

0 commit comments

Comments
 (0)