@brillout/docpress 0.9.8 → 0.10.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/Layout.tsx +102 -40
- package/{navigation → MenuModal}/Collapsible.css +7 -0
- package/MenuModal/NavigationWithColumnLayout.css +11 -0
- package/MenuModal/NavigationWithColumnLayout.tsx +253 -0
- package/MenuModal/toggleMenuModal.ts +132 -0
- package/MenuModal.tsx +68 -79
- package/{navigation/Navigation.css → NavItemComponent.css} +1 -23
- package/NavItemComponent.tsx +149 -0
- package/components/Note.css +0 -1
- package/config/resolveHeadingsData.ts +1 -1
- package/css/code/diff.css +10 -5
- package/css/code.css +1 -1
- package/css/colorize-on-hover.css +6 -7
- package/css/heading.css +9 -3
- package/css/index.css +1 -0
- package/dist/NavItemComponent.d.ts +39 -0
- package/dist/NavItemComponent.js +109 -0
- package/dist/config/resolveHeadingsData.d.ts +1 -1
- package/dist/config/resolvePageContext.d.ts +2 -2
- package/dist/renderer/determineNavItemsColumnLayout.d.ts +1 -1
- package/docsearch/SearchLink.tsx +7 -3
- package/icons/books.svg +46 -0
- package/icons/gear.svg +35 -0
- package/icons/index.ts +5 -0
- package/icons/magnifying-glass.svg +31 -0
- package/icons/seedling.svg +24 -0
- package/index.ts +2 -0
- package/initKeyBindings.ts +1 -1
- package/package.json +1 -1
- package/renderer/determineNavItemsColumnLayout.ts +1 -1
- package/renderer/initOnNavigation.ts +1 -1
- package/renderer/onRenderClient.tsx +1 -1
- package/utils/css.ts +0 -6
- package/dist/Layout.d.ts +0 -15
- package/dist/Layout.js +0 -321
- package/dist/MenuModal.d.ts +0 -13
- package/dist/MenuModal.js +0 -124
- package/dist/NavSecondaryContent.d.ts +0 -6
- package/dist/NavSecondaryContent.js +0 -57
- package/dist/autoScrollNav.d.ts +0 -3
- package/dist/autoScrollNav.js +0 -35
- package/dist/components/EditPageNote.d.ts +0 -7
- package/dist/components/EditPageNote.js +0 -11
- package/dist/docsearch/SearchLink.d.ts +0 -4
- package/dist/docsearch/SearchLink.js +0 -25
- package/dist/docsearch/toggleDocsearchModal.d.ts +0 -4
- package/dist/docsearch/toggleDocsearchModal.js +0 -26
- package/dist/navigation/Collapsible.d.ts +0 -10
- package/dist/navigation/Collapsible.js +0 -35
- package/dist/navigation/Navigation.d.ts +0 -21
- package/dist/navigation/Navigation.js +0 -255
- package/dist/utils/PassTrough.d.ts +0 -3
- package/dist/utils/PassTrough.js +0 -6
- package/dist/utils/Style.d.ts +0 -5
- package/dist/utils/Style.js +0 -6
- package/dist/utils/css.d.ts +0 -1
- package/dist/utils/css.js +0 -27
- package/dist/utils/getViewportWidth.d.ts +0 -1
- package/dist/utils/getViewportWidth.js +0 -4
- package/dist/utils/throttle.d.ts +0 -1
- package/dist/utils/throttle.js +0 -14
- package/navigation/Navigation.tsx +0 -382
- /package/{navigation → MenuModal}/Collapsible.tsx +0 -0
package/dist/MenuModal.d.ts
DELETED
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
export { MenuModal };
|
|
2
|
-
export { toggleMenuModal };
|
|
3
|
-
export { openMenuModal };
|
|
4
|
-
export { closeMenuModal };
|
|
5
|
-
export { closeMenuModalWithDelay };
|
|
6
|
-
import React from 'react';
|
|
7
|
-
declare function MenuModal({ isTopNav }: {
|
|
8
|
-
isTopNav: boolean;
|
|
9
|
-
}): React.JSX.Element;
|
|
10
|
-
declare function toggleMenuModal(): void;
|
|
11
|
-
declare function openMenuModal(): void;
|
|
12
|
-
declare function closeMenuModal(): void;
|
|
13
|
-
declare function closeMenuModalWithDelay(delay: number): void;
|
package/dist/MenuModal.js
DELETED
|
@@ -1,124 +0,0 @@
|
|
|
1
|
-
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
|
|
2
|
-
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
|
|
3
|
-
return cooked;
|
|
4
|
-
};
|
|
5
|
-
export { MenuModal };
|
|
6
|
-
export { toggleMenuModal };
|
|
7
|
-
export { openMenuModal };
|
|
8
|
-
export { closeMenuModal };
|
|
9
|
-
export { closeMenuModalWithDelay };
|
|
10
|
-
import React from 'react';
|
|
11
|
-
import { usePageContext } from './renderer/usePageContext';
|
|
12
|
-
import { NavigationContent } from './navigation/Navigation';
|
|
13
|
-
import { css } from './utils/css';
|
|
14
|
-
import { containerQueryMobileLayout, containerQueryMobileMenu } from './Layout';
|
|
15
|
-
import { NavSecondaryContent } from './NavSecondaryContent';
|
|
16
|
-
import { getViewportWidth } from './utils/getViewportWidth';
|
|
17
|
-
import { Style } from './utils/Style';
|
|
18
|
-
var closeMenuModalPending;
|
|
19
|
-
function MenuModal(_a) {
|
|
20
|
-
var isTopNav = _a.isTopNav;
|
|
21
|
-
return (React.createElement(React.Fragment, null,
|
|
22
|
-
React.createElement(Style, null, getStyle()),
|
|
23
|
-
React.createElement("div", { id: "menu-modal", className: "link-hover-animation add-transition", style: {
|
|
24
|
-
position: isTopNav ? 'absolute' : 'fixed',
|
|
25
|
-
width: '100%',
|
|
26
|
-
/* Firefox doesn't support `dvh` yet: https://caniuse.com/?search=dvh
|
|
27
|
-
* - Always use `dvh` instead of `vh` once Firefox supports it.
|
|
28
|
-
* - We use dvh because of mobile: https://stackoverflow.com/questions/37112218/css3-100vh-not-constant-in-mobile-browser/72245072#72245072
|
|
29
|
-
height: 'calc(100dvh - var(--nav-head-height))',
|
|
30
|
-
/*/
|
|
31
|
-
height: 'calc(100vh - var(--nav-head-height))',
|
|
32
|
-
maxHeight: 'calc(100dvh - var(--nav-head-height))',
|
|
33
|
-
//*/
|
|
34
|
-
top: 'var(--nav-head-height)',
|
|
35
|
-
left: 0,
|
|
36
|
-
zIndex: 9999,
|
|
37
|
-
overflow: 'scroll',
|
|
38
|
-
background: '#ededef',
|
|
39
|
-
transitionProperty: 'opacity',
|
|
40
|
-
// https://github.com/brillout/docpress/issues/23
|
|
41
|
-
// https://stackoverflow.com/questions/64514118/css-overscroll-behavior-contain-when-target-element-doesnt-overflow
|
|
42
|
-
// https://stackoverflow.com/questions/9538868/prevent-body-from-scrolling-when-a-modal-is-opened
|
|
43
|
-
overscrollBehavior: 'none',
|
|
44
|
-
}, onMouseOver: openMenuModal, onMouseLeave: closeMenuModal },
|
|
45
|
-
React.createElement("div", { style: {
|
|
46
|
-
// Place <LinksBottom /> to the bottom
|
|
47
|
-
display: 'flex',
|
|
48
|
-
flexDirection: 'column',
|
|
49
|
-
minHeight: 'calc(100dvh - var(--nav-head-height))',
|
|
50
|
-
justifyContent: 'space-between',
|
|
51
|
-
// We don't set `container` to parent beacuse of a Chrome bug (showing a blank <MenuModal>)
|
|
52
|
-
container: 'container-viewport / inline-size',
|
|
53
|
-
} },
|
|
54
|
-
React.createElement(Nav, null),
|
|
55
|
-
React.createElement(NavSecondary, { className: "show-only-for-mobile" })),
|
|
56
|
-
React.createElement(CloseButton, { className: "show-only-for-mobile" }))));
|
|
57
|
-
}
|
|
58
|
-
function Nav() {
|
|
59
|
-
var pageContext = usePageContext();
|
|
60
|
-
var navItems = pageContext.navItemsAll;
|
|
61
|
-
return React.createElement(NavigationContent, { columnLayout: true, navItems: navItems });
|
|
62
|
-
}
|
|
63
|
-
function NavSecondary(_a) {
|
|
64
|
-
var className = _a.className;
|
|
65
|
-
return (React.createElement("div", { className: className, style: {
|
|
66
|
-
display: 'flex',
|
|
67
|
-
justifyContent: 'center',
|
|
68
|
-
marginTop: 20,
|
|
69
|
-
} },
|
|
70
|
-
React.createElement(NavSecondaryContent, { style: { height: 70 } })));
|
|
71
|
-
}
|
|
72
|
-
function getStyle() {
|
|
73
|
-
return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\nhtml:not(.menu-modal-show) #menu-modal {\n opacity: 0;\n pointer-events: none;\n}\n@container container-viewport (min-width: ", "px) {\n #menu-modal .nav-item-level-3 {\n display: none;\n }\n}\n@media(max-width: ", "px) {\n #menu-modal {\n --nav-head-height: 0px !important;\n }\n}\n@media(min-width: ", "px) {\n .show-only-for-mobile {\n display: none !important;\n }\n}\n"], ["\nhtml:not(.menu-modal-show) #menu-modal {\n opacity: 0;\n pointer-events: none;\n}\n@container container-viewport (min-width: ", "px) {\n #menu-modal .nav-item-level-3 {\n display: none;\n }\n}\n@media(max-width: ", "px) {\n #menu-modal {\n --nav-head-height: 0px !important;\n }\n}\n@media(min-width: ", "px) {\n .show-only-for-mobile {\n display: none !important;\n }\n}\n"])), containerQueryMobileLayout, containerQueryMobileMenu, containerQueryMobileMenu + 1);
|
|
74
|
-
}
|
|
75
|
-
function CloseButton(_a) {
|
|
76
|
-
var className = _a.className;
|
|
77
|
-
return (React.createElement("div", { className: className, onClick: toggleMenuModal, style: { position: 'fixed', top: 0, right: 0, zIndex: 10, padding: 11, cursor: 'pointer' }, "aria-label": 'Escape\nCtrl\xa0+\xa0M', "data-label-shift": true },
|
|
78
|
-
React.createElement("svg", { width: "48.855", height: "48.855", version: "1.1", viewBox: "0 0 22.901 22.901", xmlns: "http://www.w3.org/2000/svg" },
|
|
79
|
-
React.createElement("circle", { cx: "11.45", cy: "11.45", r: "10.607", fill: "#ececec", stroke: "#666", strokeDashoffset: "251.44", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.6875", style: { paintOrder: 'normal' } }),
|
|
80
|
-
React.createElement("path", { d: "m7.5904 6.2204 3.86 3.86 3.84-3.84a0.92 0.92 0 0 1 0.66-0.29 1 1 0 0 1 1 1 0.9 0.9 0 0 1-0.27 0.66l-3.89 3.84 3.89 3.89a0.9 0.9 0 0 1 0.27 0.61 1 1 0 0 1-1 1 0.92 0.92 0 0 1-0.69-0.27l-3.81-3.86-3.85 3.85a0.92 0.92 0 0 1-0.65 0.28 1 1 0 0 1-1-1 0.9 0.9 0 0 1 0.27-0.66l3.89-3.84-3.89-3.89a0.9 0.9 0 0 1-0.27-0.61 1 1 0 0 1 1-1c0.24 3e-3 0.47 0.1 0.64 0.27z", fill: "#666", stroke: "#666", strokeWidth: ".11719" }))));
|
|
81
|
-
}
|
|
82
|
-
function toggleMenuModal() {
|
|
83
|
-
document.documentElement.classList.toggle('menu-modal-show');
|
|
84
|
-
if (document.documentElement.classList.contains('menu-modal-show') &&
|
|
85
|
-
getViewportWidth() < containerQueryMobileLayout) {
|
|
86
|
-
autoScroll();
|
|
87
|
-
}
|
|
88
|
-
}
|
|
89
|
-
function autoScroll() {
|
|
90
|
-
var nav = document.querySelector('#menu-modal .navigation-content');
|
|
91
|
-
var href = window.location.pathname;
|
|
92
|
-
var navLinks = Array.from(nav.querySelectorAll("a[href=\"".concat(href, "\"]")));
|
|
93
|
-
var navLink = navLinks[0];
|
|
94
|
-
if (!navLink)
|
|
95
|
-
return;
|
|
96
|
-
// None of the following seemes to be working: https://stackoverflow.com/questions/19669786/check-if-element-is-visible-in-dom
|
|
97
|
-
if (findCollapsibleEl(navLink).classList.contains('collapsible-collapsed'))
|
|
98
|
-
return;
|
|
99
|
-
navLink.scrollIntoView({
|
|
100
|
-
behavior: 'instant',
|
|
101
|
-
block: 'center',
|
|
102
|
-
inline: 'start',
|
|
103
|
-
});
|
|
104
|
-
}
|
|
105
|
-
function findCollapsibleEl(navLink) {
|
|
106
|
-
var parentEl = navLink;
|
|
107
|
-
while (parentEl) {
|
|
108
|
-
if (parentEl.classList.contains('collapsible'))
|
|
109
|
-
return parentEl;
|
|
110
|
-
parentEl = parentEl.parentElement;
|
|
111
|
-
}
|
|
112
|
-
return null;
|
|
113
|
-
}
|
|
114
|
-
function openMenuModal() {
|
|
115
|
-
clearTimeout(closeMenuModalPending);
|
|
116
|
-
document.documentElement.classList.add('menu-modal-show');
|
|
117
|
-
}
|
|
118
|
-
function closeMenuModal() {
|
|
119
|
-
document.documentElement.classList.remove('menu-modal-show');
|
|
120
|
-
}
|
|
121
|
-
function closeMenuModalWithDelay(delay) {
|
|
122
|
-
closeMenuModalPending = setTimeout(closeMenuModal, delay);
|
|
123
|
-
}
|
|
124
|
-
var templateObject_1;
|
|
@@ -1,57 +0,0 @@
|
|
|
1
|
-
var __assign = (this && this.__assign) || function () {
|
|
2
|
-
__assign = Object.assign || function(t) {
|
|
3
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
4
|
-
s = arguments[i];
|
|
5
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
6
|
-
t[p] = s[p];
|
|
7
|
-
}
|
|
8
|
-
return t;
|
|
9
|
-
};
|
|
10
|
-
return __assign.apply(this, arguments);
|
|
11
|
-
};
|
|
12
|
-
export { NavSecondaryContent };
|
|
13
|
-
import React from 'react';
|
|
14
|
-
import iconGithub from './icons/github.svg';
|
|
15
|
-
import iconTwitter from './icons/twitter.svg';
|
|
16
|
-
import iconDiscord from './icons/discord.svg';
|
|
17
|
-
import iconChangelog from './icons/changelog.svg';
|
|
18
|
-
import iconLanguages from './icons/languages.svg';
|
|
19
|
-
import { usePageContext } from './renderer/usePageContext';
|
|
20
|
-
import '@docsearch/css';
|
|
21
|
-
function NavSecondaryContent(props) {
|
|
22
|
-
var pageContext = usePageContext();
|
|
23
|
-
var _a = pageContext.config, projectInfo = _a.projectInfo, i18n = _a.i18n;
|
|
24
|
-
var iconI18n = !i18n ? null : (React.createElement(LinkIcon, { className: "decolorize-4", icon: iconLanguages, href: '/languages', style: { height: 21, position: 'relative', top: 0, left: 0 } }));
|
|
25
|
-
return (React.createElement("div", __assign({}, props, { style: __assign({ display: 'flex', alignItems: 'center' }, props.style), className: "desktop-fade" }),
|
|
26
|
-
iconI18n,
|
|
27
|
-
projectInfo.discordInvite && (React.createElement(LinkIcon, { className: "decolorize-6", icon: iconDiscord, href: projectInfo.discordInvite })),
|
|
28
|
-
React.createElement(LinkIcon, { className: "decolorize-4", icon: iconTwitter, href: projectInfo.twitterProfile }),
|
|
29
|
-
React.createElement(LinkIcon, { className: "decolorize-4", icon: iconGithub, href: projectInfo.githubRepository }),
|
|
30
|
-
React.createElement(ChangelogButton, null)));
|
|
31
|
-
}
|
|
32
|
-
function ChangelogButton() {
|
|
33
|
-
var pageContext = usePageContext();
|
|
34
|
-
var projectInfo = pageContext.config.projectInfo;
|
|
35
|
-
return (React.createElement("a", { href: "".concat(projectInfo.githubRepository, "/blob/main/CHANGELOG.md"), className: "colorize-on-hover", style: {
|
|
36
|
-
display: 'flex',
|
|
37
|
-
alignItems: 'center',
|
|
38
|
-
padding: '0 5px',
|
|
39
|
-
height: '100%',
|
|
40
|
-
} },
|
|
41
|
-
React.createElement("div", { className: "button", style: {
|
|
42
|
-
display: 'flex',
|
|
43
|
-
alignItems: 'center',
|
|
44
|
-
padding: '2px 10px',
|
|
45
|
-
fontSize: '0.97em',
|
|
46
|
-
} },
|
|
47
|
-
React.createElement("span", { id: "version-number", className: "decolorize-7" },
|
|
48
|
-
"v",
|
|
49
|
-
projectInfo.projectVersion),
|
|
50
|
-
React.createElement("img", { className: "decolorize-6", src: iconChangelog, height: 16, style: { marginLeft: 6 } }))));
|
|
51
|
-
}
|
|
52
|
-
function LinkIcon(_a) {
|
|
53
|
-
var className = _a.className, icon = _a.icon, href = _a.href, style = _a.style;
|
|
54
|
-
return (React.createElement(React.Fragment, null,
|
|
55
|
-
React.createElement("a", { className: "colorize-on-hover", href: href, style: { padding: 5, display: 'inline-flex', lineHeight: 0, height: '100%', alignItems: 'center' } },
|
|
56
|
-
React.createElement("img", { className: className, src: icon, height: "20", style: style }))));
|
|
57
|
-
}
|
package/dist/autoScrollNav.d.ts
DELETED
package/dist/autoScrollNav.js
DELETED
|
@@ -1,35 +0,0 @@
|
|
|
1
|
-
export { autoScrollNav };
|
|
2
|
-
export var autoScrollNav_SSR = "autoScrollNav();".concat(autoScrollNav.toString());
|
|
3
|
-
// - We cannot use TypeScript syntax because of autoScrollNav_SSR
|
|
4
|
-
// - We have to save & restore `document.documentElement.scrollTop` because scrollIntoView() scrolls the main view. (I don't know why).
|
|
5
|
-
// - Failed alternatives:
|
|
6
|
-
// - scrollIntoViewIfNeeded() (https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoViewIfNeeded) would work (it doesn't scroll the main view) but Firefox doesn't support it.
|
|
7
|
-
// - Doesn't work: the scrolling is off by hundreds of px (I guess because this function runs too early while the page is still rendering).
|
|
8
|
-
// ```js
|
|
9
|
-
// const offset = navLink.offsetTop - (window.innerHeight / 2)
|
|
10
|
-
// navigationContainerEl.scrollTop = offset
|
|
11
|
-
// ```
|
|
12
|
-
// - Doesn't work: scrollIntoView() still scrolls the main view
|
|
13
|
-
// ```js
|
|
14
|
-
// const overflowOriginal = document.documentElement.style.overflow
|
|
15
|
-
// document.documentElement.style.overflow = 'hidden'
|
|
16
|
-
// // ...
|
|
17
|
-
// document.documentElement.style.overflow = overflowOriginal
|
|
18
|
-
// ```
|
|
19
|
-
function autoScrollNav() {
|
|
20
|
-
var nav = document.querySelector('#nav-left .navigation-content');
|
|
21
|
-
if (!nav)
|
|
22
|
-
return;
|
|
23
|
-
var href = window.location.pathname;
|
|
24
|
-
var navLinks = Array.from(nav.querySelectorAll("a[href=\"".concat(href, "\"]")));
|
|
25
|
-
var navLink = navLinks[0];
|
|
26
|
-
if (!navLink)
|
|
27
|
-
return;
|
|
28
|
-
var scrollTopOriginal = document.documentElement.scrollTop;
|
|
29
|
-
navLink.scrollIntoView({
|
|
30
|
-
behavior: 'instant',
|
|
31
|
-
block: 'center',
|
|
32
|
-
inline: 'start',
|
|
33
|
-
});
|
|
34
|
-
document.documentElement.scrollTop = scrollTopOriginal;
|
|
35
|
-
}
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { RepoLink } from './RepoLink';
|
|
3
|
-
export { EditPageNote };
|
|
4
|
-
function EditPageNote(_a) {
|
|
5
|
-
var pageContext = _a.pageContext;
|
|
6
|
-
var text = (React.createElement(React.Fragment, null,
|
|
7
|
-
React.createElement("span", { style: { fontFamily: 'emoji' } }, "\u270D"),
|
|
8
|
-
" Edit this page"));
|
|
9
|
-
return (React.createElement("div", { style: { marginTop: 50 } },
|
|
10
|
-
React.createElement(RepoLink, { path: '/docs/pages' + pageContext.urlPathname + '/+Page.mdx', text: text, editMode: true })));
|
|
11
|
-
}
|
|
@@ -1,25 +0,0 @@
|
|
|
1
|
-
var __assign = (this && this.__assign) || function () {
|
|
2
|
-
__assign = Object.assign || function(t) {
|
|
3
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
4
|
-
s = arguments[i];
|
|
5
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
6
|
-
t[p] = s[p];
|
|
7
|
-
}
|
|
8
|
-
return t;
|
|
9
|
-
};
|
|
10
|
-
return __assign.apply(this, arguments);
|
|
11
|
-
};
|
|
12
|
-
export { SearchLink };
|
|
13
|
-
import React from 'react';
|
|
14
|
-
import { openDocsearchModal } from './toggleDocsearchModal';
|
|
15
|
-
function SearchLink(props) {
|
|
16
|
-
return (React.createElement("a", __assign({}, props, { style: __assign({ height: '100%', display: 'flex', alignItems: 'center', cursor: 'pointer' }, props.style), className: ['colorize-on-hover', props.className].filter(Boolean).join(' '), onClick: function (ev) {
|
|
17
|
-
ev.preventDefault();
|
|
18
|
-
openDocsearchModal();
|
|
19
|
-
}, "aria-label": 'Ctrl\xa0+\xa0K' }),
|
|
20
|
-
React.createElement(SearchIcon, null),
|
|
21
|
-
"Search"));
|
|
22
|
-
}
|
|
23
|
-
function SearchIcon() {
|
|
24
|
-
return (React.createElement("span", { style: { marginRight: 'var(--icon-text-padding)', fontSize: '1.1em' }, className: "decolorize-7 desktop-fade" }, "\uD83D\uDD0D"));
|
|
25
|
-
}
|
|
@@ -1,26 +0,0 @@
|
|
|
1
|
-
export { closeDocsearchModal };
|
|
2
|
-
export { openDocsearchModal };
|
|
3
|
-
import { assert } from '../utils/client';
|
|
4
|
-
function closeDocsearchModal() {
|
|
5
|
-
if (isClosed())
|
|
6
|
-
return;
|
|
7
|
-
toggle();
|
|
8
|
-
}
|
|
9
|
-
function openDocsearchModal() {
|
|
10
|
-
if (!isClosed())
|
|
11
|
-
return;
|
|
12
|
-
toggle();
|
|
13
|
-
}
|
|
14
|
-
// There doesn't seem be an official API to open/close the DocSearch modal:
|
|
15
|
-
// - https://github.com/algolia/docsearch/issues/2321
|
|
16
|
-
// - https://github.com/algolia/docsearch/blob/90f3c6aabbc324fe49e9a1dfe0906fcd4d90f27b/packages/docsearch-react/src/DocSearch.tsx#L52
|
|
17
|
-
function toggle() {
|
|
18
|
-
// Trigger https://github.com/algolia/docsearch/blob/90f3c6aabbc324fe49e9a1dfe0906fcd4d90f27b/packages/docsearch-react/src/useDocSearchKeyboardEvents.ts#L71
|
|
19
|
-
window.dispatchEvent(new KeyboardEvent('keydown', { key: 'k', ctrlKey: true }));
|
|
20
|
-
}
|
|
21
|
-
function isClosed() {
|
|
22
|
-
var test1 = !document.body.classList.contains('DocSearch--active');
|
|
23
|
-
var test2 = document.getElementsByClassName('DocSearch-Modal').length === 0;
|
|
24
|
-
assert(test1 === test2);
|
|
25
|
-
return test1 || test2;
|
|
26
|
-
}
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
export { Collapsible };
|
|
2
|
-
import React from 'react';
|
|
3
|
-
import './Collapsible.css';
|
|
4
|
-
declare function Collapsible({ head, children, disabled, collapsedInit, marginBottomOnExpand, }: {
|
|
5
|
-
head: (onClick: () => void) => React.ReactNode;
|
|
6
|
-
children: React.ReactNode;
|
|
7
|
-
disabled: boolean;
|
|
8
|
-
collapsedInit: boolean;
|
|
9
|
-
marginBottomOnExpand?: number;
|
|
10
|
-
}): React.JSX.Element;
|
|
@@ -1,35 +0,0 @@
|
|
|
1
|
-
export { Collapsible };
|
|
2
|
-
import React, { useRef, useState } from 'react';
|
|
3
|
-
import { cls } from '../utils/cls';
|
|
4
|
-
import './Collapsible.css';
|
|
5
|
-
function Collapsible(_a) {
|
|
6
|
-
var head = _a.head, children = _a.children, _b = _a.disabled, disabled = _b === void 0 ? false : _b, collapsedInit = _a.collapsedInit, marginBottomOnExpand = _a.marginBottomOnExpand;
|
|
7
|
-
var _c = useState(collapsedInit), collapsed = _c[0], setCollapsed = _c[1];
|
|
8
|
-
var _d = useState(false), isAnimating = _d[0], setIsAnimating = _d[1];
|
|
9
|
-
var contentRef = useRef(null);
|
|
10
|
-
var onClick = function () {
|
|
11
|
-
if (!disabled) {
|
|
12
|
-
setIsAnimating(true);
|
|
13
|
-
if (!collapsed) {
|
|
14
|
-
// If expanding, set height to current scroll height before animation
|
|
15
|
-
contentRef.current.style.height = "".concat(contentRef.current.scrollHeight, "px");
|
|
16
|
-
// Force a reflow
|
|
17
|
-
contentRef.current.offsetHeight;
|
|
18
|
-
}
|
|
19
|
-
setCollapsed(function (prev) { return !prev; });
|
|
20
|
-
}
|
|
21
|
-
};
|
|
22
|
-
var onTransitionEnd = function () {
|
|
23
|
-
setIsAnimating(false);
|
|
24
|
-
};
|
|
25
|
-
var showContent = disabled ? true : !collapsed;
|
|
26
|
-
return (React.createElement("div", { className: cls(['collapsible', !disabled && (showContent ? 'collapsible-expanded' : 'collapsible-collapsed')]) },
|
|
27
|
-
head(onClick),
|
|
28
|
-
React.createElement("div", { ref: contentRef, onTransitionEnd: onTransitionEnd, style: {
|
|
29
|
-
height: !showContent ? 0 : isAnimating ? contentRef.current.scrollHeight : 'auto',
|
|
30
|
-
overflow: 'hidden',
|
|
31
|
-
transition: 'none 0.3s ease',
|
|
32
|
-
transitionProperty: 'height, margin-bottom',
|
|
33
|
-
marginBottom: (showContent && marginBottomOnExpand) || undefined,
|
|
34
|
-
}, "aria-expanded": showContent }, children)));
|
|
35
|
-
}
|
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
export { NavigationContent };
|
|
2
|
-
export type { NavItem };
|
|
3
|
-
import React from 'react';
|
|
4
|
-
import './Navigation.css';
|
|
5
|
-
import '@docsearch/css';
|
|
6
|
-
import '../global.d.ts';
|
|
7
|
-
type NavItem = {
|
|
8
|
-
level: number;
|
|
9
|
-
url?: string | null;
|
|
10
|
-
color?: string;
|
|
11
|
-
title: string;
|
|
12
|
-
titleInNav: string;
|
|
13
|
-
menuModalFullWidth?: true;
|
|
14
|
-
isColumnEntry?: ColumnMap;
|
|
15
|
-
};
|
|
16
|
-
declare function NavigationContent(props: {
|
|
17
|
-
navItems: NavItem[];
|
|
18
|
-
showOnlyRelevant?: true;
|
|
19
|
-
columnLayout?: true;
|
|
20
|
-
}): React.JSX.Element;
|
|
21
|
-
type ColumnMap = Record<number, number>;
|
|
@@ -1,255 +0,0 @@
|
|
|
1
|
-
var __assign = (this && this.__assign) || function () {
|
|
2
|
-
__assign = Object.assign || function(t) {
|
|
3
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
4
|
-
s = arguments[i];
|
|
5
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
6
|
-
t[p] = s[p];
|
|
7
|
-
}
|
|
8
|
-
return t;
|
|
9
|
-
};
|
|
10
|
-
return __assign.apply(this, arguments);
|
|
11
|
-
};
|
|
12
|
-
// TODO/refactor: rename file and/or component
|
|
13
|
-
export { NavigationContent };
|
|
14
|
-
import React, { useEffect, useState } from 'react';
|
|
15
|
-
import { assert, assertWarning, jsxToTextContent } from '../utils/server';
|
|
16
|
-
import './Navigation.css';
|
|
17
|
-
import { parseTitle } from '../parseTitle';
|
|
18
|
-
import { usePageContext } from '../renderer/usePageContext';
|
|
19
|
-
import '@docsearch/css';
|
|
20
|
-
import '../global.d.ts';
|
|
21
|
-
import { getViewportWidth } from '../utils/getViewportWidth';
|
|
22
|
-
import { navLeftWidthMax, navLeftWidthMin } from '../Layout';
|
|
23
|
-
import { throttle } from '../utils/throttle';
|
|
24
|
-
import { Collapsible } from './Collapsible';
|
|
25
|
-
function NavigationContent(props) {
|
|
26
|
-
var pageContext = usePageContext();
|
|
27
|
-
var navItemsWithComputed = getNavItemsWithComputed(props.navItems, pageContext.urlPathname);
|
|
28
|
-
var navContent;
|
|
29
|
-
if (!props.columnLayout) {
|
|
30
|
-
var navItemsRelevant = navItemsWithComputed;
|
|
31
|
-
if (props.showOnlyRelevant)
|
|
32
|
-
navItemsRelevant = navItemsRelevant.filter(function (navItemGroup) { return navItemGroup.isRelevant; });
|
|
33
|
-
navContent = navItemsRelevant.map(function (navItem, i) { return React.createElement(NavItemComponent, { navItem: navItem, key: i }); });
|
|
34
|
-
}
|
|
35
|
-
else {
|
|
36
|
-
assert(!props.showOnlyRelevant);
|
|
37
|
-
navContent = React.createElement(NavigationWithColumnLayout, { navItemsWithComputed: navItemsWithComputed });
|
|
38
|
-
}
|
|
39
|
-
return (React.createElement("div", { className: "navigation-content", style: { marginTop: 10 } }, navContent));
|
|
40
|
-
}
|
|
41
|
-
function NavigationWithColumnLayout(props) {
|
|
42
|
-
var _a = useState(), viewportWidth = _a[0], setViewportWidth = _a[1];
|
|
43
|
-
var updateviewportwidth = function () { return setViewportWidth(getViewportWidth()); };
|
|
44
|
-
useEffect(function () {
|
|
45
|
-
updateviewportwidth();
|
|
46
|
-
window.addEventListener('resize', throttle(updateviewportwidth, 300), { passive: true });
|
|
47
|
-
});
|
|
48
|
-
var navItemsByColumnLayouts = getNavItemsByColumnLayouts(props.navItemsWithComputed, viewportWidth);
|
|
49
|
-
return (React.createElement(React.Fragment, null, navItemsByColumnLayouts.map(function (columnLayout, i) { return (React.createElement("div", { key: i }, columnLayout.isFullWidthCategory ? (React.createElement("div", { style: { marginTop: 0 } },
|
|
50
|
-
React.createElement(ColumnsWrapper, { numberOfColumns: columnLayout.columns.length },
|
|
51
|
-
React.createElement(Collapsible, { head: function (onClick) { return React.createElement(NavItemComponent, { navItem: columnLayout.navItemLevel1, onClick: onClick }); }, disabled: columnLayout.columns.length > 1, collapsedInit: !columnLayout.navItemLevel1.isRelevant, marginBottomOnExpand: 10 },
|
|
52
|
-
React.createElement(ColumnsLayout, { className: "collapsible" },
|
|
53
|
-
columnLayout.columns.map(function (column, j) { return (React.createElement(Column, { key: j }, column.navItems.map(function (navItem, k) { return (React.createElement(NavItemComponent, { key: k, navItem: navItem })); }))); }),
|
|
54
|
-
React.createElement(CategoryBorder, { navItemLevel1: columnLayout.navItemLevel1 })))))) : (React.createElement(ColumnsWrapper, { numberOfColumns: columnLayout.columns.length },
|
|
55
|
-
React.createElement(ColumnsLayout, null, columnLayout.columns.map(function (column, j) { return (React.createElement(Column, { key: j }, column.categories.map(function (category, k) { return (React.createElement("div", { key: k, style: { marginBottom: 0 } },
|
|
56
|
-
React.createElement(Collapsible, { head: function (onClick) { return React.createElement(NavItemComponent, { navItem: category.navItemLevel1, onClick: onClick }); }, disabled: columnLayout.columns.length > 1, collapsedInit: !category.navItemLevel1.isRelevant, marginBottomOnExpand: 40 },
|
|
57
|
-
category.navItems.map(function (navItem, l) { return (React.createElement(NavItemComponent, { key: l, navItem: navItem })); }),
|
|
58
|
-
React.createElement(CategoryBorder, { navItemLevel1: category.navItemLevel1 })))); }))); })))))); })));
|
|
59
|
-
}
|
|
60
|
-
function Column(_a) {
|
|
61
|
-
var children = _a.children;
|
|
62
|
-
return (React.createElement("div", { style: {
|
|
63
|
-
flexGrow: 1,
|
|
64
|
-
maxWidth: navLeftWidthMax,
|
|
65
|
-
display: 'flex',
|
|
66
|
-
flexDirection: 'column',
|
|
67
|
-
} }, children));
|
|
68
|
-
}
|
|
69
|
-
function ColumnsWrapper(_a) {
|
|
70
|
-
var children = _a.children, numberOfColumns = _a.numberOfColumns;
|
|
71
|
-
return (React.createElement("div", { style: {
|
|
72
|
-
width: numberOfColumns * (navLeftWidthMax + 20),
|
|
73
|
-
maxWidth: '100%',
|
|
74
|
-
margin: 'auto',
|
|
75
|
-
} }, children));
|
|
76
|
-
}
|
|
77
|
-
function ColumnsLayout(_a) {
|
|
78
|
-
var children = _a.children, className = _a.className;
|
|
79
|
-
return (React.createElement("div", { className: className, style: {
|
|
80
|
-
display: 'flex',
|
|
81
|
-
justifyContent: 'space-between',
|
|
82
|
-
} }, children));
|
|
83
|
-
}
|
|
84
|
-
function CategoryBorder(_a) {
|
|
85
|
-
var navItemLevel1 = _a.navItemLevel1;
|
|
86
|
-
assert(navItemLevel1.level === 1);
|
|
87
|
-
return React.createElement("div", { className: "category-border", style: { background: navItemLevel1.color } });
|
|
88
|
-
}
|
|
89
|
-
function NavItemComponent(_a) {
|
|
90
|
-
var _b;
|
|
91
|
-
var _c;
|
|
92
|
-
var navItem = _a.navItem, onClick = _a.onClick;
|
|
93
|
-
assert([1, 2, 3, 4].includes(navItem.level), navItem);
|
|
94
|
-
var titleJsx = parseTitle(navItem.title);
|
|
95
|
-
var titleInNavJsx = parseTitle(navItem.titleInNav);
|
|
96
|
-
if (navItem.level === 1 || navItem.level === 4) {
|
|
97
|
-
assert(navItem.url === undefined);
|
|
98
|
-
}
|
|
99
|
-
else {
|
|
100
|
-
var sectionTitle = jsxToTextContent(titleJsx);
|
|
101
|
-
assertWarning(navItem.url, [
|
|
102
|
-
"".concat(jsxToTextContent(titleInNavJsx), " is missing a URL hash."),
|
|
103
|
-
"Add a URL hash with: `## ".concat(sectionTitle, "{#some-hash}`."),
|
|
104
|
-
/* TODO/eventually: not implemented yet.
|
|
105
|
-
`Use \`<h2 id="url-hash">${sectionTitle}</h2>\` instead of \`## ${sectionTitle}\`.`,
|
|
106
|
-
*/
|
|
107
|
-
].join(' '));
|
|
108
|
-
}
|
|
109
|
-
var children = titleInNavJsx;
|
|
110
|
-
if (navItem.level === 1) {
|
|
111
|
-
children = (React.createElement(React.Fragment, null,
|
|
112
|
-
children,
|
|
113
|
-
React.createElement(Chevron, { className: "collapsible-icon", height: 9 })));
|
|
114
|
-
}
|
|
115
|
-
var props = {
|
|
116
|
-
href: (_c = navItem.url) !== null && _c !== void 0 ? _c : undefined,
|
|
117
|
-
children: children,
|
|
118
|
-
onClick: onClick,
|
|
119
|
-
className: [
|
|
120
|
-
'nav-item',
|
|
121
|
-
'nav-item-level-' + navItem.level,
|
|
122
|
-
navItem.url && navItem.isActive && ' is-active',
|
|
123
|
-
navItem.isFirstOfItsKind && 'nav-item-first-of-its-kind',
|
|
124
|
-
navItem.isLastOfItsKind && 'nav-item-last-of-its-kind',
|
|
125
|
-
]
|
|
126
|
-
.filter(Boolean)
|
|
127
|
-
.join(' '),
|
|
128
|
-
};
|
|
129
|
-
if (navItem.level === 1) {
|
|
130
|
-
props.style = (_b = {},
|
|
131
|
-
_b['--category-color'] = navItem.color,
|
|
132
|
-
_b);
|
|
133
|
-
}
|
|
134
|
-
if (navItem.level === 2 || navItem.level === 3) {
|
|
135
|
-
return React.createElement("a", __assign({}, props));
|
|
136
|
-
}
|
|
137
|
-
else {
|
|
138
|
-
return React.createElement("span", __assign({}, props));
|
|
139
|
-
}
|
|
140
|
-
}
|
|
141
|
-
function getNavItemsByColumnLayouts(navItems, viewportWidth) {
|
|
142
|
-
if (viewportWidth === void 0) { viewportWidth = 0; }
|
|
143
|
-
var navItemsByColumnEntries = getNavItemsByColumnEntries(navItems);
|
|
144
|
-
var numberOfColumnsMax = Math.floor(viewportWidth / navLeftWidthMin) || 1;
|
|
145
|
-
var navItemsByColumnLayouts = navItemsByColumnEntries.map(function (_a) {
|
|
146
|
-
var columnEntries = _a.columnEntries, isFullWidthCategory = _a.isFullWidthCategory;
|
|
147
|
-
var numberOfColumns = Math.min(numberOfColumnsMax, columnEntries.length);
|
|
148
|
-
if (!isFullWidthCategory) {
|
|
149
|
-
var columns_1 = [];
|
|
150
|
-
columnEntries.forEach(function (columnEntry) {
|
|
151
|
-
var _a;
|
|
152
|
-
var idx = numberOfColumns === 1 ? 0 : columnEntry.columnMap[numberOfColumns];
|
|
153
|
-
assert(idx >= 0);
|
|
154
|
-
(_a = columns_1[idx]) !== null && _a !== void 0 ? _a : (columns_1[idx] = { categories: [] });
|
|
155
|
-
var navItemLevel1 = columnEntry.navItems[0];
|
|
156
|
-
var navItems = columnEntry.navItems.slice(1);
|
|
157
|
-
columns_1[idx].categories.push({ navItemLevel1: navItemLevel1, navItems: navItems });
|
|
158
|
-
});
|
|
159
|
-
var navItemsByColumnLayout = { columns: columns_1, isFullWidthCategory: isFullWidthCategory };
|
|
160
|
-
return navItemsByColumnLayout;
|
|
161
|
-
}
|
|
162
|
-
else {
|
|
163
|
-
var navItemLevel1_1;
|
|
164
|
-
var columns_2 = [];
|
|
165
|
-
columnEntries.forEach(function (columnEntry, i) {
|
|
166
|
-
var _a;
|
|
167
|
-
var _b;
|
|
168
|
-
var idx = numberOfColumns === 1 ? 0 : columnEntry.columnMap[numberOfColumns];
|
|
169
|
-
assert(idx >= 0);
|
|
170
|
-
(_b = columns_2[idx]) !== null && _b !== void 0 ? _b : (columns_2[idx] = { navItems: [] });
|
|
171
|
-
var navItems = columnEntry.navItems;
|
|
172
|
-
if (i === 0) {
|
|
173
|
-
navItemLevel1_1 = navItems[0];
|
|
174
|
-
navItems = navItems.slice(1);
|
|
175
|
-
}
|
|
176
|
-
(_a = columns_2[idx].navItems).push.apply(_a, navItems);
|
|
177
|
-
});
|
|
178
|
-
var navItemsByColumnLayout = {
|
|
179
|
-
columns: columns_2,
|
|
180
|
-
navItemLevel1: navItemLevel1_1,
|
|
181
|
-
isFullWidthCategory: isFullWidthCategory,
|
|
182
|
-
};
|
|
183
|
-
return navItemsByColumnLayout;
|
|
184
|
-
}
|
|
185
|
-
});
|
|
186
|
-
return navItemsByColumnLayouts;
|
|
187
|
-
}
|
|
188
|
-
function getNavItemsByColumnEntries(navItems) {
|
|
189
|
-
var navItemsByColumnEntries = [];
|
|
190
|
-
var columnEntries = [];
|
|
191
|
-
var columnEntry;
|
|
192
|
-
var isFullWidthCategory;
|
|
193
|
-
navItems.forEach(function (navItem) {
|
|
194
|
-
if (navItem.level === 1) {
|
|
195
|
-
var isFullWidthCategoryPrevious = isFullWidthCategory;
|
|
196
|
-
isFullWidthCategory = !!navItem.menuModalFullWidth;
|
|
197
|
-
if (isFullWidthCategoryPrevious !== undefined && isFullWidthCategoryPrevious !== isFullWidthCategory) {
|
|
198
|
-
navItemsByColumnEntries.push({ columnEntries: columnEntries, isFullWidthCategory: isFullWidthCategoryPrevious });
|
|
199
|
-
columnEntries = [];
|
|
200
|
-
}
|
|
201
|
-
}
|
|
202
|
-
assert(isFullWidthCategory !== undefined);
|
|
203
|
-
if (navItem.isColumnEntry) {
|
|
204
|
-
assert(navItem.level === 1 || navItem.level === 4);
|
|
205
|
-
columnEntry = { navItems: [navItem], columnMap: navItem.isColumnEntry };
|
|
206
|
-
columnEntries.push(columnEntry);
|
|
207
|
-
}
|
|
208
|
-
else {
|
|
209
|
-
assert(navItem.level !== 1);
|
|
210
|
-
columnEntry.navItems.push(navItem);
|
|
211
|
-
}
|
|
212
|
-
});
|
|
213
|
-
assert(isFullWidthCategory !== undefined);
|
|
214
|
-
navItemsByColumnEntries.push({ columnEntries: columnEntries, isFullWidthCategory: isFullWidthCategory });
|
|
215
|
-
return navItemsByColumnEntries;
|
|
216
|
-
}
|
|
217
|
-
function getNavItemsWithComputed(navItems, currentUrl) {
|
|
218
|
-
var navItemIdx;
|
|
219
|
-
var navItemsWithComputed = navItems.map(function (navItem, i) {
|
|
220
|
-
assert([1, 2, 3, 4].includes(navItem.level), navItem);
|
|
221
|
-
var navItemPrevious = navItems[i - 1];
|
|
222
|
-
var navItemNext = navItems[i + 1];
|
|
223
|
-
var isActive = false;
|
|
224
|
-
if (navItem.url === currentUrl) {
|
|
225
|
-
assert(navItem.level === 2, { currentUrl: currentUrl });
|
|
226
|
-
assert(navItemIdx === undefined);
|
|
227
|
-
navItemIdx = i;
|
|
228
|
-
isActive = true;
|
|
229
|
-
}
|
|
230
|
-
var isFirstOfItsKind = navItem.level !== (navItemPrevious === null || navItemPrevious === void 0 ? void 0 : navItemPrevious.level);
|
|
231
|
-
var isLastOfItsKind = navItem.level !== (navItemNext === null || navItemNext === void 0 ? void 0 : navItemNext.level);
|
|
232
|
-
var navItemComputed = __assign(__assign({}, navItem), { isActive: isActive, isRelevant: false, isFirstOfItsKind: isFirstOfItsKind, isLastOfItsKind: isLastOfItsKind });
|
|
233
|
-
return navItemComputed;
|
|
234
|
-
});
|
|
235
|
-
// Set `isRelevant`
|
|
236
|
-
if (navItemIdx !== undefined) {
|
|
237
|
-
for (var i = navItemIdx; i >= 0; i--) {
|
|
238
|
-
var navItem = navItemsWithComputed[i];
|
|
239
|
-
navItem.isRelevant = true;
|
|
240
|
-
if (navItem.level === 1)
|
|
241
|
-
break;
|
|
242
|
-
}
|
|
243
|
-
for (var i = navItemIdx; i < navItemsWithComputed.length; i++) {
|
|
244
|
-
var navItem = navItemsWithComputed[i];
|
|
245
|
-
if (navItem.level === 1)
|
|
246
|
-
break;
|
|
247
|
-
navItem.isRelevant = true;
|
|
248
|
-
}
|
|
249
|
-
}
|
|
250
|
-
return navItemsWithComputed;
|
|
251
|
-
}
|
|
252
|
-
function Chevron(props) {
|
|
253
|
-
return (React.createElement("svg", __assign({ viewBox: "0 0 512 292.52", xmlns: "http://www.w3.org/2000/svg" }, props),
|
|
254
|
-
React.createElement("path", { fill: "#aaa", d: "M10.725 82.42L230.125 261.82c6.8 6.8 16.2 10.7 25.9 10.7s19.1-3.9 25.9-10.7l219.4-179.4c14.3-14.3 14.3-37.4 0-51.7s-37.4-14.3-51.7 0l-193.6 153.6-193.6-153.6c-14.3-14.3-37.4-14.3-51.7 0s-14.3 37.5 0 51.7z" })));
|
|
255
|
-
}
|