umberto 6.0.0 → 6.1.0

package/themes/umberto/layout/umberto/_api-docs/_mixin/_type.pug

@@ -0,0 +1,180 @@
+include ./_link-or-text.pug
+
+mixin type( types, isOptional = false )
+	each nameOrObject, index in types
+		+renderType( nameOrObject )
+
+		if index < types.length - 1
+			| !{ ' | ' }
+
+	if ( isOptional && !types.includes( 'undefined' ) )
+		| !{ ' | ' }
+		+renderType( 'undefined' )
+
+//- TODO: Description.
+//-
+//- @param {String|*} inlineObjectOrType
+mixin renderStringValue( inlineObjectOrType )
+	//- An inline object specified as string.
+	if ( typeof inlineObjectOrType === 'string' && inlineObjectOrType.startsWith( '{' ) )
+		| !{ inlineObjectOrType }
+	else
+		+linkOrText( inlineObjectOrType, {
+			aClass: 'collapsing-list__type'
+		} )
+
+//- TODO: Description.
+//-
+//- @param {Object} complexType
+//- @param {'function'|'predicate'|'operator'|'generic'} complexType.type
+//- @param {Array.<*>} [complexType.params]
+//- @param {String} [complexType.name]
+//- @param {Array.<*>} [complexType.instances]
+//- @param {String} [complexType.operator]
+//- @param {Array.<*>} [complexType.values]
+//- @param {String} [complexType.name]
+//- @param {Array.<*>} [complexType.typeParameters]
+mixin renderComplexStructure( complexType )
+	//- Inline callback.
+	if ( complexType.type === 'function' && complexType.params && complexType.returns )
+		+renderInlineFunction( complexType )
+
+	//- Predicate.
+	//-
+	//- The goal is to display whether an object is an instance of an array of modules.
+	//- E.g.: `this is "Model"`
+	if ( complexType.type === 'predicate' && complexType.name && complexType.instances )
+		i= complexType.name
+		| !{ ' is ' }
+		+renderUnion( complexType.instances )
+
+	//- Type operator.
+	//-
+	//- The goal is to display the type operator keyword before rendering a type.
+	if ( complexType.type === 'operator' && complexType.operator && complexType.values )
+		i= complexType.operator
+		| !{ ' ' }
+		+renderType( complexType.values )
+
+	//- An object with type arguments.
+	if ( complexType.type === 'generic' && complexType.name && ( complexType.typeParameters || complexType.typeParameter ) )
+		+renderGenericType( complexType )
+
+
+//- Renders a structure for an union, an array or a single type specified as a string.
+//-
+//-	* Union: Foo | Bar | Baz
+//-	* Array: Array<Foo | Bar | Baz>
+//-	* String: Foo
+//-
+//- All types are linkable if they point to an existing JSDoc doclet.
+//-
+//- @param {Set|Array|String} type
+mixin renderType( type )
+	//- Because of `typeof null === 'object'`...
+	if ( type )
+		//- Backward compatibility, when passing a `module:...` string.
+		if ( typeof type === 'string' )
+			+renderStringValue( type )
+		//- `intrinsic` type.
+		else if ( type.elementType )
+			| #{ type.elementType.name }
+		else
+			//- Complex structures introduced when generating API pages from TypeScript.
+			if ( type instanceof Set )
+				+renderUnion( [ ...type ] )
+			else if ( Array.isArray( type ) )
+				| !{ 'Array&lt;' }
+				+renderUnion( type )
+				| !{ '&gt;' }
+			else if ( typeof type === 'object' )
+				+renderComplexStructure( type )
+
+//- Renders an union structure, e.g., `Foo | Bar | Baz`.
+//-
+//- All types are linkable if they point to an existing JSDoc doclet.
+//-
+//- @param {Array.<String>} type
+mixin renderUnion( iterable )
+	each item, index in iterable
+		+renderType( item )
+		if index < iterable.length - 1
+			| !{ ' | ' }
+
+//- Draws an inline callback structure.
+//-
+//- E.g.: `( ArgumentFoo | ArgumentBar, AnotherArgument ) => ReturnType`
+//- If specified names are modules, they should point to the proper API page.
+//-
+//- @param {Object} callback
+//- @param {String} callback.type
+//- @param {Array} callback.params
+//- @param {Object} callback.returns
+//- @param {Boolean} callback.isClass
+mixin renderInlineFunction( callback )
+	if ( callback.isClass )
+		i !{ 'new' }
+		| !{ ' ' }
+
+	//- (1) Start with an opening parenthesis.
+	//- It prints `( ` or `(` depending on required arguments by a callback.
+	if ( callback.params.length )
+		| (!{ ' ' }
+	else
+		| (
+
+	//- (2) Arguments parsing. They are seperated by coma (`, `).
+	each paramObject, paramIndex in callback.params
+		//- (3) Process a single argument.
+		+renderType( paramObject )
+		if paramIndex < callback.params.length - 1
+			| !{ ', ' }
+
+	//- (4) Close the parenthesis. Define the returned type.
+	//- It prints ` ) => ` or `) => ` depending on required arguments by the callback.
+	if ( callback.params.length )
+		| !{ ' ' }) =&gt; !{ ' ' }
+	else
+		| ) =&gt; !{ ' ' }
+
+	//- Wraps the returned type in brackets to avoid confusions if a type is returned by the callback,
+	//- or it is a new type (outside the callback). See #1063.
+	if ( callback.returns instanceof Set )
+		| (!{ ' ' }
+
+	//- (5) Process the returned type that can be an union, an array of a type.
+	+renderType( callback.returns )
+
+	//- See #1063.
+	if ( callback.returns instanceof Set )
+		| !{ ' ' })
+
+//- TODO: Description
+//-
+//- @param {Object} generic
+//- @param {'generic'} generic.type
+//- @param {String} generic.name
+//- @param {Set.<String>} generic.names
+//- @param {Array.<*>} [generic.typeParameters]
+//- @param {*} [generic.typeParameter]
+mixin renderGenericType( generic )
+	+renderType( generic.name )
+
+	if ( generic.typeParameters )
+		| !{ '&lt;' }
+		each type, typeIndex in generic.typeParameters
+			if ( typeof type === 'string' )
+				+renderStringValue( type )
+			else
+				//- Nested generics.
+				+renderGenericType( type )
+
+			if typeIndex < generic.typeParameters.length - 1
+				| !{ ', ' }
+		| !{ '&gt;' }
+
+	if ( generic.typeParameter )
+		| !{ '&lsqb; ' }
+		+renderType( generic.typeParameter )
+		| !{ ' &rsqb;' }
+

package/themes/umberto/layout/umberto/_api-docs/_mixin/type-parameter.pug

@@ -0,0 +1,18 @@
+include ./_type
+
+mixin typeParameter( type )
+	dt
+		code
+			span !{ type.name }
+
+			//- We mark most TypeScript types as `object`, as their structure is complex.
+			//- Hence, it does not really make sense to show that a type extends an unknown `object`.
+			if ( type.value && type.value[ 0 ] !== 'object' )
+				| !{' : '}
+				if ( type.isExtending )
+					i !{ 'extends ' }
+				+type( type.value )
+
+	if ( type.description )
+		dd
+			| !{ type.description.content }

package/themes/umberto/layout/umberto/_api-docs/_partial/api-info-box.pug

@@ -0,0 +1,30 @@
+include ../_mixin/_hierarchy-list
+include ../_mixin/_sidebox-list
+
+- const hasAugments = data.augments && data.augments.length > 1;
+- const hasImplements = isNonEmptyArray( data.implements );
+- const hasImplementedBy = isNonEmptyArray( data.implementedBy );
+- const hasMixes = isNonEmptyArray( data.mixes );
+- const hasMixedBy = isNonEmptyArray( data.mixedBy );
+- const hasSubclasses = isNonEmptyArray( data.subclasses );
+
+if ( hasAugments || hasImplements || hasImplementedBy || hasMixes || hasMixedBy || hasSubclasses )
+	nav( class="api-secondary-navigation api-info-box hidden-loading" )
+		dl
+			if ( hasAugments )
+				+hierarchyList( data.augments )
+
+			if ( hasImplements )
+				+sideboxList( data.implements, 'Implements' )
+
+			if ( hasImplementedBy )
+				+sideboxList( data.implementedBy, 'Implemented By' )
+
+			if ( hasMixes )
+				+sideboxList( data.mixes, 'Mixes' )
+
+			if ( hasMixedBy )
+				+sideboxList( data.mixedBy, 'Mixed By' )
+
+			if ( hasSubclasses )
+				+sideboxList( data.subclasses, 'Subclasses' )

package/themes/umberto/layout/umberto/_api-docs/_partial/api-subheader.pug

@@ -0,0 +1,22 @@
+include ../_mixin/_badge
+
+div(class="api-subheader hidden-loading")
+	div.api-subheader__badges
+		span.badge #{ data.kind }
+		if isNonEmptyArray( data.badges )
+			each badge in data.badges
+				+badge( badge )
+		if isNonEmptyArray( data.types )
+			code
+				+type( data.types )
+	nav.api-subheader__navigation
+		if ( isNonEmptyArray( data.configOptions ) || isNonEmptyArray( data.properties ) || isNonEmptyArray( data.methods ) || isNonEmptyArray( data.events ) )
+			ul
+				if ( isNonEmptyArray( data.configOptions ) )
+					li.api-subheader__navigation-category.api-subheader__navigation-dropdown--hidden( data-type="configs" ) Config options
+				if ( isNonEmptyArray( data.properties ) )
+					li.api-subheader__navigation-category.api-subheader__navigation-dropdown--hidden( data-type="properties" ) Properties
+				if ( isNonEmptyArray( data.methods ) )
+					li.api-subheader__navigation-category.api-subheader__navigation-dropdown--hidden( data-type="methods" ) Methods
+				if ( isNonEmptyArray( data.events ) )
+					li.api-subheader__navigation-category.api-subheader__navigation-dropdown--hidden( data-type="events" ) Events

package/themes/umberto/layout/umberto/_api-docs/_partial/classes.pug

@@ -0,0 +1,7 @@
+include ../_mixin/_class-item
+
+if isNonEmptyArray( data.classes )
+	h2( id="classes" class="hidden-loading" ) Classes
+	ul( class="collapsing-list collapsing-list--filtered hidden-loading" )
+		each c in data.classes
+			+classItem( c )

package/themes/umberto/layout/umberto/_api-docs/_partial/config-options.pug

@@ -0,0 +1,7 @@
+include ../_mixin/_property
+
+if isNonEmptyArray( data.configOptions )
+	h2( id="config-options" class="hidden-loading" ) Config options
+	ul( class="collapsing-list collapsing-list--filtered hidden-loading" data-type="configs" )
+		each c in data.configOptions
+			+property( c )

package/themes/umberto/layout/umberto/_api-docs/_partial/constants.pug

@@ -0,0 +1,7 @@
+include ../_mixin/_property
+
+if isNonEmptyArray( data.constants )
+	h2( id="constants" class="hidden-loading" ) Constants
+	ul( class="collapsing-list collapsing-list--filtered hidden-loading" )
+		each m in data.constants
+			+property( m )

package/themes/umberto/layout/umberto/_api-docs/_partial/description.pug

@@ -0,0 +1,9 @@
+include ../_mixin/_api-see-source.pug
+
+if ( data.description )
+	div( class="main-description__outer hidden-loading" )
+
+			+seeSource( data )
+
+			div( class="main-description")
+				| !{ data.description.content }

package/themes/umberto/layout/umberto/_api-docs/_partial/events.pug

@@ -0,0 +1,7 @@
+include ../_mixin/_method
+
+if isNonEmptyArray( data.events )
+	h2( id="events" class="hidden-loading" ) Events
+	ul( class="collapsing-list collapsing-list--filtered hidden-loading" data-type="events" )
+		each e in data.events
+			+method( e )

package/themes/umberto/layout/umberto/_api-docs/_partial/filter.pug

@@ -0,0 +1,40 @@
+div( class="notice notice__filter api-props-filter hidden-loading" )
+	div( class="api-props-filter__inner" )
+		h4 Filtering
+		ul
+			li
+				input( type="checkbox" id="f1" value="public" checked )
+				label( for="f1" )
+					span( class="badge badge--gray" ) Public
+			li
+				input( type="checkbox" id="f4" value="inherited" checked )
+				label( for="f4" )
+					span( class="badge badge--gray" ) Inherited
+
+			//- Typedoc does not support the `@mixin` concept as it is implemented in Umberto.
+			//- See: #1060.
+			if ( projectLocals.apiType !== 'typedoc' )
+				li
+					input( type="checkbox" id="f6" value="mixed" checked )
+					label( for="f6" )
+						span( class="badge badge--gray" ) Mixed
+
+			//- Typedoc supports the `@internal` annotation. See: #1057.
+			if ( projectLocals.apiType === 'typedoc' )
+				li
+					input( type="checkbox" id="f7" value="internal" checked )
+					label( for="f7" )
+						span( class="badge badge--orange" ) Internal
+
+			li
+				input( type="checkbox" id="f2" value="protected" )
+				label( for="f2" )
+					span( class="badge badge--orange" ) Protected
+			li
+				input( type="checkbox" id="f3" value="private" )
+				label( for="f3" )
+					span( class="badge badge--red" ) Private
+			li
+				input( type="checkbox" id="f5" value="deprecated" )
+				label( for="f5" )
+					span( class="badge badge--red" ) Deprecated

package/themes/umberto/layout/umberto/_api-docs/_partial/functions.pug

@@ -0,0 +1,7 @@
+include ../_mixin/_method
+
+if isNonEmptyArray( data.functions )
+	h2( id="functions" class="hidden-loading" ) Functions
+	ul( class="collapsing-list collapsing-list--filtered hidden-loading" data-type="functions" )
+		each m in data.functions
+			+method( m )

package/themes/umberto/layout/umberto/_api-docs/_partial/interfaces.pug

@@ -0,0 +1,7 @@
+include ../_mixin/_class-item
+
+if isNonEmptyArray( data.interfaces )
+	h2( id="interfaces" class="hidden-loading" ) Interfaces
+	ul( class="collapsing-list collapsing-list--filtered hidden-loading" )
+		each i in data.interfaces
+			+classItem( i )

package/themes/umberto/layout/umberto/_api-docs/_partial/loading-spinner.pug

@@ -0,0 +1,2 @@
+div(class="loading")
+	div(class="loading-spinner")

package/themes/umberto/layout/umberto/_api-docs/_partial/methods.pug

@@ -0,0 +1,19 @@
+include ../_mixin/_method
+
+if isNonEmptyArray( data.methods )
+	h2( id="methods" class="hidden-loading" ) Methods
+	if isNonEmptyArray( data.staticMethods)
+		if isNonEmptyArray( data.instanceMethods)
+			ul( class="collapsing-list collapsing-list--filtered hidden-loading" data-type="methods" )
+				each m in data.instanceMethods
+					+method( m )
+
+		h4( class="hidden-loading" ) Static methods
+		ul( class="collapsing-list collapsing-list--filtered hidden-loading" data-type="methods" )
+			each m in data.staticMethods
+				+method( m )
+
+	else
+		ul( class="collapsing-list collapsing-list--filtered hidden-loading" data-type="methods" )
+			each m in data.methods
+				+method( m )

package/themes/umberto/layout/umberto/_api-docs/_partial/namespaces.pug

@@ -0,0 +1,7 @@
+include ../_mixin/_class-item
+
+if isNonEmptyArray( data.namespaces )
+	h2( id="namespaces" class="hidden-loading" ) Namespaces
+	ul( class="collapsing-list collapsing-list--filtered hidden-loading" )
+		each i in data.namespaces
+			+classItem( i )

package/themes/umberto/layout/umberto/_api-docs/_partial/navtree.pug

@@ -0,0 +1,13 @@
+include ../_mixin/_api-tree-item.pug
+
+.side-navigation
+	.side-navigation__wrapper
+		nav.side-navigation__inner.side-navigation__inner--api
+			if projectLocals && projectLocals.apiTree
+				ul( class="tree api-tree" )
+						each node in projectLocals.apiTree.getTree().getChildren()
+							+treeItem( node )
+				div.api-tree__filter
+					p
+						input( type="checkbox" id="p1" value="public" )
+						label( for="p1" ) Show private items

package/themes/umberto/layout/umberto/_api-docs/_partial/properties.pug

@@ -0,0 +1,19 @@
+include ../_mixin/_property
+
+if isNonEmptyArray( data.properties )
+	h2( id="properties" class="hidden-loading" ) Properties
+	if isNonEmptyArray( data.staticProperties )
+		if isNonEmptyArray( data.instanceProperties )
+			ul( class="collapsing-list collapsing-list--filtered hidden-loading" data-type="properties" )
+				each p in data.instanceProperties
+					+property( p )
+
+		h4( class="hidden-loading" ) Static properties
+		ul( class="collapsing-list collapsing-list--filtered hidden-loading" data-type="properties" )
+			each p in data.staticProperties
+				+property( p )
+
+	else
+		ul( class="collapsing-list collapsing-list--filtered hidden-loading" data-type="properties" )
+			each p in data.properties
+				+property( p )

package/themes/umberto/layout/umberto/_api-docs/_partial/type-parameters.pug

@@ -0,0 +1,26 @@
+include ../_mixin/_type
+
+if isNonEmptyArray( data.typeParameters )
+	h2( id="type-parameters" class="hidden-loading" ) Type parameters
+
+	ul( class="collapsing-list hidden-loading" )
+		each type in data.typeParameters
+
+			li( class="collapsing-list__item collapsing-list__item--visible" )
+				div( class="collapsing-list__term toggler--collapsed" class=type.description ? "" : "hidden" )
+					h3
+						code
+							span( class="member-name" ) #{ type.name }
+
+							//- We mark most TypeScript types as `object`, as their structure is complex.
+							//- Hence, it does not really make sense to show that a type extends an unknown `object`.
+							if ( type.value && type.value[ 0 ] !== 'object' )
+								| !{' : '}
+								if ( type.isExtending )
+									i !{ 'extends ' }
+								+type( type.value )
+
+				if ( type.description )
+					div.collapsing-list__description
+						div.collapsing-list__content
+							| !{ type.description.content }

package/themes/umberto/layout/umberto/_api-docs/_partial/typedefs.pug

@@ -0,0 +1,7 @@
+include ../_mixin/_class-item
+
+if isNonEmptyArray( data.typedefs )
+	h2( id="type-definitions" class="hidden-loading" ) Type Definitions
+	ul( class="collapsing-list collapsing-list--filtered hidden-loading" )
+		each t in data.typedefs
+			+classItem( t )

package/themes/umberto/layout/umberto/_api-docs/api-base.pug

@@ -0,0 +1,45 @@
+extends ../base
+
+block content
+    include _partial/loading-spinner
+
+    include _partial/api-subheader
+
+    include _partial/api-info-box
+
+    include _partial/description
+
+    != filter
+
+    include _partial/config-options
+
+    include _partial/constants
+
+    include _partial/type-parameters
+
+    include _partial/properties
+
+    include _partial/methods
+
+    include _partial/events
+
+    include _partial/namespaces
+
+    include _partial/classes
+
+    include _partial/interfaces
+
+    include _partial/typedefs
+
+    include _partial/functions
+
+block navtree
+    != navTree
+
+block projectVersion
+    if page.permalinkDisableDomains
+        meta( name= 'permalink-disable-domains' content=page.permalinkDisableDomains )
+
+    if projectLocals
+        meta( name= 'project-version' content= projectLocals.projectVersion )
+        meta( name= 'project-slug' content= projectLocals.projectSlug )

package/themes/umberto/layout/{_api-docs/interface.pug → umberto/_api-docs/class.pug}

@@ -2,7 +2,7 @@ extends api-base
 include ./_mixin/_api-title
 
 block prepend content
-    +apiTitle( { iconPath: 'assets/' + umbertoVersion + '/img/arrows.svg', kind: 'Interface' } )
+    +apiTitle( { iconPath: 'assets/' + umbertoVersion + '/umberto/img/cog.svg', kind: 'Class' } )
 
 //- Make sure to add the report issue widget at the end of the page.
 block append content

package/themes/umberto/layout/umberto/_api-docs/errors.pug

@@ -0,0 +1,6 @@
+include ./_mixin/_error
+
+if isNonEmptyArray( errorData )
+    ul( class="collapsing-list" )
+        each e in errorData
+            +error( e )

package/themes/umberto/layout/umberto/_api-docs/interface.pug

@@ -0,0 +1,10 @@
+extends api-base
+include ./_mixin/_api-title
+
+block prepend content
+    +apiTitle( { iconPath: 'assets/' + umbertoVersion + '/umberto/img/arrows.svg', kind: 'Interface' } )
+
+//- Make sure to add the report issue widget at the end of the page.
+block append content
+    if page.reportIssueWidget
+        include ../_partial/report-issue-widget

package/themes/umberto/layout/{_api-docs/module.pug → umberto/_api-docs/mixin.pug}

@@ -2,7 +2,7 @@ extends api-base
 include ./_mixin/_api-title
 
 block prepend content
-    +apiTitle( { iconPath: 'assets/' + umbertoVersion + '/img/box-red.svg', kind: 'Module' } )
+    +apiTitle( { iconPath: 'assets/' + umbertoVersion + '/umberto/img/cog.svg', kind: 'Mixin' } )
 
 //- Make sure to add the report issue widget at the end of the page.
 block append content

package/themes/umberto/layout/umberto/_api-docs/module.pug

@@ -0,0 +1,10 @@
+extends api-base
+include ./_mixin/_api-title
+
+block prepend content
+    +apiTitle( { iconPath: 'assets/' + umbertoVersion + '/umberto/img/box-red.svg', kind: 'Module' } )
+
+//- Make sure to add the report issue widget at the end of the page.
+block append content
+    if page.reportIssueWidget
+        include ../_partial/report-issue-widget

package/themes/umberto/layout/umberto/_api-docs/namespace.pug

@@ -0,0 +1,10 @@
+extends api-base
+include ./_mixin/_api-title
+
+block prepend content
+    +apiTitle( { iconPath: 'assets/' + umbertoVersion + '/umberto/img/box-brown.svg', kind: 'Namespace' } )
+
+//- Make sure to add the report issue widget at the end of the page.
+block append content
+    if page.reportIssueWidget
+        include ../_partial/report-issue-widget

package/themes/umberto/layout/umberto/_api-docs/typedef.pug

@@ -0,0 +1,37 @@
+extends api-base
+include ./_mixin/_api-title
+include ./_mixin/_params
+include ./_mixin/_return
+include ./_mixin/_related
+include ./_mixin/_link-or-text
+
+block prepend content
+    +apiTitle( { iconPath: 'assets/' + umbertoVersion + '/umberto/img/data.svg', kind: 'Typedef' } )
+
+block append content
+    if data.types.length == 1 && data.types[ 0 ] == 'function'
+        div.typedef-callback
+            if isNonEmptyArray( data.params )
+                h4 Parameters
+                +paramsMixin( data.params )
+
+            if isNonEmptyArray( data.returns )
+                h4 Returns
+                dl
+                    each ret in data.returns
+                        +return( ret )
+
+            if isNonEmptyArray( data.see )
+                +related( data.see )
+
+    if data.firedBy
+        h2 Fired by
+        ul
+            each firedByItem in data.firedBy
+                li
+                    +linkOrText( firedByItem.url, { linkText: firedByItem.name } )
+
+//- Make sure to add the report issue widget at the end of the page.
+block append content
+    if page.reportIssueWidget
+        include ../_partial/report-issue-widget

package/themes/umberto/layout/umberto/_mixin/nav-tree-item.pug

@@ -0,0 +1,13 @@
+mixin navTreeItem( data )
+	- const _class = page.path === data.path ? 'tree__item__wrapper tree__item__wrapper--active' : 'tree__item__wrapper';
+	- const menuTitle = data[ 'menu-title' ] || uSplitToTitleAndContent( data.content ).title || data.title;
+	li
+		a( href=relative_url( page.path, data.path ) title=menuTitle )
+			div( class=_class )
+				span( class="tree__item--guide tree__item__text" ) #{ menuTitle }
+				- if( data.shouldDisplayNewIndicator )
+					span( class="tree__item__badge tree__item__badge_new" data-badge-tooltip="New or updated content" ) New
+				- if( data.badges )
+					each badge in normalizeBadges( data )
+						span( class="tree__item__badge tree__item__badge_" + badge.name data-badge-tooltip=badge.label )
+							span( class="tree__item__badge__text" ) #{ badge.label }

package/themes/umberto/layout/umberto/_mixin/nav-tree-level.pug

@@ -0,0 +1,38 @@
+include nav-tree-item
+
+mixin navTreeLevel( data, isRoot )
+	- if ( !data ) return;
+	- const pages = site.pages.filter( getPagesForNavTree( data.id, page.projectName ) );
+	- const categories = data.categories ? markEmptyCategories( { pages: site.pages, categories: data.categories, projectName: page.projectName, group: page.groupId } ) : [];
+	- let dataArr = [].concat( pages.toArray(), categories ).sort( ( a, b ) => ( a.title || a.name ).localeCompare( b.title || b.name ) );
+	- dataArr.forEach( ( item, idx ) => { item.index = idx; } );
+	//- Default order value is 0, some categories might not have assigned value that's why there is fallback to default value.
+	- dataArr.sort( ( a, b ) => ( a.order || 0 ) === ( b.order || 0 ) ? a.index - b.index : ( a.order || 0 ) - ( b.order || 0 ) );
+	- const shouldPrintSubTree = dataArr.filter( item => item.title || item.hasDescendentLeaf ).length || projectLocals.navigationShowEmptyCategories
+
+	if isRoot
+		if data.navigationIncludeIndex
+			+navTreeItem( findMainCategoryPage( data.id, page.projectName, site.pages ) )
+
+		each item in dataArr
+			if item.name
+				+navTreeLevel( item, false )
+			else
+				+navTreeItem( item )
+
+	//- We don't want to display empty categories (#523).
+	else if shouldPrintSubTree
+		li
+			div.tree__item__wrapper
+				span( class="tree__item--folder tree__item__text" ) #{ data.name }
+				- if( data.badges )
+					each badge in normalizeBadges( data )
+						span( class="tree__item__badge tree__item__badge_" + badge.name data-badge-tooltip=badge.label )
+							span( class="tree__item__badge__text" ) #{ badge.label }
+			ul( class={ "tree__item-nested-list": true, "tree__item-nested-list--hidden": data.folded } data-id=data.id )
+				each item in dataArr
+					//- Categories have a property 'name', guides don't have property 'name'.
+					if item.name
+						+navTreeLevel( item, false )
+					else
+						+navTreeItem( item )