@brillout/docpress 0.7.9 → 0.7.10

package/dist/navigation/Navigation.d.ts

@@ -2,6 +2,8 @@ export { Navigation };
 export { NavigationMask };
 export type { NavigationData };
 export type { NavItem };
+export { groupByLevelMin };
+export type { NavItemGrouped };
 import React from 'react';
 import './Navigation.css';
 type NavigationData = Parameters<typeof Navigation>[0];
@@ -18,3 +20,7 @@ type NavItem = {
     title: string;
     titleInNav: string;
 };
+type NavItemGrouped = ReturnType<typeof groupByLevelMin>[number];
+declare function groupByLevelMin<T extends NavItem>(navItems: T[]): (T & {
+    navItemChilds: T[];
+})[];

package/dist/navigation/Navigation.js

@@ -11,6 +11,8 @@ var __assign = (this && this.__assign) || function () {
 };
 export { Navigation };
 export { NavigationMask };
+// TODO/refactor: do this only on the server side?
+export { groupByLevelMin };
 import React from 'react';
 import { NavigationHeader } from './NavigationHeader';
 import { assert, Emoji, assertWarning, jsxToTextContent } from '../utils/server';
@@ -37,10 +39,9 @@ function NavigationMask() {
 function NavigationContent(props) {
     var navItemsWithComputed = addComputedProps(props.navItems, props.currentUrl);
     var navItemsGrouped = groupByLevelMin(navItemsWithComputed);
-    return (React.createElement("div", { id: props.id, className: "navigation-content" },
-        React.createElement("div", { className: "nav-column", style: { position: 'relative' } }, navItemsGrouped.map(function (navItemGroup, i) { return (React.createElement("div", { className: "nav-items-group", key: i },
-            React.createElement(NavItemComponent, { navItem: navItemGroup }),
-            navItemGroup.navItemChilds.map(function (navItem, j) { return (React.createElement(NavItemComponent, { navItem: navItem, key: j })); }))); }))));
+    return (React.createElement("div", { id: props.id, className: "navigation-content" }, navItemsGrouped.map(function (navItemGroup, i) { return (React.createElement("div", { className: "nav-items-group", key: i },
+        React.createElement(NavItemComponent, { navItem: navItemGroup }),
+        navItemGroup.navItemChilds.map(function (navItem, j) { return (React.createElement(NavItemComponent, { navItem: navItem, key: j })); }))); })));
 }
 function NavItemComponent(_a) {
     var _b;

package/navigation/Navigation-items.css

@@ -22,9 +22,6 @@
   padding-right: 4px;
   text-decoration: none;
 }
-.nav-column:first-of-type > .nav-items-group:first-of-type > .nav-item-level-1:first-of-type {
-  margin-top: 20px;
-}
 .nav-item-level-1 {
   margin-top: 30px;
   font-size: 15.4px;

package/navigation/Navigation-layout.css

@@ -110,18 +110,20 @@ html.navigation-fullscreen #navigation-content-detached,
 html.navigation-fullscreen #detached-note {
   display: none !important;
 }
-html.navigation-fullscreen .navigation-content {
+html.navigation-fullscreen {
+  /* disable scroll of main view */
+  overflow: hidden !important;
+}
+html.navigation-fullscreen #navigation-body {
   display: flex;
-  margin: auto; /* A `max-width` is set by src/navigation/navigation-fullscreen/initNavigationFullscreen.ts */
+  justify-content: center;
 }
-html.navigation-fullscreen .navigation-content > .nav-column {
+html.navigation-fullscreen #navigation-content-main {
   flex-grow: 1;
-  max-width: 350px;
-}
-html.navigation-fullscreen .nav-column > .nav-items-group:first-child > .nav-item-level-1:first-child {
-  margin-top: 0px;
+  margin-top: -25px;
+  column-gap: 20px;
 }
-html.navigation-fullscreen {
-  /* disable scroll of main view */
-  overflow: hidden !important;
+html.navigation-fullscreen .nav-items-group {
+  break-inside: avoid;
+  width: 100%;
 }

package/navigation/Navigation.tsx

@@ -3,6 +3,10 @@ export { NavigationMask }
 export type { NavigationData }
 export type { NavItem }
 
+// TODO/refactor: do this only on the server side?
+export { groupByLevelMin }
+export type { NavItemGrouped }
+
 import React from 'react'
 import { NavigationHeader } from './NavigationHeader'
 import { assert, Emoji, assertWarning, jsxToTextContent } from '../utils/server'
@@ -75,16 +79,14 @@ function NavigationContent(props: {
 
   return (
     <div id={props.id} className="navigation-content">
-      <div className="nav-column" style={{ position: 'relative' }}>
-        {navItemsGrouped.map((navItemGroup, i) => (
-          <div className="nav-items-group" key={i}>
-            <NavItemComponent navItem={navItemGroup} />
-            {navItemGroup.navItemChilds.map((navItem, j) => (
-              <NavItemComponent navItem={navItem} key={j} />
-            ))}
-          </div>
-        ))}
-      </div>
+      {navItemsGrouped.map((navItemGroup, i) => (
+        <div className="nav-items-group" key={i}>
+          <NavItemComponent navItem={navItemGroup} />
+          {navItemGroup.navItemChilds.map((navItem, j) => (
+            <NavItemComponent navItem={navItem} key={j} />
+          ))}
+        </div>
+      ))}
     </div>
   )
 }
@@ -133,8 +135,9 @@ function NavItemComponent({
   )
 }
 
-function groupByLevelMin(navItems: NavItemComputed[]) {
-  const navItemsGrouped: (NavItemComputed & { navItemChilds: NavItemComputed[] })[] = []
+type NavItemGrouped = ReturnType<typeof groupByLevelMin>[number]
+function groupByLevelMin<T extends NavItem>(navItems: T[]) {
+  const navItemsGrouped: (T & { navItemChilds: T[] })[] = []
   const levelMin: number = Math.min(...navItems.map((h) => h.level))
   navItems.forEach((navItem) => {
     if (navItem.level === levelMin) {

package/navigation/initPressKit.ts

@@ -14,6 +14,6 @@ function navigationHeaderRightClickInterceptor() {
   const navHeaderImg = document.querySelector('#navigation-header-logo img') as HTMLElement
   navHeaderImg.oncontextmenu = (ev) => {
     ev.preventDefault()
-    navigate('/press')
+    navigate('/press#logo')
   }
 }

package/navigation/navigation-fullscreen/initNavigationFullscreen.ts

@@ -20,13 +20,11 @@ function initKeyBindings() {
     },
     false,
   )
-  window.addEventListener('resize', updateColumnWidth, { passive: true })
   initTopNavigation()
 }
 function initNavigationFullscreen() {
   document.getElementById('navigation-fullscreen-button')!.onclick = toggleNavExpend
   document.getElementById('navigation-fullscreen-close')!.onclick = toggleNavExpend
-  updateColumnWidth()
 }
 
 function toggleNavExpend() {
@@ -42,91 +40,6 @@ function hideNavigationFullScreen() {
   toggleNavExpend()
 }
 
-function updateColumnWidth() {
-  const navMinWidth = 299
-  const navH1Groups = Array.from(document.querySelectorAll('#navigation-content-main .nav-items-group'))
-  const numberOfColumnsMax = navH1Groups.length
-
-  const widthAvailable = getViewportWidth()
-  const numberOfColumns = Math.max(1, Math.min(numberOfColumnsMax, Math.floor(widthAvailable / navMinWidth)))
-
-  let columns = navH1Groups.map((navH1Group) => {
-    const column = [
-      {
-        element: navH1Group,
-        elementHeight: navH1Group.children.length,
-      },
-    ]
-    return column
-  })
-
-  mergeColumns(columns, numberOfColumns)
-
-  const navContent = document.getElementById('navigation-content-main')!
-
-  Array.from(navContent.children).forEach((child) => {
-    assert(child.className === 'nav-column')
-  })
-  navContent.innerHTML = ''
-
-  columns.forEach((column) => {
-    const columnEl = document.createElement('div')
-    columnEl.className = 'nav-column'
-    column.forEach(({ element }) => {
-      columnEl.appendChild(element)
-    })
-    navContent.appendChild(columnEl)
-  })
-
-  const navItemMaxWidth = 350
-  navContent.style.maxWidth = `${numberOfColumns * navItemMaxWidth}px`
-}
-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
-}
-
-function mergeColumns<T>(columns: { element: T; elementHeight: number }[][], maxNumberOfColumns: number) {
-  assert(columns.length > 0)
-  assert(maxNumberOfColumns > 0)
-  if (columns.length <= maxNumberOfColumns) {
-    return columns
-  }
-
-  let mergeCandidate = {
-    i: -1,
-    mergeHeight: Infinity,
-  }
-  for (let i = 0; i <= columns.length - 2; i++) {
-    const column1 = columns[i + 0]
-    const column2 = columns[i + 1]
-    const column1Height = sum(column1.map((c) => c.elementHeight))
-    const column2Height = sum(column2.map((c) => c.elementHeight))
-    const mergeHeight = column1Height + column2Height
-    if (mergeCandidate.mergeHeight > mergeHeight) {
-      mergeCandidate = {
-        i,
-        mergeHeight,
-      }
-    }
-  }
-
-  {
-    const { i } = mergeCandidate
-    assert(-1 < i && i < columns.length - 1, { i, columnsLength: columns.length, maxNumberOfColumns })
-    columns[i] = [...columns[i], ...columns[i + 1]]
-    columns.splice(i + 1, 1)
-  }
-
-  mergeColumns(columns, maxNumberOfColumns)
-}
-
-function sum(arr: number[]): number {
-  let total = 0
-  arr.forEach((n) => (total += n))
-  return total
-}
-
 function initTopNavigation() {
   document.addEventListener('click', (ev) => {
     const linkTag = findLinkTag(ev.target as HTMLElement)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brillout/docpress",
-  "version": "0.7.9",
+  "version": "0.7.10",
   "type": "module",
   "dependencies": {
     "@brillout/picocolors": "^1.0.10",

package/renderer/getCSSForResponsiveFullcreenNavItems.ts

@@ -0,0 +1,127 @@
+export { getCSSForResponsiveFullcreenNavItems }
+
+// 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
+
+import assert from 'assert'
+import { type NavItemGrouped } from '../navigation/Navigation'
+
+const columnWidthMin = 300
+const columnWidthMax = 350
+
+function getCSSForResponsiveFullcreenNavItems(navItemsGrouped: NavItemGrouped[]) {
+  let CSS = '\n'
+  for (let numberOfColumns = navItemsGrouped.length; numberOfColumns >= 1; numberOfColumns--) {
+    let CSS_block: string[] = []
+    CSS_block.push(
+      ...[
+        `  html.navigation-fullscreen #navigation-content-main {`,
+        `    column-count: ${numberOfColumns};`,
+        `    max-width: min(100%, ${columnWidthMax * numberOfColumns}px);`,
+        `  }`,
+      ],
+    )
+    const columnsUnmerged = navItemsGrouped.map((navItem) => navItem.navItemChilds.length)
+    const columnsIdMap = determineColumns(columnsUnmerged, numberOfColumns)
+    const columnBreakPoints = determineColumnBreakPoints(columnsIdMap)
+    columnBreakPoints.forEach((columnBreakPoint, columnUngroupedId) => {
+      CSS_block.push(
+        ...[
+          `  .nav-items-group:nth-child(${columnUngroupedId + 1}) {`,
+          `    break-before: ${columnBreakPoint ? 'column' : 'avoid'};`,
+          `  }`,
+        ],
+      )
+    })
+    const noMediaQuery = numberOfColumns === navItemsGrouped.length
+    if (!noMediaQuery) {
+      const maxWidth = (numberOfColumns + 1) * columnWidthMin - 1
+      CSS_block = [
+        //
+        `@media screen and (max-width: ${maxWidth}px) {`,
+        ...CSS_block,
+        `}`,
+      ]
+    }
+    CSS += CSS_block.join('\n') + '\n'
+  }
+  return CSS
+}
+
+function determineColumnBreakPoints(columnsIdMap: number[]): boolean[] {
+  assert(columnsIdMap[0] === 0)
+  let columnGroupedIdBefore = -1
+  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[] {
+  assert(numberOfColumns <= columnsUnmerged.length)
+  const columnsMergingInit: ColumnMerging[] = columnsUnmerged.map((columnHeight, i) => ({
+    columnIdsMerged: [i],
+    heightTotal: columnHeight,
+  }))
+  const columnsMerged = mergeColumns(columnsMergingInit, numberOfColumns)
+  const columnsIdMap: number[] = new Array(columnsUnmerged.length)
+  assert(columnsMerged.length === numberOfColumns)
+  columnsMerged.forEach((columnMerged, columnMergedId) => {
+    columnMerged.columnIdsMerged.forEach((columnId) => {
+      columnsIdMap[columnId] = columnMergedId
+    })
+  })
+  assert(columnsIdMap.length === columnsUnmerged.length)
+
+  return columnsIdMap
+}
+type ColumnMerging = { columnIdsMerged: number[]; heightTotal: number }
+function mergeColumns(columnsMerging: ColumnMerging[], numberOfColumns: number): ColumnMerging[] {
+  if (columnsMerging.length <= numberOfColumns) return columnsMerging
+
+  let mergeCandidate: null | (ColumnMerging & { i: number }) = null
+  for (let i = 0; i <= columnsMerging.length - 2; i++) {
+    const column1 = columnsMerging[i + 0]
+    const column2 = columnsMerging[i + 1]
+    const heightTotal = column1.heightTotal + column2.heightTotal
+    if (!mergeCandidate || mergeCandidate.heightTotal > heightTotal) {
+      mergeCandidate = {
+        i,
+        columnIdsMerged: [
+          //
+          ...column1.columnIdsMerged,
+          ...column2.columnIdsMerged,
+        ],
+        heightTotal,
+      }
+    }
+  }
+  assert(mergeCandidate)
+
+  const { i } = mergeCandidate
+  assert(-1 < i && i < columnsMerging.length - 1)
+  const columnsMergingMod = [
+    //
+    ...columnsMerging.slice(0, i),
+    mergeCandidate,
+    ...columnsMerging.slice(i + 2),
+  ]
+
+  assert(columnsMergingMod.length === columnsMerging.length - 1)
+  return mergeColumns(columnsMergingMod, numberOfColumns)
+}

package/renderer/onRenderHtml.tsx

@@ -6,6 +6,8 @@ import { assert } from '../utils/server'
 import type { PageContextResolved } from '../config/resolvePageContext'
 import { getPageElement } from './getPageElement'
 import type { OnRenderHtmlAsync } from 'vike/types'
+import { groupByLevelMin } from '../navigation/Navigation'
+import { getCSSForResponsiveFullcreenNavItems } from './getCSSForResponsiveFullcreenNavItems'
 
 const onRenderHtml: OnRenderHtmlAsync = async (
   pageContext,
@@ -15,6 +17,10 @@ Promise<Awaited<ReturnType<OnRenderHtmlAsync>>> => {
 
   const page = getPageElement(pageContext, pageContextResolved)
 
+  const { navItemsAll } = pageContextResolved.navigationData
+  const navItemsGrouped = groupByLevelMin(navItemsAll)
+  const CSSResponsiveNavItems = getCSSForResponsiveFullcreenNavItems(navItemsGrouped)
+
   const descriptionTag = pageContextResolved.isLandingPage
     ? dangerouslySkipEscape(`<meta name="description" content="${pageContextResolved.meta.tagline}" />`)
     : ''
@@ -30,6 +36,7 @@ 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(CSSResponsiveNavItems)}</style>
       </head>
       <body>
         <div id="page-view">${dangerouslySkipEscape(pageHtml)}</div>