@brillout/docpress 0.7.9-commit-ec0a3b5 → 0.7.10-commit-776b1fc

package/navigation/Navigation-highlight.css

@@ -1,41 +0,0 @@
-/*
-.nav-item {
-  border-top: 1px solid transparent;
-}
-.nav-item.is-active {
-  border-color: #eaeaea;
-}
-.nav-item[is-active] {
-  background-color: attr(is-active)
-}
-*/
-
-/*
-#navigation-container:not(:hover) ::-webkit-scrollbar {
-  display: none;
-}
-#navigation-container ::-webkit-scrollbar-thumb {
-  opacity: 0;
-}
-#navigation-container ::-webkit-scrollbar-track {
-  opacity: 0;
-}
-*/
-
-/*
-.nav-tree:not(.expanded) > .nav-tree {
-  edisplay: none;
-  background:red;
-}
-  */
-/*
-.nav-tree.expanded,
-.nav-tree.expanded > .nav-tree {
-  display: inherit;
-}
-.nav-tree.expanded,
-.nav-tree.expanded > .nav-tree {
-  display: inherit;
-  background:red;
-}
-*/

package/navigation/Navigation-items.css

@@ -1,116 +0,0 @@
-.nav-item {
-  display: block;
-  white-space: nowrap;
-  overflow-x: hidden;
-  --padding-left-global: 9px;
-  --padding-left-additional: 0px;
-}
-.nav-item code {
-  font-size: 0.9em;
-}
-.nav-item-level-1 + .nav-item-level-4 {
-  margin-top: -2px;
-}
-.nav-item-level-4 {
-  margin-top: 14px;
-  margin-bottom: -1px;
-  color: #999;
-  font-size: 12px;
-  font-weight: 400;
-  letter-spacing: 0.15ch;
-  padding-left: var(--padding-left-global);
-  padding-right: 4px;
-  text-decoration: none;
-}
-.nav-item-level-1 {
-  margin-top: 30px;
-  font-size: 15.4px;
-  text-transform: uppercase;
-  font-weight: 600;
-  letter-spacing: 0.15ch;
-  color: var(--color-text);
-  padding: 12px 0;
-  padding-left: calc(var(--padding-left-global) - 2px);
-  padding-right: 4px;
-  text-decoration: none;
-}
-.nav-item-level-2 {
-  text-decoration: none;
-  font-size: 14.4px;
-  font-weight: 400;
-  letter-spacing: 0.15ch;
-  color: var(--color-text);
-  padding-left: var(--padding-left-global);
-  padding-right: 0;
-  --padding: 4px;
-  padding-top: var(--padding);
-  padding-bottom: var(--padding);
-}
-.nav-item-level-3 {
-  font-size: 12px;
-  font-weight: 400;
-  letter-spacing: 0.15ch;
-  color: var(--color-text);
-  text-decoration: none;
-  --padding: 5px;
-
-  background-color: #f9f9f9;
-  padding: var(--padding) 0;
-  padding-left: calc(var(--padding-left-global) + var(--padding-left-additional));
-}
-html.navigation-fullscreen .nav-item-level-3 {
-  border-right: 4px solid #eee;
-}
-.nav-item-level-3.nav-item-first-of-its-kind {
-  padding-top: calc(var(--padding) * 1.6);
-}
-.nav-item-level-3.nav-item-last-of-its-kind {
-  padding-bottom: calc(var(--padding) * 2);
-}
-.nav-item-level-2,
-.nav-item-level-3 {
-  position: relative;
-}
-/*
-.nav-item-level-2.is-active .nav-item-text{
-  background-color: var(--background-color);
-}
-*/
-.nav-item-level-2.is-active {
-  background-color: var(--background-color);
-}
-.nav-item-level-3.is-active:before {
-  display: block;
-  content: '';
-  position: absolute;
-  width: 4px;
-  left: 0;
-  top: 0;
-  height: 100%;
-  background-color: var(--background-color);
-  z-index: 10;
-}
-.nav-item-level-3.is-active-last:after {
-  display: block;
-  content: '';
-  position: absolute;
-  height: 4px;
-  left: 0;
-  bottom: 0;
-  width: 100%;
-  background-color: var(--background-color);
-  z-index: 10;
-  border-bottom-left-radius: 5px;
-}
-html.navigation-fullscreen .nav-item {
-  --expend-border-radius: 5px;
-}
-.nav-item.is-active-first {
-  border-top-left-radius: 5px;
-  border-top-right-radius: var(--expend-border-radius);
-}
-.nav-item.is-active-last,
-.nav-item.is-active-last:before {
-  border-bottom-left-radius: 5px;
-  border-bottom-right-radius: var(--expend-border-radius);
-}

package/navigation/Navigation-layout.css

@@ -1,129 +0,0 @@
-:root {
-  --mobile-header-height: 60px;
-  --navigation-min-width: 300px;
-  --navigation-max-width: 350px;
-}
-#navigation-wrapper {
-  min-width: var(--navigation-min-width);
-}
-.doc-page #navigation-wrapper {
-  max-width: var(--navigation-max-width);
-}
-.landing-page #navigation-wrapper {
-  /* prettier-ignore */
-  max-width: min(var(--navigation-max-width), max(var(--navigation-min-width), calc(var(--navigation-min-width) + 100% - 1240px)));
-}
-#navigation-container {
-  /* `position: fixed` doesn't inherit the parent's width */
-  position: sticky;
-  overflow-y: auto;
-  overscroll-behavior: contain;
-  border-right: 1px solid #eee;
-  --background-color: #f0f0f0;
-  padding-bottom: 70px;
-}
-.navigation-content {
-  margin-top: 20px;
-}
-#navigation-content-detached {
-  margin-top: 25px;
-}
-
-#mobile-navigation-mask {
-  position: fixed;
-  width: 100%;
-  height: 100vh;
-  top: 0;
-  left: 0;
-  z-index: 2;
-}
-/* `1140px` is the breaking point that preserves the width of code blocks. */
-/* BEFORE EDITING THIS: also change the `1139px` value below */
-@media screen and (min-width: 1140px) {
-  #mobile-header {
-    display: none !important;
-  }
-  #navigation-container {
-    height: 100vh;
-    top: 0;
-  }
-  #mobile-navigation-mask {
-    display: none;
-  }
-}
-#navigation-container {
-  transition: transform 0.25s ease;
-  background: white;
-  z-index: 3;
-}
-.page-wrapper {
-  margin-left: calc(-1 * var(--navigation-fullscreen-button-width));
-}
-@media screen and (max-width: 1139px) {
-  #navigation-header-logo {
-    display: none !important;
-  }
-  #navigation-wrapper {
-    min-width: 0px !important;
-    max-width: 0px !important;
-  }
-  #navigation-fullscreen-button {
-    display: none;
-  }
-  .page-wrapper {
-    margin-left: 0 !important;
-  }
-  #navigation-container {
-    --width: min(100%, 350px);
-    width: var(--width);
-    left: 0;
-    height: calc(100vh - var(--mobile-header-height));
-    top: var(--mobile-header-height);
-    padding-top: 20px;
-    /* `position: sticky` doesn't seem to work on mobile */
-    position: fixed;
-  }
-  body:not(.mobile-show-navigation) #navigation-container {
-    transform: translateX(calc(-1 * var(--width)));
-  }
-  body:not(.mobile-show-navigation) #mobile-navigation-mask {
-    display: none;
-  }
-  #mobile-header {
-    display: inherit;
-  }
-  .doc-page h2 {
-    --padding-top: calc(var(--mobile-header-height) + 12px) !important;
-  }
-}
-
-html.navigation-fullscreen #navigation-container {
-  width: 100%;
-  height: 100vh;
-  position: fixed;
-  top: 0;
-  left: 0;
-  background-color: white;
-}
-html.navigation-fullscreen #navigation-header,
-html.navigation-fullscreen #navigation-content-detached,
-html.navigation-fullscreen #detached-note {
-  display: none !important;
-}
-html.navigation-fullscreen {
-  /* disable scroll of main view */
-  overflow: hidden !important;
-}
-html.navigation-fullscreen #navigation-body {
-  display: flex;
-  justify-content: center;
-}
-html.navigation-fullscreen #navigation-content-main {
-  flex-grow: 1;
-  margin-top: -25px;
-  column-gap: 20px;
-}
-html.navigation-fullscreen .nav-items-group {
-  break-inside: avoid;
-  width: 100%;
-}

package/navigation/initMobileNavigation.ts

@@ -1,23 +0,0 @@
-export { initMobileNavigation }
-export { hideMobileNavigation }
-
-function initMobileNavigation() {
-  activateMobileShowNavigationToggle()
-  activateMobileNavigationMask()
-}
-
-function activateMobileShowNavigationToggle() {
-  const toggle = document.getElementById('mobile-show-navigation-toggle')!
-  toggle.onclick = toggleNavigation
-}
-function activateMobileNavigationMask() {
-  const navigationMask = document.getElementById('mobile-navigation-mask')!
-  navigationMask.onclick = toggleNavigation
-}
-
-function toggleNavigation() {
-  document.body.classList.toggle('mobile-show-navigation')
-}
-function hideMobileNavigation() {
-  document.body.classList.remove('mobile-show-navigation')
-}

package/navigation/initPressKit.ts

@@ -1,19 +0,0 @@
-export { initPressKit }
-
-import { navigate } from 'vike/client/router'
-
-function initPressKit() {
-  // Right click navigation header => show /press
-  navigationHeaderRightClickInterceptor()
-}
-
-function navigationHeaderRightClickInterceptor() {
-  const navHeader = document.getElementById('navigation-header')!
-  if (!navHeader.classList.contains('press-kit')) return
-  if (window.location.pathname === '/press') return
-  const navHeaderImg = document.querySelector('#navigation-header-logo img') as HTMLElement
-  navHeaderImg.oncontextmenu = (ev) => {
-    ev.preventDefault()
-    navigate('/press#logo')
-  }
-}

package/navigation/navigation-fullscreen/NavigationFullscreenButton.css

@@ -1,32 +0,0 @@
-:root {
-  --navigation-fullscreen-button-width: 20px;
-}
-#navigation-fullscreen-button {
-  width: var(--navigation-fullscreen-button-width);
-  position: relative;
-  z-index: 2;
-}
-#navigation-wrapper:hover + #navigation-fullscreen-button > div > div,
-#navigation-fullscreen-button:hover > div > div {
-  left: 0px;
-}
-#navigation-fullscreen-button > div > div {
-  transition: all 0.3s ease-in-out;
-  left: -20px;
-  position: absolute;
-  height: 100%;
-  width: 100%;
-  background-color: #eee !important;
-  background: url('./chevron.svg');
-  background-repeat: no-repeat;
-  background-position: center center;
-}
-
-html:not(.navigation-fullscreen) #navigation-fullscreen-close {
-  display: none;
-}
-
-html.navigation-fullscreen #page-content {
-  /* Make `Ctrl-F` browser search only crawl the navigation */
-  visibility: hidden;
-}

package/navigation/navigation-fullscreen/NavigationFullscreenButton.tsx

@@ -1,47 +0,0 @@
-export { NavigationFullscreenButton }
-export { NavigationFullscreenClose }
-
-import React from 'react'
-import './NavigationFullscreenButton.css'
-import closeIcon from './close.svg'
-import { hotkeyLabel } from './hotkeyLabel'
-
-function NavigationFullscreenButton() {
-  return (
-    <>
-      <a id="navigation-fullscreen-button">
-        <div
-          style={{
-            position: 'fixed',
-            cursor: 'pointer',
-            height: '100vh',
-            width: 20,
-            overflow: 'hidden',
-          }}
-        >
-          <div></div>
-        </div>
-        <div
-          style={{ position: 'fixed', height: '100vh', width: 20 }}
-          aria-label={hotkeyLabel}
-          data-balloon-pos="right"
-          data-balloon-blunt
-        ></div>
-      </a>
-    </>
-  )
-}
-
-function NavigationFullscreenClose() {
-  return (
-    <a
-      id="navigation-fullscreen-close"
-      style={{ position: 'absolute', top: 11, right: 11, zIndex: 10 }}
-      aria-label={hotkeyLabel}
-      data-balloon-pos="left"
-      data-balloon-blunt
-    >
-      <img src={closeIcon} height={50} width={50} style={{ display: 'block' }} />
-    </a>
-  )
-}

package/navigation/navigation-fullscreen/chevron.svg

@@ -1 +0,0 @@
-<svg width="32" height="32" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path stroke="#666" stroke-width="1" fill="#666" fill-rule="evenodd" d="M6.776 1.553a.5.5 0 0 1 .671.223l3 6a.5.5 0 0 1 0 .448l-3 6a.5.5 0 1 1-.894-.448L9.44 8L6.553 2.224a.5.5 0 0 1 .223-.671z"/></svg>

package/navigation/navigation-fullscreen/close.svg

@@ -1,4 +0,0 @@
-<svg width="48.855" height="48.855" version="1.1" viewBox="0 0 22.901 22.901" xmlns="http://www.w3.org/2000/svg">
- <circle cx="11.45" cy="11.45" r="10.607" fill="#fff" stroke="#666" stroke-dashoffset="251.44" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.6875" style="paint-order:normal"/>
- <path d="m7.5904 6.2204 3.86 3.86 3.84-3.84a0.92 0.92 0 0 1 0.66-0.29 1 1 0 0 1 1 1 0.9 0.9 0 0 1-0.27 0.66l-3.89 3.84 3.89 3.89a0.9 0.9 0 0 1 0.27 0.61 1 1 0 0 1-1 1 0.92 0.92 0 0 1-0.69-0.27l-3.81-3.86-3.85 3.85a0.92 0.92 0 0 1-0.65 0.28 1 1 0 0 1-1-1 0.9 0.9 0 0 1 0.27-0.66l3.89-3.84-3.89-3.89a0.9 0.9 0 0 1-0.27-0.61 1 1 0 0 1 1-1c0.24 3e-3 0.47 0.1 0.64 0.27z" fill="#666" stroke="#666" stroke-width=".11719"/>
-</svg>

package/navigation/navigation-fullscreen/hotkeyLabel.ts

@@ -1 +0,0 @@
-export const hotkeyLabel = 'Hotkey <Esc>'

package/navigation/navigation-fullscreen/initNavigationFullscreen.ts

@@ -1,60 +0,0 @@
-export { initNavigationFullscreen }
-export { initNavigationFullscreenOnce }
-export { hideNavigationFullScreen }
-
-import { assert } from '../../utils/client'
-
-let scrollPositionBeforeToggle: number
-
-function initNavigationFullscreenOnce() {
-  scrollPositionBeforeToggle = 0 // Initial scroll of fullscreen navigation is 0
-  initKeyBindings()
-}
-function initKeyBindings() {
-  document.addEventListener(
-    // We don't use keydown to not interfere with user pressing `<Esc>` for closing the browser's `<Ctrl-F>` search diablog, see https://stackoverflow.com/questions/66595035/how-to-detect-escape-key-if-search-bar-of-browser-is-open
-    'keydown',
-    (ev) => {
-      if (document.body.classList.contains('DocSearch--active')) return
-      if (ev.key === 'Escape') toggleNavExpend()
-    },
-    false,
-  )
-  initTopNavigation()
-}
-function initNavigationFullscreen() {
-  document.getElementById('navigation-fullscreen-button')!.onclick = toggleNavExpend
-  document.getElementById('navigation-fullscreen-close')!.onclick = toggleNavExpend
-}
-
-function toggleNavExpend() {
-  assert(scrollPositionBeforeToggle !== undefined)
-  const navContainer = document.getElementById('navigation-container')!
-  const scrollPos = navContainer.scrollTop
-  document.documentElement.classList.toggle('navigation-fullscreen')
-  navContainer.scrollTop = scrollPositionBeforeToggle
-  scrollPositionBeforeToggle = scrollPos
-}
-function hideNavigationFullScreen() {
-  if (!document.documentElement.classList.contains('navigation-fullscreen')) return
-  toggleNavExpend()
-}
-
-function initTopNavigation() {
-  document.addEventListener('click', (ev) => {
-    const linkTag = findLinkTag(ev.target as HTMLElement)
-    if (!linkTag) return
-    if (linkTag.id !== 'doclink') return
-    toggleNavExpend()
-  })
-}
-function findLinkTag(target: HTMLElement): null | HTMLElement {
-  while (target.tagName !== 'A') {
-    const { parentNode } = target
-    if (!parentNode) {
-      return null
-    }
-    target = parentNode as HTMLElement
-  }
-  return target
-}

package/renderer/getCSSForResponsiveFullcreenNavItems.ts

@@ -1,128 +0,0 @@
-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'
-
-function getCSSForResponsiveFullcreenNavItems(navItemsGrouped: NavItemGrouped[]) {
-  const columnWidthMin = 300
-  const columnWidthMax = 350
-  const columnsUnmerged = navItemsGrouped.map((navItem) => navItem.navItemChilds.length)
-  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 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 = 0
-  const columnBreakPoints = columnsIdMap.map((columnGroupedId, columnUngroupedId) => {
-    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[], maxNumberOfColumns: number): ColumnMerging[] {
-  if (columnsMerging.length <= maxNumberOfColumns) 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, maxNumberOfColumns)
-}