docs: add docusaurus-plugin-image-zoom and add preview carousel

website/docusaurus.config.js

@@ -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
+        }
+      }
     }),
 };
 

website/package.json

@@ -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",

website/src/pages/index.tsx

@@ -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>
   );