@brillout/docpress 0.8.6 → 0.8.8

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);
@@ -36,23 +37,35 @@ function NavigationContent(props) {
                     display: 'flex',
                     justifyContent: 'center',
                 } },
-                React.createElement("div", { className: "column-layout-".concat(i), style: {
+                React.createElement("div", { className: "column-layout-".concat(i) + (!isFullWidth ? '' : ' nav-category'), style: {
                         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%',
                     } },
-                    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' + (isFullWidth ? '' : ' nav-category'), style: {
+                            breakInside: 'avoid',
+                            paddingBottom: !isFullWidth ? paddingBottom_1 : undefined,
+                            width: '100%',
+                        } },
+                        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", style: {
+            width: 6,
+            background: navItemLevel1.color,
+            height: "calc(100% - ".concat(paddingBottom, "px - 13px)"),
+        } }));
+}
 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 +84,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',
@@ -83,6 +96,11 @@ function NavItemComponent(_a) {
             .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,12 @@
   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);
 }
 .nav-item-level-2 {
-  text-decoration: none;
   font-size: 14.4px;
   font-weight: 400;
   letter-spacing: 0.15ch;
@@ -49,11 +53,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 +97,12 @@
   z-index: 1;
   content: "";
 }
+
+.nav-category {
+  position: relative
+}
+.category-border {
+  position: absolute;
+  top: 0;
+  transform: translate(0, 13px);
+}

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
@@ -49,23 +51,31 @@ function NavigationContent(props: {
             }}
           >
             <div
-              className={`column-layout-${i}`}
+              className={`column-layout-${i}` + (!isFullWidth ? '' : ' nav-category')}
               style={{
                 flexGrow: 1,
                 columnGap: 20,
                 paddingBottom: isFullWidth ? paddingBottom : undefined,
               }}
             >
+              <CategoryBorder
+                navItemLevel1={!isFullWidth ? undefined : navItemsColumnEntries[0]!}
+                paddingBottom={paddingBottom}
+              />
               {navItemsColumnEntries.map((navItemColumnEntry, j) => (
                 <div
                   key={j}
-                  className="column-layout-entry"
+                  className={'column-layout-entry' + (isFullWidth ? '' : ' nav-category')}
                   style={{
                     breakInside: 'avoid',
                     paddingBottom: !isFullWidth ? paddingBottom : undefined,
                     width: '100%',
                   }}
                 >
+                  <CategoryBorder
+                    navItemLevel1={isFullWidth ? undefined : navItemColumnEntry!}
+                    paddingBottom={paddingBottom}
+                  />
                   <NavItemComponent navItem={navItemColumnEntry} />
                   {navItemColumnEntry.navItemChilds.map((navItem, k) => (
                     <NavItemComponent navItem={navItem} key={k} />
@@ -85,6 +95,18 @@ function NavigationContent(props: {
     </div>
   )
 }
+function CategoryBorder({ navItemLevel1, paddingBottom }: { navItemLevel1?: NavItemComputed; paddingBottom: number }) {
+  return !navItemLevel1 ? null : (
+    <div
+      className="category-border"
+      style={{
+        width: 6,
+        background: navItemLevel1.color!,
+        height: `calc(100% - ${paddingBottom}px - 13px)`,
+      }}
+    />
+  )
+}
 
 function NavItemComponent({
   navItem,
@@ -125,6 +147,11 @@ function NavItemComponent({
       .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.8",
   "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