@brillout/docpress 0.8.11 → 0.8.13

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;