@brillout/docpress 0.16.46 → 0.16.47-commit-cd5aa01

package/ExternalLinks.tsx

@@ -46,10 +46,11 @@ function ExternalLinks(props: { style?: React.CSSProperties }) {
 
 function ChangelogButton() {
   const pageContext = usePageContext()
-  const { version, github } = pageContext.globalContext.config.docpress
+  const { version, github, changelog } = pageContext.globalContext.config.docpress
+  const changeLogUrl = typeof changelog === 'string' ? changelog : `${github}/blob/main/CHANGELOG.md`
   return (
     <a
-      href={`${github}/blob/main/CHANGELOG.md`}
+      href={changeLogUrl}
       className="colorize-on-hover"
       style={{
         display: 'flex',
@@ -62,7 +63,7 @@ function ChangelogButton() {
         className="button"
         style={{
           background: '#ffffff4f',
-          fontFamily: 'monospace',
+          fontFamily: 'var(--font-mono, monospace)',
           letterSpacing: -1,
           display: 'flex',
           alignItems: 'center',

package/Layout.tsx

@@ -94,9 +94,12 @@ function Layout({ children }: { children: React.ReactNode }) {
         margin: 'auto',
       }}
     >
-      <MenuModal isTopNav={isLandingPage} isNavLeftAlwaysHidden_={isNavLeftAlwaysHidden_} />
-      <div className={isLandingPage ? '' : 'doc-page'} style={whitespaceBuster1}>
-        <NavHead />
+      <div className={isLandingPage ? 'landing-page' : 'doc-page'} style={whitespaceBuster1}>
+        <div style={{ position: isLandingPage ? 'relative' : 'sticky', top: 0, zIndex: 100 }}>
+          <NavHead />
+          {/* <MenuModal> is inside here because `container-type` on the page wrapper traps `position: fixed` — https://github.com/brillout/docpress/pull/177 */}
+          <MenuModal isNavLeftAlwaysHidden_={isNavLeftAlwaysHidden_} />
+        </div>
         {content}
       </div>
       {/* Early toggling, to avoid layout jumps */}
@@ -220,10 +223,10 @@ function NavLeft() {
         <div
           style={{
             position: 'sticky',
-            top: 0,
+            // Sit below the sticky top nav
+            top: 'var(--nav-head-height)',
           }}
         >
-          <NavHead isNavLeft={true} />
           <div
             style={{
               backgroundColor: 'var(--color-bg-gray)',
@@ -296,29 +299,18 @@ const menuLinkStyle: React.CSSProperties = {
   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 }) {
+function NavHead() {
   const pageContext = usePageContext()
   const { navMaxWidth, name, algolia } = pageContext.globalContext.config.docpress
   const hideNavHeadLogo = pageContext.resolved.isLandingPage && !navMaxWidth
 
   const navHeadSecondary = (
     <div
-      className={cls(['nav-head-secondary', isNavLeft && 'show-on-nav-hover add-transition'])}
+      className="nav-head-secondary"
       style={{
         padding: 0,
         display: 'flex',
         height: '100%',
-        ...(isNavLeft
-          ? {
-              position: 'absolute',
-              left: '100%',
-              top: 0,
-              width: mainViewWidthMax, // guaranteed real estate
-            }
-          : {}),
       }}
     >
       {pageContext.globalContext.config.docpress.topNavigation}
@@ -336,26 +328,29 @@ function NavHead({ isNavLeft }: { isNavLeft?: true }) {
 
   return (
     <div
-      className={cls(['nav-head link-hover-animation', isNavLeft && 'is-nav-left', !!navMaxWidth && 'has-max-width'])}
+      className={cls(['nav-head link-hover-animation', !!navMaxWidth && 'has-max-width'])}
       style={{
         backgroundColor: 'var(--color-bg-gray)',
-        borderBottom: 'var(--block-margin) solid var(--color-bg-white)',
         position: 'relative',
+        boxShadow: `0 ${blockMargin}px 0 var(--color-bg-white)`,
       }}
     >
-      {isNavLeft && <NavHeadLeftFullWidthBackground />}
       <div
         style={{
           // DON'T REMOVE this container: it's needed for the `cqw` values
           container: 'container-nav-head / inline-size',
           width: '100%',
+          // Cap the cqw context so nav-item spacing matches between landing and doc pages.
+          maxWidth: bodyMaxWidth,
+          margin: '0 auto',
         }}
       >
         <div
           className="nav-head-content"
           style={{
             width: '100%',
-            maxWidth: navMaxWidth,
+            // Top nav spans the doc-page width so its logo lines up with the sidebar (same width on landing).
+            maxWidth: bodyMaxWidth,
             margin: 'auto',
             height: 'var(--nav-head-height)',
             fontSize: `min(14.2px, ${isProjectNameShort(name) ? '4.8cqw' : '4.5cqw'})`,
@@ -364,7 +359,7 @@ function NavHead({ isNavLeft }: { isNavLeft?: true }) {
             justifyContent: 'center',
           }}
         >
-          {!hideNavHeadLogo && <NavHeadLogo isNavLeft={isNavLeft} />}
+          {!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} />
@@ -380,7 +375,7 @@ function getStyleLayout() {
   // Mobile
   style += css`
 @media(max-width: ${viewMobile}px) {
-  .nav-head:not(.is-nav-left) {
+  .nav-head {
     .nav-head-menu-toggle {
       justify-content: flex-end !important;
       padding-right: var(--main-view-padding) !important;
@@ -397,7 +392,7 @@ function getStyleLayout() {
   // Mobile + tablet
   style += css`
 @media(max-width: ${viewTablet}px) {
-  .nav-head:not(.is-nav-left) {
+  .nav-head {
     .nav-head-secondary {
       display: none !important;
     }
@@ -407,7 +402,7 @@ function getStyleLayout() {
   // Tablet
   style += css`
 @media(max-width: ${viewTablet}px) and (min-width: ${viewMobile + 1}px) {
-  .nav-head:not(.is-nav-left) {
+  .nav-head {
     .nav-head-content {
       --icon-text-padding: 8px;
       --padding-side: 20px;
@@ -418,7 +413,7 @@ function getStyleLayout() {
   // Desktop small + desktop
   style += css`
 @media(min-width: ${viewTablet + 1}px) {
-  .nav-head:not(.is-nav-left) {
+  .nav-head {
     .nav-head-content {
       --icon-text-padding: min(8px, 0.5cqw);
       --padding-side: min(20px, 1.2cqw);
@@ -442,39 +437,6 @@ function getStyleLayout() {
   // Desktop
   if (!isNavLeftAlwaysHidden()) {
     style += css`
-@container container-viewport (min-width: ${viewDesktop}px) {
-  .nav-head:not(.is-nav-left) {
-    display: none !important;
-  }
-  .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;
-      }
-    }
-  }
-  .show-on-nav-hover {
-    opacity: 0;
-    transition-property: opacity;
-    pointer-events: none;
-  }
-  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-viewport (max-width: ${viewDesktop - 1}px) {
   #nav-left, #nav-left-margin {
     display: none;
@@ -514,37 +476,7 @@ function unexpandNav() {
   }, 1000)
 }
 
-function NavHeadLeftFullWidthBackground() {
-  return (
-    <>
-      <div
-        className="nav-head-bg show-on-nav-hover add-transition"
-        style={{
-          height: '100%',
-          zIndex: -1,
-          background: 'var(--color-bg-gray)',
-          position: 'absolute',
-          left: 0,
-          top: 0,
-          boxSizing: 'content-box',
-          borderBottom: 'var(--block-margin) solid var(--color-bg-white)',
-        }}
-      />
-      <Style>{
-        // (min-width: 0px) => trick to always apply => @container seems to always require a condition
-        css`
-@container container-viewport (min-width: 0px) {
-  .nav-head-bg {
-     width: 100cqw;
-  }
-}
-`
-      }</Style>
-    </>
-  )
-}
-
-function NavHeadLogo({ isNavLeft }: { isNavLeft?: true }) {
+function NavHeadLogo() {
   const pageContext = usePageContext()
 
   const { navLogo } = pageContext.globalContext.config.docpress
@@ -584,14 +516,8 @@ function NavHeadLogo({ isNavLeft }: { isNavLeft?: true }) {
         alignItems: 'center',
         height: '100%',
         color: 'inherit',
-        ...(!isNavLeft
-          ? {
-              paddingLeft: 'var(--main-view-padding)',
-              paddingRight: 'var(--padding-side)',
-            }
-          : {
-              paddingLeft: 15,
-            }),
+        paddingLeft: 'var(--main-view-padding)',
+        paddingRight: 'var(--padding-side)',
       }}
       href="/"
       onContextMenu={!navLogo ? undefined : onContextMenu}

package/MenuModal.tsx

@@ -14,7 +14,7 @@ import {
 } from './MenuModal/toggleMenuModal.js'
 import { EditLink } from './EditLink.js'
 
-function MenuModal({ isTopNav, isNavLeftAlwaysHidden_ }: { isTopNav: boolean; isNavLeftAlwaysHidden_: boolean }) {
+function MenuModal({ isNavLeftAlwaysHidden_ }: { isNavLeftAlwaysHidden_: boolean }) {
   return (
     <>
       <Style>{getStyle()}</Style>
@@ -22,7 +22,8 @@ function MenuModal({ isTopNav, isNavLeftAlwaysHidden_ }: { isTopNav: boolean; is
         id="menu-modal-wrapper"
         className="link-hover-animation add-transition show-on-nav-hover"
         style={{
-          position: isTopNav ? 'absolute' : 'fixed',
+          // Absolute inside the sticky header so the dropdown tracks the nav on scroll
+          position: 'absolute',
           width: '100%',
           top: 'var(--nav-head-height)',
           zIndex: 199, // maximum value, because docsearch's modal has `z-index: 200`

package/code-blocks/components/Pre.css

@@ -5,6 +5,7 @@ pre > code {
   */
   background: rgba(0, 0, 0, 0.043137255);
   font-size: 1em;
+  font-family: var(--font-mono, monospace);
 }
 
 /* Copy button */

package/css/code.css

@@ -10,4 +10,5 @@ code {
   border-radius: 4px;
   background: rgba(0, 0, 0, 0.063137255);
   font-size: 1.1em;
+  font-family: var(--font-mono, monospace);
 }

package/css/font.css

@@ -1,7 +1,7 @@
 @import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
 
 body {
-  font-family: 'Inter', sans-serif;
+  font-family: var(--font-sans, 'Inter', sans-serif);
 }
 button {
   font-family: inherit;

package/css/heading.css

@@ -13,6 +13,11 @@ h3 {
   margin-bottom: 20px;
 }
 
+/* Offset headings below the sticky top nav. */
+.doc-page :is(h1, h2, h3, h4, h5, h6) {
+  scroll-margin-top: calc(var(--nav-head-height) + 16px);
+}
+
 .doc-page h2,
 .doc-page h3 {
   margin-bottom: 16px;

package/css/tooltip.css

@@ -13,7 +13,7 @@
     opacity: 0;
     transition: opacity 0.3s ease-in-out;
     pointer-events: none;
-    font-family: monospace;
+    font-family: var(--font-mono, monospace);
     font-size: 12px;
     content: attr(aria-label);
     position: absolute;

package/dist/types/Config.d.ts

@@ -29,7 +29,7 @@ type Config = {
     twitter?: string;
     bluesky?: string;
     linkedin?: string;
-    changelog?: boolean;
+    changelog?: boolean | string;
     headings: HeadingDefinition[];
     headingsDetached: HeadingDetachedDefinition[];
     categories?: Category[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brillout/docpress",
-  "version": "0.16.46",
+  "version": "0.16.47-commit-cd5aa01",
   "type": "module",
   "dependencies": {
     "@brillout/picocolors": "^1.0.10",
@@ -66,10 +66,7 @@
     "vike": "^0.4.255",
     "vite": "^8.0.8"
   },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/brillout/docpress"
-  },
+  "repository": "https://github.com/brillout/docpress",
   "license": "MIT",
   "publishConfig": {
     "access": "public"

package/types/Config.ts

@@ -35,7 +35,7 @@ type Config = {
   twitter?: string
   bluesky?: string
   linkedin?: string
-  changelog?: boolean
+  changelog?: boolean | string
 
   headings: HeadingDefinition[]
   headingsDetached: HeadingDetachedDefinition[]