umberto 9.0.0 → 9.1.0

package/src/tasks/validate-links.js

@@ -12,130 +12,66 @@
  */
 
 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 upath = require( 'upath' );
 const { globSync } = require( 'glob' );
-const { parseDocument } = require( 'htmlparser2' );
-const { isMaskedID } = require( '../../scripts/utils/random-id' );
+const { default: TinyPool } = require( 'tinypool' );
 
 /**
  * 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 {string} pattern Glob pattern for 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;
-		}
+async function collectLinks( pattern, options ) {
+	let links = new Set();
+
+	const pathsToFiles = globSync( pattern )
+		.map( path => upath.normalize( path ) )
+		.filter( p => {
+			if ( p.includes( '/vendors/' ) ) {
+				return false;
+			}
 
-		if ( options.skipApi && p.includes( '/api/' ) ) {
-			return false;
-		}
+			if ( options.skipApi && p.includes( '/api/' ) ) {
+				return false;
+			}
+
+			if ( p.endsWith( '.html' ) ) {
+				return true;
+			}
 
-		if ( !p.endsWith( '.html' ) ) {
 			const resolvePath = upath.resolve( p );
+
 			if ( fs.statSync( resolvePath ).isFile() ) {
 				links.add( upath.resolve( resolvePath ) );
 			}
+
 			return false;
-		}
-		return true;
-	} );
+		} );
 
-	for ( const filePath of pathsToFiles ) {
-		links.add( upath.resolve( filePath ) );
-		links.add( upath.resolve( filePath + '#' ) );
+	const pool = new TinyPool( {
+		filename: require.resolve( './validate-links-collect-worker.js' )
+	} );
 
-		const content = fs.readFileSync( filePath, 'utf-8' );
-		// Extract both quoted and unquoted "id" attributes.
-		const ids = [
-			...Array.from( content.matchAll( /id="([^"]+)"/g ), m => m[ 1 ] ),
-			...Array.from( content.matchAll( /id=([^\s"'/>]+)/g ), m => m[ 1 ] )
-		];
+	try {
+		const tasks = splitArrayBalanced( pathsToFiles, pool.options.maxThreads ).map( chunk => pool.run( { chunk } ) );
+		const results = await Promise.all( tasks );
 
-		for ( const id of ids ) {
-			if ( !isMaskedID( id ) && !ids.includes( 'icons-' ) ) {
-				links.add( upath.resolve( `${ filePath }#${ id }` ) );
-			}
-		}
+		links = new Set( [ ...links, ...results.flat() ] );
+	} finally {
+		await pool.destroy();
 	}
 
 	return {
-		links: Array.from( links ),
+		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 } of linkElements ) {
-			if ( href.endsWith( '/' ) && !href.includes( '#' ) ) {
-				href += 'index.html';
-			}
-
-			let resolvedPath = getResolvedPath( href, filePath, { publicDir: options.publicDir } );
-
-			if ( options.skipApi && resolvedPath.includes( '/api/' ) ) {
-				continue;
-			}
-
-			if ( resolvedPath.includes( '/latest/' ) ) {
-				const projectInfo = options.projectsInfo ?
-					options.projectsInfo.find( i => resolvedPath.includes( `/${ i.slug }/` ) ) :
-					null;
-				const projectVersion = projectInfo ? projectInfo.version : 'latest';
-				resolvedPath = resolvedPath.replace( '/latest/', `/${ projectVersion }/` );
-			}
-
-			if ( options.projectsInfo ) {
-				const isCorrectLocalPath = options.projectsInfo.some( info => {
-					return resolvedPath.includes( info.basePath );
-				} );
-
-				if ( !isCorrectLocalPath ) {
-					continue;
-				}
-			}
-			if ( !links.has( resolvedPath ) ) {
-				invalidHrefs.push( { href, text, filePath } );
-			}
-		}
-
-		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.
@@ -144,88 +80,32 @@ function validateChunk( { chunk, links, options } ) {
  * @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;
+module.exports = async function validateLinks( buildPath, options = {} ) {
+	console.info( `Gathering links in ${ styleText( 'magenta', buildPath ) } to validate...` );
 
-		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();
-						}
-					}
-				} );
+	const start = Date.now();
+	const { links, pathsToFiles } = await collectLinks( upath.join( buildPath, '**', '*' ), options );
+	const pool = new TinyPool( {
+		filename: require.resolve( './validate-links-worker.js' )
+	} );
 
-				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;
-			}
+	try {
+		console.info( `Validating links in ${ styleText( 'magenta', buildPath ) }...` );
 
-			const numWorkers = Math.min( workerCount, totalChunks );
-			for ( let i = 0; i < numWorkers; i++ ) {
-				startWorker( i );
-			}
-		} );
-	};
+		const tasks = splitArrayBalanced( pathsToFiles, pool.options.maxThreads ).map( chunk => pool.run( { chunk, links, options } ) );
+		const results = await Promise.all( tasks );
+		const errors = results.flat();
 
-	module.exports = validateLinks;
-} else {
-	const { chunk, links, options } = workerData;
-	const errors = validateChunk( { chunk, links: new Set( links ), options } );
+		if ( errors.length ) {
+			printErrors( errors, buildPath );
+			throw new Error( `Found ${ errors.length } invalid links.` );
+		}
 
-	parentPort.postMessage( errors );
-}
+		console.info( `Links validation finished in ${ styleText( 'green', ( Date.now() - start ) + 'ms' ) }.` );
+	} finally {
+		await pool.destroy();
+	}
+};
 
 /**
  * Prints errors found during link validation.
@@ -250,94 +130,16 @@ function printErrors( allErrors, buildPath ) {
 }
 
 /**
- * Resolves the target path for the given href relative to the file and public directory.
+ * Splits an array into smaller chunks, each containing approximately equal number of elements.
  *
- * @param {string} href
- * @param {string} filePath
- * @param {Object} options
- * @param {string} options.publicDir
- * @returns {string}
+ * @param {Array<any>} arr Array to split.
+ * @param {number} numParts Number of parts to split into.
+ * @returns {Array<Array<any>>}
  */
-function getResolvedPath( href, filePath, options ) {
-	if ( href.startsWith( '#' ) ) {
-		return upath.resolve( filePath + href );
-	}
-
-	if ( href.startsWith( '/' ) ) {
-		const commonPoint = href.match( /^\/[^/]+/ )[ 0 ];
-
-		// The `commonPoint` should be removed from the end of the `options.publicDir` string.
-		// It may happen that `commonPoint` is present at the middle of that path and removing it produces invalid results.
-		// See: #909.
-		const regExpCommonPoint = new RegExp( commonPoint + '$' );
-
-		return upath.resolve( options.publicDir.replace( regExpCommonPoint, '' ) + href );
-	}
+function splitArrayBalanced( arr, numParts ) {
+	const result = Array.from( { length: numParts }, () => [] );
 
-	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 ( !skipValidation && text && href && !href.match( /[a-z:]*\/\// ) && !href.match( /mailto:/ ) ) {
-			linkElements.push( { href, text } );
-		}
-	}
-
-	if ( !node.childNodes ) {
-		return;
-	}
-
-	for ( const childNode of node.childNodes ) {
-		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 ) );
-	}
+	arr.forEach( ( item, i ) => result[ i % numParts ].push( item ) );
 
-	return chunks;
+	return result;
 }

package/themes/umberto/layout/gloria/_head/head.pug

@@ -48,6 +48,9 @@ if page.BASE_PATH && page.BASE_PATH !== '.' && !page.BASE_PATH.includes( 'latest
 if kapa
 	+load-kapa-script(kapa)
 
+if sentry
+	+load-sentry-script(sentry)
+
 script(src=relative_url(page.path, pathJoin( 'assets', umbertoVersion, 'gloria/scripts/app.js')))
 
 if page.BASE_PATH

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

@@ -13,3 +13,4 @@ include ./breadcrumbs/index
 include ./algolia-search/index
 include ./not-found/index
 include ./kapa/index
+include ./sentry/index

package/themes/umberto/layout/gloria/_modules/kapa/index.pug

@@ -18,7 +18,6 @@ mixin load-kapa-script( kapa )
 			// Global settings.
 			'data-project-color': mainColor,
 			'data-project-logo': 'https://ckeditor.com/docs/ckeditor5/latest/assets/img/ckeditor5-logo.svg',
-			'data-font-family': '"Title Mullish", text public sans',
 
 			// Floating button.
 			'data-button-text': 'Need help?',

package/themes/umberto/layout/gloria/_modules/sentry/index.pug

@@ -0,0 +1,27 @@
+mixin load-sentry-script( sentry )
+	script.
+		const hostname = window.location.hostname;
+		const isProductionHost = hostname === 'ckeditor.com' || hostname === 'ckeditor5.github.io';
+
+		if ( isProductionHost ) {
+			window.sentryOnLoad = function () {
+				Sentry.init( {
+					integrations: [
+						Sentry.browserTracingIntegration(),
+						Sentry.replayIntegration()
+					],
+					tracesSampleRate: 1.0,
+					tracePropagationTargets: [
+						'https://ckeditor.com/docs',
+						'https://ckeditor5.github.io/docs/nightly'
+					],
+					replaysSessionSampleRate: 1.0,
+					replaysOnErrorSampleRate: 1.0
+				} );
+			};
+
+			const script = document.createElement( 'script' );
+			script.src = '!{ sentry.src }';
+			script.crossOrigin = 'anonymous';
+			document.head.prepend( script );
+		}

package/scripts/filter/after-post-render/gloria/append-copy-heading-buttons.js

@@ -1,90 +0,0 @@
-/**
- * @license Copyright (c) 2017-2025, CKSource Holding sp. z o.o. All rights reserved.
- * For licensing, see LICENSE.md.
- */
-
-'use strict';
-
-const cheerio = require( 'cheerio' );
-const createPrerenderPugTemplate = require( '../../../utils/pug-renderer/create-prerender-pug-template' );
-
-/**
- * Renders the button using Pug template.
- */
-const renderButton = createPrerenderPugTemplate( {
-	requires: [
-		'_components/svg/index',
-		'_components/icon/index',
-		'_components/tooltip-popover/index',
-		'_components/heading-link/index'
-	],
-	component: 'heading-link',
-	componentAttrs: {
-		mask: [ 'headingId' ]
-	}
-} );
-
-/**
- * Enforce priority 30 to run it after apply design doc classes filter.
- */
-hexo.extend.filter.register( 'after_post_render', page => {
-	if ( page.projectTheme !== 'gloria' ) {
-		return page;
-	}
-
-	const $ = cheerio.load( page.content, null, false );
-
-	// Do not process h1 tags as it's processed further by Umberto and may be removed.
-	$( 'h2, h3, h4, h5, h6' ).each( ( _, heading ) => {
-		const $heading = $( heading );
-
-		if ( hasClassOrParentWithClass( $heading, 'no-transform' ) ) {
-			return;
-		}
-
-		removeAllEmptyAnchors( $, heading );
-
-		const headingId = $( heading ).attr( 'id' );
-		const $container = $( '<div class="doc b-heading"></div>' );
-
-		// Create the copy button
-		const button = renderButton( {
-			headingId
-		} );
-
-		// Place the heading element before the container in the DOM
-		$( heading ).before( $container );
-
-		$container.append( $( heading ) );
-		$container.append( $( button ) );
-	} );
-
-	page.content = $.html();
-
-	return page;
-}, 30 );
-
-/**
- * Removes all empty anchors that were created to hold the heading links buttons.
- */
-function removeAllEmptyAnchors( $, heading ) {
-	$( heading ).find( 'a' ).each( ( _, anchor ) => {
-		const $anchor = $( anchor );
-		const text = $anchor.text().trim().replace( '#', '' );
-
-		if ( !$anchor.children().length && !text ) {
-			$anchor.remove();
-		}
-	} );
-}
-
-/**
- * Checks if the element itself or any of its parents has the specified class.
- *
- * @param $element - The jQuery element to check.
- * @param className - The class name to look for.
- * @returns True if the element or any parent has the class, false otherwise.
- */
-function hasClassOrParentWithClass( $element, className ) {
-	return $element.hasClass( className ) || $element.parents( `.${ className }` ).length > 0;
-}

package/scripts/filter/after-post-render/gloria/apply-design-doc-classes.js

@@ -1,96 +0,0 @@
-/**
- * @license Copyright (c) 2017-2025, CKSource Holding sp. z o.o. All rights reserved.
- * For licensing, see LICENSE.md.
- */
-
-'use strict';
-
-const applyDesignDocClasses = require( '../../../utils/apply-design-doc-classes' );
-
-/**
- * Global mapping of HTML elements to their corresponding design system classes.
- */
-const ELEMENTS_CLASSES_MAPPINGS = {
-	'h1': 'b-h1',
-	'h2': 'b-h2',
-	'h3': 'b-h3',
-	'h4': 'b-h4',
-	'h5': 'b-h5',
-	'h6': 'b-h6',
-	'a': 'b-link',
-
-	// Text formatting elements
-	'p': 'b-paragraph',
-	'strong': 'b-bold',
-	'b': 'b-bold',
-	'em': 'b-italic',
-	'i': 'b-italic',
-	'code': 'b-inline-code',
-	'pre': 'b-code-block',
-	'blockquote': 'b-quote',
-	'hr': 'b-separator',
-	'span': 'b-text',
-	'small': 'b-small-text',
-	'sub': 'b-subscript',
-	'sup': 'b-superscript',
-
-	// List elements
-	'ul': [ 'b-list', 'b-list--unordered' ],
-	'ol': [ 'b-list', 'b-list--ordered' ],
-	'li': 'b-list__item',
-	'dl': 'b-description',
-	'dt': 'b-description__term',
-	'dd': 'b-description__details',
-
-	// Details
-	'details': 'b-details',
-	'summary': [ 'b-reset-button', 'b-details__summary' ],
-
-	// Table elements
-	'table': $element => {
-		const variant = $element.data( 'variant' ) || 'striped';
-
-		return [ 'b-table', `b-table--${ variant }` ];
-	},
-	'thead': 'b-table__header',
-	'tbody': 'b-table__body',
-	'tr': 'b-table__row',
-	'td': 'b-table__cell',
-	'th': [ 'b-table__cell', 'b-table__cell-header' ],
-
-	// Image and media elements
-	'img': 'b-image',
-	'figure': 'b-figure',
-	'figcaption': 'b-figure-caption',
-	'iframe': 'b-iframe',
-
-	// Accessibility elements
-	'kbd': 'c-keyboard-shortcut c-keyboard-shortcut--raised',
-	'mark': 'b-highlight'
-};
-
-/**
- * Classes that are allowed to be added to elements with existing classes.
- */
-const ELEMENTS_WITH_WHITELIST_CLASSES = [
-	'headerlink'
-];
-
-/**
- * Add design system classes to the parsed document elements.
- * It prevents leaking of styling to the embedded third party components such
- * as CKEditor 5, or any other components that are not part of the design system.
- */
-hexo.extend.filter.register( 'after_post_render', page => {
-	if ( page.projectTheme !== 'gloria' ) {
-		return page;
-	}
-
-	page.content = applyDesignDocClasses( {
-		elementsClassesMappings: ELEMENTS_CLASSES_MAPPINGS,
-		elementsWithWhitelistClasses: ELEMENTS_WITH_WHITELIST_CLASSES,
-		content: page.content
-	} );
-
-	return page;
-}, 40 );

package/scripts/filter/after-post-render/gloria/wrap-table-into-wrappers.js

@@ -1,36 +0,0 @@
-/**
- * @license Copyright (c) 2017-2025, CKSource Holding sp. z o.o. All rights reserved.
- * For licensing, see LICENSE.md.
- */
-
-'use strict';
-
-const cheerio = require( 'cheerio' );
-
-function wrapTableIntoWrappers( page ) {
-	if ( page.projectTheme !== 'gloria' ) {
-		return page;
-	}
-
-	const $ = cheerio.load( page.content, null, false );
-
-	$( 'table' ).each( ( _, table ) => {
-		if ( $( table ).parent().prop( 'tagName' ) !== 'FIGURE' ) {
-			// If the table is not wrapped in a figure, wrap it.
-			$( table ).wrap( '<figure class="doc b-table-wrapper"></figure>' );
-		}
-	} );
-
-	page.content = $.html();
-
-	return page;
-};
-
-/**
- * Enforce priority 30 to run it after apply design doc classes filter.
- */
-if ( typeof hexo !== 'undefined' ) {
-	hexo.extend.filter.register( 'after_post_render', wrapTableIntoWrappers, 30 );
-}
-
-module.exports = wrapTableIntoWrappers;

package/scripts/filter/after-render/gloria/inline-svg.js

@@ -1,14 +0,0 @@
-/**
- * @license Copyright (c) 2017-2025, CKSource Holding sp. z o.o. All rights reserved.
- * For licensing, see LICENSE.md.
- */
-
-'use strict';
-
-const inlineSvg = require( '../../../utils/inline-svg' );
-
-/**
- * Inlines SVG icons into HTML elements with data-inline-svg-image attribute.
- * The attribute value should contain the path to the SVG file.
- */
-hexo.extend.filter.register( 'after_render:html', inlineSvg, 500 );

package/scripts/filter/after-render/gloria/spritesheet-svg.js

@@ -1,14 +0,0 @@
-/**
- * @license Copyright (c) 2017-2025, CKSource Holding sp. z o.o. All rights reserved.
- * For licensing, see LICENSE.md.
- */
-
-'use strict';
-
-const spritesheetSvg = require( '../../../utils/spritesheet-svg' );
-
-/**
- * Creates a spritesheet from SVG files referenced by data-spritesheet-svg attributes
- * and injects it at the beginning of the body with display: none.
- */
-hexo.extend.filter.register( 'after_render:html', spritesheetSvg, 499 );