| 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061 |
- import { useRoute, useSiteData } from 'vitepress';
- import { h } from 'vue';
- import { joinUrl, isActive } from '../utils';
- export const SideBarItem = (props) => {
- const { item: { link: relLink, text, children } } = props;
- const route = useRoute();
- const siteData = useSiteData();
- const link = resolveLink(siteData.value.base, relLink || '');
- const active = isActive(route, link);
- const headers = route.data.headers;
- const childItems = createChildren(active, children, headers);
- return h('li', { class: 'sidebar-item' }, [
- h(link ? 'a' : 'p', {
- class: { 'sidebar-link': true, active },
- href: link
- }, text),
- childItems
- ]);
- };
- function resolveLink(base, path) {
- return path
- ? // keep relative hash to the same page
- path.startsWith('#')
- ? path
- : joinUrl(base, path)
- : undefined;
- }
- function createChildren(active, children, headers) {
- if (children && children.length > 0) {
- return h('ul', { class: 'sidebar-items' }, children.map((c) => {
- return h(SideBarItem, { item: c });
- }));
- }
- return active && headers
- ? createChildren(false, resolveHeaders(headers))
- : null;
- }
- function resolveHeaders(headers) {
- return mapHeaders(groupHeaders(headers));
- }
- function groupHeaders(headers) {
- headers = headers.map((h) => Object.assign({}, h));
- let lastH2;
- headers.forEach((h) => {
- if (h.level === 2) {
- lastH2 = h;
- }
- else if (lastH2) {
- ;
- (lastH2.children || (lastH2.children = [])).push(h);
- }
- });
- return headers.filter((h) => h.level === 2);
- }
- function mapHeaders(headers) {
- return headers.map((header) => ({
- text: header.title,
- link: `#${header.slug}`,
- children: header.children ? mapHeaders(header.children) : undefined
- }));
- }
|