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

package/+config.ts

@@ -12,13 +12,11 @@ export default {
   hydrationCanBeAborted: true,
   passToClient: ['pageContextResolved'],
   meta: {
-    NavHeader: {
-      env: { client: true, server: true },
-    },
     Layout: {
       env: { client: true, server: true },
     },
   },
+
   prefetch: {
     staticAssets: 'hover',
     pageContext: Infinity,
@@ -33,13 +31,7 @@ declare global {
       exports: Exports
     }
     interface Config {
-      Layout?: ReactComponent | ImportString
-      NavHeader?: {
-        NavHeader: ReactComponent
-        navHeaderWrapperStyle?: React.CSSProperties
-        NavHeaderMobile: ReactComponent
-        navHeaderMobileWrapperStyle?: React.CSSProperties
-      }
+      Layout?: ReactComponent | null | ImportString
     }
   }
 }

package/Layout.tsx

@@ -1,99 +1,429 @@
 export { Layout }
+export { containerQueryMobile }
 
 import React from 'react'
-import { Navigation, NavigationMask } from './navigation/Navigation'
-import { MobileHeader } from './MobileHeader'
+import { NavigationContent } from './navigation/Navigation'
 import { EditPageNote } from './components/EditPageNote'
-import './Layout.css'
-import { NavigationFullscreenButton } from './navigation/navigation-fullscreen/NavigationFullscreenButton'
 import { parseTitle } from './parseTitle'
-import { usePageContext, usePageContext2 } from './renderer/usePageContext'
-import { Links } from './navigation/NavigationHeader'
-import { hotkeyLabel } from './navigation/navigation-fullscreen/hotkeyLabel'
+import { usePageContext } from './renderer/usePageContext'
+import { Links } from './Links'
+import { hotkeyMenuOpen, toggleMenuModal } from './MenuModal'
+import { MenuModal } from './MenuModal'
+import { autoScrollNav_SSR } from './autoScrollNav'
+import { SearchLink } from './docsearch/SearchLink'
+import { navigate } from 'vike/client/router'
+import { css } from './utils/css'
+
+const mainViewWidthMax = 800
+const mainViewPadding = 20
+const navWidthMax = 370
+const navWidthMin = 300
+const navWidth = {
+  minWidth: navWidthMin,
+  maxWidth: navWidthMax,
+  width: '100%',
+}
+const blockMargin = 3
+const mainViewMax = mainViewWidthMax + mainViewPadding * 2
+const containerQuerySpacing = mainViewMax + navWidthMax + blockMargin
+const containerQueryMobile = mainViewMax + navWidthMin
+
+// Avoid blank whitespace at the bottom of the page with almost no content
+const blankBuster1: React.CSSProperties = {
+  minHeight: '100vh',
+  display: 'flex',
+  flexDirection: 'column',
+}
+const blankBuster2: React.CSSProperties = {
+  flexGrow: 1,
+}
 
 function Layout({ children }: { children: React.ReactNode }) {
   const pageContext = usePageContext()
-  const pageContext2 = usePageContext2()
-  const { isLandingPage, pageTitle, navigationData, noSideNavigation, topNavigationList, topNavigationStyle } =
-    pageContext
+  const { isLandingPage } = pageContext
+
+  let content: JSX.Element
+  if (isLandingPage) {
+    content = <LayoutLandingPage>{children}</LayoutLandingPage>
+  } else {
+    content = <LayoutDocsPage>{children}</LayoutDocsPage>
+  }
+
+  return (
+    <>
+      <div
+        className={isLandingPage ? '' : 'doc-page'}
+        style={{
+          ['--bg-color']: '#f5f5f7',
+          ['--block-margin']: `${blockMargin}px`,
+          ['--icon-padding']: '8px',
+          ...blankBuster1,
+        }}
+      >
+        {content}
+        <MenuModal />
+      </div>
+      <style>{css`body { container-type: inline-size; }`}</style>
+    </>
+  )
+}
+
+function LayoutDocsPage({ children }: { children: React.ReactNode }) {
+  const pageContext = usePageContext()
+  const hideNavLeftAlways = pageContext.navItems.length <= 1
+  return (
+    <>
+      <style>{getStyle()}</style>
+      <NavMobile />
+      <div style={{ display: 'flex', ...blankBuster2 }}>
+        <NavLeft />
+        <div className="low-prio-grow" style={{ width: 0, maxWidth: 50, background: 'var(--bg-color)' }} />
+        <PageContent>{children}</PageContent>
+      </div>
+    </>
+  )
+  function getStyle() {
+    let style = css`
+@container(min-width: ${containerQuerySpacing}px) {
+  .low-prio-grow {
+    flex-grow: 1;
+  }
+  #navigation-container {
+    width: ${navWidthMax}px !important;
+  }
+}`
+    let navLeftHide = css`
+#nav-left {
+  display: none;
+}
+.page-wrapper {
+  --main-view-padding: 10px !important;
+  flex-grow: 1;
+  align-items: center;
+}
+.page-content {
+  margin: auto;
+}
+`
+    if (!hideNavLeftAlways) {
+      navLeftHide = css`
+@container(max-width: ${containerQueryMobile - 1}px) {
+  ${navLeftHide}
+}
+@container(min-width: ${containerQueryMobile}px) {
+  #nav-mobile {
+    display: none !important;
+  }
+}
+`
+    }
+    style += navLeftHide
+
+    return style
+  }
+}
+
+function LayoutLandingPage({ children }: { children: React.ReactNode }) {
+  const mobile = 800
+  return (
+    <>
+      <style>{getStyle()}</style>
+      <NavTop />
+      <NavMobile />
+      <PageContent>{children}</PageContent>
+    </>
+  )
+  function getStyle() {
+    return css`
+@container(min-width: ${mobile}px) {
+  #nav-mobile {
+    display: none !important;
+  }
+}
+@container(max-width: ${mobile - 1}px) {
+  #top-navigation {
+    display: none !important;
+  }
+`
+  }
+}
+
+function PageContent({ children }: { children: React.ReactNode }) {
+  const pageContext = usePageContext()
+  const { isLandingPage, pageTitle } = pageContext
   const pageTitleParsed = pageTitle && parseTitle(pageTitle)
   const { globalNote } = pageContext.config
-  const { NavHeader } = pageContext2.config.NavHeader!
+  const ifDocPage = (style: React.CSSProperties) => (isLandingPage ? {} : style)
+  return (
+    <div
+      className="page-wrapper low-prio-grow"
+      style={{
+        // Avoid overflow, see https://stackoverflow.com/questions/36230944/prevent-flex-items-from-overflowing-a-container/66689926#66689926
+        minWidth: 0,
+        ...ifDocPage({
+          backgroundColor: 'var(--bg-color)',
+          paddingBottom: 50,
+        }),
+      }}
+    >
+      <div
+        className="page-content"
+        style={{
+          // Also define --main-view-padding for landing page because it's used by <Contributors> and <Sponsors>
+          ['--main-view-padding']: `${mainViewPadding}px`,
+          ...ifDocPage({
+            width: `calc(${mainViewWidthMax}px + 2 * var(--main-view-padding))`,
+            maxWidth: '100%',
+            padding: '20px var(--main-view-padding)',
+          }),
+        }}
+      >
+        {globalNote}
+        {pageTitleParsed && <h1 id={`${pageContext.urlPathname.replace('/', '')}`}>{pageTitleParsed}</h1>}
+        {children}
+        {!isLandingPage && <EditPageNote pageContext={pageContext} />}
+      </div>
+    </div>
+  )
+}
+
+function NavMobile() {
+  return (
+    <div id="nav-mobile">
+      <NavigationHeader headerHeight={50} headerPadding={10} style={{ justifyContent: 'center' }} />
+    </div>
+  )
+}
+
+function NavTop() {
+  const pageContext = usePageContext()
+  const { topNavigationList, topNavigationStyle } = pageContext
+  const paddingSize = 35
+  const padding = `0 ${paddingSize}px`
+  return (
+    <div
+      id="top-navigation"
+      style={{
+        position: 'relative',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        textDecoration: 'none',
+        marginBottom: 'var(--block-margin)',
+        backgroundColor: 'var(--bg-color)',
+        fontSize: '1.06em',
+        color: '#666',
+        ...topNavigationStyle,
+      }}
+    >
+      <div style={{ display: 'flex', alignItems: 'center', height: 70 }}>
+        {topNavigationList.map(({ title, url }) => (
+          <a
+            href={url!}
+            key={url}
+            style={{
+              color: 'inherit',
+              height: '100%',
+              display: 'inline-flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              cursor: 'pointer',
+              padding,
+              marginRight: 7,
+            }}
+          >
+            {title}
+          </a>
+        ))}
+        <SearchLink style={{ padding }} />
+        <MenuLink style={{ padding }} />
+        <Links style={{ display: 'inline-flex', padding, marginLeft: -8 }} />
+      </div>
+    </div>
+  )
+}
+
+function NavLeft() {
+  const pageContext = usePageContext()
+  const { navItems, navItemsAll, isDetachedPage } = pageContext
+  const headerHeight = 60
+  const headerPadding = 10
   return (
     <>
-      {noSideNavigation && (
+      <div
+        id="nav-left"
+        style={{
+          flexGrow: 1,
+          borderRight: 'var(--block-margin) solid white',
+        }}
+      >
         <div
-          id="top-navigation"
           style={{
-            position: 'relative',
-            display: 'flex',
-            color: 'inherit',
-            alignItems: 'center',
-            justifyContent: noSideNavigation === 'no-logo' ? 'center' : 'space-between',
-            textDecoration: 'none',
-            marginBottom: 'var(--block-margin)',
-            backgroundColor: 'var(--bg-color)',
-            ...topNavigationStyle,
+            position: 'sticky',
+            top: 0,
           }}
         >
-          {noSideNavigation !== 'no-logo' && (
-            <a href="/" style={{ display: 'flex', alignItems: 'center', color: 'inherit' }}>
-              <NavHeader />
-            </a>
-          )}
-          <div style={{ display: 'flex', alignItems: 'center' }}>
-            <TopNavigationLink id="doclink" aria-label={hotkeyLabel} data-balloon-pos="left" data-balloon-blunt>
-              Documentation
-            </TopNavigationLink>
-            {topNavigationList.map(({ title, url }) => (
-              <TopNavigationLink href={url!} key={url}>
-                {title}
-              </TopNavigationLink>
-            ))}
-            <Links style={{ display: 'inline-flex', marginLeft: 5 }} />
-          </div>
-        </div>
-      )}
-      <div
-        className={['page-layout', isLandingPage ? 'landing-page' : 'doc-page', noSideNavigation && 'noSideNavigation']
-          .filter(Boolean)
-          .join(' ')}
-      >
-        <div id="navigation-wrapper">
-          <Navigation {...pageContext.navigationData} />
-        </div>
-        <NavigationFullscreenButton />
-        <div className="page-wrapper">
-          <div className="page-container">
-            <MobileHeader />
-            <div className="page-content">
-              {globalNote}
-              {pageTitleParsed && <h1 id={`${navigationData.currentUrl.replace('/', '')}`}>{pageTitleParsed}</h1>}
-              {children}
-              {!isLandingPage && <EditPageNote pageContext={pageContext} />}
+          <NavigationHeader {...{ headerHeight, headerPadding }} />
+          <div
+            style={{
+              backgroundColor: 'var(--bg-color)',
+              display: 'flex',
+              justifyContent: 'flex-end',
+            }}
+          >
+            <div
+              id="navigation-container"
+              style={{
+                top: 0,
+                height: `calc(100vh - ${headerHeight}px - var(--block-margin))`,
+                overflowY: 'auto',
+                overscrollBehavior: 'contain',
+                paddingBottom: 40,
+                ...navWidth,
+              }}
+            >
+              {
+                // TODO/refactor: simplify?
+                isDetachedPage ? (
+                  <NavigationContent navItems={navItems} />
+                ) : (
+                  <NavigationContent navItems={navItemsAll} showOnlyRelevant={true} />
+                )
+              }
             </div>
           </div>
-          <NavigationMask />
         </div>
       </div>
+      {/* Early scrolling, to avoid flashing */}
+      <script dangerouslySetInnerHTML={{ __html: autoScrollNav_SSR }}></script>
     </>
   )
 }
 
-function TopNavigationLink(props: React.AnchorHTMLAttributes<HTMLAnchorElement>) {
+function NavigationHeader({
+  headerHeight,
+  headerPadding,
+  style,
+}: { headerHeight: number; headerPadding: number; style?: React.CSSProperties }) {
+  const pageContext = usePageContext()
+  const iconSize = headerHeight - 2 * headerPadding
+  //*
+  const { projectName } = pageContext.meta
+  /*/
+  const projectName = 'Vike'
+  //*/
+  const isProjectNameShort = projectName.length <= 4
+  const childrenStyle: React.CSSProperties = {
+    flexGrow: 1,
+    fontSize: isProjectNameShort ? '4.8cqw' : '4.5cqw',
+    ['--icon-padding']: '1.8cqw',
+  }
+  return (
+    <div
+      style={{
+        backgroundColor: 'var(--bg-color)',
+        display: 'flex',
+        justifyContent: 'flex-end',
+        borderBottom: 'var(--block-margin) solid white',
+        ...style,
+      }}
+    >
+      <div
+        style={{
+          display: 'flex',
+          height: headerHeight,
+          containerType: 'inline-size',
+          ...navWidth,
+        }}
+      >
+        <a
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            color: 'inherit',
+            textDecoration: 'none',
+            height: '100%',
+            padding: `${headerPadding}px 0`,
+            paddingLeft: 4,
+            ...childrenStyle,
+          }}
+          href="/"
+        >
+          <img
+            src={pageContext.meta.faviconUrl}
+            height={iconSize}
+            width={iconSize}
+            onContextMenu={(ev) => {
+              if (!pageContext.config.pressKit) return // no /press page
+              if (window.location.pathname === '/press') return
+              ev.preventDefault()
+              navigate('/press#logo')
+            }}
+          />
+          <span
+            style={{
+              marginLeft: `calc(var(--icon-padding) + 2px)`,
+              fontSize: isProjectNameShort ? '1.7em' : '1.3em',
+            }}
+          >
+            {projectName}
+          </span>
+        </a>
+        <SearchLink
+          style={{
+            //
+            ...childrenStyle,
+          }}
+        />
+        <MenuLink
+          style={{
+            //
+            ...childrenStyle,
+          }}
+        />
+      </div>
+    </div>
+  )
+}
+
+type PropsDiv = React.HTMLProps<HTMLDivElement>
+function MenuLink(props: PropsDiv) {
   return (
-    <a
+    <div
+      {...props}
       style={{
         height: '100%',
-        display: 'inline-flex',
+        display: 'flex',
         alignItems: 'center',
-        justifyContent: 'center',
-        padding: '20px 10px',
         cursor: 'pointer',
-        color: '#666',
-        fontSize: '1.06em',
+        ...props.style,
       }}
-      {...props}
-    />
+      className="colorize-on-hover"
+      onClick={(ev) => {
+        ev.preventDefault()
+        toggleMenuModal()
+      }}
+      aria-label={hotkeyMenuOpen}
+      data-balloon-pos="left"
+      data-balloon-blunt
+      data-balloon-nofocus
+    >
+      <MenuIcon />
+      Menu
+    </div>
+  )
+}
+function MenuIcon() {
+  return (
+    <svg
+      style={{ marginRight: 'calc(var(--icon-padding) + 2px)', lineHeight: 0, width: '1.3em' }}
+      className="decolorize-7"
+      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>
   )
 }

package/{navigation/NavigationHeader.tsx → Links.tsx}

@@ -1,53 +1,14 @@
 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 iconLanguages from '../icons/languages.svg'
-import { usePageContext, usePageContext2 } from '../renderer/usePageContext'
-import { DocSearch } from '@docsearch/react'
-import { Hit } from '../components/Algolia/Hit'
+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 iconLanguages from './icons/languages.svg'
+import { usePageContext } from './renderer/usePageContext'
 import '@docsearch/css'
 
-export { NavigationHeader }
 export { Links }
 
-function NavigationHeader() {
-  const pageContext = usePageContext()
-  const pageContext2 = usePageContext2()
-  const { NavHeader } = pageContext2.config.NavHeader!
-  return (
-    <div
-      id="navigation-header"
-      className={pageContext.config.pressKit && 'press-kit'}
-      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,
-          ...pageContext2.config.NavHeader?.navHeaderWrapperStyle,
-        }}
-        href="/"
-      >
-        <NavHeader />
-      </a>
-      <Links />
-    </div>
-  )
-}
-
 function Links({ style }: { style?: React.CSSProperties }) {
   const pageContext = usePageContext()
   const { projectInfo, i18n } = pageContext.config
@@ -59,7 +20,6 @@ function Links({ style }: { style?: React.CSSProperties }) {
       style={{ height: 21, position: 'relative', top: 0, left: 0 }}
     />
   )
-  const { algolia } = pageContext.meta
   return (
     <div
       style={{
@@ -70,17 +30,6 @@ function Links({ style }: { style?: React.CSSProperties }) {
         ...style,
       }}
     >
-      {algolia && (
-        <div className="decolorize-6 colorize-on-hover">
-          <DocSearch
-            appId={algolia.appId}
-            indexName={algolia.indexName}
-            apiKey={algolia.apiKey}
-            insights={true}
-            hitComponent={Hit}
-          />
-        </div>
-      )}
       {iconI18n}
       {projectInfo.discordInvite && (
         <LinkIcon className="decolorize-6" icon={iconDiscord} href={projectInfo.discordInvite} />