@brillout/docpress 0.15.12 → 0.15.13-commit-ffe283f

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 } from '../Layout'
 import { throttle } from '../utils/throttle'
 import { Collapsible } from './Collapsible'
 import { ColumnMap, getNavItemsWithComputed, NavItem, NavItemComponent, NavItemComputed } from '../NavItemComponent'
@@ -23,6 +23,7 @@ function NavigationWithColumnLayout(props: { navItems: NavItem[] }) {
     window.addEventListener('resize', throttle(updateviewportwidth, 300), { passive: true })
   })
   const navItemsByColumnLayouts = getNavItemsByColumnLayouts(navItemsWithComputed, viewportWidth)
+  const maxColumns = Math.max(...navItemsByColumnLayouts.map((layout) => layout.columns.length), 1)
   return (
     <>
       <Style>{getStyle()}</Style>
@@ -40,10 +41,10 @@ function NavigationWithColumnLayout(props: { navItems: NavItem[] }) {
           >
             {columnLayout.isFullWidthCategory ? (
               <div style={{ marginTop: 0 }}>
-                <ColumnsWrapper numberOfColumns={columnLayout.columns.length}>
+                <ColumnsWrapper numberOfColumns={maxColumns}>
                   <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 +62,7 @@ function NavigationWithColumnLayout(props: { navItems: NavItem[] }) {
                 </ColumnsWrapper>
               </div>
             ) : (
-              <ColumnsWrapper numberOfColumns={columnLayout.columns.length}>
+              <ColumnsWrapper numberOfColumns={maxColumns}>
                 <ColumnsLayout>
                   {columnLayout.columns.map((column, j) => (
                     <Column key={j}>
@@ -69,7 +70,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 +94,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%;
@@ -269,17 +270,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

@@ -4,7 +4,7 @@ export { keepMenuModalOpen }
 export { closeMenuModal }
 export { coseMenuModalOnMouseLeave }
 
-import { containerQueryMobileMenu } from '../Layout'
+import { viewTablet } from '../Layout'
 import { getHydrationPromise } from '../renderer/getHydrationPromise'
 import { getViewportWidth } from '../utils/getViewportWidth'
 import { isBrowser } from '../utils/isBrowser'
@@ -111,7 +111,7 @@ function toggleMenuModal(menuId: number) {
     closeMenuModal()
   } else {
     openMenuModal(menuId)
-    if (getViewportWidth() < containerQueryMobileMenu) autoScroll()
+    if (getViewportWidth() < viewTablet) autoScroll()
   }
 }
 

package/MenuModal.tsx

@@ -3,7 +3,7 @@ export { MenuModal }
 import React from 'react'
 import { usePageContext } from './renderer/usePageContext'
 import { css } from './utils/css'
-import { containerQueryMobileLayout, containerQueryMobileMenu } from './Layout'
+import { viewDesktop, viewTablet } from './Layout'
 import { ExternalLinks } from './ExternalLinks'
 import { Style } from './utils/Style'
 import { NavigationWithColumnLayout } from './MenuModal/NavigationWithColumnLayout'
@@ -79,7 +79,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 +99,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 */ ''}
@@ -135,7 +135,7 @@ function getStyle() {
 }
 
 ${/* 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;
   }

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

package/determineNavItemsColumnLayout.spec.ts

@@ -0,0 +1,518 @@
+import { describe, it, expect } from 'vitest'
+import { determineNavItemsColumnLayout } from './determineNavItemsColumnLayout'
+import type { NavItem } from './NavItemComponent'
+
+describe('determineNavItemsColumnLayout', () => {
+  it('should handle simple non-fullWidth categories', () => {
+    const navItems: NavItem[] = [
+      { level: 1, title: 'API', titleInNav: 'API' },
+      { level: 2, title: 'Endpoint 1', titleInNav: 'Endpoint 1' },
+      { level: 2, title: 'Endpoint 2', titleInNav: 'Endpoint 2' },
+      { level: 1, title: 'Guides', titleInNav: 'Guides' },
+      { level: 2, title: 'Guide 1', titleInNav: 'Guide 1' },
+    ]
+
+    determineNavItemsColumnLayout(navItems)
+
+    expect(navItems).toMatchInlineSnapshot(`
+      [
+        {
+          "isPotentialColumn": {
+            "1": 0,
+            "2": 0,
+          },
+          "level": 1,
+          "title": "API",
+          "titleInNav": "API",
+        },
+        {
+          "level": 2,
+          "title": "Endpoint 1",
+          "titleInNav": "Endpoint 1",
+        },
+        {
+          "level": 2,
+          "title": "Endpoint 2",
+          "titleInNav": "Endpoint 2",
+        },
+        {
+          "isPotentialColumn": {
+            "1": 0,
+            "2": 1,
+          },
+          "level": 1,
+          "title": "Guides",
+          "titleInNav": "Guides",
+        },
+        {
+          "level": 2,
+          "title": "Guide 1",
+          "titleInNav": "Guide 1",
+        },
+      ]
+    `)
+  })
+
+  it('should handle fullWidth categories with level-4 items', () => {
+    const navItems: NavItem[] = [
+      { level: 1, title: 'Blog', titleInNav: 'Blog', menuModalFullWidth: true },
+      { level: 4, title: 'Category 1', titleInNav: 'Category 1' },
+      { level: 2, title: 'Post 1', titleInNav: 'Post 1' },
+      { level: 2, title: 'Post 2', titleInNav: 'Post 2' },
+      { level: 4, title: 'Category 2', titleInNav: 'Category 2' },
+      { level: 2, title: 'Post 3', titleInNav: 'Post 3' },
+    ]
+
+    determineNavItemsColumnLayout(navItems)
+
+    expect(navItems).toMatchInlineSnapshot(`
+      [
+        {
+          "isPotentialColumn": {
+            "1": 0,
+            "2": 0,
+          },
+          "level": 1,
+          "menuModalFullWidth": true,
+          "title": "Blog",
+          "titleInNav": "Blog",
+        },
+        {
+          "level": 4,
+          "title": "Category 1",
+          "titleInNav": "Category 1",
+        },
+        {
+          "level": 2,
+          "title": "Post 1",
+          "titleInNav": "Post 1",
+        },
+        {
+          "level": 2,
+          "title": "Post 2",
+          "titleInNav": "Post 2",
+        },
+        {
+          "isPotentialColumn": {
+            "1": 0,
+            "2": 1,
+          },
+          "level": 4,
+          "title": "Category 2",
+          "titleInNav": "Category 2",
+        },
+        {
+          "level": 2,
+          "title": "Post 3",
+          "titleInNav": "Post 3",
+        },
+      ]
+    `)
+  })
+
+  it('should handle mix of fullWidth and non-fullWidth categories', () => {
+    const navItems: NavItem[] = [
+      { level: 1, title: 'API', titleInNav: 'API' },
+      { level: 2, title: 'Endpoint 1', titleInNav: 'Endpoint 1' },
+      { level: 1, title: 'Blog', titleInNav: 'Blog', menuModalFullWidth: true },
+      { level: 4, title: 'Category 1', titleInNav: 'Category 1' },
+      { level: 2, title: 'Post 1', titleInNav: 'Post 1' },
+    ]
+
+    determineNavItemsColumnLayout(navItems)
+
+    expect(navItems).toMatchInlineSnapshot(`
+      [
+        {
+          "isPotentialColumn": {
+            "1": 0,
+          },
+          "level": 1,
+          "title": "API",
+          "titleInNav": "API",
+        },
+        {
+          "level": 2,
+          "title": "Endpoint 1",
+          "titleInNav": "Endpoint 1",
+        },
+        {
+          "isPotentialColumn": {
+            "1": 0,
+          },
+          "level": 1,
+          "menuModalFullWidth": true,
+          "title": "Blog",
+          "titleInNav": "Blog",
+        },
+        {
+          "level": 4,
+          "title": "Category 1",
+          "titleInNav": "Category 1",
+        },
+        {
+          "level": 2,
+          "title": "Post 1",
+          "titleInNav": "Post 1",
+        },
+      ]
+    `)
+  })
+
+  it('should handle single category', () => {
+    const navItems: NavItem[] = [
+      { level: 1, title: 'Single', titleInNav: 'Single' },
+      { level: 2, title: 'Item 1', titleInNav: 'Item 1' },
+    ]
+
+    determineNavItemsColumnLayout(navItems)
+
+    expect(navItems).toMatchInlineSnapshot(`
+      [
+        {
+          "isPotentialColumn": {
+            "1": 0,
+          },
+          "level": 1,
+          "title": "Single",
+          "titleInNav": "Single",
+        },
+        {
+          "level": 2,
+          "title": "Item 1",
+          "titleInNav": "Item 1",
+        },
+      ]
+    `)
+  })
+
+  it('should handle empty array', () => {
+    const navItems: NavItem[] = []
+
+    determineNavItemsColumnLayout(navItems)
+
+    expect(navItems).toMatchInlineSnapshot(`
+      []
+    `)
+  })
+
+  it('should handle multiple level-4 entries in fullWidth category', () => {
+    const navItems: NavItem[] = [
+      { level: 1, title: 'Blog', titleInNav: 'Blog', menuModalFullWidth: true },
+      { level: 4, title: 'Category 1', titleInNav: 'Category 1' },
+      { level: 2, title: 'Post 1', titleInNav: 'Post 1' },
+      { level: 4, title: 'Category 2', titleInNav: 'Category 2' },
+      { level: 2, title: 'Post 2', titleInNav: 'Post 2' },
+      { level: 4, title: 'Category 3', titleInNav: 'Category 3' },
+      { level: 2, title: 'Post 3', titleInNav: 'Post 3' },
+    ]
+
+    determineNavItemsColumnLayout(navItems)
+
+    expect(navItems).toMatchInlineSnapshot(`
+      [
+        {
+          "isPotentialColumn": {
+            "1": 0,
+            "2": 0,
+            "3": 0,
+          },
+          "level": 1,
+          "menuModalFullWidth": true,
+          "title": "Blog",
+          "titleInNav": "Blog",
+        },
+        {
+          "level": 4,
+          "title": "Category 1",
+          "titleInNav": "Category 1",
+        },
+        {
+          "level": 2,
+          "title": "Post 1",
+          "titleInNav": "Post 1",
+        },
+        {
+          "isPotentialColumn": {
+            "1": 0,
+            "2": 0,
+            "3": 1,
+          },
+          "level": 4,
+          "title": "Category 2",
+          "titleInNav": "Category 2",
+        },
+        {
+          "level": 2,
+          "title": "Post 2",
+          "titleInNav": "Post 2",
+        },
+        {
+          "isPotentialColumn": {
+            "1": 0,
+            "2": 1,
+            "3": 2,
+          },
+          "level": 4,
+          "title": "Category 3",
+          "titleInNav": "Category 3",
+        },
+        {
+          "level": 2,
+          "title": "Post 3",
+          "titleInNav": "Post 3",
+        },
+      ]
+    `)
+  })
+
+  it('should handle many items in single category', () => {
+    const navItems: NavItem[] = [
+      { level: 1, title: 'API', titleInNav: 'API' },
+      { level: 2, title: 'Item 1', titleInNav: 'Item 1' },
+      { level: 2, title: 'Item 2', titleInNav: 'Item 2' },
+      { level: 2, title: 'Item 3', titleInNav: 'Item 3' },
+      { level: 2, title: 'Item 4', titleInNav: 'Item 4' },
+      { level: 2, title: 'Item 5', titleInNav: 'Item 5' },
+    ]
+
+    determineNavItemsColumnLayout(navItems)
+
+    expect(navItems).toMatchInlineSnapshot(`
+      [
+        {
+          "isPotentialColumn": {
+            "1": 0,
+          },
+          "level": 1,
+          "title": "API",
+          "titleInNav": "API",
+        },
+        {
+          "level": 2,
+          "title": "Item 1",
+          "titleInNav": "Item 1",
+        },
+        {
+          "level": 2,
+          "title": "Item 2",
+          "titleInNav": "Item 2",
+        },
+        {
+          "level": 2,
+          "title": "Item 3",
+          "titleInNav": "Item 3",
+        },
+        {
+          "level": 2,
+          "title": "Item 4",
+          "titleInNav": "Item 4",
+        },
+        {
+          "level": 2,
+          "title": "Item 5",
+          "titleInNav": "Item 5",
+        },
+      ]
+    `)
+  })
+
+  it('should handle demo headings structure', () => {
+    // Duplicated from demo/headings.ts
+    const navItems: NavItem[] = [
+      { level: 1, title: 'Overview', titleInNav: 'Overview' },
+      { level: 2, title: 'Introduction', titleInNav: 'Introduction' },
+      { level: 2, title: 'Notes', titleInNav: 'Notes' },
+      { level: 2, title: 'Features', titleInNav: 'Features' },
+      { level: 2, title: 'Open Source Pricing', titleInNav: 'Open Source Pricing' },
+
+      { level: 1, title: 'Guides', titleInNav: 'Guides' },
+      { level: 2, title: 'Some Page', titleInNav: 'Some Page' },
+      { level: 4, title: 'Some category', titleInNav: 'Some category' },
+      { level: 2, title: 'Tiny Page', titleInNav: 'Tiny Page' },
+      { level: 2, title: 'June Releases', titleInNav: 'June Releases' },
+      { level: 2, title: 'Press Kit', titleInNav: 'Press Kit' },
+      { level: 2, title: 'Page wiht error', titleInNav: 'Page wiht error' },
+
+      { level: 1, title: 'API', titleInNav: 'API', menuModalFullWidth: true },
+      { level: 4, title: 'Category 1', titleInNav: 'Category 1' },
+      { level: 2, title: '`Page 1`', titleInNav: '`Page 1`' },
+      { level: 4, title: 'Category 2', titleInNav: 'Category 2' },
+      { level: 2, title: 'Page 2', titleInNav: 'Page 2' },
+      { level: 4, title: 'Category 3', titleInNav: 'Category 3' },
+      { level: 2, title: 'Page 3', titleInNav: 'Page 3' },
+      { level: 2, title: 'Page 4', titleInNav: 'Page 4' },
+
+      { level: 1, title: 'Blog', titleInNav: 'Blog', menuModalFullWidth: true },
+      { level: 4, title: 'Blog Category 1', titleInNav: 'Blog Category 1' },
+      { level: 2, title: 'Some Blog Post', titleInNav: 'Some Blog Post' },
+      { level: 4, title: 'Blog Category 2', titleInNav: 'Blog Category 2' },
+      { level: 2, title: 'Some Other Blog Post', titleInNav: 'Some Other Blog Post' },
+    ]
+
+    determineNavItemsColumnLayout(navItems)
+
+    expect(navItems).toMatchInlineSnapshot(`
+      [
+        {
+          "isPotentialColumn": {
+            "1": 0,
+            "2": 0,
+          },
+          "level": 1,
+          "title": "Overview",
+          "titleInNav": "Overview",
+        },
+        {
+          "level": 2,
+          "title": "Introduction",
+          "titleInNav": "Introduction",
+        },
+        {
+          "level": 2,
+          "title": "Notes",
+          "titleInNav": "Notes",
+        },
+        {
+          "level": 2,
+          "title": "Features",
+          "titleInNav": "Features",
+        },
+        {
+          "level": 2,
+          "title": "Open Source Pricing",
+          "titleInNav": "Open Source Pricing",
+        },
+        {
+          "isPotentialColumn": {
+            "1": 0,
+            "2": 1,
+          },
+          "level": 1,
+          "title": "Guides",
+          "titleInNav": "Guides",
+        },
+        {
+          "level": 2,
+          "title": "Some Page",
+          "titleInNav": "Some Page",
+        },
+        {
+          "level": 4,
+          "title": "Some category",
+          "titleInNav": "Some category",
+        },
+        {
+          "level": 2,
+          "title": "Tiny Page",
+          "titleInNav": "Tiny Page",
+        },
+        {
+          "level": 2,
+          "title": "June Releases",
+          "titleInNav": "June Releases",
+        },
+        {
+          "level": 2,
+          "title": "Press Kit",
+          "titleInNav": "Press Kit",
+        },
+        {
+          "level": 2,
+          "title": "Page wiht error",
+          "titleInNav": "Page wiht error",
+        },
+        {
+          "isPotentialColumn": {
+            "1": 0,
+            "2": 0,
+            "3": 0,
+          },
+          "level": 1,
+          "menuModalFullWidth": true,
+          "title": "API",
+          "titleInNav": "API",
+        },
+        {
+          "level": 4,
+          "title": "Category 1",
+          "titleInNav": "Category 1",
+        },
+        {
+          "level": 2,
+          "title": "\`Page 1\`",
+          "titleInNav": "\`Page 1\`",
+        },
+        {
+          "isPotentialColumn": {
+            "1": 0,
+            "2": 0,
+            "3": 1,
+          },
+          "level": 4,
+          "title": "Category 2",
+          "titleInNav": "Category 2",
+        },
+        {
+          "level": 2,
+          "title": "Page 2",
+          "titleInNav": "Page 2",
+        },
+        {
+          "isPotentialColumn": {
+            "1": 0,
+            "2": 1,
+            "3": 2,
+          },
+          "level": 4,
+          "title": "Category 3",
+          "titleInNav": "Category 3",
+        },
+        {
+          "level": 2,
+          "title": "Page 3",
+          "titleInNav": "Page 3",
+        },
+        {
+          "level": 2,
+          "title": "Page 4",
+          "titleInNav": "Page 4",
+        },
+        {
+          "isPotentialColumn": {
+            "1": 0,
+            "2": 0,
+          },
+          "level": 1,
+          "menuModalFullWidth": true,
+          "title": "Blog",
+          "titleInNav": "Blog",
+        },
+        {
+          "level": 4,
+          "title": "Blog Category 1",
+          "titleInNav": "Blog Category 1",
+        },
+        {
+          "level": 2,
+          "title": "Some Blog Post",
+          "titleInNav": "Some Blog Post",
+        },
+        {
+          "isPotentialColumn": {
+            "1": 0,
+            "2": 1,
+          },
+          "level": 4,
+          "title": "Blog Category 2",
+          "titleInNav": "Blog Category 2",
+        },
+        {
+          "level": 2,
+          "title": "Some Other Blog Post",
+          "titleInNav": "Some Other Blog Post",
+        },
+      ]
+    `)
+  })
+})