umberto 10.4.0 → 10.4.1

package/CHANGELOG.md

@@ -1,6 +1,13 @@
 Changelog
 =========
 
+## [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
@@ -40,13 +47,6 @@ Changelog
 
 * 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.4.1",
   "description": "CKSource Documentation builder",
   "main": "src/index.js",
   "type": "module",

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/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/_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