Merge branch 'feat/showcase'

README.MD

@@ -31,7 +31,10 @@ Step3: 在`sidebars.ts`配置文件中的`courseSidebar`配置项中添加侧边
 Step4: 本地执行`yarn start`查看效果，并调整样式，直到满意后提交`PR`。
 
 
+## 案例展示
 
+- 案例图片大小限制：`640x320`，存放于目录：[src/data/showcase](./src/data/showcase/)
+- 更新数据文件：[src/data/users.tsx](./src/data/users.tsx)
 
 ## 多语言
 

docusaurus.config.ts

@@ -2,6 +2,7 @@ const LATEST_VERSION_LABEL = '2.8.x(Latest)';
 
 import type * as Preset from '@docusaurus/preset-classic';
 import type { Config } from '@docusaurus/types';
+import type {Options as IdealImageOptions} from '@docusaurus/plugin-ideal-image';
 import { themes as prismThemes } from 'prism-react-renderer';
 
 // https://docusaurus.io/docs/api/plugins/@docusaurus/plugin-content-docs#markdown-front-matter
@@ -69,7 +70,20 @@ const config: Config = {
       } satisfies Preset.Options,
     ],
   ],
-  plugins: [require.resolve('docusaurus-plugin-image-zoom')],
+  plugins: [
+    require.resolve('docusaurus-plugin-image-zoom'),
+    [
+      'ideal-image',
+      {
+        quality: 70,
+        max: 1030,
+        min: 640,
+        steps: 2,
+        // Use false to debug, but it incurs huge perf costs
+        disableInDev: true,
+      } satisfies IdealImageOptions,
+    ],
+  ],
   themeConfig: {
     metadata: [
       {
@@ -169,6 +183,7 @@ const config: Config = {
             },
           ],
         },
+        {to: 'showcase', label: '案例展示', position: 'left'},
         {
           type: 'docSidebar',
           sidebarId: 'releaseSidebar',

src/css/custom.css

@@ -28,6 +28,8 @@
   --ifm-color-primary-light: #33925d;
   --ifm-color-primary-lighter: #359962;
   --ifm-color-primary-lightest: #3cad6e;
+  --ifm-color-secondary-dark: #d4d5d8;
+  --ifm-button-border-color: #d4d5d8;
   --ifm-code-font-size: 95%;
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
   --ifm-font-size-base: 16px;
@@ -154,4 +156,23 @@ table th, table td {
 
 .markdown li > p {
   margin: 0 0 6px 0;
-}
+}
+
+.screen-reader-only {
+  border: 0;
+  clip: rect(0 0 0 0);
+  clip-path: polygon(0 0, 0 0, 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+  white-space: nowrap;
+}
+
+.showcase-reset {
+  padding: 8px 20px 8px 20px !important;
+  font-size: 14px !important;
+}
+