umberto 8.0.3 → 8.2.0

package/CHANGELOG.md

@@ -1,6 +1,26 @@
 Changelog
 =========
 
+## [8.2.0](https://github.com/cksource/umberto/compare/v8.1.0...v8.2.0) (August 29, 2025)
+
+### Features
+
+* Added integration with the [Kapa.ai](https://www.kapa.ai/) service.
+
+  Umberto configuration can now specify the `kapa` key that allows loading the Kapa button and widget.
+
+
+## [8.1.0](https://github.com/cksource/umberto/compare/v8.0.3...v8.1.0) (August 12, 2025)
+
+### Features
+
+* Added support for relative paths in `packagesDir` option.
+
+### Bug fixes
+
+* Updated how `<iframe>` elements are created to fix issues with automated tests using Chrome v139.
+
+
 ## [8.0.3](https://github.com/cksource/umberto/compare/v8.0.2...v8.0.3) (August 5, 2025)
 
 ### Bug fixes
@@ -33,34 +53,6 @@ Changelog
   * Fixed the project selection dropdown: after rebuilding, it now correctly displays all available projects instead of only one.
   * Optimized the performance of the navigation tree building process, resulting in faster page loads and smoother navigation.
 
-
-## [8.0.0](https://github.com/cksource/umberto/compare/v7.0.2...v8.0.0) (July 18, 2025)
-
-### BREAKING CHANGES
-
-* Updated the required version of Node.js to 22.
-
-### Features
-
-* We have introduced a brand-new theme to elevate your UI experience. Enjoy a fresh look with improved aesthetics and feel.
-
-### Bug fixes
-
-* Removed link to unnecessary stylesheet that results in a 404.
-* Fixed output path calculation on Windows environment for generated HTML files. Previously, non-normalized CWD was used which caused the generated output path to contain invalid characters and be incorrect.
-
-### Other changes
-
-* The repository now uses ESLint v9. Therefore, the required Node.js version has been upgraded to 22 to match the ESLint requirements.
-* Update `LICENSE.md` file to include licenses of direct dependencies
-
-
-## [7.0.2](https://github.com/cksource/umberto/compare/v7.0.1...v7.0.2) (2025-05-20)
-
-### Bug fixes
-
-* Fixed an invalid protocol (should be `https://` instead of `https:/`) in the generated index sitemap file. Closes [#1277](https://github.com/cksource/umberto/issues/1277). ([commit](https://github.com/cksource/umberto/commit/6f59654e85b1230fbfe029efe68f708755ec6342))
-
 ---
 
 To see all releases, visit the [release page](https://github.com/cksource/umberto/releases).

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "umberto",
-  "version": "8.0.3",
+  "version": "8.2.0",
   "description": "CKSource Documentation builder",
   "main": "src/index.js",
   "files": [

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

@@ -5,7 +5,7 @@
 
 'use strict';
 
-const cheerio = require( 'cheerio' );
+const applyDesignDocClasses = require( '../../../utils/apply-design-doc-classes' );
 
 /**
  * Global mapping of HTML elements to their corresponding design system classes.
@@ -86,60 +86,11 @@ hexo.extend.filter.register( 'after_post_render', page => {
 		return page;
 	}
 
-	const $ = cheerio.load( page.content, null, false );
-
-	// Apply classes based on the global mapping
-	for ( const [ element, classesOrCallback ] of Object.entries( ELEMENTS_CLASSES_MAPPINGS ) ) {
-		const $elements = $( element );
-
-		$elements.each( ( _, element ) => {
-			const $element = $( element );
-
-			if ( hasClassOrParentWithClass( $element, 'no-transform' ) ) {
-				return;
-			}
-
-			// Add the 'doc' class to each element that gets styled
-			$element.addClass( 'doc' );
-
-			const classList = ( $element.attr( 'class' )?.split( /\s+/ ) || [] ).filter(
-				className => !ELEMENTS_WITH_WHITELIST_CLASSES.includes( className )
-			);
-
-			// Avoid applying classes to elements that already have one.
-			if ( classList.length > 1 ) {
-				return;
-			}
-
-			// Add the specified classes
-			if ( typeof classesOrCallback === 'function' ) {
-				const elementClasses = classesOrCallback( $element );
-
-				if ( Array.isArray( elementClasses ) ) {
-					$element.addClass( elementClasses.join( ' ' ) );
-				} else if ( typeof elementClasses === 'string' ) {
-					$element.addClass( elementClasses );
-				}
-			} else if ( Array.isArray( classesOrCallback ) ) {
-				$element.addClass( classesOrCallback.join( ' ' ) );
-			} else {
-				$element.addClass( classesOrCallback );
-			}
-		} );
-	}
-
-	page.content = $.html();
+	page.content = applyDesignDocClasses( {
+		elementsClassesMappings: ELEMENTS_CLASSES_MAPPINGS,
+		elementsWithWhitelistClasses: ELEMENTS_WITH_WHITELIST_CLASSES,
+		content: page.content
+	} );
 
 	return page;
 }, 40 );
-
-/**
- * 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/wrap-table-into-wrappers.js

@@ -7,10 +7,7 @@
 
 const cheerio = require( 'cheerio' );
 
-/**
- * Enforce priority 30 to run it after apply design doc classes filter.
- */
-hexo.extend.filter.register( 'after_post_render', page => {
+function wrapTableIntoWrappers( page ) {
 	if ( page.projectTheme !== 'gloria' ) {
 		return page;
 	}
@@ -27,4 +24,13 @@ hexo.extend.filter.register( 'after_post_render', page => {
 	page.content = $.html();
 
 	return page;
-}, 30 );
+};
+
+/**
+ * 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/utils/apply-design-doc-classes.js

@@ -0,0 +1,82 @@
+/**
+ * @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' );
+
+/**
+ * Add design system classes to the parsed document elements. If element has 0 CSS classes
+ * it'll be considered as not styled and the design system classes will be applied.
+
+ * @param options - Options for applying design classes.
+ * @param options.elementsClassesMappings - Mappings of elements to their classes or
+ *     functions that return classes.
+ * @param options.elementsWithWhitelistClasses - List of classes that are
+ *     considered as transparent in checks for amount of the classes.
+ * @param options.content - The HTML content to process.
+ */
+module.exports = function applyDesignDocClasses(
+	{
+		elementsClassesMappings,
+		elementsWithWhitelistClasses,
+		content
+	}
+) {
+	const $ = cheerio.load( content, null, false );
+
+	// Apply classes based on the global mapping
+	for ( const [ element, classesOrCallback ] of Object.entries( elementsClassesMappings ) ) {
+		const $elements = $( element );
+
+		$elements.each( ( _, element ) => {
+			const $element = $( element );
+
+			if ( hasClassOrParentWithClass( $element, 'no-transform' ) ) {
+				return;
+			}
+
+			// Add the 'doc' class to each element that gets styled
+			$element.addClass( 'doc' );
+
+			const classList = ( $element.attr( 'class' )?.split( /\s+/ ) || [] ).filter(
+				className => !elementsWithWhitelistClasses.includes( className )
+			);
+
+			// Avoid applying classes to elements that already have one.
+			if ( classList.length > 1 ) {
+				return;
+			}
+
+			// Add the specified classes
+			if ( typeof classesOrCallback === 'function' ) {
+				const elementClasses = classesOrCallback( $element );
+
+				if ( Array.isArray( elementClasses ) ) {
+					$element.addClass( elementClasses.join( ' ' ) );
+				} else if ( typeof elementClasses === 'string' ) {
+					$element.addClass( elementClasses );
+				}
+			} else if ( Array.isArray( classesOrCallback ) ) {
+				$element.addClass( classesOrCallback.join( ' ' ) );
+			} else {
+				$element.addClass( classesOrCallback );
+			}
+		} );
+	}
+
+	return $.html();
+};
+
+/**
+ * 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/utils/{pipe.js → compose.js}

@@ -12,6 +12,6 @@
  * @param {*} value - The initial value to be processed by the functions.
  * @returns {*} The final result after all functions have been applied.
  */
-module.exports = function pipe( ...fns ) {
+module.exports = function compose( ...fns ) {
 	return value => fns.reduce( ( acc, fn ) => fn( acc ), value );
 };

package/scripts/utils/concat-url-parts.js

@@ -7,13 +7,13 @@
 
 const dropInitSlash = require( './drop-init-slash' );
 const dropTrailingSlash = require( './drop-trailing-slash' );
-const pipe = require( './pipe' );
+const compose = require( './compose' );
 
 module.exports = function concatUrlParts( ...urls ) {
 	return (
 		urls
 			.filter( Boolean )
-			.map( pipe( dropTrailingSlash, dropInitSlash ) )
+			.map( compose( dropTrailingSlash, dropInitSlash ) )
 			.join( '/' )
 	);
 };

package/src/helpers/resolve-path.js

@@ -0,0 +1,13 @@
+/**
+ * @license Copyright (c) 2017-2025, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+'use strict';
+
+/**
+ * Wrapper around `require.resolve()` to allow mocking it in tests.
+ */
+module.exports = function resolvePath( path, options ) {
+	return require.resolve( path, options );
+};

package/src/hexo/filter/project-locals.js

@@ -20,6 +20,7 @@ const umbertoVersion = require( '../../../package.json' ).version;
  * @param {Object} googleoptimize Google Optimize config.
  * @param {Object} googletagmanager Google Tag Manager config.
  * @param {Object} googleanalytics Google Analytics config.
+ * @param {Object} kapa Kapa.ai config.
  * @param {Object} vwo Visual Website Optimizer config.
  * @param {Object} feedbackWidget Feedback widget config
  * @param {Array} extraStylePaths Paths to extra external css.
@@ -36,6 +37,7 @@ module.exports = ( ctx, {
 	googleoptimize,
 	googletagmanager,
 	googleanalytics,
+	kapa,
 	promobar,
 	vwo,
 	feedbackWidget,
@@ -105,6 +107,7 @@ module.exports = ( ctx, {
 		locals.googleoptimize = googleoptimize;
 		locals.googletagmanager = googletagmanager;
 		locals.googleanalytics = googleanalytics;
+		locals.kapa = kapa;
 		locals.promobar = promobar;
 		locals.vwo = vwo;
 		locals.feedbackWidget = feedbackWidget;

package/src/hexo/get-repo-urls.js

@@ -17,7 +17,7 @@ module.exports = ( {
 	guidesToRepos.default = defaultRepoUrl;
 
 	for ( const item of packages ) {
-		const packageRepoUrl = getRepoUrl( upath.join( rootPath, item.path ) );
+		const packageRepoUrl = getRepoUrl( upath.resolve( rootPath, item.path ) );
 		globSync( upath.join( rootPath, item.path, 'docs', '**', '*.md' ) )
 			.map( p => upath.normalize( p ) )
 			.map( p => p.replace( upath.join( rootPath, item.path, 'docs' ), '' ) )

package/src/tasks/build-documentation.js

@@ -141,6 +141,7 @@ module.exports = options => {
 				googleoptimize: mainConfig.googleoptimize,
 				googletagmanager: mainConfig.googletagmanager,
 				googleanalytics: mainConfig.googleanalytics,
+				kapa: mainConfig.kapa,
 				promobar: mainConfig.promobar,
 				sitemap: mainConfig.sitemap,
 				vwo: mainConfig.vwo,
@@ -275,6 +276,7 @@ async function buildProjects( rootPath, projectPaths, options = {} ) {
 				googleoptimize: options.googleoptimize,
 				googletagmanager: options.googletagmanager,
 				googleanalytics: options.googleanalytics,
+				kapa: options.kapa,
 				promobar: options.promobar,
 				sitemap: options.sitemap,
 				vwo: options.vwo,
@@ -353,6 +355,7 @@ async function buildProjects( rootPath, projectPaths, options = {} ) {
 			googleoptimize: options.googleoptimize,
 			googletagmanager: options.googletagmanager,
 			googleanalytics: options.googleanalytics,
+			kapa: options.kapa,
 			promobar: options.promobar,
 			quickNavigationProjects: options.quickNavigationProjects,
 			vwo: options.vwo,
@@ -465,6 +468,7 @@ async function buildApis( projectConfigs, options = {} ) {
 				googleoptimize: options.googleoptimize,
 				googletagmanager: options.googletagmanager,
 				googleanalytics: options.googleanalytics,
+				kapa: options.kapa,
 				promobar: options.promobar,
 				vwo: options.vwo,
 				feedbackWidget: options.feedbackWidget,

package/src/tasks/copy-project-docs.js

@@ -58,13 +58,13 @@ module.exports = ( rootPath, config, options ) => {
 	if ( config.items && Array.isArray( config.items ) ) {
 		for ( const item of config.items ) {
 			hexoManager.addOriginPath(
-				upath.join( rootPath, item.path, config.path ),
-				upath.join( hexoManager.getSourceDir(), BASE_PATH )
+				upath.resolve( rootPath, item.path, config.path ),
+				upath.resolve( hexoManager.getSourceDir(), BASE_PATH )
 			);
 
 			promises.push( copyDocFiles(
-				upath.join( rootPath, item.path, config.path ),
-				upath.join( hexoManager.getSourceDir(), BASE_PATH ),
+				upath.resolve( rootPath, item.path, config.path ),
+				upath.resolve( hexoManager.getSourceDir(), BASE_PATH ),
 				{
 					match,
 					allOutputPaths,

package/src/tasks/copy-project-icons.js

@@ -7,6 +7,7 @@
 
 const upath = require( 'upath' );
 const fs = require( 'fs-extra' );
+const resolvePath = require( '../helpers/resolve-path' );
 
 /**
  * @returns {Promise<void>}
@@ -19,7 +20,9 @@ module.exports = async function copyProjectIcons( projectGlobals, buildDirectory
 		const destinationIconsPath = upath.join( buildDirectory, projectDetails.BASE_PATH, 'assets', 'icons' );
 
 		for ( const [ sourceFile, destinationName ] of projectDetails._icons ) {
-			const fullSourcePath = upath.join( projectDetails.config.projectRootPath, 'node_modules', sourceFile );
+			const fullSourcePath = resolvePath( sourceFile, {
+				paths: [ projectDetails.config.projectRootPath ]
+			} );
 			const fullDestinationPath = upath.join( destinationIconsPath, destinationName );
 
 			try {

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

@@ -16,12 +16,13 @@
 //- +button({ variant: 'secondary' })
 //- +button({ variant: 'transparent', fillColor: '--color-orange-600' })
 //-   span Custom content
-mixin button({ variant = 'primary', tooltip, blockDisplay, active, disabled, id, className, square, rounded, type = 'button', size = 'base', label, ariaLabel, ariaControls, icon, labelClassName, iconClassName, fillColor, iconPosition = 'left' })
+mixin button({ variant = 'primary', tooltip, blockDisplay, active, disabled, id, className, square, rounded, type = 'button', size = 'base', label, ariaLabel, ariaControls, icon, labelClassName, iconClassName, fillColor, iconPosition = 'left', onClick })
 	- const showTooltip = !!id && !!tooltip && !ariaLabel;
 
 	button.c-button(
 		id=id,
 		disabled=disabled,
+		onClick=onClick || false,
 		class={
 			'is-block': blockDisplay,
 			'is-active': active,

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

@@ -45,6 +45,8 @@ if page.BASE_PATH && page.BASE_PATH !== '.' && !page.BASE_PATH.includes( 'latest
 	link( rel = 'canonical' href = page.canonicalUrlBeginning + page.path.replace( page.BASE_PATH, projectLocals.latestBasePath ) )
 
 +head-preloads()
+if kapa
+	+load-kapa-script(kapa)
 
 script(src=relative_url(page.path, pathJoin( 'assets', umbertoVersion, 'gloria/scripts/app.js')))
 

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

@@ -50,6 +50,8 @@ mixin header({ withChooseProject = true, className = '' } = {})
 
 				.c-header__brand-row-toolbar.u-flex-horizontal.u-align-items-center
 					+algolia-search
+					if kapa
+						+kapa-button
 					+button-link({
 						label: 'Sign up',
 						icon: 'export',

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

@@ -12,3 +12,4 @@ include ./header-promobar/index
 include ./breadcrumbs/index
 include ./algolia-search/index
 include ./not-found/index
+include ./kapa/index

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

@@ -0,0 +1,102 @@
+mixin load-kapa-script(kapa)
+	-
+		const mainColor = '#743CCD';
+		const textPrimaryColor = '#00091B';
+		const textSecondaryColor = '#585B5F';
+		const infoPanelBackgroundColor = '#F8F9FA';
+		const standardBorder = '1px solid var(--mantine-color-gray-3)';
+		const buttonHoverBgColor = 'var(--mantine-color-default-hover)';
+		const exampleQuestionsTitleColor = 'var(--mantine-color-gray-text)';
+
+		var attributes = {
+			'async': true,
+			'fetchpriority': 'low',
+			'src': 'https://widget.kapa.ai/kapa-widget.bundle.js',
+			'data-website-id': kapa.widgetOptions.websiteId,
+			'data-project-name': kapa.widgetOptions.projectName,
+
+			// 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?',
+			'data-button-image': 'https://ckeditor.com/docs/ckeditor5/latest/assets/img/ckeditor5-logo-white.svg',
+			'data-button-width': 'fit-content',
+			'data-button-height': '90px',
+			'data-button-padding': '12px',
+
+			// Modal style.
+			'data-modal-size': '900px',
+			'data-modal-z-index': '2000',
+			'data-modal-border-radius': '6px',
+
+			// Modal title.
+			'data-modal-title': 'AI Helper',
+			'data-modal-title-color': textPrimaryColor,
+
+			// Modal disclaimer.
+			'data-modal-disclaimer': 'Disclaimer: Responses are generated by AI and may contain inaccuracies. Please verify the information with the official documentation.',
+			'data-modal-disclaimer-text-color': exampleQuestionsTitleColor,
+			'data-modal-disclaimer-bg-color': infoPanelBackgroundColor,
+
+			// Modal example questions.
+			'data-example-question-button-border': standardBorder,
+			'data-example-question-button-text-color': textSecondaryColor,
+
+			// Modal question input.
+			'data-query-input-text-color': textPrimaryColor,
+			'data-query-input-placeholder-text-color': textSecondaryColor,
+			'data-modal-ask-ai-input-placeholder': 'Ask me a question about the project...',	
+
+			// Modal deep thinking button.
+			'data-deep-thinking-button-text-color': textSecondaryColor,
+
+			// Modal answer.
+			'data-question-text-color': textPrimaryColor,
+			'data-answer-text-color': textPrimaryColor,
+
+			// Modal copy, clear & feedback buttons.
+			'data-answer-copy-button-bg-color': 'white',
+			'data-answer-copy-button-border': standardBorder,
+			'data-answer-copy-button-hover-bg-color': buttonHoverBgColor,
+			'data-thread-clear-button-bg-color': 'white',
+			'data-thread-clear-button-border': standardBorder,
+			'data-thread-clear-button-hover-bg-color': buttonHoverBgColor,
+			'data-answer-feedback-button-bg-color': 'white',
+			'data-answer-feedback-button-border': standardBorder,
+			'data-answer-feedback-button-active-bg-color': buttonHoverBgColor,
+
+			// Modal answer source buttons.
+			'data-source-link-primary-heading-text-color': textPrimaryColor,
+			'data-source-link-secondary-heading-text-color': textSecondaryColor,
+			'data-source-link-hover-bg-color': buttonHoverBgColor,
+		}
+
+		const projectConfig = projectLocals && kapa[ projectLocals.projectSlug ];
+		const modalTitle = projectConfig && projectConfig.modalTitle;
+		const questionPlaceholder = projectConfig && projectConfig.questionPlaceholder;
+		const exampleQuestions = projectConfig && projectConfig.exampleQuestions;
+
+		if ( modalTitle ) {
+			attributes[ 'data-modal-title' ] = modalTitle;
+		}
+
+		if ( questionPlaceholder ) {
+			attributes[ 'data-modal-ask-ai-input-placeholder' ] = questionPlaceholder;
+		}
+
+		if ( exampleQuestions && exampleQuestions.length ) {
+			attributes[ 'data-modal-example-questions' ] = exampleQuestions.join( ',' );
+		}
+
+	script&attributes(attributes)
+
+mixin kapa-button
+	+button({
+		label: 'Ask AI',
+		icon: 'chat',
+		variant: 'toolbar',
+		onClick: 'window.Kapa(\'open\')'
+	})

package/themes/umberto/source/gloria/assets/_img/icons/chat.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1.76782 15.2671C1.82839 15.2671 1.88757 15.2565 1.94458 15.2388L4.21411 14.4995C6.12656 15.1316 8.2129 14.7834 9.80396 13.6245L9.79517 13.6167C10.4093 13.5828 11.0272 13.4619 11.6252 13.2495L13.886 13.9614C13.9575 13.984 14.033 13.9924 14.1077 13.9858C14.1823 13.9793 14.2551 13.958 14.3215 13.9233C14.388 13.8887 14.4472 13.8411 14.4954 13.7837C14.5434 13.7263 14.5794 13.6598 14.6018 13.5884C14.6197 13.5348 14.6292 13.4776 14.6292 13.4204L14.6428 11.0522C16.3963 8.78261 16.4699 5.58834 14.7502 3.21338C12.6163 0.290177 8.51232 -0.357907 5.58911 1.76709C5.20354 2.0456 4.85922 2.35857 4.55396 2.69775L4.55396 2.6958C3.19644 3.06057 2.00514 3.87984 1.17896 5.01709C-0.417359 7.21518 -0.376417 10.1666 1.19653 12.3022L1.19653 14.6958C1.19668 15.0116 1.45198 15.2669 1.76782 15.2671ZM11.5891 11.8921L11.3752 11.981C9.15207 12.847 6.59175 12.1221 5.16138 10.1597C3.45604 7.81327 3.97848 4.51834 6.33911 2.80225C8.69255 1.09877 11.9926 1.62058 13.7141 3.98096C15.1284 5.92914 15.0285 8.58439 13.5178 10.4272L13.3752 10.5884L13.3577 12.4458L11.5891 11.8921ZM2.50024 11.856L2.35767 11.6772C0.991728 9.98443 0.917806 7.56318 2.21411 5.78467C2.53375 5.34003 2.91082 4.97189 3.32153 4.67725L3.33228 4.67041C2.53946 6.68459 2.76114 9.04694 4.12524 10.9272C4.96108 12.0747 6.14695 12.9202 7.50415 13.3364L7.50024 13.3384C6.51275 13.6152 5.44653 13.5848 4.44653 13.2134L4.23267 13.1245L2.48267 13.7134L2.50024 11.856ZM6.9104 7.8042C7.3229 7.8042 7.64282 7.484 7.64282 7.08936C7.6426 6.69491 7.32276 6.37549 6.9104 6.37549C6.53378 6.37553 6.21434 6.69493 6.21411 7.08936C6.21411 7.48397 6.53365 7.80415 6.9104 7.8042ZM9.4104 7.8042C9.8229 7.8042 10.1428 7.484 10.1428 7.08936C10.1426 6.69491 9.82276 6.37549 9.4104 6.37549C9.03378 6.37553 8.71434 6.69493 8.71411 7.08936C8.71411 7.48397 9.03365 7.80415 9.4104 7.8042ZM11.9104 7.8042C12.3229 7.8042 12.6428 7.484 12.6428 7.08936C12.6426 6.69491 12.3228 6.37549 11.9104 6.37549C11.5338 6.37554 11.2143 6.69493 11.2141 7.08936C11.2141 7.48397 11.5337 7.80415 11.9104 7.8042Z" fill="#585B5F"/>
+</svg>

package/themes/umberto/src/gloria/js/components/iframe.js

@@ -71,10 +71,7 @@ export class IFrame extends BaseComponent {
 	 * @param content - HTML content to load
 	 */
 	setContent( content ) {
-		const iframe = this.elements.iframe;
-		const iframeDocument = iframe.contentDocument || iframe.contentWindow?.document;
-
-		const wrappedHTML = `
+		this.elements.iframe.srcdoc = `
 			<!DOCTYPE html>
 			${ content }
 			${ this.config.autoResize ? `
@@ -91,12 +88,6 @@ export class IFrame extends BaseComponent {
 			</script>
 			` : '' }
 		`;
-
-		if ( iframeDocument ) {
-			iframeDocument.open();
-			iframeDocument.write( wrappedHTML );
-			iframeDocument.close();
-		}
 	}
 
 	/**

package/themes/umberto/src/gloria/js/helpers/{pipe.js → compose.js}

@@ -3,6 +3,6 @@
  * For licensing, see LICENSE.md.
  */
 
-export function pipe( ...fns ) {
+export function compose( ...fns ) {
 	return value => fns.reduce( ( acc, fn ) => fn( acc ), value );
 }

package/themes/umberto/src/gloria/js/modules/algolia-search.js

@@ -6,7 +6,7 @@
 import { BaseComponent } from '../components/base-component';
 import { identity } from '../helpers/identity';
 import { injectScript } from '../helpers/inject-script';
-import { pipe } from '../helpers/pipe';
+import { compose } from '../helpers/compose';
 
 const DOCSEARCH_JS_URL = 'https://cdn.jsdelivr.net/npm/@docsearch/js@3.9.0/dist/umd/index.min.js';
 
@@ -67,7 +67,7 @@ export class AlgoliaSearch extends BaseComponent {
 
 				client.search = async ( options, ...rest ) => {
 					const { results: [ firstResult ] } = await originalSearch( options, ...rest );
-					const mappedResults = pipe(
+					const mappedResults = compose(
 						filterByTags( { slug, tags } ),
 						boostByTags( boost.tags )
 					)( firstResult.hits );
@@ -110,7 +110,7 @@ function boostByTags( tags ) {
 		return identity;
 	}
 
-	return pipe(
+	return compose(
 		groupByTag,
 		sortObjectKeysByIndices( tags ),
 		Object.values,