Skip to content

Commit 7cdaa99

Browse files
ReaJasonReaJason
committed
feat(ui): add image-zoom
1 parent 1515011 commit 7cdaa99

File tree

7 files changed

+159
-6
lines changed

7 files changed

+159
-6
lines changed

‎web/app/components/image-zoom.css‎

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
[data-rmiz] {
2+
display: block;
3+
position: relative;
4+
}
5+
6+
[data-rmiz-ghost] {
7+
pointer-events: none;
8+
position: absolute;
9+
}
10+
11+
[data-rmiz-btn-zoom],
12+
[data-rmiz-btn-unzoom] {
13+
display: none;
14+
}
15+
16+
[data-rmiz-content="found"] img {
17+
cursor: zoom-in;
18+
}
19+
20+
[data-rmiz-modal][open] {
21+
width: 100vw /* fallback */;
22+
width: 100dvw;
23+
24+
height: 100vh /* fallback */;
25+
height: 100dvh;
26+
27+
background-color: transparent;
28+
max-width: none;
29+
max-height: none;
30+
margin: 0;
31+
padding: 0;
32+
position: fixed;
33+
overflow: hidden;
34+
}
35+
36+
[data-rmiz-modal]:focus-visible {
37+
outline: none;
38+
}
39+
40+
[data-rmiz-modal-overlay] {
41+
transition: background-color 0.3s;
42+
position: absolute;
43+
inset: 0;
44+
}
45+
46+
[data-rmiz-modal-overlay="visible"] {
47+
background-color: var(--color-fd-background);
48+
}
49+
50+
[data-rmiz-modal-overlay="hidden"] {
51+
background-color: transparent;
52+
}
53+
54+
[data-rmiz-modal-content] {
55+
width: 100%;
56+
height: 100%;
57+
position: relative;
58+
}
59+
60+
[data-rmiz-modal]::backdrop {
61+
display: none;
62+
}
63+
64+
[data-rmiz-modal-img] {
65+
cursor: zoom-out;
66+
image-rendering: high-quality;
67+
transform-origin: 0 0;
68+
transition: transform 0.3s;
69+
position: absolute;
70+
}
71+
72+
@media (prefers-reduced-motion: reduce) {
73+
[data-rmiz-modal-overlay],
74+
[data-rmiz-modal-img] {
75+
transition-duration: 0.01ms !important;
76+
}
77+
}

‎web/app/components/image-zoom.tsx‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
"use client";
2+
3+
import { Image, type ImageProps } from "fumadocs-core/framework";
4+
import type { ComponentProps } from "react";
5+
import Zoom, { type UncontrolledProps } from "react-medium-image-zoom";
6+
import "@/components/image-zoom.css";
7+
8+
export type ImageZoomProps = ImageProps & {
9+
/**
10+
* Image props when zoom in
11+
*/
12+
zoomInProps?: ComponentProps<"img">;
13+
14+
/**
15+
* Props for `react-medium-image-zoom`
16+
*/
17+
rmiz?: UncontrolledProps;
18+
};
19+
20+
function getImageSrc(src: ImageProps["src"]): string {
21+
if (typeof src === "string") return src;
22+
23+
if (typeof src === "object") {
24+
// Next.js
25+
if ("default" in src)
26+
return (src as { default: { src: string } }).default.src;
27+
return src.src;
28+
}
29+
30+
return "";
31+
}
32+
33+
export function ImageZoom({
34+
zoomInProps,
35+
children,
36+
rmiz,
37+
...props
38+
}: ImageZoomProps) {
39+
return (
40+
<Zoom
41+
zoomMargin={20}
42+
wrapElement="span"
43+
{...rmiz}
44+
zoomImg={{
45+
src: getImageSrc(props.src),
46+
sizes: undefined,
47+
...zoomInProps,
48+
}}
49+
>
50+
{children ?? (
51+
<Image
52+
sizes="(max-width: 768px) 100vw, (max-width: 1200px) 70vw, 900px"
53+
{...props}
54+
/>
55+
)}
56+
</Zoom>
57+
);
58+
}

‎web/app/components/probeshell/package-config-card.tsx‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,11 @@ export default function PackageConfigCard({
3030

3131
useEffect(() => {
3232
const filteredOptions = (packerConfig ?? []).filter((name) => {
33-
return !name.startsWith("Agent") && !name.toLowerCase().startsWith("xxl") && !name.toLowerCase().endsWith("jar");
33+
return (
34+
!name.startsWith("Agent") &&
35+
!name.toLowerCase().startsWith("xxl") &&
36+
!name.toLowerCase().endsWith("jar")
37+
);
3438
});
3539

3640
const mappedOptions = filteredOptions.map((name) => {

‎web/app/docs/page.tsx‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import browserCollections from "fumadocs-mdx:collections/browser";
22
import { useFumadocsLoader } from "fumadocs-core/source/client";
3+
import { ImageZoom } from "fumadocs-ui/components/image-zoom";
34
import { DocsLayout } from "fumadocs-ui/layouts/docs";
45
import {
56
DocsBody,
@@ -32,7 +33,12 @@ const clientLoader = browserCollections.docs.createClientLoader({
3233
<DocsTitle>{frontmatter.title}</DocsTitle>
3334
<DocsDescription>{frontmatter.description}</DocsDescription>
3435
<DocsBody>
35-
<Mdx components={{ ...defaultMdxComponents }} />
36+
<Mdx
37+
components={{
38+
...defaultMdxComponents,
39+
img: (props) => <ImageZoom {...(props as any)} />,
40+
}}
41+
/>
3642
</DocsBody>
3743
</DocsPage>
3844
);

‎web/biome.json‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,11 @@
1919
"rules": {
2020
"recommended": true,
2121
"suspicious": {
22-
"noExplicitAny": "off"
22+
"noExplicitAny": "off",
23+
"noDuplicateProperties": "off"
24+
},
25+
"complexity": {
26+
"noImportantStyles": "off"
2327
}
2428
},
2529
"domains": {

‎web/bun.lock‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
"class-variance-authority": "^0.7.1",
1515
"clsx": "^2.1.1",
1616
"framer-motion": "^12.23.25",
17-
"fumadocs-core": "16.2.3",
17+
"fumadocs-core": "^16.2.4",
1818
"fumadocs-mdx": "14.1.0",
1919
"fumadocs-ui": "16.2.3",
2020
"i18next": "^25.7.2",
@@ -27,6 +27,7 @@
2727
"react-dom": "^19.2.1",
2828
"react-hook-form": "^7.68.0",
2929
"react-i18next": "^16.4.0",
30+
"react-medium-image-zoom": "^5.4.0",
3031
"react-syntax-highlighter": "^16.1.0",
3132
"sonner": "^2.0.7",
3233
"tailwind-merge": "^3.4.0",
@@ -721,7 +722,7 @@
721722

722723
"fsevents": ["[email protected]", "", { "os": "darwin" }, "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw=="],
723724

724-
"fumadocs-core": ["[email protected]", "", { "dependencies": { "@formatjs/intl-localematcher": "^0.6.2", "@orama/orama": "^3.1.16", "@shikijs/rehype": "^3.19.0", "@shikijs/transformers": "^3.19.0", "estree-util-value-to-estree": "^3.5.0", "github-slugger": "^2.0.0", "hast-util-to-estree": "^3.1.3", "hast-util-to-jsx-runtime": "^2.3.6", "image-size": "^2.0.2", "negotiator": "^1.0.0", "npm-to-yarn": "^3.0.1", "path-to-regexp": "^8.3.0", "remark": "^15.0.1", "remark-gfm": "^4.0.1", "remark-rehype": "^11.1.2", "scroll-into-view-if-needed": "^3.1.0", "shiki": "^3.19.0", "unist-util-visit": "^5.0.0" }, "peerDependencies": { "@mixedbread/sdk": "^0.19.0", "@orama/core": "1.x.x", "@tanstack/react-router": "1.x.x", "@types/react": "*", "algoliasearch": "5.x.x", "lucide-react": "*", "next": "16.x.x", "react": "^19.2.0", "react-dom": "^19.2.0", "react-router": "7.x.x", "waku": "^0.26.0 || ^0.27.0", "zod": "*" }, "optionalPeers": ["@mixedbread/sdk", "@orama/core", "@tanstack/react-router", "@types/react", "algoliasearch", "lucide-react", "next", "react", "react-dom", "react-router", "waku", "zod"] }, "sha512-HFtS0Gwf4izYbmkB8gj0sQWv8G9yyI8tM5RQ3E8fSD5IRVtBWhPq05zOIIM523XUGfDBvm/qDOquDqVF5NDO+A=="],
725+
"fumadocs-core": ["[email protected]", "", { "dependencies": { "@formatjs/intl-localematcher": "^0.6.2", "@orama/orama": "^3.1.16", "@shikijs/rehype": "^3.19.0", "@shikijs/transformers": "^3.19.0", "estree-util-value-to-estree": "^3.5.0", "github-slugger": "^2.0.0", "hast-util-to-estree": "^3.1.3", "hast-util-to-jsx-runtime": "^2.3.6", "image-size": "^2.0.2", "negotiator": "^1.0.0", "npm-to-yarn": "^3.0.1", "path-to-regexp": "^8.3.0", "remark": "^15.0.1", "remark-gfm": "^4.0.1", "remark-rehype": "^11.1.2", "scroll-into-view-if-needed": "^3.1.0", "shiki": "^3.19.0", "unist-util-visit": "^5.0.0" }, "peerDependencies": { "@mixedbread/sdk": "^0.19.0", "@orama/core": "1.x.x", "@tanstack/react-router": "1.x.x", "@types/react": "*", "algoliasearch": "5.x.x", "lucide-react": "*", "next": "16.x.x", "react": "^19.2.0", "react-dom": "^19.2.0", "react-router": "7.x.x", "waku": "^0.26.0 || ^0.27.0", "zod": "*" }, "optionalPeers": ["@mixedbread/sdk", "@orama/core", "@tanstack/react-router", "@types/react", "algoliasearch", "lucide-react", "next", "react", "react-dom", "react-router", "waku", "zod"] }, "sha512-vCxmRdZz8jNSXao4UF0+KgQQ4HgXww5LFGF883PemyJxHrgYuBbCslkSZP0mgpVWWcJWRE52gChUl4hI9YAxBQ=="],
725726

726727
"fumadocs-mdx": ["[email protected]", "", { "dependencies": { "@mdx-js/mdx": "^3.1.1", "@standard-schema/spec": "^1.0.0", "chokidar": "^5.0.0", "esbuild": "^0.27.1", "estree-util-value-to-estree": "^3.5.0", "js-yaml": "^4.1.1", "mdast-util-to-markdown": "^2.1.2", "picocolors": "^1.1.1", "picomatch": "^4.0.3", "remark-mdx": "^3.1.1", "tinyexec": "^1.0.2", "tinyglobby": "^0.2.15", "unified": "^11.0.5", "unist-util-remove-position": "^5.0.0", "unist-util-visit": "^5.0.0", "vfile": "^6.0.3", "zod": "^4.1.13" }, "peerDependencies": { "@fumadocs/mdx-remote": "^1.4.0", "fumadocs-core": "^15.0.0 || ^16.0.0", "next": "^15.3.0 || ^16.0.0", "react": "*", "vite": "6.x.x || 7.x.x" }, "optionalPeers": ["@fumadocs/mdx-remote", "next", "react", "vite"], "bin": { "fumadocs-mdx": "dist/bin.js" } }, "sha512-6I3nXzM3+dSap5UZvKFQvOaKNKdMfxK5/8Cyu3am6zm0d/acuUxT1r1s1GQpc8H5iB9bFMtwyoZff1WN2qWq8g=="],
727728

@@ -1359,6 +1360,8 @@
13591360

13601361
"fumadocs-mdx/esbuild": ["[email protected]", "", { "optionalDependencies": { "@esbuild/aix-ppc64": "0.27.1", "@esbuild/android-arm": "0.27.1", "@esbuild/android-arm64": "0.27.1", "@esbuild/android-x64": "0.27.1", "@esbuild/darwin-arm64": "0.27.1", "@esbuild/darwin-x64": "0.27.1", "@esbuild/freebsd-arm64": "0.27.1", "@esbuild/freebsd-x64": "0.27.1", "@esbuild/linux-arm": "0.27.1", "@esbuild/linux-arm64": "0.27.1", "@esbuild/linux-ia32": "0.27.1", "@esbuild/linux-loong64": "0.27.1", "@esbuild/linux-mips64el": "0.27.1", "@esbuild/linux-ppc64": "0.27.1", "@esbuild/linux-riscv64": "0.27.1", "@esbuild/linux-s390x": "0.27.1", "@esbuild/linux-x64": "0.27.1", "@esbuild/netbsd-arm64": "0.27.1", "@esbuild/netbsd-x64": "0.27.1", "@esbuild/openbsd-arm64": "0.27.1", "@esbuild/openbsd-x64": "0.27.1", "@esbuild/openharmony-arm64": "0.27.1", "@esbuild/sunos-x64": "0.27.1", "@esbuild/win32-arm64": "0.27.1", "@esbuild/win32-ia32": "0.27.1", "@esbuild/win32-x64": "0.27.1" }, "bin": { "esbuild": "bin/esbuild" } }, "sha512-yY35KZckJJuVVPXpvjgxiCuVEJT67F6zDeVTv4rizyPrfGBUpZQsvmxnN+C371c2esD/hNMjj4tpBhuueLN7aA=="],
13611362

1363+
"fumadocs-ui/fumadocs-core": ["[email protected]", "", { "dependencies": { "@formatjs/intl-localematcher": "^0.6.2", "@orama/orama": "^3.1.16", "@shikijs/rehype": "^3.19.0", "@shikijs/transformers": "^3.19.0", "estree-util-value-to-estree": "^3.5.0", "github-slugger": "^2.0.0", "hast-util-to-estree": "^3.1.3", "hast-util-to-jsx-runtime": "^2.3.6", "image-size": "^2.0.2", "negotiator": "^1.0.0", "npm-to-yarn": "^3.0.1", "path-to-regexp": "^8.3.0", "remark": "^15.0.1", "remark-gfm": "^4.0.1", "remark-rehype": "^11.1.2", "scroll-into-view-if-needed": "^3.1.0", "shiki": "^3.19.0", "unist-util-visit": "^5.0.0" }, "peerDependencies": { "@mixedbread/sdk": "^0.19.0", "@orama/core": "1.x.x", "@tanstack/react-router": "1.x.x", "@types/react": "*", "algoliasearch": "5.x.x", "lucide-react": "*", "next": "16.x.x", "react": "^19.2.0", "react-dom": "^19.2.0", "react-router": "7.x.x", "waku": "^0.26.0 || ^0.27.0", "zod": "*" }, "optionalPeers": ["@mixedbread/sdk", "@orama/core", "@tanstack/react-router", "@types/react", "algoliasearch", "lucide-react", "next", "react", "react-dom", "react-router", "waku", "zod"] }, "sha512-HFtS0Gwf4izYbmkB8gj0sQWv8G9yyI8tM5RQ3E8fSD5IRVtBWhPq05zOIIM523XUGfDBvm/qDOquDqVF5NDO+A=="],
1364+
13621365
"mime-types/mime-db": ["[email protected]", "", {}, "sha512-BHJ/EKruNIqJf/QahvxwQZXKygOQ256myeN/Ew+THcAa5q+PjyTTMMeNQC4DZw5AwfvelsUrA6B67NKMqXDbzQ=="],
13631366

13641367
"parse-entities/@types/unist": ["@types/[email protected]", "", {}, "sha512-CmBKiL6NNo/OqgmMn95Fk9Whlp2mtvIv+KNpQKN2F4SjvrEesubTRWGYSg+BnWZOnlCaSTU1sMpsBOzgbYhnsA=="],

‎web/package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@
2121
"class-variance-authority": "^0.7.1",
2222
"clsx": "^2.1.1",
2323
"framer-motion": "^12.23.25",
24-
"fumadocs-core": "16.2.3",
24+
"fumadocs-core": "^16.2.4",
2525
"fumadocs-mdx": "14.1.0",
2626
"fumadocs-ui": "16.2.3",
2727
"i18next": "^25.7.2",
@@ -34,6 +34,7 @@
3434
"react-dom": "^19.2.1",
3535
"react-hook-form": "^7.68.0",
3636
"react-i18next": "^16.4.0",
37+
"react-medium-image-zoom": "^5.4.0",
3738
"react-syntax-highlighter": "^16.1.0",
3839
"sonner": "^2.0.7",
3940
"tailwind-merge": "^3.4.0",

0 commit comments

Comments
 (0)