@brillout/docpress 0.7.8 → 0.7.9

package/Layout.tsx

@@ -42,7 +42,7 @@ function Layout({ children }: { children: React.ReactNode }) {
             </a>
           )}
           <div style={{ display: 'flex', alignItems: 'center' }}>
-            <TopNavigationLink id="doclink" aria-label={hotkeyLabel} data-balloon-pos="left">
+            <TopNavigationLink id="doclink" aria-label={hotkeyLabel} data-balloon-pos="left" data-balloon-blunt>
               Documentation
             </TopNavigationLink>
             {topNavigationList.map(({ title, url }) => (

package/autoScrollNav.ts

@@ -1,37 +1,37 @@
 export { autoScrollNav }
+export const autoScrollNav_SSR = `autoScrollNav();${autoScrollNav.toString()}`
 
-import { assert } from './utils/client'
+// - We cannot use TypeScript syntax because of autoScrollNav_SSR
+// - We have to save & restore `dodocument.documentElement.scrollTop` because scrollIntoView() scrolls the main view. (I don't know why).
+//   - Failed alternatives:
+//     - scrollIntoViewIfNeeded() (https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoViewIfNeeded) would work (it doesn't scroll the main view) but Firefox doesn't support it.
+//     - Doesn't work: the scrolling is off by hundreds of px (I guess because this function runs too early while the page is still rendering).
+//       ```js
+//       const navigationContainerEl = document.getElementById("navigation-container")
+//       const offset = navLink.offsetTop - (window.innerHeight / 2)
+//       navigationContainerEl.scrollTop = offset
+//       ```
+//     - Doesn't work: scrollIntoView() still scrolls the main view
+//       ```js
+//       const overflowOriginal = document.documentElement.style.overflow
+//       document.documentElement.style.overflow = 'hidden'
+//       // ...
+//       document.documentElement.style.overflow = overflowOriginal
+//       ```
 
 function autoScrollNav() {
   const navigationEl = document.getElementById('navigation-content-main')
-  assert(navigationEl)
+  if (!navigationEl) return
   const href = window.location.pathname
-  const navLinks: HTMLElement[] = Array.from(navigationEl.querySelectorAll(`a[href="${href}"]`))
-  assert(navLinks.length <= 1, { navLinks, href })
+  const navLinks = Array.from(navigationEl.querySelectorAll(`a[href="${href}"]`))
   const navLink = navLinks[0]
   if (!navLink) return
 
-  /* Doesn't work: the scrolling is off by hundreds of px (I guess because this function runs too early while the page is still rendering)
-  const navigationContainerEl = document.getElementById("navigation-container")
-  const offset = navLink.offsetTop - (window.innerHeight / 2)
-  navigationContainerEl.scrollTop = offset
-  */
-
-  /* Doesn't work: scrollIntoView() still scrolls the main view
-  const overflowOriginal = document.documentElement.style.overflow
-  document.documentElement.style.overflow = 'hidden'
-  ...
-  document.documentElement.style.overflow = overflowOriginal
-  */
-
   const scrollTopOriginal = document.documentElement.scrollTop
   navLink.scrollIntoView({
-    // @ts-ignore https://github.com/microsoft/TypeScript/issues/46654
     behavior: 'instant',
     block: 'center',
     inline: 'start',
   })
-  // Avoid scrollIntoView() from scrolling the main view.
-  // - Alternatively scrollIntoViewIfNeeded() (https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoViewIfNeeded) would work (it doesn't scroll the main view) but Firefox doesn't support it.
   document.documentElement.scrollTop = scrollTopOriginal
 }

package/dist/autoScrollNav.d.ts

@@ -0,0 +1,3 @@
+export { autoScrollNav };
+export declare const autoScrollNav_SSR: string;
+declare function autoScrollNav(): void;

package/dist/autoScrollNav.js

@@ -0,0 +1,36 @@
+export { autoScrollNav };
+export var autoScrollNav_SSR = "autoScrollNav();".concat(autoScrollNav.toString());
+// - We cannot use TypeScript syntax because of autoScrollNav_SSR
+// - We have to save & restore `dodocument.documentElement.scrollTop` because scrollIntoView() scrolls the main view. (I don't know why).
+//   - Failed alternatives:
+//     - scrollIntoViewIfNeeded() (https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoViewIfNeeded) would work (it doesn't scroll the main view) but Firefox doesn't support it.
+//     - Doesn't work: the scrolling is off by hundreds of px (I guess because this function runs too early while the page is still rendering).
+//       ```js
+//       const navigationContainerEl = document.getElementById("navigation-container")
+//       const offset = navLink.offsetTop - (window.innerHeight / 2)
+//       navigationContainerEl.scrollTop = offset
+//       ```
+//     - Doesn't work: scrollIntoView() still scrolls the main view
+//       ```js
+//       const overflowOriginal = document.documentElement.style.overflow
+//       document.documentElement.style.overflow = 'hidden'
+//       // ...
+//       document.documentElement.style.overflow = overflowOriginal
+//       ```
+function autoScrollNav() {
+    var navigationEl = document.getElementById('navigation-content-main');
+    if (!navigationEl)
+        return;
+    var href = window.location.pathname;
+    var navLinks = Array.from(navigationEl.querySelectorAll("a[href=\"".concat(href, "\"]")));
+    var navLink = navLinks[0];
+    if (!navLink)
+        return;
+    var scrollTopOriginal = document.documentElement.scrollTop;
+    navLink.scrollIntoView({
+        behavior: 'instant',
+        block: 'center',
+        inline: 'start',
+    });
+    document.documentElement.scrollTop = scrollTopOriginal;
+}

package/dist/navigation/Navigation.js

@@ -17,6 +17,7 @@ import { assert, Emoji, assertWarning, jsxToTextContent } from '../utils/server'
 import './Navigation.css';
 import { NavigationFullscreenClose } from './navigation-fullscreen/NavigationFullscreenButton';
 import { parseTitle } from '../parseTitle';
+import { autoScrollNav_SSR } from '../autoScrollNav';
 function Navigation(_a) {
     var navItems = _a.navItems, navItemsAll = _a.navItemsAll, currentUrl = _a.currentUrl, isDetachedPage = _a.isDetachedPage;
     return (React.createElement(React.Fragment, null,
@@ -27,7 +28,8 @@ function Navigation(_a) {
                     navItems.length > 1 && (React.createElement(NavigationContent, { id: "navigation-content-detached", navItems: navItems, currentUrl: currentUrl })),
                     React.createElement(DetachedPageNote, null))),
                 React.createElement(NavigationContent, { id: "navigation-content-main", navItems: navItemsAll, currentUrl: currentUrl }),
-                React.createElement(NavigationFullscreenClose, null)))));
+                React.createElement(NavigationFullscreenClose, null))),
+        React.createElement("script", { dangerouslySetInnerHTML: { __html: autoScrollNav_SSR } })));
 }
 function NavigationMask() {
     return React.createElement("div", { id: "mobile-navigation-mask" });

package/dist/navigation/navigation-fullscreen/NavigationFullscreenButton.js

@@ -15,9 +15,9 @@ function NavigationFullscreenButton() {
                     overflow: 'hidden',
                 } },
                 React.createElement("div", null)),
-            React.createElement("div", { style: { position: 'fixed', height: '100vh', width: 20 }, "aria-label": hotkeyLabel, "data-balloon-pos": "right" }))));
+            React.createElement("div", { style: { position: 'fixed', height: '100vh', width: 20 }, "aria-label": hotkeyLabel, "data-balloon-pos": "right", "data-balloon-blunt": true }))));
 }
 function NavigationFullscreenClose() {
-    return (React.createElement("a", { id: "navigation-fullscreen-close", style: { position: 'absolute', top: 11, right: 11, zIndex: 10 }, "aria-label": hotkeyLabel, "data-balloon-pos": "left" },
+    return (React.createElement("a", { id: "navigation-fullscreen-close", style: { position: 'absolute', top: 11, right: 11, zIndex: 10 }, "aria-label": hotkeyLabel, "data-balloon-pos": "left", "data-balloon-blunt": true },
         React.createElement("img", { src: closeIcon, height: 50, width: 50, style: { display: 'block' } })));
 }

package/navigation/Navigation.tsx

@@ -9,6 +9,7 @@ import { assert, Emoji, assertWarning, jsxToTextContent } from '../utils/server'
 import './Navigation.css'
 import { NavigationFullscreenClose } from './navigation-fullscreen/NavigationFullscreenButton'
 import { parseTitle } from '../parseTitle'
+import { autoScrollNav_SSR } from '../autoScrollNav'
 
 type NavigationData = Parameters<typeof Navigation>[0]
 
@@ -40,6 +41,8 @@ function Navigation({
           <NavigationFullscreenClose />
         </div>
       </div>
+      {/* Early scrolling, to avoid flashing */}
+      <script dangerouslySetInnerHTML={{ __html: autoScrollNav_SSR }}></script>
     </>
   )
 }

package/navigation/navigation-fullscreen/NavigationFullscreenButton.tsx

@@ -25,6 +25,7 @@ function NavigationFullscreenButton() {
           style={{ position: 'fixed', height: '100vh', width: 20 }}
           aria-label={hotkeyLabel}
           data-balloon-pos="right"
+          data-balloon-blunt
         ></div>
       </a>
     </>
@@ -38,6 +39,7 @@ function NavigationFullscreenClose() {
       style={{ position: 'absolute', top: 11, right: 11, zIndex: 10 }}
       aria-label={hotkeyLabel}
       data-balloon-pos="left"
+      data-balloon-blunt
     >
       <img src={closeIcon} height={50} width={50} style={{ display: 'block' }} />
     </a>

package/navigation/navigation-fullscreen/initNavigationFullscreen.ts

@@ -7,7 +7,7 @@ import { assert } from '../../utils/client'
 let scrollPositionBeforeToggle: number
 
 function initNavigationFullscreenOnce() {
-  scrollPositionBeforeToggle = 0
+  scrollPositionBeforeToggle = 0 // Initial scroll of fullscreen navigation is 0
   initKeyBindings()
 }
 function initKeyBindings() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brillout/docpress",
-  "version": "0.7.8",
+  "version": "0.7.9",
   "type": "module",
   "dependencies": {
     "@brillout/picocolors": "^1.0.10",

package/renderer/onRenderClient.tsx

@@ -18,12 +18,13 @@ import { installSectionUrlHashs } from '../installSectionUrlHashs'
 import { addFeatureClickHandlers, addTwitterWidgets } from '../components/FeatureList/FeatureList.client'
 
 addEcosystemStamp()
-initOnLinkClick()
 initNavigationFullscreenOnce()
 
 let root: ReactDOM.Root
 let renderPromiseResolve: () => void
 async function onRenderClient(pageContext: PageContextClient) {
+  onRenderStart()
+
   // TODO: stop using any
   const pageContextResolved: PageContextResolved = (pageContext as any).pageContextResolved
   const renderPromise = new Promise<void>((r) => {
@@ -52,6 +53,11 @@ function applyHead(pageContext: PageContextClient) {
   document.title = pageContextResolved.documentTitle
 }
 
+function onRenderStart() {
+  hideMobileNavigation()
+  hideNavigationFullScreen()
+}
+
 function onRenderDone() {
   autoScrollNav()
   installSectionUrlHashs()
@@ -69,27 +75,6 @@ function OnRenderDoneHook({ children }: { children: React.ReactNode }) {
   return children
 }
 
-function initOnLinkClick() {
-  document.addEventListener('click', (ev) => {
-    const linkTag = findLinkTag(ev.target as HTMLElement)
-    if (!linkTag) return
-    const url = linkTag.getAttribute('href')
-    if (!url) return
-    hideMobileNavigation()
-    hideNavigationFullScreen()
-  })
-}
-function findLinkTag(target: HTMLElement): null | HTMLElement {
-  while (target.tagName !== 'A') {
-    const { parentNode } = target
-    if (!parentNode) {
-      return null
-    }
-    target = parentNode as HTMLElement
-  }
-  return target
-}
-
 function setHydrationIsFinished() {
   // Used by:
   // - https://github.com/vikejs/vike/blob/9d67f3dd4bdfb38c835186b8147251e0e3b06657/docs/.testRun.ts#L22