@brillout/docpress 0.9.8 → 0.10.1

package/Layout.tsx

@@ -1,17 +1,19 @@
 export { Layout }
+export { MenuToggle }
 export { containerQueryMobileLayout }
 export { containerQueryMobileMenu }
 export { navLeftWidthMin }
 export { navLeftWidthMax }
 export { unexpandNav }
+export { blockMargin }
 
 import React from 'react'
-import { NavigationContent } from './navigation/Navigation'
+import { getNavItemsWithComputed, NavItem, NavItemComponent } from './NavItemComponent'
 import { EditPageNote } from './components/EditPageNote'
 import { parseTitle } from './parseTitle'
 import { usePageContext, usePageContext2 } from './renderer/usePageContext'
 import { NavSecondaryContent } from './NavSecondaryContent'
-import { closeMenuModalWithDelay, openMenuModal, toggleMenuModal } from './MenuModal'
+import { closeMenuOnMouseLeave, openMenuModal, toggleMenuModal } from './MenuModal/toggleMenuModal'
 import { MenuModal } from './MenuModal'
 import { autoScrollNav_SSR } from './autoScrollNav'
 import { SearchLink } from './docsearch/SearchLink'
@@ -20,6 +22,7 @@ import { css } from './utils/css'
 import { PassThrough } from './utils/PassTrough'
 import { Style } from './utils/Style'
 import { cls } from './utils/cls'
+import { iconBooks } from './icons'
 
 const blockMargin = 3
 const mainViewPadding = 20
@@ -242,6 +245,29 @@ function NavLeft() {
     </>
   )
 }
+function NavigationContent(props: {
+  navItems: NavItem[]
+  showOnlyRelevant?: true
+}) {
+  const pageContext = usePageContext()
+  const navItemsWithComputed = getNavItemsWithComputed(props.navItems, pageContext.urlPathname)
+
+  let navItemsRelevant = navItemsWithComputed
+  if (props.showOnlyRelevant) navItemsRelevant = navItemsRelevant.filter((navItemGroup) => navItemGroup.isRelevant)
+  const navContent = navItemsRelevant.map((navItem, i) => <NavItemComponent navItem={navItem} key={i} />)
+
+  return (
+    <div className="navigation-content" style={{ marginTop: 10 }}>
+      {navContent}
+    </div>
+  )
+}
+
+const menuLinkStyle: React.CSSProperties = {
+  height: '100%',
+  padding: '0 var(--padding-side)',
+  justifyContent: 'center',
+}
 
 function NavHead({ isNavLeft }: { isNavLeft?: true }) {
   const pageContext = usePageContext()
@@ -250,12 +276,6 @@ function NavHead({ isNavLeft }: { isNavLeft?: true }) {
   const { isLandingPage } = pageContext
   const { navMaxWidth } = pageContext.config
 
-  const linkStyle: React.CSSProperties = {
-    height: '100%',
-    padding: '0 var(--padding-side)',
-    justifyContent: 'center',
-  }
-
   const TopNavigation = pageContext2.config.TopNavigation || PassThrough
   const navSecondaryContent = (
     <div
@@ -270,7 +290,6 @@ function NavHead({ isNavLeft }: { isNavLeft?: true }) {
               position: 'absolute',
               left: '100%',
               top: 0,
-              paddingLeft: 'var(--block-margin)',
               '--padding-side': '20px',
               width: mainViewMax, // guaranteed real estate
             }),
@@ -325,8 +344,8 @@ function NavHead({ isNavLeft }: { isNavLeft?: true }) {
         >
           <NavLogo className="mobile-grow-half" />
           {!isNavLeft && <div className="desktop-grow" />}
-          <SearchLink className="mobile-grow-half" style={linkStyle} />
-          <MenuLink className="mobile-grow-full" style={linkStyle} />
+          <SearchLink className="mobile-grow-half" style={menuLinkStyle} />
+          <MenuToggleMain className="mobile-grow-full" style={menuLinkStyle} />
           {navSecondaryContent}
         </div>
       </div>
@@ -353,12 +372,17 @@ function NavHead({ isNavLeft }: { isNavLeft?: true }) {
 }
 @container container-nav-head (min-width: 501px) {
   .nav-head-content {
-    --padding-side: 35px;
+    --padding-side: 24px;
   }
   .nav-logo {
     padding: 0 var(--padding-side);
   }
 }
+@container container-nav-head (min-width: ${containerQueryMobileMenu + 100}px) {
+  .nav-head-content {
+    --padding-side: 35px;
+  }
+}
 @media(max-width: ${containerQueryMobileMenu}px) {
   .hide-on-shrink {
     display: none !important;
@@ -372,7 +396,7 @@ function NavHead({ isNavLeft }: { isNavLeft?: true }) {
     flex-grow: 1;
   }
   .desktop-fade {
-    transition: opacity 0.3s ease-in-out !important;
+    transition: opacity 0.4s ease-in-out;
   }
   html:not(.menu-modal-show) .nav-head-top:not(:hover) .desktop-fade {
     transition: opacity 0.3s ease-in-out !important;
@@ -491,7 +515,31 @@ function isProjectNameShort(projectName: string) {
 
 let onMouseIgnore: ReturnType<typeof setTimeout> | undefined
 type PropsDiv = React.HTMLProps<HTMLDivElement>
-function MenuLink(props: PropsDiv) {
+function MenuToggleMain(props: PropsDiv) {
+  return (
+    <MenuToggle menuId={0} {...props}>
+      <span className="text-docs" style={{ display: 'flex' }}>
+        <DocsIcon /> Docs
+      </span>
+      <span className="text-menu">
+        <MenuIcon /> Menu
+      </span>
+      <Style>{css`
+@media(max-width: ${containerQueryMobileMenu}px) {
+  .text-docs {
+    display: none !important;
+  }
+}
+@media(min-width: ${containerQueryMobileMenu + 1}px) {
+  .text-menu {
+    display: none;
+  }
+}
+`}</Style>
+    </MenuToggle>
+  )
+}
+function MenuToggle({ menuId, ...props }: PropsDiv & { menuId: number }) {
   return (
     <div
       {...props}
@@ -499,22 +547,23 @@ function MenuLink(props: PropsDiv) {
         height: '100%',
         display: 'flex',
         alignItems: 'center',
-        cursor: 'default',
+        cursor: 'pointer',
         userSelect: 'none',
+        ...menuLinkStyle,
         ...props.style,
       }}
-      className={['colorize-on-hover menu-toggle', props.className].filter(Boolean).join(' ')}
+      className={[`colorize-on-hover menu-toggle menu-toggle-${menuId}`, props.className].filter(Boolean).join(' ')}
       onClick={(ev) => {
         ev.preventDefault()
-        toggleMenuModal()
+        toggleMenuModal(menuId)
       }}
-      onMouseOver={() => {
+      onMouseEnter={() => {
         if (onMouseIgnore) return
-        openMenuModal()
+        openMenuModal(menuId)
       }}
       onMouseLeave={() => {
         if (onMouseIgnore) return
-        closeMenuModalWithDelay(100)
+        closeMenuOnMouseLeave()
       }}
       onTouchStart={() => {
         onMouseIgnore = setTimeout(() => {
@@ -522,32 +571,45 @@ function MenuLink(props: PropsDiv) {
         }, 1000)
       }}
     >
-      <span className="text-docs">
-        <DocsIcon /> Docs
-      </span>
-      <span className="text-menu">
-        <MenuIcon /> Menu
-      </span>
-      <Style>{css`
-@media(max-width: ${containerQueryMobileMenu}px) {
-  .text-docs {
-    display: none;
+      <Style>{getAnimation()}</Style>
+      {props.children}
+    </div>
+  )
+
+  function getAnimation() {
+    return css`
+.menu-toggle {
+  position: relative;
+  overflow: hidden;
+  z-index: 0;
+  @media (hover: hover) and (pointer: fine) {
+    .link-hover-animation &:hover::before {
+      top: 0;
+    }
   }
-}
-@media(min-width: ${containerQueryMobileMenu + 1}px) {
-  .text-menu {
-    display: none;
+  &::before {
+    position: absolute;
+    content: '';
+    height: 100%;
+    width: 100%;
+    top: var(--nav-head-height);
+    background-color: var(--active-color);
+    transition-property: top !important;
+    transition: top 0.4s ease !important;
+    z-index: -1;
   }
 }
-`}</Style>
-    </div>
-  )
+    `
+  }
 }
 function DocsIcon() {
   return (
-    <span style={{ marginRight: 'calc(var(--icon-text-padding) + 2px)' }} className="decolorize-6 desktop-fade">
-      📚
-    </span>
+    <img
+      src={iconBooks}
+      width={21}
+      style={{ marginRight: 'calc(var(--icon-text-padding) + 2px)' }}
+      className="decolorize-5 desktop-fade"
+    />
   )
 }
 function MenuIcon() {

package/{navigation → MenuModal}/Collapsible.css

@@ -1,5 +1,12 @@
 .collapsible-icon {
   display: none;
+  position: absolute;
+  top: calc(100% / 2 - 6px);
+  margin-left: 9px;
+  vertical-align: middle;
+}
+:has(> .collapsible-icon) {
+  position: relative;
 }
 .collapsible-expanded .collapsible-icon,
 .collapsible-collapsed .collapsible-icon {

package/MenuModal/NavigationWithColumnLayout.css

@@ -0,0 +1,11 @@
+:has(> .category-border) {
+  position: relative;
+}
+.category-border {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 3px;
+  z-index: 99;
+}

package/MenuModal/NavigationWithColumnLayout.tsx

@@ -0,0 +1,253 @@
+export { NavigationWithColumnLayout }
+
+import React, { useEffect, useState } from 'react'
+import { assert } from '../utils/server'
+import { getViewportWidth } from '../utils/getViewportWidth'
+import { containerQueryMobileMenu, navLeftWidthMax, navLeftWidthMin } from '../Layout'
+import { throttle } from '../utils/throttle'
+import { Collapsible } from './Collapsible'
+import { ColumnMap, getNavItemsWithComputed, NavItem, NavItemComponent, NavItemComputed } from '../NavItemComponent'
+import { usePageContext } from '../renderer/usePageContext'
+import './NavigationWithColumnLayout.css'
+import { Style } from '../utils/Style'
+import { css } from '../utils/css'
+
+const marginBottomOnExpand = 30
+function NavigationWithColumnLayout(props: { navItems: NavItem[] }) {
+  const pageContext = usePageContext()
+  const navItemsWithComputed = getNavItemsWithComputed(props.navItems, pageContext.urlPathname)
+  let [viewportWidth, setViewportWidth] = useState<number | undefined>()
+  const updateviewportwidth = () => setViewportWidth(getViewportWidth())
+  useEffect(() => {
+    updateviewportwidth()
+    window.addEventListener('resize', throttle(updateviewportwidth, 300), { passive: true })
+  })
+  const navItemsByColumnLayouts = getNavItemsByColumnLayouts(navItemsWithComputed, viewportWidth)
+  return (
+    <>
+      <Style>{getStyle()}</Style>
+      <div className="navigation-content" style={{ paddingTop: 10 }}>
+        {navItemsByColumnLayouts.map((columnLayout, i) => (
+          <div id={`menu-navigation-${i}`} className="menu-navigation" key={i}>
+            {columnLayout.isFullWidthCategory ? (
+              <div style={{ marginTop: 0 }}>
+                <ColumnsWrapper numberOfColumns={columnLayout.columns.length}>
+                  <Collapsible
+                    head={(onClick) => <NavItemComponent navItem={columnLayout.navItemLevel1} onClick={onClick} />}
+                    disabled={columnLayout.columns.length > 1}
+                    collapsedInit={!columnLayout.navItemLevel1.isRelevant}
+                    marginBottomOnExpand={marginBottomOnExpand}
+                  >
+                    <ColumnsLayout className="collapsible">
+                      {columnLayout.columns.map((column, j) => (
+                        <Column key={j}>
+                          {column.navItems.map((navItem, k) => (
+                            <NavItemComponent key={k} navItem={navItem} />
+                          ))}
+                        </Column>
+                      ))}
+                      <CategoryBorder navItemLevel1={columnLayout.navItemLevel1} />
+                    </ColumnsLayout>
+                  </Collapsible>
+                </ColumnsWrapper>
+              </div>
+            ) : (
+              <ColumnsWrapper numberOfColumns={columnLayout.columns.length}>
+                <ColumnsLayout>
+                  {columnLayout.columns.map((column, j) => (
+                    <Column key={j}>
+                      {column.categories.map((category, k) => (
+                        <div key={k} style={{ marginBottom: 0 }}>
+                          <Collapsible
+                            head={(onClick) => <NavItemComponent navItem={category.navItemLevel1} onClick={onClick} />}
+                            disabled={columnLayout.columns.length > 1}
+                            collapsedInit={!category.navItemLevel1.isRelevant}
+                            marginBottomOnExpand={marginBottomOnExpand}
+                          >
+                            {category.navItems.map((navItem, l) => (
+                              <NavItemComponent key={l} navItem={navItem} />
+                            ))}
+                            <CategoryBorder navItemLevel1={category.navItemLevel1} />
+                          </Collapsible>
+                        </div>
+                      ))}
+                    </Column>
+                  ))}
+                </ColumnsLayout>
+              </ColumnsWrapper>
+            )}
+          </div>
+        ))}
+      </div>
+    </>
+  )
+
+  function getStyle() {
+    const style = css`
+@media(min-width: ${containerQueryMobileMenu + 1}px) {
+ ${navItemsByColumnLayouts
+   .map(
+     (_, i) =>
+       css`
+html:not(.menu-modal-show-${i}) #menu-navigation-${i} {
+  display: none;
+}
+html.menu-modal-show.menu-modal-show-${i} {
+  .menu-toggle-${i} {
+    color: black !important;
+    cursor: default !important;
+    [class^='decolorize-'],
+    [class*=' decolorize-'] {
+      filter: grayscale(0) opacity(1) !important;
+    }
+    &::before {
+      top: 0;
+    }
+  }
+}
+`,
+   )
+   .join('')}
+}
+`
+    return style
+  }
+}
+function Column({ children }: { children: React.ReactNode }) {
+  return (
+    <div
+      style={{
+        flexGrow: 1,
+        maxWidth: navLeftWidthMax,
+        display: 'flex',
+        flexDirection: 'column',
+      }}
+    >
+      {children}
+    </div>
+  )
+}
+function ColumnsWrapper({ children, numberOfColumns }: { children: React.ReactNode; numberOfColumns: number }) {
+  return (
+    <div
+      style={{
+        width: numberOfColumns * (navLeftWidthMax + 20),
+        maxWidth: '100%',
+        margin: 'auto',
+      }}
+    >
+      {children}
+    </div>
+  )
+}
+function ColumnsLayout({ children, className }: { children: React.ReactNode; className?: string }) {
+  return (
+    <div
+      className={className}
+      style={{
+        display: 'flex',
+        justifyContent: 'space-between',
+      }}
+    >
+      {children}
+    </div>
+  )
+}
+function CategoryBorder({ navItemLevel1 }: { navItemLevel1: NavItemComputed }) {
+  assert(navItemLevel1.level === 1)
+  return <div className="category-border" style={{ background: navItemLevel1.color! }} />
+}
+
+type NavItemsByColumnLayout =
+  | {
+      columns: {
+        categories: {
+          navItemLevel1: NavItemComputed
+          navItems: NavItemComputed[]
+        }[]
+      }[]
+      isFullWidthCategory: false
+    }
+  | {
+      navItemLevel1: NavItemComputed
+      columns: { navItems: NavItemComputed[] }[]
+      isFullWidthCategory: true
+    }
+function getNavItemsByColumnLayouts(navItems: NavItemComputed[], viewportWidth: number = 0): NavItemsByColumnLayout[] {
+  const navItemsByColumnEntries = getNavItemsByColumnEntries(navItems)
+  const numberOfColumnsMax = Math.floor(viewportWidth / navLeftWidthMin) || 1
+  const navItemsByColumnLayouts: NavItemsByColumnLayout[] = navItemsByColumnEntries.map(
+    ({ columnEntries, isFullWidthCategory }) => {
+      const numberOfColumns = Math.min(numberOfColumnsMax, columnEntries.length)
+      if (!isFullWidthCategory) {
+        const columns: {
+          categories: {
+            navItemLevel1: NavItemComputed
+            navItems: NavItemComputed[]
+          }[]
+        }[] = []
+        columnEntries.forEach((columnEntry) => {
+          const idx = numberOfColumns === 1 ? 0 : columnEntry.columnMap[numberOfColumns]!
+          assert(idx >= 0)
+          columns[idx] ??= { categories: [] }
+          const navItemLevel1 = columnEntry.navItems[0]
+          const navItems = columnEntry.navItems.slice(1)
+          columns[idx].categories.push({ navItemLevel1, navItems })
+        })
+        const navItemsByColumnLayout: NavItemsByColumnLayout = { columns, isFullWidthCategory }
+        return navItemsByColumnLayout
+      } else {
+        let navItemLevel1: NavItemComputed
+        const columns: { navItems: NavItemComputed[] }[] = []
+        columnEntries.forEach((columnEntry, i) => {
+          const idx = numberOfColumns === 1 ? 0 : columnEntry.columnMap[numberOfColumns]!
+          assert(idx >= 0)
+          columns[idx] ??= { navItems: [] }
+          let { navItems } = columnEntry
+          if (i === 0) {
+            navItemLevel1 = navItems[0]
+            navItems = navItems.slice(1)
+          }
+          columns[idx].navItems.push(...navItems)
+        })
+        const navItemsByColumnLayout: NavItemsByColumnLayout = {
+          columns,
+          navItemLevel1: navItemLevel1!,
+          isFullWidthCategory,
+        }
+        return navItemsByColumnLayout
+      }
+    },
+  )
+  return navItemsByColumnLayouts
+}
+type NavItemsByColumnEntries = { columnEntries: ColumnEntry[]; isFullWidthCategory: boolean }[]
+type ColumnEntry = { navItems: NavItemComputed[]; columnMap: ColumnMap }
+function getNavItemsByColumnEntries(navItems: NavItemComputed[]): NavItemsByColumnEntries {
+  const navItemsByColumnEntries: NavItemsByColumnEntries = []
+  let columnEntries: ColumnEntry[] = []
+  let columnEntry: ColumnEntry
+  let isFullWidthCategory: boolean | undefined
+  navItems.forEach((navItem) => {
+    if (navItem.level === 1) {
+      const isFullWidthCategoryPrevious = isFullWidthCategory
+      isFullWidthCategory = !!navItem.menuModalFullWidth
+      if (isFullWidthCategoryPrevious !== undefined && isFullWidthCategoryPrevious !== isFullWidthCategory) {
+        navItemsByColumnEntries.push({ columnEntries, isFullWidthCategory: isFullWidthCategoryPrevious })
+        columnEntries = []
+      }
+    }
+    assert(isFullWidthCategory !== undefined)
+    if (navItem.isColumnEntry) {
+      assert(navItem.level === 1 || navItem.level === 4)
+      columnEntry = { navItems: [navItem], columnMap: navItem.isColumnEntry }
+      columnEntries.push(columnEntry)
+    } else {
+      assert(navItem.level !== 1)
+      columnEntry.navItems.push(navItem)
+    }
+  })
+  assert(isFullWidthCategory !== undefined)
+  navItemsByColumnEntries.push({ columnEntries, isFullWidthCategory })
+  return navItemsByColumnEntries
+}

package/MenuModal/toggleMenuModal.ts

@@ -0,0 +1,132 @@
+export { toggleMenuModal }
+export { openMenuModal }
+export { keepMenuModalOpen }
+export { closeMenuModal }
+export { closeMenuOnMouseLeave }
+export { addListenerOpenMenuModal }
+
+import { containerQueryMobileLayout } from '../Layout'
+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) {
+  if (menuModalLock) {
+    if (menuNavigationId === undefined) {
+      clearTimeout(menuModalLock?.timeout)
+      menuModalLock = undefined
+      return
+    }
+    menuModalLock.idNext = menuNavigationId
+    return
+  }
+  const { classList } = document.documentElement
+  classList.add('menu-modal-show')
+  if (menuNavigationId !== undefined) {
+    const currentModalId = getCurrentMenuId()
+    if (currentModalId === menuNavigationId) return
+    if (currentModalId !== null) {
+      classList.remove(`menu-modal-show-${currentModalId}`)
+    }
+    classList.add(`menu-modal-show-${menuNavigationId}`)
+  }
+  listener?.()
+}
+let listener: () => void | undefined
+function addListenerOpenMenuModal(cb: () => void) {
+  listener = cb
+}
+function closeMenuModal() {
+  document.documentElement.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 menuModalLock:
+  | {
+      idCurrent: number
+      idNext: number | undefined
+      timeout: NodeJS.Timeout
+    }
+  | undefined
+function closeMenuOnMouseLeave() {
+  const currentModalId = getCurrentMenuId()
+  if (currentModalId === null) return
+  const timeout = setTimeout(() => {
+    const { idCurrent, idNext } = menuModalLock!
+    menuModalLock = undefined
+    if (idNext === idCurrent) return
+    if (idNext === undefined) {
+      closeAndForbidKeepOpen()
+    } else {
+      openMenuModal(idNext)
+    }
+  }, 100)
+  clearTimeout(menuModalLock?.timeout)
+  menuModalLock = {
+    idCurrent: currentModalId,
+    idNext: undefined,
+    timeout,
+  }
+}
+function getCurrentMenuId(): null | number {
+  const { classList } = document.documentElement
+  const prefix = 'menu-modal-show-'
+  const cls = Array.from(classList).find((cls) => cls.startsWith(prefix))
+  if (!cls) return null
+  return parseInt(cls.slice(prefix.length), 10)
+}
+
+function initScrollListener() {
+  if (!isBrowser()) return
+  window.addEventListener('scroll', closeAndForbidKeepOpen, { 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()
+  } else {
+    openMenuModal(menuId)
+    if (getViewportWidth() < containerQueryMobileLayout) autoScroll()
+  }
+}
+
+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] 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
+}