@brillout/docpress 0.16.47-commit-cd5aa01 → 0.16.47-commit-e262d2a

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) {
@@ -86,6 +87,8 @@ function Layout({ children }: { children: React.ReactNode }) {
         ['--block-margin']: `${blockMargin}px`,
         // ['--nav-head-height']: `${isLandingPage ? 70 : 63}px`,
         ['--nav-head-height']: `63px`,
+        // The offset that sticky elements (top nav, <NavLeft>) sit below. Zero when the top nav scrolls away.
+        ['--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
@@ -95,7 +98,7 @@ function Layout({ children }: { children: React.ReactNode }) {
       }}
     >
       <div className={isLandingPage ? 'landing-page' : 'doc-page'} style={whitespaceBuster1}>
-        <div style={{ position: isLandingPage ? 'relative' : 'sticky', top: 0, zIndex: 100 }}>
+        <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_} />
@@ -223,8 +226,8 @@ function NavLeft() {
         <div
           style={{
             position: 'sticky',
-            // Sit below the sticky top nav
-            top: 'var(--nav-head-height)',
+            // Sit below the sticky top nav (or at the very top when the top nav scrolls away)
+            top: 'var(--nav-head-sticky-offset)',
           }}
         >
           <div
@@ -236,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,

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/heading.css

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

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-commit-cd5aa01",
+  "version": "0.16.47-commit-e262d2a",
   "type": "module",
   "dependencies": {
     "@brillout/picocolors": "^1.0.10",

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)
-}