website: add footer.

uiwjs · Mar 31, 2023 · 909cd71 · 909cd71
1 parent a3faaa3
commit 909cd71
Show file tree

Hide file tree

Showing 3 changed files with 163 additions and 61 deletions.
diff --git a/website/src/components/Footer/index.tsx b/website/src/components/Footer/index.tsx
@@ -37,12 +37,7 @@ const Footer = (props: FooterProps) => {
   return (
     <Wrapper>
       {editorUrl && (
-        <a
-          title="Editor Current Page"
-          target="_blank"
-          rel="noreferrer"
-          href={`https://github.com/uiwjs/react-baidu-map/edit/master${editorUrl}`}
-        >
+        <a title="Editor Current Page" target="_blank" rel="noreferrer" href={editorUrl}>
           编辑当前页面
         </a>
       )}

diff --git a/website/src/components/Preview/index.tsx b/website/src/components/Preview/index.tsx
@@ -8,6 +8,7 @@ import CodeLayout from 'react-code-preview-layout';
 import { useMdData, MdDataHandle } from './useMdData';
 import { useHyperlink } from './useHyperlink';
 import { getTocTree } from './nodes/toc';
+import Footer from '../Footer';
 import './nodes/toc.less';
 
 // @ts-ignore
@@ -48,10 +49,16 @@ const Markdown = styled<
 //   return defaultValue;
 // };
 
-const PreviewDocument = ({ path }: { path: MdDataHandle }) => {
+interface PreviewDocumentProps {
+  path: MdDataHandle;
+  editor: string;
+}
+
+const PreviewDocument = ({ path, editor }: PreviewDocumentProps) => {
   const $dom = useRef<HTMLDivElement>(null);
   const { mdData } = useMdData(path);
   useHyperlink($dom.current);
+  const editorUrl = `https://github.com/uiwjs/react-baidu-map/tree/master/${editor}`;
   return (
     <Wrapper ref={$dom}>
       <Markdown
@@ -122,6 +129,7 @@ const PreviewDocument = ({ path }: { path: MdDataHandle }) => {
       <BackToUp element={$dom.current} style={{ float: 'right' }}>
         Top
       </BackToUp>
+      <Footer editorUrl={editorUrl} />
     </Wrapper>
   );
 };

diff --git a/website/src/data.tsx b/website/src/data.tsx
@@ -19,8 +19,9 @@ export const routesConfig: MenuRouteObject[] = [
       {
         index: true,
         menu: '快速开始',
-        editorUrl: '/packages/baidu-map/README.md',
-        element: <Preview path={() => import('@uiw/react-baidu-map/README.md')} />,
+        element: (
+          <Preview path={() => import('@uiw/react-baidu-map/README.md')} editor="/packages/baidu-map/README.md" />
+        ),
       },
       {
         menu: '容器',
@@ -29,26 +30,39 @@ export const routesConfig: MenuRouteObject[] = [
           {
             path: 'api-loader',
             menu: 'APILoader 组件',
-            editorUrl: '/packages/api-loader/README.md',
-            element: <Preview path={() => import('@uiw/react-baidu-map-api-loader/README.md')} />,
+            element: (
+              <Preview
+                path={() => import('@uiw/react-baidu-map-api-loader/README.md')}
+                editor="/packages/api-loader/README.md"
+              />
+            ),
           },
           {
             path: 'map',
             menu: 'Map 组件',
-            editorUrl: '/packages/map/README.md',
-            element: <Preview path={() => import('@uiw/react-baidu-map-map/README.md')} />,
+            element: (
+              <Preview path={() => import('@uiw/react-baidu-map-map/README.md')} editor="/packages/map/README.md" />
+            ),
           },
           {
             path: 'with-map',
             menu: 'withMap',
-            editorUrl: '/packages/with-map/README.md',
-            element: <Preview path={() => import('@uiw/react-baidu-map-with-map/README.md')} />,
+            element: (
+              <Preview
+                path={() => import('@uiw/react-baidu-map-with-map/README.md')}
+                editor="/packages/with-map/README.md"
+              />
+            ),
           },
           {
             path: 'map-types',
             menu: 'Support TypeScript',
-            editorUrl: '/packages/map-types/README.md',
-            element: <Preview path={() => import('@uiw/react-baidu-map-types/README.md')} />,
+            element: (
+              <Preview
+                path={() => import('@uiw/react-baidu-map-types/README.md')}
+                editor="/packages/map-types/README.md"
+              />
+            ),
           },
         ],
       },
@@ -59,50 +73,82 @@ export const routesConfig: MenuRouteObject[] = [
           {
             menu: 'Control 自定义控件',
             path: 'control',
-            editorUrl: '/packages/control/README.md',
-            element: <Preview path={() => import('@uiw/react-baidu-map-control/README.md')} />,
+            element: (
+              <Preview
+                path={() => import('@uiw/react-baidu-map-control/README.md')}
+                editor="/packages/control/README.md"
+              />
+            ),
           },
           {
             menu: 'CopyrightControl 版权控件',
             path: 'copyright-control',
-            editorUrl: '/packages/copyright-control/README.md',
-            element: <Preview path={() => import('@uiw/react-baidu-map-copyright-control/README.md')} />,
+            element: (
+              <Preview
+                path={() => import('@uiw/react-baidu-map-copyright-control/README.md')}
+                editor="/packages/copyright-control/README.md"
+              />
+            ),
           },
           {
             menu: 'NavigationControl 平移缩放控件',
             path: 'navigation-control',
-            editorUrl: '/packages/navigation-control/README.md',
-            element: <Preview path={() => import('@uiw/react-baidu-map-navigation-control/README.md')} />,
+            element: (
+              <Preview
+                path={() => import('@uiw/react-baidu-map-navigation-control/README.md')}
+                editor="/packages/navigation-control/README.md"
+              />
+            ),
           },
           {
             menu: 'GeolocationControl 定位控件',
             path: 'geolocation-control',
-            editorUrl: '/packages/geolocation-control/README.md',
-            element: <Preview path={() => import('@uiw/react-baidu-map-geolocation-control/README.md')} />,
+            element: (
+              <Preview
+                path={() => import('@uiw/react-baidu-map-geolocation-control/README.md')}
+                editor="/packages/geolocation-control/README.md"
+              />
+            ),
           },
           {
             menu: 'OverviewMapControl 缩略地图',
             path: 'overview-map-control',
-            editorUrl: '/packages/overview-map-control/README.md',
-            element: <Preview path={() => import('@uiw/react-baidu-map-overview-map-control/README.md')} />,
+            element: (
+              <Preview
+                path={() => import('@uiw/react-baidu-map-overview-map-control/README.md')}
+                editor="/packages/overview-map-control/README.md"
+              />
+            ),
           },
           {
             menu: 'ScaleControl 比例尺控件',
             path: 'scale-control',
-            editorUrl: '/packages/scale-control/README.md',
-            element: <Preview path={() => import('@uiw/react-baidu-map-scale-control/README.md')} />,
+            element: (
+              <Preview
+                path={() => import('@uiw/react-baidu-map-scale-control/README.md')}
+                editor="/packages/scale-control/README.md"
+              />
+            ),
           },
           {
             menu: 'MapTypeControl 地图类型控件',
             path: 'map-type-control',
-            editorUrl: '/packages/map-type-control/README.md',
-            element: <Preview path={() => import('@uiw/react-baidu-map-type-control/README.md')} />,
+            element: (
+              <Preview
+                path={() => import('@uiw/react-baidu-map-type-control/README.md')}
+                editor="/packages/map-type-control/README.md"
+              />
+            ),
           },
           {
             menu: 'PanoramaControl 全景地图控件',
             path: 'panorama-control',
-            editorUrl: '/packages/panorama-control/README.md',
-            element: <Preview path={() => import('@uiw/react-baidu-map-panorama-control/README.md')} />,
+            element: (
+              <Preview
+                path={() => import('@uiw/react-baidu-map-panorama-control/README.md')}
+                editor="/packages/panorama-control/README.md"
+              />
+            ),
           },
         ],
       },
@@ -113,68 +159,109 @@ export const routesConfig: MenuRouteObject[] = [
           {
             menu: 'Marker 点标注',
             path: 'marker',
-            editorUrl: '/packages/marker/README.md',
-            element: <Preview path={() => import('@uiw/react-baidu-map-marker/README.md')} />,
+            element: (
+              <Preview
+                path={() => import('@uiw/react-baidu-map-marker/README.md')}
+                editor="/packages/marker/README.md"
+              />
+            ),
           },
           {
             menu: 'InfoWindow 信息窗口',
             path: 'info-window',
-            editorUrl: '/packages/info-window/README.md',
-            element: <Preview path={() => import('@uiw/react-baidu-map-info-window/README.md')} />,
+            element: (
+              <Preview
+                path={() => import('@uiw/react-baidu-map-info-window/README.md')}
+                editor="/packages/info-window/README.md"
+              />
+            ),
           },
           {
             menu: 'Label 文本标注',
             path: 'label',
-            editorUrl: '/packages/label/README.md',
-            element: <Preview path={() => import('@uiw/react-baidu-map-label/README.md')} />,
+            element: (
+              <Preview path={() => import('@uiw/react-baidu-map-label/README.md')} editor="/packages/label/README.md" />
+            ),
           },
           {
             menu: 'PointCollection 加载海量点',
             path: 'point-collection',
-            editorUrl: '/packages/point-collection/README.md',
-            element: <Preview path={() => import('@uiw/react-baidu-map-point-collection/README.md')} />,
+            element: (
+              <Preview
+                path={() => import('@uiw/react-baidu-map-point-collection/README.md')}
+                editor="/packages/point-collection/README.md"
+              />
+            ),
           },
           {
             menu: 'Polyline 折线组件',
             path: 'polyline',
-            editorUrl: '/packages/polyline/README.md',
-            element: <Preview path={() => import('@uiw/react-baidu-map-polyline/README.md')} />,
+            element: (
+              <Preview
+                path={() => import('@uiw/react-baidu-map-polyline/README.md')}
+                editor="/packages/polyline/README.md"
+              />
+            ),
           },
           {
             menu: 'Polygon 多边形组件',
             path: 'polygon',
-            editorUrl: '/packages/polygon/README.md',
-            element: <Preview path={() => import('@uiw/react-baidu-map-polygon/README.md')} />,
+            element: (
+              <Preview
+                path={() => import('@uiw/react-baidu-map-polygon/README.md')}
+                editor="/packages/polygon/README.md"
+              />
+            ),
           },
           {
             menu: 'Circle 圆',
             path: 'circle',
-            editorUrl: '/packages/circle/README.md',
-            element: <Preview path={() => import('@uiw/react-baidu-map-circle/README.md')} />,
+            element: (
+              <Preview
+                path={() => import('@uiw/react-baidu-map-circle/README.md')}
+                editor="/packages/circle/README.md"
+              />
+            ),
           },
           {
             menu: 'GroundOverlay 地面叠加层',
             path: 'ground-overlay',
-            editorUrl: '/packages/ground-overlay/README.md',
-            element: <Preview path={() => import('@uiw/react-baidu-map-ground-overlay/README.md')} />,
+            element: (
+              <Preview
+                path={() => import('@uiw/react-baidu-map-ground-overlay/README.md')}
+                editor="/packages/ground-overlay/README.md"
+              />
+            ),
           },
           {
             menu: 'CanvasLayer 自定义Canvas',
             path: 'canvas-layer',
-            editorUrl: '/packages/canvas-layer/README.md',
-            element: <Preview path={() => import('@uiw/react-baidu-map-canvas-layer/README.md')} />,
+            element: (
+              <Preview
+                path={() => import('@uiw/react-baidu-map-canvas-layer/README.md')}
+                editor="/packages/canvas-layer/README.md"
+              />
+            ),
           },
           {
             menu: 'CustomOverlay 自定义覆盖物',
             path: 'custom-overlay',
-            editorUrl: '/packages/custom-overlay/README.md',
-            element: <Preview path={() => import('@uiw/react-baidu-map-custom-overlay/README.md')} />,
+            element: (
+              <Preview
+                path={() => import('@uiw/react-baidu-map-custom-overlay/README.md')}
+                editor="/packages/custom-overlay/README.md"
+              />
+            ),
           },
           {
             menu: 'TileLayer 地图图层',
             path: 'tile-layer',
-            editorUrl: '/packages/tile-layer/README.md',
-            element: <Preview path={() => import('@uiw/react-baidu-map-tile-layer/README.md')} />,
+            element: (
+              <Preview
+                path={() => import('@uiw/react-baidu-map-tile-layer/README.md')}
+                editor="/packages/tile-layer/README.md"
+              />
+            ),
           },
         ],
       },
@@ -185,20 +272,32 @@ export const routesConfig: MenuRouteObject[] = [
           {
             menu: 'RequireScript 加载第三方包',
             path: 'require-script',
-            editorUrl: '/packages/require-script/README.md',
-            element: <Preview path={() => import('@uiw/react-baidu-map-require-script/README.md')} />,
+            element: (
+              <Preview
+                path={() => import('@uiw/react-baidu-map-require-script/README.md')}
+                editor="/packages/require-script/README.md"
+              />
+            ),
           },
           {
             menu: 'CurveLine 弧线组件',
             path: 'curve-line',
-            editorUrl: '/packages/curve-line/README.md',
-            element: <Preview path={() => import('@uiw/react-baidu-map-curve-line/README.md')} />,
+            element: (
+              <Preview
+                path={() => import('@uiw/react-baidu-map-curve-line/README.md')}
+                editor="/packages/curve-line/README.md"
+              />
+            ),
           },
           {
             menu: 'DrawingManager 鼠标绘制工具',
             path: 'drawing-manager',
-            editorUrl: '/packages/drawing-manager/README.md',
-            element: <Preview path={() => import('@uiw/react-baidu-map-drawing-manager/README.md')} />,
+            element: (
+              <Preview
+                path={() => import('@uiw/react-baidu-map-drawing-manager/README.md')}
+                editor="/packages/drawing-manager/README.md"
+              />
+            ),
           },
         ],
       },