dumi-theme-lobehub
Version:
dumi-theme-lobehub is a documentation site theme package designed for dumi2. It provides a more beautiful and user-friendly development and reading experience based on @lobehub/ui
111 lines (110 loc) • 4.34 kB
JavaScript
import { Layout } from '@lobehub/ui';
import { useResponsive, useTheme } from 'antd-style';
import { Helmet, useIntl, useLocation } from 'dumi';
import isEqual from 'fast-deep-equal';
import { memo, useCallback, useEffect } from 'react';
import Changelog from "../../pages/Changelog";
import Docs from "../../pages/Docs";
import Home from "../../pages/Home";
import Footer from "dumi/theme/slots/Footer";
import Header from "dumi/theme/slots/Header";
import Sidebar from "dumi/theme/slots/Sidebar";
import Toc from "dumi/theme/slots/Toc";
import { heroSelectors, siteSelectors, useSiteStore } from "../../store";
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
import { Fragment as _Fragment } from "react/jsx-runtime";
var DocumentLayout = /*#__PURE__*/memo(function () {
var intl = useIntl();
var _useLocation = useLocation(),
hash = _useLocation.hash;
var theme = useTheme();
var _useResponsive = useResponsive(),
mobile = _useResponsive.mobile,
laptop = _useResponsive.laptop;
var _useSiteStore = useSiteStore(function (s) {
var isChanlogPage = s.location.pathname === '/changelog';
var isHomePage = heroSelectors.isHeroPage(s);
var page;
if (isHomePage) {
page = 'home';
} else if (isChanlogPage) {
page = 'changelog';
} else {
page = 'docs';
}
return {
loading: s.siteData.loading,
noToc: siteSelectors.tocAnchorItem(s).length === 0,
page: page,
siteTitle: siteSelectors.siteTitle(s)
};
}),
loading = _useSiteStore.loading,
page = _useSiteStore.page,
siteTitle = _useSiteStore.siteTitle,
noToc = _useSiteStore.noToc;
var fm = useSiteStore(function (s) {
return s.routeMeta.frontmatter;
}, isEqual);
var hideSidebar = page !== 'docs' || mobile || fm.sidebar === false;
var shouldHideToc = fm.toc === false || noToc;
var hideToc = mobile ? shouldHideToc : !laptop || shouldHideToc;
var HelmetBlock = useCallback(function () {
return /*#__PURE__*/_jsxs(Helmet, {
children: [/*#__PURE__*/_jsx("html", {
lang: intl.locale.replace(/-.+$/, '')
}), fm.title && /*#__PURE__*/_jsx("meta", {
content: fm.title,
property: "og:title"
}), fm.description && /*#__PURE__*/_jsx("meta", {
content: fm.description,
name: "description"
}), fm.description && /*#__PURE__*/_jsx("meta", {
content: fm.description,
property: "og:description"
}), fm.keywords && /*#__PURE__*/_jsx("meta", {
content: fm.keywords.join(','),
name: "keywords"
}), fm.keywords && /*#__PURE__*/_jsx("meta", {
content: fm.keywords.join(','),
property: "og:keywords"
}), !fm.title || page === 'home' ? /*#__PURE__*/_jsx("title", {
children: siteTitle
}) : /*#__PURE__*/_jsx("title", {
children: siteTitle ? "".concat(fm.title, "-").concat(siteTitle) : fm.title
})]
});
}, [intl, fm, siteTitle, page]);
// handle hash change or visit page hash after async chunk loaded
useEffect(function () {
var id = hash.replace('#', '');
if (!id) return;
setTimeout(function () {
var elm = document.querySelector("#".concat(decodeURIComponent(id)));
if (elm) {
var _window;
elm.scrollIntoView();
(_window = window) === null || _window === void 0 || _window.scrollBy({
top: -80
});
}
}, 1);
}, [loading, hash]);
useEffect(function () {
document.body.scrollTo(0, 0);
}, [siteTitle]);
return /*#__PURE__*/_jsxs(_Fragment, {
children: [/*#__PURE__*/_jsx(HelmetBlock, {}), /*#__PURE__*/_jsxs(Layout, {
asideWidth: theme.sidebarWidth,
footer: /*#__PURE__*/_jsx(Footer, {}),
header: /*#__PURE__*/_jsx(Header, {}),
headerHeight: mobile && page !== 'home' ? theme.headerHeight + 36 : theme.headerHeight,
sidebar: hideSidebar ? undefined : /*#__PURE__*/_jsx(Sidebar, {}),
toc: hideToc ? undefined : /*#__PURE__*/_jsx(Toc, {}),
tocWidth: hideToc ? 0 : theme.tocWidth,
children: [page === 'home' && /*#__PURE__*/_jsx(Home, {}), page === 'changelog' && /*#__PURE__*/_jsx(Changelog, {}), page === 'docs' && /*#__PURE__*/_jsx(Docs, {})]
})]
});
});
export default DocumentLayout;