@brillout/docpress 0.8.14 → 0.8.16

package/MenuModal.tsx

@@ -2,30 +2,38 @@ export { MenuModal }
 export { toggleMenuModal }
 export { openMenuModal }
 export { closeMenuModal }
+export { closeMenuModalWithDelay }
 
 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 { containerQueryMobileLayout, containerQueryMobileMenu } from './Layout'
+import { NavSecondaryContent } from './NavSecondaryContent'
 import { getViewportWidth } from './utils/getViewportWidth'
+import { Style } from './utils/Style'
 
-initCloseListeners()
+let closeMenuModalPending: NodeJS.Timeout
 
 function MenuModal({ isTopNav }: { isTopNav: boolean }) {
   return (
     <>
-      <style>{getStyle()}</style>
+      <Style>{getStyle()}</Style>
       <div
         id="menu-modal"
         className="link-hover-animation add-transition"
         style={{
           position: isTopNav ? 'absolute' : 'fixed',
           width: '100%',
-          height: 'calc(100vh - var(--top-nav-height))',
-          top: 'var(--top-nav-height)',
+          /* Firefox doesn't support `dvh` yet: https://caniuse.com/?search=dvh
+           * - Always use `dvh` instead of `vh` once Firefox supports it.
+           * - We use dvh because of mobile: https://stackoverflow.com/questions/37112218/css3-100vh-not-constant-in-mobile-browser/72245072#72245072
+          height: 'calc(100dvh - var(--nav-head-height))',
+          /*/
+          height: 'calc(100vh - var(--nav-head-height))',
+          maxHeight: 'calc(100dvh - var(--nav-head-height))',
+          //*/
+          top: 'var(--nav-head-height)',
           left: 0,
           zIndex: 9999,
           overflow: 'scroll',
@@ -40,20 +48,16 @@ function MenuModal({ isTopNav }: { isTopNav: boolean }) {
             // Place <LinksBottom /> to the bottom
             display: 'flex',
             flexDirection: 'column',
-            minHeight: 'calc(100vh - var(--top-nav-height))',
+            minHeight: 'calc(100dvh - var(--nav-head-height))',
             justifyContent: 'space-between',
             // We don't set `container` to parent beacuse of a Chrome bug (showing a blank <MenuModal>)
-            containerType: 'inline-size',
+            container: 'container-viewport / inline-size',
           }}
         >
           <Nav />
-          {/* TODO/now: use for mobile
-          <LinksBottom />
-          */}
+          <NavSecondary className="show-only-for-mobile" />
         </div>
-        {/* TODO/now: use for mobile
-        <CloseButton />
-        */}
+        <CloseButton className="show-only-for-mobile" />
       </div>
     </>
   )
@@ -63,15 +67,17 @@ function Nav() {
   const navItems = pageContext.navItemsAll
   return <NavigationContent columnLayout={true} navItems={navItems} />
 }
-function LinksBottom() {
+function NavSecondary({ className }: { className: string }) {
   return (
     <div
+      className={className}
       style={{
         display: 'flex',
         justifyContent: 'center',
+        marginTop: 20,
       }}
     >
-      <Links style={{ height: 70 }} />
+      <NavSecondaryContent style={{ height: 70 }} />
     </div>
   )
 }
@@ -86,17 +92,28 @@ html:not(.menu-modal-show) #menu-modal {
 html.menu-modal-show {
   overflow: hidden !important;
 }
-@container(min-width: ${containerQueryMobile}px) {
+@container container-viewport (min-width: ${containerQueryMobileLayout}px) {
   #menu-modal .nav-item-level-3 {
     display: none;
   }
 }
+@media(max-width: ${containerQueryMobileMenu}px) {
+  #menu-modal {
+    --nav-head-height: 0px !important;
+  }
+}
+@media(min-width: ${containerQueryMobileMenu + 1}px) {
+  .show-only-for-mobile {
+    display: none !important;
+  }
+}
 `
 }
 
-function CloseButton() {
+function CloseButton({ className }: { className: string }) {
   return (
     <div
+      className={className}
       onClick={toggleMenuModal}
       style={{ position: 'fixed', top: 0, right: 0, zIndex: 10, padding: 11, cursor: 'pointer' }}
       aria-label={'Escape\nCtrl\xa0+\xa0M'}
@@ -128,7 +145,10 @@ function CloseButton() {
 
 function toggleMenuModal() {
   document.documentElement.classList.toggle('menu-modal-show')
-  if (document.documentElement.classList.contains('menu-modal-show') && getViewportWidth() < containerQueryMobile) {
+  if (
+    document.documentElement.classList.contains('menu-modal-show') &&
+    getViewportWidth() < containerQueryMobileLayout
+  ) {
     autoScroll()
   }
 }
@@ -136,43 +156,31 @@ function autoScroll() {
   const nav = document.querySelector('#menu-modal .navigation-content')!
   const href = window.location.pathname
   const navLinks = Array.from(nav.querySelectorAll(`a[href="${href}"]`))
-  const navLink = navLinks[0]
+  const navLink = navLinks[0] as HTMLElement | undefined
   if (!navLink) return
+  // None of the following seemes to be working: https://stackoverflow.com/questions/19669786/check-if-element-is-visible-in-dom
+  if (findCollapsibleEl(navLink)!.classList.contains('collapsible-collapsed')) return
   navLink.scrollIntoView({
     behavior: 'instant',
     block: 'center',
     inline: 'start',
   })
 }
+function findCollapsibleEl(navLink: HTMLElement | undefined) {
+  let parentEl: HTMLElement | null | undefined = navLink
+  while (parentEl) {
+    if (parentEl.classList.contains('collapsible')) return parentEl
+    parentEl = parentEl.parentElement
+  }
+  return null
+}
 function openMenuModal() {
+  clearTimeout(closeMenuModalPending)
   document.documentElement.classList.add('menu-modal-show')
 }
 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: MouseEvent) {
-  if (ev.altKey || ev.ctrlKey || ev.metaKey || ev.shiftKey) return
-  const linkTag = findLinkTag(ev.target as HTMLElement)
-  if (!linkTag) return
-  const href = linkTag.getAttribute('href')
-  if (!href) return
-  if (!href.startsWith('/') && !href.startsWith('#')) return
-  closeMenuModal()
-}
-function findLinkTag(target: HTMLElement): null | HTMLElement {
-  while (target.tagName !== 'A') {
-    const { parentNode } = target
-    if (!parentNode) {
-      return null
-    }
-    target = parentNode as HTMLElement
-  }
-  return target
+function closeMenuModalWithDelay(delay: number) {
+  closeMenuModalPending = setTimeout(closeMenuModal, delay)
 }

package/{Links.tsx → NavSecondaryContent.tsx}

@@ -1,5 +1,4 @@
-// TODO/refactor: rename
-export { Links }
+export { NavSecondaryContent }
 
 import React from 'react'
 import iconGithub from './icons/github.svg'
@@ -10,7 +9,7 @@ import iconLanguages from './icons/languages.svg'
 import { usePageContext } from './renderer/usePageContext'
 import '@docsearch/css'
 
-function Links({ style }: { style?: React.CSSProperties }) {
+function NavSecondaryContent(props: { style?: React.CSSProperties; className?: string }) {
   const pageContext = usePageContext()
   const { projectInfo, i18n } = pageContext.config
   const iconI18n = !i18n ? null : (
@@ -23,13 +22,11 @@ function Links({ style }: { style?: React.CSSProperties }) {
   )
   return (
     <div
+      {...props}
       style={{
         display: 'flex',
         alignItems: 'center',
-        paddingTop: 0,
-        justifyContent: 'left',
-        height: '100%',
-        ...style,
+        ...props.style,
       }}
     >
       {iconI18n}
@@ -53,7 +50,7 @@ function ChangelogButton() {
       style={{
         display: 'flex',
         alignItems: 'center',
-        padding: 10,
+        padding: '0 5px',
         height: '100%',
       }}
     >

package/components/HorizontalLine.tsx

@@ -1,10 +1,11 @@
-import React from 'react'
-
 export { HorizontalLine }
 
+import React from 'react'
+import { cls } from '../utils/cls'
+
 function HorizontalLine({ primary }: { primary?: true }) {
   return (
-    <div className={'header-separator-line ' + (primary ? 'primary' : '')} style={{ textAlign: 'center' }}>
+    <div className={cls(primary && 'primary')} style={{ textAlign: 'center' }}>
       <hr
         style={{
           display: 'inline-block',

package/components/Note.tsx

@@ -93,8 +93,12 @@ function NoteGeneric({
   return (
     <blockquote className={className} style={style}>
       <div style={{ marginBottom: 20 }} />
-      <span style={{ fontFamily: 'emoji' }}>{icon}</span>
-      <span style={{ width: iconMargin ?? undefined, display: 'inline-block' }}></span>{' '}
+      {icon && (
+        <>
+          <span style={{ fontFamily: 'emoji' }}>{icon}</span>
+          <span style={{ width: iconMargin ?? undefined, display: 'inline-block' }}></span>{' '}
+        </>
+      )}
       <div className="blockquote-content">{children}</div>
       <div style={{ marginTop: 20 }} />
     </blockquote>

package/config/resolveHeadingsData.ts

@@ -9,12 +9,12 @@ import type {
 } from '../types/Heading'
 import type { Config } from '../types/Config'
 import { getConfig } from './getConfig'
-import type { NavItem, NavItemAll } from '../navigation/Navigation'
+import type { NavItem } from '../navigation/Navigation'
 import type { LinkData } from '../components'
 import type { Exports, PageContextOriginal } from './resolvePageContext'
 import pc from '@brillout/picocolors'
 import { parseTitle } from '../parseTitle'
-import { determineColumnEntries } from '../renderer/determineColumnEntries'
+import { determineNavItemsColumnLayout } from '../renderer/determineNavItemsColumnLayout'
 assert(!isBrowser())
 
 type PageSectionResolved = {
@@ -53,19 +53,17 @@ function resolveHeadingsData(pageContext: PageContextOriginal) {
     ...headingsDetachedResolved.map(headingToLinkData),
   ]
 
-  // TODO/refactor: remove navItems
-  let navItems: NavItem[]
-  let navItemsAll: NavItemAll[]
+  let navItemsAll: NavItem[]
+  let navItemsDetached: NavItem[] | undefined
   {
     const navItemsPageSections = pageSectionsResolved
       .filter((pageSection) => pageSection.pageSectionLevel === 2)
       .map(pageSectionToNavItem)
     navItemsAll = headingsResolved.map(headingToNavItem)
-    determineColumnEntries(navItemsAll)
+    determineNavItemsColumnLayout(navItemsAll)
     if (isDetachedPage) {
-      navItems = [headingToNavItem(activeHeading), ...navItemsPageSections]
+      navItemsDetached = [headingToNavItem(activeHeading), ...navItemsPageSections]
     } else {
-      navItems = navItemsAll
       const activeHeadingIndex = navItemsAll.findIndex((navItem) => navItem.url === pageContext.urlPathname)
       assert(activeHeadingIndex >= 0)
       navItemsPageSections.forEach((navItem, i) => {
@@ -75,9 +73,8 @@ function resolveHeadingsData(pageContext: PageContextOriginal) {
   }
 
   const pageContextAddendum = {
-    isDetachedPage,
-    navItems,
     navItemsAll,
+    navItemsDetached,
     linksAll,
     isLandingPage,
     pageTitle,

package/css/code/block.css

@@ -22,27 +22,27 @@ figure[data-rehype-pretty-code-figure] {
 }
 
 /* 821px screen width => the width of code blocks isn't shrinked anymore => no need to reduce the font-size of code blocks */
-@container(max-width: 820px) {
+@container container-viewport (max-width: 820px) {
   pre > code {
     font-size: 0.9em !important;
   }
 }
-@container(max-width: 720px) {
+@container container-viewport (max-width: 720px) {
   pre > code {
     font-size: 0.8em !important;
   }
 }
-@container(max-width: 620px) {
+@container container-viewport (max-width: 620px) {
   pre > code {
     font-size: 0.7em !important;
   }
 }
-@container(max-width: 550px) {
+@container container-viewport (max-width: 550px) {
   pre > code {
     font-size: 0.6em !important;
   }
 }
-@container(max-width: 450px) {
+@container container-viewport (max-width: 450px) {
   pre > code {
     font-size: 0.5em !important;
   }

package/css/code/inline.css

@@ -8,7 +8,7 @@ code {
  *  - Allow them on mobile
  *  - Allow them for `<code long>`
  */
-@container(max-width: 500px) {
+@container container-viewport (max-width: 500px) {
   code {
     word-break: break-word;
   }

package/css/colorize-on-hover.css

@@ -22,7 +22,7 @@
 .link-hover-animation a,
 .link-hover-animation .menu-toggle,
 .add-transition {
-  transition: all 0.4s ease-in-out;
+  transition: none 0.4s ease-in-out;
 }
 [class^='decolorize-'],
 [class*=' decolorize-'] {
@@ -30,7 +30,7 @@
 }
 .link-hover-animation a,
 .menu-toggle {
-  transition-property: color, background-color;
+  transition-property: color, background-color !important;
 }
 
 .decolorize-7 {

package/dist/Layout.d.ts

@@ -1,11 +1,15 @@
 export { Layout };
-export { containerQueryMobile };
-export { navWidthMin };
-export { navWidthMax };
+export { containerQueryMobileLayout };
+export { containerQueryMobileMenu };
+export { navLeftWidthMin };
+export { navLeftWidthMax };
+export { unexpandNav };
 import React from 'react';
-declare const navWidthMax = 370;
-declare const navWidthMin = 300;
-declare const containerQueryMobile: number;
+declare const navLeftWidthMax = 370;
+declare const navLeftWidthMin = 300;
+declare const containerQueryMobileMenu = 1000;
+declare const containerQueryMobileLayout: number;
 declare function Layout({ children }: {
     children: React.ReactNode;
 }): React.JSX.Element;
+declare function unexpandNav(): void;