umberto 7.0.2 → 8.0.0

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

@@ -0,0 +1,87 @@
+mixin footer({ withSurvey = true } = {})
+	footer.c-footer
+		if projectLocals && withSurvey
+			+_footer-survey-section()
+
+		.c-footer__copyright.u-gap-2
+			.c-footer__items.u-gap-6
+				+button-link({
+					variant: 'transparent',
+					size: 'sm',
+					label: 'GitHub',
+					href: 'https://github.com/ckeditor/ckeditor5',
+					className: 'u-pl-0 u-font-weight--thin',
+					fillColor: '--color-text-primary'
+				})
+
+				if projectLocals && projectLocals.projectSlug != 'cs' && projectLocals.projectSlug != 'trial'
+					+button-link({
+						variant: 'transparent',
+						size: 'sm',
+						label: 'Support',
+						href: relative_url(page.path, projectLocals.projectSlug+'/'+projectLocals.projectVersion+'/support/index.html'),
+						className: 'u-font-weight--thin',
+						fillColor: '--color-text-primary'
+					})
+
+				+button-link({
+					variant: 'transparent',
+					size: 'sm',
+					label: 'Contact Us',
+					href: 'https://ckeditor.com/contact/',
+					className: 'u-font-weight--thin',
+					fillColor: '--color-text-primary'
+				})
+
+			p.u-text--xs.b-font-text.u-font-weight--regular.u-color-text--secondary
+				| © 2003
+				| - #{new Date().getFullYear()}
+				|  
+				a.b-link(href='https://cksource.com/' target='_blank' rel="noopener noreferrer") CKSource
+				|. All rights reserved.
+
+mixin _footer-survey-section()
+	-
+		const shortPageUrl = page.path.split( '/' ).slice( 2 ).join( '/' );
+		const githubUrl = page.reportIssueWidget ? new URL( page.reportIssueWidget ) : null;
+
+		if (githubUrl) {
+			githubUrl.searchParams.set( 'title', 'Docs issue report from "' + shortPageUrl + '"' );
+			githubUrl.searchParams.set( 'project-version', projectLocals.projectVersion );
+		}
+
+	section.c-footer__survey
+		.c-footer__heading.u-gap-4
+			h2.u-text--lg.b-font-heading.u-font-weight--bold.u-color-text--primary
+				| Was this page helpful?
+			.c-footer__items.u-gap-2.is-hidden.c-page-helpfulness
+				+button({
+					variant: 'toolbar',
+					size: 'sm',
+					ariaLabel: 'Yes',
+					fillColor: '--color-primary-500',
+					className: 'c-page-helpfulness__yes',
+				})
+					+_button-content({ icon: 'like' })
+					+spacer({ x: 1, className: 'l-hide-sm'})
+					+_button-content({ label: 'Yes', labelClassName: 'l-hide-sm' })
+
+				+button({
+					variant: 'toolbar',
+					size: 'sm',
+					ariaLabel: 'No',
+					fillColor: '--color-primary-500',
+					className: 'c-page-helpfulness__no',
+				})
+					+_button-content({ icon: 'dislike' })
+					+spacer({ x: 1, className: 'l-hide-sm'})
+					+_button-content({ label: 'No', labelClassName: 'l-hide-sm' })
+
+		p.u-text--base.b-font-text.u-font-weight--thin.u-color-text--primary.u-mb-2
+			| Every day, we work hard to keep our documentation complete.
+			| Have you spotted outdated information? Is something missing? Please report it via our 
+			if githubUrl
+				a.b-link(href=githubUrl.toString() target='_blank' rel="noopener noreferrer") issue tracker
+			else
+				a.b-link(href='https://ckeditor.com/contact/' target='_blank' rel="noopener noreferrer") contact form
+			|.

package/themes/umberto/layout/gloria/_modules/header/_style.scss

@@ -0,0 +1,181 @@
+@use "@gloria/layout/_mixins.scss" as *;
+@use "@gloria/a11y/_mixins.scss" as *;
+
+.c-header {
+	position: sticky;
+	top: 0;
+	left: 0;
+	width: 100%;
+	background: var(--color-common-white);
+	z-index: var(--z-index-header);
+	box-shadow: 0px 2px 4px 0px rgba(0, 18, 52, 0.08);
+
+	&.is-on-top-overlay {
+		position: fixed;
+		width: 100vw;
+		z-index: calc(var(--z-index-overlay) + 1);
+	}
+
+	&__mobile {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		padding: var(--spacing-3) var(--spacing-5);
+		gap: var(--spacing-6);
+
+		&-brand {
+			display: flex;
+			align-items: center;
+			position: relative;
+			top: 2px;
+		}
+
+		&-actions {
+			display: flex;
+			gap: var(--spacing-2);
+			justify-content: flex-end;
+		}
+
+		&-menu {
+			display: none;
+			position: absolute;
+			top: 100%;
+			left: 0;
+			right: 0;
+			background-color: var(--color-common-white);
+			border-top: 1px solid var(--color-gray-400);
+			box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.1);
+			padding: var(--spacing-4) var(--spacing-5);
+			z-index: 4;
+		}
+
+		&-menu-button {
+			&[aria-expanded='true'] {
+				& > .c-icon--menu  { display: none; }
+				& > .c-icon--close { display: flex; }
+			}
+
+			&[aria-expanded='false'] {
+				& > .c-icon--menu  { display: flex; }
+				& > .c-icon--close { display: none; }
+			}
+		}
+	}
+
+	&__brand-row {
+		display: grid;
+		grid-template: 'brand toolbar' / 1fr auto;
+		gap: var(--spacing-4);
+		place-content: center;
+		padding: var(--spacing-3) var(--spacing-5) var(--spacing-2);
+
+		&-toolbar {
+			gap: var(--spacing-4);
+		}
+	}
+
+	&__nav-row {
+		display: grid;
+		grid-template-columns: 1fr auto;
+		padding-bottom: 0;
+	}
+
+	&__brand-logo {
+		position: relative;
+		top: 2px;
+		width: 132px;
+	}
+
+	&__divider {
+		width: 1px;
+		height: 100%;
+		background-color: var(--color-gray-500);
+		margin: 0 var(--spacing-6);
+	}
+}
+
+.c-nav-links {
+	display: flex;
+	flex-direction: row;
+	gap: var(--spacing-1);
+
+	&--suffix {
+		margin-right: var(--spacing-5);
+	}
+
+	&__item {
+		position: relative;
+		display: inline-flex;
+		place-content: center;
+		flex-wrap: wrap;
+		height: 100%;
+		text-decoration: none;
+    	color: var(--color-text-primary);
+		transition:
+			color var(--duration-fast) var(--cbuc-quad-out),
+			background-color var(--duration-fast) var(--cbuc-quad-out),
+			border-color var(--duration-ultra-fast) var(--smoothstep),
+			box-shadow var(--duration-ultra-fast) var(--smoothstep);
+
+		&::after {
+			content: '';
+			position: absolute;
+			bottom: 0;
+			left: 0;
+			width: 100%;
+			height: 2px;
+			background-color: transparent;
+			transition: background-color var(--duration-fast) var(--cbuc-quad-out);
+		}
+
+		&--active {
+			color: var(--color-primary);
+
+			&::after {
+				background-color: var(--color-primary);
+			}
+		}
+
+		&--spaced {
+			padding: 0 var(--spacing-5);
+
+			&:hover {
+				background-color: var(--color-primary-100);
+				color: var(--color-primary);
+			}
+
+			&:active {
+				background-color: var(--color-primary-200);
+				color: var(--color-primary);
+			}
+		}
+
+		&--icon-only {
+			padding: 0 var(--spacing-3);
+
+			&:hover {
+				color: var(--color-primary-400);
+			}
+
+			&:active {
+				color: var(--color-primary);
+			}
+		}
+
+		&--align-right {
+			padding-right: var(--spacing-0);
+		}
+
+		&--align-left {
+			padding-left: var(--spacing-0);
+		}
+	}
+
+	&__item-text {
+		display: flex;
+		place-content: center;
+		padding: var(--spacing-3) 0;
+		font-size: var(--font-size-sm);
+		cursor: pointer;
+	}
+}

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

@@ -0,0 +1,70 @@
+include ./nav-link
+include ./nav-links
+include ./nav-suffix-links
+include ./nav-project-select-dropdown
+
+mixin header({ withChooseProject = true, className = '' } = {})
+	header.c-header.js-header(
+		class=className,
+		aria-label='Page header'
+	)
+		//- Mobile navigation
+		.c-header__mobile.l-hide-desktop
+			.c-header__mobile-brand
+				a.b-link.u-display-inline-flex(
+					title='Go to CKEditor Ecosystem Documentation home page',
+					href=relative_url(page.path, 'index.html')
+				)
+					+inline-svg({ file: 'ckeditor-logo', ariaHidden: true, className: 'c-header__brand-logo' })
+
+			.c-header__mobile-actions
+				+algolia-search
+				+button({
+					id: 'mobile-menu-button',
+					className: 'c-header__mobile-menu-button js-toggle-mobile-overlay',
+					icon: 'menu',
+					variant: 'toolbar',
+					square: true,
+					ariaLabel: 'Toggle mobile menu'
+				})(
+					aria-expanded='false',
+					aria-controls='mobile-menu',
+					aria-haspopup='true'
+				)
+					+svg-icon({ icon: 'menu', ariaHidden: true })
+					+svg-icon({ icon: 'close', ariaHidden: true })
+
+		//- Desktop navigation
+		.c-header__desktop.l-hide-mobile
+			.c-header__brand-row
+				.c-header__brand-row-selector.u-flex-horizontal.u-align-items-center
+					a.b-link.u-display-inline-flex(
+						title='Go to CKEditor Ecosystem Documentation home page',
+						href=relative_url(page.path, 'index.html')
+					)
+						+inline-svg({ file: 'ckeditor-logo', ariaHidden: true, className: 'c-header__brand-logo' })
+
+					if withChooseProject
+						span.c-header__divider
+						+nav-project-select-dropdown
+
+				.c-header__brand-row-toolbar.u-flex-horizontal.u-align-items-center
+					+algolia-search
+					+button-link({
+						label: 'Sign up',
+						icon: 'export',
+						href: 'https://portal.ckeditor.com/checkout?plan=free',
+						target: '_blank',
+						variant: 'secondary'
+					})
+
+			nav.c-header__nav-row(aria-label='Main navigation')
+				+nav-links({ excludeGroupsIds: [ 'support' ] })
+				+nav-suffix-links({ includeGroupsIds: [ 'support' ] })
+
+	+mobile-overlay({
+		id: 'mobile-menu',
+		ariaLabeledBy: 'mobile-menu-button',
+		spaced: false
+	})
+		+mobile-nav()

package/themes/umberto/layout/gloria/_modules/header/nav-link.pug

@@ -0,0 +1,19 @@
+mixin nav-link({ name, href, active, icon, title, target, ariaLabel, preload = false, spaced = true, align = 'center' })
+	li
+		a.b-link.c-nav-links__item(
+			href=href,
+			target=target,
+			class={
+				'c-nav-links__item--spaced': spaced && !icon,
+				'c-nav-links__item--active': active,
+				'c-nav-links__item--icon-only': !name && !!icon,
+				[`c-nav-links__item--align-${ align }`]: align === 'right' || align === 'left',
+				'js-link-preload': !active && preload
+			},
+			title=ariaLabel || false,
+			'aria-label'=ariaLabel || false,
+		)
+			span.c-nav-links__item-text
+				= name
+				if icon
+					+svg-icon({ icon, size: 'lg', ariaHidden: true })

package/themes/umberto/layout/gloria/_modules/header/nav-links.pug

@@ -0,0 +1,11 @@
+mixin nav-links({ excludeGroupsIds = [] } = {})
+	ol.b-reset-list.c-nav-links(aria-label='Navigation Links (left)')
+		if projectLocals && projectLocals.groups
+			each group in projectLocals.groups
+				if !excludeGroupsIds.includes(group.id)
+					+nav-link({
+						name: group.name,
+						href: relative_url(page.path, group._url),
+						active: group.id === page.groupId,
+						preload: true
+					})

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

@@ -0,0 +1,16 @@
+mixin nav-project-select-dropdown()
+	-
+		const currentProject = projectLocals && projectsData.find(
+			project => project.slug === projectLocals.projectSlug
+		);
+
+	+menu-dropdown({
+		label: currentProject ? currentProject.name : 'Choose project'
+	})
+		each project in projectsData
+			if ![ 'ckfinder', 'trial', 'ckeditor4' ].includes( project.slug )
+				+dropdown-item({
+					label: project.name,
+					active: !!currentProject && project.slug === currentProject.slug,
+					href: relative_url(page.path, `${ project.latestBasePath }/index.html`)
+				})

package/themes/umberto/layout/gloria/_modules/header/nav-suffix-links.pug

@@ -0,0 +1,20 @@
+mixin nav-suffix-links({ includeGroupsIds = [] } = {})
+	ol.b-reset-list.c-nav-links.c-nav-links--suffix(aria-label='Navigation Links (right)')
+		if projectLocals && projectLocals.groups
+			each group in projectLocals.groups
+				if includeGroupsIds.includes(group.id)
+					+nav-link({
+						name: group.name,
+						href: relative_url(page.path, group._url),
+						active: group.id === page.groupId
+					})
+
+		if projectLocals && projectLocals.repoUrl
+			+nav-link({
+				icon: 'github',
+				href: projectLocals.repoUrl,
+				target: '_blank',
+				hoverable: false,
+				ariaLabel: 'CKEditor 5 GitHub repository',
+				align: 'right'
+			})

package/themes/umberto/layout/gloria/_modules/header-bar/_style.scss

@@ -0,0 +1,56 @@
+@use "@gloria/layout/_mixins.scss" as *;
+
+.c-header-bar {
+	display: flex;
+	position: relative;
+	flex-direction: row;
+	justify-content: center;
+	align-items: center;
+	width: 100%;
+	gap: var(--spacing-4);
+	padding: var(--spacing-2) var(--spacing-4);
+	font-size: var(--font-size-sm);
+
+	--a11y-focus-ring-color: color-mix(in srgb, var(--color-common-white) 40%, transparent);
+	--a11y-focus-border-color: var(--color-common-white);
+
+	&--warning {
+		--a11y-focus-ring-color: color-mix(in srgb, var(--color-warning-500) 40%, transparent);
+		--a11y-focus-border-color: var(--color-slate);
+
+		background-color: var(--color-warning-light);
+		color: var(--color-slate);
+	}
+
+	&--info {
+		background-color: var(--color-info);
+		color: var(--color-common-white);
+	}
+
+	&--info-gradient {
+		background: linear-gradient(240deg, var(--color-info-800), var(--color-info-500));
+		color: var(--color-common-white);
+
+		.b-prose a,
+		.b-link {
+			color: var(--color-common-white);
+		}
+	}
+
+	@include mobile {
+		gap: var(--spacing-2);
+		justify-content: flex-start;
+		overflow-x: scroll;
+
+		&--closeable {
+			padding-right: 60px;
+		}
+	}
+
+	&__close {
+		position: absolute;
+		top: 0;
+		right: var(--spacing-1);
+		height: 100%;
+	}
+}

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

@@ -0,0 +1,40 @@
+mixin header-bar({ variant, closeable = false, stateStorageKey, ariaLabel })
+	.c-header-bar.js-header-bar(
+		role='region',
+		class={
+			[`c-header-bar--${ variant }`]: variant,
+			'c-header-bar--closeable': closeable,
+		},
+		'aria-label'=ariaLabel,
+		'data-state-storage-key'=stateStorageKey
+	)
+		block
+
+		if closeable
+			+button({
+				className: 'c-header-bar__close',
+				icon: 'close',
+				variant: false,
+				ariaLabel: 'Close'
+			})
+
+	//- Avoid massive CLS by using a inline script to check for closed header bars.
+	if closeable && stateStorageKey
+		script.
+			(function() {
+				try {
+					const stored = localStorage.getItem('gloria-closed-header-bars');
+
+					if (!stored) {
+						return;
+					}
+
+					const closedBar = JSON.parse(stored).__data['#{stateStorageKey}'];
+
+					if (closedBar) {
+						document.currentScript.previousElementSibling.classList.add('is-hidden');
+					}
+				} catch (e) {
+					// Silent fail for localStorage errors
+				}
+			})();

package/themes/umberto/layout/gloria/_modules/header-legacy-warning/index.pug

@@ -0,0 +1,11 @@
+mixin header-legacy-warning()
+	if isLegacy && (!sitemap || !isNightly)
+		+header-bar({ variant: 'warning', ariaLabel: 'Legacy documentation warning' })
+			+icon-message({
+				icon: 'exclamation-circle',
+				iconSize: 'lg',
+				className: 'u-font-weight--bold'
+			})
+				| WARNING
+
+			span You're reading the legacy documentation.

package/themes/umberto/layout/gloria/_modules/header-nightly-info/index.pug

@@ -0,0 +1,20 @@
+mixin header-nightly-info()
+	if isNightly
+		-
+			const stableUrl = `${ page.canonicalUrlBeginning }${ page.path }`
+				.replace('nightly', '')
+				.replace('ckeditor5.github.io/', 'ckeditor.com/')
+				.replace(/\/+$/, '');
+
+		+header-bar({ variant: 'info', ariaLabel: 'Nightly build documentation' })
+			+icon-message({
+				icon: 'info-circle',
+				iconSize: 'lg',
+				className: 'font-weight--bold'
+			})
+				| NIGHTLY
+
+			span
+				span You're viewing the nightly build documentation.
+				|  
+				a.b-link.u-color--white.u-text-decoration--underline(href=stableUrl) Go to the stable version.

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

@@ -0,0 +1,18 @@
+mixin header-promobar()
+	if promobar
+		+header-bar({
+			variant: promobar.variant || 'info-gradient',
+			closeable: true,
+			stateStorageKey: 'header-promobar',
+			ariaLabel: 'Promotional bar'
+		})
+			if promobar.prefix
+				+icon-message({
+					icon: promobar.prefix.icon,
+					iconSize: 'lg',
+					className: 'u-font-weight--bold'
+				})
+					| #{promobar.prefix.title}
+
+			if promobar.message
+				span.b-prose !{promobar.message}

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

@@ -0,0 +1,14 @@
+include ./footer/index
+include ./header/index
+include ./main/index
+include ./toc/index
+include ./sidebar/index
+include ./sidebar-api/index
+include ./mobile-nav/index
+include ./header-bar/index
+include ./header-legacy-warning/index
+include ./header-nightly-info/index
+include ./header-promobar/index
+include ./breadcrumbs/index
+include ./algolia-search/index
+include ./not-found/index

package/themes/umberto/layout/gloria/_modules/main/_style.scss

@@ -0,0 +1,54 @@
+@use "@gloria/layout/_mixins.scss" as *;
+
+.c-main {
+	margin: var(--spacing-6) 0;
+
+	&__content-title {
+		margin-top: 0;
+
+		&--align-center {
+			display: flex;
+			align-items: center;
+
+			.c-icon {
+				margin-right: var(--spacing-2);
+				color: var(--color-primary-500);
+			}
+		}
+	}
+
+	&__heading-wrapper {
+		display: flex;
+		flex-wrap: nowrap;
+		justify-content: space-between;
+		gap: var(--spacing-4);
+
+		@include mobile {
+			align-items: flex-start;
+		}
+
+		+ .b-heading {
+			margin-top: 0;
+		}
+
+		+ h2,
+		+ h3,
+		+ h4,
+		+ h5,
+		+ h6 {
+			margin-top: var(--spacing-4);
+		}
+
+		&--api {
+			flex-wrap: wrap;
+		}
+	}
+
+	&__content-buttons {
+		display: flex;
+		flex-wrap: nowrap;
+		align-items: flex-start;
+		gap: var(--spacing-1);
+		justify-content: flex-end;
+	}
+}

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

@@ -0,0 +1,10 @@
+mixin main()
+	main.c-main(
+		class={
+			'main__content--api': page.isApi,
+			'main__content--sdk': page.isSdk,
+			[page.classes]: !!page.classes
+		}
+	)
+		block
+		block content