umberto 1.17.0 → 1.18.0

package/README.md

@@ -258,6 +258,7 @@ title: Overview [optional]
 slug: overview [optional]
 order: 10 [optional]
 toc: false [optional]
+toc-limit: 5 [optional]
 badges: [ premium, ... ] [optional]
 sitenav: false [optional]
 feedback-widget: false [optional]
@@ -307,6 +308,10 @@ Can be set to sort the guides within the same category. If skipped, guides are s
 
 If defined and set to `false`, table of contents will not be rendered.
 
+#### toc-limit [optional]
+
+If defined and set to `0` or greater integer, the table of contents will be limited to the defined depth (e.g. for value `2`, only `<h2>` and `<h3>` headings will be shown in the table of contents). Value `0` is an equivalent of using `toc: false`.
+
 #### sitenav [optional]
 
 If defined and set to `false`, there will be no left-side navigation and main content will be centered.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "umberto",
-  "version": "1.17.0",
+  "version": "1.18.0",
   "description": "CKSource Documentation builder",
   "main": "src/index.js",
   "files": [
@@ -42,15 +42,15 @@
     "medium-zoom": "^1.0.5",
     "mkdirp": "^1.0.4",
     "moment": "^2.27.0",
-    "node-sass": "^4.14.1",
     "nyc": "15.1.0",
     "pug": "^3.0.0",
+    "sass": "^1.43.4",
     "sitemap": "^6.1.6",
     "tippy.js": "^6.3.2",
     "tree-model": "^1.0.7",
     "upath": "^2.0.0",
     "vnu-jar": "^20.5.29",
-    "webpack": "^4.43.0"
+    "webpack": "^5.58.1"
   },
   "devDependencies": {
     "@ckeditor/ckeditor5-dev-env": "^21.0.0",

package/scripts/helper/u-toc.js

@@ -9,7 +9,16 @@ const cheerio = require( 'cheerio' );
 
 hexo.extend.helper.register( 'uToc', ( data, options = {} ) => {
 	const $ = cheerio.load( data );
-	const headings = $( 'h2,h3,h4,h5,h6' )
+
+	let usedHeadings = [ 'h2', 'h3', 'h4', 'h5', 'h6' ];
+
+	if ( options.tocLimit >= 0 ) {
+		usedHeadings = usedHeadings.slice( 0, options.tocLimit );
+	}
+
+	usedHeadings = usedHeadings.join( ',' );
+
+	const headings = $( usedHeadings )
 		.filter( function() {
 			return !$( this ).parents( '.live-snippet, .collapsing-list__item' ).length;
 		} );

package/src/tasks/compile-sass.js

@@ -5,7 +5,7 @@
 
 'use strict';
 
-const sass = require( 'node-sass' );
+const sass = require( 'sass' );
 const fs = require( 'fs-extra' );
 const upath = require( 'upath' );
 
@@ -22,7 +22,7 @@ module.exports = ( src, dst ) => {
 
 					return fs.readFile( absolutePath, 'utf-8', ( err, data ) => {
 						if ( err ) {
-							return reject( err );
+							return done( err );
 						}
 
 						return done( {

package/themes/umberto/layout/index.pug

@@ -7,7 +7,7 @@ block content
         != split.title || page.title
 
     if page.toc !== false
-        != uToc( page.content )
+        != uToc( page.content, { tocLimit: page[ 'toc-limit' ] } )
 
     != split.content
 

package/themes/umberto/layout/page.pug

@@ -8,7 +8,7 @@ block content
 		!= split.title || page.title
 
 	if page.toc !== false
-		!= uToc( page.content, { groupId: page.groupId } )
+		!= uToc( page.content, { groupId: page.groupId, tocLimit: page[ 'toc-limit' ] } )
 
 	!= split.content
 

package/themes/umberto/layout/sdk.pug

@@ -8,7 +8,7 @@ block content
 		!= split.title || page.title
 
 	if page.toc !== false
-		!= uToc( page.content, { groupId: page.groupId } )
+		!= uToc( page.content, { groupId: page.groupId, tocLimit: page[ 'toc-limit' ] } )
 
 	!= split.content
 

package/themes/umberto/src/css/_api-props-filter.scss

@@ -21,7 +21,7 @@ div.api-props-filter {
 		border-color: u-color( 'selected' );
 
 		&:hover {
-			background: u-color( 'selected', 5 );
+			background: u-color( 'selected', 5% );
 		}
 	}
 

package/themes/umberto/src/css/_badge.scss

@@ -16,7 +16,7 @@
 			text-decoration: none;
 
 			&:hover {
-				color: u-color('badge-#{ $color }', -50 );
+				color: u-color('badge-#{ $color }', -50% );
 				text-decoration: none;
 			}
 		}

package/themes/umberto/src/css/_collapsinglist.scss

@@ -185,7 +185,7 @@ ul.collapsing-list {
 				overflow: hidden;
 				height: $u-line-height-base + em;
 				white-space: nowrap;
-				margin-bottom: u-spacing( 0 )/2;
+				margin-bottom: math.div( u-spacing( 0 ), 2 );
 			}
 		}
 
@@ -233,7 +233,7 @@ ul.collapsing-list {
 	&__dev-names {
 		code#{&}--active {
 			display: block;
-			color: u-color( 'text', 40 );
+			color: u-color( 'text', 40% );
 			font-size: u-font-size( -1 );
 			cursor: default;
 		}

package/themes/umberto/src/css/_content.scss

@@ -80,7 +80,7 @@
 
 		h1 {
 			&:first-of-type {
-				margin-bottom: u-spacing( 0 ) / 2;
+				margin-bottom: math.div( u-spacing( 0 ), 2 );
 			}
 		}
 
@@ -124,7 +124,7 @@
 			font-size: 0.9em;
 			padding: 0;
 			margin: -0.4em 0 0 0;
-			color: u-color( 'text', 50 );
+			color: u-color( 'text', 50% );
 
 			&--hidden {
 				display: none;

package/themes/umberto/src/css/_footer.scss

@@ -27,7 +27,7 @@
 	}
 
 	p {
-		color: u-color( 'text', 20 );
+		color: u-color( 'text', 20% );
 	  	position: absolute;
 		bottom: u-spacing( 2 );
 		right: u-spacing( 3 );

package/themes/umberto/src/css/_formatted.scss

@@ -146,9 +146,9 @@
 	kbd {
 		display: inline-block;
 		background: u-color( 'background-dark' );
-		border: solid 1px u-border-color( 'background-hue', 5 );
-		border-bottom-color: u-border-color( 'background-hue', -5 );
-		box-shadow: inset 0 -1px 0  u-border-color( 'background-hue', -5 );
+		border: solid 1px u-border-color( 'background-hue', 5% );
+		border-bottom-color: u-border-color( 'background-hue', -5% );
+		box-shadow: inset 0 -1px 0  u-border-color( 'background-hue', -5% );
 		font-family: $u-font-face-mono;
 		font-size: .8em; // 12px;
 		padding: u-spacing( -3 ) u-spacing( -2 );
@@ -173,7 +173,7 @@
 			margin-bottom: 0;
 
 			&:last-of-type {
-				margin-bottom: u-spacing( 0 )/3;
+				margin-bottom: math.div( u-spacing( 0 ), 3 );
 			}
 		}
 
@@ -211,7 +211,7 @@
 	}
 
 	td, th {
-		border: 1px solid u-border-color( 'background-dark', 20 );
+		border: 1px solid u-border-color( 'background-dark', 20% );
 		padding: 6px 12px;
 	}
 

package/themes/umberto/src/css/_guide-content.scss

@@ -14,7 +14,7 @@
 				position: absolute;
 				padding: 0 1em;
 				left: -2em;
-				color: u-color( 'link', 20 );
+				color: u-color( 'link', 20% );
 			}
 
 			&:hover {

package/themes/umberto/src/css/_notice.scss

@@ -28,8 +28,8 @@ p.tip {
 		width: $u-top-icon-width;
 		height: $u-top-icon-width;
 		position: absolute;
-		left: ($u-top-icon-width*2 - $u-top-icon-width/2 ) * -1;
-		top: $u-top-icon-width/2;
+		left: ( $u-top-icon-width * 2 - math.div( $u-top-icon-width, 2 ) ) * -1;
+		top: math.div( $u-top-icon-width, 2 );
 	}
 
 	@include u-responsive-narrow {
@@ -41,8 +41,8 @@ p.tip {
 			width: $u-top-icon-width;
 			height: $u-top-icon-width;
 			position: absolute;
-			left: $u-top-icon-width - $u-top-icon-width/2;
-			top: $u-top-icon-width/2;
+			left: $u-top-icon-width - math.div( $u-top-icon-width, 2 );
+			top: math.div( $u-top-icon-width, 2 );
 		}
 	}
 

package/themes/umberto/src/css/_secondary-navigation.scss

@@ -140,7 +140,7 @@ nav.api-secondary-navigation {
 	}
 
 	h3 {
-		margin-bottom: u-spacing( 0 ) / 3;
+		margin-bottom: math.div( u-spacing( 0 ), 3 );
 		padding-top: 0;
 	}
 }

package/themes/umberto/src/css/_toggler.scss

@@ -23,7 +23,7 @@
 
 		&:hover {
 			&::before {
-				border-color: transparent transparent transparent u-color( 'toggler', -8 );
+				border-color: transparent transparent transparent u-color( 'toggler', -8% );
 			}
 		}
 	}
@@ -37,7 +37,7 @@
 
 		&:hover {
 			&::before {
-				border-color: u-color( 'toggler', -8 ) transparent transparent transparent;
+				border-color: u-color( 'toggler', -8% ) transparent transparent transparent;
 			}
 		}
 	}

package/themes/umberto/src/css/_top.scss

@@ -96,8 +96,8 @@ $u-rwd-button-size: 24px;
 						border-radius: 5px;
 						transition: 250ms all ease;
 
-						&:nth-child( 2 ) { top: ( $u-rwd-button-size / 3 ) * 1; }
-						&:nth-child( 3 ) { top: ( $u-rwd-button-size / 3 ) * 2; }
+						&:nth-child( 2 ) { top: math.div( $u-rwd-button-size, 3 ) * 1; }
+						&:nth-child( 3 ) { top: math.div( $u-rwd-button-size, 3 ) * 2; }
 					}
 				}
 			}
@@ -258,7 +258,7 @@ $u-rwd-button-size: 24px;
 				transition: 150ms ease all;
 
 				&:hover {
-					background-color: u-color( 'background-dark', -3 );
+					background-color: u-color( 'background-dark', -3% );
 				}
 
 				&:hover,
@@ -275,7 +275,7 @@ $u-rwd-button-size: 24px;
 					svg {
 						fill: currentColor;
 						width: 30px;
-						margin-top: ($u-top-sub - 30px) / 2;
+						margin-top: math.div( $u-top-sub - 30px, 2 );
 					}
 				}
 			}
@@ -308,7 +308,7 @@ $u-rwd-button-size: 24px;
 			}
 
 			&::-webkit-input-placeholder {
-				color: u-color( 'text', 70 );
+				color: u-color( 'text', 70% );
 			}
 
 			&:focus,

package/themes/umberto/src/css/_tree.scss

@@ -95,7 +95,7 @@ See: `_api-tree.scss` and `_guide-sdk-tree.scss`. */
 				background-color: u-color( 'background-hue' );
 
 				&:hover {
-					background-color: u-color( 'background-hue', -3 );
+					background-color: u-color( 'background-hue', -3% );
 				}
 			}
 		}

package/themes/umberto/src/css/helpers/_color.scss

@@ -33,10 +33,10 @@ $u-colors: (
 	'hint-warning': #FF1D00
 );
 
-@function u-color( $name, $offset: 0 ) {
+@function u-color( $name, $offset: 0% ) {
 	@return scale-color( map-get( $u-colors, $name ), $lightness: $offset );
 }
 
-@function u-border-color( $name, $offset: 0 ) {
-	@return u-color( $name, $offset - 25 );
+@function u-border-color( $name, $offset: 0% ) {
+	@return u-color( $name, $offset - 25% );
 }

package/themes/umberto/src/css/helpers/_font.scss

@@ -25,7 +25,7 @@ $u-font-sizes: (
 @mixin u-font-mono {
 	font-family: $u-font-face-mono;
 	font-size: .9em;
-	color: u-color( text, 20 );
+	color: u-color( text, 20% );
 }
 
 $u-baseline-levels: (

package/themes/umberto/src/css/helpers/_globals.scss

@@ -95,7 +95,7 @@ $u-top-icon-width: 30px;
 	margin-bottom: 0;
 	padding: u-spacing( 0 ) u-spacing( 2 );
 	border-top: 1px solid u-color( 'background-hue' );
-	// background: u-color( 'background-hue', 40 );
+	// background: u-color( 'background-hue', 40% );
 	background: u-color( 'background-bright' );
 	height: 50px;
 	border-top: 1px solid #eee;
@@ -108,7 +108,7 @@ $u-top-icon-width: 30px;
 	font-size: .85em;
 	text-transform: uppercase;
 	font-weight: 600;
-	color: u-color( 'text', 20 );
+	color: u-color( 'text', 20% );
 }
 
 @mixin levels( $depth, $spacing ) {

package/themes/umberto/src/css/styles.scss

@@ -1,9 +1,13 @@
 // Copyright (c) 2017-2021, CKSource - Frederico Knabben. All rights reserved.
 // For licensing, see LICENSE.md or http://ckeditor.com/license
 
-@import '~tippy.js/dist/tippy.css';
-@import '~tippy.js/themes/light-border.css';
-@import '~tippy.js/animations/scale.css';
+// Division using / is deprecated, math.div() has to be used instead.
+// See: https://sass-lang.com/documentation/breaking-changes/slash-div
+@use 'sass:math';
+
+@use '~tippy.js/dist/tippy.css';
+@use '~tippy.js/themes/light-border.css';
+@use '~tippy.js/animations/scale.css';
 
 @import 'helpers/globals';
 @import 'helpers/font';
@@ -29,7 +33,7 @@ body, html {
 
 body {
 	padding: $u-top-height 0 0;
-	color: u-color( text, 10 );
+	color: u-color( text, 10% );
 
 	@include u-responsive-tablet {
 		padding: $u-top-main 0 0;