@brillout/docpress 0.8.11 → 0.8.13-commit-8740149

package/Layout.tsx

@@ -1,5 +1,7 @@
 export { Layout }
 export { containerQueryMobile }
+export { navWidthMin }
+export { navWidthMax }
 
 import React from 'react'
 import { NavigationContent } from './navigation/Navigation'
@@ -7,7 +9,7 @@ import { EditPageNote } from './components/EditPageNote'
 import { parseTitle } from './parseTitle'
 import { usePageContext, usePageContext2 } from './renderer/usePageContext'
 import { Links } from './Links'
-import { toggleMenuModal } from './MenuModal'
+import { closeMenuModal, openMenuModal, toggleMenuModal } from './MenuModal'
 import { MenuModal } from './MenuModal'
 import { autoScrollNav_SSR } from './autoScrollNav'
 import { SearchLink } from './docsearch/SearchLink'
@@ -56,6 +58,7 @@ function Layout({ children }: { children: React.ReactNode }) {
         ['--bg-color']: '#f5f5f7',
         ['--block-margin']: `${blockMargin}px`,
         ['--icon-text-padding']: '8px',
+        ['--top-nav-height']: `${isLandingPage ? 70 : 60}px`,
       }}
     >
       <MenuModal />
@@ -196,7 +199,7 @@ function PageContent({ children }: { children: React.ReactNode }) {
 function NavMobile() {
   return (
     <div id="nav-mobile">
-      <NavigationHeader headerHeight={70} iconSize={40} paddingLeft={12} style={{ justifyContent: 'center' }} />
+      <NavigationHeader iconSize={40} paddingLeft={12} style={{ justifyContent: 'center' }} />
     </div>
   )
 }
@@ -253,7 +256,7 @@ function NavLeft() {
             top: 0,
           }}
         >
-          <NavigationHeader headerHeight={headerHeight} iconSize={39} paddingLeft={6} />
+          <NavigationHeader iconSize={39} paddingLeft={6} />
           <div
             style={{
               backgroundColor: 'var(--bg-color)',
@@ -291,11 +294,10 @@ function NavLeft() {
 }
 
 function NavigationHeader({
-  headerHeight,
   iconSize,
   style,
   paddingLeft,
-}: { headerHeight: number; iconSize: number; paddingLeft: number; style?: React.CSSProperties }) {
+}: { iconSize: number; paddingLeft: number; style?: React.CSSProperties }) {
   const pageContext = usePageContext()
   //*
   const { projectName } = pageContext.meta
@@ -322,8 +324,9 @@ function NavigationHeader({
       <div
         style={{
           display: 'flex',
-          height: headerHeight,
+          height: 'var(--top-nav-height)',
           containerType: 'inline-size',
+          alignItems: 'center',
           ...navWidth,
         }}
       >
@@ -381,41 +384,50 @@ function NavigationHeader({
   )
 }
 
-type PropsAnchor = React.HTMLProps<HTMLAnchorElement>
-function MenuLink(props: PropsAnchor) {
+function MenuLink({ style }: { style: React.CSSProperties }) {
   return (
-    <a
-      {...props}
+    <div
       style={{
-        height: '100%',
+        height: 'calc(100% + 2 * var(--block-margin))',
         display: 'flex',
         alignItems: 'center',
-        cursor: 'pointer',
-        ...props.style,
+        ...style,
       }}
-      className="colorize-on-hover"
+      className="colorize-on-hover colorize-on-menu"
       onClick={(ev) => {
         ev.preventDefault()
         toggleMenuModal()
       }}
+      onMouseEnter={openMenuModal}
+      onMouseLeave={closeMenuModal}
       aria-label={'Ctrl\xa0+\xa0M'}
     >
+      {/* TODO/refactor
+      <style>{css`
+`}</style>
+*/}
+      <div
+        id="link-bg"
+        style={{
+          position: 'absolute',
+          width: '100%',
+          height: 'calc(100% - var(--block-margin))',
+          left: 0,
+          top: 0,
+        }}
+      ></div>
       <MenuIcon />
-      Menu
-    </a>
+      Docs
+    </div>
   )
 }
 function MenuIcon() {
   return (
-    <svg
+    <span
       style={{ marginRight: 'calc(var(--icon-text-padding) + 2px)', lineHeight: 0, width: '1.3em' }}
       className="decolorize-6"
-      viewBox="0 0 448 512"
     >
-      <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"
-      ></path>
-    </svg>
+      📚
+    </span>
   )
 }

package/MenuModal.tsx

@@ -1,5 +1,6 @@
 export { MenuModal }
 export { toggleMenuModal }
+export { openMenuModal }
 export { closeMenuModal }
 
 import React from 'react'
@@ -9,6 +10,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()
 
@@ -27,31 +29,39 @@ function MenuModal() {
            * - https://stackoverflow.com/questions/37112218/css3-100vh-not-constant-in-mobile-browser/72245072#72245072
           height: '100dh',
           /*/
-          height: '100vh',
-          maxHeight: '100dvh',
+          height: 'calc(100vh - var(--top-nav-height))',
           //*/
-          top: 0,
+          top: 'calc(var(--top-nav-height) + var(--block-margin))',
           left: 0,
           zIndex: 9999,
           overflow: 'scroll',
-          background: 'var(--bg-color)',
+          background: '#eaeaea',
+          // background: '#ededef',
+          // boxShadow: 'rgba(0, 0, 0, 0.35) 0 0 13px 3px',
+          // boxShadow: 'rgba(6, 24, 44, 0.4) 0px 0px 0px 2px, rgba(6, 24, 44, 0.65) 0px 4px 13px -1px, rgba(255, 255, 255, 0.08) 0px 1px 0px inset',
+          boxShadow:
+            'rgb(6 24 44 / 8%) 0px 0px 0px 3px, rgba(6, 24, 44, 0.65) 0px 4px 13px -1px, rgba(255, 255, 255, 0.28) 0px 1px 0px inset',
+          transition: 'opacity 0.3s ease-in-out',
         }}
+        onMouseEnter={openMenuModal}
+        onMouseLeave={closeMenuModal}
       >
         <div
           style={{
             // Place <LinksBottom /> to the bottom
             display: 'flex',
             flexDirection: 'column',
-            minHeight: '100dvh',
+            minHeight: 'calc(100vh - var(--top-nav-height))',
             justifyContent: 'space-between',
             // We don't set `container` to parent beacuse of a Chrome bug (showing a blank <MenuModal>)
             containerType: 'inline-size',
           }}
         >
           <Nav />
-          <LinksBottom />
         </div>
+        {/* TODO: remove
         <CloseButton />
+        */}
       </div>
     </>
   )
@@ -61,6 +71,7 @@ function Nav() {
   const navItems = pageContext.navItemsAll
   return <NavigationContent columnLayout={true} navItems={navItems} />
 }
+// TODO: remove
 function LinksBottom() {
   return (
     <div
@@ -77,7 +88,8 @@ function LinksBottom() {
 function getStyle() {
   return css`
 html:not(.menu-modal-show) #menu-modal {
-  display: none;
+  opacity: 0;
+  pointer-events:none;
 }
 // disable scroll of main view
 html.menu-modal-show {
@@ -91,6 +103,7 @@ html.menu-modal-show {
 `
 }
 
+// TODO: remove?
 function CloseButton() {
   return (
     <div
@@ -129,10 +142,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
@@ -145,6 +154,9 @@ function autoScroll() {
     inline: 'start',
   })
 }
+function openMenuModal() {
+  document.documentElement.classList.add('menu-modal-show')
+}
 function closeMenuModal() {
   document.documentElement.classList.remove('menu-modal-show')
 }

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/css/colorize-on-hover.css

@@ -4,7 +4,9 @@
  */
 @media (hover: hover) and (pointer: fine) {
   .colorize-on-hover:hover [class^='decolorize-'],
-  .colorize-on-hover:hover [class*=' decolorize-'] {
+  .colorize-on-hover:hover [class*=' decolorize-'],
+  html.menu-modal-show .colorize-on-menu [class^='decolorize-'],
+  html.menu-modal-show .colorize-on-menu [class*=' decolorize-'] {
     filter: grayscale(0) opacity(1) !important;
   }
   .link-hover-animation a:hover {
@@ -38,3 +40,10 @@
 body {
   --active-color: rgba(0, 0, 0, 0.03);
 }
+
+
+/* TODO/refactor: move */
+:has(> #link-bg):hover > #link-bg,
+html.menu-modal-show #link-bg {
+  background: var(--active-color)
+}

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,243 @@
+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 { closeMenuModal, openMenuModal, 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['--top-nav-height'] = "".concat(isLandingPage ? 70 : 60, "px"),
+            _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, { 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, { 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 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: 'var(--top-nav-height)', containerType: 'inline-size', alignItems: 'center' }, 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(_a) {
+    var style = _a.style;
+    return (React.createElement("div", { style: __assign({ height: 'calc(100% + 2 * var(--block-margin))', display: 'flex', alignItems: 'center' }, style), className: "colorize-on-hover colorize-on-menu", onClick: function (ev) {
+            ev.preventDefault();
+            toggleMenuModal();
+        }, onMouseEnter: openMenuModal, onMouseLeave: closeMenuModal, "aria-label": 'Ctrl\xa0+\xa0M' },
+        React.createElement("div", { id: "link-bg", style: {
+                position: 'absolute',
+                width: '100%',
+                height: 'calc(100% - var(--block-margin))',
+                left: 0,
+                top: 0,
+            } }),
+        React.createElement(MenuIcon, null),
+        "Docs"));
+}
+function MenuIcon() {
+    return (React.createElement("span", { style: { marginRight: 'calc(var(--icon-text-padding) + 2px)', lineHeight: 0, width: '1.3em' }, className: "decolorize-6" }, "\uD83D\uDCDA"));
+}
+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,9 @@
+export { MenuModal };
+export { toggleMenuModal };
+export { openMenuModal };
+export { closeMenuModal };
+import React from 'react';
+declare function MenuModal(): React.JSX.Element;
+declare function toggleMenuModal(): void;
+declare function openMenuModal(): void;
+declare function closeMenuModal(): void;