@brillout/docpress 0.16.47 → 0.16.49

package/EditLink.tsx

@@ -28,11 +28,11 @@ function EditLink({
         paddingBottom: 7,
         paddingLeft: 8,
         paddingRight: 7,
-        border: '1px solid var(--color-border, #e0e0e0)',
+        border: '1px solid var(--dp-color-border, #e0e0e0)',
         borderRadius: 7,
         fontSize: '0.91em',
-        color: 'var(--color-muted, #6c6c6c)',
-        background: 'var(--color-surface, #f8f8f8)',
+        color: 'var(--dp-color-muted, #6c6c6c)',
+        background: 'var(--dp-color-surface, #f8f8f8)',
         letterSpacing: 0.4,
         lineHeight: 0,
         ...style,

package/ExternalLinks.tsx

@@ -63,7 +63,7 @@ function ChangelogButton() {
         className="button"
         style={{
           background: '#ffffff4f',
-          fontFamily: 'monospace',
+          fontFamily: 'var(--dp-font-mono, monospace)',
           letterSpacing: -1,
           display: 'flex',
           alignItems: 'center',
@@ -83,7 +83,7 @@ function ChangelogButton() {
           style={{
             position: 'relative',
             top: 1,
-            color: 'var(--color-text)',
+            color: 'var(--dp-color-text)',
           }}
         >
           {version}

package/Layout.tsx

@@ -69,7 +69,8 @@ const whitespaceBuster2: React.CSSProperties = {
 
 function Layout({ children }: { children: React.ReactNode }) {
   const pageContext = usePageContext()
-  const { isLandingPage } = pageContext.resolved
+  const { isLandingPage, pageDesign } = pageContext.resolved
+  const isTopNavSticky = !isLandingPage && (pageDesign?.topNavSticky ?? true)
 
   let content: React.JSX.Element
   if (isLandingPage) {
@@ -82,10 +83,12 @@ function Layout({ children }: { children: React.ReactNode }) {
   return (
     <div
       style={{
-        ['--color-bg-gray']: 'var(--color-surface, #f5f5f5)',
+        ['--color-bg-gray']: 'var(--dp-color-surface, #f5f5f5)',
         ['--block-margin']: `${blockMargin}px`,
         // ['--nav-head-height']: `${isLandingPage ? 70 : 63}px`,
         ['--nav-head-height']: `63px`,
+        // Offset for elements sitting below the sticky top nav
+        ['--nav-head-sticky-offset']: isTopNavSticky ? 'var(--nav-head-height)' : '0px',
         ['--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
@@ -94,9 +97,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: isTopNavSticky ? 'sticky' : 'relative', 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 +226,10 @@ function NavLeft() {
         <div
           style={{
             position: 'sticky',
-            top: 0,
+            // Sit below the sticky top nav (or at the very top when the top nav isn't sticky)
+            top: 'var(--nav-head-sticky-offset)',
           }}
         >
-          <NavHead isNavLeft={true} />
           <div
             style={{
               backgroundColor: 'var(--color-bg-gray)',
@@ -233,7 +239,7 @@ function NavLeft() {
               id="navigation-container"
               style={{
                 top: 0,
-                height: `calc(100vh - var(--nav-head-height) - var(--block-margin))`,
+                height: `calc(100vh - var(--nav-head-sticky-offset) - var(--block-margin))`,
                 overflowY: 'auto',
                 overscrollBehavior: 'contain',
                 paddingBottom: 40,
@@ -296,29 +302,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,35 +331,38 @@ 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'})`,
-            color: 'var(--color-muted, #666)',
+            color: 'var(--dp-color-muted, #666)',
             display: 'flex',
             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 +378,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 +395,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 +405,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 +416,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 +440,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 +479,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 +519,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}
@@ -670,7 +599,7 @@ function MenuToggle({ menuId, ...props }: PropsDiv & { menuId: number }) {
           width: 11,
           marginLeft: 'calc(var(--icon-text-padding) - 1px)',
           flexShrink: 0,
-          color: 'var(--color-muted, #888)',
+          color: 'var(--dp-color-muted, #888)',
           position: 'relative',
           top: 1,
         }}

package/MenuModal/NavigationWithColumnLayout.tsx

@@ -138,7 +138,7 @@ function NavigationWithColumnLayout(props: { navItems: NavItem[] }) {
 ${/* Button style */ ''}
 .menu-toggle-${i} {
   html.menu-modal-show.menu-modal-show-${i} & {
-    color: var(--color-text, black) !important;
+    color: var(--dp-color-text, black) !important;
     [class^='decolorize-'],
     [class*=' decolorize-'] {
       filter: grayscale(0) opacity(1) !important;

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,11 +22,12 @@ 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`
-          background: 'var(--color-surface, #ededef)',
+          background: 'var(--dp-color-surface, #ededef)',
           transitionProperty: 'opacity',
           transitionTimingFunction: 'ease',
           maxWidth: isNavLeftAlwaysHidden_ ? undefined : bodyMaxWidth,
@@ -169,8 +170,8 @@ function CloseButton({ className }: { className: string }) {
           cx="11.45"
           cy="11.45"
           r="10.607"
-          fill="var(--color-surface, #ececec)"
-          stroke="var(--color-muted, #666)"
+          fill="var(--dp-color-surface, #ececec)"
+          stroke="var(--dp-color-muted, #666)"
           strokeDashoffset="251.44"
           strokeLinecap="round"
           strokeLinejoin="round"
@@ -179,8 +180,8 @@ function CloseButton({ className }: { className: string }) {
         />
         <path
           d="m7.5904 6.2204 3.86 3.86 3.84-3.84a0.92 0.92 0 0 1 0.66-0.29 1 1 0 0 1 1 1 0.9 0.9 0 0 1-0.27 0.66l-3.89 3.84 3.89 3.89a0.9 0.9 0 0 1 0.27 0.61 1 1 0 0 1-1 1 0.92 0.92 0 0 1-0.69-0.27l-3.81-3.86-3.85 3.85a0.92 0.92 0 0 1-0.65 0.28 1 1 0 0 1-1-1 0.9 0.9 0 0 1 0.27-0.66l3.89-3.84-3.89-3.89a0.9 0.9 0 0 1-0.27-0.61 1 1 0 0 1 1-1c0.24 3e-3 0.47 0.1 0.64 0.27z"
-          fill="var(--color-muted, #666)"
-          stroke="var(--color-muted, #666)"
+          fill="var(--dp-color-muted, #666)"
+          stroke="var(--dp-color-muted, #666)"
           strokeWidth=".11719"
         />
       </svg>

package/NavItemComponent.css

@@ -13,7 +13,7 @@
 .nav-item-level-4 {
   padding-top: 14px;
   margin-bottom: -1px;
-  color: var(--color-muted, #999);
+  color: var(--dp-color-muted, #999);
   font-size: 12px;
   font-weight: 400;
   letter-spacing: 0.15ch;
@@ -30,7 +30,7 @@
   text-transform: uppercase;
   font-weight: 600;
   letter-spacing: 0.14ch;
-  color: var(--color-text);
+  color: var(--dp-color-text);
   #menu-modal-wrapper & {
     margin-top: 10px;
     padding-left: 9px;
@@ -63,7 +63,7 @@
   font-size: 14.4px;
   font-weight: 400;
   letter-spacing: 0.15ch;
-  color: var(--color-text);
+  color: var(--dp-color-text);
   padding-left: var(--padding-left-global);
   padding-right: 0;
   --padding: 4px;
@@ -74,7 +74,7 @@
   font-size: 12px;
   font-weight: 400;
   letter-spacing: 0.15ch;
-  color: var(--color-text);
+  color: var(--dp-color-text);
   --padding: 5px;
 
   padding: var(--padding) 0;
@@ -82,7 +82,7 @@
 }
 .nav-item-level-3 {
   --shadow-size: 9px;
-  --shadow-color: var(--color-shadow, rgba(0, 0, 0, 0.11));
+  --shadow-color: var(--dp-color-shadow, 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);

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(--dp-font-mono, monospace);
 }
 
 /* Copy button */

package/code-blocks/components/Tabs.css

@@ -4,7 +4,7 @@
   /* tablist style logic */
   .choice-tabs__tab:has(.choice-tabs__radio:checked) {
     border-bottom: 2px solid #aaa;
-    color: var(--color-text);
+    color: var(--dp-color-text);
   }
 }
 
@@ -22,8 +22,8 @@
   padding: 6px 12px;
   cursor: pointer;
   font-weight: 500;
-  /* lighten --color-text by 20% */
-  color: color-mix(in srgb, var(--color-text) 80%, white 20%);
+  /* lighten --dp-color-text by 20% */
+  color: color-mix(in srgb, var(--dp-color-text) 80%, white 20%);
 }
 
 .choice-tabs__tab-content {
@@ -45,7 +45,7 @@
 }
 
 .choice-tabs__tab:hover {
-  color: var(--color-text);
+  color: var(--dp-color-text);
 }
 
 .choice-tabs__tab--disabled {

package/components/index.ts

@@ -1,11 +1,8 @@
 export * from '../utils/Emoji/index.js'
 export * from './Link.js'
 export * from './RepoLink.js'
-export * from './P.js'
 export * from './Note.js'
 export * from './ImportMeta.js'
-export * from './HorizontalLine.js'
 export * from './CodeBlockTransformer.js'
-export * from './Comment.js'
 export * from './FileRemoved.js'
 export * from '../code-blocks/components/Tabs.js'

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(--dp-font-mono, monospace);
 }

package/css/colorize-on-hover.css

@@ -56,6 +56,6 @@ body {
      unthemed site identical to the original `rgba(0, 0, 0, value)`:
      color-mix(in srgb, #000 3%, transparent) === rgba(0, 0, 0, 0.03). */
   --color-active-value: 3%;
-  --color-active: color-mix(in srgb, var(--color-text, #000) var(--color-active-value), transparent);
-  --color-active-double: color-mix(in srgb, var(--color-text, #000) calc(2 * var(--color-active-value)), transparent);
+  --color-active: color-mix(in srgb, var(--dp-color-text, #000) var(--color-active-value), transparent);
+  --color-active-double: color-mix(in srgb, var(--dp-color-text, #000) calc(2 * var(--color-active-value)), transparent);
 }

package/css/font.css

@@ -1,12 +1,12 @@
 @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(--dp-font-sans, 'Inter', sans-serif);
 }
 button {
   font-family: inherit;
 }
 body {
-  color: var(--color-text, #323d48);
+  color: var(--dp-color-text, #323d48);
   line-height: 1.5;
 }

package/css/heading.css

@@ -13,6 +13,11 @@ h3 {
   margin-bottom: 20px;
 }
 
+/* Offset headings below the sticky top nav (no offset if top nav isn't sticky). */
+.doc-page :is(h1, h2, h3, h4, h5, h6) {
+  scroll-margin-top: calc(var(--nav-head-sticky-offset) + 16px);
+}
+
 .doc-page h2,
 .doc-page h3 {
   margin-bottom: 16px;
@@ -27,7 +32,7 @@ h3 {
   height: 1px;
   top: -45px;
   /* Same as <HorizontalLine> */
-  background-color: var(--color-border, rgba(0, 0, 0, 0.1));
+  background-color: var(--dp-color-border, rgba(0, 0, 0, 0.1));
   --width: min(80%, 500px);
   width: var(--width);
   left: calc((100% - var(--width)) / 2);
@@ -54,7 +59,7 @@ h3 {
 
 .doc-page h5 {
   font-size: 0.94em;
-  color: var(--color-muted, #777);
+  color: var(--dp-color-muted, #777);
   margin-bottom: 10px;
 }
 
@@ -82,7 +87,7 @@ h3 {
     font-size: 23px;
     top: 1px;
     left: calc(-1 * (0.75em - var(--hash-offset)));
-    color: var(--color-muted, #aaa);
+    color: var(--dp-color-muted, #aaa);
     display: flex;
     align-items: center;
   }

package/css/link.css

@@ -2,5 +2,5 @@ a {
   text-decoration: none;
 }
 .doc-page a[href]:not(.nav-item) {
-  color: var(--color-primary, #4747ff);
+  color: var(--dp-color-primary, #4747ff);
 }

package/css/table.css

@@ -1,5 +1,5 @@
 table th {
-  background-color: var(--color-surface, #f7f7f7);
+  background-color: var(--dp-color-surface, #f7f7f7);
 }
 table {
   border-collapse: collapse;
@@ -7,7 +7,7 @@ table {
 table td,
 table th {
   padding: 8px;
-  border: 1px solid var(--color-border, #ccc);
+  border: 1px solid var(--dp-color-border, #ccc);
 }
 table th {
   text-align: left;

package/css/tokens.css

@@ -1,34 +1,41 @@
 /*
  * Color tokens (opt-in, zero default change).
  *
+ * The themeable seam is `--dp-`-prefixed (`--dp-color-*`, `--dp-font-*`). The
+ * prefix matters: DocPress used to read bare `--color-*` / `--font-*`, which are
+ * the same names Tailwind and daisyUI emit to the global `:root`. A host using
+ * either could bleed its palette into DocPress (e.g. a leaked `--color-bg` on
+ * route prefetch). Reading `--dp-*` instead means only values set FOR DocPress
+ * apply.
+ *
  * No light palette is defined here on purpose: every consumer reads
- * `var(--color-x, <literal>)` and falls back to its original literal, so an
+ * `var(--dp-color-x, <literal>)` and falls back to its original literal, so an
  * unthemed DocPress site renders exactly as before. A site re-themes by setting
- * the `--color-*` variables (on :root or body), and turns on a dark appearance
- * by adding the `dark` class or `[data-theme="dark"]`. There is no
- * `prefers-color-scheme` switch, so the OS setting never changes a site that
- * has not opted in.
+ * the `--dp-color-*` / `--dp-font-*` variables (on :root or body), and turns on
+ * a dark appearance by adding the `dark` class or `[data-theme="dark"]`. There
+ * is no `prefers-color-scheme` switch, so the OS setting never changes a site
+ * that has not opted in.
  */
 :root {
-  /* --color-text has a single original value and pre-existing consumers that
+  /* --dp-color-text has a single original value and pre-existing consumers that
      read it bare (nav items, tabs), so it is defined here (was `body {}`). It
      stays overridable (a `body`/`:root` override or the dark block below wins).
      The ambiguous greys are intentionally NOT defined here: their consumers fall
      back to their own original literal, so light rendering is unchanged. */
-  --color-text: #323d48;
+  --dp-color-text: #323d48;
 
   /* Long-standing internal aliases, kept resolving to their original defaults. */
-  --color-bg-white: var(--color-bg, #fdfdfd);
-  --color-bg-gray: var(--color-surface, #f5f5f5);
+  --color-bg-white: var(--dp-color-bg, #fdfdfd);
+  --color-bg-gray: var(--dp-color-surface, #f5f5f5);
 }
 
 :root.dark,
 :root[data-theme='dark'] {
-  --color-bg: #0d0f14;
-  --color-surface: #161922;
-  --color-text: #d7dce5;
-  --color-muted: #8b95a5;
-  --color-border: #2b313c;
-  --color-primary: #8aa0ff;
-  --color-shadow: rgba(0, 0, 0, 0.45);
+  --dp-color-bg: #0d0f14;
+  --dp-color-surface: #161922;
+  --dp-color-text: #d7dce5;
+  --dp-color-muted: #8b95a5;
+  --dp-color-border: #2b313c;
+  --dp-color-primary: #8aa0ff;
+  --dp-color-shadow: rgba(0, 0, 0, 0.45);
 }

package/css/tooltip.css

@@ -13,19 +13,19 @@
     opacity: 0;
     transition: opacity 0.3s ease-in-out;
     pointer-events: none;
-    font-family: monospace;
+    font-family: var(--dp-font-mono, monospace);
     font-size: 12px;
     content: attr(aria-label);
     position: absolute;
     left: 50%;
     transform: translate(-50%, 0);
-    background: var(--color-bg, #fdfdfd);
+    background: var(--dp-color-bg, #fdfdfd);
     padding: 3px 10px;
-    box-shadow: var(--color-shadow, rgb(0 0 0 / 8%)) 2px 4px 7px 0px;
+    box-shadow: var(--dp-color-shadow, rgb(0 0 0 / 8%)) 2px 4px 7px 0px;
     border-radius: 5px;
-    color: var(--color-text, #333);
+    color: var(--dp-color-text, #333);
     letter-spacing: -0.02em;
-    border: 1px solid var(--color-border, #e3e3e3);
+    border: 1px solid var(--dp-color-border, #e3e3e3);
     z-index: 1;
     /* Atlernative: https://stackoverflow.com/questions/30086913/css-positioned-absolute-element-automatic-width-outside-of-parents-bounds/57379329#57379329
     width: max-content;

package/dist/components/index.d.ts

@@ -1,11 +1,8 @@
 export * from '../utils/Emoji/index.js';
 export * from './Link.js';
 export * from './RepoLink.js';
-export * from './P.js';
 export * from './Note.js';
 export * from './ImportMeta.js';
-export * from './HorizontalLine.js';
 export * from './CodeBlockTransformer.js';
-export * from './Comment.js';
 export * from './FileRemoved.js';
 export * from '../code-blocks/components/Tabs.js';

package/dist/components/index.js

@@ -1,11 +1,8 @@
 export * from '../utils/Emoji/index.js';
 export * from './Link.js';
 export * from './RepoLink.js';
-export * from './P.js';
 export * from './Note.js';
 export * from './ImportMeta.js';
-export * from './HorizontalLine.js';
 export * from './CodeBlockTransformer.js';
-export * from './Comment.js';
 export * from './FileRemoved.js';
 export * from '../code-blocks/components/Tabs.js';

package/dist/renderer/usePageContext.d.ts

@@ -1,23 +1,7 @@
 export { PageContextProvider };
 export { usePageContext };
-export { usePageContextLegacy };
 import React from 'react';
 import type { PageContext } from 'vike/types';
-declare function usePageContextLegacy(): {
-    navItemsAll: import("../NavItemComponent.js").NavItem[];
-    navItemsDetached: import("../NavItemComponent.js").NavItem[] | undefined;
-    pageDesign: {
-        hideTitle?: true;
-        hideMenuLeft?: true;
-        contentMaxWidth?: number;
-    } | undefined;
-    linksAll: import("../components/Link.js").LinkData[];
-    isLandingPage: boolean;
-    pageTitle: string | null;
-    documentTitle: string;
-    activeCategoryName: string;
-    choices: import("../code-blocks/utils/resolveChoices.js").ResolvedChoices | undefined;
-};
 declare function usePageContext(): PageContext;
 declare function PageContextProvider({ pageContext, children, }: {
     pageContext: PageContext;

package/dist/renderer/usePageContext.js

@@ -1,16 +1,10 @@
 export { PageContextProvider };
 export { usePageContext };
-export { usePageContextLegacy };
 import React, { useContext } from 'react';
 import { getGlobalObject } from '../utils/getGlobalObject.js';
 const globalObject = getGlobalObject('usePageContext.ts', {
     Ctx: React.createContext(undefined),
 });
-function usePageContextLegacy() {
-    const { Ctx } = globalObject;
-    const pageContext = useContext(Ctx);
-    return pageContext.resolved;
-}
 function usePageContext() {
     const pageContext = useContext(globalObject.Ctx);
     return pageContext;

package/dist/resolvePageContext.d.ts

@@ -10,6 +10,7 @@ declare function resolvePageContext(pageContext: PageContextServer): {
         hideTitle?: true;
         hideMenuLeft?: true;
         contentMaxWidth?: number;
+        topNavSticky?: boolean;
     } | undefined;
     linksAll: LinkData[];
     isLandingPage: boolean;

package/dist/types/Heading.d.ts

@@ -24,6 +24,12 @@ type PageDesign = {
     hideTitle?: true;
     hideMenuLeft?: true;
     contentMaxWidth?: number;
+    /**
+     * Whether the top navigation sticks to the top of the viewport while scrolling.
+     *
+     * @default true
+     */
+    topNavSticky?: boolean;
 };
 type HeadingDetachedResolved = Omit<HeadingResolved, 'level' | 'linkBreadcrumb'> & {
     level: 2;

package/dist/utils/server.d.ts

@@ -1,7 +1,5 @@
 export * from './client.js';
 export * from './isBrowser.js';
-export * from './filter.js';
 export * from './determineSectionUrlHash.js';
 export * from './jsxToTextContent.js';
-export * from './objectAssign.js';
 export * from './Emoji/index.js';

package/dist/utils/server.js

@@ -1,7 +1,5 @@
 export * from './client.js';
 export * from './isBrowser.js';
-export * from './filter.js';
 export * from './determineSectionUrlHash.js';
 export * from './jsxToTextContent.js';
-export * from './objectAssign.js';
 export * from './Emoji/index.js';

package/package.json

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

package/renderer/usePageContext.tsx

@@ -1,6 +1,5 @@
 export { PageContextProvider }
 export { usePageContext }
-export { usePageContextLegacy }
 
 import React, { useContext } from 'react'
 import type { PageContext } from 'vike/types'
@@ -10,12 +9,6 @@ const globalObject = getGlobalObject('usePageContext.ts', {
   Ctx: React.createContext<PageContext>(undefined as any),
 })
 
-function usePageContextLegacy() {
-  const { Ctx } = globalObject
-  const pageContext = useContext(Ctx)
-  return pageContext.resolved
-}
-
 function usePageContext(): PageContext {
   const pageContext = useContext(globalObject.Ctx)
   return pageContext

package/types/Heading.ts

@@ -28,6 +28,12 @@ type PageDesign = {
   hideTitle?: true
   hideMenuLeft?: true
   contentMaxWidth?: number
+  /**
+   * Whether the top navigation sticks to the top of the viewport while scrolling.
+   *
+   * @default true
+   */
+  topNavSticky?: boolean
 }
 
 type HeadingDetachedResolved = Omit<HeadingResolved, 'level' | 'linkBreadcrumb'> & {

package/utils/server.ts

@@ -1,7 +1,5 @@
 export * from './client.js'
 export * from './isBrowser.js'
-export * from './filter.js'
 export * from './determineSectionUrlHash.js'
 export * from './jsxToTextContent.js'
-export * from './objectAssign.js'
 export * from './Emoji/index.js'

package/components/Comment.tsx

@@ -1,7 +0,0 @@
-export { Comment }
-
-import React from 'react'
-
-function Comment() {
-  return <></>
-}

package/components/HorizontalLine.tsx

@@ -1,22 +0,0 @@
-export { HorizontalLine }
-
-import React from 'react'
-import { cls } from '../utils/cls.js'
-
-function HorizontalLine({ primary }: { primary?: true }) {
-  return (
-    <div className={cls(primary && 'primary')} style={{ textAlign: 'center' }}>
-      <hr
-        style={{
-          display: 'inline-block',
-          margin: 0,
-          border: 0,
-          // Same as `.doc-page h2::after`
-          borderTop: '1px solid var(--color-border, rgba(0, 0, 0, 0.1))',
-          maxWidth: 500,
-          width: '80%',
-        }}
-      />
-    </div>
-  )
-}

package/components/P.css

@@ -1,8 +0,0 @@
-/* Copied from Chrome's user agent stylesheet */
-div.paragraph {
-  display: block;
-  margin-block-start: 1em;
-  margin-block-end: 1em;
-  margin-inline-start: 0px;
-  margin-inline-end: 0px;
-}

package/components/P.tsx

@@ -1,8 +0,0 @@
-import React from 'react'
-import './P.css'
-
-export { P }
-
-function P(props: React.HTMLProps<HTMLDivElement>) {
-  return <div {...props} className={'paragraph'} />
-}

package/dist/components/Comment.d.ts

@@ -1,3 +0,0 @@
-export { Comment };
-import React from 'react';
-declare function Comment(): React.JSX.Element;

package/dist/components/Comment.js

@@ -1,5 +0,0 @@
-export { Comment };
-import React from 'react';
-function Comment() {
-    return React.createElement(React.Fragment, null);
-}

package/dist/components/HorizontalLine.d.ts

@@ -1,5 +0,0 @@
-export { HorizontalLine };
-import React from 'react';
-declare function HorizontalLine({ primary }: {
-    primary?: true;
-}): React.JSX.Element;

package/dist/components/HorizontalLine.js

@@ -1,15 +0,0 @@
-export { HorizontalLine };
-import React from 'react';
-import { cls } from '../utils/cls.js';
-function HorizontalLine({ primary }) {
-    return (React.createElement("div", { className: cls(primary && 'primary'), style: { textAlign: 'center' } },
-        React.createElement("hr", { style: {
-                display: 'inline-block',
-                margin: 0,
-                border: 0,
-                // Same as `.doc-page h2::after`
-                borderTop: '1px solid var(--color-border, rgba(0, 0, 0, 0.1))',
-                maxWidth: 500,
-                width: '80%',
-            } })));
-}

package/dist/components/P.d.ts

@@ -1,4 +0,0 @@
-import React from 'react';
-import './P.css';
-export { P };
-declare function P(props: React.HTMLProps<HTMLDivElement>): React.JSX.Element;

package/dist/components/P.js

@@ -1,6 +0,0 @@
-import React from 'react';
-import './P.css';
-export { P };
-function P(props) {
-    return React.createElement("div", { ...props, className: 'paragraph' });
-}

package/dist/utils/cls.d.ts

@@ -1,3 +0,0 @@
-export { cls };
-type Class = string | boolean | undefined;
-declare function cls(className: Class | Class[]): string;

package/dist/utils/cls.js

@@ -1,5 +0,0 @@
-export { cls };
-function cls(className) {
-    const classNames = Array.isArray(className) ? className : [className];
-    return classNames.filter(Boolean).join(' ');
-}

package/dist/utils/filter.d.ts

@@ -1,2 +0,0 @@
-export { filter };
-declare function filter<T extends object>(obj: T, predicate: <K extends keyof T>(value: T[K], key: K) => boolean): T;

package/dist/utils/filter.js

@@ -1,11 +0,0 @@
-export { filter };
-// https://stackoverflow.com/questions/66341757/typescript-how-to-filter-the-object
-function filter(obj, predicate) {
-    const result = {};
-    Object.keys(obj).forEach((name) => {
-        if (predicate(obj[name], name)) {
-            result[name] = obj[name];
-        }
-    });
-    return result;
-}

package/dist/utils/objectAssign.d.ts

@@ -1,2 +0,0 @@
-export { objectAssign };
-declare function objectAssign<Obj extends Object, ObjAddendum>(obj: Obj, objAddendum: ObjAddendum): asserts obj is Obj & ObjAddendum;

package/dist/utils/objectAssign.js

@@ -1,5 +0,0 @@
-export { objectAssign };
-// Same as `Object.assign()` but with type inference
-function objectAssign(obj, objAddendum) {
-    Object.assign(obj, objAddendum);
-}

package/utils/PassTrough.tsx

@@ -1,7 +0,0 @@
-export { PassThrough }
-
-import React from 'react'
-
-function PassThrough({ children }: any) {
-  return <>{children}</>
-}

package/utils/filesystemPathHandling.ts

@@ -1,42 +0,0 @@
-export { toPosixPath }
-export { assertPosixPath }
-export { toSystemPath }
-
-import assert from 'assert'
-
-const sepPosix = '/'
-const sepWin32 = '\\'
-
-function toPosixPath(path: string) {
-  if (isPosix()) {
-    assertPosixPath(path)
-    return path
-  }
-  if (isWin32()) {
-    const pathPosix = path.split(sepWin32).join(sepPosix)
-    assertPosixPath(pathPosix)
-    return pathPosix
-  }
-  assert(false)
-}
-
-function assertPosixPath(path: string) {
-  assert(path && !path.includes(sepWin32), `Wrongly formatted path: ${path}`)
-}
-
-function toSystemPath(path: string) {
-  if (isPosix()) {
-    return toPosixPath(path)
-  }
-  if (isWin32()) {
-    return path.split(sepPosix).join(sepWin32)
-  }
-  assert(false)
-}
-
-function isWin32() {
-  return process.platform === 'win32'
-}
-function isPosix() {
-  return !isWin32()
-}

package/utils/filter.ts

@@ -1,12 +0,0 @@
-export { filter }
-
-// https://stackoverflow.com/questions/66341757/typescript-how-to-filter-the-object
-function filter<T extends object>(obj: T, predicate: <K extends keyof T>(value: T[K], key: K) => boolean): T {
-  const result: { [K in keyof T]?: T[K] } = {}
-  ;(Object.keys(obj) as Array<keyof T>).forEach((name) => {
-    if (predicate(obj[name], name)) {
-      result[name] = obj[name]
-    }
-  })
-  return result as T
-}

package/utils/objectAssign.ts

@@ -1,9 +0,0 @@
-export { objectAssign }
-
-// Same as `Object.assign()` but with type inference
-function objectAssign<Obj extends Object, ObjAddendum>(
-  obj: Obj,
-  objAddendum: ObjAddendum,
-): asserts obj is Obj & ObjAddendum {
-  Object.assign(obj, objAddendum)
-}