@logicflow/dumi-theme-simple
Version:
Simple website theme based on dumi2.
335 lines (325 loc) • 15.7 kB
JavaScript
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
import { MenuFoldOutlined, MenuUnfoldOutlined, VerticalAlignTopOutlined } from '@ant-design/icons';
import { get } from 'lodash';
import { Affix, BackTop, Layout, Menu } from 'antd';
import { useSidebarData, useFullSidebarData, useLocale, useSiteData } from 'dumi';
import Drawer from 'rc-drawer';
import React, { useEffect, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { useMedia } from 'react-use';
import URI from 'uri-parse';
import { ContentTable } from "dumi/theme/slots/ContentTable";
import { SEO } from "dumi/theme/slots/SEO";
// import { useScrollToTop } from '../hooks';
import { NavigatorBanner } from "./NavigatorBanner";
import { usePreview } from "./usePreview";
import { getBaseRoute, getIndexRoute, getNavigateUrl, getOpenKeys } from "./utils";
import 'rc-drawer/assets/index.css';
import styles from "./index.module.less";
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
import { Fragment as _Fragment } from "react/jsx-runtime";
/**
* 文档的结构
*/
export var ManualContent = function ManualContent(_ref) {
var children = _ref.children;
var locale = useLocale();
var currentLocale = locale.id;
var sidebarData = useSidebarData();
var _useSiteData = useSiteData(),
docs = _useSiteData.themeConfig.docs;
var sidebar = useFullSidebarData();
var is767Wide = useMedia('(min-width: 767.99px)', true);
var is991Wide = useMedia('(min-width: 991.99px)', true);
var _useState = useState(false),
_useState2 = _slicedToArray(_useState, 2),
drawOpen = _useState2[0],
setDrawOpen = _useState2[1];
var navigate = useNavigate();
// linkToTitle用来映射路由和Title
var linkToTitle = {};
for (var _i = 0, _Object$values = Object.values(sidebar); _i < _Object$values.length; _i++) {
var route = _Object$values[_i];
route[0].children.forEach(function (item) {
linkToTitle[item.link] = item.title;
});
}
/**
* /api/xxx --> /api
* /en/api --> /en/api
*/
var baseRoute = getBaseRoute();
function getMenuData(fullSidebarData, rootList, hrefId, list) {
function fullSidebarDataToMenuData(rootList, hrefId, list) {
// 递归
rootList.forEach(function (item) {
var href = (!baseRoute.startsWith('/en') ? "/".concat(item.slug) : "/en/".concat(item.slug)).toLocaleLowerCase();
var id = href.split('/').slice(0, href.split('/').length - 1).join('/');
if (href.includes(baseRoute)) {
if (id === hrefId) {
list.push(_objectSpread(_objectSpread({}, item), {}, {
key: href,
label: item.title[currentLocale]
}));
}
}
});
var _iterator = _createForOfIteratorHelper(list),
_step;
try {
var _loop = function _loop() {
var item = _step.value;
item.children = [];
fullSidebarDataToMenuData(rootList, item.key, item.children);
if (fullSidebarData[item.key]) {
var _fullSidebarData$item;
(_fullSidebarData$item = fullSidebarData[item.key][0].children) === null || _fullSidebarData$item === void 0 || _fullSidebarData$item.forEach(function (itemChild) {
var label = itemChild.title;
var key = itemChild.link;
var tag = get(itemChild, ['frontmatter', 'tag']);
item.children.push(_objectSpread(_objectSpread({}, itemChild), {}, {
label: tag ? /*#__PURE__*/_jsxs("div", {
className: styles.memuLabel,
children: [label, /*#__PURE__*/_jsx("div", {
className: styles.tag,
children: tag
})]
}) : label,
key: key
}));
});
}
// children 的 order 排序
item.children.sort(function (a, b) {
return a.order - b.order;
});
if (item.children.length === 0) {
delete item.children;
}
};
for (_iterator.s(); !(_step = _iterator.n()).done;) {
_loop();
}
} catch (err) {
_iterator.e(err);
} finally {
_iterator.f();
}
if (hrefId === baseRoute) {
if (fullSidebarData[baseRoute]) {
var _fullSidebarData$base;
(_fullSidebarData$base = fullSidebarData[baseRoute][0].children) === null || _fullSidebarData$base === void 0 || _fullSidebarData$base.forEach(function (itemChild) {
var key = itemChild.link;
var label = itemChild.title;
list.push(_objectSpread(_objectSpread({}, itemChild), {}, {
label: label,
key: key
}));
});
}
list.sort(function (a, b) {
return a.order - b.order;
});
return list;
}
}
return fullSidebarDataToMenuData(rootList, hrefId, list);
}
// 获取最终的 MenuData
var renderSidebar = getMenuData(sidebar, docs, baseRoute, []);
// 获取打开的菜单栏
var _useState3 = useState(function () {
return getOpenKeys();
}),
_useState4 = _slicedToArray(_useState3, 2),
defaultOpenKeys = _useState4[0],
setDefaultOpenKeys = _useState4[1];
// 获取第一个md文件的路由
var indexRoute = getIndexRoute(renderSidebar);
// 点击菜单栏
var onClick = function onClick(e) {
navigate(e.key);
// useScrollToTop();
};
var _useState5 = useState(),
_useState6 = _slicedToArray(_useState5, 2),
defaultSelectedKey = _useState6[0],
setDefaultSelectedKey = _useState6[1];
//上一夜下一页
var _useState7 = useState(undefined),
_useState8 = _slicedToArray(_useState7, 2),
prev = _useState8[0],
setPrev = _useState8[1];
var _useState9 = useState(undefined),
_useState10 = _slicedToArray(_useState9, 2),
next = _useState10[0],
setNext = _useState10[1];
// 所有的 sidebar 路由
var sidebarRoutes = [];
for (var _i2 = 0, _Object$keys = Object.keys(linkToTitle); _i2 < _Object$keys.length; _i2++) {
var _route = _Object$keys[_i2];
sidebarRoutes.push(_route);
}
var uri = new URI(location.href);
uri.path = getNavigateUrl("/".concat(uri.path), indexRoute, sidebarRoutes);
if ("".concat(uri.path) !== window.location.pathname) {
uri.path = uri.path.slice(1);
navigate(uri.toURI().replace(location.origin, ''));
}
// 改变菜单栏选中和 openKeys 状态
useEffect(function () {
if (window.location.pathname === indexRoute) {
setDefaultOpenKeys(getOpenKeys());
}
setDefaultSelectedKey(window.location.pathname);
}, [window.location.pathname]);
function getPreAndNext() {
var menuNodes = document.querySelectorAll('aside .ant-menu-item');
var currentMenuNode = document.querySelector('aside .ant-menu-item-selected');
// @ts-ignore
var currentIndex = Array.from(menuNodes).findIndex(function (node) {
return node === currentMenuNode;
});
var prevNode = currentIndex - 1 >= 0 ? menuNodes[currentIndex - 1] : undefined;
var nextNode = currentIndex + 1 < menuNodes.length ? menuNodes[currentIndex + 1] : undefined;
setPrev(prevNode ? {
slug: prevNode.getAttribute('link') || undefined,
title: prevNode.textContent || undefined
} : undefined);
setNext(nextNode ? {
slug: nextNode.getAttribute('link') || undefined,
title: nextNode.textContent || undefined
} : undefined);
}
useEffect(function () {
// 监听选中的menu-item 拿到 prev and next
getPreAndNext();
}, [defaultSelectedKey]);
usePreview({}, defaultSelectedKey);
// const getGithubSourceUrl = ({ githubUrl, relativePath, prefix }: {
// githubUrl: string;
// relativePath: string;
// prefix: string;
// }): string => {
// // https://github.com/antvis/x6/tree/master/packages/x6-sites
// if (githubUrl.includes('/tree/master/')) {
// return `${githubUrl.replace(
// '/tree/master/',
// '/edit/master/',
// )}/${prefix}/${relativePath}`;
// }
// return `${githubUrl}/edit/master/${prefix}/${relativePath}`;
// };
var menu = /*#__PURE__*/_jsx(Menu, {
onClick: onClick,
onOpenChange: function onOpenChange(openKeys) {
setDefaultOpenKeys(openKeys);
},
selectedKeys: [defaultSelectedKey],
openKeys: defaultOpenKeys,
defaultOpenKeys: sidebarData === null || sidebarData === void 0 ? void 0 : sidebarData.map(function (_ref2) {
var title = _ref2.title;
return title;
}).filter(function (item) {
return item;
}),
mode: "inline",
items: renderSidebar,
inlineIndent: 16,
style: {
height: '100%'
},
forceSubMenuRender: true,
triggerSubMenuAction: "click"
});
return /*#__PURE__*/_jsxs(_Fragment, {
children: [/*#__PURE__*/_jsx(SEO, {
title: linkToTitle[window.location.pathname],
lang: locale.id
}), /*#__PURE__*/_jsxs(Layout, {
style: {
background: '#fff'
},
hasSider: true,
className: styles.layout,
children: [/*#__PURE__*/_jsx(Affix, {
offsetTop: 0,
className: styles.affix,
style: {
height: is767Wide ? '100vh' : 'inherit'
},
children: is767Wide ? /*#__PURE__*/_jsx(Layout.Sider, {
width: "auto",
theme: "light",
className: styles.sider,
children: menu
}) : /*#__PURE__*/_jsx(Drawer, {
handler: drawOpen ? /*#__PURE__*/_jsx(MenuFoldOutlined, {
className: styles.menuSwitch
}) : /*#__PURE__*/_jsx(MenuUnfoldOutlined, {
className: styles.menuSwitch
}),
wrapperClassName: styles.menuDrawer,
onChange: function onChange(open) {
return setDrawOpen(!!open);
},
width: 280,
children: menu
})
}), /*#__PURE__*/_jsx(Layout.Content, {
className: styles.content,
children: /*#__PURE__*/_jsxs("div", {
className: styles.main,
children: [/*#__PURE__*/_jsx("h1", {
className: styles.contentTitle,
children: linkToTitle[window.location.pathname]
}), /*#__PURE__*/_jsx("div", {
className: styles.readtimeContainer
}), /*#__PURE__*/_jsx("div", {
className: styles.markdown,
children: children
}), /*#__PURE__*/_jsx("div", {
children: /*#__PURE__*/_jsxs("div", {
className: styles.preandnext,
children: [/*#__PURE__*/_jsx(NavigatorBanner, {
type: "prev",
post: prev
}), /*#__PURE__*/_jsx(NavigatorBanner, {
type: "next",
post: next
}), /*#__PURE__*/_jsx(BackTop, {
style: {
right: 32
},
children: /*#__PURE__*/_jsx("div", {
className: styles.backTop,
children: /*#__PURE__*/_jsx(VerticalAlignTopOutlined, {})
})
})]
})
})]
})
}), is991Wide ? /*#__PURE__*/_jsx(Layout.Sider, {
theme: "light",
width: 260,
children: /*#__PURE__*/_jsx("div", {
className: styles.toc,
children: /*#__PURE__*/_jsx(ContentTable, {})
})
}) : /*#__PURE__*/_jsx("div", {})]
})]
});
};