@brillout/docpress 0.1.20 → 0.2.1

package/src/navigation/Navigation.client.old.ts

@@ -1,303 +0,0 @@
-// @ts-nocheck
-
-import { headings as headingsCrawled } from './Docs.mdx'
-import { assert, isBrowser } from './utils/client'
-import { Heading } from './types'
-const headings: Heading[] = [
-  {
-    level: 2,
-    title: 'Overview',
-    isDocumentBegin: true
-  },
-  ...headingsCrawled
-]
-assert_headings()
-
-export { updateSidePanelScroll }
-
-if (isBrowser()) {
-  setTimeout(updateSidePanelScroll, 0)
-  window.addEventListener('scroll', updateSidePanelScroll, { passive: true })
-  window.addEventListener('resize', updateSidePanelScroll, { passive: true })
-}
-
-function updateSidePanelScroll() {
-  const headingSectionsVisibility = getHeadingSectionsVisbility(headings)
-  setActiveHeadings(headingSectionsVisibility)
-  renderNavScrollBar(headingSectionsVisibility)
-}
-
-function setActiveHeadings(headingSectionsVisibility: HeadingSectionVisibility[]) {
-  /*
-  const viewportPercentageHighest = Math.max(
-    ...headingSectionsVisibility.map(({ viewportPercentage }) => viewportPercentage)
-  )
-  */
-  const visibleHeadings = getVisibleHeadings(headingSectionsVisibility)
-  // console.log('v', visibleHeadings);
-  headingSectionsVisibility.forEach((heading) => {
-    const navItem = findNavLink(heading)
-    const isVisibile = visibleHeadings.find((visibleHeading) => {
-      if ('isDocumentBegin' in heading || 'isDocumentBegin' in visibleHeading) {
-        return 'isDocumentBegin' in heading && 'isDocumentBegin' in visibleHeading
-      } else {
-        return heading.id === visibleHeading.id
-      }
-    })
-    navItem.style.display = isVisibile ? 'inherit' : 'none'
-    /*
-    if (viewportPercentageHighest === heading.viewportPercentage) {
-      const navItem = findNavLink(heading)
-      updateNavTreeExpendedState(navItem)
-    }
-    */
-  })
-  headingSectionsVisibility.forEach((heading) => {
-    const navItem = findNavLink(heading)
-    setNavItemBackgroundColor(navItem, heading.viewportPercentage)
-  })
-}
-
-function updateNavTreeExpendedState(navItem: HTMLElement) {
-  const navItemHref = navItem.getAttribute('href')
-  assert(typeof navItemHref === 'string')
-  const selector = `a[href="${navItemHref}"]`
-  //console.log(11, selector, 2)
-  assert(document.querySelector(selector))
-  document.querySelectorAll('.nav-tree').forEach((navTree) => {
-    const isExpended = !!navTree.querySelector(selector)
-    //console.log(navTree.href, isExpended)
-    navTree.classList[isExpended ? 'add' : 'remove']('expanded')
-  })
-}
-
-function setNavItemBackgroundColor(navItem: HTMLElement, viewportPercentage: number) {
-  if (viewportPercentage) {
-    assert(viewportPercentage >= 0 && viewportPercentage <= 1)
-    const backgroundColor = `rgba(0, 0, 0, ${viewportPercentage / 20})`
-    navItem.style.backgroundColor = backgroundColor
-  } else {
-    navItem.style.backgroundColor = 'transparent'
-  }
-}
-
-function findNavLink(heading: Heading): HTMLElement {
-  const href = getHref(heading)
-  const navigationEl = getNavigationEl()
-  const navLinks: HTMLElement[] = Array.from(navigationEl.querySelectorAll(`a[href="${href}"]`))
-  assert(navLinks.length === 1)
-  return navLinks[0]
-}
-
-let _navigationEl: HTMLElement
-function getNavigationEl(): HTMLElement {
-  _navigationEl = _navigationEl || document.getElementById('navigation-content')
-  assert(_navigationEl)
-  return _navigationEl
-}
-
-function renderNavScrollBar(headingSectionsVisibility: HeadingSectionVisibility[]) {
-  const { headingVisibleFirst, headingVisibleLast } = getBoundaryHeading(headingSectionsVisibility)
-  assertBoundaryPosition(headingVisibleFirst.boundaryPosition)
-  assertBoundaryPosition(headingVisibleLast.boundaryPosition)
-
-  const navigationEl = getNavigationEl()
-  const getLinkNavPosition = (el: HTMLElement): number => {
-    let offsetY = el.offsetTop
-    const parentEl = el.offsetParent as HTMLElement
-    if (parentEl !== navigationEl) {
-      offsetY += getLinkNavPosition(parentEl)
-    }
-    return offsetY
-  }
-  const getOverlayPosition = ({
-    heading,
-    boundaryPosition
-  }: {
-    heading: Heading
-    boundaryPosition: number
-  }): number => {
-    const navLink = findNavLink(heading)
-    const navLinkPos = getLinkNavPosition(navLink)
-    const scrollOverlayBoundaryPos = navLinkPos + navLink.clientHeight * boundaryPosition
-    return scrollOverlayBoundaryPos
-  }
-  const overlayBegin = getOverlayPosition(headingVisibleFirst)
-  const overlayEnd = getOverlayPosition(headingVisibleLast)
-  const overlayHeight = Math.max(1, overlayEnd - overlayBegin)
-  const scrollOverlayEl = document.getElementById('scroll-overlay')!
-  scrollOverlayEl.style.top = overlayBegin + 'px'
-  scrollOverlayEl.style.height = overlayHeight + 'px'
-}
-
-function getHeadingPosition(heading: Heading): number {
-  if ('isDocumentBegin' in heading) return 0
-  const { id } = heading
-  assert(id)
-  const el = document.getElementById(id)
-  assert(el)
-
-  // `el.getBoundingClientRect()` returns position relative to viewport begin
-  // - https://stackoverflow.com/questions/5598743/finding-elements-position-relative-to-the-document
-  const headingPositionRelative = el.getBoundingClientRect().top
-
-  const scrollPosition = getScrollPosition()
-
-  // We add the viewport begin position
-  const headingPosition = headingPositionRelative + scrollPosition
-
-  return headingPosition
-}
-function getDocumentHeight(): number {
-  return document.body.clientHeight
-}
-function getViewportHeight(): number {
-  return window.innerHeight
-}
-function getScrollPosition(): number {
-  return window.scrollY
-}
-
-type HeadingVisible = { heading: Heading; boundaryPosition: number; viewportPercentage: number }
-function getVisibleHeadings(headingSectionsVisibility: HeadingSectionVisibility[]): HeadingSectionVisibility[] {
-  const headings_withVisibileNavItem: Heading[] = filterHeadingsWithVisibileNavItem(headingSectionsVisibility)
-  const headingSectionsWithVisibleNavItemVisibility = getHeadingSectionsVisbility(headings_withVisibileNavItem)
-  return headingSectionsWithVisibleNavItemVisibility
-}
-function getBoundaryHeading(headingSectionsVisibility: HeadingSectionVisibility[]): {
-  headingVisibleFirst: HeadingVisible
-  headingVisibleLast: HeadingVisible
-} {
-  const headingSectionsWithVisibleNavItemVisibility = getVisibleHeadings(headingSectionsVisibility)
-  const h: HeadingSectionVisibility[] = headingSectionsWithVisibleNavItemVisibility
-  const hFirst = h.find(({ screenBeginPosition }) => screenBeginPosition !== null)
-  const hLast = h.find(({ screenEndPosition }) => screenEndPosition !== null)
-  assert(hFirst)
-  assert(hLast)
-  assert(hFirst.screenBeginPosition !== null)
-  assert(hLast.screenEndPosition !== null)
-  const headingVisibleFirst = {
-    heading: hFirst,
-    boundaryPosition: hFirst.screenBeginPosition,
-    viewportPercentage: hFirst.viewportPercentage
-  }
-  const headingVisibleLast = {
-    heading: hLast,
-    boundaryPosition: hLast.screenEndPosition,
-    viewportPercentage: hLast.viewportPercentage
-  }
-  return { headingVisibleFirst, headingVisibleLast }
-}
-
-function filterHeadingsWithVisibileNavItem(headingSectionsVisibility: HeadingSectionVisibility[]): Heading[] {
-  const hs = headingSectionsVisibility
-  const viewportPercentageHighest = Math.max(...hs.map(({ viewportPercentage }) => viewportPercentage))
-  const mainHeading = hs.find((heading) => {
-    return heading.viewportPercentage === viewportPercentageHighest
-  })
-  assert(mainHeading)
-  const ancestors = getAncestors(mainHeading, hs)
-  const headings_withVisibileNavItem = hs.filter((heading) => {
-    const p = getParent(heading, hs)
-    return p === null || ancestors.includes(p)
-  })
-  return headings_withVisibileNavItem
-}
-
-function getParent(heading: Heading, headings: Heading[]): Heading | null {
-  return getAncestors(heading, headings)[0] || null
-}
-
-function getAncestors(heading: Heading, headings: Heading[]): Heading[] {
-  const headingIndex = headings.indexOf(heading)
-  assert(headingIndex >= 0)
-  const ancestors: Heading[] = []
-  let currentLevel = heading.level - 1
-  for (let i = headingIndex - 1; i >= 0; i--) {
-    const h = headings[i]
-    if (h.level === currentLevel) {
-      ancestors.push(h)
-      currentLevel--
-    }
-  }
-  assert(currentLevel === 1)
-  return ancestors
-}
-
-type HeadingSectionVisibility = Heading & {
-  viewportPercentage: number
-  screenBeginPosition: null | number
-  screenEndPosition: null | number
-}
-function getHeadingSectionsVisbility(headings: Heading[]): HeadingSectionVisibility[] {
-  const screenBeginPositionAbsolute = getScrollPosition()
-  const screenEndPositionAbsolute = screenBeginPositionAbsolute + getViewportHeight()
-
-  const headingSections: (HeadingSectionVisibility & { beginPosition: number; endPosition: number })[] = []
-  headings.forEach((heading, i) => {
-    const beginPosition = getHeadingPosition(heading)
-
-    const headingNext = headings[i + 1]
-    const endPosition = !headingNext ? getDocumentHeight() : getHeadingPosition(headingNext)
-
-    const sectionHeight = endPosition - beginPosition
-    assert(sectionHeight > 0)
-
-    let screenBeginPosition = null
-    if (beginPosition <= screenBeginPositionAbsolute && screenBeginPositionAbsolute <= endPosition) {
-      screenBeginPosition = (screenBeginPositionAbsolute - beginPosition) / sectionHeight
-      assert(0 <= screenBeginPosition && screenBeginPosition <= 1)
-    }
-
-    let screenEndPosition = null
-    if (beginPosition <= screenEndPositionAbsolute && screenEndPositionAbsolute <= endPosition) {
-      screenEndPosition = (screenEndPositionAbsolute - beginPosition) / sectionHeight
-      assert(0 <= screenEndPosition && screenEndPosition <= 1)
-    }
-
-    assert(beginPosition <= endPosition)
-    const getViewportPosition = (position: number) => {
-      const viewportPosition = Math.min(Math.max(position, screenBeginPositionAbsolute), screenEndPositionAbsolute)
-      assert(screenBeginPositionAbsolute <= viewportPosition && viewportPosition <= screenEndPositionAbsolute)
-      return viewportPosition
-    }
-    const viewportPositionBegin = getViewportPosition(beginPosition)
-    const viewportPositionEnd = getViewportPosition(endPosition)
-    const viewportPercentage = (viewportPositionEnd - viewportPositionBegin) / getViewportHeight()
-
-    headingSections.push({
-      ...heading,
-      viewportPercentage,
-      screenBeginPosition,
-      screenEndPosition,
-      beginPosition,
-      endPosition
-    })
-  })
-
-  const viewportPercentageTotal = sum(headingSections.map(({ viewportPercentage }) => viewportPercentage))
-  const debugInfo = JSON.stringify({ headingSections, screenBeginPositionAbsolute, screenEndPositionAbsolute }, null, 2)
-  assert(viewportPercentageTotal <= 1 + 0.00001, debugInfo)
-  // assert(1 - 0.00001 <= viewportPercentageTotal && viewportPercentageTotal <= 1 + 0.00001, debugInfo)
-  assert(headingSections.filter(({ screenBeginPosition }) => screenBeginPosition !== null).length === 1, debugInfo)
-  assert(headingSections.filter(({ screenEndPosition }) => screenEndPosition !== null).length === 1, debugInfo)
-
-  return headingSections
-}
-
-function assertBoundaryPosition(boundaryPosition: number) {
-  assert(0 <= boundaryPosition && boundaryPosition <= 1)
-}
-
-function sum(numbers: number[]): number {
-  return numbers.reduce((a, b) => a + b, 0)
-}
-
-function assert_headings() {
-  const hrefs: string[] = []
-  headings.forEach((heading) => {
-    const href = getHref(heading)
-    assert(!hrefs.includes(href), href)
-    hrefs.push(href)
-  })
-}

package/src/navigation/Navigation.client.ts

@@ -1,19 +0,0 @@
-import { initNavigationFullscreen } from './navigation-fullscreen/initNavigationFullscreen'
-
-activateNavigationMask()
-activateMenuToggle()
-initNavigationFullscreen()
-
-function activateMenuToggle() {
-  const menuToggle = document.getElementById('menu-toggle')!
-  menuToggle.onclick = toggleNavigation
-}
-
-function activateNavigationMask() {
-  const navigationMask = document.getElementById('navigation-mask')!
-  navigationMask.onclick = toggleNavigation
-}
-
-function toggleNavigation() {
-  document.body.classList.toggle('show-menu')
-}

package/src/navigation/Navigation.css

@@ -1,12 +0,0 @@
-@import './Navigation-layout.css';
-@import './Navigation-items.css';
-@import './Navigation-highlight.css';
-
-#navigation-container {
-  --background-color: #f0f0f0;
-  padding-bottom: 70px;
-}
-
-html.navigation-fullscreen #detached-note {
-  display: none;
-}

package/src/navigation/Navigation.tsx

@@ -1,228 +0,0 @@
-export { Navigation }
-export { NavigationMask }
-
-import React from 'react'
-import { NavigationHeader } from './NavigationHeader'
-import { Heading } from '../headings'
-import { assert, Emoji } from '../utils/server'
-import './Navigation.css'
-import { NavigationFullscreenClose } from './navigation-fullscreen/NavigationFullscreenButton'
-
-function Navigation({
-  pageContext
-}: {
-  pageContext: {
-    headingsWithSubHeadings: Heading[]
-    urlPathname: string
-    isDetachedPage: boolean
-  }
-}) {
-  const { isDetachedPage } = pageContext
-  return (
-    <>
-      <div id="navigation-container">
-        <NavigationHeader />
-        {isDetachedPage && <DetachedPageNote />}
-        <NavigationContent pageContext={pageContext} />
-        {/* <ScrollOverlay /> */}
-        <NavigationFullscreenClose />
-      </div>
-    </>
-  )
-}
-
-function NavigationMask() {
-  return <div id="navigation-mask" />
-}
-
-function NavigationContent({
-  pageContext
-}: {
-  pageContext: {
-    headingsWithSubHeadings: Heading[]
-    urlPathname: string
-    isDetachedPage: boolean
-  }
-}) {
-  const headings = getHeadingsWithComputedProps(pageContext)
-  const headingsGrouped = groupHeadings(headings)
-  return (
-    <div id="navigation-content">
-      <div className="nav-column" style={{ position: 'relative' }}>
-        {headingsGrouped.map((headingsH1, i) => (
-          <div className="nav-h1-group" key={i}>
-            <Heading heading={headingsH1} />
-            {headingsH1.headings.map((heading, j) => (
-              <Heading heading={heading} key={j} />
-            ))}
-          </div>
-        ))}
-      </div>
-    </div>
-  )
-}
-
-function Heading({
-  heading
-}: {
-  heading: {
-    level: number
-    url?: string
-    titleInNav: string | JSX.Element
-    computed: {
-      isActive: boolean
-      isActiveFirst: boolean
-      isActiveLast: boolean
-      isChildOfListHeading: boolean
-      isFirstOfItsKind: boolean
-      isLastOfItsKind: boolean
-    }
-  }
-}) {
-  assert([1, 2, 3, 4].includes(heading.level), heading)
-  return (
-    <a
-      className={[
-        'nav-item',
-        'nav-item-h' + heading.level,
-        heading.computed.isActive && ' is-active',
-        heading.computed.isActiveFirst && ' is-active-first',
-        heading.computed.isActiveLast && ' is-active-last',
-        heading.computed.isChildOfListHeading && 'nav-item-parent-is-list-heading',
-        heading.computed.isFirstOfItsKind && 'nav-item-first-of-its-kind',
-        heading.computed.isLastOfItsKind && 'nav-item-last-of-its-kind'
-      ]
-        .filter(Boolean)
-        .join(' ')}
-      href={heading.url || undefined}
-    >
-      {/* <span className="nav-item-text">{heading.titleInNav}</span> */}
-      {heading.titleInNav}
-    </a>
-  )
-}
-
-function groupHeadings<T extends { level: number }>(headings: T[]) {
-  const headingsGrouped: (T & { headings: T[] })[] = []
-  headings.forEach((heading) => {
-    if (heading.level === 1) {
-      headingsGrouped.push({ ...heading, headings: [] })
-    } else {
-      headingsGrouped[headingsGrouped.length - 1].headings.push(heading)
-    }
-  })
-  return headingsGrouped
-}
-
-function getHeadingsWithComputedProps(pageContext: {
-  headingsWithSubHeadings: Heading[]
-  urlPathname: string
-  isDetachedPage: boolean
-}) {
-  const { headingsWithSubHeadings, urlPathname } = pageContext
-  return headingsWithSubHeadings.map((heading, i) => {
-    assert([1, 2, 3, 4].includes(heading.level), heading)
-
-    const headingPrevious = headingsWithSubHeadings[i - 1]
-    const headingNext = headingsWithSubHeadings[i + 1]
-
-    let isActiveFirst = false
-    let isActiveLast = false
-    let isActive = false
-    if (heading.url === urlPathname) {
-      assert(heading.level === 2, { urlPathname })
-      isActive = true
-      isActiveFirst = true
-      if (headingNext?.level !== 3) {
-        isActiveLast = true
-      }
-    }
-    if (heading.level === 3) {
-      isActive = true
-      if (headingNext?.level !== 3) {
-        isActiveLast = true
-      }
-    }
-
-    const isFirstOfItsKind = heading.level !== headingPrevious?.level
-    const isLastOfItsKind = heading.level !== headingNext?.level
-    const isChildOfListHeading = !!heading.parentHeadings[0]?.isListTitle
-
-    return {
-      ...heading,
-      computed: {
-        isActive,
-        isActiveFirst,
-        isActiveLast,
-        isFirstOfItsKind,
-        isLastOfItsKind,
-        isChildOfListHeading
-      }
-    }
-  })
-}
-
-function ScrollOverlay() {
-  // const width = '1px'
-  // const color = '#aaa'
-  return (
-    <div
-      id="scroll-overlay"
-      style={{
-        pointerEvents: 'none',
-        position: 'absolute',
-        left: '0',
-        width: '100%',
-        /*
-        background: `linear-gradient(to right, ${color} ${width}, transparent ${width}) 0 0,
-    linear-gradient(to right, ${color} ${width}, transparent ${width}) 0 100%,
-    linear-gradient(to left, ${color} ${width}, transparent ${width}) 100% 0,
-    linear-gradient(to left, ${color} ${width}, transparent ${width}) 100% 100%,
-    linear-gradient(to bottom, ${color} ${width}, transparent ${width}) 0 0,
-    linear-gradient(to bottom, ${color} ${width}, transparent ${width}) 100% 0,
-    linear-gradient(to top, ${color} ${width}, transparent ${width}) 0 100%,
-    linear-gradient(to top, ${color} ${width}, transparent ${width}) 100% 100%`,
-        //*/
-        //borderRight: `5px solid ${color}`,
-        borderRight: `3px solid #666`,
-        //border: `1px solid ${color}`,
-        boxSizing: 'border-box',
-        // backgroundColor: 'rgba(0,0,0,0.03)',
-        backgroundRepeat: 'no-repeat',
-
-        backgroundSize: '10px 10px'
-      }}
-    />
-  )
-}
-
-function DetachedPageNote() {
-  return (
-    <div
-      id="detached-note"
-      style={{
-        backgroundColor: 'var(--background-color)',
-        textAlign: 'left',
-        marginLeft: 10,
-        marginRight: 10,
-        marginTop: 30,
-        marginBottom: -8,
-        borderRadius: 5,
-        padding: 10
-      }}
-    >
-      <Emoji name="info" />{' '}
-      <b>
-        <em>Detached</em>
-      </b>
-      <span
-        style={{
-          opacity: 0.8
-        }}
-      >
-        {' '}
-        &mdash; this page isn't listed in the navigation menu below.
-      </span>
-    </div>
-  )
-}

package/src/navigation/NavigationHeader.tsx

@@ -1,97 +0,0 @@
-import React from 'react'
-import iconGithub from '../icons/github.svg'
-import iconTwitter from '../icons/twitter.svg'
-import iconDiscord from '../icons/discord.svg'
-import iconChangelog from '../icons/changelog.svg'
-import { usePageContext } from '../renderer/usePageContext'
-
-export { NavigationHeader }
-
-function NavigationHeader() {
-  const pageContext = usePageContext()
-  return (
-    <div
-      id="navigation-header"
-      style={{
-        display: 'flex',
-        flexDirection: 'column',
-        alignItems: 'center',
-        marginBottom: -5
-      }}
-    >
-      <a
-        id="navigation-header-logo"
-        style={{
-          display: 'flex',
-          alignItems: 'center',
-          color: 'inherit',
-          justifyContent: 'left',
-          textDecoration: 'none',
-          paddingTop: 12,
-          paddingBottom: 7
-        }}
-        href="/"
-      >
-        {pageContext.config.navHeader}
-      </a>
-      <Links />
-    </div>
-  )
-}
-
-function Links() {
-  const pageContext = usePageContext()
-  const { projectInfo } = pageContext.config
-  return (
-    <div
-      style={{
-        display: 'flex',
-        alignItems: 'center',
-        paddingTop: 0,
-        justifyContent: 'left'
-      }}
-    >
-      <SocialLink className="decolorize-4" icon={iconGithub} href={projectInfo.githubRepository} />
-      <SocialLink className="decolorize-6" icon={iconDiscord} href={projectInfo.discordInvite} />
-      <SocialLink className="decolorize-7" icon={iconTwitter} href={projectInfo.twitterProfile} />
-      <div id="docsearch-desktop" />
-      <ChangelogButton />
-    </div>
-  )
-}
-
-function ChangelogButton() {
-  const pageContext = usePageContext()
-  const { projectInfo } = pageContext.config
-  return (
-    <a
-      href={`${projectInfo.githubRepository}/blob/main/CHANGELOG.md`}
-      className="button colorize-on-hover"
-      style={{
-        display: 'flex',
-        alignItems: 'center',
-        padding: '1px 7px',
-        marginLeft: 2,
-        fontSize: '0.97em',
-        color: 'inherit'
-      }}
-    >
-      <span className="decolorize-7">v{projectInfo.projectVersion}</span>
-      <img className="decolorize-6" src={iconChangelog} height={16} style={{ marginLeft: 5 }} />
-    </a>
-  )
-}
-
-function SocialLink({ className, icon, href }: { className: string; icon: string; href: string }) {
-  return (
-    <>
-      <a
-        className={'colorize-on-hover ' + className}
-        href={href}
-        style={{ padding: 3, display: 'inline-block', lineHeight: 0 }}
-      >
-        <img src={icon} height="20" style={{}} />
-      </a>
-    </>
-  )
-}

package/src/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 menu */
-  visibility: hidden;
-}