umberto 10.3.0 → 10.4.0

package/CHANGELOG.md

@@ -1,6 +1,13 @@
 Changelog
 =========
 
+## [10.4.0](https://github.com/cksource/umberto/compare/v10.3.0...v10.4.0) (April 9, 2026)
+
+### Features
+
+* Added the LTS edition to the docs product picker.
+
+
 ## [10.3.0](https://github.com/cksource/umberto/compare/v10.2.0...v10.3.0) (April 3, 2026)
 
 ### Features
@@ -40,13 +47,6 @@ Changelog
 
 * 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.
 
-
-## [10.1.2](https://github.com/cksource/umberto/compare/v10.1.1...v10.1.2) (March 9, 2026)
-
-### Bug fixes
-
-* Removed unmaintained `hexo-renderer-markdown-it-plus` and `@ckeditor/jsdoc-plugins` dependencies by replacing them with maintained and local implementations, resolving the reported `markdown-it`-related vulnerabilities in Umberto's dependency tree.
-
 ---
 
 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.3.0",
+  "version": "10.4.0",
   "description": "CKSource Documentation builder",
   "main": "src/index.js",
   "type": "module",

package/src/tasks/build-documentation.js

@@ -161,6 +161,12 @@ export const buildDocumentation = options => {
 				macrosVariables: mainConfig.variables,
 				quickNavigationProjects: mainConfig.quickNavigationProjects || [
 					{ name: 'CKEditor 5', slug: 'ckeditor5' },
+					{
+						name: 'CKEditor 5 LTS Edition',
+						slug: 'ckeditor5',
+						channel: 'lts-v47',
+						rel: 'nofollow'
+					},
 					{ name: 'Cloud Services', slug: 'cs' },
 					{ name: 'CKBox', slug: 'ckbox' }
 				],

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

@@ -50,20 +50,23 @@ mixin dropdown({ id: dropdownId, className, preferredDirection, contentId, updat
 //- +dropdown-item({ label: 'Active item', active: true })
 //- +dropdown-item({ label: 'Item with value', value: 'custom-value' })
 //- +dropdown-item({ label: 'Item with icon', icon: 'github' })
-//- +dropdown-item({ label: 'Custom link', href: '/custom-link' })
+//- +dropdown-item({ label: 'Custom link', href: '/custom-link', rel: 'nofollow' })
 //- +dropdown-item({ label: 'With ID', itemId: 'special-item' })
-mixin dropdown-item({ itemId, href, active = false, narrow, label, icon, value } = {})
+mixin dropdown-item({ itemId, href, rel, active = false, narrow, label, icon, value, projectSlug, projectChannel } = {})
 	- const tag = href ? 'a' : 'div';
 
 	li.c-dropdown__list-item
 		#{tag}.b-reset-link.c-dropdown__item(
 			role='menuitem',
 			href=href,
+			rel=rel,
 			class={
 				'is-active': active,
 				'c-dropdown__item--narrow': !!narrow
 			},
 			data-item-id=itemId,
+			data-project-slug=projectSlug,
+			data-project-channel=projectChannel,
 			data-value=value,
 			tabindex='-1'
 		)

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

@@ -1,7 +1,8 @@
 mixin nav-project-select-dropdown()
 	-
+		const getProjectHref = project => relative_url( page.path, `${ project.slug }/${ project.channel || 'latest' }/index.html` );
 		const currentProject = projectLocals && quickNavigationProjects && quickNavigationProjects.find(
-			project => project.slug === projectLocals.projectSlug
+			project => project.slug === projectLocals.projectSlug && !project.channel
 		);
 
 	+menu-dropdown({
@@ -10,7 +11,49 @@ mixin nav-project-select-dropdown()
 		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`)
+				active: !!currentProject &&
+					project.slug === currentProject.slug &&
+					( project.channel || 'latest' ) === 'latest',
+				href: getProjectHref( project ),
+				rel: project.rel,
+				projectSlug: project.slug,
+				projectChannel: project.channel || 'latest'
 			})
 
+	if currentProject
+		script.
+			(function() {
+				const script = document.currentScript;
+
+				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 );
+
+					if ( !dropdown || slugIndex < 0 ) {
+						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 );
+
+					if ( !activeItem ) {
+						return;
+					}
+
+					for ( const item of items ) {
+						item.classList.toggle( 'is-active', item === activeItem );
+					}
+
+					const labelElement = dropdown.querySelector( '.c-menu-dropdown__button .c-button__label' );
+					const labelText = activeItem.querySelector( 'span' )?.textContent?.trim() || activeItem.textContent.trim();
+
+					if ( labelElement && labelText ) {
+						labelElement.textContent = labelText;
+					}
+				}, { once: true } );
+			})();
+

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

@@ -3,6 +3,7 @@ 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` );
 		let initialSlideId = projectLocals ? `project-${projectLocals.projectSlug}` : 'products';
 
 		// If the page has a category, set the initial slide to that category's slide
@@ -23,20 +24,54 @@ mixin mobile-nav()
 			if quickNavigationProjects
 				ol.b-reset-list.c-mobile-nav__items
 					each project in quickNavigationProjects
-						- isCurrentProject = projectLocals && project.slug === projectLocals.projectSlug
-
+						- isCurrentProject = projectLocals && project.slug === projectLocals.projectSlug && !project.channel
 						if isCurrentProject
 							+mobile-nav-item({
 								label: project.name,
 								active: true,
-								targetSlideId: `project-${ project.slug }`
+								targetSlideId: `project-${ project.slug }`,
+								projectSlug: project.slug,
+								projectChannel: project.channel || 'latest'
 							})
 						else
 							+mobile-nav-item({
-								href: relative_url(page.path, `${project.slug}/latest/index.html`),
-								label: project.name
+								href: getProjectHref( project ),
+								label: project.name,
+								rel: project.rel,
+								projectSlug: project.slug,
+								projectChannel: project.channel || 'latest'
 							})
 
+		if currentProject
+			script.
+				(function() {
+					const script = document.currentScript;
+
+					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 );
+
+						if ( !mobileNav || slugIndex < 0 ) {
+							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 );
+
+						if ( !activeItem ) {
+							return;
+						}
+
+						for ( const item of items ) {
+							item.classList.toggle( 'is-active', item === activeItem );
+						}
+					}, { once: true } );
+				})();
+
 		//- Current project slide
 		if projectLocals
 			+mobile-nav-slide({ slideId: `project-${ projectLocals.projectSlug }` })

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, targetSlideId, target, active = false })
+mixin mobile-nav-item({ href, label, rel, targetSlideId, target, active = false, projectSlug, projectChannel })
 	li
 		if targetSlideId
 			+button({
@@ -48,11 +48,16 @@ mixin mobile-nav-item({ href, label, targetSlideId, target, active = false })
 				'data-navigate-direction'='forward',
 				'aria-controls'=`slide-${targetSlideId}`,
 				'aria-expanded'='false',
-				'aria-haspopup'='true'
+				'aria-haspopup'='true',
+				'data-project-slug'=projectSlug,
+				'data-project-channel'=projectChannel
 			)
 		else
 			a.b-link.c-mobile-nav__item(
 				href=href,
+				rel=rel,
+				data-project-slug=projectSlug,
+				data-project-channel=projectChannel,
 				class=active ? 'is-active' : '',
 				target=target
 			)= label