umberto 8.0.0 → 8.0.2

package/src/tasks/validate-links.js

@@ -5,42 +5,51 @@
 
 'use strict';
 
+/**
+ * Script for validating links in generated HTML files.
+ * Uses multiple threads (worker_threads) for parallel analysis, significantly speeding up the build process,
+ * especially for API documentation where the number of links can reach thousands.
+ */
+
 const { styleText } = require( 'util' );
 const upath = require( 'upath' );
 const fs = require( 'fs-extra' );
+const os = require( 'os' );
+const { Worker, isMainThread, parentPort, workerData } = require( 'worker_threads' );
 const { globSync } = require( 'glob' );
 const { parseDocument } = require( 'htmlparser2' );
+const { isMaskedID } = require( '../../scripts/utils/random-id' );
 
-module.exports = ( buildPath, options = {} ) => {
-	const pattern = upath.join( buildPath, '**', '*' );
-	let pathsToFiles = globSync( pattern ).map( path => upath.normalize( path ) );
-
+/**
+ * Collects all links from the provided HTML files.
+ * Skips files from the vendors directory and (optionally) api.
+ * Adds links to files and their fragments (#id).
+ *
+ * @param {string[]} pathsToFiles Array of file paths to process.
+ * @param {Object} options Options for filtering files.
+ * @returns {{links: Set<string>, pathsToFiles: string[]}}
+ */
+function collectLinks( pathsToFiles, options ) {
 	const links = new Set();
-
 	pathsToFiles = pathsToFiles.filter( p => {
 		if ( p.includes( '/vendors/' ) ) {
 			return false;
 		}
 
-		if ( options.skipApi && ( p.includes( '/api/' ) ) ) {
+		if ( options.skipApi && p.includes( '/api/' ) ) {
 			return false;
 		}
 
 		if ( !p.endsWith( '.html' ) ) {
-			// Add assets like .png, .xlsx, .docx as valid links.
 			const resolvePath = upath.resolve( p );
-
 			if ( fs.statSync( resolvePath ).isFile() ) {
 				links.add( upath.resolve( resolvePath ) );
 			}
-
 			return false;
 		}
-
 		return true;
 	} );
 
-	// Obtain every possible hash
 	for ( const filePath of pathsToFiles ) {
 		links.add( upath.resolve( filePath ) );
 		links.add( upath.resolve( filePath + '#' ) );
@@ -49,27 +58,40 @@ module.exports = ( buildPath, options = {} ) => {
 		const ids = ( content.match( /id="[^"]+"/g ) || [] ).map( el => el.replace( /^id="/, '' ).replace( /"$/, '' ) );
 
 		for ( const id of ids ) {
-			links.add( upath.resolve( `${ filePath }#${ id }` ) );
+			if ( !isMaskedID( id ) && !ids.includes( 'icons-' ) ) {
+				links.add( upath.resolve( `${ filePath }#${ id }` ) );
+			}
 		}
 	}
 
-	// Check if links are in set of possible hashes.
-	for ( const filePath of pathsToFiles ) {
-		const invalidHrefs = new Set();
+	return {
+		links: Array.from( links ),
+		pathsToFiles
+	};
+}
+
+/**
+ * Validates links in the given chunk of files.
+ * Checks if links point to existing files or fragments.
+ * Returns a list of invalid links.
+ *
+ * @param {Object} params
+ * @param {string[]} params.chunk Array of file paths to validate.
+ * @param {Set<string>} params.links Set of valid links.
+ * @param {Object} params.options Validation options.
+ * @returns {Array<Object>}
+ */
+function validateChunk( { chunk, links, options } ) {
+	const errors = [];
+
+	for ( const filePath of chunk ) {
+		const invalidHrefs = [];
 		const content = fs.readFileSync( filePath, 'utf-8' );
 		const linkElements = [];
 
 		processNode( parseDocument( content ), linkElements );
 
-		for ( let { href, text, skipValidation } of linkElements ) {
-			if (
-				href.match( /[a-z:]*\/\// ) ||
-				href.match( /mailto:/ ) ||
-				skipValidation
-			) {
-				continue;
-			}
-
+		for ( let { href, text } of linkElements ) {
 			if ( href.endsWith( '/' ) && !href.includes( '#' ) ) {
 				href += 'index.html';
 			}
@@ -77,8 +99,6 @@ module.exports = ( buildPath, options = {} ) => {
 			let resolvedPath = getResolvedPath( href, filePath, { publicDir: options.publicDir } );
 
 			if ( options.skipApi && resolvedPath.includes( '/api/' ) ) {
-				// Sometimes api url are obtained after resolving entire URL.
-
 				continue;
 			}
 
@@ -87,7 +107,6 @@ module.exports = ( buildPath, options = {} ) => {
 					options.projectsInfo.find( i => resolvedPath.includes( `/${ i.slug }/` ) ) :
 					null;
 				const projectVersion = projectInfo ? projectInfo.version : 'latest';
-
 				resolvedPath = resolvedPath.replace( 'latest', projectVersion );
 			}
 
@@ -100,32 +119,140 @@ module.exports = ( buildPath, options = {} ) => {
 					continue;
 				}
 			}
-
 			if ( !links.has( resolvedPath ) ) {
-				invalidHrefs.add( { href, text } );
+				invalidHrefs.push( { href, text, filePath } );
 			}
 		}
 
-		if ( invalidHrefs.size ) {
-			process.exitCode = 1;
+		if ( invalidHrefs.length ) {
+			errors.push( { filePath, invalidHrefs } );
+		}
+	}
+
+	return errors;
+}
+
+/**
+ * Main function executed in the main thread.
+ * Splits files into chunks and runs worker threads for each chunk.
+ * Collects results and prints errors.
+ *
+ * @param {string} buildPath Path to the build directory.
+ * @param {Object} [options={}] Validation options.
+ */
+if ( isMainThread ) {
+	const validateLinks = ( buildPath, options = {} ) => {
+		const pattern = upath.join( buildPath, '**', '*' );
+		const pathsToFiles = globSync( pattern ).map( path => upath.normalize( path ) );
+
+		console.info( `Validating links in ${ styleText( 'magenta', buildPath ) }...` );
+
+		const start = Date.now();
+		const { links, pathsToFiles: filteredPaths } = collectLinks( pathsToFiles, options );
+
+		const cpuCount = Math.max( 1, os.cpus().length );
+		const maxWorkers = 8;
+		const workerCount = Math.min( cpuCount, maxWorkers );
+		const chunks = chunkBasedOnMemory( workerCount, filteredPaths );
+
+		let finished = 0;
+		let allErrors = [];
+		let nextChunkIdx = 0;
+		const totalChunks = chunks.length;
+
+		return new Promise( ( resolve, reject ) => {
+			const workers = [];
+
+			function startWorker( workerId ) {
+				if ( nextChunkIdx >= totalChunks ) {
+					return;
+				}
+				const chunkIdx = nextChunkIdx++;
+				const worker = new Worker( __filename, {
+					workerData: {
+						chunk: chunks[ chunkIdx ],
+						links,
+						buildPath,
+						options
+					}
+				} );
+
+				worker.on( 'message', errors => {
+					allErrors = allErrors.concat( errors );
+					finished++;
+					console.info( `Processed ${ finished } of ${ totalChunks } links chunks.` );
+
+					if ( nextChunkIdx < totalChunks ) {
+						startWorker( workerId ); // Start next chunk on this worker
+					} else if ( finished === totalChunks ) {
+						printErrors( allErrors, buildPath );
+						console.info( `Links validation finished in ${ styleText( 'green', ( Date.now() - start ) + 'ms' ) }.` );
+
+						if ( allErrors.length ) {
+							reject( new Error( `Found ${ allErrors.length } invalid links.` ) );
+						} else {
+							resolve();
+						}
+					}
+				} );
+
+				worker.on( 'error', err => {
+					finished++;
+					console.error( styleText( 'red', `Worker error: ${ err }` ) );
+					if ( nextChunkIdx < totalChunks ) {
+						startWorker( workerId );
+					} else if ( finished === totalChunks ) {
+						reject( new Error( `Worker error: ${ err }` ) );
+					}
+				} );
+				workers[ workerId ] = worker;
+			}
+
+			const numWorkers = Math.min( workerCount, totalChunks );
+			for ( let i = 0; i < numWorkers; i++ ) {
+				startWorker( i );
+			}
+		} );
+	};
+
+	module.exports = validateLinks;
+} else {
+	const { chunk, links, options } = workerData;
+	const errors = validateChunk( { chunk, links: new Set( links ), options } );
+
+	parentPort.postMessage( errors );
+}
+
+/**
+ * Prints errors found during link validation.
+ * Sets exit code to 1 if errors occurred.
+ *
+ * @param {Array<Object>} allErrors
+ * @param {string} buildPath
+ */
+function printErrors( allErrors, buildPath ) {
+	if ( allErrors.length ) {
+		process.exitCode = 1;
+		for ( const { filePath, invalidHrefs } of allErrors ) {
 			console.log(
 				styleText( 'red', 'Error: ' ) +
 				`Invalid internal links in ${ styleText( 'magenta', filePath.replace( buildPath, '' ) ) }:`
 			);
-
 			for ( const url of invalidHrefs ) {
 				console.log( styleText( 'gray', `  * '${ url.href }' - ${ url.text.replace( /\s+/g, ' ' ) }` ) );
 			}
 		}
 	}
-};
+}
 
 /**
- * @param {String} href A relative or absolute URL to the page.
- * @param {String} filePath A relative path (to the options.publicDir) to the checked file.
+ * Resolves the target path for the given href relative to the file and public directory.
+ *
+ * @param {string} href
+ * @param {string} filePath
  * @param {Object} options
- * @param {String} options.publicDir An absolute path to the directory where all files are located.
- * @return {string}
+ * @param {string} options.publicDir
+ * @returns {string}
  */
 function getResolvedPath( href, filePath, options ) {
 	if ( href.startsWith( '#' ) ) {
@@ -146,14 +273,20 @@ function getResolvedPath( href, filePath, options ) {
 	return upath.resolve( filePath, '..', href );
 }
 
+/**
+ * Recursively processes the DOM tree, collecting <a> elements with href.
+ *
+ * @param {Object} node
+ * @param {Array<Object>} linkElements
+ */
 function processNode( node, linkElements ) {
 	if ( node.type === 'tag' && node.name === 'a' ) {
 		const text = node.children.find( child => child.type === 'text' )?.data;
 		const href = node.attribs?.href;
 		const skipValidation = node.attribs?.[ 'data-skip-validation' ] !== undefined;
 
-		if ( text && href ) {
-			linkElements.push( { href, text, skipValidation } );
+		if ( !skipValidation && text && href && !href.match( /[a-z:]*\/\// ) && !href.match( /mailto:/ ) ) {
+			linkElements.push( { href, text } );
 		}
 	}
 
@@ -165,3 +298,42 @@ function processNode( node, linkElements ) {
 		processNode( childNode, linkElements );
 	}
 }
+
+/**
+ * Calculates the optimal chunk count for splitting files based on available system memory.
+ * Tries to keep each chunk small enough to avoid OOM, but not too small for efficiency.
+ */
+function chunkBasedOnMemory( maxWorkers, array ) {
+	const totalMem = os.totalmem();
+	const freeMem = os.freemem();
+
+	// Assume each file may take up to 8MB in memory (parsing, DOM, etc.)
+	const perFileEstimate = 8 * 1024 * 1024;
+
+	// Use only a portion of free memory to be safe (e.g., 60%)
+	const usableMem = Math.max( freeMem, totalMem * 0.2 ) * 0.6;
+	const maxFilesPerChunk = Math.max( 1, Math.floor( usableMem / perFileEstimate ) );
+
+	// Try to keep chunks small, but not less than maxWorkers
+	const chunkCount = Math.max( maxWorkers, Math.ceil( array.length / maxFilesPerChunk ) );
+
+	return chunkArray( array, chunkCount );
+}
+
+/**
+ * Splits an array into chunkCount fragments of similar size.
+ *
+ * @param {Array} array
+ * @param {number} chunkCount
+ * @returns {Array<Array>}
+ */
+function chunkArray( array, chunkCount ) {
+	const chunks = [];
+	const chunkSize = Math.ceil( array.length / chunkCount );
+
+	for ( let i = 0; i < array.length; i += chunkSize ) {
+		chunks.push( array.slice( i, i + chunkSize ) );
+	}
+
+	return chunks;
+}

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

@@ -20,7 +20,11 @@ mixin treeItem( node, level )
 
 		if !hasChildren
 			div.api-tree__item-wrapper
-				a.api-tree__link( href=link class=iconClassName )
+				a.api-tree__link(
+					href=link,
+					class=iconClassName,
+					data-skip-validation=''
+				)
 					div( class = wrapperClass data-ln = longname )
 						span( class = classStr )
 							| #{ node.getProp( 'name' ) }
@@ -28,7 +32,11 @@ mixin treeItem( node, level )
 			div( class = 'api-tree__item-wrapper' data-ln = longname )
 				button.api-tree__button.api-tree__button--chevron.js-sidebar-button( type="button", 'aria-label'='Expand/Collapse '+longname )
 				if ( link )
-					a( class = [ classStr, 'api-tree__link', iconClassName ] href=link )
+					a(
+						class = [ classStr, 'api-tree__link', iconClassName ],
+						href=link,
+						data-skip-validation=''
+					)
 						| #{ node.getProp( 'name' ) }
 				else
 					span( class = [ classStr, iconClassName, isFolder ? 'js-sidebar-button' : ''] )

package/themes/umberto/layout/gloria/_api-docs/_toc/_style.scss

@@ -107,7 +107,7 @@
 
 	&__heading {
 		margin-bottom: var(--spacing-3);
-		font-size: 1rem;
+		font-size: var(--font-size-base);
 		font-weight: var(--font-weight-bold);
 		color: var(--color-secondary-700);
 
@@ -128,7 +128,9 @@
 			margin-top: var(--spacing-3);
 
 			&-icon {
+				height: auto;
 				transition: transform var(--duration-normal) ease;
+				transform-origin: center;
 			}
 
 			&--open {

package/themes/umberto/layout/gloria/_components/code-block/_style.scss

@@ -71,8 +71,8 @@
 		position: absolute;
 		width: 28px;
 		height: 28px;
-		top: var(--spacing-4);
-		right: var(--spacing-4);
+		top: var(--spacing-3-5);
+		right: var(--spacing-3-5);
 		padding: var(--spacing-1);
 		font-size: var(--font-size-lg);
 		opacity: 0.6;

package/themes/umberto/layout/gloria/_components/code-block/index.pug

@@ -3,7 +3,7 @@
 //- Examples:
 //- +code-block({ language: 'js', code: 'console.log("Hello world!");' })
 //- +code-block({ language: 'typescript', code: 'const message: string = "Hello world!";\nconsole.log(message);', className: 'my-code-block' })
-mixin code-block({ id: codeBlockId, language = 'js', code = '', highlightOnMount = true, className, copyable = true , scrollable = false })
+mixin code-block({ id: codeBlockId, language = 'js', code = '', skeletonLines, highlightOnMount = true, className, copyable = true , scrollable = false })
 	-
 		const id = codeBlockId || uRandomId( 'code-block' );
 		let safeCode = (
@@ -38,7 +38,15 @@ mixin code-block({ id: codeBlockId, language = 'js', code = '', highlightOnMount
 				const widths = [ '70%', '80%', '60%', '75%', '45%', '80%', '65%', '90%', '70%', '50%' ];
 				const approxCodeLineScale = 0.75; // Approximate scale for code lines to match the height of the code block.
 
-				let codeLines = safeCode ? Math.max( 1, Math.floor( safeCode.trim().split('\n').length * approxCodeLineScale ) ) : 0;
+				let codeLines = skeletonLines || 0;
+
+				if ( !codeLines ) {
+					if ( safeCode ) {
+						codeLines = Math.max( 1, Math.floor( safeCode.trim().split('\n').length * approxCodeLineScale ) );
+					} else {
+						codeLines = 4;
+					}
+				}
 
 				if (scrollable) {
 					codeLines = Math.min( codeLines, 5 );

package/themes/umberto/layout/gloria/_components/code-switcher/_style.scss

@@ -31,11 +31,6 @@
 			.c-code-block__copy-button {
 				right: var(--spacing-5);
 			}
-
-			.c-code-block__skeleton,
-			.c-code-block__pre {
-				padding-bottom: var(--spacing-4);
-			}
 		}
 	}
 }

package/themes/umberto/layout/gloria/_components/code-switcher/index.pug

@@ -5,7 +5,7 @@
 //-   +code-tab({ id: 'js', label: 'JavaScript', active: true, code: 'console.log("Hello world!");', language: 'js' })
 //-   +code-tab({ id: 'ts', label: 'TypeScript', code: 'const message: string = "Hello world!";\nconsole.log(message);', language: 'typescript' })
 //-   +code-tab({ id: 'loading', label: 'Loading', skeleton: true })
-mixin code-switcher({ id: codeSwitcherId, className, storageSwitcherKey } = {})
+mixin code-switcher({ id: codeSwitcherId, className, skeletonLines, storageSwitcherKey } = {})
 	mixin code-tab({ id, label, tooltip, className, active = false, code, language = 'js', skeleton = false, copyable = false })
 		- const loading = !!skeleton || !code;
 
@@ -18,9 +18,9 @@ mixin code-switcher({ id: codeSwitcherId, className, storageSwitcherKey } = {})
 			tooltip
 		})
 			if loading
-				+code-block({ code: '', language, copyable, highlightOnMount: false, scrollable: true })
+				+code-block({ code: '', language, copyable, skeletonLines, highlightOnMount: false, scrollable: true })
 			else
-				+code-block({ code, language, copyable, scrollable: true })
+				+code-block({ code, language, copyable, skeletonLines, scrollable: true })
 
 	.c-code-switcher(
 		id=codeSwitcherId

package/themes/umberto/layout/gloria/_components/icon-message/index.pug

@@ -3,15 +3,15 @@
 //- Examples:
 //- +icon-message({ icon: 'github', iconPosition: 'left' }) Icon message left
 //- +icon-message({ icon: 'github', iconPosition: 'right' }) Icon message right
-mixin icon-message({ icon, iconSize, iconPosition = 'left', className })
+mixin icon-message({ icon, iconSize, iconPosition = 'left', className, iconClassName, contentClassName })
 	span.c-icon-message(class=className)&attributes(attributes)
 		if iconPosition === 'left'
-			span.c-icon-message__icon
+			span.c-icon-message__icon(class=iconClassName)
 				+svg-icon({ icon, size: iconSize, ariaHidden: true })
-			span.c-icon-message__content
+			span.c-icon-message__content(class=contentClassName)
 				block
 		else
-			span.c-icon-message__content
+			span.c-icon-message__content(class=contentClassName)
 				block
-			span.c-icon-message__icon
+			span.c-icon-message__icon(class=iconClassName)
 				+svg-icon({ icon, size: iconSize, ariaHidden: true })

package/themes/umberto/layout/gloria/_components/index.pug

@@ -29,3 +29,4 @@ include ./fake-devtools/index
 include ./iframe/index
 include ./tag/index
 include ./columns/index
+include ./snippet-footer/index

package/themes/umberto/layout/gloria/_components/nav-tree/index.pug

@@ -3,4 +3,4 @@ include ./nav-tree-level
 mixin nav-tree()
 	- const pageGroup = projectLocals.getPageGroup( page.groupId )
 	ul.b-reset-list.c-nav-tree.js-nav-tree
-		+navTreeLevel( pageGroup, true, 0 )
+		+navTreeLevel({ data: pageGroup })

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

@@ -2,19 +2,23 @@ mixin navTreeItem( data )
 	-
 		const activeClass = page.path === data.path ? 'c-nav-tree__link--active' : '';
 		const ariaCurrent = page.path === data.path ? 'page' : false;
-		const menuTitle = data[ 'menu-title' ] || uSplitToTitleAndContent( data.content ).title || data.title;
+		const menuTitle = data[ 'menu-title' ] || uExtractAndCacheTitle( data.source, data.content ).title || data.title;
 
 	li
 		a.b-reset-link.c-nav-tree__link(
 			href=relative_url( page.path, data.path ),
 			class=[activeClass],
-			title=menuTitle,
-			aria-current=ariaCurrent
+			aria-current=ariaCurrent,
+			title=menuTitle
 		)
-			span( class="c-nav-tree__guide-title" ) #{ menuTitle }
-			- const shouldDisplayNewIndicator = 'shouldDisplayNewIndicator' in data ? data.shouldDisplayNewIndicator : false;
-			- const badges = 'badges' in data ? data.badges : false;
-			- if( shouldDisplayNewIndicator || badges )
+			span.c-nav-tree__guide-title
+				= menuTitle
+
+			-
+				const shouldDisplayNewIndicator = 'shouldDisplayNewIndicator' in data ? data.shouldDisplayNewIndicator : false;
+				const badges = 'badges' in data ? data.badges : false;
+
+			if shouldDisplayNewIndicator || badges
 				span.c-nav-tree__badges
 					- if( shouldDisplayNewIndicator )
 						+badge({ variant: 'status' })

package/themes/umberto/layout/gloria/_components/nav-tree/nav-tree-level.pug

@@ -1,6 +1,6 @@
 include nav-tree-item
 
-mixin navTreeLevel( data, isRoot, level )
+mixin navTreeLevel( { data, isRoot = true, level = 0 } )
 	- if ( !data || !site ) 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 } ) : [];
@@ -18,7 +18,7 @@ mixin navTreeLevel( data, isRoot, level )
 
 		each item in dataArr
 			if item.name
-				+navTreeLevel( item, false, level + 1 )
+				+navTreeLevel({ data: item, isRoot: false, level: level + 1 })
 			else
 				+navTreeItem( item )
 
@@ -53,6 +53,6 @@ mixin navTreeLevel( data, isRoot, level )
 				each item in dataArr
 					//- Categories have a property 'name', guides don't have property 'name'.
 					if item.name
-						+navTreeLevel( item, false, level + 1 )
+						+navTreeLevel({ data: item, isRoot: false, level: level + 1 })
 					else
 						+navTreeItem( item )

package/themes/umberto/layout/gloria/_components/snippet-footer/_style.scss

@@ -0,0 +1,26 @@
+.c-snippet-footer {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	margin-bottom: var(--spacing-4);
+
+	.doc.live-snippet:has(> .ck-editor) + & {
+		margin-top: calc(var(--spacing-3) * -1);
+	}
+
+	&__container {
+		.c-icon-message__icon {
+			color: var(--color-warning-400);
+		}
+
+		.c-icon-message__content {
+			font-size: var(--font-size-sm);
+			color: var(--color-secondary-700);
+
+			.b-paragraph {
+				color: inherit;
+				font-size: inherit;
+			}
+		}
+	}
+}

package/themes/umberto/layout/gloria/_components/snippet-footer/index.pug

@@ -0,0 +1,10 @@
+//- Snippet footer component used to display a message at the bottom of snippet boxes.
+mixin snippet-footer()
+	.c-snippet-footer
+		+icon-message({
+			className: 'c-snippet-footer__container',
+			icon: 'sparkles',
+			iconSize: 'lg',
+			iconPosition: 'left'
+		})
+			block

package/themes/umberto/layout/gloria/_components/svg/index.pug

@@ -46,7 +46,7 @@ mixin spritesheet-local-svg({ file, className, width, height, title })
 	)
 		if title
 			title(id=titleId)= title
-		use(href=`#${iconId}`)
+		use(href=`#${iconId}`, data-skip-validation='')
 
 //- SVG spritesheet preload mixin
 //-

package/themes/umberto/layout/gloria/_modules/algolia-search/index.pug

@@ -5,6 +5,7 @@ mixin algolia-search
 			appId: docSearchConfig.appId,
 			indexName: docSearchConfig.indexName,
 			disableUserPersonalization: true,
+			insights: true,
 			searchParameters: {
 				hitsPerPage: 250,
 				attributesToRetrieve: '*'

package/themes/umberto/layout/gloria/_modules/header/nav-project-select-dropdown.pug

@@ -1,16 +1,16 @@
 mixin nav-project-select-dropdown()
 	-
-		const currentProject = projectLocals && projectsData.find(
+		const currentProject = projectLocals && quickNavigationProjects && quickNavigationProjects.find(
 			project => project.slug === projectLocals.projectSlug
 		);
 
 	+menu-dropdown({
 		label: currentProject ? currentProject.name : 'Choose project'
 	})
-		each project in projectsData
-			if ![ 'ckfinder', 'trial', 'ckeditor4' ].includes( project.slug )
-				+dropdown-item({
-					label: project.name,
-					active: !!currentProject && project.slug === currentProject.slug,
-					href: relative_url(page.path, `${ project.latestBasePath }/index.html`)
-				})
+		each project in quickNavigationProjects
+			+dropdown-item({
+				label: project.name,
+				active: !!currentProject && project.slug === currentProject.slug,
+				href: relative_url(page.path, `${ project.slug }/latest/index.html`)
+			})
+

package/themes/umberto/layout/gloria/_modules/header-nightly-info/index.pug

@@ -4,6 +4,7 @@ mixin header-nightly-info()
 			const stableUrl = `${ page.canonicalUrlBeginning }${ page.path }`
 				.replace('nightly', '')
 				.replace('ckeditor5.github.io/', 'ckeditor.com/')
+				.replace(projectLocals.projectVersion, 'latest')
 				.replace(/\/+$/, '');
 
 		+header-bar({ variant: 'info', ariaLabel: 'Nightly build documentation' })