@brillout/docpress 0.7.9 → 0.7.10-commit-577cdcd

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,119 +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-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;
-  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,127 +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 .navigation-content {
-  display: flex;
-  margin: auto; /* A `max-width` is set by src/navigation/navigation-fullscreen/initNavigationFullscreen.ts */
-}
-html.navigation-fullscreen .navigation-content > .nav-column {
-  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;
-}
-html.navigation-fullscreen {
-  /* disable scroll of main view */
-  overflow: hidden !important;
-}

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')
-  }
-}

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,147 +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,
-  )
-  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() {
-  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 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)
-    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
-}