docs: add docusaurus-plugin-image-zoom and add preview carousel
This commit is contained in:
parent
ecebc6eede
commit
b8c44268b9
@ -56,6 +56,10 @@ const config = {
|
||||
],
|
||||
],
|
||||
|
||||
plugins: [
|
||||
require.resolve('docusaurus-plugin-image-zoom'),
|
||||
],
|
||||
|
||||
themeConfig:
|
||||
/** @type {import('@docusaurus/preset-classic').ThemeConfig} */
|
||||
({
|
||||
@ -131,6 +135,16 @@ const config = {
|
||||
theme: lightCodeTheme,
|
||||
darkTheme: darkCodeTheme,
|
||||
},
|
||||
zoom: {
|
||||
selector: '.markdown :not(em) > img',
|
||||
background: {
|
||||
light: 'rgb(255, 255, 255)',
|
||||
dark: 'rgb(50, 50, 50)'
|
||||
},
|
||||
config: {
|
||||
// options you can specify via https://github.com/francoischalifour/medium-zoom#usage
|
||||
}
|
||||
}
|
||||
}),
|
||||
};
|
||||
|
||||
|
@ -22,13 +22,18 @@
|
||||
"docusaurus-preset-openapi": "^0.6.4",
|
||||
"prism-react-renderer": "^1.3.5",
|
||||
"react": "^17.0.2",
|
||||
"react-dom": "^17.0.2"
|
||||
"react-dom": "^17.0.2",
|
||||
"react-responsive-carousel": "^3.2.23",
|
||||
"react-slick": "^0.29.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@docusaurus/module-type-aliases": "2.4.3",
|
||||
"@tsconfig/docusaurus": "^1.0.5",
|
||||
"@types/react-slick": "^0.23.11",
|
||||
"autoprefixer": "^10.4.16",
|
||||
"docusaurus-plugin-image-zoom": "^1.0.1",
|
||||
"postcss": "^8.4.31",
|
||||
"slick-carousel": "^1.8.1",
|
||||
"tailwindcss": "^3.3.5",
|
||||
"ts-node": "^10.9.1",
|
||||
"typescript": "^4.7.4",
|
||||
|
File diff suppressed because it is too large
Load Diff
@ -3,6 +3,8 @@ import Link from '@docusaurus/Link';
|
||||
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
|
||||
import Layout from '@theme/Layout';
|
||||
import LogoSvg from '@site/static/img/logo.svg';
|
||||
import { Carousel } from 'react-responsive-carousel';
|
||||
import 'react-responsive-carousel/lib/styles/carousel.min.css';
|
||||
|
||||
function HomepageHeader() {
|
||||
const { siteConfig } = useDocusaurusContext();
|
||||
@ -58,10 +60,23 @@ function HomepageMain() {
|
||||
</div>
|
||||
|
||||
<div className="text-center">
|
||||
<img
|
||||
className="border-8 border-solid border-gray-200 rounded-lg shadow-lg"
|
||||
src="/img/preview.png"
|
||||
/>
|
||||
<div className="border-8 border-solid border-gray-200 rounded-lg shadow-lg">
|
||||
<Carousel
|
||||
showThumbs={false}
|
||||
showStatus={false}
|
||||
showIndicators={true}
|
||||
autoPlay={true}
|
||||
swipeable={true}
|
||||
interval={5000}
|
||||
stopOnHover={true}
|
||||
emulateTouch={true}
|
||||
infiniteLoop={true}
|
||||
>
|
||||
<img src="/img/preview1.png" />
|
||||
<img src="/img/preview2.png" />
|
||||
<img src="/img/preview3.png" />
|
||||
</Carousel>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
|
Before Width: | Height: | Size: 30 KiB After Width: | Height: | Size: 30 KiB |
BIN
website/static/img/preview2.png
Normal file
BIN
website/static/img/preview2.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 70 KiB |
BIN
website/static/img/preview3.png
Normal file
BIN
website/static/img/preview3.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 30 KiB |
Loading…
Reference in New Issue
Block a user