@brillout/docpress 0.15.12 → 0.15.13-commit-ffe283f

package/ExternalLinks.tsx

@@ -13,7 +13,7 @@ import '@docsearch/css'
 
 function ExternalLinks(props: { style?: React.CSSProperties }) {
   const pageContext = usePageContext()
-  const { github, discord, bluesky, linkedin, i18n, twitter } = pageContext.globalContext.config.docpress
+  const { github, discord, bluesky, linkedin, i18n, twitter, changelog } = pageContext.globalContext.config.docpress
   const iconI18n = !i18n ? null : (
     <LinkIcon
       className="decolorize-4"
@@ -31,6 +31,7 @@ function ExternalLinks(props: { style?: React.CSSProperties }) {
         ...props.style,
       }}
     >
+      <LinkIcon className="decolorize-4" icon={iconGithub} href={github} iconSizeBoost={1} />
       {iconI18n}
       {discord && <LinkIcon className="decolorize-6" icon={iconDiscord} href={discord} />}
       {twitter && <LinkIcon className="decolorize-4" icon={iconTwitter} href={`https://x.com/${twitter.slice(1)}`} />}
@@ -38,8 +39,7 @@ function ExternalLinks(props: { style?: React.CSSProperties }) {
       {linkedin && (
         <LinkIcon className="decolorize-6" icon={iconLinkedin} href={`https://www.linkedin.com/company/${linkedin}`} />
       )}
-      <LinkIcon className="decolorize-4" icon={iconGithub} href={github} />
-      <ChangelogButton />
+      {changelog !== false && <ChangelogButton />}
     </div>
   )
 }
@@ -54,7 +54,7 @@ function ChangelogButton() {
       style={{
         display: 'flex',
         alignItems: 'center',
-        padding: '0 5px',
+        padding: '0 3px',
         height: '100%',
       }}
     >
@@ -63,28 +63,50 @@ function ChangelogButton() {
         style={{
           display: 'flex',
           alignItems: 'center',
-          padding: '2px 10px',
+          paddingLeft: 8,
+          paddingRight: 8,
+          paddingTop: 4,
+          paddingBottom: 5,
           fontSize: '0.97em',
+          lineHeight: 0,
         }}
       >
-        <span id="version-number" className="decolorize-7">
+        <span
+          id="version-number"
+          className="decolorize-7"
+          style={{
+            position: 'relative',
+            top: 1,
+          }}
+        >
           v{version}
         </span>
-        <img className="decolorize-6" src={iconChangelog} height={16} style={{ marginLeft: 6 }} />
+        <img
+          className="decolorize-6"
+          src={iconChangelog}
+          height={16}
+          style={{ marginLeft: 6, position: 'relative', top: 1 }}
+        />
       </div>
     </a>
   )
 }
 
-function LinkIcon({ className, icon, href, style }: { className: string; icon: string; href: string; style?: any }) {
+function LinkIcon({
+  className,
+  icon,
+  href,
+  style,
+  iconSizeBoost = 0,
+}: { className: string; icon: string; href: string; style?: any; iconSizeBoost?: number }) {
   return (
     <>
       <a
         className="colorize-on-hover"
         href={href}
-        style={{ padding: 5, display: 'inline-flex', lineHeight: 0, height: '100%', alignItems: 'center' }}
+        style={{ padding: 3, display: 'inline-flex', lineHeight: 0, height: '100%', alignItems: 'center' }}
       >
-        <img className={className} src={icon} height="20" style={style} />
+        <img className={className} src={icon} height={18 + iconSizeBoost} style={style} />
       </a>
     </>
   )

package/Layout.tsx

@@ -1,12 +1,15 @@
 export { Layout }
 export { MenuToggle }
-export { containerQueryMobileLayout }
-export { containerQueryMobileNav as containerQueryMobileMenu }
+export { viewDesktop }
+export { viewTablet }
 export { navLeftWidthMin }
 export { navLeftWidthMax }
 export { unexpandNav }
 export { blockMargin }
 
+// - We use `@container container-viewport` instead of @media because @media doesn't consider the scrollbar width.
+// - We use --padding-side because we cannot set a fixed max-width on the <NavHead> container .nav-head-content — DocPress doesn't know how many extra <NavHead> elements the user adds using the +docpress.topNavigation setting.
+
 import React from 'react'
 import { getNavItemsWithComputed, NavItem, NavItemComponent } from './NavItemComponent'
 import { parseMarkdownMini } from './parseMarkdownMini'
@@ -23,17 +26,18 @@ import { Style } from './utils/Style'
 import { cls } from './utils/cls'
 import { iconBooks } from './icons'
 import { EditLink } from './EditLink'
+import type { PageContext } from 'vike/types'
 
 const blockMargin = 3
 const mainViewPadding = 20
-const mainViewWidthMax = 800
-const mainViewMax = (mainViewWidthMax + mainViewPadding * 2) as 840 // 840 = 800 + 20 * 2
+const mainViewWidthMaxInner = 800
+const mainViewWidthMax = (mainViewWidthMaxInner + mainViewPadding * 2) as 840 // 840 = 800 + 20 * 2
 const navLeftWidthMin = 300
 const navLeftWidthMax = 370
-const containerQuerySmallNav = 550
-const containerQueryMobileNav = 1000
-const containerQueryMobileLayout = (mainViewMax + navLeftWidthMin) as 1140 // 1140 = 840 + 300
-const containerQueryExtraSpace = (mainViewMax + navLeftWidthMax + blockMargin) as 1213 // 1213 = 840 + 370 + 3
+const viewMobile = 450
+const viewTablet = 1000
+const viewDesktop = (mainViewWidthMax + navLeftWidthMin) as 1140 // 1140 = 840 + 300
+const viewDesktopLarge = (mainViewWidthMax + navLeftWidthMax + blockMargin) as 1213 // 1213 = 840 + 370 + 3
 
 // Avoid whitespace at the bottom of pages with almost no content
 const whitespaceBuster1: React.CSSProperties = {
@@ -61,38 +65,29 @@ function Layout({ children }: { children: React.ReactNode }) {
       style={{
         ['--bg-color']: '#f5f5f5',
         ['--block-margin']: `${blockMargin}px`,
-        ['--icon-text-padding']: '8px',
         // ['--nav-head-height']: `${isLandingPage ? 70 : 63}px`,
         ['--nav-head-height']: `63px`,
+        ['--main-view-padding']: `${mainViewPadding}px`,
+        // We don't add `container` to `body` nor `html` beacuse in Firefox it breaks the `position: fixed` of <MenuModal>
+        // https://stackoverflow.com/questions/74601420/css-container-inline-size-and-fixed-child
+        container: 'container-viewport / inline-size',
       }}
     >
       <MenuModal isTopNav={isLandingPage} />
-      <div
-        className={isLandingPage ? '' : 'doc-page'}
-        style={{
-          // We don't add `container` to `body` nor `html` beacuse in Firefox it breaks the `position: fixed` of <MenuModal>
-          // https://stackoverflow.com/questions/74601420/css-container-inline-size-and-fixed-child
-          container: 'container-viewport / inline-size',
-          ...whitespaceBuster1,
-        }}
-      >
+      <div className={isLandingPage ? '' : 'doc-page'} style={whitespaceBuster1}>
         <NavHead />
         {content}
       </div>
       {/* Early toggling, to avoid layout jumps */}
       <script dangerouslySetInnerHTML={{ __html: initializeJsToggle_SSR }}></script>
+      <Style>{getStyleNav()}</Style>
     </div>
   )
 }
 
 function LayoutDocsPage({ children }: { children: React.ReactNode }) {
-  const pageContext = usePageContext()
-  const hideNavLeftAlways =
-    pageContext.resolved.pageDesign?.hideMenuLeft ||
-    (pageContext.resolved.navItemsDetached && pageContext.resolved.navItemsDetached.length <= 1)
   return (
     <>
-      <Style>{getStyle()}</Style>
       <div style={{ display: 'flex', ...whitespaceBuster2 }}>
         <NavLeft />
         <div
@@ -102,52 +97,18 @@ function LayoutDocsPage({ children }: { children: React.ReactNode }) {
         />
         <PageContent>{children}</PageContent>
       </div>
-    </>
-  )
-  function getStyle() {
-    let style = css`
-@container container-viewport (min-width: ${containerQueryExtraSpace}px) {
+      <Style>{css`
+@container container-viewport (min-width: ${viewDesktopLarge}px) {
   .low-prio-grow {
     flex-grow: 1;
   }
   #navigation-container {
     width: ${navLeftWidthMax}px !important;
   }
-}`
-    let navLeftHidden = css`
-#nav-left, #nav-left-margin {
-  display: none;
-}
-.page-wrapper {
-  --main-view-padding: 10px !important;
-  flex-grow: 1;
-  align-items: center;
-}
-.page-content {
-  margin: auto;
-}
-#menu-modal-wrapper {
-  position: absolute !important;
-}
-`
-    if (!hideNavLeftAlways) {
-      navLeftHidden = css`
-@container container-viewport (max-width: ${containerQueryMobileLayout - 1}px) {
-  ${navLeftHidden}
-}
-@container container-viewport (min-width: ${containerQueryMobileLayout}px) {
-  .nav-head-full-width {
-    display: none !important;
-  }
-}
-`
-    }
-    style += navLeftHidden
-
-    return style
-  }
+}`}</Style>
+    </>
+  )
 }
-
 function LayoutLandingPage({ children }: { children: React.ReactNode }) {
   return (
     <>
@@ -164,7 +125,7 @@ function PageContent({ children }: { children: React.ReactNode }) {
   const { globalNote } = pageContext.globalContext.config.docpress
   */
   const ifDocPage = (style: React.CSSProperties) => (isLandingPage ? {} : style)
-  const contentMaxWidth = pageContext.resolved.pageDesign?.contentMaxWidth ?? mainViewWidthMax
+  const contentMaxWidth = pageContext.resolved.pageDesign?.contentMaxWidth ?? mainViewWidthMaxInner
   return (
     <div
       className="page-wrapper low-prio-grow"
@@ -180,8 +141,6 @@ function PageContent({ children }: { children: React.ReactNode }) {
       <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(${contentMaxWidth}px + 2 * var(--main-view-padding))`,
             maxWidth: '100%',
@@ -222,7 +181,7 @@ function NavLeft() {
             top: 0,
           }}
         >
-          <NavHead isNavLeft={true} />
+          {!isNavLeftAlwaysHidden(pageContext) && <NavHead isNavLeft={true} />}
           <div
             style={{
               backgroundColor: 'var(--bg-color)',
@@ -275,37 +234,48 @@ function NavigationContent(props: {
   )
 }
 
+function isNavLeftAlwaysHidden(pageContext: PageContext) {
+  const { isLandingPage, navItemsDetached, pageDesign } = pageContext.resolved
+  return isLandingPage || pageDesign?.hideMenuLeft || (navItemsDetached && navItemsDetached.length <= 1)
+}
+
 const menuLinkStyle: React.CSSProperties = {
   height: '100%',
   padding: '0 var(--padding-side)',
   justifyContent: 'center',
 }
 
+// Two <NavHead> instances are rendered:
+//  - The left-side <NavHead> shown on documentation pages on desktop
+//  - The top <NavHead> shown otherwise
 function NavHead({ isNavLeft }: { isNavLeft?: true }) {
   const pageContext = usePageContext()
-  const { isLandingPage } = pageContext.resolved
   const { navMaxWidth, name, algolia } = pageContext.globalContext.config.docpress
+  const hideNavHeadLogo = pageContext.resolved.isLandingPage && !navMaxWidth
 
-  const navSecondaryContent = (
+  const navHeadSecondary = (
     <div
-      className={isNavLeft ? 'show-on-nav-hover add-transition' : 'hide-on-shrink desktop-grow'}
+      className={cls([
+        'nav-head-secondary',
+        isNavLeft && 'show-on-nav-hover add-transition',
+        !!navMaxWidth && 'has-max-width',
+      ])}
       style={{
         padding: 0,
         display: 'flex',
         height: '100%',
-        ...(!isNavLeft
-          ? {}
-          : {
+        ...(isNavLeft
+          ? {
               position: 'absolute',
               left: '100%',
               top: 0,
-              '--padding-side': '20px',
-              width: mainViewMax, // guaranteed real estate
-            }),
+              width: mainViewWidthMax, // guaranteed real estate
+            }
+          : {}),
       }}
     >
       {pageContext.globalContext.config.docpress.topNavigation}
-      {!isNavLeft && <div className="desktop-grow" />}
+      <div className="desktop-grow" style={{ display: 'none' }} />
       <ExternalLinks
         style={{
           display: 'inline-flex',
@@ -319,7 +289,7 @@ function NavHead({ isNavLeft }: { isNavLeft?: true }) {
 
   return (
     <div
-      className={cls(['nav-head-top', !isNavLeft && 'nav-head-full-width', 'link-hover-animation'])}
+      className={cls(['nav-head', isNavLeft && 'is-nav-left', 'link-hover-animation'])}
       style={{
         display: 'flex',
         justifyContent: isNavLeft ? 'flex-end' : 'center',
@@ -328,9 +298,10 @@ function NavHead({ isNavLeft }: { isNavLeft?: true }) {
         position: 'relative',
       }}
     >
-      {isNavLeft && <NavHeaderLeftFullWidthBackground />}
+      {isNavLeft && <NavHeadLeftFullWidthBackground />}
       <div
         style={{
+          // DON'T REMOVE this container: it's needed for the `cqw` values
           container: 'container-nav-head / inline-size',
           width: '100%',
           minWidth: isNavLeft && navLeftWidthMin,
@@ -344,107 +315,160 @@ function NavHead({ isNavLeft }: { isNavLeft?: true }) {
             maxWidth: navMaxWidth,
             margin: 'auto',
             height: 'var(--nav-head-height)',
-            fontSize: `min(15.2px, ${isProjectNameShort(name) ? '4.8cqw' : '4.5cqw'})`,
+            fontSize: `min(14.2px, ${isProjectNameShort(name) ? '4.8cqw' : '4.5cqw'})`,
             color: '#666',
-            ['--icon-text-padding']: 'min(8px, 1.8cqw)',
             display: 'flex',
             justifyContent: 'center',
           }}
         >
-          <NavLogo className="grow-half" />
-          {!isNavLeft && <div className="desktop-grow" />}
-          {algolia && <SearchLink className="grow-half" style={menuLinkStyle} />}
-          <MenuToggleMain className="grow-full" style={menuLinkStyle} />
-          {navSecondaryContent}
+          {!hideNavHeadLogo && <NavHeadLogo />}
+          <div className="desktop-grow" style={{ display: 'none' }} />
+          {algolia && <SearchLink className="always-shown" style={menuLinkStyle} />}
+          <MenuToggleMain className="always-shown nav-head-menu-toggle" style={menuLinkStyle} />
+          {navHeadSecondary}
         </div>
       </div>
-      <Style>{getStyle()}</Style>
     </div>
   )
+}
+function getStyleNav() {
+  const pageContext = usePageContext()
 
-  function getStyle() {
-    let style = css`
-@container container-nav-head (max-width: ${containerQuerySmallNav}px) {
-  .grow-full {
-    flex-grow: 1;
+  let style = ''
+
+  // Mobile
+  style += css`
+@container container-viewport (max-width: ${viewMobile}px) {
+  .nav-head:not(.is-nav-left) {
+    .nav-head-logo {
+      always-shown: flex-start !important;
+      padding-left: var(--main-view-padding);
+    }
+    .nav-head-menu-toggle {
+      justify-content: flex-end !important;
+      padding-right: var(--main-view-padding) !important;
+    }
+    .nav-head-content {
+      --icon-text-padding: min(8px, 1.3cqw);
+      & > * {
+        flex-grow: 1;
+      }
+    }
   }
-  .grow-half {
-    flex-grow: 0.5;
+}`
+
+  // Mobile + tablet
+  style += css`
+@container container-viewport (max-width: ${viewTablet}px) {
+  .nav-head:not(.is-nav-left) {
+    .nav-head-secondary {
+      display: none !important;
+    }
   }
-  .nav-head-content {
-    --padding-side: 0px;
+}`
+
+  // Tablet
+  style += css`
+@container container-viewport (max-width: ${viewTablet}px) and (min-width: ${viewMobile + 1}px) {
+  .nav-head:not(.is-nav-left) {
+    .nav-head-content {
+      --icon-text-padding: 8px;
+      --padding-side: 20px;
+    }
+    .nav-head-logo {
+      padding: 0 var(--padding-side);
+    }
   }
-  .nav-logo {
-    justify-content: flex-start;
-    padding-left: 15px;
-    margin-left: -10px;
+}`
+
+  // Desktop small + desktop
+  style += css`
+@container container-viewport (min-width: ${viewTablet + 1}px) {
+  .nav-head:not(.is-nav-left) {
+    .nav-head-content {
+      --icon-text-padding: min(8px, 0.5cqw);
+      --padding-side: min(20px, 1.3cqw);
+    }
+    .nav-head-logo {
+      padding: 0 var(--padding-side);
+    }
+    &.has-max-width {
+      .desktop-grow {
+        display: block;
+      }
+      .desktop-grow,
+      .nav-head-secondary {
+        flex-grow: 1;
+      }
+    }
   }
 }
-@container container-viewport (max-width: ${containerQuerySmallNav}px) {
-  .grow-half {
-    flex-grow: 1 !important;
+`
+
+  // Desktop
+  if (!isNavLeftAlwaysHidden(pageContext)) {
+    style += css`
+@container container-viewport (min-width: ${viewDesktop}px) {
+  .nav-head:not(.is-nav-left) {
+    display: none !important;
   }
-  .nav-logo {
-    justify-content: center;
-    padding: 0;
-    margin: 0;
+  .nav-head.is-nav-left {
+    .nav-head-content {
+      --icon-text-padding: min(8px, 7 * (1cqw - 2.5px));
+      & > :not(.always-shown) {
+        --padding-side: min(24px, 27 * (1cqw - 2.5px));
+      }
+      & > * {
+        flex-grow: 0.5;
+      }
+      & > .nav-head-menu-toggle {
+        flex-grow: 1;
+      }
+    }
+    .nav-head-logo {
+      padding-left: 15px;
+      margin-left: -15px;
+    }
   }
-}
-@container container-nav-head (min-width: 501px) {
-  .nav-head-content {
-    --padding-side: 24px;
+  .show-on-nav-hover {
+    opacity: 0;
+    transition-property: opacity;
+    pointer-events: none;
   }
-  .nav-logo {
-    padding: 0 var(--padding-side);
+  html:not(.unexpand-nav) {
+    & .nav-head.is-nav-left:hover .show-on-nav-hover,
+    &:has(.nav-head:hover) #menu-modal-wrapper.show-on-nav-hover,
+    &.menu-modal-show .nav-head.is-nav-left .show-on-nav-hover,
+    &.menu-modal-show #menu-modal-wrapper.show-on-nav-hover {
+      opacity: 1;
+      pointer-events: all;
+    }
   }
 }
-@container container-nav-head (min-width: ${containerQueryMobileNav + 150}px) {
-  .nav-head-content {
-    --padding-side: 25px;
+@container container-viewport (max-width: ${viewDesktop - 1}px) {
+  #nav-left, #nav-left-margin {
+    display: none;
   }
-}
-@media(max-width: ${containerQueryMobileNav}px) {
-  .hide-on-shrink {
-    display: none !important;
+  body {
+    --main-view-padding: 10px !important;
   }
-}
-`
-    if (navMaxWidth) {
-      style += css`
-@media(min-width: ${containerQueryMobileNav + 1}px) {
-  .desktop-grow {
+  .page-wrapper {
     flex-grow: 1;
+    align-items: center;
   }
-}
-`
-    }
-    if (isLandingPage && !navMaxWidth)
-      style += css`
-@media(min-width: ${containerQueryMobileNav + 1}px) {
-  .nav-logo {
-    display: none !important;
+  .page-content {
+    margin: auto;
+  }
+  #menu-modal-wrapper {
+    position: absolute !important;
   }
 }
 `
-    if (isNavLeft) {
-      style += css`
-
-.show-on-nav-hover {
-  opacity: 0;
-  transition-property: opacity;
-  pointer-events: none;
-}
-html:not(.unexpand-nav) :has(.nav-head-top:hover) .show-on-nav-hover,
-html:not(.unexpand-nav) :has(.show-on-nav-hover:hover) .show-on-nav-hover,
-html:not(.unexpand-nav).menu-modal-show .show-on-nav-hover {
-  opacity: 1;
-  pointer-events: all;
-}
-`
-    }
-    return style
   }
+
+  return style
 }
+
 function unexpandNav() {
   document.documentElement.classList.add('unexpand-nav')
   // Using setTimeout() because requestAnimationFrame() doesn't delay enough
@@ -453,11 +477,11 @@ function unexpandNav() {
   }, 1000)
 }
 
-function NavHeaderLeftFullWidthBackground() {
+function NavHeadLeftFullWidthBackground() {
   return (
     <>
       <div
-        className="nav-bg show-on-nav-hover add-transition"
+        className="nav-head-bg show-on-nav-hover add-transition"
         style={{
           height: '100%',
           zIndex: -1,
@@ -473,7 +497,7 @@ function NavHeaderLeftFullWidthBackground() {
         // (min-width: 0px) => trick to always apply => @container seems to always require a condition
         css`
 @container container-viewport (min-width: 0px) {
-  .nav-bg {
+  .nav-head-bg {
      width: 100cqw;
   }
 }
@@ -483,7 +507,7 @@ function NavHeaderLeftFullWidthBackground() {
   )
 }
 
-function NavLogo({ className }: { className: string }) {
+function NavHeadLogo({ className }: { className?: string }) {
   const pageContext = usePageContext()
 
   const { navLogo } = pageContext.globalContext.config.docpress
@@ -517,7 +541,7 @@ function NavLogo({ className }: { className: string }) {
 
   return (
     <a
-      className={cls(['nav-logo', className])}
+      className={cls(['nav-head-logo', className])}
       style={{
         display: 'flex',
         alignItems: 'center',
@@ -554,12 +578,12 @@ function MenuToggleMain(props: PropsDiv) {
         <MenuIcon /> Menu
       </span>
       <Style>{css`
-@media(max-width: ${containerQueryMobileNav}px) {
+@container container-viewport (max-width: ${viewTablet}px) {
   .text-docs, .caret-icon {
     display: none !important;
   }
 }
-@media(min-width: ${containerQueryMobileNav + 1}px) {
+@container container-viewport (min-width: ${viewTablet + 1}px) {
   .text-menu {
     display: none;
   }
@@ -588,10 +612,12 @@ function MenuToggle({ menuId, ...props }: PropsDiv & { menuId: number }) {
       }}
       onMouseEnter={() => {
         if (onMouseIgnore) return
+        if (isMobileNav()) return
         openMenuModal(menuId)
       }}
       onMouseLeave={() => {
         if (onMouseIgnore) return
+        if (isMobileNav()) return
         coseMenuModalOnMouseLeave(menuId)
       }}
       onTouchStart={() => {
@@ -605,11 +631,11 @@ function MenuToggle({ menuId, ...props }: PropsDiv & { menuId: number }) {
       <CaretIcon
         style={{
           width: 11,
-          marginLeft: 10,
+          marginLeft: 'calc(var(--icon-text-padding) - 1px)',
           flexShrink: 0,
           color: '#888',
           position: 'relative',
-          top: -1,
+          top: 1,
         }}
       />
     </div>
@@ -687,7 +713,7 @@ function DocsIcon() {
     <img
       src={iconBooks}
       width={18}
-      style={{ marginRight: 'calc(var(--icon-text-padding) + 2px)' }}
+      style={{ marginRight: 'calc(var(--icon-text-padding) + 2px)', position: 'relative', top: 2 }}
       className="decolorize-5"
     />
   )
@@ -706,3 +732,7 @@ function MenuIcon() {
     </svg>
   )
 }
+
+function isMobileNav() {
+  return window.innerWidth <= viewTablet
+}