@brillout/docpress 0.15.13 → 0.16.0

package/MenuModal/NavigationWithColumnLayout.tsx

@@ -3,7 +3,7 @@ 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 { viewTablet, navLeftWidthMax, navLeftWidthMin, bodyMaxWidth } from '../Layout'
 import { throttle } from '../utils/throttle'
 import { Collapsible } from './Collapsible'
 import { ColumnMap, getNavItemsWithComputed, NavItem, NavItemComponent, NavItemComputed } from '../NavItemComponent'
@@ -22,7 +22,18 @@ function NavigationWithColumnLayout(props: { navItems: NavItem[] }) {
     updateviewportwidth()
     window.addEventListener('resize', throttle(updateviewportwidth, 300), { passive: true })
   })
-  const navItemsByColumnLayouts = getNavItemsByColumnLayouts(navItemsWithComputed, viewportWidth)
+  const availableWidth = viewportWidth && Math.min(viewportWidth, bodyMaxWidth)
+  const navItemsByColumnLayouts = getNavItemsByColumnLayouts(navItemsWithComputed, availableWidth)
+  const columnWidthBase = navLeftWidthMax + 20
+  const maxColumns = Math.max(...navItemsByColumnLayouts.map((layout) => layout.columns.length), 1)
+  const widthMax = maxColumns * columnWidthBase
+  const getColumnsWrapperStyle = (columnLayout: NavItemsByColumnLayout) => {
+    const widthColumn = columnLayout.columns.length * columnWidthBase
+    return {
+      width: Math.max(700, widthColumn),
+      maxWidth: `min(100%, ${widthMax}px)`,
+    }
+  }
   return (
     <>
       <Style>{getStyle()}</Style>
@@ -40,10 +51,10 @@ function NavigationWithColumnLayout(props: { navItems: NavItem[] }) {
           >
             {columnLayout.isFullWidthCategory ? (
               <div style={{ marginTop: 0 }}>
-                <ColumnsWrapper numberOfColumns={columnLayout.columns.length}>
+                <ColumnsWrapper style={getColumnsWrapperStyle(columnLayout)}>
                   <Collapsible
                     head={(onClick) => <NavItemComponent navItem={columnLayout.navItemLevel1} onClick={onClick} />}
-                    disabled={columnLayout.columns.length > 1}
+                    disabled={maxColumns > 1}
                     collapsedInit={!columnLayout.navItemLevel1.isRelevant}
                     marginBottomOnExpand={marginBottomOnExpand}
                   >
@@ -61,7 +72,7 @@ function NavigationWithColumnLayout(props: { navItems: NavItem[] }) {
                 </ColumnsWrapper>
               </div>
             ) : (
-              <ColumnsWrapper numberOfColumns={columnLayout.columns.length}>
+              <ColumnsWrapper style={getColumnsWrapperStyle(columnLayout)}>
                 <ColumnsLayout>
                   {columnLayout.columns.map((column, j) => (
                     <Column key={j}>
@@ -69,7 +80,7 @@ function NavigationWithColumnLayout(props: { navItems: NavItem[] }) {
                         <div key={k} style={{ marginBottom: 0 }}>
                           <Collapsible
                             head={(onClick) => <NavItemComponent navItem={category.navItemLevel1} onClick={onClick} />}
-                            disabled={columnLayout.columns.length > 1}
+                            disabled={maxColumns > 1}
                             collapsedInit={!category.navItemLevel1.isRelevant}
                             marginBottomOnExpand={marginBottomOnExpand}
                           >
@@ -93,7 +104,7 @@ function NavigationWithColumnLayout(props: { navItems: NavItem[] }) {
 
   function getStyle() {
     const style = css`
-@media(min-width: ${containerQueryMobileMenu + 1}px) {
+@media(min-width: ${viewTablet + 1}px) {
   .menu-navigation-content {
     position: absolute;
     width: 100%;
@@ -165,14 +176,14 @@ function Column({ children }: { children: React.ReactNode }) {
     </div>
   )
 }
-function ColumnsWrapper({ children, numberOfColumns }: { children: React.ReactNode; numberOfColumns: number }) {
+function ColumnsWrapper({ children, style }: { children: React.ReactNode; style: React.CSSProperties }) {
   return (
     <div
+      className="columns-wrapper"
       style={{
-        width: numberOfColumns * (navLeftWidthMax + 20),
-        maxWidth: '100%',
         paddingLeft: 3,
         margin: 'auto',
+        ...style,
       }}
     >
       {children}
@@ -212,9 +223,9 @@ type NavItemsByColumnLayout =
       columns: { navItems: NavItemComputed[] }[]
       isFullWidthCategory: true
     }
-function getNavItemsByColumnLayouts(navItems: NavItemComputed[], viewportWidth: number = 0): NavItemsByColumnLayout[] {
+function getNavItemsByColumnLayouts(navItems: NavItemComputed[], availableWidth: number = 0): NavItemsByColumnLayout[] {
   const navItemsByColumnEntries = getNavItemsByColumnEntries(navItems)
-  const numberOfColumnsMax = Math.floor(viewportWidth / navLeftWidthMin) || 1
+  const numberOfColumnsMax = Math.floor(availableWidth / navLeftWidthMin) || 1
   const navItemsByColumnLayouts: NavItemsByColumnLayout[] = navItemsByColumnEntries.map(
     ({ columnEntries, isFullWidthCategory }) => {
       const numberOfColumns = Math.min(numberOfColumnsMax, columnEntries.length)
@@ -269,17 +280,23 @@ function getNavItemsByColumnEntries(navItems: NavItemComputed[]): NavItemsByColu
   let isFullWidthCategory: boolean | undefined
   navItems.forEach((navItem) => {
     if (navItem.level === 1) {
-      const isFullWidthCategoryPrevious = isFullWidthCategory
-      isFullWidthCategory = !!navItem.menuModalFullWidth
-      if (isFullWidthCategoryPrevious !== undefined && isFullWidthCategoryPrevious !== isFullWidthCategory) {
+      if (isFullWidthCategory) {
+        assert(navItem.menuModalFullWidth)
+      }
+      const isFullWidthCategoryPrevious = !!isFullWidthCategory
+      if (navItem.menuModalFullWidth) {
+        isFullWidthCategory = true
+        // Flush
         navItemsByColumnEntries.push({ columnEntries, isFullWidthCategory: isFullWidthCategoryPrevious })
         columnEntries = []
+      } else {
+        isFullWidthCategory = false
       }
     }
     assert(isFullWidthCategory !== undefined)
-    if (navItem.isColumnEntry) {
+    if (navItem.isPotentialColumn) {
       assert(navItem.level === 1 || navItem.level === 4)
-      columnEntry = { navItems: [navItem], columnMap: navItem.isColumnEntry }
+      columnEntry = { navItems: [navItem], columnMap: navItem.isPotentialColumn }
       columnEntries.push(columnEntry)
     } else {
       assert(navItem.level !== 1)

package/MenuModal/toggleMenuModal.ts

@@ -1,19 +1,19 @@
 export { toggleMenuModal }
-export { openMenuModal }
-export { keepMenuModalOpen }
 export { closeMenuModal }
-export { coseMenuModalOnMouseLeave }
+// Hover handling
+export { ignoreHoverOnTouchStart }
+export { openMenuModalOnMouseEnter }
+export { keepMenuModalOpenOnMouseOver }
+export { closeMenuModalOnMouseLeave }
+export { closeMenuModalOnMouseLeaveToggle }
 
-import { containerQueryMobileMenu } from '../Layout'
+import { viewTablet } from '../Layout'
 import { getHydrationPromise } from '../renderer/getHydrationPromise'
 import { getViewportWidth } from '../utils/getViewportWidth'
 import { isBrowser } from '../utils/isBrowser'
 
 initScrollListener()
 
-function keepMenuModalOpen() {
-  open()
-}
 function openMenuModal(menuNavigationId: number) {
   open(menuNavigationId)
 }
@@ -72,7 +72,8 @@ let toggleLock:
       timeoutAction: NodeJS.Timeout
     }
   | undefined
-function coseMenuModalOnMouseLeave(menuId: number) {
+function closeMenuModalOnMouseLeaveToggle(menuId: number) {
+  if (ignoreHover()) return
   clearTimeout(toggleLock?.timeoutAction)
   const timeoutAction = setTimeout(action, 100)
   toggleLock = {
@@ -111,7 +112,7 @@ function toggleMenuModal(menuId: number) {
     closeMenuModal()
   } else {
     openMenuModal(menuId)
-    if (getViewportWidth() < containerQueryMobileMenu) autoScroll()
+    if (isMobileNav()) autoScroll()
   }
 }
 
@@ -137,3 +138,29 @@ function findCollapsibleEl(navLink: HTMLElement | undefined) {
   }
   return null
 }
+
+function closeMenuModalOnMouseLeave() {
+  if (ignoreHover()) return
+  closeMenuModal()
+}
+function keepMenuModalOpenOnMouseOver() {
+  if (ignoreHover()) return
+  open()
+}
+
+let isTouchStart: ReturnType<typeof setTimeout> | undefined
+function ignoreHoverOnTouchStart() {
+  isTouchStart = setTimeout(() => {
+    isTouchStart = undefined
+  }, 1000)
+}
+function openMenuModalOnMouseEnter(menuId: number) {
+  if (ignoreHover()) return
+  openMenuModal(menuId)
+}
+function ignoreHover() {
+  return isTouchStart || isMobileNav()
+}
+function isMobileNav() {
+  return getViewportWidth() <= viewTablet
+}

package/MenuModal.tsx

@@ -3,14 +3,14 @@ export { MenuModal }
 import React from 'react'
 import { usePageContext } from './renderer/usePageContext'
 import { css } from './utils/css'
-import { containerQueryMobileLayout, containerQueryMobileMenu } from './Layout'
+import { bodyMaxWidth, viewDesktop, viewTablet } from './Layout'
 import { ExternalLinks } from './ExternalLinks'
 import { Style } from './utils/Style'
 import { NavigationWithColumnLayout } from './MenuModal/NavigationWithColumnLayout'
-import { closeMenuModal, keepMenuModalOpen } from './MenuModal/toggleMenuModal'
+import { closeMenuModal, closeMenuModalOnMouseLeave, keepMenuModalOpenOnMouseOver } from './MenuModal/toggleMenuModal'
 import { EditLink } from './EditLink'
 
-function MenuModal({ isTopNav }: { isTopNav: boolean }) {
+function MenuModal({ isTopNav, isNavLeftAlwaysHidden_ }: { isTopNav: boolean; isNavLeftAlwaysHidden_: boolean }) {
   return (
     <>
       <Style>{getStyle()}</Style>
@@ -21,14 +21,18 @@ function MenuModal({ isTopNav }: { isTopNav: boolean }) {
           position: isTopNav ? 'absolute' : 'fixed',
           width: '100%',
           top: 'var(--nav-head-height)',
-          left: 0,
           zIndex: 199, // maximum value, because docsearch's modal has `z-index: 200`
           background: '#ededef',
           transitionProperty: 'opacity',
           transitionTimingFunction: 'ease',
+          maxWidth: isNavLeftAlwaysHidden_ ? undefined : bodyMaxWidth,
+          // Horizontal align
+          // https://stackoverflow.com/questions/3157372/css-horizontal-centering-of-a-fixed-div/32694476#32694476
+          left: '50%',
+          transform: 'translateX(-50%)',
         }}
-        onMouseOver={() => keepMenuModalOpen()}
-        onMouseLeave={closeMenuModal}
+        onMouseOver={keepMenuModalOpenOnMouseOver}
+        onMouseLeave={closeMenuModalOnMouseLeave}
       >
         <div
           id="menu-modal-scroll-container"
@@ -50,7 +54,9 @@ function MenuModal({ isTopNav }: { isTopNav: boolean }) {
             >
               <ExternalLinks style={{ height: 50 }} />
             </div>
-            <EditLink style={{ justifyContent: 'center', padding: 10, marginTop: 0, marginBottom: 13 }} />
+            <Center>
+              <EditLink style={{ justifyContent: 'center', marginTop: 8, marginBottom: 20 }} verbose />
+            </Center>
           </div>
         </div>
         <CloseButton className="show-only-on-mobile" />
@@ -64,7 +70,7 @@ function BorderBottom() {
     <div
       id="border-bottom"
       style={{
-        background: '#fff',
+        background: 'var(--color-bg-white)',
         height: 'var(--block-margin)',
         width: '100%',
       }}
@@ -79,7 +85,7 @@ function Nav() {
 
 function getStyle() {
   return css`
-@media(min-width: ${containerQueryMobileMenu + 1}px) {
+@media(min-width: ${viewTablet + 1}px) {
   #menu-modal-scroll-container {
     max-height: calc(100vh - var(--nav-head-height) - var(--block-margin));
     ${/* https://github.com/brillout/docpress/issues/23 */ ''}
@@ -99,7 +105,7 @@ function getStyle() {
     display: none !important;
   }
 }
-@media(max-width: ${containerQueryMobileMenu}px) {
+@media(max-width: ${viewTablet}px) {
   #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 */ ''}
@@ -132,10 +138,13 @@ function getStyle() {
   .show-only-on-desktop {
     display: none !important;
   }
+  .columns-wrapper {
+    width: 100% !important;
+  }
 }
 
 ${/* Hide same-page headings navigation */ ''}
-@container container-viewport (min-width: ${containerQueryMobileLayout}px) {
+@container container-viewport (min-width: ${viewDesktop}px) {
   #menu-modal-wrapper .nav-item-level-3 {
     display: none;
   }
@@ -173,3 +182,17 @@ function CloseButton({ className }: { className: string }) {
     </div>
   )
 }
+
+function Center({ style, ...props }: any) {
+  return (
+    <div
+      style={{
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        ...style,
+      }}
+      {...props}
+    ></div>
+  )
+}

package/NavItemComponent.css

@@ -36,11 +36,11 @@
     padding-left: 9px;
     padding-top: 6px;
     padding-bottom: 6px;
-    border-left: 3px solid var(--category-color);
+    border-left: 3px solid var(--color-category);
     .collapsible-expanded &,
     .collapsible-collapsed & {
       text-decoration: underline;
-      text-decoration-color: var(--category-color);
+      text-decoration-color: var(--color-category);
       text-decoration-thickness: 3px;
       text-underline-offset: .3em;
       border: 0;
@@ -53,7 +53,7 @@
     }
   }
   #nav-left & {
-    border-bottom: 3px solid var(--category-color);
+    border-bottom: 3px solid var(--color-category);
     padding-bottom: 2px;
     margin-top: 3px;
     margin-bottom: 10px;
@@ -86,11 +86,14 @@
   --shadow-size-minus: calc(-1 * var(--shadow-size));
   --shadow-top: inset 0px var(--shadow-size) var(--shadow-size) var(--shadow-size-minus) var(--shadow-color);
   --shadow-bottom: inset 0px var(--shadow-size-minus) var(--shadow-size) var(--shadow-size-minus) var(--shadow-color);
-  --box-shadow-left: inset var(--shadow-size-minus) 0px var(--shadow-size) var(--shadow-size-minus) var(--shadow-color);
-  --box-shadow-right: inset var(--shadow-size) 0px var(--shadow-size) var(--shadow-size-minus) var(--shadow-color);
   --box-shadow-top: 0 0;
   --box-shadow-bottom: 0 0;
+  /*
+  --box-shadow-left: inset var(--shadow-size-minus) 0px var(--shadow-size) var(--shadow-size-minus) var(--shadow-color);
+  --box-shadow-right: inset var(--shadow-size) 0px var(--shadow-size) var(--shadow-size-minus) var(--shadow-color);
   box-shadow: var(--box-shadow-top), var(--box-shadow-bottom), var(--box-shadow-left), var(--box-shadow-right);
+  */
+  box-shadow: var(--box-shadow-top), var(--box-shadow-bottom);
 }
 .nav-item-level-3.nav-item-first-of-its-kind {
   padding-top: 10px;
@@ -105,14 +108,16 @@
   position: relative;
 }
 
-.nav-item-level-3::before,
-.nav-item-level-2.is-active::before {
-  background-color: var(--active-color);
-  position: absolute;
-  height: 100%;
-  width: 100%;
-  top: 0;
-  left: 0;
-  z-index: 1;
-  content: '';
+#nav-left {
+  .nav-item-level-1 {
+    margin-left: min(25px, max(5px, 30 * (1vw - 12.7px) - 5px));
+  }
+  .nav-head-logo {
+    padding-left: min(25px, max(5px, 30 * (1vw - 12.7px) - 5px));
+  }
+  .nav-item-level-2,
+  .nav-item-level-3,
+  .nav-item-level-4 {
+    padding-left: min(30px, max(8px, 30 * (1vw - 12.7px)));
+  }
 }

package/NavItemComponent.tsx

@@ -31,8 +31,22 @@ type NavItem = {
   title: string
   titleInNav: string
   menuModalFullWidth?: true
-  isColumnEntry?: ColumnMap
+  /**
+   * Maps viewport column counts to column indices.
+   * Indicates this nav item is a "column entry" (a level-1 or level-4 heading that starts a new column section).
+   * Example: `{ 1: 0, 2: 1, 3: 0 }` means:
+   * - When there's 1 column, put this item in column 0
+   * - When there are 2 columns, put it in column 1
+   * - When there are 3 columns, put it in column 0
+   */
+  isPotentialColumn?: ColumnMap
 }
+/**
+ * A mapping of viewport column counts to column indices.
+ * Used to determine which column a nav item should be placed in for different viewport widths.
+ * Key: number of columns in the viewport
+ * Value: the column index (0-based) where this item should be placed
+ */
 type ColumnMap = Record<number, number>
 
 type PropsNavItem = PropsAnchor & PropsSpan
@@ -54,7 +68,7 @@ function NavItemComponent({
   const icon = navItem.titleIcon && (
     <img
       src={navItem.titleIcon}
-      style={{ height: iconSize, width: iconSize, marginRight: 8, marginLeft: 4, ...navItem.titleIconStyle }}
+      style={{ height: iconSize, width: iconSize, marginRight: 8, marginLeft: 2, ...navItem.titleIconStyle }}
     />
   )
 
@@ -92,7 +106,7 @@ function NavItemComponent({
     className: [
       'nav-item',
       'nav-item-level-' + navItem.level,
-      navItem.url && navItem.isActive && ' is-active',
+      ((navItem.url && navItem.isActive) || navItem.level === 3) && ' is-active',
       navItem.isFirstOfItsKind && 'nav-item-first-of-its-kind',
       navItem.isLastOfItsKind && 'nav-item-last-of-its-kind',
     ]
@@ -101,7 +115,7 @@ function NavItemComponent({
   }
   if (navItem.level === 1) {
     props.style = {
-      ['--category-color']: navItem.color!,
+      ['--color-category']: navItem.color!,
     }
   }
 

package/code-blocks/components/Pre.tsx

@@ -40,7 +40,7 @@ function CopyButton() {
     <button
       className="copy-button raised"
       aria-label={tooltip}
-      data-label-position="top"
+      data-label-position="top-left"
       type="button"
       onClick={onClick}
     >

package/css/colorize-on-hover.css

@@ -7,9 +7,14 @@
   .colorize-on-hover:hover [class*=' decolorize-'] {
     filter: grayscale(0) opacity(1) !important;
   }
+  .is-active {
+    background-color: var(--color-active);
+  }
   .link-hover-animation a:hover {
-    color: black !important;
-    background-color: var(--active-color);
+    background-color: var(--color-active);
+    &.is-active {
+      background-color: var(--color-active-double);
+    }
   }
 }
 
@@ -46,5 +51,7 @@
 }
 
 body {
-  --active-color: rgba(0, 0, 0, 0.03);
+  --color-active-value: 0.03;
+  --color-active: rgba(0, 0, 0, var(--color-active-value));
+  --color-active-double: rgba(0, 0, 0, calc(2 * var(--color-active-value)));
 }

package/css/heading.css

@@ -77,7 +77,13 @@ h3 {
   .doc-page h3[id]:hover::before {
     content: '#';
     position: absolute;
-    left: calc(-1 * (0.75em - 26px));
+    height: 100%;
+    line-height: 0;
+    font-size: 23px;
+    top: 1px;
+    left: calc(-1 * (0.75em - var(--hash-offset)));
     color: #aaa;
+    display: flex;
+    align-items: center;
   }
 }

package/css/tooltip.css

@@ -37,9 +37,15 @@
     top: 100%;
     margin-top: 5px;
   }
-  /* Show above */
-  [aria-label][data-label-position='top']::before {
+  /* Show above-left */
+  /* Used by:
+   * - Copy-to-clipboard button
+   * - <UsedBy> component for Vike's landing page
+   */
+  [aria-label][data-label-position='top-left']::before {
     bottom: 100%;
     margin-bottom: 7px;
+    margin-left: calc(50% + 13px);
+    transform: translate(-100%, 0);
   }
 }