@brillout/docpress 0.7.10 → 0.8.1

package/docsearch/toggleDocsearchModal.ts

@@ -0,0 +1,29 @@
+export { closeDocsearchModal }
+export { openDocsearchModal }
+
+import { assert } from '../utils/client'
+
+function closeDocsearchModal() {
+  if (isClosed()) return
+  toggle()
+}
+
+function openDocsearchModal() {
+  if (!isClosed()) return
+  toggle()
+}
+
+// There doesn't seem be an official API to open/close the DocSearch modal:
+// - https://github.com/algolia/docsearch/issues/2321
+// - https://github.com/algolia/docsearch/blob/90f3c6aabbc324fe49e9a1dfe0906fcd4d90f27b/packages/docsearch-react/src/DocSearch.tsx#L52
+function toggle() {
+  // Trigger https://github.com/algolia/docsearch/blob/90f3c6aabbc324fe49e9a1dfe0906fcd4d90f27b/packages/docsearch-react/src/useDocSearchKeyboardEvents.ts#L71
+  window.dispatchEvent(new KeyboardEvent('keydown', { key: 'k', ctrlKey: true }))
+}
+
+function isClosed() {
+  const test1 = !document.body.classList.contains('DocSearch--active')
+  const test2 = document.getElementsByClassName('DocSearch-Modal').length === 0
+  assert(test1 === test2)
+  return test1 || test2
+}

package/global.d.ts

@@ -0,0 +1,7 @@
+// https://stackoverflow.com/questions/52005083/how-to-define-css-variables-in-style-attribute-in-react-and-typescript/70398145#70398145
+import 'react'
+declare module 'react' {
+  interface CSSProperties {
+    [key: `--${string}`]: string | number
+  }
+}

package/initKeyBindings.ts

@@ -0,0 +1,41 @@
+export { initKeyBindings }
+
+import { closeDocsearchModal } from './docsearch/toggleDocsearchModal'
+import { closeMenuModal, toggleMenuModal } from './MenuModal'
+
+function initKeyBindings() {
+  window.addEventListener(
+    // Cannot use `keyup`: https://stackoverflow.com/questions/66595035/how-to-detect-escape-key-if-search-bar-of-browser-is-open/66600548#66600548
+    'keydown',
+    (ev) => {
+      if (ev.key === 'Escape') {
+        closeDocsearchModal()
+        closeMenuModal()
+        return
+      }
+
+      const key = (ev.key || '').toLowerCase()
+      const isCtrl = ev.metaKey || ev.ctrlKey
+      if (isCtrl && key === 'm') {
+        ev.preventDefault()
+        closeDocsearchModal()
+        toggleMenuModal()
+        return
+      }
+
+      // Replicate https://github.com/algolia/docsearch/blob/90f3c6aabbc324fe49e9a1dfe0906fcd4d90f27b/packages/docsearch-react/src/useDocSearchKeyboardEvents.ts#L45-L49
+      if ((isCtrl && key === 'k') || (key === '/' && !isEditingContent(ev))) {
+        ev.preventDefault()
+        closeMenuModal()
+        return
+      }
+    },
+    false,
+  )
+}
+function isEditingContent(event: KeyboardEvent): boolean {
+  const element = event.target as HTMLElement
+  const tagName = element.tagName
+
+  return element.isContentEditable || tagName === 'INPUT' || tagName === 'SELECT' || tagName === 'TEXTAREA'
+}

package/installSectionUrlHashs.ts

@@ -3,10 +3,11 @@ export { installSectionUrlHashs }
 import { assert } from './utils/client'
 
 function installSectionUrlHashs() {
-  const pageContainer = document.querySelector('.doc-page .page-container')
-  if (!pageContainer) {
-    assert(window.location.pathname === '/')
-    return
+  {
+    const isLandingPage = window.location.pathname === '/'
+    const isDocPage = !!document.querySelector('.doc-page')
+    assert(isLandingPage !== isDocPage)
+    if (!isDocPage) return
   }
   const headings = [...Array.from(document.querySelectorAll('h2')), ...Array.from(document.querySelectorAll('h3'))]
   headings.forEach((heading) => {
@@ -26,7 +27,7 @@ function installSectionUrlHashs() {
 }
 
 function assertNavLink(urlHash: string, heading: HTMLHeadingElement) {
-  const navigationEl = document.querySelector('#navigation-body')!
+  const navigationEl = document.querySelector('#nav-left .navigation-content')!
   {
     const { pathname } = window.location
     const parentNavLinkMatch = Array.from(navigationEl.querySelectorAll(`a[href="${pathname}"]`))

package/navigation/Navigation.css

@@ -1,3 +1,101 @@
-@import './Navigation-layout.css';
-@import './Navigation-items.css';
-@import './Navigation-highlight.css';
+.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 {
+  font-size: 19px;
+  text-transform: uppercase;
+  font-weight: 600;
+  letter-spacing: 0.14ch;
+  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;
+
+  /* #ededed === rgb(237, 237, 237)
+   * #f5f5f5 === rgb(245, 245, 245)
+   * 1 - (237 / 245) === 0.03265306122
+  background-color: #ededed;
+  */
+  background-color: rgba(0,0,0, 0.03265306122);
+  padding: var(--padding) 0;
+  padding-left: calc(var(--padding-left-global) + var(--padding-left-additional));
+}
+#menu-modal .nav-item-level-3 {
+  border-right: 4px solid #eee;
+}
+.nav-item {
+  /*
+  --shadow-size: 14px;
+  --shadow-color: rgba(0, 0, 0, 0.09);
+  */
+  --shadow-size: 7px;
+  --shadow-color: rgba(0, 0, 0, 0.11);
+  --shadow-size-minus: calc(-1 * var(--shadow-size));
+  --shadow-top: inset 0px var(--shadow-size) var(--shadow-size) var(--shadow-size-minus) var(--shadow-color);
+  --shadow-bottom: inset 0px var(--shadow-size-minus) var(--shadow-size) var(--shadow-size-minus) var(--shadow-color);
+  --box-shadow-top: 0 0;
+  --box-shadow-bottom: 0 0;
+  box-shadow: var(--box-shadow-top), var(--box-shadow-bottom);
+}
+.nav-item-level-3.nav-item-first-of-its-kind {
+  padding-top: calc(var(--padding) * 1.8);
+  --box-shadow-top: var(--shadow-top);
+}
+.nav-item-level-3.nav-item-last-of-its-kind {
+  padding-bottom: calc(var(--padding) * 1.8);
+  --box-shadow-bottom: var(--shadow-bottom);
+}
+.nav-item-level-2,
+.nav-item-level-3 {
+  position: relative;
+}
+.nav-item-level-2.is-active {
+  /* #ededed === rgb(237, 237, 237)
+   * #f5f5f5 === rgb(245, 245, 245)
+   * 1 - (237 / 245) === 0.03265306122
+  background-color: #ededed;
+  */
+  background-color: rgba(0,0,0, 0.03265306122);
+}

package/navigation/Navigation.tsx

@@ -1,92 +1,87 @@
-export { Navigation }
-export { NavigationMask }
-export type { NavigationData }
-export type { NavItem }
-
+// TODO/refactor: rename file and/or component
+export { NavigationContent }
 // TODO/refactor: do this only on the server side?
-export { groupByLevelMin }
-export type { NavItemGrouped }
+export type { NavItem }
+export type { NavItemAll }
 
 import React from 'react'
-import { NavigationHeader } from './NavigationHeader'
-import { assert, Emoji, assertWarning, jsxToTextContent } from '../utils/server'
+import { assert, assertWarning, jsxToTextContent } from '../utils/server'
 import './Navigation.css'
-import { NavigationFullscreenClose } from './navigation-fullscreen/NavigationFullscreenButton'
 import { parseTitle } from '../parseTitle'
-import { autoScrollNav_SSR } from '../autoScrollNav'
-
-type NavigationData = Parameters<typeof Navigation>[0]
-
-function Navigation({
-  navItems,
-  navItemsAll,
-  currentUrl,
-  isDetachedPage,
-}: {
-  navItems: NavItem[]
-  navItemsAll: NavItem[]
-  currentUrl: string
-  isDetachedPage: boolean
-}) {
-  return (
-    <>
-      <div id="navigation-container">
-        <NavigationHeader />
-        <div id="navigation-body">
-          {isDetachedPage && (
-            <>
-              {navItems.length > 1 && (
-                <NavigationContent id="navigation-content-detached" navItems={navItems} currentUrl={currentUrl} />
-              )}
-              <DetachedPageNote />
-            </>
-          )}
-          <NavigationContent id="navigation-content-main" navItems={navItemsAll} currentUrl={currentUrl} />
-          <NavigationFullscreenClose />
-        </div>
-      </div>
-      {/* Early scrolling, to avoid flashing */}
-      <script dangerouslySetInnerHTML={{ __html: autoScrollNav_SSR }}></script>
-    </>
-  )
-}
-
-function NavigationMask() {
-  return <div id="mobile-navigation-mask" />
-}
+import { usePageContext } from '../renderer/usePageContext'
+import '@docsearch/css'
 
 type NavItem = {
   level: number
   url?: string | null
   title: string
   titleInNav: string
+  menuModalFullWidth?: true
 }
-type NavItemComputed = NavItem & {
-  isActive: boolean
-  isActiveFirst: boolean
-  isActiveLast: boolean
-  isFirstOfItsKind: boolean
-  isLastOfItsKind: boolean
+type NavItemAll = NavItem & {
+  isColumnLayoutElement?: true
 }
-
 function NavigationContent(props: {
-  id: 'navigation-content-main' | 'navigation-content-detached'
   navItems: NavItem[]
-  currentUrl: string
+  showOnlyRelevant?: true
+  columnLayout?: true
 }) {
-  const navItemsWithComputed = addComputedProps(props.navItems, props.currentUrl)
-  const navItemsGrouped = groupByLevelMin(navItemsWithComputed)
+  const pageContext = usePageContext()
+  const navItemsWithComputed = getNavItemsWithComputed(props.navItems, pageContext.urlPathname)
+
+  let navContent: React.ReactNode
+  if (!props.columnLayout) {
+    navContent = navItemsWithComputed
+      .filter((navItemGroup) => !props.showOnlyRelevant || navItemGroup.isRelevant)
+      .map((navItem, i) => <NavItemComponent navItem={navItem} key={i} />)
+  } else {
+    assert(!props.showOnlyRelevant)
+    const navItemsColumnLayout = groupByColumnLayout(navItemsWithComputed)
+    const paddingBottom = 40
+    navContent = (
+      <>
+        {navItemsColumnLayout.map(({ navItemsColumnEntries, isFullWidth }, i) => (
+          <div
+            key={i}
+            style={{
+              display: 'flex',
+              justifyContent: 'center',
+            }}
+          >
+            <div
+              className={`column-layout-${i}`}
+              style={{
+                flexGrow: 1,
+                columnGap: 20,
+                paddingBottom: isFullWidth ? paddingBottom : undefined,
+              }}
+            >
+              {navItemsColumnEntries.map((navItemColumnEntry, j) => (
+                <div
+                  key={j}
+                  className="column-layout-entry"
+                  style={{
+                    breakInside: 'avoid',
+                    paddingBottom: !isFullWidth ? paddingBottom : undefined,
+                    width: '100%',
+                  }}
+                >
+                  <NavItemComponent navItem={navItemColumnEntry} />
+                  {navItemColumnEntry.navItemChilds.map((navItem, k) => (
+                    <NavItemComponent navItem={navItem} key={k} />
+                  ))}
+                </div>
+              ))}
+            </div>
+          </div>
+        ))}
+      </>
+    )
+  }
 
   return (
-    <div id={props.id} className="navigation-content">
-      {navItemsGrouped.map((navItemGroup, i) => (
-        <div className="nav-items-group" key={i}>
-          <NavItemComponent navItem={navItemGroup} />
-          {navItemGroup.navItemChilds.map((navItem, j) => (
-            <NavItemComponent navItem={navItem} key={j} />
-          ))}
-        </div>
-      ))}
+    <div className="navigation-content" style={{ marginTop: 10 }}>
+      {navContent}
     </div>
   )
 }
@@ -120,8 +115,6 @@ function NavItemComponent({
         'nav-item',
         'nav-item-level-' + navItem.level,
         navItem.url && navItem.isActive && ' is-active',
-        navItem.url && navItem.isActiveFirst && ' is-active-first',
-        navItem.url && navItem.isActiveLast && ' is-active-last',
         navItem.isFirstOfItsKind && 'nav-item-first-of-its-kind',
         navItem.isLastOfItsKind && 'nav-item-last-of-its-kind',
       ]
@@ -135,86 +128,79 @@ function NavItemComponent({
   )
 }
 
-type NavItemGrouped = ReturnType<typeof groupByLevelMin>[number]
-function groupByLevelMin<T extends NavItem>(navItems: T[]) {
-  const navItemsGrouped: (T & { navItemChilds: T[] })[] = []
-  const levelMin: number = Math.min(...navItems.map((h) => h.level))
+type NavItemsColumnEntry = NavItemComputed & { navItemChilds: NavItemComputed[] }
+function groupByColumnLayout(navItems: NavItemComputed[]) {
+  const navItemsColumnLayout: { navItemsColumnEntries: NavItemsColumnEntry[]; isFullWidth: boolean }[] = []
+  let navItemsColumnEntries: NavItemsColumnEntry[] = []
+  let isFullWidth: boolean | undefined
   navItems.forEach((navItem) => {
-    if (navItem.level === levelMin) {
-      navItemsGrouped.push({ ...navItem, navItemChilds: [] })
+    if (navItem.level === 1) {
+      const isFullWidthPrevious = isFullWidth
+      isFullWidth = !!navItem.menuModalFullWidth
+      if (isFullWidthPrevious !== undefined && isFullWidthPrevious !== isFullWidth) {
+        navItemsColumnLayout.push({ navItemsColumnEntries, isFullWidth: isFullWidthPrevious })
+        navItemsColumnEntries = []
+      }
+    }
+    assert(isFullWidth !== undefined)
+    if (navItem.isColumnLayoutElement) {
+      assert(navItem.level === 1 || navItem.level === 4)
+      const navItemColumnEntry = { ...navItem, navItemChilds: [] }
+      navItemsColumnEntries.push(navItemColumnEntry)
     } else {
-      navItemsGrouped[navItemsGrouped.length - 1].navItemChilds.push(navItem)
+      assert(navItem.level !== 1)
+      navItemsColumnEntries[navItemsColumnEntries.length - 1].navItemChilds.push(navItem)
     }
   })
-  return navItemsGrouped
+  assert(isFullWidth !== undefined)
+  navItemsColumnLayout.push({ navItemsColumnEntries, isFullWidth })
+  return navItemsColumnLayout
 }
 
-function addComputedProps(navItems: NavItem[], currentUrl: string): NavItemComputed[] {
-  return navItems.map((navItem, i) => {
+type NavItemComputed = ReturnType<typeof getNavItemsWithComputed>[number]
+function getNavItemsWithComputed(navItems: NavItemAll[], currentUrl: string) {
+  let navItemIdx: number | undefined
+  const navItemsWithComputed = navItems.map((navItem, i) => {
     assert([1, 2, 3, 4].includes(navItem.level), navItem)
 
     const navItemPrevious = navItems[i - 1]
     const navItemNext = navItems[i + 1]
 
-    let isActiveFirst = false
-    let isActiveLast = false
     let isActive = false
     if (navItem.url === currentUrl) {
       assert(navItem.level === 2, { currentUrl })
+      assert(navItemIdx === undefined)
+      navItemIdx = i
       isActive = true
-      isActiveFirst = true
-      if (navItemNext?.level !== 3) {
-        isActiveLast = true
-      }
-    }
-    if (navItem.level === 3) {
-      isActive = true
-      if (navItemNext?.level !== 3) {
-        isActiveLast = true
-      }
     }
 
     const isFirstOfItsKind = navItem.level !== navItemPrevious?.level
     const isLastOfItsKind = navItem.level !== navItemNext?.level
 
-    return {
+    const navItemComputed = {
       ...navItem,
       isActive,
-      isActiveFirst,
-      isActiveLast,
+      isRelevant: false,
       isFirstOfItsKind,
       isLastOfItsKind,
     }
+
+    return navItemComputed
   })
-}
 
-function DetachedPageNote() {
-  return (
-    <div
-      id="detached-note"
-      style={{
-        backgroundColor: 'var(--background-color)',
-        textAlign: 'left',
-        marginLeft: 10,
-        marginRight: 10,
-        marginTop: 25,
-        marginBottom: -5,
-        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 below.
-      </span>
-    </div>
-  )
+  // Set `isRelevant`
+  if (navItemIdx !== undefined) {
+    for (let i = navItemIdx; i >= 0; i--) {
+      const navItem = navItemsWithComputed[i]!
+      navItem.isRelevant = true
+      if (navItem.level === 1) break
+    }
+    for (let i = navItemIdx; i < navItemsWithComputed.length; i++) {
+      const navItem = navItemsWithComputed[i]!
+      if (navItem.level === 1) break
+      navItem.isRelevant = true
+    }
+  }
+
+  return navItemsWithComputed
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brillout/docpress",
-  "version": "0.7.10",
+  "version": "0.8.1",
   "type": "module",
   "dependencies": {
     "@brillout/picocolors": "^1.0.10",
@@ -33,10 +33,6 @@
     "./renderer/onBeforeRender": "./renderer/onBeforeRender.ts",
     "./Layout": "./Layout.tsx",
     ".": "./index.ts",
-    "./FeatureList/FeatureList": "./components/FeatureList/FeatureList.tsx",
-    "./FeatureList/FeatureList.client": {
-      "browser": "./components/FeatureList/FeatureList.client.ts"
-    },
     "./vite-config": "./dist/vite.config.js",
     "./config": "./dist/+config.js",
     "./style": "./css/index.css",
@@ -57,9 +53,6 @@
       ],
       "config": [
         "./dist/+config.d.ts"
-      ],
-      "FeatureList/*": [
-        "./components/FeatureList/*"
       ]
     }
   },

package/renderer/getPageElement.tsx

@@ -4,22 +4,34 @@ import type { PageContext } from 'vike/types'
 import type { PageContextResolved } from '../config/resolvePageContext'
 import { PageContextProvider, PageContextProvider2 } from './usePageContext'
 import React from 'react'
+import { DocSearchInstall } from '../docsearch/DocSearchInstall'
 
 function getPageElement(pageContext: PageContext, pageContextResolved: PageContextResolved) {
   const { Page } = pageContext
-  const { Layout = PassThrough } = pageContext.config
+  const Layout = pageContext.config.Layout || PassThrough
   const page = (
+    <Wrapper {...{ pageContext, pageContextResolved }}>
+      <Layout pageContext={pageContextResolved} pageContext2={pageContext}>
+        <Page />
+      </Layout>
+      <DocSearchInstall />
+    </Wrapper>
+  )
+  return page
+}
+
+function Wrapper({
+  children,
+  pageContext,
+  pageContextResolved,
+}: { children: React.ReactNode; pageContext: PageContext; pageContextResolved: PageContextResolved }) {
+  return (
     <React.StrictMode>
       <PageContextProvider2 pageContext={pageContext}>
-        <PageContextProvider pageContext={pageContextResolved}>
-          <Layout pageContext={pageContextResolved} pageContext2={pageContext}>
-            <Page />
-          </Layout>
-        </PageContextProvider>
+        <PageContextProvider pageContext={pageContextResolved}>{children}</PageContextProvider>
       </PageContextProvider2>
     </React.StrictMode>
   )
-  return page
 }
 
 function PassThrough({ children }: any) {