@brillout/docpress 0.8.4 → 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,7 +5,7 @@ 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 { toggleMenuModal } from './MenuModal'
 import { MenuModal } from './MenuModal'
@@ -13,6 +13,7 @@ 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
@@ -54,7 +55,7 @@ function Layout({ children }: { children: React.ReactNode }) {
       style={{
         ['--bg-color']: '#f5f5f7',
         ['--block-margin']: `${blockMargin}px`,
-        ['--icon-padding']: '8px',
+        ['--icon-text-padding']: '8px',
       }}
     >
       <MenuModal />
@@ -195,16 +196,16 @@ function PageContent({ children }: { children: React.ReactNode }) {
 function NavMobile() {
   return (
     <div id="nav-mobile">
-      <NavigationHeader headerHeight={70} headerPadding={12} 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"
@@ -217,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 }} />
@@ -253,7 +237,6 @@ function NavLeft() {
   const pageContext = usePageContext()
   const { navItems, navItemsAll, isDetachedPage } = pageContext
   const headerHeight = 60
-  const headerPadding = 10
   return (
     <>
       <div
@@ -270,7 +253,7 @@ function NavLeft() {
             top: 0,
           }}
         >
-          <NavigationHeader {...{ headerHeight, headerPadding }} />
+          <NavigationHeader headerHeight={headerHeight} iconSize={39} paddingLeft={6} />
           <div
             style={{
               backgroundColor: 'var(--bg-color)',
@@ -309,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
   /*/
@@ -323,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={{
@@ -350,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,
@@ -372,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}
@@ -425,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/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/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.4",
+  "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/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}</>
+}