@brillout/docpress 0.8.13-commit-8740149 → 0.8.14

package/Layout.tsx

@@ -61,7 +61,7 @@ function Layout({ children }: { children: React.ReactNode }) {
         ['--top-nav-height']: `${isLandingPage ? 70 : 60}px`,
       }}
     >
-      <MenuModal />
+      <MenuModal isTopNav={isLandingPage} />
       <div
         className={isLandingPage ? '' : 'doc-page'}
         style={{
@@ -113,6 +113,9 @@ function LayoutDocsPage({ children }: { children: React.ReactNode }) {
 .page-content {
   margin: auto;
 }
+#menu-modal {
+  position: absolute !important;
+}
 `
     if (!hideNavLeftAlways) {
       navLeftHide = css`
@@ -384,44 +387,42 @@ function NavigationHeader({
   )
 }
 
+let onMouseIgnore: ReturnType<typeof setTimeout> | undefined
 function MenuLink({ style }: { style: React.CSSProperties }) {
   return (
     <div
       style={{
-        height: 'calc(100% + 2 * var(--block-margin))',
+        height: '100%',
         display: 'flex',
         alignItems: 'center',
+        cursor: 'default',
         ...style,
       }}
-      className="colorize-on-hover colorize-on-menu"
+      className="colorize-on-hover menu-toggle"
       onClick={(ev) => {
         ev.preventDefault()
         toggleMenuModal()
       }}
-      onMouseEnter={openMenuModal}
-      onMouseLeave={closeMenuModal}
-      aria-label={'Ctrl\xa0+\xa0M'}
+      onMouseOver={() => {
+        if (onMouseIgnore) return
+        openMenuModal()
+      }}
+      onMouseLeave={() => {
+        if (onMouseIgnore) return
+        closeMenuModal()
+      }}
+      onTouchStart={() => {
+        onMouseIgnore = setTimeout(() => {
+          onMouseIgnore = undefined
+        }, 1000)
+      }}
     >
-      {/* 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 />
+      <DocsIcon />
       Docs
     </div>
   )
 }
-function MenuIcon() {
+function DocsIcon() {
   return (
     <span
       style={{ marginRight: 'calc(var(--icon-text-padding) + 2px)', lineHeight: 0, width: '1.3em' }}
@@ -431,3 +432,23 @@ function MenuIcon() {
     </span>
   )
 }
+/* TODO/now: use for mobile
+function MenuIcon() {
+  return (
+    <svg
+      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>
+  )
+}
+*/
+
+function Style({ children }: { children: string }) {
+  return <style dangerouslySetInnerHTML={{ __html: children }} />
+}

package/Links.tsx

@@ -1,3 +1,6 @@
+// TODO/refactor: rename
+export { Links }
+
 import React from 'react'
 import iconGithub from './icons/github.svg'
 import iconTwitter from './icons/twitter.svg'
@@ -7,8 +10,6 @@ import iconLanguages from './icons/languages.svg'
 import { usePageContext } from './renderer/usePageContext'
 import '@docsearch/css'
 
-export { Links }
-
 function Links({ style }: { style?: React.CSSProperties }) {
   const pageContext = usePageContext()
   const { projectInfo, i18n } = pageContext.config

package/MenuModal.tsx

@@ -14,36 +14,25 @@ import { getViewportWidth } from './utils/getViewportWidth'
 
 initCloseListeners()
 
-function MenuModal() {
+function MenuModal({ isTopNav }: { isTopNav: boolean }) {
   return (
     <>
       <style>{getStyle()}</style>
       <div
         id="menu-modal"
-        className="link-hover-animation"
+        className="link-hover-animation add-transition"
         style={{
-          position: 'fixed',
+          position: isTopNav ? 'absolute' : '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: 'calc(100vh - var(--top-nav-height))',
-          //*/
-          top: 'calc(var(--top-nav-height) + var(--block-margin))',
+          top: 'var(--top-nav-height)',
           left: 0,
           zIndex: 9999,
           overflow: 'scroll',
-          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',
+          background: '#ededef',
+          transitionProperty: 'opacity',
         }}
-        onMouseEnter={openMenuModal}
+        onMouseOver={openMenuModal}
         onMouseLeave={closeMenuModal}
       >
         <div
@@ -58,8 +47,11 @@ function MenuModal() {
           }}
         >
           <Nav />
+          {/* TODO/now: use for mobile
+          <LinksBottom />
+          */}
         </div>
-        {/* TODO: remove
+        {/* TODO/now: use for mobile
         <CloseButton />
         */}
       </div>
@@ -71,7 +63,6 @@ function Nav() {
   const navItems = pageContext.navItemsAll
   return <NavigationContent columnLayout={true} navItems={navItems} />
 }
-// TODO: remove
 function LinksBottom() {
   return (
     <div
@@ -89,7 +80,7 @@ function getStyle() {
   return css`
 html:not(.menu-modal-show) #menu-modal {
   opacity: 0;
-  pointer-events:none;
+  pointer-events: none;
 }
 // disable scroll of main view
 html.menu-modal-show {
@@ -103,7 +94,6 @@ html.menu-modal-show {
 `
 }
 
-// TODO: remove?
 function CloseButton() {
   return (
     <div

package/css/colorize-on-hover.css

@@ -5,19 +5,32 @@
 @media (hover: hover) and (pointer: fine) {
   .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-'] {
+  html.menu-modal-show .menu-toggle [class^='decolorize-'],
+  html.menu-modal-show .menu-toggle [class*=' decolorize-'] {
     filter: grayscale(0) opacity(1) !important;
   }
-  .link-hover-animation a:hover {
+  .link-hover-animation a:hover,
+  .link-hover-animation .menu-toggle:hover,
+  html.menu-modal-show .menu-toggle {
     color: black !important;
     background-color: var(--active-color);
   }
 }
 
-.colorize-on-hover [class^='decolorize-'],
-.colorize-on-hover [class*=' decolorize-'] {
-  transition: filter 0.3s ease-in-out;
+[class^='decolorize-'],
+[class*=' decolorize-'],
+.link-hover-animation a,
+.link-hover-animation .menu-toggle,
+.add-transition {
+  transition: all 0.4s ease-in-out;
+}
+[class^='decolorize-'],
+[class*=' decolorize-'] {
+  transition-property: filter;
+}
+.link-hover-animation a,
+.menu-toggle {
+  transition-property: color, background-color;
 }
 
 .decolorize-7 {
@@ -33,17 +46,6 @@
   filter: grayscale(1) opacity(0.4);
 }
 
-.link-hover-animation a {
-  transition: all 0.3s ease-in-out !important;
-  transition-property: color, background-color !important;
-}
 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.js

@@ -70,7 +70,7 @@ function Layout(_a) {
             _b['--icon-text-padding'] = '8px',
             _b['--top-nav-height'] = "".concat(isLandingPage ? 70 : 60, "px"),
             _b) },
-        React.createElement(MenuModal, null),
+        React.createElement(MenuModal, { isTopNav: isLandingPage }),
         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
@@ -89,7 +89,7 @@ function LayoutDocsPage(_a) {
             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"])));
+        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#menu-modal {\n  position: absolute !important;\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#menu-modal {\n  position: absolute !important;\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);
         }
@@ -221,23 +221,49 @@ function NavigationHeader(_a) {
             React.createElement(SearchLink, { style: __assign(__assign({}, childrenStyle), { flexGrow: 0.5 }) }),
             React.createElement(MenuLink, { style: __assign(__assign({}, childrenStyle), { flexGrow: 1 }) }))));
 }
+var onMouseIgnore;
 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) {
+    return (React.createElement("div", { style: __assign({ height: '100%', display: 'flex', alignItems: 'center', cursor: 'default' }, style), className: "colorize-on-hover menu-toggle", 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),
+        }, onMouseOver: function () {
+            if (onMouseIgnore)
+                return;
+            openMenuModal();
+        }, onMouseLeave: function () {
+            if (onMouseIgnore)
+                return;
+            closeMenuModal();
+        }, onTouchStart: function () {
+            onMouseIgnore = setTimeout(function () {
+                onMouseIgnore = undefined;
+            }, 1000);
+        } },
+        React.createElement(DocsIcon, null),
         "Docs"));
 }
-function MenuIcon() {
+function DocsIcon() {
     return (React.createElement("span", { style: { marginRight: 'calc(var(--icon-text-padding) + 2px)', lineHeight: 0, width: '1.3em' }, className: "decolorize-6" }, "\uD83D\uDCDA"));
 }
+/* TODO/now: use for mobile
+function MenuIcon() {
+  return (
+    <svg
+      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>
+  )
+}
+*/
+function Style(_a) {
+    var children = _a.children;
+    return React.createElement("style", { dangerouslySetInnerHTML: { __html: children } });
+}
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/dist/Links.d.ts

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

package/dist/Links.js

@@ -9,6 +9,8 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+// TODO/refactor: rename
+export { Links };
 import React from 'react';
 import iconGithub from './icons/github.svg';
 import iconTwitter from './icons/twitter.svg';
@@ -17,7 +19,6 @@ 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();

package/dist/MenuModal.d.ts

@@ -3,7 +3,9 @@ export { toggleMenuModal };
 export { openMenuModal };
 export { closeMenuModal };
 import React from 'react';
-declare function MenuModal(): React.JSX.Element;
+declare function MenuModal({ isTopNav }: {
+    isTopNav: boolean;
+}): React.JSX.Element;
 declare function toggleMenuModal(): void;
 declare function openMenuModal(): void;
 declare function closeMenuModal(): void;

package/dist/MenuModal.js

@@ -15,30 +15,21 @@ import { Links } from './Links';
 import { isBrowser } from './utils/isBrowser';
 import { getViewportWidth } from './utils/getViewportWidth';
 initCloseListeners();
-function MenuModal() {
+function MenuModal(_a) {
+    var isTopNav = _a.isTopNav;
     return (React.createElement(React.Fragment, null,
         React.createElement("style", null, getStyle()),
-        React.createElement("div", { id: "menu-modal", className: "link-hover-animation", style: {
-                position: 'fixed',
+        React.createElement("div", { id: "menu-modal", className: "link-hover-animation add-transition", style: {
+                position: isTopNav ? 'absolute' : '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: 'calc(100vh - var(--top-nav-height))',
-                //*/
-                top: 'calc(var(--top-nav-height) + var(--block-margin))',
+                top: 'var(--top-nav-height)',
                 left: 0,
                 zIndex: 9999,
                 overflow: 'scroll',
-                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 },
+                background: '#ededef',
+                transitionProperty: 'opacity',
+            }, onMouseOver: openMenuModal, onMouseLeave: closeMenuModal },
             React.createElement("div", { style: {
                     // Place <LinksBottom /> to the bottom
                     display: 'flex',
@@ -55,7 +46,6 @@ function Nav() {
     var navItems = pageContext.navItemsAll;
     return React.createElement(NavigationContent, { columnLayout: true, navItems: navItems });
 }
-// TODO: remove
 function LinksBottom() {
     return (React.createElement("div", { style: {
             display: 'flex',
@@ -64,9 +54,8 @@ function LinksBottom() {
         React.createElement(Links, { style: { height: 70 } })));
 }
 function getStyle() {
-    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\nhtml:not(.menu-modal-show) #menu-modal {\n  opacity: 0;\n  pointer-events: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  opacity: 0;\n  pointer-events: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);
+    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\nhtml:not(.menu-modal-show) #menu-modal {\n  opacity: 0;\n  pointer-events: 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  opacity: 0;\n  pointer-events: 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);
 }
-// TODO: remove?
 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" },

package/initKeyBindings.ts

@@ -1,7 +1,7 @@
 export { initKeyBindings }
 
 import { closeDocsearchModal } from './docsearch/toggleDocsearchModal'
-import { closeMenuModal, toggleMenuModal } from './MenuModal'
+import { closeMenuModal } from './MenuModal'
 
 function initKeyBindings() {
   window.addEventListener(
@@ -14,11 +14,6 @@ function initKeyBindings() {
         closeMenuModal()
       }
 
-      if (key === 'm' && ev.ctrlKey) {
-        closeDocsearchModal()
-        toggleMenuModal()
-      }
-
       // Replicates docsearch keybinding
       // https://github.com/algolia/docsearch/blob/90f3c6aabbc324fe49e9a1dfe0906fcd4d90f27b/packages/docsearch-react/src/useDocSearchKeyboardEvents.ts#L45-L49
       if ((key === 'k' && (ev.ctrlKey || ev.metaKey)) || (key === '/' && !isEditingContent(ev))) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brillout/docpress",
-  "version": "0.8.13-commit-8740149",
+  "version": "0.8.14",
   "type": "module",
   "dependencies": {
     "@brillout/picocolors": "^1.0.10",