@brillout/docpress 0.8.10 → 0.8.12

package/Layout.tsx

@@ -1,5 +1,7 @@
 export { Layout }
 export { containerQueryMobile }
+export { navWidthMin }
+export { navWidthMax }
 
 import React from 'react'
 import { NavigationContent } from './navigation/Navigation'
@@ -297,8 +299,8 @@ function NavigationHeader({
   paddingLeft,
 }: { headerHeight: number; iconSize: number; paddingLeft: number; style?: React.CSSProperties }) {
   const pageContext = usePageContext()
-  /*
-  const {projectName} = pageContext.meta
+  //*
+  const { projectName } = pageContext.meta
   /*/
   const projectName = 'Vike'
   //*/

package/MenuModal.tsx

@@ -9,6 +9,7 @@ import { css } from './utils/css'
 import { containerQueryMobile } from './Layout'
 import { Links } from './Links'
 import { isBrowser } from './utils/isBrowser'
+import { getViewportWidth } from './utils/getViewportWidth'
 
 initCloseListeners()
 
@@ -129,10 +130,6 @@ function toggleMenuModal() {
     autoScroll()
   }
 }
-function getViewportWidth(): number {
-  // `window.innerWidth` inlcudes scrollbar width: https://developer.mozilla.org/en-US/docs/Web/API/Window/innerWidth#usage_notes
-  return document.documentElement.clientWidth
-}
 function autoScroll() {
   const nav = document.querySelector('#menu-modal .navigation-content')!
   const href = window.location.pathname

package/config/resolveHeadingsData.ts

@@ -14,7 +14,7 @@ import type { LinkData } from '../components'
 import type { Exports, PageContextOriginal } from './resolvePageContext'
 import pc from '@brillout/picocolors'
 import { parseTitle } from '../parseTitle'
-import { determineColumnLayoutEntries } from '../renderer/getStyleColumnLayout'
+import { determineColumnEntries } from '../renderer/determineColumnEntries'
 assert(!isBrowser())
 
 type PageSectionResolved = {
@@ -56,14 +56,12 @@ function resolveHeadingsData(pageContext: PageContextOriginal) {
   // TODO/refactor: remove navItems
   let navItems: NavItem[]
   let navItemsAll: NavItemAll[]
-  let columnLayouts: number[][]
   {
     const navItemsPageSections = pageSectionsResolved
       .filter((pageSection) => pageSection.pageSectionLevel === 2)
       .map(pageSectionToNavItem)
     navItemsAll = headingsResolved.map(headingToNavItem)
-    const res = determineColumnLayoutEntries(navItemsAll)
-    columnLayouts = res.columnLayouts
+    determineColumnEntries(navItemsAll)
     if (isDetachedPage) {
       navItems = [headingToNavItem(activeHeading), ...navItemsPageSections]
     } else {
@@ -85,8 +83,6 @@ function resolveHeadingsData(pageContext: PageContextOriginal) {
     pageTitle,
     documentTitle,
     // TODO: don't pass to client-side
-    columnLayouts,
-    // TODO: don't pass to client-side
     activeCategory,
   }
   return pageContextAddendum

package/dist/Layout.d.ts

@@ -0,0 +1,11 @@
+export { Layout };
+export { containerQueryMobile };
+export { navWidthMin };
+export { navWidthMax };
+import React from 'react';
+declare const navWidthMax = 370;
+declare const navWidthMin = 300;
+declare const containerQueryMobile: number;
+declare function Layout({ children }: {
+    children: React.ReactNode;
+}): React.JSX.Element;

package/dist/Layout.js

@@ -0,0 +1,235 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+export { Layout };
+export { containerQueryMobile };
+export { navWidthMin };
+export { navWidthMax };
+import React from 'react';
+import { NavigationContent } from './navigation/Navigation';
+import { EditPageNote } from './components/EditPageNote';
+import { parseTitle } from './parseTitle';
+import { usePageContext, usePageContext2 } from './renderer/usePageContext';
+import { Links } from './Links';
+import { toggleMenuModal } from './MenuModal';
+import { MenuModal } from './MenuModal';
+import { autoScrollNav_SSR } from './autoScrollNav';
+import { SearchLink } from './docsearch/SearchLink';
+import { navigate } from 'vike/client/router';
+import { css } from './utils/css';
+import { PassThrough } from './utils/PassTrough';
+var mainViewWidthMax = 800;
+var mainViewPadding = 20;
+var navWidthMax = 370;
+var navWidthMin = 300;
+var navWidth = {
+    minWidth: navWidthMin,
+    maxWidth: navWidthMax,
+    width: '100%',
+};
+var blockMargin = 3;
+var mainViewMax = mainViewWidthMax + mainViewPadding * 2;
+var containerQuerySpacing = mainViewMax + navWidthMax + blockMargin;
+var containerQueryMobile = mainViewMax + navWidthMin;
+// Avoid whitespace at the bottom of pages with almost no content
+var whitespaceBuster1 = {
+    minHeight: '100vh',
+    display: 'flex',
+    flexDirection: 'column',
+};
+var whitespaceBuster2 = {
+    flexGrow: 1,
+};
+function Layout(_a) {
+    var _b;
+    var children = _a.children;
+    var pageContext = usePageContext();
+    var isLandingPage = pageContext.isLandingPage;
+    var content;
+    if (isLandingPage) {
+        content = React.createElement(LayoutLandingPage, null, children);
+    }
+    else {
+        content = React.createElement(LayoutDocsPage, null, children);
+    }
+    return (React.createElement("div", { style: (_b = {},
+            _b['--bg-color'] = '#f5f5f7',
+            _b['--block-margin'] = "".concat(blockMargin, "px"),
+            _b['--icon-text-padding'] = '8px',
+            _b) },
+        React.createElement(MenuModal, null),
+        React.createElement("div", { className: isLandingPage ? '' : 'doc-page', style: __assign({ 
+                // We don't add `container` to `body` nor `html` beacuse in Firefox it breaks the `position: fixed` of <MenuModal>
+                // https://stackoverflow.com/questions/74601420/css-container-inline-size-and-fixed-child
+                containerType: 'inline-size' }, whitespaceBuster1) }, content)));
+}
+function LayoutDocsPage(_a) {
+    var children = _a.children;
+    var pageContext = usePageContext();
+    var hideNavLeftAlways = pageContext.navItems.length <= 1;
+    return (React.createElement(React.Fragment, null,
+        React.createElement("style", null, getStyle()),
+        React.createElement(NavMobile, null),
+        React.createElement("div", { style: __assign({ display: 'flex' }, whitespaceBuster2) },
+            React.createElement(NavLeft, null),
+            React.createElement("div", { className: "low-prio-grow", style: { width: 0, maxWidth: 50, background: 'var(--bg-color)' } }),
+            React.createElement(PageContent, null, children))));
+    function getStyle() {
+        var style = css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n@container(min-width: ", "px) {\n  .low-prio-grow {\n    flex-grow: 1;\n  }\n  #navigation-container {\n    width: ", "px !important;\n  }\n}"], ["\n@container(min-width: ", "px) {\n  .low-prio-grow {\n    flex-grow: 1;\n  }\n  #navigation-container {\n    width: ", "px !important;\n  }\n}"])), containerQuerySpacing, navWidthMax);
+        var navLeftHide = css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n#nav-left {\n  display: none;\n}\n.page-wrapper {\n  --main-view-padding: 10px !important;\n  flex-grow: 1;\n  align-items: center;\n}\n.page-content {\n  margin: auto;\n}\n"], ["\n#nav-left {\n  display: none;\n}\n.page-wrapper {\n  --main-view-padding: 10px !important;\n  flex-grow: 1;\n  align-items: center;\n}\n.page-content {\n  margin: auto;\n}\n"])));
+        if (!hideNavLeftAlways) {
+            navLeftHide = css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n@container(max-width: ", "px) {\n  ", "\n}\n@container(min-width: ", "px) {\n  #nav-mobile {\n    display: none !important;\n  }\n}\n"], ["\n@container(max-width: ", "px) {\n  ", "\n}\n@container(min-width: ", "px) {\n  #nav-mobile {\n    display: none !important;\n  }\n}\n"])), containerQueryMobile - 1, navLeftHide, containerQueryMobile);
+        }
+        style += navLeftHide;
+        return style;
+    }
+}
+function LayoutLandingPage(_a) {
+    var children = _a.children;
+    var mobile = 800;
+    return (React.createElement(React.Fragment, null,
+        React.createElement("style", null, getStyle()),
+        React.createElement(NavTop, null),
+        React.createElement(NavMobile, null),
+        React.createElement(PageContent, null, children)));
+    function getStyle() {
+        return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n@container(min-width: ", "px) {\n  #nav-mobile {\n    display: none !important;\n  }\n}\n@container(max-width: ", "px) {\n  #top-navigation {\n    display: none !important;\n  }\n"], ["\n@container(min-width: ", "px) {\n  #nav-mobile {\n    display: none !important;\n  }\n}\n@container(max-width: ", "px) {\n  #top-navigation {\n    display: none !important;\n  }\n"])), mobile, mobile - 1);
+    }
+}
+function PageContent(_a) {
+    var _b;
+    var children = _a.children;
+    var pageContext = usePageContext();
+    var isLandingPage = pageContext.isLandingPage, pageTitle = pageContext.pageTitle;
+    var pageTitleParsed = pageTitle && parseTitle(pageTitle);
+    var globalNote = pageContext.config.globalNote;
+    var ifDocPage = function (style) { return (isLandingPage ? {} : style); };
+    return (React.createElement("div", { className: "page-wrapper low-prio-grow", style: __assign({ 
+            // Avoid overflow, see https://stackoverflow.com/questions/36230944/prevent-flex-items-from-overflowing-a-container/66689926#66689926
+            minWidth: 0 }, ifDocPage({
+            backgroundColor: 'var(--bg-color)',
+            paddingBottom: 50,
+        })) },
+        React.createElement("div", { className: "page-content", style: __assign((_b = {}, _b['--main-view-padding'] = "".concat(mainViewPadding, "px"), _b), ifDocPage({
+                width: "calc(".concat(mainViewWidthMax, "px + 2 * var(--main-view-padding))"),
+                maxWidth: '100%',
+                padding: '20px var(--main-view-padding)',
+            })) },
+            globalNote,
+            pageTitleParsed && React.createElement("h1", { id: "".concat(pageContext.urlPathname.replace('/', '')) }, pageTitleParsed),
+            children,
+            !isLandingPage && React.createElement(EditPageNote, { pageContext: pageContext }))));
+}
+function NavMobile() {
+    return (React.createElement("div", { id: "nav-mobile" },
+        React.createElement(NavigationHeader, { headerHeight: 70, iconSize: 40, paddingLeft: 12, style: { justifyContent: 'center' } })));
+}
+function NavTop() {
+    var _a;
+    var pageContext2 = usePageContext2();
+    var paddingSize = 35;
+    var padding = "0 ".concat(paddingSize, "px");
+    var TopNavigation = pageContext2.config.TopNavigation || PassThrough;
+    return (React.createElement("div", { id: "top-navigation", className: "link-hover-animation", style: (_a = {
+                position: 'relative',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                textDecoration: 'none',
+                marginBottom: 'var(--block-margin)',
+                backgroundColor: 'var(--bg-color)'
+            },
+            _a['--padding-side'] = "".concat(paddingSize, "px"),
+            _a.fontSize = '1.06em',
+            _a.color = '#666',
+            _a) },
+        React.createElement("div", { style: { display: 'flex', alignItems: 'center', height: 70 } },
+            React.createElement(TopNavigation, null),
+            React.createElement(SearchLink, { style: { padding: padding } }),
+            React.createElement(MenuLink, { style: { padding: padding } }),
+            React.createElement(Links, { style: { display: 'inline-flex', padding: padding, marginLeft: -8 } }))));
+}
+function NavLeft() {
+    var pageContext = usePageContext();
+    var navItems = pageContext.navItems, navItemsAll = pageContext.navItemsAll, isDetachedPage = pageContext.isDetachedPage;
+    var headerHeight = 60;
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", { id: "nav-left", className: "link-hover-animation", style: {
+                flexGrow: 1,
+                borderRight: 'var(--block-margin) solid white',
+            } },
+            React.createElement("div", { style: {
+                    position: 'sticky',
+                    top: 0,
+                } },
+                React.createElement(NavigationHeader, { headerHeight: headerHeight, iconSize: 39, paddingLeft: 6 }),
+                React.createElement("div", { style: {
+                        backgroundColor: 'var(--bg-color)',
+                        display: 'flex',
+                        justifyContent: 'flex-end',
+                    } },
+                    React.createElement("div", { id: "navigation-container", style: __assign({ top: 0, height: "calc(100vh - ".concat(headerHeight, "px - var(--block-margin))"), overflowY: 'auto', overscrollBehavior: 'contain', paddingBottom: 40 }, navWidth) }, 
+                    // TODO/refactor: simplify?
+                    isDetachedPage ? (React.createElement(NavigationContent, { navItems: navItems })) : (React.createElement(NavigationContent, { navItems: navItemsAll, showOnlyRelevant: true })))))),
+        React.createElement("script", { dangerouslySetInnerHTML: { __html: autoScrollNav_SSR } })));
+}
+function NavigationHeader(_a) {
+    var _b;
+    var headerHeight = _a.headerHeight, iconSize = _a.iconSize, style = _a.style, paddingLeft = _a.paddingLeft;
+    var pageContext = usePageContext();
+    //*
+    var projectName = pageContext.meta.projectName;
+    /*/
+    const projectName = 'Vike'
+    //*/
+    var isProjectNameShort = projectName.length <= 4;
+    var childrenStyle = (_b = {
+            justifyContent: 'center',
+            fontSize: isProjectNameShort ? '4.8cqw' : '4.5cqw'
+        },
+        _b['--icon-text-padding'] = '1.8cqw',
+        _b);
+    var marginLeft = -10;
+    return (React.createElement("div", { style: __assign({ backgroundColor: 'var(--bg-color)', display: 'flex', justifyContent: 'flex-end', borderBottom: 'var(--block-margin) solid white' }, style) },
+        React.createElement("div", { style: __assign({ display: 'flex', height: headerHeight, containerType: 'inline-size' }, navWidth) },
+            React.createElement("a", { style: __assign(__assign({ display: 'flex', alignItems: 'center', color: 'inherit', textDecoration: 'none', height: '100%', paddingLeft: paddingLeft + marginLeft * -1, marginLeft: marginLeft }, childrenStyle), { justifyContent: 'flex-start', flexGrow: 0.5 }), href: "/" },
+                React.createElement("img", { src: pageContext.meta.faviconUrl, height: iconSize, width: iconSize, onContextMenu: function (ev) {
+                        if (!pageContext.config.pressKit)
+                            return; // no /press page
+                        if (window.location.pathname === '/press')
+                            return;
+                        ev.preventDefault();
+                        navigate('/press#logo');
+                    } }),
+                React.createElement("span", { style: {
+                        marginLeft: "calc(var(--icon-text-padding) + 2px)",
+                        fontSize: isProjectNameShort ? '1.65em' : '1.3em',
+                    } }, projectName)),
+            React.createElement(SearchLink, { style: __assign(__assign({}, childrenStyle), { flexGrow: 0.5 }) }),
+            React.createElement(MenuLink, { style: __assign(__assign({}, childrenStyle), { flexGrow: 1 }) }))));
+}
+function MenuLink(props) {
+    return (React.createElement("a", __assign({}, props, { style: __assign({ height: '100%', display: 'flex', alignItems: 'center', cursor: 'pointer' }, props.style), className: "colorize-on-hover", onClick: function (ev) {
+            ev.preventDefault();
+            toggleMenuModal();
+        }, "aria-label": 'Ctrl\xa0+\xa0M' }),
+        React.createElement(MenuIcon, null),
+        "Menu"));
+}
+function MenuIcon() {
+    return (React.createElement("svg", { style: { marginRight: 'calc(var(--icon-text-padding) + 2px)', lineHeight: 0, width: '1.3em' }, className: "decolorize-6", viewBox: "0 0 448 512" },
+        React.createElement("path", { fill: "currentColor", d: "M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z" })));
+}
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/dist/Links.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import '@docsearch/css';
+export { Links };
+declare function Links({ style }: {
+    style?: React.CSSProperties;
+}): React.JSX.Element;

package/dist/Links.js

@@ -0,0 +1,58 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import React from 'react';
+import iconGithub from './icons/github.svg';
+import iconTwitter from './icons/twitter.svg';
+import iconDiscord from './icons/discord.svg';
+import iconChangelog from './icons/changelog.svg';
+import iconLanguages from './icons/languages.svg';
+import { usePageContext } from './renderer/usePageContext';
+import '@docsearch/css';
+export { Links };
+function Links(_a) {
+    var style = _a.style;
+    var pageContext = usePageContext();
+    var _b = pageContext.config, projectInfo = _b.projectInfo, i18n = _b.i18n;
+    var iconI18n = !i18n ? null : (React.createElement(LinkIcon, { className: "decolorize-4", icon: iconLanguages, href: '/languages', style: { height: 21, position: 'relative', top: 0, left: 0 } }));
+    return (React.createElement("div", { style: __assign({ display: 'flex', alignItems: 'center', paddingTop: 0, justifyContent: 'left', height: '100%' }, style) },
+        iconI18n,
+        projectInfo.discordInvite && (React.createElement(LinkIcon, { className: "decolorize-6", icon: iconDiscord, href: projectInfo.discordInvite })),
+        React.createElement(LinkIcon, { className: "decolorize-4", icon: iconTwitter, href: projectInfo.twitterProfile }),
+        React.createElement(LinkIcon, { className: "decolorize-4", icon: iconGithub, href: projectInfo.githubRepository }),
+        React.createElement(ChangelogButton, null)));
+}
+function ChangelogButton() {
+    var pageContext = usePageContext();
+    var projectInfo = pageContext.config.projectInfo;
+    return (React.createElement("a", { href: "".concat(projectInfo.githubRepository, "/blob/main/CHANGELOG.md"), className: "colorize-on-hover", style: {
+            display: 'flex',
+            alignItems: 'center',
+            padding: 10,
+            height: '100%',
+        } },
+        React.createElement("div", { className: "button", style: {
+                display: 'flex',
+                alignItems: 'center',
+                padding: '2px 10px',
+                fontSize: '0.97em',
+            } },
+            React.createElement("span", { id: "version-number", className: "decolorize-7" },
+                "v",
+                projectInfo.projectVersion),
+            React.createElement("img", { className: "decolorize-6", src: iconChangelog, height: 16, style: { marginLeft: 6 } }))));
+}
+function LinkIcon(_a) {
+    var className = _a.className, icon = _a.icon, href = _a.href, style = _a.style;
+    return (React.createElement(React.Fragment, null,
+        React.createElement("a", { className: "colorize-on-hover", href: href, style: { padding: 5, display: 'inline-flex', lineHeight: 0, height: '100%', alignItems: 'center' } },
+            React.createElement("img", { className: className, src: icon, height: "20", style: style }))));
+}

package/dist/MenuModal.d.ts

@@ -0,0 +1,7 @@
+export { MenuModal };
+export { toggleMenuModal };
+export { closeMenuModal };
+import React from 'react';
+declare function MenuModal(): React.JSX.Element;
+declare function toggleMenuModal(): void;
+declare function closeMenuModal(): void;

package/dist/MenuModal.js

@@ -0,0 +1,123 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+export { MenuModal };
+export { toggleMenuModal };
+export { closeMenuModal };
+import React from 'react';
+import { usePageContext } from './renderer/usePageContext';
+import { NavigationContent } from './navigation/Navigation';
+import { css } from './utils/css';
+import { containerQueryMobile } from './Layout';
+import { Links } from './Links';
+import { isBrowser } from './utils/isBrowser';
+import { getViewportWidth } from './utils/getViewportWidth';
+initCloseListeners();
+function MenuModal() {
+    return (React.createElement(React.Fragment, null,
+        React.createElement("style", null, getStyle()),
+        React.createElement("div", { id: "menu-modal", className: "link-hover-animation", style: {
+                position: 'fixed',
+                width: '100%',
+                /* Do this once Firefox supports `dvh`: https://caniuse.com/?search=dvh
+                 * - Then also replace all `vh` values with `dvh` values.
+                 * - https://stackoverflow.com/questions/37112218/css3-100vh-not-constant-in-mobile-browser/72245072#72245072
+                height: '100dh',
+                /*/
+                height: '100vh',
+                maxHeight: '100dvh',
+                //*/
+                top: 0,
+                left: 0,
+                zIndex: 9999,
+                overflow: 'scroll',
+                background: 'var(--bg-color)',
+            } },
+            React.createElement("div", { style: {
+                    // Place <LinksBottom /> to the bottom
+                    display: 'flex',
+                    flexDirection: 'column',
+                    minHeight: '100dvh',
+                    justifyContent: 'space-between',
+                    // We don't set `container` to parent beacuse of a Chrome bug (showing a blank <MenuModal>)
+                    containerType: 'inline-size',
+                } },
+                React.createElement(Nav, null),
+                React.createElement(LinksBottom, null)),
+            React.createElement(CloseButton, null))));
+}
+function Nav() {
+    var pageContext = usePageContext();
+    var navItems = pageContext.navItemsAll;
+    return React.createElement(NavigationContent, { columnLayout: true, navItems: navItems });
+}
+function LinksBottom() {
+    return (React.createElement("div", { style: {
+            display: 'flex',
+            justifyContent: 'center',
+        } },
+        React.createElement(Links, { style: { height: 70 } })));
+}
+function getStyle() {
+    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\nhtml:not(.menu-modal-show) #menu-modal {\n  display: none;\n}\n// disable scroll of main view\nhtml.menu-modal-show {\n  overflow: hidden !important;\n}\n@container(min-width: ", "px) {\n  #menu-modal .nav-item-level-3 {\n    display: none;\n  }\n}\n"], ["\nhtml:not(.menu-modal-show) #menu-modal {\n  display: none;\n}\n// disable scroll of main view\nhtml.menu-modal-show {\n  overflow: hidden !important;\n}\n@container(min-width: ", "px) {\n  #menu-modal .nav-item-level-3 {\n    display: none;\n  }\n}\n"])), containerQueryMobile);
+}
+function CloseButton() {
+    return (React.createElement("div", { 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 },
+        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" },
+            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' } }),
+            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" }))));
+}
+function toggleMenuModal() {
+    document.documentElement.classList.toggle('menu-modal-show');
+    if (document.documentElement.classList.contains('menu-modal-show') && getViewportWidth() < containerQueryMobile) {
+        autoScroll();
+    }
+}
+function autoScroll() {
+    var nav = document.querySelector('#menu-modal .navigation-content');
+    var href = window.location.pathname;
+    var navLinks = Array.from(nav.querySelectorAll("a[href=\"".concat(href, "\"]")));
+    var navLink = navLinks[0];
+    if (!navLink)
+        return;
+    navLink.scrollIntoView({
+        behavior: 'instant',
+        block: 'center',
+        inline: 'start',
+    });
+}
+function closeMenuModal() {
+    document.documentElement.classList.remove('menu-modal-show');
+}
+function initCloseListeners() {
+    if (!isBrowser())
+        return;
+    document.addEventListener('click', onLinkClick);
+    // It's redundant (and onLinkClick() is enough), but just to be sure.
+    addEventListener('hashchange', closeMenuModal);
+}
+function onLinkClick(ev) {
+    if (ev.altKey || ev.ctrlKey || ev.metaKey || ev.shiftKey)
+        return;
+    var linkTag = findLinkTag(ev.target);
+    if (!linkTag)
+        return;
+    var href = linkTag.getAttribute('href');
+    if (!href)
+        return;
+    if (!href.startsWith('/') && !href.startsWith('#'))
+        return;
+    closeMenuModal();
+}
+function findLinkTag(target) {
+    while (target.tagName !== 'A') {
+        var parentNode = target.parentNode;
+        if (!parentNode) {
+            return null;
+        }
+        target = parentNode;
+    }
+    return target;
+}
+var templateObject_1;

package/dist/autoScrollNav.d.ts

@@ -0,0 +1,3 @@
+export { autoScrollNav };
+export declare const autoScrollNav_SSR: string;
+declare function autoScrollNav(): void;

package/dist/autoScrollNav.js

@@ -0,0 +1,35 @@
+export { autoScrollNav };
+export var autoScrollNav_SSR = "autoScrollNav();".concat(autoScrollNav.toString());
+// - We cannot use TypeScript syntax because of autoScrollNav_SSR
+// - We have to save & restore `document.documentElement.scrollTop` because scrollIntoView() scrolls the main view. (I don't know why).
+//   - Failed alternatives:
+//     - 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.
+//     - 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).
+//       ```js
+//       const offset = navLink.offsetTop - (window.innerHeight / 2)
+//       navigationContainerEl.scrollTop = offset
+//       ```
+//     - Doesn't work: scrollIntoView() still scrolls the main view
+//       ```js
+//       const overflowOriginal = document.documentElement.style.overflow
+//       document.documentElement.style.overflow = 'hidden'
+//       // ...
+//       document.documentElement.style.overflow = overflowOriginal
+//       ```
+function autoScrollNav() {
+    var nav = document.querySelector('#nav-left .navigation-content');
+    if (!nav)
+        return;
+    var href = window.location.pathname;
+    var navLinks = Array.from(nav.querySelectorAll("a[href=\"".concat(href, "\"]")));
+    var navLink = navLinks[0];
+    if (!navLink)
+        return;
+    var scrollTopOriginal = document.documentElement.scrollTop;
+    navLink.scrollIntoView({
+        behavior: 'instant',
+        block: 'center',
+        inline: 'start',
+    });
+    document.documentElement.scrollTop = scrollTopOriginal;
+}

package/dist/components/EditPageNote.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+export { EditPageNote };
+declare function EditPageNote({ pageContext }: {
+    pageContext: {
+        urlPathname: string;
+    };
+}): React.JSX.Element;

package/dist/components/EditPageNote.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import { RepoLink } from './RepoLink';
+export { EditPageNote };
+function EditPageNote(_a) {
+    var pageContext = _a.pageContext;
+    var text = (React.createElement(React.Fragment, null,
+        React.createElement("span", { style: { fontFamily: 'emoji' } }, "\u270D"),
+        " Edit this page"));
+    return (React.createElement("div", { style: { marginTop: 50 } },
+        React.createElement(RepoLink, { path: '/docs/pages' + pageContext.urlPathname + '/+Page.mdx', text: text, editMode: true })));
+}

package/dist/config/resolveHeadingsData.d.ts

@@ -10,6 +10,5 @@ declare function resolveHeadingsData(pageContext: PageContextOriginal): {
     isLandingPage: boolean;
     pageTitle: string | null;
     documentTitle: string;
-    columnLayouts: number[][];
     activeCategory: string;
 };

package/dist/config/resolveHeadingsData.js

@@ -23,7 +23,7 @@ import { assert, isBrowser, jsxToTextContent } from '../utils/server';
 import { getConfig } from './getConfig';
 import pc from '@brillout/picocolors';
 import { parseTitle } from '../parseTitle';
-import { determineColumnLayoutEntries } from '../renderer/getStyleColumnLayout';
+import { determineColumnEntries } from '../renderer/determineColumnEntries';
 assert(!isBrowser());
 function resolveHeadingsData(pageContext) {
     var config = getConfig();
@@ -41,14 +41,12 @@ function resolveHeadingsData(pageContext) {
     // TODO/refactor: remove navItems
     var navItems;
     var navItemsAll;
-    var columnLayouts;
     {
         var navItemsPageSections = pageSectionsResolved
             .filter(function (pageSection) { return pageSection.pageSectionLevel === 2; })
             .map(pageSectionToNavItem);
         navItemsAll = headingsResolved.map(headingToNavItem);
-        var res = determineColumnLayoutEntries(navItemsAll);
-        columnLayouts = res.columnLayouts;
+        determineColumnEntries(navItemsAll);
         if (isDetachedPage) {
             navItems = __spreadArray([headingToNavItem(activeHeading)], navItemsPageSections, true);
         }
@@ -70,8 +68,6 @@ function resolveHeadingsData(pageContext) {
         pageTitle: pageTitle,
         documentTitle: documentTitle,
         // TODO: don't pass to client-side
-        columnLayouts: columnLayouts,
-        // TODO: don't pass to client-side
         activeCategory: activeCategory,
     };
     return pageContextAddendum;

package/dist/config/resolvePageContext.d.ts

@@ -17,7 +17,6 @@ declare function resolvePageContext(pageContext: PageContextOriginal): {
     isLandingPage: boolean;
     pageTitle: string | null;
     documentTitle: string;
-    columnLayouts: number[][];
     activeCategory: string;
 } & {
     urlPathname: string;

package/dist/docsearch/SearchLink.d.ts

@@ -0,0 +1,4 @@
+export { SearchLink };
+import React from 'react';
+type PropsAnchor = React.HTMLProps<HTMLAnchorElement>;
+declare function SearchLink(props: PropsAnchor): React.JSX.Element;