@brillout/docpress 0.8.6 → 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 {

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) {

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

@@ -11,6 +11,7 @@ type HeadingResolved = {
     sectionTitles?: string[];
     menuModalFullWidth?: true;
     category?: string;
+    color?: string;
 } & Tmp;
 type HeadingDetachedResolved = Omit<HeadingResolved, 'level' | 'linkBreadcrumb'> & {
     level: 2;
@@ -35,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.6",
+  "version": "0.8.7",
   "type": "module",
   "dependencies": {
     "@brillout/picocolors": "^1.0.10",

package/types/Heading.ts

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