@brillout/docpress 0.8.3 → 0.8.4

package/Layout.tsx

@@ -7,7 +7,7 @@ import { EditPageNote } from './components/EditPageNote'
 import { parseTitle } from './parseTitle'
 import { usePageContext } from './renderer/usePageContext'
 import { Links } from './Links'
-import { hotkeyMenuOpen, toggleMenuModal } from './MenuModal'
+import { toggleMenuModal } from './MenuModal'
 import { MenuModal } from './MenuModal'
 import { autoScrollNav_SSR } from './autoScrollNav'
 import { SearchLink } from './docsearch/SearchLink'
@@ -28,13 +28,13 @@ const mainViewMax = mainViewWidthMax + mainViewPadding * 2
 const containerQuerySpacing = mainViewMax + navWidthMax + blockMargin
 const containerQueryMobile = mainViewMax + navWidthMin
 
-// Avoid blank whitespace at the bottom of the page with almost no content
-const blankBuster1: React.CSSProperties = {
+// Avoid whitespace at the bottom of pages with almost no content
+const whitespaceBuster1: React.CSSProperties = {
   minHeight: '100vh',
   display: 'flex',
   flexDirection: 'column',
 }
-const blankBuster2: React.CSSProperties = {
+const whitespaceBuster2: React.CSSProperties = {
   flexGrow: 1,
 }
 
@@ -50,21 +50,26 @@ function Layout({ children }: { children: React.ReactNode }) {
   }
 
   return (
-    <>
+    <div
+      style={{
+        ['--bg-color']: '#f5f5f7',
+        ['--block-margin']: `${blockMargin}px`,
+        ['--icon-padding']: '8px',
+      }}
+    >
+      <MenuModal />
       <div
         className={isLandingPage ? '' : 'doc-page'}
         style={{
-          ['--bg-color']: '#f5f5f7',
-          ['--block-margin']: `${blockMargin}px`,
-          ['--icon-padding']: '8px',
-          ...blankBuster1,
+          // 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
+          containerType: 'inline-size',
+          ...whitespaceBuster1,
         }}
       >
         {content}
-        <MenuModal />
       </div>
-      <style>{css`body { container-type: inline-size; }`}</style>
-    </>
+    </div>
   )
 }
 
@@ -75,7 +80,7 @@ function LayoutDocsPage({ children }: { children: React.ReactNode }) {
     <>
       <style>{getStyle()}</style>
       <NavMobile />
-      <div style={{ display: 'flex', ...blankBuster2 }}>
+      <div style={{ display: 'flex', ...whitespaceBuster2 }}>
         <NavLeft />
         <div className="low-prio-grow" style={{ width: 0, maxWidth: 50, background: 'var(--bg-color)' }} />
         <PageContent>{children}</PageContent>
@@ -190,7 +195,7 @@ function PageContent({ children }: { children: React.ReactNode }) {
 function NavMobile() {
   return (
     <div id="nav-mobile">
-      <NavigationHeader headerHeight={50} headerPadding={10} style={{ justifyContent: 'center' }} />
+      <NavigationHeader headerHeight={70} headerPadding={12} style={{ justifyContent: 'center' }} />
     </div>
   )
 }

package/MenuModal.tsx

@@ -8,6 +8,9 @@ import { NavigationContent } from './navigation/Navigation'
 import { css } from './utils/css'
 import { containerQueryMobile } from './Layout'
 import { Links } from './Links'
+import { isBrowser } from './utils/isBrowser'
+
+initCloseListeners()
 
 function MenuModal() {
   return (
@@ -19,7 +22,14 @@ function MenuModal() {
         style={{
           position: 'fixed',
           width: '100%',
+          /* Do this once Firefox supports `dvh`: https://caniuse.com/?search=dvh
+           * - Then also replace all `vh` values with `dvh` values.
+           * - https://stackoverflow.com/questions/37112218/css3-100vh-not-constant-in-mobile-browser/72245072#72245072
+          height: '100dh',
+          /*/
           height: '100vh',
+          maxHeight: '100dvh',
+          //*/
           top: 0,
           left: 0,
           zIndex: 9999,
@@ -32,8 +42,10 @@ function MenuModal() {
             // Place <LinksBottom /> to the bottom
             display: 'flex',
             flexDirection: 'column',
-            minHeight: '100vh',
+            minHeight: '100dvh',
             justifyContent: 'space-between',
+            // We don't set `container` to parent beacuse of a Chrome bug (showing a blank <MenuModal>)
+            containerType: 'inline-size',
           }}
         >
           <Nav />
@@ -136,3 +148,29 @@ function autoScroll() {
 function closeMenuModal() {
   document.documentElement.classList.remove('menu-modal-show')
 }
+
+function initCloseListeners() {
+  if (!isBrowser()) return
+  document.addEventListener('click', onLinkClick)
+  // It's redundant (and onLinkClick() is enough), but just to be sure.
+  addEventListener('hashchange', closeMenuModal)
+}
+function onLinkClick(ev: MouseEvent) {
+  if (ev.altKey || ev.ctrlKey || ev.metaKey || ev.shiftKey) return
+  const linkTag = findLinkTag(ev.target as HTMLElement)
+  if (!linkTag) return
+  const href = linkTag.getAttribute('href')
+  if (!href) return
+  if (!href.startsWith('/') && !href.startsWith('#')) return
+  closeMenuModal()
+}
+function findLinkTag(target: HTMLElement): null | HTMLElement {
+  while (target.tagName !== 'A') {
+    const { parentNode } = target
+    if (!parentNode) {
+      return null
+    }
+    target = parentNode as HTMLElement
+  }
+  return target
+}

package/components/EditPageNote.tsx

@@ -1,13 +1,12 @@
 import React from 'react'
 import { RepoLink } from './RepoLink'
-import { Emoji } from '../utils/server'
 
 export { EditPageNote }
 
 function EditPageNote({ pageContext }: { pageContext: { urlPathname: string } }) {
   const text = (
     <>
-      <Emoji name="writing-hang" /> Edit this page
+      <span style={{ fontFamily: 'emoji' }}>✍</span> Edit this page
     </>
   )
   return (

package/css/colorize-on-hover.css

@@ -1,11 +1,22 @@
+/* `@media (pointer: fine)`
+ * - Don't show tooltip on mobile devices:
+ * - https://stackoverflow.com/questions/23885255/how-to-remove-ignore-hover-css-style-on-touch-devices/64553121#64553121
+ */
+@media (hover: hover) and (pointer: fine) {
+  .colorize-on-hover:hover [class^='decolorize-'],
+  .colorize-on-hover:hover [class*=' decolorize-'] {
+    filter: grayscale(0) opacity(1) !important;
+  }
+  .link-hover-animation a:hover {
+    color: black !important;
+    background-color: var(--active-color);
+  }
+}
+
 .colorize-on-hover [class^='decolorize-'],
 .colorize-on-hover [class*=' decolorize-'] {
   transition: filter 0.3s ease-in-out;
 }
-.colorize-on-hover:hover [class^='decolorize-'],
-.colorize-on-hover:hover [class*=' decolorize-'] {
-  filter: grayscale(0) opacity(1) !important;
-}
 
 .decolorize-7 {
   filter: grayscale(1) opacity(0.7);
@@ -24,10 +35,6 @@
   transition: all 0.3s ease-in-out !important;
   transition-property: color, background-color !important;
 }
-.link-hover-animation a:hover {
-  color: black !important;
-  background-color: var(--active-color);
-}
 body {
   --active-color: rgba(0, 0, 0, 0.03);
 }

package/css/heading.css

@@ -62,10 +62,16 @@ h3 { font-size: 1.25em }
   padding-left: 26px;
   margin-left: -26px;
 }
-.doc-page h2[id]:hover::before,
-.doc-page h3[id]:hover::before {
-  content: '#';
-  position: absolute;
-  left: calc(-1 * (0.75em - 26px));
-  color: #aaa;
+/* `@media (pointer: fine)`
+ * - Don't show tooltip on mobile devices:
+ * - https://stackoverflow.com/questions/23885255/how-to-remove-ignore-hover-css-style-on-touch-devices/64553121#64553121
+ */
+@media (hover: hover) and (pointer: fine) {
+  .doc-page h2[id]:hover::before,
+  .doc-page h3[id]:hover::before {
+    content: '#';
+    position: absolute;
+    left: calc(-1 * (0.75em - 26px));
+    color: #aaa;
+  }
 }

package/css/tooltip.css

@@ -1,23 +1,29 @@
-[aria-label] {
-  position: relative;
-}
-[aria-label]:hover::before {
-  font-family: monospace;
-  font-size: 12px;
-  content: attr(aria-label);
-  position: absolute;
-  top: 100%;
-  left: 50%;
-  transform: translate(-50%, 0);
-  margin-top: 5px;
-  background: #fdfdfd;
-  padding: 3px 10px;
-  box-shadow: rgb(0 0 0 / 8%) 2px 4px 7px 0px;
-  border-radius: 5px;
-  color: #333;
-  letter-spacing: -0.02em;
-  border: 1px solid #e3e3e3;
-}
-[data-label-shift]::before {
-  margin-left: -10px;
+/* `@media (pointer: fine)`
+ * - Don't show tooltip on mobile devices:
+ * - https://stackoverflow.com/questions/23885255/how-to-remove-ignore-hover-css-style-on-touch-devices/64553121#64553121
+ */
+@media (hover: hover) and (pointer: fine) {
+  [aria-label] {
+    position: relative;
+  }
+  [aria-label]:hover::before {
+    font-family: monospace;
+    font-size: 12px;
+    content: attr(aria-label);
+    position: absolute;
+    top: 100%;
+    left: 50%;
+    transform: translate(-50%, 0);
+    margin-top: 5px;
+    background: #fdfdfd;
+    padding: 3px 10px;
+    box-shadow: rgb(0 0 0 / 8%) 2px 4px 7px 0px;
+    border-radius: 5px;
+    color: #333;
+    letter-spacing: -0.02em;
+    border: 1px solid #e3e3e3;
+  }
+  [data-label-shift]::before {
+    margin-left: -10px;
+  }
 }

package/package.json

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

package/renderer/onRenderClient.tsx

@@ -52,6 +52,7 @@ function applyHead(pageContext: PageContextClient) {
 }
 
 function onRenderStart() {
+  // It's redundant (and onLinkClick() is enough), but just to be sure.
   closeMenuModal()
 }