@brillout/docpress 0.8.13 → 0.8.15

package/MenuModal.tsx

@@ -1,58 +1,53 @@
 export { MenuModal }
 export { toggleMenuModal }
+export { openMenuModal }
 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 { containerQueryMobileLayout, containerQueryMobileMenu } from './Layout'
+import { NavSecondaryContent } from './NavSecondaryContent'
 import { getViewportWidth } from './utils/getViewportWidth'
+import { Style } from './utils/Style'
 
-initCloseListeners()
-
-function MenuModal() {
+function MenuModal({ isTopNav }: { isTopNav: boolean }) {
   return (
     <>
-      <style>{getStyle()}</style>
+      <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: '100vh',
-          maxHeight: '100dvh',
-          //*/
-          top: 0,
+          height: 'calc(100vh - var(--nav-head-height))',
+          top: 'var(--nav-head-height)',
           left: 0,
           zIndex: 9999,
           overflow: 'scroll',
-          background: '#eaeaea',
+          background: '#ededef',
+          transitionProperty: 'opacity',
         }}
+        onMouseOver={openMenuModal}
+        onMouseLeave={closeMenuModal}
       >
         <div
           style={{
             // Place <LinksBottom /> to the bottom
             display: 'flex',
             flexDirection: 'column',
-            minHeight: '100dvh',
+            minHeight: 'calc(100vh - 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 />
-          <LinksBottom />
+          <NavSecondary className="show-only-for-mobile" />
         </div>
-        <CloseButton />
+        <CloseButton className="show-only-for-mobile" />
       </div>
     </>
   )
@@ -62,15 +57,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>
   )
 }
@@ -78,23 +75,35 @@ 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 {
   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'}
@@ -126,7 +135,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()
   }
 }
@@ -134,40 +146,27 @@ 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 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 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 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 openMenuModal() {
+  document.documentElement.classList.add('menu-modal-show')
 }
-function findLinkTag(target: HTMLElement): null | HTMLElement {
-  while (target.tagName !== 'A') {
-    const { parentNode } = target
-    if (!parentNode) {
-      return null
-    }
-    target = parentNode as HTMLElement
-  }
-  return target
+function closeMenuModal() {
+  document.documentElement.classList.remove('menu-modal-show')
 }

package/{Links.tsx → NavSecondaryContent.tsx}

@@ -1,3 +1,5 @@
+export { NavSecondaryContent }
+
 import React from 'react'
 import iconGithub from './icons/github.svg'
 import iconTwitter from './icons/twitter.svg'
@@ -7,9 +9,7 @@ import iconLanguages from './icons/languages.svg'
 import { usePageContext } from './renderer/usePageContext'
 import '@docsearch/css'
 
-export { Links }
-
-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 : (
@@ -22,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}
@@ -52,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/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

@@ -4,18 +4,33 @@
  */
 @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 .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: none 0.4s ease-in-out;
+}
+[class^='decolorize-'],
+[class*=' decolorize-'] {
+  transition-property: filter;
+}
+.link-hover-animation a,
+.menu-toggle {
+  transition-property: color, background-color !important;
 }
 
 .decolorize-7 {
@@ -31,10 +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);
 }

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;