umberto 7.0.2 → 8.0.0

package/themes/umberto/src/gloria/js/modules/table-of-contents.js

@@ -0,0 +1,287 @@
+/**
+ * @license Copyright (c) 2017-2025, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+import { BaseComponent } from '../components/base-component';
+import { createOutsideClickWatcher } from '../helpers/create-outside-click-watcher';
+import { onEscapeKeyPress } from '../helpers/escape-handler';
+import { bodyScroll } from '../helpers/body-scroll';
+import { throttle } from '../helpers/throttle';
+import { isHiddenElement } from '../helpers/is-hidden-element';
+import { onHeaderResize, createHeaderSpacerManager, Header } from './header';
+import { animateElement } from '../helpers/animate-element';
+import { isMobile } from '../helpers/is-mobile';
+import { prefersReducedMotion } from '../helpers/prefers-reduced-motion';
+
+/**
+ * Table of Contents component.
+ */
+export class TableOfContents extends BaseComponent {
+	/**
+	 * Creates a table of contents component.
+	 *
+	 * @param element - The ToC container element.
+	 */
+	constructor( element ) {
+		super( {
+			isVisible: element.classList.contains( 'is-visible' ),
+			isLinkClicked: false,
+			headerHeight: null
+		} );
+
+		this.elements = {
+			toc: element,
+			hideBtn: document.querySelector( '.js-toc-hide-btn' ),
+			showBtn: document.querySelector( '.js-toc-show-btn' ),
+			stickyButtons: document.querySelectorAll( '.js-toc-btn-sticky' ),
+			tocList: element.querySelector( 'nav > ol' )
+		};
+	}
+
+	/**
+	 * Initializes all table of contents components on the page.
+	 */
+	static attach() {
+		const toc = document.querySelector( '.js-toc' );
+
+		if ( toc ) {
+			new TableOfContents( toc ).init();
+		}
+	}
+
+	/**
+	 * Initializes the table of contents component with event listeners.
+	 */
+	init() {
+		const { hideBtn, showBtn, tocList, toc } = this.elements;
+
+		hideBtn?.addEventListener( 'click', () => {
+			this.animateToC();
+			this.setState( { isVisible: false } );
+		} );
+
+		showBtn?.addEventListener( 'click', () => {
+			this.animateToC();
+			this.setState( { isVisible: true } );
+		} );
+
+		tocList?.addEventListener( 'click', event => {
+			if ( event.target.tagName !== 'A' ) {
+				return;
+			}
+
+			const headings = this.elements.tocList.querySelectorAll( 'a' );
+
+			headings.forEach( heading => heading.classList.remove( 'is-active' ) );
+			event.target.classList.add( 'is-active' );
+
+			this.isLinkClicked = true;
+			this.setState( { isVisible: false } );
+
+			if ( isMobile() ) {
+				bodyScroll( { shouldBeStopped: false } );
+			}
+
+			setTimeout( () => {
+				this.isLinkClicked = false;
+			}, 1000 );
+		} );
+
+		this.headerResizeUnsubscribe = onHeaderResize( height => {
+			this.setState( { headerHeight: height } );
+		} );
+
+		this.headerSpacerManager = createHeaderSpacerManager( {
+			overlay: toc,
+			setSpacing: ( overlay, height ) => {
+				if ( height ) {
+					overlay.style.setProperty( '--header-height', height );
+				} else {
+					overlay.style.removeProperty( '--header-height' );
+				}
+			}
+		} );
+
+		this.trackActiveHeadingOnScroll();
+		this.render();
+	}
+
+	/**
+	 * Renders the table of contents based on current state.
+	 *
+	 * @param prevState - Previous component state.
+	 * @param state - Current component state.
+	 */
+	render( prevState, state = this.state ) {
+		const { toc, hideBtn, showBtn } = this.elements;
+		const { isVisible, headerHeight } = state;
+
+		if ( !!prevState?.isVisible !== !!isVisible ) {
+			animateElement( toc, isVisible, {
+				duration: 150,
+				displayValue: 'block',
+				...!this.isLinkClicked && isMobile() && {
+					onEntering: () => {
+						bodyScroll( { shouldBeStopped: true } );
+						this.headerSpacerManager.show();
+					},
+					onExiting: () => {
+						bodyScroll( { shouldBeStopped: false } );
+					},
+					onExited: () => {
+						this.headerSpacerManager.hide();
+					}
+				}
+			} );
+
+			this.outsideClickCleanup?.();
+			this.escapeHandlerCleanup?.();
+
+			if ( isVisible ) {
+				this.setupOutsideClickWatcher();
+				this.setupEscapeHandler();
+				hideBtn.focus();
+				showBtn?.setAttribute( 'aria-expanded', 'true' );
+			} else {
+				showBtn?.setAttribute( 'aria-expanded', 'false' );
+			}
+		}
+
+		if ( headerHeight !== null && ( !isMobile() || !isHiddenElement( toc ) ) ) {
+			toc.style.setProperty( '--header-height', `${ headerHeight }px` );
+			document.querySelector( '.l-layout__container' )?.style.setProperty( '--header-height', `${ headerHeight }px` );
+		}
+	}
+
+	/**
+	 * Toggles the scroll position of the body when the ToC is visible.
+	 * If the ToC is visible, it prevents scrolling and saves the current scroll position.
+	 * If the ToC is hidden, it restores the scroll position.
+	 */
+	bodyScrollToggle() {
+		const { isVisible } = this.state;
+
+		bodyScroll( { shouldBeStopped: isVisible } );
+	}
+
+	/**
+	 * Sets up the outside click watcher to hide the ToC.
+	 */
+	setupOutsideClickWatcher() {
+		this.outsideClickCleanup = createOutsideClickWatcher( {
+			elements: [ this.elements.toc, this.elements.showBtn ],
+			callback: () => this.setState( { isVisible: false } )
+		} );
+	}
+
+	/**
+	 * Sets the escape key handler to hide the ToC.
+	 */
+	setupEscapeHandler() {
+		this.escapeHandlerCleanup = onEscapeKeyPress( () => this.setState( { isVisible: false } ) );
+	}
+
+	/**
+	 * Tracks the active heading on scroll.
+	 */
+	trackActiveHeadingOnScroll() {
+		const { tocList, stickyButtons } = this.elements;
+		const headings = tocList?.querySelectorAll( 'a' ) ?? [];
+
+		const getHeadingsData = () => Array.from( headings ).map( heading => {
+			const currentHeadingId = heading.getAttribute( 'href' ).substring( 1 );
+			const currentHeading = document.getElementById( currentHeadingId )?.closest( '.b-heading' );
+			const rect = currentHeading.getBoundingClientRect();
+
+			return {
+				rect,
+				element: currentHeading,
+				tocItem: heading
+			};
+		} ).filter( Boolean );
+
+		function updateToc() {
+			if ( window.scrollY > 110 ) {
+				stickyButtons.forEach( button => button.classList.add( 'c-toc__show-button--sticky' ) );
+			} else {
+				stickyButtons.forEach( button => button.classList.remove( 'c-toc__show-button--sticky' ) );
+			}
+
+			if ( this.isLinkClicked ) {
+				return;
+			}
+
+			const headerHeight = Header.the.getVisibleHeight() + 5 || 0;
+			const headingsData = getHeadingsData();
+
+			// Find headings that are visible in the viewport (accounting for header)
+			const visibleHeadings = headingsData.filter( hd =>
+				hd.rect.top >= headerHeight &&
+				hd.rect.top < window.innerHeight
+			);
+
+			let activeHeading;
+
+			if ( visibleHeadings.length > 0 ) {
+				// Use the first visible heading
+				activeHeading = visibleHeadings[ 0 ];
+			} else {
+				// If no headings are visible, find the one just above the viewport
+				const headingsAbove = headingsData
+					.filter( hd => hd.rect.bottom <= headerHeight )
+					.sort( ( a, b ) => b.rect.bottom - a.rect.bottom );
+
+				if ( headingsAbove.length > 0 ) {
+					activeHeading = headingsAbove[ 0 ];
+				} else {
+					// If no headings above, use the first heading below the viewport
+					const headingsBelow = headingsData
+						.filter( hd => hd.rect.top > window.innerHeight )
+						.sort( ( a, b ) => a.rect.top - b.rect.top );
+
+					if ( headingsBelow.length > 0 ) {
+						activeHeading = headingsBelow[ 0 ];
+					}
+				}
+			}
+
+			if ( activeHeading && !activeHeading.tocItem.classList.contains( 'is-active' ) ) {
+				headings.forEach( heading => heading.classList.remove( 'is-active' ) );
+
+				activeHeading.tocItem.classList.add( 'is-active' );
+				activeHeading.tocItem.scrollIntoView( {
+					behavior: prefersReducedMotion() ? 'instant' : 'smooth',
+					block: 'nearest',
+					inline: 'nearest'
+				} );
+			}
+
+			// When scroll is near the bottom of the page, ensure the last heading is active.
+			if ( window.scrollY + window.innerHeight >= document.body.scrollHeight - 10 ) {
+				const lastHeading = headings[ headings.length - 1 ];
+
+				if ( lastHeading && !lastHeading.classList.contains( 'is-active' ) ) {
+					headings.forEach( heading => heading.classList.remove( 'is-active' ) );
+					lastHeading.classList.add( 'is-active' );
+				}
+			}
+		}
+
+		window.addEventListener( 'scroll', throttle( updateToc.bind( this ), 50 ) );
+		window.addEventListener( 'resize', throttle( updateToc.bind( this ), 100 ) );
+	}
+
+	animateToC() {
+		const { toc } = this.elements;
+		const animationClassName = 'c-toc--transition';
+
+		toc.classList.add( animationClassName );
+
+		toc.addEventListener( 'transitionend', () => {
+			toc.classList.remove( animationClassName );
+		}, {
+			once: true
+		} );
+	}
+}

package/themes/umberto/src/gloria/js/public-api.js

@@ -0,0 +1,75 @@
+/**
+ * @license Copyright (c) 2017-2025, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+import { activateTab, onTabActivation } from './components/tabs';
+import { createTooltipPopover } from './components/tooltip-popover';
+import { Header, onHeaderResize } from './modules/header';
+import { onHeaderBarStateChange } from './modules/header-bar';
+import { highlightCode } from './helpers/highlight-code';
+import { afterDomReady } from './helpers/after-dom-ready';
+import { throttle } from './helpers/throttle';
+import { fetchStylesheet } from './helpers/fetch-stylesheet';
+import { randomId } from './helpers/random-id';
+import { scrollToHash } from './helpers/scroll-to-hash';
+import { formatHtml } from './helpers/format-html';
+import { injectScript, injectScriptsInParallel } from './helpers/inject-script';
+import { injectStylesheet } from './helpers/inject-stylesheet';
+import { injectResourcePreload } from './helpers/inject-resource-preload';
+import { onDropdownSelection, selectDropdownItem } from './components/dropdown';
+
+window.umberto = {
+	// The `VERSION` value will be replaced by the `DefinePlugin` webpack plugin.
+	version: VERSION, // eslint-disable-line no-undef
+
+	// Tooltips public API
+	Tooltip: {
+		create: createTooltipPopover
+	},
+
+	// Tabs public API
+	Tabs: {
+		activateTab,
+		onTabActivation
+	},
+
+	// Header public API
+	Header: {
+		get the() { return Header.the; },
+		onResize: onHeaderResize
+	},
+
+	// HeaderBar public API
+	HeaderBar: {
+		onStateChange: onHeaderBarStateChange
+	},
+
+	// Dropdown public API
+	Dropdown: {
+		selectItem: selectDropdownItem,
+		onSelectChange: onDropdownSelection
+	},
+
+	// General helpers
+	highlightCode,
+	afterDomReady,
+	throttle,
+	fetchStylesheet,
+	randomId,
+	scrollToHash,
+	formatHtml,
+	injectScript,
+	injectScriptsInParallel,
+	injectStylesheet,
+	injectResourcePreload,
+
+	// callbacks queue that will be executed after mounting all umberto components
+	afterReady( callback ) {
+		if ( !this._afterReadyCallbacks ) {
+			this._afterReadyCallbacks = [];
+		}
+
+		this._afterReadyCallbacks.push( callback );
+	}
+};

package/themes/umberto/src/gloria/js/web-components/svg-icon.js

@@ -0,0 +1,117 @@
+/**
+ * @license Copyright (c) 2017-2025, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+import { html } from '../helpers/html-builder';
+import { cx } from '../helpers/classnames';
+import { randomId } from '../helpers/random-id';
+
+/**
+ * A web component that renders an SVG icon. This is equivalent to the `svg-icon` Pug mixin.
+ *
+ * In order to load icon into spritesheet, you need to use the `preload-spritesheet-svg` mixin.
+ *
+ * @example
+ * // Basic usage
+ * <svg-icon icon="github"></svg-icon>
+ *
+ * // With additional class
+ * <svg-icon icon="github" class="custom-icon-class"></svg-icon>
+ *
+ * // With size
+ * <svg-icon icon="github" size="lg"></svg-icon>
+ *
+ * // With title for accessibility (omit for decorative icons)
+ * <svg-icon icon="github" title="GitHub"></svg-icon>
+ */
+class SvgIcon extends HTMLElement {
+	static get observedAttributes() {
+		return [ 'icon', 'size', 'class', 'title', 'aria-hidden' ];
+	}
+
+	connectedCallback() {
+		this.render();
+	}
+
+	attributeChangedCallback() {
+		this.render();
+	}
+
+	render() {
+		const icon = this.getAttribute( 'icon' );
+		const size = this.getAttribute( 'size' );
+		const title = this.getAttribute( 'title' );
+		const ariaHidden = this.hasAttribute( 'aria-hidden' ) ?
+			this.getAttribute( 'aria-hidden' ) === 'true' :
+			!title;
+
+		if ( !icon ) {
+			console.error( 'Icon name is required for <svg-icon> element' );
+			return;
+		}
+
+		const svgElement = createSvgIcon( {
+			file: `icons-${ icon }`,
+			className: cx(
+				'c-icon',
+				`c-icon--${ icon }`,
+				{ [ `u-text--${ size }` ]: !!size }
+			),
+			viewBox: '0 0 36 36',
+			ariaHidden: ariaHidden ? 'true' : 'false',
+			title: title && !ariaHidden ? title : null
+		} );
+
+		this.innerHTML = '';
+		this.appendChild( svgElement );
+	}
+}
+
+customElements.define( 'svg-icon', SvgIcon );
+
+/**
+ * Creates an SVG element with an icon from a spritesheet.
+ */
+function createSvgIcon( options ) {
+	const {
+		file,
+		className,
+		style,
+		width,
+		height,
+		title,
+		viewBox,
+		ariaHidden
+	} = options;
+
+	if ( !file ) {
+		return null;
+	}
+
+	if ( !viewBox ) {
+		throw new Error( 'The viewBox attribute is required for the SVG element.' );
+	}
+
+	const iconId = file.replace( /\//g, '-' );
+	const titleId = title ? randomId( 'svg-icon-title' ) : null;
+
+	const svgElement = html.svg(
+		{
+			role: 'img',
+			...( className && { class: className } ),
+			...( style && { style } ),
+			...( width && { width } ),
+			...( height && { height } ),
+			...( title && { 'aria-labelledby': titleId } ),
+			...( ariaHidden && { 'aria-hidden': ariaHidden } ),
+			...( viewBox && { viewBox } )
+		},
+		[
+			title && html.title( { id: titleId }, title ),
+			html.use( { href: `#${ iconId }` } )
+		].filter( Boolean )
+	);
+
+	return svgElement;
+}

package/themes/umberto/src/umberto/js/_codeswitcherbuttons.js

@@ -136,7 +136,7 @@ export function createCodeSwitcherButtons() {
 		} );
 	} );
 
-	/* eslint-disable max-len */
+	/* eslint-disable @stylistic/max-len */
 	const infoCircle = $( `
 		<svg class="code-switcher__info" width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
 			<path d="M6 0.75C3.10078 0.75 0.75 3.10078 0.75 6C0.75 8.89922 3.10078 11.25 6 11.25C8.89922 11.25 11.25 8.89922 11.25 6C11.25 3.10078 8.89922 0.75 6 0.75ZM6 10.3594C3.59297 10.3594 1.64063 8.40703 1.64063 6C1.64063 3.59297 3.59297 1.64063 6 1.64063C8.40703 1.64063 10.3594 3.59297 10.3594 6C10.3594 8.40703 8.40703 10.3594 6 10.3594Z" fill="white"/>

package/themes/umberto/layout/gloria/_api-docs/_mixin/_api-title.pug

@@ -1,17 +0,0 @@
-include _type
-
-mixin apiTitle( config )
-    div.api-header
-        img( src=relative_url( page.path, config.iconPath ) alt=config.kind title=config.kind )
-
-        div.api-header__title
-            h1( data-ln = data.longname )
-                != data.name
-
-                if ( config.kind !== 'Module' && page.shortHiddenPath )
-                    span.header__import--hidden
-                        != ` (${ page.shortHiddenPath })`
-
-            if ( page.realImportPath )
-                p.header__import
-                    != page.realImportPath

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

@@ -1,13 +0,0 @@
-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/gloria/_partial/docsearch.pug

@@ -1,21 +0,0 @@
-if ( docSearchConfig && docSearchConfig.isEnabled && !disableSearch && (!projectLocals || !projectLocals.disableSearch) )
-    - let config;
-    if ( projectLocals && projectLocals.docSearchConfig )
-        - config = projectLocals.docSearchConfig;
-    else
-        - config = docSearchConfig;
-
-    - const customRanking = config.getCustomRanking( page.path );
-    if ( customRanking !== null )
-        meta( content= customRanking name= "docsearch:custom_ranking" )
-    else if ( data && data.isOfLowImportance )
-        meta( content= -1 name= "docsearch:custom_ranking" )
-
-    script( src=config.js )
-
-    if ( page.path === 'index.html' )
-        != config.scripts.rootScript
-    else if ( !page.groupSlug || !config.scripts[ page.groupSlug ] )
-        != config.scripts.defaultScript
-    else
-        != config.scripts[ page.groupSlug ]

package/themes/umberto/layout/gloria/_partial/dropdown.pug

@@ -1,12 +0,0 @@
-div.dropdown__wrapper
-	ul.dropdown__content
-		if page.path === 'index.html' && mainName
-			- page.projectfullname = mainName
-
-		a.dropdown__title( href=relative_url( page.path, page.BASE_PATH + page.startPage ) )= page.projectfullname
-
-		each project in projectsData
-			if !page.path.includes( project.BASE_PATH )
-				li( class=project.name.replace( ' ', '-' ) )
-					a( href=relative_url( page.path, project.latestBasePath + project.startPage ) )
-						!= project.name

package/themes/umberto/layout/gloria/_partial/feedback-widget.pug

@@ -1,20 +0,0 @@
-//- 1. Check if property exists in umberto-main.json.
-//- 2. Do not render feedback-widget if disabled via single .md file.
-if ( feedbackWidget && page[ 'feedback-widget' ] !== false )
-
-	//- Render feedback-widget only for domains configured in umberto-main.json.
-	script.
-		if ( !{ JSON.stringify( feedbackWidget.domains ) }.indexOf( location.hostname ) !== -1) {
-			window.emojicsOpts = {
-				widget: '!{ feedbackWidget.apiKey }',
-				position: 'inline'
-			};
-			( function( d, s, id ) {
-				var js, fjs = d.getElementsByTagName( s )[ 0 ];
-				js = d.createElement( s );
-				js.id = id;
-				js.async = 1;
-				js.src = '//connect.emojics.com/dist/sdk.js';
-				fjs.parentNode.insertBefore( js, fjs );
-			} )( document, 'script', 'emojics-js' );
-		}

package/themes/umberto/layout/gloria/_partial/footer.pug

@@ -1,6 +0,0 @@
-- const footerClasses = [ 'footer' ];
-- const currentYear = ( new Date() ).getFullYear();
-- if ( page.toc !== false && !page.isApi ) footerClasses.push( 'footer--bordered' );
-
-footer( class = footerClasses )
-    p © 2003-#{ currentYear } #[a(href="http://cksource.com") CKSource]. All rights reserved.

package/themes/umberto/layout/gloria/_partial/gh-contribute.pug

@@ -1,8 +0,0 @@
-if page.issuesUrl || page.contributeUrl
-    div.github-contrib
-        if page.contributeUrl
-            a( href=page.contributeUrl title="Contribute to this guide" )
-                img( src=relative_url( page.path, 'assets/' + umbertoVersion + '/gloria/img/edit.svg' ) alt="Contribute to this guide" )
-        if page.issuesUrl
-            a( href=page.issuesUrl title="Report an issue" )
-                img( src=relative_url( page.path, 'assets/' + umbertoVersion + '/gloria/img/exclamation-circle.svg' ) alt="Report an issue" )

package/themes/umberto/layout/gloria/_partial/google-tag-manager.pug

@@ -1,18 +0,0 @@
-if googletagmanager
-
-    // Google Tag Manager
-    script.
-        if (!{ JSON.stringify(googletagmanager.domains) }.indexOf(location.hostname) !== -1) {
-            (function (w, d, s, l, i) {
-                w[l] = w[l] || [];
-                w[l].push({'gtm.start': new Date().getTime(), event: 'gtm.js'});
-                var f = d.getElementsByTagName(s)[0],
-                    j = d.createElement(s),
-                    dl = l != 'dataLayer' ? '&l=' + l : '';
-                j.async = true;
-                j.src = 'https://www.googletagmanager.com/gtm.js?id=' + i + dl;
-                f.parentNode.insertBefore(j, f);
-            })( window, document, 'script', 'dataLayer', '!{ googletagmanager.gtm }' );
-        }
-
-    // End Google Tag Manager

package/themes/umberto/layout/gloria/_partial/header.pug

@@ -1,64 +0,0 @@
-include ../_mixin/nav-tree-level
-
-if googletagmanager && googletagmanager.gtm
-
-	//- Google Tag Manager (noscript)
-	noscript
-		iframe( src="https://www.googletagmanager.com/ns.html?id=" + googletagmanager.gtm height="0" width="0" style="display:none;visibility:hidden" )
-	//- End Google Tag Manager (noscript)
-
-header.top( data-project= projectLocals ? projectLocals.projectSlug : undefined )
-	.header__main
-		.header__main-rwd-button
-			a( href="#" )
-				span
-				span
-				span
-
-		.header__main-title
-			a.header__main-title-home( href=relative_url( page.path, 'index.html') ) CKEditor Ecosystem Documentation
-
-		include ./search-box
-
-	if page.pageClass !== 'home'
-		.header__sub
-			ul.top__menu( class= !( projectLocals && projectLocals.groups.length ) ? 'top__menu--right' : '' )
-				li.top__menu-project-logo
-					a( href=relative_url( page.path, page.BASE_PATH + page.startPage ) )= page.projectfullname
-
-				if projectLocals && projectLocals.groups
-					each group in projectLocals.groups
-						- const menuItemClasses = group.id === page.groupId ? [ 'top__menu__item--active' ] : [ '' ];
-						- if ( group.id === 'api-reference' ) menuItemClasses.push( 'top__menu__api' );
-						li
-							a( class=menuItemClasses href=relative_url( page.path, group._url ) ) #{ group.name }
-
-					if projectLocals && projectLocals.repoUrl
-						li
-							a.top__menu-github-link( href=projectLocals.repoUrl target='_blank' title= `${page.projectfullname} on GitHub.` )
-								<svg viewBox="0 0 24 24"><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg>
-	.header__menu-rwd
-		ul.header__menu-rwd__projects
-			each project in projectsData
-				li( data-project= project.slug )
-					a( href=relative_url( page.path, project.latestBasePath + project.startPage ) )= project.name
-					if project.slug === page.projectName
-						ul.tree.header__menu-rwd__projects-pages
-							each group in projectLocals.groups
-								li( data-group= group.id )
-									a( href=relative_url( page.path, group._url ) )= group.name
-									//- Display subpages for active project.
-									if group.id === page.groupId
-										if !page.isSdk && !page.isApi
-											//- regular page
-											- const pageGroup = projectLocals.getPageGroup( page.groupId )
-											ul.header__menu-rwd__projects-subpages
-												+navTreeLevel( pageGroup, true )
-										else if page.isSdk && projectLocals && projectLocals.sdkNavTree
-											//- index page of sdk
-											ul.header__menu-rwd__projects-subpages
-												!= projectLocals.sdkNavTree
-										else if page.isSdk
-											//- sdk pages build outside of hexo
-											ul.header__menu-rwd__projects-subpages
-												include ../_sdk/_partial/navtree.pug