fix: doc

MinJieLiu · Feb 10, 2022 · 8ea3764 · 8ea3764
1 parent ca1a47b
commit 8ea3764
Show file tree

Hide file tree

Showing 5 changed files with 81 additions and 4 deletions.
diff --git a/example/README.md b/example/README.md
@@ -0,0 +1,63 @@
+# react-photo-view
+
+**一款超精致的图片预览方案**
+
+[![npm](https://img.shields.io/npm/v/react-photo-view.svg?style=flat-square)](https://www.npmjs.com/package/react-photo-view)
+[![react-photo-view](https://badgen.net/bundlephobia/minzip/react-photo-view)](https://github.com/MinJieLiu/react-photo-view)
+[![react-photo-view](https://badgen.net/npm/dt/react-photo-view)](https://github.com/MinJieLiu/react-photo-view)
+
+文档: [https://minjieliu.github.io/react-photo-view](https://minjieliu.github.io/react-photo-view)
+
+## 特性
+
+1. 滑动左右切换
+2. 拖动预览
+3. 物理减速
+4. 双击放大/缩小
+5. 双指放大/缩小/平移
+6. 左右切换导航
+7. 上/下滑关闭
+8. 键盘导航
+9. 旋转 API
+10. 点击切换控件
+11. 缩放动画
+12. 自适应图像适应
+13. 长图模式
+14. 自定义元素预览
+15. 支持桌面端（兼容 IE10+）/移动端
+16. 基于 `typescript`
+17. 6KB
+18. 无依赖
+19. 支持服务端渲染
+20. 高扩展性
+
+## 安装
+
+```bash
+yarn add react-photo-view
+```
+
+## 基本使用:
+
+```js
+import { PhotoProvider, PhotoView } from 'react-photo-view';
+import 'react-photo-view/dist/react-photo-view.css';
+
+function ImageView() {
+  return (
+    <PhotoProvider>
+      <div>
+        <PhotoView src="/1.jpg">
+          <img src="/1-thumbnail.jpg" alt="" />
+        </PhotoView>
+      </div>
+
+      <div>
+        <PhotoView src="/2.jpg">
+          <img src="/2-thumbnail.jpg" alt="" />
+        </PhotoView>
+      </div>
+    </PhotoProvider>
+  );
+}
+```
diff --git a/example/package.json b/example/package.json
@@ -12,11 +12,13 @@
   "scripts": {
     "dev": "vite serve --host --force",
     "build": "vite build",
+    "preview": "vite preview",
     "deploy": "npm run build && gh-pages -d dist"
   },
   "devDependencies": {
     "@mdx-js/mdx": "^1.6.22",
     "@mdx-js/react": "^1.6.22",
+    "@types/node": "^16.11.24",
     "@types/react": "^17.0.39",
     "@types/react-dom": "^17.0.11",
     "@types/styled-components": "^5.1.21",

diff --git a/example/pages/$.mdx b/example/pages/$.mdx
@@ -3,6 +3,6 @@ title: 介绍
 order: 1
 ---
 
-import README from '../../README.md';
+import README from '../README.md';
 
 <README />
diff --git a/example/pnpm-lock.yaml b/example/pnpm-lock.yaml
diff --git a/example/vite.config.ts b/example/vite.config.ts
@@ -6,14 +6,20 @@ import pages from 'vite-plugin-react-pages';
 import pkg from './package.json';
 
 export default defineConfig({
+  base: '/react-photo-view/',
+  server: {
+    fs: {
+      allow: ['..'],
+    },
+  },
+  optimizeDeps: {
+    include: Object.keys(pkg.dependencies),
+  },
   plugins: [
     mdx(),
     react(),
     pages({
       pagesDir: path.join(__dirname, 'pages'),
     }),
   ],
-  optimizeDeps: {
-    include: Object.keys(pkg.dependencies),
-  },
 });