@brillout/docpress 0.8.11 → 0.8.13-commit-8740149

package/docsearch/SearchLink.tsx

@@ -29,17 +29,8 @@ function SearchLink(props: PropsAnchor) {
 }
 function SearchIcon() {
   return (
-    <svg
-      style={{ marginRight: 'var(--icon-text-padding)', lineHeight: 0, width: '1.3em' }}
-      className="decolorize-7"
-      viewBox="0 0 20 20"
-    >
-      <path
-        d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z"
-        fill="none"
-        stroke="currentColor"
-        strokeWidth="2"
-      ></path>
-    </svg>
+    <span style={{ marginRight: 'var(--icon-text-padding)', fontSize: '1.1em' }} className="decolorize-7">
+      🔍
+    </span>
   )
 }

package/navigation/Navigation.css

@@ -99,7 +99,7 @@
   content: "";
 }
 
-.nav-category {
+:has(> .category-border) {
   position: relative
 }
 .category-border {
@@ -107,6 +107,7 @@
   top: 0;
   left: 0;
   transform: translate(0, 53px);
+  height: calc(100% - 53px);
   width: 3px;
   z-index: 99;
 }

package/navigation/Navigation.tsx

@@ -4,13 +4,15 @@ export { NavigationContent }
 export type { NavItem }
 export type { NavItemAll }
 
-import React from 'react'
+import React, { useEffect, useState } from 'react'
 import { assert, assertWarning, jsxToTextContent } from '../utils/server'
 import './Navigation.css'
 import { parseTitle } from '../parseTitle'
 import { usePageContext } from '../renderer/usePageContext'
 import '@docsearch/css'
 import '../global.d.ts'
+import { getViewportWidth } from '../utils/getViewportWidth'
+import { navWidthMax, navWidthMin } from '../Layout'
 
 type NavItem = {
   level: number
@@ -21,7 +23,7 @@ type NavItem = {
   menuModalFullWidth?: true
 }
 type NavItemAll = NavItem & {
-  isColumnLayoutElement?: true
+  isColumnEntry?: ColumnMap
 }
 function NavigationContent(props: {
   navItems: NavItem[]
@@ -38,71 +40,76 @@ function NavigationContent(props: {
       .map((navItem, i) => <NavItemComponent navItem={navItem} key={i} />)
   } else {
     assert(!props.showOnlyRelevant)
-    const navItemsColumnLayout = groupByColumnLayout(navItemsWithComputed)
-    const paddingBottom = 40
-    navContent = (
-      <>
-        {navItemsColumnLayout.map(({ navItemsColumnEntries, isFullWidth }, i) => (
-          <div
-            key={i}
-            style={{
-              display: 'flex',
-              justifyContent: 'center',
-            }}
-          >
+    navContent = <NavigationColumnLayout navItemsWithComputed={navItemsWithComputed} />
+  }
+
+  return (
+    <div className="navigation-content" style={{ marginTop: 10 }}>
+      {navContent}
+    </div>
+  )
+}
+
+function NavigationColumnLayout(props: { navItemsWithComputed: NavItemComputed[] }) {
+  let [viewportWidth, setViewportWidth] = useState<number | undefined>()
+  const updateviewportwidth = () => setViewportWidth(getViewportWidth())
+  useEffect(() => {
+    updateviewportwidth()
+    window.addEventListener('resize', updateviewportwidth, { passive: true })
+  })
+
+  const navItemsByColumnLayouts = getNavItemsByColumnLayouts(props.navItemsWithComputed, viewportWidth)
+  const margin = 40
+
+  return (
+    <>
+      {navItemsByColumnLayouts.map(({ columns, isFullWidth }, i) => (
+        <div
+          key={i}
+          style={{
+            display: 'flex',
+            width: columns.length * (navWidthMax + 20),
+            justifyContent: 'space-between',
+            maxWidth: '100%',
+            margin: 'auto',
+            marginTop: i === 0 ? -1 * margin : undefined,
+            marginBottom: margin,
+          }}
+        >
+          {columns.map((columnEntry, j) => (
             <div
-              className={`column-layout-${i}` + (!isFullWidth ? '' : ' nav-category nav-category-full-width')}
+              key={j}
               style={{
                 flexGrow: 1,
-                columnGap: 20,
-                paddingBottom: isFullWidth ? paddingBottom : undefined,
+                maxWidth: navWidthMax,
+                display: 'flex',
+                flexDirection: 'column',
+                paddingTop: isFullWidth && j !== 0 ? 36 : undefined,
               }}
             >
-              {navItemsColumnEntries.map((navItemColumnEntry, j) => (
-                <div
-                  key={j}
-                  className={'column-layout-entry' + (isFullWidth ? '' : ' nav-category')}
-                  style={{
-                    breakInside: 'avoid',
-                    paddingBottom: !isFullWidth ? paddingBottom : undefined,
-                    paddingTop: isFullWidth ? undefined : 0,
-                    width: '100%',
-                  }}
-                >
-                  <NavItemComponent navItem={navItemColumnEntry} />
-                  {navItemColumnEntry.navItemChilds.map((navItem, k) => (
-                    <NavItemComponent navItem={navItem} key={k} />
+              {columnEntry.map((navItems, k) => (
+                <div key={k} style={{ marginTop: isFullWidth ? undefined : margin }}>
+                  {navItems.map((navItem, l) => (
+                    <NavItemComponent navItem={navItem} key={l} />
                   ))}
-                  <CategoryBorder
-                    navItemLevel1={isFullWidth ? undefined : navItemColumnEntry!}
-                    paddingBottom={paddingBottom}
-                  />
+                  <CategoryBorder navItemLevel1={isFullWidth ? undefined : navItems[0]!} />
                 </div>
               ))}
-              <CategoryBorder
-                navItemLevel1={!isFullWidth ? undefined : navItemsColumnEntries[0]!}
-                paddingBottom={paddingBottom}
-              />
             </div>
-          </div>
-        ))}
-      </>
-    )
-  }
-
-  return (
-    <div className="navigation-content" style={{ marginTop: 10 }}>
-      {navContent}
-    </div>
+          ))}
+          <CategoryBorder navItemLevel1={!isFullWidth ? undefined : columns[0][0][0]!} />
+        </div>
+      ))}
+    </>
   )
 }
-function CategoryBorder({ navItemLevel1, paddingBottom }: { navItemLevel1?: NavItemComputed; paddingBottom: number }) {
+
+function CategoryBorder({ navItemLevel1 }: { navItemLevel1?: NavItemComputed }) {
   return !navItemLevel1 ? null : (
     <div
       className="category-border"
       style={{
         background: navItemLevel1.color!,
-        height: `calc(100% - ${paddingBottom}px - 53px)`,
       }}
     />
   )
@@ -162,33 +169,57 @@ function NavItemComponent({
   }
 }
 
-type NavItemsColumnEntry = NavItemComputed & { navItemChilds: NavItemComputed[] }
-function groupByColumnLayout(navItems: NavItemComputed[]) {
-  const navItemsColumnLayout: { navItemsColumnEntries: NavItemsColumnEntry[]; isFullWidth: boolean }[] = []
-  let navItemsColumnEntries: NavItemsColumnEntry[] = []
+type NavItemsByColumnLayout = { columns: NavItemComputed[][][]; isFullWidth: boolean }
+function getNavItemsByColumnLayouts(navItems: NavItemComputed[], viewportWidth: number = 0): NavItemsByColumnLayout[] {
+  const navItemsByColumnEntries = getNavItemsByColumnEntries(navItems)
+  const numberOfColumnsMax = Math.floor(viewportWidth / navWidthMin) || 1
+  const navItemsByColumnLayouts: NavItemsByColumnLayout[] = navItemsByColumnEntries.map(
+    ({ columnEntries, isFullWidth }) => {
+      const numberOfColumns = Math.min(numberOfColumnsMax, columnEntries.length)
+      const columns: NavItemComputed[][][] = []
+      columnEntries.forEach((columnEntry) => {
+        const idx = numberOfColumns === 1 ? 0 : columnEntry.columnMap[numberOfColumns]!
+        assert(idx >= 0)
+        columns[idx] ??= []
+        columns[idx].push(columnEntry.navItems)
+      })
+      const navItemsByColumnLayout: NavItemsByColumnLayout = { columns, isFullWidth }
+      return navItemsByColumnLayout
+    },
+  )
+  return navItemsByColumnLayouts
+}
+
+type NavItemsByColumnEntries = { columnEntries: ColumnEntry[]; isFullWidth: boolean }[]
+type ColumnEntry = { navItems: NavItemComputed[]; columnMap: ColumnMap }
+type ColumnMap = Record<number, number>
+function getNavItemsByColumnEntries(navItems: NavItemComputed[]): NavItemsByColumnEntries {
+  const navItemsByColumnEntries: NavItemsByColumnEntries = []
+  let columnEntries: ColumnEntry[] = []
+  let columnEntry: ColumnEntry
   let isFullWidth: boolean | undefined
   navItems.forEach((navItem) => {
     if (navItem.level === 1) {
       const isFullWidthPrevious = isFullWidth
       isFullWidth = !!navItem.menuModalFullWidth
       if (isFullWidthPrevious !== undefined && isFullWidthPrevious !== isFullWidth) {
-        navItemsColumnLayout.push({ navItemsColumnEntries, isFullWidth: isFullWidthPrevious })
-        navItemsColumnEntries = []
+        navItemsByColumnEntries.push({ columnEntries, isFullWidth: isFullWidthPrevious })
+        columnEntries = []
       }
     }
     assert(isFullWidth !== undefined)
-    if (navItem.isColumnLayoutElement) {
+    if (navItem.isColumnEntry) {
       assert(navItem.level === 1 || navItem.level === 4)
-      const navItemColumnEntry = { ...navItem, navItemChilds: [] }
-      navItemsColumnEntries.push(navItemColumnEntry)
+      columnEntry = { navItems: [navItem], columnMap: navItem.isColumnEntry }
+      columnEntries.push(columnEntry)
     } else {
       assert(navItem.level !== 1)
-      navItemsColumnEntries[navItemsColumnEntries.length - 1].navItemChilds.push(navItem)
+      columnEntry.navItems.push(navItem)
     }
   })
   assert(isFullWidth !== undefined)
-  navItemsColumnLayout.push({ navItemsColumnEntries, isFullWidth })
-  return navItemsColumnLayout
+  navItemsByColumnEntries.push({ columnEntries, isFullWidth })
+  return navItemsByColumnEntries
 }
 
 type NavItemComputed = ReturnType<typeof getNavItemsWithComputed>[number]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brillout/docpress",
-  "version": "0.8.11",
+  "version": "0.8.13-commit-8740149",
   "type": "module",
   "dependencies": {
     "@brillout/picocolors": "^1.0.10",

package/renderer/{getStyleColumnLayout.ts → determineColumnEntries.ts}

@@ -1,24 +1,14 @@
-export { getStyleColumnLayout }
-export { determineColumnLayoutEntries }
+export { determineColumnEntries }
 
-// There doens't seem to be as simpler way to have a column layout that uses the whole width real estate.
-// - https://stackoverflow.com/questions/9683425/css-column-count-not-respected
-// - https://stackoverflow.com/questions/25446921/get-flexbox-column-wrap-to-use-full-width-and-minimize-height
-// - https://stackoverflow.com/questions/74873283/how-to-create-a-css-grid-with-3-columns-having-column-flow
-// - https://stackoverflow.com/questions/50693793/3-columns-grid-top-to-bottom-using-grid-css
-// - https://stackoverflow.com/questions/9119347/html-css-vertical-flow-layout-columnar-style-how-to-implement
-// - https://stackoverflow.com/questions/27119691/how-to-start-a-new-column-in-flex-column-wrap-layout
-// - https://stackoverflow.com/questions/45264354/is-it-possible-to-place-more-than-one-element-into-a-css-grid-cell-without-overl/49047281#49047281
+// A CSS-only solution doesn't seem to exist.
+// - https://github.com/brillout/docpress/blob/2e41d8b9df098ff8312b02f7e9d41a202548e2b9/src/renderer/getStyleColumnLayout.ts#L4-L26
 
 import { type NavItemAll } from '../navigation/Navigation'
-import { css } from '../utils/css'
 import { assert, assertUsage, isBrowser } from '../utils/server'
 assert(!isBrowser())
-const columnWidthMin = 300
-const columnWidthMax = 350
 
 type NavItemWithLength = NavItemAll & { numberOfHeadings: number | null }
-function determineColumnLayoutEntries(navItems: NavItemAll[]): { columnLayouts: number[][] } {
+function determineColumnEntries(navItems: NavItemAll[]): undefined {
   const navItemsWithLength: NavItemWithLength[] = navItems.map((navItem) => ({
     ...navItem,
     numberOfHeadings: navItem.level === 1 || navItem.level === 4 ? 0 : null,
@@ -46,8 +36,9 @@ function determineColumnLayoutEntries(navItems: NavItemAll[]): { columnLayouts:
     }
   })
 
-  const columnLayouts: number[][] = []
-  let columns: number[] = []
+  type ColumnEntry = { navItemLeader: NavItemAll; numberOfEntries: number }
+  const columnLayouts: ColumnEntry[][] = []
+  let columnEntries: ColumnEntry[] = []
   let isFullWidth: boolean | undefined
   navItemsWithLength.forEach((navItem, i) => {
     let isFullWidthBegin = false
@@ -56,8 +47,8 @@ function determineColumnLayoutEntries(navItems: NavItemAll[]): { columnLayouts:
       isFullWidth = !!navItem.menuModalFullWidth
       if (isFullWidth) isFullWidthBegin = true
       if (isFullWidthPrevious !== undefined && isFullWidthPrevious !== isFullWidth) {
-        columnLayouts.push(columns)
-        columns = []
+        columnLayouts.push(columnEntries)
+        columnEntries = []
       }
     }
     const navItemPrevious = navItemsWithLength[i - 1]
@@ -82,85 +73,24 @@ function determineColumnLayoutEntries(navItems: NavItemAll[]): { columnLayouts:
         assert(navItemNext.numberOfHeadings)
         numberOfHeadings = navItemNext.numberOfHeadings
       }
-      columns.push(numberOfHeadings)
-      navItems[i].isColumnLayoutElement = true
+      columnEntries.push({ navItemLeader: navItems[i], numberOfEntries: numberOfHeadings })
     }
   })
-  columnLayouts.push(columns)
+  assert(columnEntries!)
+  columnLayouts.push(columnEntries)
 
-  return { columnLayouts }
-}
-
-function getStyleColumnLayout(columnLayouts: number[][]): string {
-  let style =
-    '\n' +
-    css`
-.column-layout-entry {
-  break-before: avoid;
-}
-`
-  style += '\n'
-  columnLayouts.forEach((columns, i) => {
-    for (let numberOfColumns = columns.length; numberOfColumns >= 1; numberOfColumns--) {
-      let styleGivenNumberOfColumns: string[] = []
-      styleGivenNumberOfColumns.push(
-        css`
-.column-layout-${i} {
-  column-count: ${numberOfColumns};
-  max-width: min(100%, ${columnWidthMax * numberOfColumns}px);
-}
-`,
+  columnLayouts.forEach((columnEntries) => {
+    for (let numberOfColumns = columnEntries.length; numberOfColumns >= 1; numberOfColumns--) {
+      const columnsIdMap = determineColumns(
+        columnEntries.map((columnEntry) => columnEntry.numberOfEntries),
+        numberOfColumns,
       )
-      const columnsIdMap = determineColumns(columns, numberOfColumns)
-      const columnBreakPoints = determineColumnBreakPoints(columnsIdMap)
-      columnBreakPoints.forEach((columnBreakPoint, columnUngroupedId) => {
-        if (!columnBreakPoint) return
-        styleGivenNumberOfColumns.push(
-          css`
-.column-layout-${i} .column-layout-entry:nth-child(${columnUngroupedId + 1}) {
-  break-before: column;
-  padding-top: 36px;
-}
-`,
-        )
+      columnEntries.forEach((columnEntry, i) => {
+        columnEntry.navItemLeader.isColumnEntry ??= {}
+        columnEntry.navItemLeader.isColumnEntry[numberOfColumns] = columnsIdMap[i]
       })
-      {
-        assert(styleGivenNumberOfColumns.length > 0)
-        const getMaxWidth = (columns: number) => (columns + 1) * columnWidthMin - 1
-        const isFirst = numberOfColumns === 1
-        const isLast = numberOfColumns === columns.length
-        const query = [
-          !isFirst && `(min-width: ${getMaxWidth(numberOfColumns - 1) + 1}px)`,
-          !isLast && `(max-width: ${getMaxWidth(numberOfColumns)}px)`,
-        ]
-          .filter(Boolean)
-          .join(' and ')
-        if (query) {
-          styleGivenNumberOfColumns = [`@container ${query} {`, ...styleGivenNumberOfColumns, `}`]
-        }
-      }
-      style += styleGivenNumberOfColumns.join('\n') + '\n'
     }
   })
-  return style
-}
-
-function determineColumnBreakPoints(columnsIdMap: number[]): boolean[] {
-  assert(columnsIdMap[0] === 0)
-  let columnGroupedIdBefore = 0
-  const columnBreakPoints = columnsIdMap.map((columnGroupedId) => {
-    assert(
-      [
-        //
-        columnGroupedIdBefore,
-        columnGroupedIdBefore + 1,
-      ].includes(columnGroupedId),
-    )
-    const val = columnGroupedId !== columnGroupedIdBefore
-    columnGroupedIdBefore = columnGroupedId
-    return val
-  })
-  return columnBreakPoints
 }
 
 function determineColumns(columnsUnmerged: number[], numberOfColumns: number): number[] {

package/renderer/onRenderHtml.tsx

@@ -6,7 +6,6 @@ import { assert } from '../utils/server'
 import type { PageContextResolved } from '../config/resolvePageContext'
 import { getPageElement } from './getPageElement'
 import type { OnRenderHtmlAsync } from 'vike/types'
-import { getStyleColumnLayout } from './getStyleColumnLayout'
 
 const onRenderHtml: OnRenderHtmlAsync = async (
   pageContext,
@@ -16,8 +15,6 @@ Promise<Awaited<ReturnType<OnRenderHtmlAsync>>> => {
 
   const page = getPageElement(pageContext, pageContextResolved)
 
-  const styleMenuModalLayout = getStyleColumnLayout(pageContextResolved.columnLayouts)
-
   const descriptionTag = pageContextResolved.isLandingPage
     ? dangerouslySkipEscape(`<meta name="description" content="${pageContextResolved.meta.tagline}" />`)
     : ''
@@ -33,7 +30,6 @@ Promise<Awaited<ReturnType<OnRenderHtmlAsync>>> => {
         ${descriptionTag}
         <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
         ${getOpenGraphTags(pageContext.urlPathname, pageContextResolved.documentTitle, pageContextResolved.meta)}
-        <style>${dangerouslySkipEscape(styleMenuModalLayout)}</style>
         <meta name="docsearch:category" content="${pageContextResolved.activeCategory}" />
       </head>
       <body>

package/utils/getViewportWidth.ts

@@ -0,0 +1,4 @@
+export function getViewportWidth(): number {
+  // `window.innerWidth` inlcudes scrollbar width: https://developer.mozilla.org/en-US/docs/Web/API/Window/innerWidth#usage_notes
+  return document.documentElement.clientWidth
+}

package/dist/renderer/getStyleColumnLayout.d.ts

@@ -1,7 +0,0 @@
-export { getStyleColumnLayout };
-export { determineColumnLayoutEntries };
-import { type NavItemAll } from '../navigation/Navigation';
-declare function determineColumnLayoutEntries(navItems: NavItemAll[]): {
-    columnLayouts: number[][];
-};
-declare function getStyleColumnLayout(columnLayouts: number[][]): string;