@brillout/docpress 0.8.5 → 0.8.7

package/config/resolveHeadingsData.ts

@@ -99,6 +99,7 @@ function headingToNavItem(heading: HeadingResolved | HeadingDetachedResolved): N
     title: heading.title,
     titleInNav: heading.titleInNav,
     menuModalFullWidth: heading.menuModalFullWidth,
+    color: heading.color,
   }
 }
 function headingToLinkData(heading: HeadingResolved | HeadingDetachedResolved): LinkData {
@@ -154,16 +155,18 @@ function getActiveHeading(
   pageContext: { urlPathname: string; exports: Exports },
 ) {
   let activeHeading: HeadingResolved | HeadingDetachedResolved | null = null
-  let activeCategory: string | undefined
+  let activeCategory = 'Miscellaneous'
+  let headingCategory: string | undefined
   const { urlPathname } = pageContext
   assert(urlPathname)
   for (const heading of headingsResolved) {
     if (heading.level === 1) {
-      activeCategory = heading.title
+      headingCategory = heading.title
     }
     if (heading.url === urlPathname) {
       activeHeading = heading
-      assert(activeCategory)
+      assert(headingCategory)
+      activeCategory = headingCategory
       assert(heading.level === 2, { pageUrl: urlPathname, heading })
       break
     }
@@ -185,6 +188,7 @@ function getActiveHeading(
       ].join('\n'),
     )
   }
+  if (activeHeading.category) activeCategory = activeHeading.category
   return { activeHeading, isDetachedPage, activeCategory }
 }
 

package/dist/config/resolveHeadingsData.d.ts

@@ -11,5 +11,5 @@ declare function resolveHeadingsData(pageContext: PageContextOriginal): {
     pageTitle: string | null;
     documentTitle: string;
     columnLayouts: number[][];
-    activeCategory: string | undefined;
+    activeCategory: string;
 };

package/dist/config/resolveHeadingsData.js

@@ -83,6 +83,7 @@ function headingToNavItem(heading) {
         title: heading.title,
         titleInNav: heading.titleInNav,
         menuModalFullWidth: heading.menuModalFullWidth,
+        color: heading.color,
     };
 }
 function headingToLinkData(heading) {
@@ -125,17 +126,19 @@ function getTitles(activeHeading, pageContext, config) {
 function getActiveHeading(headingsResolved, headingsDetachedResolved, pageContext) {
     var _a;
     var activeHeading = null;
-    var activeCategory;
+    var activeCategory = 'Miscellaneous';
+    var headingCategory;
     var urlPathname = pageContext.urlPathname;
     assert(urlPathname);
     for (var _i = 0, headingsResolved_1 = headingsResolved; _i < headingsResolved_1.length; _i++) {
         var heading = headingsResolved_1[_i];
         if (heading.level === 1) {
-            activeCategory = heading.title;
+            headingCategory = heading.title;
         }
         if (heading.url === urlPathname) {
             activeHeading = heading;
-            assert(activeCategory);
+            assert(headingCategory);
+            activeCategory = headingCategory;
             assert(heading.level === 2, { pageUrl: urlPathname, heading: heading });
             break;
         }
@@ -157,6 +160,8 @@ function getActiveHeading(headingsResolved, headingsDetachedResolved, pageContex
                 .join('\n'),
         ].join('\n'));
     }
+    if (activeHeading.category)
+        activeCategory = activeHeading.category;
     return { activeHeading: activeHeading, isDetachedPage: isDetachedPage, activeCategory: activeCategory };
 }
 function getPageSectionsResolved(pageContext, activeHeading) {

package/dist/config/resolvePageContext.d.ts

@@ -18,7 +18,7 @@ declare function resolvePageContext(pageContext: PageContextOriginal): {
     pageTitle: string | null;
     documentTitle: string;
     columnLayouts: number[][];
-    activeCategory: string | undefined;
+    activeCategory: string;
 } & {
     urlPathname: string;
     meta: {

package/dist/navigation/Navigation.d.ts

@@ -4,9 +4,11 @@ export type { NavItemAll };
 import React from 'react';
 import './Navigation.css';
 import '@docsearch/css';
+import '../global.d.ts';
 type NavItem = {
     level: number;
     url?: string | null;
+    color?: string;
     title: string;
     titleInNav: string;
     menuModalFullWidth?: true;

package/dist/navigation/Navigation.js

@@ -17,6 +17,7 @@ import './Navigation.css';
 import { parseTitle } from '../parseTitle';
 import { usePageContext } from '../renderer/usePageContext';
 import '@docsearch/css';
+import '../global.d.ts';
 function NavigationContent(props) {
     var pageContext = usePageContext();
     var navItemsWithComputed = getNavItemsWithComputed(props.navItems, pageContext.urlPathname);
@@ -30,6 +31,7 @@ function NavigationContent(props) {
         assert(!props.showOnlyRelevant);
         var navItemsColumnLayout = groupByColumnLayout(navItemsWithComputed);
         var paddingBottom_1 = 40;
+        var categoryBorderParentPosition_1 = 'relative';
         navContent = (React.createElement(React.Fragment, null, navItemsColumnLayout.map(function (_a, i) {
             var navItemsColumnEntries = _a.navItemsColumnEntries, isFullWidth = _a.isFullWidth;
             return (React.createElement("div", { key: i, style: {
@@ -40,19 +42,33 @@ function NavigationContent(props) {
                         flexGrow: 1,
                         columnGap: 20,
                         paddingBottom: isFullWidth ? paddingBottom_1 : undefined,
-                    } }, navItemsColumnEntries.map(function (navItemColumnEntry, j) { return (React.createElement("div", { key: j, className: "column-layout-entry", style: {
-                        breakInside: 'avoid',
-                        paddingBottom: !isFullWidth ? paddingBottom_1 : undefined,
-                        width: '100%',
+                        position: categoryBorderParentPosition_1,
                     } },
-                    React.createElement(NavItemComponent, { navItem: navItemColumnEntry }),
-                    navItemColumnEntry.navItemChilds.map(function (navItem, k) { return (React.createElement(NavItemComponent, { navItem: navItem, key: k })); }))); }))));
+                    React.createElement(CategoryBorder, { navItemLevel1: !isFullWidth ? undefined : navItemsColumnEntries[0], paddingBottom: paddingBottom_1 }),
+                    navItemsColumnEntries.map(function (navItemColumnEntry, j) { return (React.createElement("div", { key: j, className: "column-layout-entry", style: {
+                            breakInside: 'avoid',
+                            paddingBottom: !isFullWidth ? paddingBottom_1 : undefined,
+                            width: '100%',
+                            position: categoryBorderParentPosition_1,
+                        } },
+                        React.createElement(CategoryBorder, { navItemLevel1: isFullWidth ? undefined : navItemColumnEntry, paddingBottom: paddingBottom_1 }),
+                        React.createElement(NavItemComponent, { navItem: navItemColumnEntry }),
+                        navItemColumnEntry.navItemChilds.map(function (navItem, k) { return (React.createElement(NavItemComponent, { navItem: navItem, key: k })); }))); }))));
         })));
     }
     return (React.createElement("div", { className: "navigation-content", style: { marginTop: 10 } }, navContent));
 }
+function CategoryBorder(_a) {
+    var navItemLevel1 = _a.navItemLevel1, paddingBottom = _a.paddingBottom;
+    return !navItemLevel1 ? null : (React.createElement("div", { className: 'category-border' + ((navItemLevel1.isRelevant && ' is-relevant') || ''), style: {
+            width: 6,
+            background: navItemLevel1.color,
+            height: "calc(100% - ".concat(paddingBottom, "px - 19px)"),
+        } }));
+}
 function NavItemComponent(_a) {
     var _b;
+    var _c;
     var navItem = _a.navItem;
     assert([1, 2, 3, 4].includes(navItem.level), navItem);
     var titleJsx = parseTitle(navItem.title);
@@ -71,7 +87,7 @@ function NavItemComponent(_a) {
         ].join(' '));
     }
     var props = {
-        href: (_b = navItem.url) !== null && _b !== void 0 ? _b : undefined,
+        href: (_c = navItem.url) !== null && _c !== void 0 ? _c : undefined,
         children: titleInNavJsx,
         className: [
             'nav-item',
@@ -79,10 +95,16 @@ function NavItemComponent(_a) {
             navItem.url && navItem.isActive && ' is-active',
             navItem.isFirstOfItsKind && 'nav-item-first-of-its-kind',
             navItem.isLastOfItsKind && 'nav-item-last-of-its-kind',
+            navItem.isRelevant && 'is-relevant',
         ]
             .filter(Boolean)
             .join(' '),
     };
+    if (navItem.level === 1) {
+        props.style = (_b = {},
+            _b['--category-color'] = navItem.color,
+            _b);
+    }
     if (navItem.level === 2 || navItem.level === 3) {
         return React.createElement("a", __assign({}, props));
     }

package/dist/types/Heading.d.ts

@@ -10,6 +10,8 @@ type HeadingResolved = {
     linkBreadcrumb: string[];
     sectionTitles?: string[];
     menuModalFullWidth?: true;
+    category?: string;
+    color?: string;
 } & Tmp;
 type HeadingDetachedResolved = Omit<HeadingResolved, 'level' | 'linkBreadcrumb'> & {
     level: 2;
@@ -34,6 +36,7 @@ type IsCategory = {
 };
 type HeadingDefinitionLevel = ({
     level: 1;
+    color: string;
 } & IsCategory) | ({
     level: 4;
 } & IsCategory) | {

package/navigation/Navigation.css

@@ -4,6 +4,9 @@
   overflow-x: hidden;
   --padding-left-global: 9px;
 }
+#menu-modal .nav-item {
+  --padding-left-global: 15px;
+}
 .nav-item code {
   font-size: 0.9em;
 }
@@ -19,7 +22,6 @@
   letter-spacing: 0.15ch;
   padding-left: var(--padding-left-global);
   padding-right: 4px;
-  text-decoration: none;
 }
 .nav-item-level-1 {
   font-size: 19px;
@@ -30,10 +32,20 @@
   padding: 12px 0;
   padding-left: calc(var(--padding-left-global) - 2px);
   padding-right: 4px;
-  text-decoration: none;
+  text-decoration: underline;
+  text-underline-offset: .2em;
+  text-decoration-thickness: .18em;
+  text-decoration-color: var(--category-color);
+  transition: text-decoration-color 0.5s ease-in-out;
+}
+#menu-modal .nav-item-level-1 {
+  text-decoration-color: color-mix(in srgb, var(--category-color) 15%, transparent);
+}
+:hover > .nav-item-level-1,
+.nav-item-level-1.is-relevant {
+  text-decoration-color: var(--category-color) !important;
 }
 .nav-item-level-2 {
-  text-decoration: none;
   font-size: 14.4px;
   font-weight: 400;
   letter-spacing: 0.15ch;
@@ -49,11 +61,10 @@
   font-weight: 400;
   letter-spacing: 0.15ch;
   color: var(--color-text);
-  text-decoration: none;
   --padding: 5px;
 
   padding: var(--padding) 0;
-  padding-left: calc(var(--padding-left-global) + 6px);
+  padding-left: calc(var(--padding-left-global) + 5px);
 }
 #menu-modal .nav-item-level-3 {
   border-right: 4px solid #eee;
@@ -94,3 +105,15 @@
   z-index: 1;
   content: "";
 }
+
+.category-border {
+  position: absolute;
+  top: 0;
+  opacity: 0.15;
+  transform: translate(3px, 16px);
+  transition: opacity 0.5s ease-in-out;
+}
+:hover > .category-border,
+.category-border.is-relevant{
+  opacity: 1;
+}

package/navigation/Navigation.tsx

@@ -10,10 +10,12 @@ import './Navigation.css'
 import { parseTitle } from '../parseTitle'
 import { usePageContext } from '../renderer/usePageContext'
 import '@docsearch/css'
+import '../global.d.ts'
 
 type NavItem = {
   level: number
   url?: string | null
+  color?: string
   title: string
   titleInNav: string
   menuModalFullWidth?: true
@@ -38,6 +40,7 @@ function NavigationContent(props: {
     assert(!props.showOnlyRelevant)
     const navItemsColumnLayout = groupByColumnLayout(navItemsWithComputed)
     const paddingBottom = 40
+    const categoryBorderParentPosition = 'relative'
     navContent = (
       <>
         {navItemsColumnLayout.map(({ navItemsColumnEntries, isFullWidth }, i) => (
@@ -54,8 +57,13 @@ function NavigationContent(props: {
                 flexGrow: 1,
                 columnGap: 20,
                 paddingBottom: isFullWidth ? paddingBottom : undefined,
+                position: categoryBorderParentPosition,
               }}
             >
+              <CategoryBorder
+                navItemLevel1={!isFullWidth ? undefined : navItemsColumnEntries[0]!}
+                paddingBottom={paddingBottom}
+              />
               {navItemsColumnEntries.map((navItemColumnEntry, j) => (
                 <div
                   key={j}
@@ -64,8 +72,13 @@ function NavigationContent(props: {
                     breakInside: 'avoid',
                     paddingBottom: !isFullWidth ? paddingBottom : undefined,
                     width: '100%',
+                    position: categoryBorderParentPosition,
                   }}
                 >
+                  <CategoryBorder
+                    navItemLevel1={isFullWidth ? undefined : navItemColumnEntry!}
+                    paddingBottom={paddingBottom}
+                  />
                   <NavItemComponent navItem={navItemColumnEntry} />
                   {navItemColumnEntry.navItemChilds.map((navItem, k) => (
                     <NavItemComponent navItem={navItem} key={k} />
@@ -85,6 +98,18 @@ function NavigationContent(props: {
     </div>
   )
 }
+function CategoryBorder({ navItemLevel1, paddingBottom }: { navItemLevel1?: NavItemComputed; paddingBottom: number }) {
+  return !navItemLevel1 ? null : (
+    <div
+      className={'category-border' + ((navItemLevel1.isRelevant && ' is-relevant') || '')}
+      style={{
+        width: 6,
+        background: navItemLevel1.color!,
+        height: `calc(100% - ${paddingBottom}px - 19px)`,
+      }}
+    />
+  )
+}
 
 function NavItemComponent({
   navItem,
@@ -121,10 +146,16 @@ function NavItemComponent({
       navItem.url && navItem.isActive && ' is-active',
       navItem.isFirstOfItsKind && 'nav-item-first-of-its-kind',
       navItem.isLastOfItsKind && 'nav-item-last-of-its-kind',
+      navItem.isRelevant && 'is-relevant',
     ]
       .filter(Boolean)
       .join(' '),
   }
+  if (navItem.level === 1) {
+    props.style = {
+      ['--category-color']: navItem.color!,
+    }
+  }
   type PropsAnchor = React.HTMLProps<HTMLAnchorElement>
   type PropsSpan = React.HTMLProps<HTMLSpanElement>
 

package/package.json

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

package/renderer/onRenderHtml.tsx

@@ -34,7 +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'}" />
+        <meta name="docsearch:category" content="${pageContextResolved.activeCategory}" />
       </head>
       <body>
         <div id="page-view">${dangerouslySkipEscape(pageHtml)}</div>

package/types/Heading.ts

@@ -11,6 +11,8 @@ type HeadingResolved = {
   linkBreadcrumb: string[]
   sectionTitles?: string[]
   menuModalFullWidth?: true
+  category?: string
+  color?: string
 } & Tmp
 
 type HeadingDetachedResolved = Omit<HeadingResolved, 'level' | 'linkBreadcrumb'> & {
@@ -39,7 +41,7 @@ type IsCategory = {
   titleInNav?: undefined
 }
 type HeadingDefinitionLevel =
-  | ({ level: 1 } & IsCategory)
+  | ({ level: 1; color: string } & IsCategory)
   | ({ level: 4 } & IsCategory)
   | {
       level: 2