From 0e7287068f839626833ff344ba2c7964e3eeb7f8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?B=C5=82a=C5=BCej=20Sowa?= Date: Tue, 2 Apr 2024 10:07:02 +0200 Subject: [PATCH] Add medium type zoom to images (#8) * Add medium-zoom package * Add ImageZoom and ThemedImageZoom components * Use the new components * Reformat --- docs/leo-rover/00-specification.mdx | 43 ++++++++++--------- .../01-documentation/01-getting-started.mdx | 24 ++++++++++- package.json | 1 + src/components/ImageZoom.tsx | 31 +++++++++++++ src/components/ThemedImageZoom.tsx | 19 ++++++++ src/css/custom.css | 7 +++ yarn.lock | 5 +++ 7 files changed, 107 insertions(+), 23 deletions(-) create mode 100644 src/components/ImageZoom.tsx create mode 100644 src/components/ThemedImageZoom.tsx diff --git a/docs/leo-rover/00-specification.mdx b/docs/leo-rover/00-specification.mdx index a942a29c..893b1443 100644 --- a/docs/leo-rover/00-specification.mdx +++ b/docs/leo-rover/00-specification.mdx @@ -4,18 +4,19 @@ sidebar_label: Specification sidebar_position: 1 --- -import ThemedImage from '@theme/ThemedImage'; import useBaseUrl from '@docusaurus/useBaseUrl'; import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import Admonition from '@theme/Admonition'; import FlexTable from '@site/src/components/FlexTable'; import FlexTableItem from '@site/src/components/FlexTableItem'; +import ImageZoom from '@site/src/components/ImageZoom'; +import ThemedImageZoom from '@site/src/components/ThemedImageZoom'; # Leo Rover specification
- Leo Rover 1.8 -
-
@@ -185,7 +186,7 @@ WiFi 2.4 or 5 GHz on internal RPi antennas for connectivity together with the Raspberry Pi computer, controls all the Rover's functionalities.
- LeoCore controller
- -
-
- + +
## Operation & maintenance @@ -42,7 +54,15 @@ To access the Web User Interface, open your web browser and type in the address http://10.0.0.1/ ``` -![leo-ui](/img/leo-ui.jpg) +
+ +
## Turn off the Rover properly diff --git a/package.json b/package.json index 2cc5205f..a2ea7934 100644 --- a/package.json +++ b/package.json @@ -22,6 +22,7 @@ "@docusaurus/preset-classic": "3.1.1", "@mdx-js/react": "^3.0.1", "clsx": "^2.1.0", + "medium-zoom": "^1.1.0", "prism-react-renderer": "^2.3.1", "react": "^18.0.0", "react-dom": "^18.0.0" diff --git a/src/components/ImageZoom.tsx b/src/components/ImageZoom.tsx new file mode 100644 index 00000000..eafa28ec --- /dev/null +++ b/src/components/ImageZoom.tsx @@ -0,0 +1,31 @@ +import { useRef, ComponentProps, RefCallback } from 'react'; +import mediumZoom, { Zoom } from 'medium-zoom'; + +export interface ImageZoomProps extends ComponentProps<'img'> {} + +export default function ImageZoom(props: ImageZoomProps): JSX.Element { + const { ...propsRest } = props; + const zoomRef = useRef(null); + + function getZoom() { + if (zoomRef.current === null) { + zoomRef.current = mediumZoom({ + background: 'var(--plugin-image-zoom-background-color)', + }); + } + + return zoomRef.current; + } + + const attachZoom: RefCallback = (node) => { + const zoom = getZoom(); + + if (node) { + zoom.attach(node); + } else { + zoom.detach(); + } + }; + + return ; +} diff --git a/src/components/ThemedImageZoom.tsx b/src/components/ThemedImageZoom.tsx new file mode 100644 index 00000000..5bc90105 --- /dev/null +++ b/src/components/ThemedImageZoom.tsx @@ -0,0 +1,19 @@ +import { Props as ThemedImageProps } from '@theme/ThemedImage'; +import { ThemedComponent } from '@docusaurus/theme-common'; +import ImageZoom, { ImageZoomProps } from './ImageZoom'; + +export interface ThemedImageZoomProps + extends ThemedImageProps, + ImageZoomProps {} + +export default function ThemedImageZoom(props: ThemedImageZoomProps) { + const { sources, className: parentClassName, ...propsRest } = props; + + return ( + + {({ theme, className }) => ( + + )} + + ); +} diff --git a/src/css/custom.css b/src/css/custom.css index 026874f6..9a86c9d9 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -15,6 +15,7 @@ --ifm-color-primary-lightest: #f59b3b; --ifm-code-font-size: 95%; --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1); + --plugin-image-zoom-background-color: #fff; } /* For readability concerns, you should choose a lighter palette in dark mode. */ @@ -27,6 +28,7 @@ --ifm-color-primary-lighter: #e3b27f; --ifm-color-primary-lightest: #e8c197; --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3); + --plugin-image-zoom-background-color: var(--ifm-background-color); } .header-github-link::before { @@ -42,4 +44,9 @@ .header-github-link:hover::before { background-color: var(--ifm-navbar-link-hover-color); +} + +.medium-zoom-overlay, +.medium-zoom-image--opened { + z-index: 999; } \ No newline at end of file diff --git a/yarn.lock b/yarn.lock index 227147cd..1f2dd70a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -6026,6 +6026,11 @@ media-typer@0.3.0: resolved "https://registry.yarnpkg.com/media-typer/-/media-typer-0.3.0.tgz#8710d7af0aa626f8fffa1ce00168545263255748" integrity sha512-dq+qelQ9akHpcOl/gUVRTxVIOkAJ1wR3QAvb4RsVjS8oVoFjDGTc679wJYmUmknUF5HwMLOgb5O+a3KxfWapPQ== +medium-zoom@^1.1.0: + version "1.1.0" + resolved "https://registry.yarnpkg.com/medium-zoom/-/medium-zoom-1.1.0.tgz#6efb6bbda861a02064ee71a2617a8dc4381ecc71" + integrity sha512-ewyDsp7k4InCUp3jRmwHBRFGyjBimKps/AJLjRSox+2q/2H4p/PNpQf+pwONWlJiOudkBXtbdmVbFjqyybfTmQ== + memfs@^3.1.2, memfs@^3.4.3: version "3.6.0" resolved "https://registry.yarnpkg.com/memfs/-/memfs-3.6.0.tgz#d7a2110f86f79dd950a8b6df6d57bc984aa185f6"