umberto 7.0.2 → 8.0.1

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

@@ -0,0 +1,201 @@
+@use "@gloria/layout/_mixins.scss" as *;
+@use "@gloria/base/_mixins.scss" as *;
+
+:root {
+	--toc-width-xl: 320px;
+	--toc-width-lg: 288px;
+	--toc-width-l: 256px;
+}
+
+.l-layout__main:has(.live-snippet--wide) + .c-toc {
+	--toc-right: calc(((100vw - var(--snippet-max-width)) / 2) - var(--toc-width-xl) - var(--spacing-2));
+ }
+
+.c-toc {
+	--toc-right: calc(((100vw - var(--container-max-width-thin)) / 2) - var(--toc-width-xl));
+	position: fixed;
+	z-index: var(--z-index-toc);
+	top: var(--header-height, --header-navigation-height);
+	bottom: 0;
+	right: max(var(--toc-right), 0px);
+	height: calc(100vh - var(--header-height, --header-navigation-height));
+	width: 100%;
+
+	@include breakpoint-only($breakpoint-sm, $breakpoint-lg) {
+		width: var(--toc-width-lg);
+	}
+
+	@include max-width($breakpoint-lg) {
+		display: none;
+		background-color: var(--color-gray-200);
+		box-shadow: calc(var(--spacing-1) * -1) var(--spacing-1) var(--spacing-2) 0 var(--color-secondary-800-alpha);
+		overflow: auto;
+		overscroll-behavior: contain;
+		transform: translateX(100%);
+
+		@include scrollbar;
+
+		@include mobile {
+			top: var(--header-height, --header-navigation-height);
+			overflow: auto;
+			height: calc(100vh - var(--header-height, --header-navigation-height));
+			@include scrollbar;
+		}
+
+		&.is-anim {
+			&-entering,
+			&-entered {
+				transform: translateX(0);
+			}
+
+			&-exiting {
+				transform: translateX(100%);
+			}
+
+			&-exited {
+				transform: translateX(100%);
+			}
+		}
+	}
+
+	@include breakpoint-only($breakpoint-lg, $breakpoint-xl) {
+		width: var(--toc-width-lg);
+		display: block !important;
+	}
+
+	@include min-width($breakpoint-xl) {
+		width: var(--toc-width-xl);
+		display: block !important;
+	}
+
+	&--transition {
+		transition: transform var(--duration-fast) ease-in-out;
+	}
+
+	&__secondary-navigation {
+		padding: var(--spacing-9) var(--spacing-3) var(--spacing-3) var(--spacing-3);
+
+		@include mobile {
+			padding: var(--spacing-6) var(--spacing-4)
+		}
+
+		@include min-width($breakpoint-lg) {
+			position: sticky;
+			top: var(--header-height, --header-navigation-height);
+			overflow: auto;
+			overscroll-behavior: contain;
+			height: calc(100vh - var(--header-height, --header-navigation-height));
+			@include scrollbar;
+		}
+	}
+
+	h3 {
+		margin: 0;
+		padding: var( --spacing-3 ) 0;
+		font-family: var(--font-family-heading);
+		font-size: var(--font-size-base);
+		font-weight: bold;
+		line-height: var(--line-height-base);
+		color: var(--color-secondary-700);
+
+		@include min-width($breakpoint-xl) {
+			padding: var(--spacing-2) 0;
+		}
+
+		+ ol {
+			margin-top: 0;
+			padding-top: var(--spacing-4);
+
+			@include min-width($breakpoint-xl) {
+				padding-top: var(--spacing-3);
+			}
+		}
+	}
+
+	&__show-button {
+		@include mobile {
+			position: absolute;
+			top: var(--header-navigation-height);
+			z-index: var(--z-index-toc-show-button);
+			width: 40px;
+		}
+
+		&--sticky {
+			@include mobile {
+				position: fixed;
+				top: 76px;
+			}
+		}
+	}
+
+	&__hide-button,
+	&__show-button {
+		color: var(--color-primary);
+		background-color: var(--color-common-white);
+		cursor: pointer;
+
+		&:hover {
+			text-decoration: underline;
+		}
+
+		@include mobile {
+			font-size: var(--font-size-sm);
+		}
+
+		@include min-width($breakpoint-lg) {
+			display: none;
+		}
+	}
+
+	&__hide-button {
+		position: absolute;
+		z-index: 1;
+		top: calc(var(--spacing-9) + var(--spacing-4));
+		right: var(--spacing-3);
+		background-color: transparent;
+		border: none;
+		font-size: var(--font-size-sm);
+
+		@include mobile {
+			top: var(--spacing-10);
+			right: var(--spacing-4);
+		}
+	}
+
+	ol {
+		margin-left: 0;
+		padding-left: 0;
+		list-style: none;
+	}
+
+	ol ol {
+		border-left: 1px solid var(--color-gray-400);
+		margin-left: var(--spacing-3);
+		margin-top: var(--spacing-3);
+		margin-bottom: var(--spacing-3);
+		padding-left: var(--spacing-3);
+	}
+
+	ol > li {
+		&:not(:first-child) {
+			margin-top: var(--spacing-2);
+		}
+	}
+
+	ol a {
+		display: block;
+		padding: 0 var(--spacing-2);
+		text-decoration: none;
+		font-size: var(--font-size-sm);
+		color: var(--color-secondary-700);
+
+		&:hover,
+		&.is-active {
+			color: var(--color-primary);
+		}
+
+		&.is-active {
+			-webkit-text-stroke-width: thin;
+		}
+	}
+}

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

@@ -0,0 +1,10 @@
+mixin toc({ id })
+	if page.toc !== false
+		aside.c-toc.js-toc(id=id)
+			button.a11y-focusable.c-toc__hide-button.js-toc-hide-btn(
+				type="button",
+				aria-label="Hide the table of contents."
+			) Hide
+
+			if page.content
+				!= uToc( page.content, { tocLimit: page[ 'toc-limit' ], class: 'c-toc__secondary-navigation' } )

package/themes/umberto/layout/gloria/_trackers/google-tag-manager.pug

@@ -0,0 +1,14 @@
+if googletagmanager
+	script.
+		if (!{ JSON.stringify(googletagmanager.domains) }.indexOf(location.hostname) !== -1) {
+			(function (w, d, s, l, i) {
+				w[l] = w[l] || [];
+				w[l].push({'gtm.start': new Date().getTime(), event: 'gtm.js'});
+				var f = d.getElementsByTagName(s)[0],
+					j = d.createElement(s),
+					dl = l != 'dataLayer' ? '&l=' + l : '';
+				j.async = true;
+				j.src = 'https://www.googletagmanager.com/gtm.js?id=' + i + dl;
+				f.parentNode.insertBefore(j, f);
+			})( window, document, 'script', 'dataLayer', '!{ googletagmanager.gtm }' );
+		}

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

@@ -0,0 +1,2 @@
+include google-tag-manager
+include google-analytics

package/themes/umberto/layout/gloria/api.pug

@@ -1,27 +1,49 @@
-extends base
+include _components/index
+include _modules/index
+include _api-docs/index
 
-block content
-	- const split = uSplitToTitleAndContent( page.content );
+doctype html
+html(lang='en')
+	head
+		include _head/index
+	body.l-layout.js-layout
+		+header-nightly-info
+		+header-legacy-warning
+		+header-promobar
+		+header({ className: 'l-layout__header' })
 
-	h1.main__content-title( data-ln = page.shortName === 'index' ? page[ 'default-expanded' ] || page.shortName : page.shortName )
-		img( src=relative_url( page.path, 'assets/' + umbertoVersion + '/gloria/img/cog.svg' ) alt="API" )
-		!= split.title || page.title
+		.l-layout__container
+			+sidebarApi()
+			.l-layout__main(
+				class={
+					'l-layout__main--api': true,
+					'l-layout__main--no-toc': page.toc === false
+				}
+			)
+				.l-container.l-container--thin
+					main.c-main
+						block content
+							- const split = uSplitToTitleAndContent( page.content );
 
-	!= split.content
+							h1.b-h1.c-main__content-title.c-main__content-title--align-center.js-api-h1( data-ln = page.shortName === 'index' ? page[ 'default-expanded' ] || page.shortName : page.shortName )
+								!= split.title || page.title
 
-block navtree
-	if projectLocals && projectLocals.apiTree
-		!= projectLocals.apiTree
+							!= split.content
 
-//- Make sure to add the report issue widget at the end of the page.
-block append content
-	if page.reportIssueWidget
-		include _partial/report-issue-widget
+						block projectVersion
+							if page.permalinkDisableDomains
+								meta( name= 'permalink-disable-domains' content=page.permalinkDisableDomains )
 
-block projectVersion
-	if page.permalinkDisableDomains
-		meta( name= 'permalink-disable-domains' content=page.permalinkDisableDomains )
+							if projectLocals
+								meta( name= 'project-version' content= projectLocals.projectVersion )
+								meta( name= 'project-slug' content= projectLocals.projectSlug )
 
-	if projectLocals
-		meta( name= 'project-version' content= projectLocals.projectVersion )
-		meta( name= 'project-slug' content= projectLocals.projectSlug )
+						+footer()
+			+apiToc()
+
+		if page.isSnippetPage
+			//UMBERTO: SNIPPET: JS
+
+		if projectLocals
+			each path in projectLocals.extraScriptsPaths
+				script(src=relative_url(page.path, path), async=true)

package/themes/umberto/layout/gloria/base.pug

@@ -1,42 +1,33 @@
-- var classes = [ 'main__content', 'formatted' ];
-- var mainClasses = [ 'main' ];
-- if ( page.isApi ) classes.push( 'main__content--api' );
-- if ( page.isSdk ) classes.push( 'main__content--sdk' );
-- if ( page.classes ) classes.push( page.classes );
-- if ( page.sitenav === false ) mainClasses.push( 'main--no-sitenav' );
+include _components/index
+include _modules/index
 
 doctype html
-html( lang='en' )
+html(lang='en')
 	head
-		include _partial/head
-	body
-		include _partial/header
-
-		- if ( page.pageClass ) mainClasses.push( `main--${ page.pageClass }` );
-		main( class = mainClasses )
-			section( class = classes )
-
-				.main__content-inner
-					include _partial/gh-contribute
-					include _partial/rwd-breadcrumbs
-
-					block content
-
-					//- Create feedback widget element in case with configured umberto-main.json and not disabled via single .md file.
-					if ( feedbackWidget && page[ 'feedback-widget' ] !== false )
-						.feedback-widget
-							#emojics-root
-
+		include _head/index
+	body.l-layout.js-layout
+		+header-nightly-info
+		+header-legacy-warning
+		+header-promobar
+		+header({ className: 'l-layout__header' })
+
+		.l-layout__container
+			+sidebar()
+			.l-layout__main(
+				class={
+					'l-layout__main--no-toc': page.toc === false
+				}
+			)
+				.l-container.l-container--thin
+					+breadcrumbs()
+					+main()
+					+footer()
+			+toc({ id: 'page-toc' })
 			block navtree
 
-		include _partial/footer
-		include _partial/docsearch
-
-		script( src = relative_url( page.path, pathJoin( 'assets', umbertoVersion, 'gloria/scripts/app.js' ) ) )
-
 		if page.isSnippetPage
 			//UMBERTO: SNIPPET: JS
 
 		if projectLocals
 			each path in projectLocals.extraScriptsPaths
-				script( src = relative_url( page.path, path ), async=true )
+				script(src=relative_url(page.path, path), async=true)

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

@@ -1,17 +1,23 @@
-extends base
+include _components/index
+include _modules/index
 
-block content
-    - const split = uSplitToTitleAndContent( page.content );
+doctype html
+html(lang='en')
+	head
+		include _head/index
 
-    h1
-        != split.title || page.title
+	body.l-layout.l-layout--muted.js-layout
+		+header-nightly-info
+		+header-promobar
+		+header({
+			className: 'l-layout__header',
+			withChooseProject: false
+		})
 
-    if page.toc !== false
-        != uToc( page.content, { tocLimit: page[ 'toc-limit' ] } )
+		.l-layout__container
+			.l-layout__main.l-layout__main--no-toc
+				.l-container.l-container--thin
+					+main
+						!= page.content
 
-    != split.content
-
-block navtree
-    .side-navigation
-        .side-navigation__wrapper
-            nav.side-navigation__inner
+					+footer({ withSurvey: false })

package/themes/umberto/layout/gloria/page.pug

@@ -3,21 +3,40 @@ extends base
 block content
 	- const split = uSplitToTitleAndContent( page.content );
 
-	h1.main__content-title
-		!= split.title || page.title
-
-	if page.toc !== false
-		!= uToc( page.content, { groupId: page.groupId, tocLimit: page[ 'toc-limit' ] } )
+	div.c-main__heading-wrapper
+		h1.b-h1.c-main__content-title
+			!= split.title || page.title
+		.c-main__content-buttons
+			if page.contributeUrl
+				+button-link({
+					id: 'contribute-to-this-guide-button',
+					href: page.contributeUrl,
+					target: '_blank',
+					icon: 'edit',
+					variant: 'toolbar',
+					className: 'l-show-desktop-only',
+					square: true,
+					tooltip: 'Contribute to this guide'
+				})
+
+			if page.toc !== false
+				+button({
+					id: 'page-toc-toggle',
+					icon: 'unordered-list',
+					variant: 'toolbar',
+					className: 'c-toc__show-button js-toc-show-btn js-toc-btn-sticky',
+					square: true,
+					tooltip: 'Show the table of contents'
+				})(
+						aria-controls='page-toc'
+						aria-expanded='false'
+						aria-haspopup='true'
+					)
 
 	!= split.content
 
-//- Make sure to add the report issue widget at the end of the page.
-block append content
-	if page.reportIssueWidget
-		include _partial/report-issue-widget
-
 block navtree
-	include _partial/nav-tree
+	//- TODO
 
 block projectVersion
 	if page.permalinkDisableDomains

package/themes/umberto/layout/gloria/sdk.pug

@@ -3,7 +3,7 @@ extends base
 block content
 	- const split = uSplitToTitleAndContent( page.content );
 
-	h1.main__content-title
+	h1.b-h1.c-main__content-title
 		img( src=relative_url( page.path, 'assets/' + umbertoVersion + '/gloria/img/book.svg' ) alt="guide" )
 		!= split.title || page.title