@brillout/docpress 0.10.1 → 0.10.3

package/Layout.tsx

@@ -121,7 +121,7 @@ function LayoutDocsPage({ children }: { children: React.ReactNode }) {
 .page-content {
   margin: auto;
 }
-#menu-modal {
+#menu-modal-wrapper {
   position: absolute !important;
 }
 `

package/MenuModal/NavigationWithColumnLayout.css

@@ -7,5 +7,4 @@
   left: 0;
   height: 100%;
   width: 3px;
-  z-index: 99;
 }

package/MenuModal/NavigationWithColumnLayout.tsx

@@ -26,9 +26,14 @@ function NavigationWithColumnLayout(props: { navItems: NavItem[] }) {
   return (
     <>
       <Style>{getStyle()}</Style>
-      <div className="navigation-content" style={{ paddingTop: 10 }}>
+      <div id="menu-navigation-container" className="navigation-content">
         {navItemsByColumnLayouts.map((columnLayout, i) => (
-          <div id={`menu-navigation-${i}`} className="menu-navigation" key={i}>
+          <div
+            id={`menu-navigation-${i}`}
+            className="menu-navigation-content"
+            style={{ paddingTop: 10, transition: 'none 0.2s ease-in-out', transitionProperty: 'opacity, transform' }}
+            key={i}
+          >
             {columnLayout.isFullWidthCategory ? (
               <div style={{ marginTop: 0 }}>
                 <ColumnsWrapper numberOfColumns={columnLayout.columns.length}>
@@ -85,17 +90,35 @@ function NavigationWithColumnLayout(props: { navItems: NavItem[] }) {
   function getStyle() {
     const style = css`
 @media(min-width: ${containerQueryMobileMenu + 1}px) {
+  .menu-navigation-content {
+    position: absolute;
+    width: 100%;
+  }
  ${navItemsByColumnLayouts
-   .map(
-     (_, i) =>
-       css`
-html:not(.menu-modal-show-${i}) #menu-navigation-${i} {
-  display: none;
+   .map((_, i) => {
+     const isFirst = i === 0
+     const isLast = i === navItemsByColumnLayouts.length - 1
+     return css`
+#menu-navigation-${i} {
+  ${/* Fading animation */ ''}
+  html:not(.menu-modal-show-${i}) & {
+    opacity: 0;
+    pointer-events: none;
+  }
+  ${/* Sliding animation */ ''}
+  html:not(.menu-modal-show-${i}).menu-modal-show & {
+    ${!isFirst && !isLast ? '' : `transform: translate(${isFirst ? '-' : ''}50px, 0);`}
+  }
+  ${/* Performance optimization. */ ''}
+  ${/* - Using clip-path transition instead of height transition doesn't make a difference: https://github.com/brillout/docpress/commit/005cba0b4cba9c1b526e8e26901ee04129d79715 */ ''}
+  ${/* - Suprisingly, this is a performance regression when transitioning from one menu to another (the menu is kept open). Thus we apply this only when the menu is being closed/opened. */ ''}
+  html:not(.menu-modal-show-${i}).menu-modal-opening-or-closing & {
+    display: none;
+  }
 }
-html.menu-modal-show.menu-modal-show-${i} {
-  .menu-toggle-${i} {
+.menu-toggle-${i} {
+  html.menu-modal-show.menu-modal-show-${i} & {
     color: black !important;
-    cursor: default !important;
     [class^='decolorize-'],
     [class*=' decolorize-'] {
       filter: grayscale(0) opacity(1) !important;
@@ -104,9 +127,12 @@ html.menu-modal-show.menu-modal-show-${i} {
       top: 0;
     }
   }
+  html.menu-modal-show & {
+    cursor: default !important;
+  }
 }
-`,
-   )
+`
+   })
    .join('')}
 }
 `

package/MenuModal/toggleMenuModal.ts

@@ -6,19 +6,19 @@ export { closeMenuOnMouseLeave }
 export { addListenerOpenMenuModal }
 
 import { containerQueryMobileLayout } from '../Layout'
+import { getHydrationPromise } from '../renderer/getHydrationPromise'
 import { getViewportWidth } from '../utils/getViewportWidth'
 import { isBrowser } from '../utils/isBrowser'
 
 initScrollListener()
 
 function keepMenuModalOpen() {
-  if (keepOpenIsDisabled) return
   open()
 }
 function openMenuModal(menuNavigationId: number) {
   open(menuNavigationId)
 }
-function open(menuNavigationId?: number) {
+async function open(menuNavigationId?: number) {
   if (menuModalLock) {
     if (menuNavigationId === undefined) {
       clearTimeout(menuModalLock?.timeout)
@@ -29,7 +29,10 @@ function open(menuNavigationId?: number) {
     return
   }
   const { classList } = document.documentElement
-  classList.add('menu-modal-show')
+  if (!classList.contains('menu-modal-show')) {
+    onBeforeOpeningOrClosing()
+    classList.add('menu-modal-show')
+  }
   if (menuNavigationId !== undefined) {
     const currentModalId = getCurrentMenuId()
     if (currentModalId === menuNavigationId) return
@@ -37,6 +40,10 @@ function open(menuNavigationId?: number) {
       classList.remove(`menu-modal-show-${currentModalId}`)
     }
     classList.add(`menu-modal-show-${menuNavigationId}`)
+    await getHydrationPromise()
+    // Because all `.menu-navigation-content` are `position: absolute` we have to propagate the content height ourselves.
+    const height = window.getComputedStyle(document.getElementById(`menu-navigation-${menuNavigationId}`)!).height
+    document.getElementById('menu-navigation-container')!.style.height = height
   }
   listener?.()
 }
@@ -45,16 +52,31 @@ function addListenerOpenMenuModal(cb: () => void) {
   listener = cb
 }
 function closeMenuModal() {
-  document.documentElement.classList.remove('menu-modal-show')
+  const { classList } = document.documentElement
+  if (classList.contains('menu-modal-show')) {
+    onBeforeOpeningOrClosing(() => {
+      // Remove:
+      //   menu-modal-show-0
+      //   menu-modal-show-1
+      //   ...
+      classList.forEach((className) => {
+        if (className.startsWith('menu-modal-show-')) {
+          classList.remove(className)
+        }
+      })
+    })
+    classList.remove('menu-modal-show')
+  }
 }
-let keepOpenIsDisabled: true | undefined
-function closeAndForbidKeepOpen() {
-  if (!document.documentElement.classList.contains('menu-modal-show')) return
-  keepOpenIsDisabled = true
-  closeMenuModal()
-  setTimeout(() => {
-    keepOpenIsDisabled = undefined
-  }, 500)
+let timeoutModalAnimation: NodeJS.Timeout | undefined
+function onBeforeOpeningOrClosing(cb?: () => void) {
+  const { classList } = document.documentElement
+  classList.add('menu-modal-opening-or-closing')
+  clearTimeout(timeoutModalAnimation)
+  timeoutModalAnimation = setTimeout(() => {
+    classList.remove('menu-modal-opening-or-closing')
+    cb?.()
+  }, 450)
 }
 
 let menuModalLock:
@@ -72,7 +94,7 @@ function closeMenuOnMouseLeave() {
     menuModalLock = undefined
     if (idNext === idCurrent) return
     if (idNext === undefined) {
-      closeAndForbidKeepOpen()
+      closeMenuModal()
     } else {
       openMenuModal(idNext)
     }
@@ -94,11 +116,10 @@ function getCurrentMenuId(): null | number {
 
 function initScrollListener() {
   if (!isBrowser()) return
-  window.addEventListener('scroll', closeAndForbidKeepOpen, { passive: true })
+  window.addEventListener('scroll', closeMenuModal, { passive: true })
 }
 
 function toggleMenuModal(menuId: number) {
-  keepOpenIsDisabled = undefined
   const { classList } = document.documentElement
   if (classList.contains('menu-modal-show') && classList.contains(`menu-modal-show-${menuId}`)) {
     closeMenuModal()
@@ -109,7 +130,7 @@ function toggleMenuModal(menuId: number) {
 }
 
 function autoScroll() {
-  const nav = document.querySelector('#menu-modal .navigation-content')!
+  const nav = document.querySelector('#menu-modal-wrapper .navigation-content')!
   const href = window.location.pathname
   const navLinks = Array.from(nav.querySelectorAll(`a[href="${href}"]`))
   const navLink = navLinks[0] as HTMLElement | undefined

package/MenuModal.tsx

@@ -1,6 +1,6 @@
 export { MenuModal }
 
-import React, { useEffect, useRef, useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import { usePageContext } from './renderer/usePageContext'
 import { css } from './utils/css'
 import { blockMargin, containerQueryMobileLayout, containerQueryMobileMenu } from './Layout'
@@ -10,58 +10,48 @@ import { NavigationWithColumnLayout } from './MenuModal/NavigationWithColumnLayo
 import { addListenerOpenMenuModal, closeMenuModal, keepMenuModalOpen } from './MenuModal/toggleMenuModal'
 
 function MenuModal({ isTopNav }: { isTopNav: boolean }) {
-  const ref = useRef<HTMLDivElement>(null)
-  const [height, setHeight] = useState<number | undefined>(undefined)
+  // `transition: height` doesn't work on `height: auto` => we have to manually set and change `height` to a fixed size.
+  const [height, setHeight] = useState(0)
   useEffect(() => {
-    const updateHeight = () => {
-      const { scrollHeight } = ref!.current!.querySelector('.navigation-content')!
-      if (height !== scrollHeight) setHeight(scrollHeight + blockMargin)
-    }
-    addListenerOpenMenuModal(updateHeight)
-    updateHeight()
+    addListenerOpenMenuModal(() => {
+      const { scrollHeight } = document.getElementById('menu-modal-scroll-container')!
+      const heightNew = scrollHeight + blockMargin
+      if (height !== heightNew) setHeight(heightNew)
+    })
   })
   return (
     <>
       <Style>{getStyle()}</Style>
       <div
-        id="menu-modal"
-        className="link-hover-animation add-transition"
+        id="menu-modal-wrapper"
+        className="link-hover-animation add-transition show-on-nav-hover"
         style={{
           position: isTopNav ? 'absolute' : 'fixed',
           width: '100%',
           top: 'var(--nav-head-height)',
           left: 0,
-          zIndex: 9999,
-          overflowY: 'scroll',
+          zIndex: 199, // maximum value, because docsearch's modal has `z-index: 200`
           background: '#ededef',
-          transitionProperty: 'height',
+          transitionProperty: 'height, opacity',
           transitionTimingFunction: 'ease',
-          // https://github.com/brillout/docpress/issues/23
-          // https://stackoverflow.com/questions/64514118/css-overscroll-behavior-contain-when-target-element-doesnt-overflow
-          // https://stackoverflow.com/questions/9538868/prevent-body-from-scrolling-when-a-modal-is-opened
-          overscrollBehavior: 'none',
           height,
+          overflow: 'hidden',
         }}
-        ref={ref}
         onMouseOver={() => keepMenuModalOpen()}
         onMouseLeave={closeMenuModal}
       >
         <div
+          id="menu-modal-scroll-container"
           style={{
-            // Place <NavSecondary /> to the bottom
-            display: 'flex',
-            flexDirection: 'column',
-            justifyContent: 'space-between',
-            minHeight: '100%',
-            position: 'relative',
-            // We don't set `container` to the parent #menu-modal beacuse of a Chrome bug (showing a blank <MenuModal>)
+            overflowY: 'scroll',
+            // We don't set `container` to the parent #menu-modal-wrapper beacuse of a Chrome bug (showing a blank <MenuModal>). Edit: IIRC because #menu-modal-wrapper has `position: fixed`.
             container: 'container-viewport / inline-size',
           }}
         >
           <Nav />
           <NavSecondary className="show-only-for-mobile" />
-          <BorderBottom />
         </div>
+        <BorderBottom />
         <CloseButton className="show-only-for-mobile" />
       </div>
     </>
@@ -71,7 +61,13 @@ function BorderBottom() {
   return (
     <div
       id="border-bottom"
-      style={{ position: 'absolute', background: '#fff', height: 'var(--block-margin)', width: '100%', bottom: 0 }}
+      style={{
+        position: 'absolute',
+        background: '#fff',
+        height: 'var(--block-margin)',
+        width: '100%',
+        bottom: 0,
+      }}
     />
   )
 }
@@ -98,30 +94,42 @@ function NavSecondary({ className }: { className: string }) {
 function getStyle() {
   return css`
 @media(min-width: ${containerQueryMobileMenu + 1}px) {
-  #menu-modal {
-    ${/* Firefox doesn't support `dvh` yet: https://caniuse.com/?search=dvh */ ''}
-    ${/* Let's always use `dvh` instead of `vh` once Firefox supports it */ ''}
-    max-height:  calc(100vh - var(--nav-head-height));
-    ${/* We use dvh because of mobile */ ''}
-    ${/* https://stackoverflow.com/questions/37112218/css3-100vh-not-constant-in-mobile-browser/72245072#72245072 */ ''}
-    max-height: calc(100dvh - var(--nav-head-height));
+  #menu-modal-scroll-container,
+  #menu-modal-wrapper {
+    max-height: calc(100vh - var(--nav-head-height));
   }
-  html:not(.menu-modal-show) #menu-modal {
-    height: 0 !important;
+  #menu-modal-scroll-container {
+    ${/* https://github.com/brillout/docpress/issues/23 */ ''}
+    ${/* https://stackoverflow.com/questions/64514118/css-overscroll-behavior-contain-when-target-element-doesnt-overflow */ ''}
+    ${/* https://stackoverflow.com/questions/9538868/prevent-body-from-scrolling-when-a-modal-is-opened */ ''}
+    overscroll-behavior: none;
+  }
+  html:not(.menu-modal-show) #menu-modal-wrapper {
+    ${/* 3px */ ''}
+    height: var(--block-margin) !important;
+    pointer-events: none;
   }
   .show-only-for-mobile {
     display: none !important;
   }
 }
 @media(max-width: ${containerQueryMobileMenu}px) {
-  #menu-modal {
+  #menu-modal-scroll-container {
+    ${/* Fallback for Firefox: it doesn't support `dvh` yet: https://caniuse.com/?search=dvh */ ''}
+    ${/* Let's always and systematically use `dvh` instead of `vh` once Firefox supports it */ ''}
     height:  calc(100vh) !important;
+    ${/* We use dvh because of mobile */ ''}
+    ${/* https://stackoverflow.com/questions/37112218/css3-100vh-not-constant-in-mobile-browser/72245072#72245072 */ ''}
     height: calc(100dvh) !important;
+    ${/* Place <NavSecondary /> to the bottom */ ''}
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
   }
   #border-bottom {
     display: none;
   }
-  html:not(.menu-modal-show) #menu-modal {
+  html:not(.menu-modal-show) #menu-modal-wrapper {
     opacity: 0;
     pointer-events: none;
   }
@@ -129,12 +137,16 @@ function getStyle() {
   html.menu-modal-show {
     overflow: hidden !important;
   }
-  #menu-modal {
+  #menu-modal-wrapper {
     --nav-head-height: 0px !important;
   }
+  #menu-modal-wrapper,
+  #menu-navigation-container {
+    height: auto!important;
+  }
 }
 @container container-viewport (min-width: ${containerQueryMobileLayout}px) {
-  #menu-modal .nav-item-level-3 {
+  #menu-modal-wrapper .nav-item-level-3 {
     display: none;
   }
 }

package/NavItemComponent.css

@@ -4,7 +4,7 @@
   overflow-x: hidden;
   --padding-left-global: 9px;
 }
-#menu-modal .nav-item {
+#menu-modal-wrapper .nav-item {
   --padding-left-global: 15px;
 }
 .nav-item code {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brillout/docpress",
-  "version": "0.10.1",
+  "version": "0.10.3",
   "type": "module",
   "dependencies": {
     "@brillout/picocolors": "^1.0.10",
@@ -55,15 +55,7 @@
     }
   },
   "devDependencies": {
-    "@brillout/release-me": "^0.4.2",
-    "@types/node": "link:../demo/node_modules/@types/node/",
-    "@types/react": "link:../demo/node_modules/@types/react/",
-    "@types/react-dom": "link:../demo/node_modules/@types/react-dom/",
-    "react": "link:../demo/node_modules/react/",
-    "react-dom": "link:../demo/node_modules/react-dom/",
-    "typescript": "link:../demo/node_modules/typescript/",
-    "vike": "link:../demo/node_modules/vike/",
-    "vite": "link:../demo/node_modules/vite/"
+    "@brillout/release-me": "^0.4.2"
   },
   "repository": "https://github.com/brillout/docpress",
   "license": "MIT",

package/renderer/getHydrationPromise.ts

@@ -0,0 +1,31 @@
+export { getHydrationPromise }
+export { setHydrationIsFinished }
+
+import { getGlobalObject } from '../utils/client'
+import { genPromise } from '../utils/genPromise'
+
+const globalObject = getGlobalObject<{
+  hydrationPromise: Promise<void>
+  hydrationPromiseResolve: () => void
+}>(
+  'onRenderClient.ts',
+  (() => {
+    const { promise: hydrationPromise, resolve: hydrationPromiseResolve } = genPromise()
+    return {
+      hydrationPromise,
+      hydrationPromiseResolve,
+    }
+  })(),
+)
+
+function getHydrationPromise() {
+  return globalObject.hydrationPromise
+}
+
+function setHydrationIsFinished() {
+  globalObject.hydrationPromiseResolve()
+  // Used by:
+  // - https://github.com/vikejs/vike/blob/9d67f3dd4bdfb38c835186b8147251e0e3b06657/docs/.testRun.ts#L22
+  // - https://github.com/brillout/telefunc/blob/57c942c15b7795cfda96b5106acc9e098aa509aa/docs/.testRun.ts#L26
+  ;(window as any).__docpress_hydrationFinished = true
+}

package/renderer/onRenderClient.tsx

@@ -12,10 +12,10 @@ import { installSectionUrlHashs } from '../installSectionUrlHashs'
 import { getGlobalObject } from '../utils/client'
 import { initKeyBindings } from '../initKeyBindings'
 import { initOnNavigation } from './initOnNavigation'
+import { setHydrationIsFinished } from './getHydrationPromise'
 
 const globalObject = getGlobalObject<{
   root?: ReactDOM.Root
-  renderPromiseResolve?: () => void
 }>('onRenderClient.ts', {})
 
 addEcosystemStamp()
@@ -27,11 +27,12 @@ async function onRenderClient(pageContext: PageContextClient) {
 
   // TODO: stop using any
   const pageContextResolved: PageContextResolved = (pageContext as any).pageContextResolved
+  let renderPromiseResolve!: () => void
   const renderPromise = new Promise<void>((r) => {
-    globalObject.renderPromiseResolve = r
+    renderPromiseResolve = r
   })
   let page = getPageElement(pageContext, pageContextResolved)
-  page = <OnRenderDoneHook>{page}</OnRenderDoneHook>
+  page = <OnRenderDoneHook renderPromiseResolve={renderPromiseResolve}>{page}</OnRenderDoneHook>
   const container = document.getElementById('page-view')!
   if (pageContext.isHydration) {
     globalObject.root = ReactDOM.hydrateRoot(container, page)
@@ -58,26 +59,22 @@ function onRenderStart() {
   closeMenuModal()
 }
 
-function onRenderDone() {
+function onRenderDone(renderPromiseResolve: () => void) {
   autoScrollNav()
   // TODO/refactor: use React?
   installSectionUrlHashs()
   setHydrationIsFinished()
-  globalObject.renderPromiseResolve!()
+  renderPromiseResolve()
 }
 
-function OnRenderDoneHook({ children }: { children: React.ReactNode }) {
-  useEffect(onRenderDone)
+function OnRenderDoneHook({
+  renderPromiseResolve,
+  children,
+}: { renderPromiseResolve: () => void; children: React.ReactNode }) {
+  useEffect(() => onRenderDone(renderPromiseResolve))
   return children
 }
 
-function setHydrationIsFinished() {
-  // Used by:
-  // - https://github.com/vikejs/vike/blob/9d67f3dd4bdfb38c835186b8147251e0e3b06657/docs/.testRun.ts#L22
-  // - https://github.com/brillout/telefunc/blob/57c942c15b7795cfda96b5106acc9e098aa509aa/docs/.testRun.ts#L26
-  ;(window as any).__docpress_hydrationFinished = true
-}
-
 // Used by:
 // - https://github.com/vikejs/vike/blob/87cca54f30b3c7e71867763d5723493d7eef37ab/vike/client/client-routing-runtime/prefetch.ts#L309-L312
 function addEcosystemStamp() {

package/utils/css.ts

@@ -1,5 +1,5 @@
 export function css(strings: TemplateStringsArray | string[], ...values: (string | number)[]): string {
-  // The boring part
+  // The boring part: just concatenate
   let result = strings
     .map((str, i) => {
       let s = str

package/utils/genPromise.ts

@@ -0,0 +1,5 @@
+export function genPromise<T = void>(): { promise: Promise<T>; resolve: (val: T) => void } {
+  let resolve!: (val: T) => void
+  const promise = new Promise<T>((r) => (resolve = r))
+  return { promise, resolve }
+}