@brillout/docpress 0.7.10 → 0.8.1

package/renderer/getStyleColumnLayout.ts

@@ -0,0 +1,204 @@
+export { getStyleColumnLayout }
+export { determineColumnLayoutEntries }
+
+// 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 { 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[][] } {
+  const navItemsWithLength: NavItemWithLength[] = navItems.map((navItem) => ({
+    ...navItem,
+    numberOfHeadings: navItem.level === 1 || navItem.level === 4 ? 0 : null,
+  }))
+  let navItemLevel1: NavItemWithLength | undefined
+  let navItemLevel4: NavItemWithLength | undefined
+  navItemsWithLength.forEach((navItem) => {
+    if (navItem.level === 1) {
+      navItemLevel1 = navItem
+      navItemLevel4 = undefined
+      return
+    }
+    if (navItem.level === 4) {
+      navItemLevel4 = navItem
+      return
+    }
+    const bumpNavItemLength = (navItem: NavItemWithLength) => {
+      assert(navItem.numberOfHeadings !== null)
+      navItem.numberOfHeadings++
+    }
+    assert(navItemLevel1)
+    bumpNavItemLength(navItemLevel1)
+    if (navItemLevel4) {
+      bumpNavItemLength(navItemLevel4)
+    }
+  })
+
+  const columnLayouts: number[][] = []
+  let columns: number[] = []
+  let isFullWidth: boolean | undefined
+  navItemsWithLength.forEach((navItem, i) => {
+    let isFullWidthBegin = false
+    if (navItem.level === 1) {
+      const isFullWidthPrevious = isFullWidth
+      isFullWidth = !!navItem.menuModalFullWidth
+      if (isFullWidth) isFullWidthBegin = true
+      if (isFullWidthPrevious !== undefined && isFullWidthPrevious !== isFullWidth) {
+        columnLayouts.push(columns)
+        columns = []
+      }
+    }
+    const navItemPrevious = navItemsWithLength[i - 1]
+    const navItemNext = navItemsWithLength[i + 1]
+    if (
+      !isFullWidth ? navItem.level === 1 : (navItem.level === 4 && navItemPrevious!.level !== 1) || isFullWidthBegin
+    ) {
+      if (isFullWidth) {
+        assert(navItem.level === 4 || (navItem.level === 1 && isFullWidthBegin))
+      } else {
+        assert(navItem.level === 1)
+      }
+      let { numberOfHeadings } = navItem
+      assert(numberOfHeadings !== null)
+      if (isFullWidthBegin) {
+        assert(navItem.level === 1)
+        assertUsage(
+          navItemNext && navItemNext.level === 4,
+          // We can lift this requirement, but it isn't trivial to implement.
+          'level-1 headings with menuModalFullWidth need to be followed by a level-4 heading',
+        )
+        assert(navItemNext.numberOfHeadings)
+        numberOfHeadings = navItemNext.numberOfHeadings
+      }
+      columns.push(numberOfHeadings)
+      navItems[i].isColumnLayoutElement = true
+    }
+  })
+  columnLayouts.push(columns)
+
+  return { columnLayouts }
+}
+
+function getStyleColumnLayout(columnLayouts: number[][]): string {
+  let 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);
+}
+`,
+      )
+      const columnsIdMap = determineColumns(columns, numberOfColumns)
+      const columnBreakPoints = determineColumnBreakPoints(columnsIdMap)
+      columnBreakPoints.forEach((columnBreakPoint, columnUngroupedId) => {
+        styleGivenNumberOfColumns.push(
+          css`
+.column-layout-${i} .column-layout-entry:nth-child(${columnUngroupedId + 1}) {
+  break-before: ${columnBreakPoint ? 'column' : 'avoid'};
+}
+`,
+        )
+      })
+      const noContainerQuery = numberOfColumns === columns.length
+      if (!noContainerQuery) {
+        const maxWidth = (numberOfColumns + 1) * columnWidthMin - 1
+        styleGivenNumberOfColumns = [
+          //
+          `@container(max-width: ${maxWidth}px) {`,
+          ...styleGivenNumberOfColumns,
+          `}`,
+        ]
+      }
+      style += styleGivenNumberOfColumns.join('\n') + '\n'
+    }
+  })
+  return style
+}
+
+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/onRenderClient.tsx

@@ -5,41 +5,39 @@ import type { PageContextClient } from 'vike/types'
 import ReactDOM from 'react-dom/client'
 import { PageContextResolved } from '../config/resolvePageContext'
 import { getPageElement } from './getPageElement'
-import {
-  hideNavigationFullScreen,
-  initNavigationFullscreen,
-  initNavigationFullscreenOnce,
-} from '../navigation/navigation-fullscreen/initNavigationFullscreen'
-import { hideMobileNavigation, initMobileNavigation } from '../navigation/initMobileNavigation'
-import { initPressKit } from '../navigation/initPressKit'
+import { closeMenuModal } from '../MenuModal'
 import '../css/index.css'
 import { autoScrollNav } from '../autoScrollNav'
 import { installSectionUrlHashs } from '../installSectionUrlHashs'
-import { addFeatureClickHandlers, addTwitterWidgets } from '../components/FeatureList/FeatureList.client'
+import { getGlobalObject } from '../utils/client'
+import { initKeyBindings } from '../initKeyBindings'
+
+const globalObject = getGlobalObject<{
+  root?: ReactDOM.Root
+  renderPromiseResolve?: () => void
+}>('onRenderClient.ts', {})
 
 addEcosystemStamp()
-initNavigationFullscreenOnce()
+initKeyBindings()
 
-let root: ReactDOM.Root
-let renderPromiseResolve: () => void
 async function onRenderClient(pageContext: PageContextClient) {
   onRenderStart()
 
   // TODO: stop using any
   const pageContextResolved: PageContextResolved = (pageContext as any).pageContextResolved
   const renderPromise = new Promise<void>((r) => {
-    renderPromiseResolve = r
+    globalObject.renderPromiseResolve = r
   })
   let page = getPageElement(pageContext, pageContextResolved)
   page = <OnRenderDoneHook>{page}</OnRenderDoneHook>
   const container = document.getElementById('page-view')!
   if (pageContext.isHydration) {
-    root = ReactDOM.hydrateRoot(container, page)
+    globalObject.root = ReactDOM.hydrateRoot(container, page)
   } else {
-    if (!root) {
-      root = ReactDOM.createRoot(container)
+    if (!globalObject.root) {
+      globalObject.root = ReactDOM.createRoot(container)
     }
-    root.render(page)
+    globalObject.root.render(page)
   }
   if (!pageContext.isHydration) {
     applyHead(pageContext)
@@ -54,20 +52,15 @@ function applyHead(pageContext: PageContextClient) {
 }
 
 function onRenderStart() {
-  hideMobileNavigation()
-  hideNavigationFullScreen()
+  closeMenuModal()
 }
 
 function onRenderDone() {
   autoScrollNav()
+  // TODO/refactor: use React?
   installSectionUrlHashs()
-  initNavigationFullscreen()
-  initMobileNavigation()
-  initPressKit()
-  addFeatureClickHandlers()
-  addTwitterWidgets()
   setHydrationIsFinished()
-  renderPromiseResolve()
+  globalObject.renderPromiseResolve!()
 }
 
 function OnRenderDoneHook({ children }: { children: React.ReactNode }) {

package/renderer/onRenderHtml.tsx

@@ -6,8 +6,7 @@ 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'
+import { getStyleColumnLayout } from './getStyleColumnLayout'
 
 const onRenderHtml: OnRenderHtmlAsync = async (
   pageContext,
@@ -17,9 +16,7 @@ Promise<Awaited<ReturnType<OnRenderHtmlAsync>>> => {
 
   const page = getPageElement(pageContext, pageContextResolved)
 
-  const { navItemsAll } = pageContextResolved.navigationData
-  const navItemsGrouped = groupByLevelMin(navItemsAll)
-  const CSSResponsiveNavItems = getCSSForResponsiveFullcreenNavItems(navItemsGrouped)
+  const styleMenuModalLayout = getStyleColumnLayout(pageContextResolved.columnLayouts)
 
   const descriptionTag = pageContextResolved.isLandingPage
     ? dangerouslySkipEscape(`<meta name="description" content="${pageContextResolved.meta.tagline}" />`)
@@ -36,7 +33,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>
+        <style>${dangerouslySkipEscape(styleMenuModalLayout)}</style>
       </head>
       <body>
         <div id="page-view">${dangerouslySkipEscape(pageHtml)}</div>

package/types/Heading.ts

@@ -8,10 +8,10 @@ type HeadingResolved = {
   level: number
   title: string
   titleInNav: string
-  noSideNavigation?: NoSideNavigation
   topNavigation?: true | string
   linkBreadcrumb: string[]
   sectionTitles?: string[]
+  menuModalFullWidth?: true
 } & Tmp
 
 type HeadingDetachedResolved = Omit<HeadingResolved, 'level' | 'linkBreadcrumb'> & {
@@ -22,6 +22,7 @@ type HeadingDetachedResolved = Omit<HeadingResolved, 'level' | 'linkBreadcrumb'>
 type HeadingDefinitionCommon = {
   title: string
   topNavigation?: true | string
+  menuModalFullWidth?: true
 }
 
 type HeadingDetachedDefinition = HeadingDefinitionCommon & {
@@ -32,14 +33,12 @@ type HeadingDetachedDefinition = HeadingDefinitionCommon & {
 type HeadingDefinition = HeadingDefinitionCommon & {
   url?: null | string
   titleInNav?: string
-  noSideNavigation?: NoSideNavigation
 } & HeadingDefinitionLevel &
   Tmp
 type IsCategory = {
   url?: undefined
   titleDocument?: undefined
   titleInNav?: undefined
-  noSideNavigation?: undefined
 }
 type HeadingDefinitionLevel =
   | ({ level: 1 } & IsCategory)
@@ -54,5 +53,3 @@ type Tmp = {
   // TODO: remove? Both Vike and Telefunc set it to the same value than docpress.config.js#projectInfo.projectName
   titleDocument?: string
 }
-
-type NoSideNavigation = true | 'no-logo'

package/utils/client.ts

@@ -1,2 +1,3 @@
 export * from './assert'
 export * from './isBrowser'
+export * from './getGlobalObject'

package/utils/css.ts

@@ -0,0 +1,26 @@
+export function css(strings: TemplateStringsArray | string[], ...values: (string | number)[]): string {
+  // The boring part
+  let result = strings
+    .map((str, i) => {
+      let s = str
+      if (i !== strings.length - 1) {
+        s += values[i]
+      }
+      return s
+    })
+    .join('')
+
+  // Remove comments
+  result = result
+    .split('\n')
+    .filter((line) => !line.startsWith('// '))
+    .join('\n')
+
+  // Minifiy
+  result = result
+    .replace(/\s+/g, ' ') // Replace all whitespace sequences with a single space
+    .replace(/\s*([{}:;])\s*/g, '$1') // Remove space around {, }, :, ;
+    .trim() // Trim any leading/trailing whitespace
+
+  return result
+}

package/utils/getGlobalObject.ts

@@ -0,0 +1,11 @@
+export function getGlobalObject<T extends Record<string, unknown> = never>(
+  // We use the filename as key; each `getGlobalObject()` call should live inside a file with a unique filename.
+  key: `${string}.ts`,
+  defaultValue: T,
+): T {
+  // @ts-ignore
+  const globalObjectsAll = (globalThis[projectKey] = globalThis[projectKey] || {})
+  const globalObject = (globalObjectsAll[key] = globalObjectsAll[key] || defaultValue)
+  return globalObject
+}
+const projectKey = '_docpress'

package/Layout.css

@@ -1,63 +0,0 @@
-.doc-page .page-container {
-  padding-bottom: 100px;
-}
-
-.page-layout {
-  display: flex;
-  justify-content: center;
-  width: 100%;
-}
-.page-layout > #navigation-wrapper,
-.page-layout > .page-wrapper {
-  flex-grow: 1;
-}
-/* Avoid overflow, see https://stackoverflow.com/questions/36230944/prevent-flex-items-from-overflowing-a-container/66689926#66689926 */
-.page-layout > .page-wrapper {
-  min-width: 0;
-}
-
-.doc-page .page-wrapper {
-  --main-view-max-width: 800px;
-}
-.landing-page .page-wrapper {
-  --main-view-max-width: 1010px;
-}
-.page-layout:not(.noSideNavigation) .page-wrapper {
-  max-width: calc(var(--main-view-max-width) + 80px);
-}
-.page-layout:not(.noSideNavigation) .page-content {
-  box-sizing: content-box;
-  max-width: var(--main-view-max-width);
-  padding: 20px var(--main-view-padding);
-  margin: auto;
-}
-
-.page-content {
-  --main-view-padding: 20px;
-}
-@media screen and (max-width: 1139px) {
-  .page-content {
-    --main-view-padding: 10px;
-  }
-}
-
-
-/* === noSideNavigation === */
-.page-layout:not(.noSideNavigation) #top-navigation {
-  display: none !important;
-}
-@media screen and (max-width: 1139px) {
-  #top-navigation {
-    display: none !important;
-  }
-}
-@media screen and (min-width: 1140px) {
-  html:not(.navigation-fullscreen) .page-layout.noSideNavigation #navigation-wrapper,
-  html:not(.navigation-fullscreen) .page-layout.noSideNavigation #navigation-fullscreen-button {
-    display: none !important;
-  }
-  .noSideNavigation .page-wrapper {
-    /* Maybe we can remove this after we remove the vertical fullscreen navigation toggler? */
-    margin-left: 0 !important;
-  }
-}

package/MobileHeader.tsx

@@ -1,70 +0,0 @@
-import React from 'react'
-import { usePageContext, usePageContext2 } from './renderer/usePageContext'
-
-export { MobileHeader }
-
-function MobileHeader() {
-  const pageContext = usePageContext()
-  const pageContext2 = usePageContext2()
-  const { NavHeaderMobile } = pageContext2.config.NavHeader!
-  return (
-    <div
-      id="mobile-header"
-      style={{
-        height: 'var(--mobile-header-height)',
-        width: '100%',
-        position: 'relative',
-      }}
-    >
-      <div
-        style={{
-          position: 'fixed',
-          display: 'flex',
-          alignItems: 'center',
-          background: 'white',
-          zIndex: 99,
-          top: 0,
-          left: 0,
-          height: 'var(--mobile-header-height)',
-          width: '100%',
-          borderBottom: '1px solid #ddd',
-        }}
-      >
-        <MobileShowNavigationToggle />
-        <a
-          href="/"
-          style={{
-            color: 'inherit',
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'left',
-            textDecoration: 'none',
-            ...pageContext2.config.NavHeader?.navHeaderMobileWrapperStyle,
-          }}
-        >
-          <NavHeaderMobile />
-        </a>
-      </div>
-    </div>
-  )
-}
-
-function MobileShowNavigationToggle() {
-  return (
-    <div style={{ padding: 20, lineHeight: 0, cursor: 'pointer' }} id="mobile-show-navigation-toggle">
-      <svg
-        style={{ width: 20 }}
-        className="icon"
-        xmlns="http://www.w3.org/2000/svg"
-        aria-hidden="true"
-        role="img"
-        viewBox="0 0 448 512"
-      >
-        <path
-          fill="currentColor"
-          d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"
-        ></path>
-      </svg>
-    </div>
-  )
-}

package/algolia/DocSearch.css

@@ -1,28 +0,0 @@
-.DocSearch-Button-Keys {
-  margin-left: 6px !important;
-}
-.DocSearch-Search-Icon {
-  margin-right: 0 !important;
-}
-.DocSearch-Button-Placeholder {
-  padding-right: 6px !important;
-}
-
-.DocSearch-Button-Placeholder,
-.DocSearch-Button-Keys {
-  display: none !important;
-}
-.DocSearch-Button {
-  background: transparent !important;
-  padding: 5px !important;
-  outline: none !important;
-  border: none !important;
-  box-shadow: none !important;
-}
-.DocSearch-Search-Icon {
-  height: 21px !important;
-  width: 21px !important;
-}
-.DocSearch-Button {
-  margin: 0 !important;
-}

package/components/FeatureList/FeatureList.client.ts

@@ -1,60 +0,0 @@
-export { addTwitterWidgets }
-export { addFeatureClickHandlers }
-
-import { assert } from '../../utils/client'
-
-function addTwitterWidgets() {
-  loadScript('https://platform.twitter.com/widgets.js')
-}
-
-function addFeatureClickHandlers() {
-  const featuresEl = document.getElementById('features')
-  if (!featuresEl) return
-  const featureEls: HTMLElement[] = Array.from(featuresEl.querySelectorAll('.feature.has-learn-more'))
-  featureEls.forEach((featureEl) => {
-    featureEl.onclick = () => {
-      expandLearnMore(featureEl)
-    }
-  })
-}
-
-function expandLearnMore(featureEl: HTMLElement) {
-  const featureId = featureEl.id
-  assert(featureId.startsWith('feature-'), { featureId })
-  const featureName = featureId.slice('feature-'.length)
-
-  const selectedClass = 'selected'
-  const learnId = 'learn-more-' + featureName
-  const learnEl = document.getElementById(learnId)
-  assert(learnEl, { learnId })
-
-  const isExpanded = featureEl.classList.contains(selectedClass)
-
-  if (!isExpanded) {
-    const rowEl = featureEl.parentNode as HTMLElement
-    if (getComputedStyle(rowEl, 'display') === 'grid') {
-      ;[
-        ...(rowEl.querySelectorAll('.learn-more') as any as HTMLElement[]),
-        ...(rowEl.querySelectorAll('.feature') as any as HTMLElement[]),
-      ].forEach((el) => {
-        el.classList.remove(selectedClass)
-      })
-    }
-  }
-  ;[featureEl, learnEl].forEach((el) => {
-    el.classList.toggle(selectedClass)
-  })
-}
-
-function loadScript(scriptUrl: string): void {
-  assert(scriptUrl.startsWith('https://'))
-  const scriptEl = document.createElement('script')
-  scriptEl.src = scriptUrl
-  scriptEl.async = true
-  scriptEl.setAttribute('charset', 'utf-8')
-  document.getElementsByTagName('head')[0].appendChild(scriptEl)
-}
-
-function getComputedStyle(el: HTMLElement, styleProp: string) {
-  return window.document.defaultView!.getComputedStyle(el).getPropertyValue(styleProp)
-}