@brillout/docpress 0.8.3 → 0.8.5

package/+config.ts

@@ -15,8 +15,10 @@ export default {
     Layout: {
       env: { client: true, server: true },
     },
+    TopNavigation: {
+      env: { client: true, server: true },
+    },
   },
-
   prefetch: {
     staticAssets: 'hover',
     pageContext: Infinity,
@@ -32,6 +34,7 @@ declare global {
     }
     interface Config {
       Layout?: ReactComponent | null | ImportString
+      TopNavigation?: ReactComponent
     }
   }
 }

package/Layout.tsx

@@ -5,14 +5,15 @@ import React from 'react'
 import { NavigationContent } from './navigation/Navigation'
 import { EditPageNote } from './components/EditPageNote'
 import { parseTitle } from './parseTitle'
-import { usePageContext } from './renderer/usePageContext'
+import { usePageContext, usePageContext2 } 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'
 import { navigate } from 'vike/client/router'
 import { css } from './utils/css'
+import { PassThrough } from './utils/PassTrough'
 
 const mainViewWidthMax = 800
 const mainViewPadding = 20
@@ -28,13 +29,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 +51,26 @@ function Layout({ children }: { children: React.ReactNode }) {
   }
 
   return (
-    <>
+    <div
+      style={{
+        ['--bg-color']: '#f5f5f7',
+        ['--block-margin']: `${blockMargin}px`,
+        ['--icon-text-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 +81,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,16 +196,16 @@ function PageContent({ children }: { children: React.ReactNode }) {
 function NavMobile() {
   return (
     <div id="nav-mobile">
-      <NavigationHeader headerHeight={50} headerPadding={10} style={{ justifyContent: 'center' }} />
+      <NavigationHeader headerHeight={70} iconSize={40} paddingLeft={12} style={{ justifyContent: 'center' }} />
     </div>
   )
 }
 
 function NavTop() {
-  const pageContext = usePageContext()
-  const { topNavigationList, topNavigationStyle } = pageContext
+  const pageContext2 = usePageContext2()
   const paddingSize = 35
   const padding = `0 ${paddingSize}px`
+  const TopNavigation = pageContext2.config.TopNavigation || PassThrough
   return (
     <div
       id="top-navigation"
@@ -212,30 +218,13 @@ function NavTop() {
         textDecoration: 'none',
         marginBottom: 'var(--block-margin)',
         backgroundColor: 'var(--bg-color)',
+        ['--padding-side']: `${paddingSize}px`,
         fontSize: '1.06em',
         color: '#666',
-        ...topNavigationStyle,
       }}
     >
       <div style={{ display: 'flex', alignItems: 'center', height: 70 }}>
-        {topNavigationList.map(({ title, url }) => (
-          <a
-            href={url!}
-            key={url}
-            style={{
-              color: 'inherit',
-              height: '100%',
-              display: 'inline-flex',
-              alignItems: 'center',
-              justifyContent: 'center',
-              cursor: 'pointer',
-              padding,
-              marginRight: 7,
-            }}
-          >
-            {title}
-          </a>
-        ))}
+        <TopNavigation />
         <SearchLink style={{ padding }} />
         <MenuLink style={{ padding }} />
         <Links style={{ display: 'inline-flex', padding, marginLeft: -8 }} />
@@ -248,7 +237,6 @@ function NavLeft() {
   const pageContext = usePageContext()
   const { navItems, navItemsAll, isDetachedPage } = pageContext
   const headerHeight = 60
-  const headerPadding = 10
   return (
     <>
       <div
@@ -265,7 +253,7 @@ function NavLeft() {
             top: 0,
           }}
         >
-          <NavigationHeader {...{ headerHeight, headerPadding }} />
+          <NavigationHeader headerHeight={headerHeight} iconSize={39} paddingLeft={6} />
           <div
             style={{
               backgroundColor: 'var(--bg-color)',
@@ -304,11 +292,11 @@ function NavLeft() {
 
 function NavigationHeader({
   headerHeight,
-  headerPadding,
+  iconSize,
   style,
-}: { headerHeight: number; headerPadding: number; style?: React.CSSProperties }) {
+  paddingLeft,
+}: { headerHeight: number; iconSize: number; paddingLeft: number; style?: React.CSSProperties }) {
   const pageContext = usePageContext()
-  const iconSize = headerHeight - 2 * headerPadding
   /*
   const {projectName} = pageContext.meta
   /*/
@@ -318,8 +306,9 @@ function NavigationHeader({
   const childrenStyle: React.CSSProperties = {
     justifyContent: 'center',
     fontSize: isProjectNameShort ? '4.8cqw' : '4.5cqw',
-    ['--icon-padding']: '1.8cqw',
+    ['--icon-text-padding']: '1.8cqw',
   }
+  const marginLeft = -10
   return (
     <div
       style={{
@@ -345,9 +334,8 @@ function NavigationHeader({
             color: 'inherit',
             textDecoration: 'none',
             height: '100%',
-            padding: `${headerPadding}px 0`,
-            paddingLeft: 4 + 10,
-            marginLeft: -10,
+            paddingLeft: paddingLeft + marginLeft * -1,
+            marginLeft: marginLeft,
             ...childrenStyle,
             justifyContent: 'flex-start',
             flexGrow: 0.5,
@@ -367,8 +355,8 @@ function NavigationHeader({
           />
           <span
             style={{
-              marginLeft: `calc(var(--icon-padding) + 2px)`,
-              fontSize: isProjectNameShort ? '1.7em' : '1.3em',
+              marginLeft: `calc(var(--icon-text-padding) + 2px)`,
+              fontSize: isProjectNameShort ? '1.65em' : '1.3em',
             }}
           >
             {projectName}
@@ -420,7 +408,7 @@ function MenuLink(props: PropsAnchor) {
 function MenuIcon() {
   return (
     <svg
-      style={{ marginRight: 'calc(var(--icon-padding) + 2px)', lineHeight: 0, width: '1.3em' }}
+      style={{ marginRight: 'calc(var(--icon-text-padding) + 2px)', lineHeight: 0, width: '1.3em' }}
       className="decolorize-6"
       viewBox="0 0 448 512"
     >

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/config/resolveHeadingsData.ts

@@ -37,7 +37,11 @@ function resolveHeadingsData(pageContext: PageContextOriginal) {
   const { headingsDetachedResolved } = resolved
   let { headingsResolved } = resolved
 
-  const { activeHeading, isDetachedPage } = getActiveHeading(headingsResolved, headingsDetachedResolved, pageContext)
+  const { activeHeading, isDetachedPage, activeCategory } = getActiveHeading(
+    headingsResolved,
+    headingsDetachedResolved,
+    pageContext,
+  )
 
   const { documentTitle, isLandingPage, pageTitle } = getTitles(activeHeading, pageContext, config)
 
@@ -72,10 +76,6 @@ function resolveHeadingsData(pageContext: PageContextOriginal) {
     }
   }
 
-  const topNavigationList = headingsResolved
-    .filter((heading) => heading.topNavigation)
-    .map((h) => ({ title: typeof h.topNavigation === 'string' ? h.topNavigation : h.title, url: h.url }))
-
   const pageContextAddendum = {
     isDetachedPage,
     navItems,
@@ -84,9 +84,10 @@ function resolveHeadingsData(pageContext: PageContextOriginal) {
     isLandingPage,
     pageTitle,
     documentTitle,
-    topNavigationList,
     // TODO: don't pass to client-side
     columnLayouts,
+    // TODO: don't pass to client-side
+    activeCategory,
   }
   return pageContextAddendum
 }
@@ -153,14 +154,20 @@ function getActiveHeading(
   pageContext: { urlPathname: string; exports: Exports },
 ) {
   let activeHeading: HeadingResolved | HeadingDetachedResolved | null = null
+  let activeCategory: string | undefined
   const { urlPathname } = pageContext
   assert(urlPathname)
-  headingsResolved.forEach((heading) => {
+  for (const heading of headingsResolved) {
+    if (heading.level === 1) {
+      activeCategory = heading.title
+    }
     if (heading.url === urlPathname) {
       activeHeading = heading
+      assert(activeCategory)
       assert(heading.level === 2, { pageUrl: urlPathname, heading })
+      break
     }
-  })
+  }
   const isDetachedPage = !activeHeading
   if (!activeHeading) {
     activeHeading = headingsDetachedResolved.find(({ url }) => urlPathname === url) ?? null
@@ -178,7 +185,7 @@ function getActiveHeading(
       ].join('\n'),
     )
   }
-  return { activeHeading, isDetachedPage }
+  return { activeHeading, isDetachedPage, activeCategory }
 }
 
 function getPageSectionsResolved(

package/config/resolvePageContext.ts

@@ -30,7 +30,6 @@ function resolvePageContext(pageContext: PageContextOriginal) {
     twitterHandle,
     bannerUrl,
     websiteUrl,
-    topNavigationStyle,
     projectInfo: { projectName },
   } = config
   objectAssign(pageContextResolved, {
@@ -44,7 +43,6 @@ function resolvePageContext(pageContext: PageContextOriginal) {
       tagline,
       algolia,
     },
-    topNavigationStyle,
     config,
   })
 

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/dist/+config.d.ts

@@ -16,6 +16,12 @@ declare const _default: {
                 server: true;
             };
         };
+        TopNavigation: {
+            env: {
+                client: true;
+                server: true;
+            };
+        };
     };
     prefetch: {
         staticAssets: "hover";
@@ -32,6 +38,7 @@ declare global {
         }
         interface Config {
             Layout?: ReactComponent | null | ImportString;
+            TopNavigation?: ReactComponent;
         }
     }
 }

package/dist/+config.js

@@ -12,6 +12,9 @@ export default {
         Layout: {
             env: { client: true, server: true },
         },
+        TopNavigation: {
+            env: { client: true, server: true },
+        },
     },
     prefetch: {
         staticAssets: 'hover',

package/dist/config/resolveHeadingsData.d.ts

@@ -10,9 +10,6 @@ declare function resolveHeadingsData(pageContext: PageContextOriginal): {
     isLandingPage: boolean;
     pageTitle: string | null;
     documentTitle: string;
-    topNavigationList: {
-        title: string;
-        url: string | null | undefined;
-    }[];
     columnLayouts: number[][];
+    activeCategory: string | undefined;
 };

package/dist/config/resolveHeadingsData.js

@@ -34,7 +34,7 @@ function resolveHeadingsData(pageContext) {
     var resolved = getHeadingsResolved(config);
     var headingsDetachedResolved = resolved.headingsDetachedResolved;
     var headingsResolved = resolved.headingsResolved;
-    var _a = getActiveHeading(headingsResolved, headingsDetachedResolved, pageContext), activeHeading = _a.activeHeading, isDetachedPage = _a.isDetachedPage;
+    var _a = getActiveHeading(headingsResolved, headingsDetachedResolved, pageContext), activeHeading = _a.activeHeading, isDetachedPage = _a.isDetachedPage, activeCategory = _a.activeCategory;
     var _b = getTitles(activeHeading, pageContext, config), documentTitle = _b.documentTitle, isLandingPage = _b.isLandingPage, pageTitle = _b.pageTitle;
     var pageSectionsResolved = getPageSectionsResolved(pageContext, activeHeading);
     var linksAll = __spreadArray(__spreadArray(__spreadArray([], pageSectionsResolved.map(pageSectionToLinkData), true), headingsResolved.map(headingToLinkData), true), headingsDetachedResolved.map(headingToLinkData), true);
@@ -61,9 +61,6 @@ function resolveHeadingsData(pageContext) {
             });
         }
     }
-    var topNavigationList = headingsResolved
-        .filter(function (heading) { return heading.topNavigation; })
-        .map(function (h) { return ({ title: typeof h.topNavigation === 'string' ? h.topNavigation : h.title, url: h.url }); });
     var pageContextAddendum = {
         isDetachedPage: isDetachedPage,
         navItems: navItems,
@@ -72,9 +69,10 @@ function resolveHeadingsData(pageContext) {
         isLandingPage: isLandingPage,
         pageTitle: pageTitle,
         documentTitle: documentTitle,
-        topNavigationList: topNavigationList,
         // TODO: don't pass to client-side
         columnLayouts: columnLayouts,
+        // TODO: don't pass to client-side
+        activeCategory: activeCategory,
     };
     return pageContextAddendum;
 }
@@ -127,14 +125,21 @@ function getTitles(activeHeading, pageContext, config) {
 function getActiveHeading(headingsResolved, headingsDetachedResolved, pageContext) {
     var _a;
     var activeHeading = null;
+    var activeCategory;
     var urlPathname = pageContext.urlPathname;
     assert(urlPathname);
-    headingsResolved.forEach(function (heading) {
+    for (var _i = 0, headingsResolved_1 = headingsResolved; _i < headingsResolved_1.length; _i++) {
+        var heading = headingsResolved_1[_i];
+        if (heading.level === 1) {
+            activeCategory = heading.title;
+        }
         if (heading.url === urlPathname) {
             activeHeading = heading;
+            assert(activeCategory);
             assert(heading.level === 2, { pageUrl: urlPathname, heading: heading });
+            break;
         }
-    });
+    }
     var isDetachedPage = !activeHeading;
     if (!activeHeading) {
         activeHeading = (_a = headingsDetachedResolved.find(function (_a) {
@@ -152,7 +157,7 @@ function getActiveHeading(headingsResolved, headingsDetachedResolved, pageContex
                 .join('\n'),
         ].join('\n'));
     }
-    return { activeHeading: activeHeading, isDetachedPage: isDetachedPage };
+    return { activeHeading: activeHeading, isDetachedPage: isDetachedPage, activeCategory: activeCategory };
 }
 function getPageSectionsResolved(pageContext, activeHeading) {
     var _a;

package/dist/config/resolvePageContext.d.ts

@@ -17,11 +17,8 @@ declare function resolvePageContext(pageContext: PageContextOriginal): {
     isLandingPage: boolean;
     pageTitle: string | null;
     documentTitle: string;
-    topNavigationList: {
-        title: string;
-        url: string | null | undefined;
-    }[];
     columnLayouts: number[][];
+    activeCategory: string | undefined;
 } & {
     urlPathname: string;
     meta: {
@@ -37,6 +34,5 @@ declare function resolvePageContext(pageContext: PageContextOriginal): {
             indexName: string;
         } | null;
     };
-    topNavigationStyle: import("react").CSSProperties | undefined;
     config: import("../types/Config").Config;
 };

package/dist/config/resolvePageContext.js

@@ -6,7 +6,7 @@ function resolvePageContext(pageContext) {
     var pageContextResolved = {};
     objectAssign(pageContextResolved, resolveHeadingsData(pageContext));
     var config = getConfig();
-    var faviconUrl = config.faviconUrl, algolia = config.algolia, tagline = config.tagline, twitterHandle = config.twitterHandle, bannerUrl = config.bannerUrl, websiteUrl = config.websiteUrl, topNavigationStyle = config.topNavigationStyle, projectName = config.projectInfo.projectName;
+    var faviconUrl = config.faviconUrl, algolia = config.algolia, tagline = config.tagline, twitterHandle = config.twitterHandle, bannerUrl = config.bannerUrl, websiteUrl = config.websiteUrl, projectName = config.projectInfo.projectName;
     objectAssign(pageContextResolved, {
         urlPathname: pageContext.urlPathname, // TODO: remove
         meta: {
@@ -18,7 +18,6 @@ function resolvePageContext(pageContext) {
             tagline: tagline,
             algolia: algolia,
         },
-        topNavigationStyle: topNavigationStyle,
         config: config,
     });
     return pageContextResolved;

package/dist/types/Config.d.ts

@@ -18,7 +18,6 @@ type Config = {
     };
     headings: HeadingDefinition[];
     headingsDetached: HeadingDetachedDefinition[];
-    topNavigationStyle?: React.CSSProperties;
     /** Sets `<meta name="description" content="${tagline}" />` */
     tagline: string;
     websiteUrl: string;

package/dist/types/Heading.d.ts

@@ -7,7 +7,6 @@ type HeadingResolved = {
     level: number;
     title: string;
     titleInNav: string;
-    topNavigation?: true | string;
     linkBreadcrumb: string[];
     sectionTitles?: string[];
     menuModalFullWidth?: true;
@@ -18,7 +17,6 @@ type HeadingDetachedResolved = Omit<HeadingResolved, 'level' | 'linkBreadcrumb'>
 };
 type HeadingDefinitionCommon = {
     title: string;
-    topNavigation?: true | string;
     menuModalFullWidth?: true;
 };
 type HeadingDetachedDefinition = HeadingDefinitionCommon & {

package/docsearch/SearchLink.tsx

@@ -30,7 +30,7 @@ function SearchLink(props: PropsAnchor) {
 function SearchIcon() {
   return (
     <svg
-      style={{ marginRight: 'var(--icon-padding)', lineHeight: 0, width: '1.3em' }}
+      style={{ marginRight: 'var(--icon-text-padding)', lineHeight: 0, width: '1.3em' }}
       className="decolorize-7"
       viewBox="0 0 20 20"
     >

package/package.json

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

package/renderer/getPageElement.tsx

@@ -5,6 +5,7 @@ import type { PageContextResolved } from '../config/resolvePageContext'
 import { PageContextProvider, PageContextProvider2 } from './usePageContext'
 import React from 'react'
 import { DocSearchInstall } from '../docsearch/DocSearchInstall'
+import { PassThrough } from '../utils/PassTrough'
 
 function getPageElement(pageContext: PageContext, pageContextResolved: PageContextResolved) {
   const { Page } = pageContext
@@ -33,7 +34,3 @@ function Wrapper({
     </React.StrictMode>
   )
 }
-
-function PassThrough({ children }: any) {
-  return <>{children}</>
-}

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

package/renderer/onRenderHtml.tsx

@@ -34,6 +34,7 @@ Promise<Awaited<ReturnType<OnRenderHtmlAsync>>> => {
         <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
         ${getOpenGraphTags(pageContext.urlPathname, pageContextResolved.documentTitle, pageContextResolved.meta)}
         <style>${dangerouslySkipEscape(styleMenuModalLayout)}</style>
+        <meta name="docsearch:category" content="${pageContextResolved.activeCategory ?? 'Miscellaneous'}" />
       </head>
       <body>
         <div id="page-view">${dangerouslySkipEscape(pageHtml)}</div>

package/types/Config.ts

@@ -20,8 +20,6 @@ type Config = {
   }
   headings: HeadingDefinition[]
   headingsDetached: HeadingDetachedDefinition[]
-  topNavigationStyle?: React.CSSProperties
-
   /** Sets `<meta name="description" content="${tagline}" />` */
   tagline: string
   websiteUrl: string

package/types/Heading.ts

@@ -8,7 +8,6 @@ type HeadingResolved = {
   level: number
   title: string
   titleInNav: string
-  topNavigation?: true | string
   linkBreadcrumb: string[]
   sectionTitles?: string[]
   menuModalFullWidth?: true
@@ -21,7 +20,6 @@ type HeadingDetachedResolved = Omit<HeadingResolved, 'level' | 'linkBreadcrumb'>
 
 type HeadingDefinitionCommon = {
   title: string
-  topNavigation?: true | string
   menuModalFullWidth?: true
 }
 

package/utils/PassTrough.tsx

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