umberto 10.4.0 → 10.5.0

package/CHANGELOG.md

@@ -1,6 +1,20 @@
 Changelog
 =========
 
+## [10.5.0](https://github.com/cksource/umberto/compare/v10.4.1...v10.5.0) (April 14, 2026)
+
+### Features
+
+* Added the Call for feedback component for documentation pages.
+
+
+## [10.4.1](https://github.com/cksource/umberto/compare/v10.4.0...v10.4.1) (April 13, 2026)
+
+### Bug fixes
+
+* Fixed URL in the dropdown for LTS item to have absolute URL to pass documentation validation.
+
+
 ## [10.4.0](https://github.com/cksource/umberto/compare/v10.3.0...v10.4.0) (April 9, 2026)
 
 ### Features
@@ -33,20 +47,6 @@ Changelog
 * Added cyan LTS banner at the top of the page on LTS branch.
 * Updated the colour of nightly banner to yellow.
 
-
-## [10.1.4](https://github.com/cksource/umberto/compare/v10.1.3...v10.1.4) (March 20, 2026)
-
-### Other changes
-
-* Filter search results from Algolia to match the current docs version: `latest` or `lts-v47`. Filtering remains backward-compatible: hits without the docs version are still allowed.
-
-
-## [10.1.3](https://github.com/cksource/umberto/compare/v10.1.2...v10.1.3) (March 10, 2026)
-
-### Bug fixes
-
-* Fix regression introduced in `v10.1.2` affecting slugs generated for headings. Slugs generated now should be the same as in `v10.1.1` and previous versions of Umberto.
-
 ---
 
 To see all releases, visit the [release page](https://github.com/cksource/umberto/releases).

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "umberto",
-  "version": "10.4.0",
+  "version": "10.5.0",
   "description": "CKSource Documentation builder",
   "main": "src/index.js",
   "type": "module",

package/scripts/filter/after-post-render/gloria/validate-call-for-feedback-once.cjs

@@ -0,0 +1,24 @@
+/**
+ * @license Copyright (c) 2017-2026, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+'use strict';
+
+const countCallForFeedbackBlocks = require( '../../../utils/count-call-for-feedback-blocks.cjs' );
+
+hexo.extend.filter.register( 'after_post_render', page => {
+	if ( page.projectTheme !== 'gloria' || typeof page.content !== 'string' ) {
+		return page;
+	}
+
+	const count = countCallForFeedbackBlocks( page.content );
+
+	if ( count > 1 ) {
+		throw new Error(
+			`Call for feedback: expected at most one <ck:call-for-feedback /> per page, found ${ count } in ${ page.source }.`
+		);
+	}
+
+	return page;
+}, 47 );

package/scripts/filter/before-post-render/gloria/prerender-xml-pug-components.cjs

@@ -144,6 +144,16 @@ const PATTERN_ELEMENTS = [
 		]
 	},
 
+	// Call for feedback
+	{
+		pattern: /^(?:ck:)?call-for-feedback$/,
+		mixinName: 'call-for-feedback',
+		allowMarkdownContent: false,
+		requires: [
+			'_components/call-for-feedback/index'
+		]
+	},
+
 	// Labels
 	{
 		pattern: /(?:ck:)?snippet-footer$/,

package/scripts/utils/count-call-for-feedback-blocks.cjs

@@ -0,0 +1,27 @@
+/**
+ * @license Copyright (c) 2017-2026, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+'use strict';
+
+const { parseDocument } = require( 'htmlparser2' );
+const { selectAll } = require( 'css-select' );
+
+/**
+ * Counts rendered Call for feedback blocks (`aside.c-call-for-feedback`) in HTML.
+ *
+ * @param {string} html
+ * @returns {number}
+ */
+function countCallForFeedbackBlocks( html ) {
+	if ( !html || typeof html !== 'string' ) {
+		return 0;
+	}
+
+	const doc = parseDocument( html );
+
+	return selectAll( 'aside.c-call-for-feedback', doc ).length;
+}
+
+module.exports = countCallForFeedbackBlocks;

package/src/tasks/build-documentation.js

@@ -163,8 +163,7 @@ export const buildDocumentation = options => {
 					{ name: 'CKEditor 5', slug: 'ckeditor5' },
 					{
 						name: 'CKEditor 5 LTS Edition',
-						slug: 'ckeditor5',
-						channel: 'lts-v47',
+						href: 'https://ckeditor.com/docs/ckeditor5/lts-v47/index.html',
 						rel: 'nofollow'
 					},
 					{ name: 'Cloud Services', slug: 'cs' },

package/themes/umberto/layout/gloria/_components/call-for-feedback/_style.scss

@@ -0,0 +1,47 @@
+.c-call-for-feedback {
+	box-sizing: border-box;
+	display: flex;
+	flex-direction: column;
+	align-items: flex-start;
+	gap: var(--spacing-2);
+	margin: var(--spacing-7) 0 0;
+	padding: var(--spacing-4);
+	border: 1.5px solid var(--color-primary-300);
+	border-radius: var(--radius-1);
+	background: var(--color-common-white);
+
+	&__title {
+		margin: 0;
+		font-family: var(--font-family-heading);
+		font-size: var(--font-size-lg);
+		line-height: var(--line-height-sm);
+		font-weight: var(--font-weight-bold);
+		color: var(--color-primary-500);
+	}
+
+	&__text {
+		margin: 0;
+		font-family: var(--font-family-text);
+		font-weight: var(--font-weight-thin);
+		font-size: var(--font-size-base);
+		line-height: var(--line-height-base);
+		color: var(--color-text-primary);
+	}
+
+	&__link {
+		color: var(--color-primary-500);
+		text-decoration: underline;
+		text-decoration-color: var(--color-primary-300);
+		text-underline-offset: 0.15em;
+
+		&:hover {
+			text-decoration-color: var(--color-primary-500);
+		}
+
+		&:focus-visible,
+		&:active {
+			color: var(--color-primary-600);
+			text-decoration-color: var(--color-primary-600);
+		}
+	}
+}

package/themes/umberto/layout/gloria/_components/call-for-feedback/index.pug

@@ -0,0 +1,16 @@
+//- Call for feedback component
+//-
+//- Examples:
+//- +call-for-feedback()
+//-
+//- <ck:call-for-feedback />
+//-
+//- <call-for-feedback />
+mixin call-for-feedback()
+	//- Stable id: at most one block per page (build fails if more); see validate-call-for-feedback-once.cjs.
+	aside.c-call-for-feedback( role='complementary' aria-labelledby='call-for-feedback-title' )
+		h3.c-call-for-feedback__title#call-for-feedback-title Call for feedback
+		p.c-call-for-feedback__text
+			| Have an idea for future improvements? We'd love to hear from you! Share your thoughts and suggestions with us through our&nbsp;
+			a.c-call-for-feedback__link( href='https://ckeditor.com/contact/' ) contact form
+			| .

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

@@ -52,7 +52,7 @@ mixin dropdown({ id: dropdownId, className, preferredDirection, contentId, updat
 //- +dropdown-item({ label: 'Item with icon', icon: 'github' })
 //- +dropdown-item({ label: 'Custom link', href: '/custom-link', rel: 'nofollow' })
 //- +dropdown-item({ label: 'With ID', itemId: 'special-item' })
-mixin dropdown-item({ itemId, href, rel, active = false, narrow, label, icon, value, projectSlug, projectChannel } = {})
+mixin dropdown-item({ itemId, href, rel, active = false, narrow, label, icon, value, projectKey } = {})
 	- const tag = href ? 'a' : 'div';
 
 	li.c-dropdown__list-item
@@ -65,8 +65,7 @@ mixin dropdown-item({ itemId, href, rel, active = false, narrow, label, icon, va
 				'c-dropdown__item--narrow': !!narrow
 			},
 			data-item-id=itemId,
-			data-project-slug=projectSlug,
-			data-project-channel=projectChannel,
+			data-project-key=projectKey,
 			data-value=value,
 			tabindex='-1'
 		)

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

@@ -26,6 +26,7 @@ include ./card-learn-more-links/index
 include ./card/index
 include ./skeleton/index
 include ./fake-devtools/index
+include ./call-for-feedback/index
 include ./iframe/index
 include ./tag/index
 include ./columns/index

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

@@ -1,6 +1,19 @@
 mixin nav-project-select-dropdown()
 	-
-		const getProjectHref = project => relative_url( page.path, `${ project.slug }/${ project.channel || 'latest' }/index.html` );
+		const getProjectKey = pathname => {
+			const segments = pathname.split( '/' ).filter( Boolean );
+
+			if ( segments[ 0 ] === 'docs' ) {
+				segments.shift();
+			}
+
+			const [ slug, rawChannel ] = segments;
+			const channel = /^\d+\.\d+\.\d+$/.test( rawChannel || '' ) ? 'latest' : ( rawChannel || 'latest' );
+
+			return slug ? `/${ slug }/${ channel }` : '';
+		};
+		const getProjectHref = project => project.href || relative_url( page.path, `${ project.slug }/${ project.channel || 'latest' }/index.html` );
+		const getItemProjectKey = project => getProjectKey( project.href ? new URL( project.href ).pathname : `/${ project.slug }/${ project.channel || 'latest' }/index.html` );
 		const currentProject = projectLocals && quickNavigationProjects && quickNavigationProjects.find(
 			project => project.slug === projectLocals.projectSlug && !project.channel
 		);
@@ -16,29 +29,36 @@ mixin nav-project-select-dropdown()
 					( project.channel || 'latest' ) === 'latest',
 				href: getProjectHref( project ),
 				rel: project.rel,
-				projectSlug: project.slug,
-				projectChannel: project.channel || 'latest'
+				projectKey: getItemProjectKey( project )
 			})
 
 	if currentProject
 		script.
 			(function() {
 				const script = document.currentScript;
+				const getProjectKey = pathname => {
+					const segments = pathname.split( '/' ).filter( Boolean );
+
+					if ( segments[ 0 ] === 'docs' ) {
+						segments.shift();
+					}
+
+					const [ slug, rawChannel ] = segments;
+					const channel = /^\d+\.\d+\.\d+$/.test( rawChannel || '' ) ? 'latest' : ( rawChannel || 'latest' );
+
+					return slug ? `/${ slug }/${ channel }` : '';
+				};
 
 				document.addEventListener( 'DOMContentLoaded', () => {
 					const dropdown = script?.previousElementSibling;
-					const currentProjectSlug = !{ JSON.stringify( currentProject.slug ) };
-					const segments = window.location.pathname.split( '/' ).filter( Boolean );
-					const slugIndex = segments.indexOf( currentProjectSlug );
+					const currentProjectKey = getProjectKey( window.location.pathname );
 
-					if ( !dropdown || slugIndex < 0 ) {
+					if ( !dropdown || !currentProjectKey ) {
 						return;
 					}
 
-					const rawChannel = segments[ slugIndex + 1 ];
-					const currentChannel = /^\d+\.\d+\.\d+$/.test( rawChannel || '' ) ? 'latest' : ( rawChannel || 'latest' );
-					const items = Array.from( dropdown.querySelectorAll( '.c-dropdown__item[data-project-slug][data-project-channel]' ) );
-					const activeItem = items.find( item => item.dataset.projectSlug === currentProjectSlug && item.dataset.projectChannel === currentChannel );
+					const items = Array.from( dropdown.querySelectorAll( '.c-dropdown__item[data-project-key]' ) );
+					const activeItem = items.find( item => item.dataset.projectKey === currentProjectKey );
 
 					if ( !activeItem ) {
 						return;

package/themes/umberto/layout/gloria/_modules/mobile-nav/index.pug

@@ -3,7 +3,20 @@ include ./slide-parts
 mixin mobile-nav()
 	-
 		const currentProject = projectLocals && projectsData.find( project => project.slug === projectLocals.projectSlug );
-		const getProjectHref = project => relative_url( page.path, `${ project.slug }/${ project.channel || 'latest' }/index.html` );
+		const getProjectKey = pathname => {
+			const segments = pathname.split( '/' ).filter( Boolean );
+
+			if ( segments[ 0 ] === 'docs' ) {
+				segments.shift();
+			}
+
+			const [ slug, rawChannel ] = segments;
+			const channel = /^\d+\.\d+\.\d+$/.test( rawChannel || '' ) ? 'latest' : ( rawChannel || 'latest' );
+
+			return slug ? `/${ slug }/${ channel }` : '';
+		};
+		const getProjectHref = project => project.href || relative_url( page.path, `${ project.slug }/${ project.channel || 'latest' }/index.html` );
+		const getItemProjectKey = project => getProjectKey( project.href ? new URL( project.href ).pathname : `/${ project.slug }/${ project.channel || 'latest' }/index.html` );
 		let initialSlideId = projectLocals ? `project-${projectLocals.projectSlug}` : 'products';
 
 		// If the page has a category, set the initial slide to that category's slide
@@ -30,37 +43,43 @@ mixin mobile-nav()
 								label: project.name,
 								active: true,
 								targetSlideId: `project-${ project.slug }`,
-								projectSlug: project.slug,
-								projectChannel: project.channel || 'latest'
+								projectKey: getItemProjectKey( project )
 							})
 						else
 							+mobile-nav-item({
 								href: getProjectHref( project ),
 								label: project.name,
 								rel: project.rel,
-								projectSlug: project.slug,
-								projectChannel: project.channel || 'latest'
+								projectKey: getItemProjectKey( project )
 							})
 
 		if currentProject
 			script.
 				(function() {
 					const script = document.currentScript;
+					const getProjectKey = pathname => {
+						const segments = pathname.split( '/' ).filter( Boolean );
+
+						if ( segments[ 0 ] === 'docs' ) {
+							segments.shift();
+						}
+
+						const [ slug, rawChannel ] = segments;
+						const channel = /^\d+\.\d+\.\d+$/.test( rawChannel || '' ) ? 'latest' : ( rawChannel || 'latest' );
+
+						return slug ? `/${ slug }/${ channel }` : '';
+					};
 
 					document.addEventListener( 'DOMContentLoaded', () => {
 						const mobileNav = script?.previousElementSibling;
-						const currentProjectSlug = !{ JSON.stringify( currentProject.slug ) };
-						const segments = window.location.pathname.split( '/' ).filter( Boolean );
-						const slugIndex = segments.indexOf( currentProjectSlug );
+						const currentProjectKey = getProjectKey( window.location.pathname );
 
-						if ( !mobileNav || slugIndex < 0 ) {
+						if ( !mobileNav || !currentProjectKey ) {
 							return;
 						}
 
-						const rawChannel = segments[ slugIndex + 1 ];
-						const currentChannel = /^\d+\.\d+\.\d+$/.test( rawChannel || '' ) ? 'latest' : ( rawChannel || 'latest' );
-						const items = Array.from( mobileNav.querySelectorAll( '.c-mobile-nav__item[data-project-slug][data-project-channel]' ) );
-						const activeItem = items.find( item => item.dataset.projectSlug === currentProjectSlug && item.dataset.projectChannel === currentChannel );
+						const items = Array.from( mobileNav.querySelectorAll( '.c-mobile-nav__item[data-project-key]' ) );
+						const activeItem = items.find( item => item.dataset.projectKey === currentProjectKey );
 
 						if ( !activeItem ) {
 							return;

package/themes/umberto/layout/gloria/_modules/mobile-nav/slide-parts.pug

@@ -32,7 +32,7 @@ mixin mobile-nav-heading({ href, label })
 		iconPosition: 'right',
 	})
 
-mixin mobile-nav-item({ href, label, rel, targetSlideId, target, active = false, projectSlug, projectChannel })
+mixin mobile-nav-item({ href, label, rel, targetSlideId, target, active = false, projectKey })
 	li
 		if targetSlideId
 			+button({
@@ -49,15 +49,13 @@ mixin mobile-nav-item({ href, label, rel, targetSlideId, target, active = false,
 				'aria-controls'=`slide-${targetSlideId}`,
 				'aria-expanded'='false',
 				'aria-haspopup'='true',
-				'data-project-slug'=projectSlug,
-				'data-project-channel'=projectChannel
+				'data-project-key'=projectKey
 			)
 		else
 			a.b-link.c-mobile-nav__item(
 				href=href,
 				rel=rel,
-				data-project-slug=projectSlug,
-				data-project-channel=projectChannel,
+				data-project-key=projectKey,
 				class=active ? 'is-active' : '',
 				target=target
 			)= label

package/themes/umberto/src/gloria/css/components/_index.scss

@@ -35,6 +35,7 @@
 		'card',
 		'skeleton',
 		'fake-devtools',
+		'call-for-feedback',
 		'iframe',
 		'tag',
 		'snippet-footer'