umberto 6.0.0 → 6.1.0

package/CHANGELOG.md

@@ -1,6 +1,15 @@
 Changelog
 =========
 
+## [6.1.0](https://github.com/cksource/umberto/compare/v6.0.0...v6.1.0) (2025-04-15)
+
+### Features
+
+* Added the `skipSitemap` (for ignoring generating the sitemap) and `skipThemes` (for skipping preparing assets) flags. ([commit](https://github.com/cksource/umberto/commit/8ec19222e970d2f68ace87a108ead619827124f0))
+* Ability to define a theme per project. Closes [#1242](https://github.com/cksource/umberto/issues/1242). ([commit](https://github.com/cksource/umberto/commit/3bec129a57e224f574674543d9224bda55d1e081))
+* Use the provided `mainConfig` if available when creating symlinks. ([commit](https://github.com/cksource/umberto/commit/5b61d25ff96cbc0cdce7dc5a218e1ab6ca544189))
+
+
 ## [6.0.0](https://github.com/cksource/umberto/compare/v5.0.2...v6.0.0) (2025-04-01)
 
 ### BREAKING CHANGES

package/README.md

@@ -163,6 +163,8 @@ Sample documentation setup for the example above:
 `require ( 'umberto' ).buildSingleProject( options )`
 
 * `skipApi` - skip building API docs,
+* `skipSitemap` - skip building sitemap file,
+* `skipThemes` - skip building themes,
 * `skipValidation` - skip links validation,
 * `skipLivesSnippets` - skip building live code samples,
 * `snippetOptions` - options object passed to snippetAdapter building live code samples,
@@ -254,6 +256,7 @@ Every guide should have a front-matter at the top, which looks like this:
 
 ```
 ---
+layout: page [optional]
 category: builds-guides
 title: Overview [optional]
 slug: overview [optional]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "umberto",
-  "version": "6.0.0",
+  "version": "6.1.0",
   "description": "CKSource Documentation builder",
   "main": "src/index.js",
   "files": [

package/scripts/filter/before-post-render/set-layout.js

@@ -10,19 +10,17 @@
  * page.layout indicates the template which should be used to render the page.
  */
 hexo.extend.filter.register( 'before_post_render', page => {
-	// Api index page.
+	const theme = page.projectName === 'ckeditor4' ? 'umberto' : 'gloria';
+
 	if ( page.category === 'api-reference' ) {
-		page.layout = 'api';
+		page.layout = theme + '/api';
 		page.isApi = true;
-	}
-
-	if ( page.category === 'sdk' ) {
-		page.layout = 'sdk';
+	} else if ( page.category === 'sdk' ) {
+		page.layout = theme + '/sdk';
 		page.isSdk = true;
-	}
-
-	// Main index page.
-	if ( page.path === 'index.html' ) {
-		page.layout = 'index';
+	} else if ( page.path === 'index.html' ) {
+		page.layout = theme + '/index';
+	} else {
+		page.layout = theme + '/' + page.layout;
 	}
 } );

package/src/api-builder/classes/doc-data-factory.js

@@ -784,7 +784,7 @@ function sorter( a, b ) {
 /**
  * This is a JavaScript version of the `renderInlineFunction()` pug mixin.
  *
- * See: themes/umberto/layout/_api-docs/_mixin/_type.pug.
+ * See: `themes/umberto/<theme name>/layout/_api-docs/_mixin/_type.pug`.
  *
  * The goal is to render an inline object describing a callable type.
  *

package/src/data-converter/converters/typedoc/typedocconverter.js

@@ -462,7 +462,7 @@ class TypeConverter {
 	 * The returned object contains a `value` property which must be an array.
 	 * Thanks to that, it can be pass through the `type()` mixin.
 	 *
-	 * See: `themes/umberto/layout/_api-docs/_mixin/_type.pug.
+	 * See: `themes/umberto/<theme name>/layout/_api-docs/_mixin/_type.pug`.
 	 *
 	 * @param {Array.<TypedocReflectionTypeParameter>|null} parameters
 	 * @returns {Array.<Object>|null}
@@ -641,7 +641,7 @@ class TypeConverter {
 		// See the `TypedocTypeDetails` type in the `typedoc.ts` file for checking the supported types.
 		//
 		// Results of this function is processed by Pug.
-		// See: `themes/umberto/layout/_api-docs/_mixin/_type.pug`.
+		// See: `themes/umberto/<theme name>/layout/_api-docs/_mixin/_type.pug`.
 		//
 		// When introducing support for more TypeScript constructions,
 		// consider introducing a new structure that contains an opening symbol,

package/src/index.js

@@ -6,178 +6,140 @@
 'use strict';
 
 const path = require( 'path' );
-const fs = require( 'fs' );
 const chalk = require( 'chalk' );
 const compileSass = require( './tasks/compile-sass' );
 const runWebpack = require( './tasks/run-webpack' );
 const copyAssets = require( './tasks/copy-assets' );
+const getMainConfig = require( './tasks/get-main-config' );
 const createSymLinks = require( './tasks/create-sym-links' );
 const buildDocumentation = require( './tasks/build-documentation' );
 const getProjectConfig = require( './tasks/get-project-config' );
-const cacheFiles = require( './tasks/cache-files' );
 const watcher = require( './tasks/watcher' );
 const validateHtml = require( './tasks/validate-html-w3c' );
-const umbertoVersion = require( '../package.json' ).version;
-const umbertoDir = path.join( __dirname, '..' );
-const themeDir = path.join( __dirname, '../themes/umberto' );
-// Theme's styles and scripts path.
-const sourceDir = path.join( themeDir, 'src' );
-const outputDir = path.join( process.cwd(), 'build/docs' );
-const cacheDir = path.join( __dirname, '../temp/cache' );
-const stylesSource = path.join( sourceDir, 'css', 'styles.scss' );
-const stylesDestination = path.join( outputDir, 'assets', umbertoVersion, 'css', 'styles.css' );
+const { version } = require( '../package.json' );
 
 module.exports = {
 	/**
 	 * Builds documentation for a single project.
 	 * Intended to use within project's task runner or along other build scripts.
 	 *
-	 * @param {Object} [options={}]
-	 * @param {Boolean} [options.skipApi=false] Skips rendering API docs.
-	 * @param {Boolean} [options.skipValidation=false] Skips validating links.
-	 * @param {Boolean} [options.skipLiveSnippets=false] Skips building live code snippets. Live code snippets is an
-	 * extra feature and is usually not used.
-	 * @param {Object} [options.snippetOptions={}] Additional options passed to snippetAdapter.
-	 * @param {Boolean} [options.dev=false] Skip js minification, don't clear build directory when rebuilding docs,
-	 * reuse unchanged files.
-	 * @param {Boolean} [options.verbose=false] Adds more information to console during documentation building.
-	 * @param {Boolean} [options.createSymLinks=true] Add symbolic links with 'latest' to output folder.
-	 * @param {Boolean} [options.watch=false] Run Umberto with watch mode, which track changes in dm files and rebuild docs with it.
-	 * @param {Boolean} [options.validateW3C=false] Use vnu java validator to check every single output page for html syntax errors.
+	 * @param {Options} [options={}]
 	 * @returns {Promise}
 	 */
-	buildSingleProject( options ) {
-		const timer = process.hrtime();
-
-		return getProjectConfig( process.cwd(), options )
-			.then( pConfig => {
-				return buildDocumentation( Object.assign(
-					options,
-					{
-						mainConfig: {
-							projects: [ '.' ],
-							docsearch: pConfig.docsearch,
-							googleoptimize: pConfig.googleoptimize,
-							googletagmanager: pConfig.googletagmanager,
-							googleanalytics: pConfig.googleanalytics,
-							feedbackWidget: pConfig.feedbackWidget,
-							isSingleProject: true,
-							canonicalUrlBeginning: pConfig.canonicalUrlBeginning,
-							vwo: pConfig.vwo
-						}
-					}
-				) );
-			} )
-			.then( hexoManager => postBuild( options, hexoManager ) )
-			.then( hexoManager => {
-				const time = process.hrtime( timer );
-
-				console.log( `Building documentation complete in ${ Math.floor( time[ 0 ] / 60 ) }m ${ time[ 0 ] % 60 }.${ time[ 1 ] }s.` );
-
-				return hexoManager;
-			} )
-			.then( hexoManager => {
-				if ( options.watch ) {
-					return watcher( hexoManager );
-				} else {
-					return Promise.resolve();
-				}
-			} )
-			.catch( err => {
-				console.error( `Building documentation failed: ${ err.stack }` );
-				process.exitCode = 1;
-
-				throw err;
-			} );
+	async buildSingleProject( options = {} ) {
+		try {
+			const config = await getProjectConfig( process.cwd(), options );
+
+			options.mainConfig = {
+				...config,
+				projects: [ '.' ],
+				isSingleProject: true
+			};
+
+			await buildAndWatch( options );
+		} catch ( err ) {
+			console.error( chalk.redBright( `Building documentation failed: ${ err.stack }` ) );
+			process.exitCode = 1;
+
+			throw err;
+		}
 	},
 
 	/**
 	 * Builds documentation for multiple projects at once.
 	 *
-	 * @param {Object} [options={}]
-	 * @param {Boolean} [options.skipApi=false] Skips rendering API docs.
-	 * @param {Boolean} [options.skipValidation=false] Skips validating links.
-	 * @param {Boolean} [options.skipLiveSnippets=false] Skips building live code snippets. Live code snippets is an
-	 * extra feature and is usually not used.
-	 * @param {Object} [options.snippetOptions={}] Additional options passed to snippetAdapter.
-	 * @param {Boolean} [options.dev=false] Skip js minification, don't clear build directory when rebuilding docs,
-	 * reuse unchanged files.
-	 * @param {Boolean} [options.verbose=false] Adds more information to console during documentation building.
-	 * @param {Boolean} [options.createSymLinks=true] Add symbolic links with 'latest' to output folder.
-	 * @param {Boolean} [options.watch=false] Run Umberto with watch mode, which track changes in dm files and rebuild docs with it.
-	 * @param {Boolean} [options.validateW3C=false] Use vnu java validator to check every single output page for html syntax errors.
+	 * @param {Options} [options={}]
 	 * @returns {Promise}
 	 */
-	buildMultiProjects( options ) {
-		const timer = process.hrtime();
-
-		return buildDocumentation( options )
-			.then( hexoManager => postBuild( options, hexoManager ) )
-			.then( hexoManager => {
-				const time = process.hrtime( timer );
-
-				console.log( chalk.greenBright(
-					`Building documentation complete in ${ Math.floor( time[ 0 ] / 60 ) }m ${ time[ 0 ] % 60 }.${ time[ 1 ] }s.`
-				) );
-
-				return hexoManager;
-			} )
-			.then( hexoManager => {
-				if ( options.watch ) {
-					return watcher( hexoManager );
-				} else {
-					return Promise.resolve();
-				}
-			} )
-			.catch( err => {
-				console.error( `Building documentation failed: ${ err.stack }` );
-				process.exitCode = 1;
-
-				throw err;
-			} );
+	async buildMultiProjects( options = {} ) {
+		try {
+			await buildAndWatch( options );
+		} catch ( err ) {
+			console.error( chalk.redBright( `Building documentation failed: ${ err.stack }` ) );
+			process.exitCode = 1;
+
+			throw err;
+		}
 	}
 };
 
-// Compiles and copies Umberto assets to build directory.
-function postBuild( options, hexoManager ) {
-	// Compile theme's scripts.
-	return Promise.resolve()
-		.then( () => {
-			// Allows to skip webpack for subsequent local builds.
-			const jsExistsInBuild = fs.existsSync( path.join( outputDir, 'assets', umbertoVersion, 'scripts', 'app.js' ) );
-
-			if ( !options.dev || !jsExistsInBuild || cacheFiles( path.join( sourceDir, 'js' ), path.join( cacheDir, 'umberto-js' ) ) ) {
-				return runWebpack(
-					path.join( sourceDir, 'js', 'app.js' ),
-					path.join( outputDir, 'assets', umbertoVersion, 'scripts' ),
-					{
-						minify: !options.dev,
-						umbertoDir,
-						version: umbertoVersion
-					}
-				);
-			} else {
-				console.log( 'No theme JS files have changed since last local run, skipping webpack.' );
-
-				return Promise.resolve();
-			}
-		} )
-		.then( () => copyAssets() )
-		.then( () => compileSass( stylesSource, stylesDestination ) )
-		.then( () => {
-			if ( options.validateW3C ) {
-				return validateHtml( outputDir, options );
-			} else {
-				return Promise.resolve();
-			}
-		} )
-		.then( () => {
-			if ( options.createSymLinks || options.createSymLinks === undefined ) {
-				return createSymLinks( {
-					rootPath: process.cwd(),
-					isSingleProject: options.mainConfig ? options.mainConfig.isSingleProject : false
-				} );
+/**
+ * @param {Options} options
+ * @returns {Promise}
+ */
+async function buildAndWatch( options ) {
+	const timer = process.hrtime();
+	const outputDir = path.join( process.cwd(), 'build', 'docs' );
+
+	const hexoManager = await buildDocumentation( options );
+
+	if ( !options.skipThemes ) {
+		await buildThemes( outputDir, options );
+	}
+
+	if ( options.validateW3C ) {
+		await validateHtml( outputDir, options );
+	}
+
+	if ( options.createSymLinks !== false ) {
+		const rootPath = process.cwd();
+
+		await createSymLinks( {
+			rootPath,
+			mainConfig: options.mainConfig || getMainConfig( rootPath ),
+			isSingleProject: options.mainConfig ? options.mainConfig.isSingleProject : false
+		} );
+	}
+
+	const [ time ] = process.hrtime( timer );
+
+	console.log( chalk.greenBright( `Building documentation complete in ${ Math.floor( time / 60 ) }m ${ time % 60 }s.` ) );
+
+	if ( options.watch ) {
+		return watcher( hexoManager );
+	}
+
+	return null;
+}
+
+async function buildThemes( outputDir, options ) {
+	const themesDir = path.join( __dirname, '../themes/umberto' );
+	const sourceDir = path.join( themesDir, 'src' );
+	const outputAssetsPath = path.join( outputDir, 'assets', version );
+	const layoutThemes = [ 'umberto', 'gloria' ];
+
+	for ( const theme of layoutThemes ) {
+		await runWebpack(
+			path.join( sourceDir, theme, 'js/app.js' ),
+			path.join( outputAssetsPath, theme, 'scripts' ),
+			{
+				minify: !options.dev,
+				umbertoDir: themesDir,
+				version
 			}
-		} )
-		.then( () => Promise.resolve( hexoManager ) );
+		);
+
+		await copyAssets(
+			path.join( themesDir, 'source', theme ),
+			path.join( outputAssetsPath, theme )
+		);
+
+		await compileSass(
+			path.join( sourceDir, theme, 'css/styles.scss' ),
+			path.join( outputAssetsPath, theme, 'css/styles.css' )
+		);
+	}
 }
+
+/**
+ * @typedef {Object} Options
+ * @property {boolean} [skipApi=false] Skips rendering API docs.
+ * @property {boolean} [skipValidation=false] Skips validating links.
+ * @property {boolean} [skipLiveSnippets=false] Skips building live code snippets.
+ * @property {Object} [snippetOptions={}] Additional options passed to snippetAdapter.
+ * @property {boolean} [dev=false] Skip JS minification, don't clear build directory when rebuilding docs, reuse unchanged files.
+ * @property {boolean} [verbose=false] Adds more information to console during documentation building.
+ * @property {boolean} [createSymLinks=true] Add symbolic links with 'latest' to output folder.
+ * @property {boolean} [watch=false] Run Umberto with watch mode, which track changes in dm files and rebuild docs with it.
+ * @property {boolean} [validateW3C=false] Use vnu java validator to check every single output page for html syntax errors.
+ */

package/src/tasks/build-api-docs.js

@@ -40,15 +40,15 @@ module.exports = config => {
 	const docSources = readDocSources( src, apiType );
 	const dataProvider = new DataProvider();
 	const dataCollection = dataProvider.convert( apiType, docSources, { middlewares } );
-	const projectName = projectConfig.name;
+	const theme = projectConfig.slug === 'ckeditor5' ? 'gloria' : 'umberto';
 
 	if ( !dataCollection ) {
-		console.error( `Could not convert docs data for: ${ projectName }.` );
+		console.error( `Could not convert docs data for: ${ projectConfig.name }.` );
 
 		return;
 	}
 
-	const templateCol = new TemplateCollection( upath.join( themePath, 'layout/_api-docs' ), {
+	const templateCol = new TemplateCollection( upath.join( themePath, 'layout', theme, '_api-docs' ), {
 		locals: templateLocals
 	} );
 	const apiBuilder = new ApiBuilder(
@@ -64,7 +64,7 @@ module.exports = config => {
 		}
 	);
 
-	console.log( `Building API docs of ${ projectName }...` );
+	console.log( `Building API docs of ${ projectConfig.name }...` );
 	console.time( 'Built API docs in' );
 	const buildInfo = apiBuilder.buildApi();
 	console.timeEnd( 'Built API docs in' );

package/src/tasks/build-documentation.js

@@ -56,6 +56,7 @@ const getFilePatternsToProcess = require( '../helpers/get-file-patterns-to-proce
  * @param {Object} options.snippetOptions Additional options passed to snippetAdapter.
  * @param {Boolean} options.skipValidation Skip validating links.
  * @param {Boolean} options.skipGuides Skip processing guides. Useful for checking the layout changes.
+ * @param {Boolean} options.skipSitemap Skip generating sitemap file. Useful when doing partial build.
  * @param {Boolean} options.verbose Provide more details during building documentation.
  * @param {Boolean} [options.watch] Flag which indicates that hexo should watch files.
  * @param {Array.<String>} [options.guides] An array containing names of guides that will be processed by Umberto. Useful when building
@@ -67,7 +68,7 @@ module.exports = options => {
 	const {
 		mainConfig = getMainConfig( process.cwd() ),
 		rootPath = process.cwd(),
-		clean = false,
+		clean = !options.dev,
 		dev = false,
 		skipApi = false,
 		skipLiveSnippets = false,
@@ -76,6 +77,7 @@ module.exports = options => {
 		snippetOptions = {},
 		skipValidation = false,
 		skipGuides = false,
+		skipSitemap = false,
 		watch = false,
 		verbose = false,
 		guides = []
@@ -87,11 +89,11 @@ module.exports = options => {
 
 	return hexoManager.hexoInit()
 		// Clear build directory if it's not a local build (dev==true) or it is a local build and clean==true.
-		.then( () => !dev || clean ? hexoManager.clean() : Promise.resolve() )
+		.then( () => clean ? hexoManager.clean() : Promise.resolve() )
 		// Clear hexo source directory.
 		// Hexo source directory is where all markdown files and assets land and are used by hexo to render pages.
 		// It's possible to not delete them with every build to reuse files from previous builds.
-		.then( () => !dev || clean || !skipLiveSnippets ? hexoManager.emptySourceDir() : Promise.resolve() )
+		.then( () => clean || !skipLiveSnippets ? hexoManager.emptySourceDir() : Promise.resolve() )
 		// Copies common files for multiple projects scenario, e.g.: robots.txt,
 		// landing page (written in markdown like other guides), assets common for all projects etc.
 		.then( () => {
@@ -274,6 +276,10 @@ module.exports = options => {
 				}
 			}
 
+			if ( skipSitemap ) {
+				return Promise.resolve();
+			}
+
 			return createSitemap( 'build/docs', hostname, dst, {
 				excluded: excludedUrls,
 				extraUrlSettings

package/src/tasks/build-sdk.js

@@ -9,19 +9,35 @@ const TemplateCollection = require( '../template/template-collection' );
 const SdkBuilder = require( '../sdk-builder/sdk-builder' );
 
 module.exports = config => {
-	const templateCollection = new TemplateCollection( upath.join( config.themePath, 'layout/_sdk' ), {
-		locals: config.templateLocals
+	const {
+		outputDir, // build/docs
+		themePath, // Umberto theme path
+		BASE_PATH, // e.g.: ckeditor5/latest
+		docSearch, // Algolia's docsearch config
+		templateLocals, // Various data required by templates
+		projectConfig, // umberto.json config
+		canonicalUrlBeginning,
+		projectRootPath,
+		projectPath,
+		srcPath,
+		macrosVariables
+	} = config;
+
+	const theme = projectConfig.slug === 'ckeditor5' ? 'gloria' : 'umberto';
+
+	const templateCollection = new TemplateCollection( upath.join( themePath, 'layout', theme, '_sdk' ), {
+		locals: templateLocals
 	} );
 	const sdkBuilder = new SdkBuilder( {
-		BASE_PATH: config.BASE_PATH,
+		BASE_PATH,
 		startPage: '/index.html',
-		sdkCollection: getSdkSources( upath.join( config.projectRootPath, config.projectPath, config.srcPath ) ),
+		sdkCollection: getSdkSources( upath.join( projectRootPath, projectPath, srcPath ) ),
 		template: templateCollection,
-		config: config.projectConfig,
-		destinationPath: upath.join( config.outputDir, config.BASE_PATH ),
-		canonicalUrlBeginning: config.canonicalUrlBeginning,
-		macrosVariables: config.macrosVariables,
-		docSearch: config.docSearch
+		config: projectConfig,
+		destinationPath: upath.join( outputDir, BASE_PATH ),
+		canonicalUrlBeginning,
+		macrosVariables,
+		docSearch
 	} );
 
 	sdkBuilder.buildSdk();

package/src/tasks/copy-assets.js

@@ -7,27 +7,27 @@
 
 const upath = require( 'upath' );
 const copyFiles = require( './copy-files' );
-const themeDir = upath.join( __dirname, '../../themes/umberto' );
-const umbertoVersion = require( '../../package.json' ).version;
 
 /**
  * Copies umberto images to build directory.
  *
+ * @param {string} themeDir
+ * @param {string} outputPath
  * @returns {Promise}
  */
-module.exports = () => {
+module.exports = ( themeDir, outputPath ) => {
 	return Promise.all( [
 		copyFiles(
-			upath.join( themeDir, 'source', 'assets', '_img' ),
-			upath.join( process.cwd(), 'build', 'docs', 'assets', umbertoVersion, 'img' )
+			upath.join( themeDir, 'assets', '_img' ),
+			upath.join( outputPath, 'img' )
 		),
 		copyFiles(
-			upath.join( themeDir, 'source', 'assets', '_scripts' ),
-			upath.join( process.cwd(), 'build', 'docs', 'assets', umbertoVersion, 'scripts' )
+			upath.join( themeDir, 'assets', '_scripts' ),
+			upath.join( outputPath, 'scripts' )
 		),
 		copyFiles(
-			upath.join( themeDir, 'source', 'assets', '_css' ),
-			upath.join( process.cwd(), 'build', 'docs', 'assets', umbertoVersion, 'css' )
+			upath.join( themeDir, 'assets', '_css' ),
+			upath.join( outputPath, 'css' )
 		)
 	] );
 };

package/src/tasks/create-sym-links.js

@@ -6,12 +6,12 @@
 'use strict';
 
 const getProjectConfig = require( './get-project-config' );
-const getMainConfig = require( './get-main-config' );
 const upath = require( 'upath' );
 const fs = require( 'fs' );
 const chalk = require( 'chalk' );
 
 module.exports = async ( {
+	mainConfig,
 	rootPath,
 	isSingleProject = false
 } ) => {
@@ -20,8 +20,7 @@ module.exports = async ( {
 	if ( isSingleProject ) {
 		configs.push( await getProjectConfig( rootPath, { skipLiveSnippets: true } ) );
 	} else {
-		const projectPaths = getMainConfig( rootPath ).projects;
-		const promises = projectPaths.map( projectPath => {
+		const promises = mainConfig.projects.map( projectPath => {
 			return getProjectConfig( upath.join( rootPath, projectPath ), { skipLiveSnippets: true } );
 		} );
 		configs.push( ...await Promise.all( promises ) );

package/themes/umberto/layout/{404.pug → gloria/404.pug}

@@ -4,7 +4,7 @@ html( lang='en' )
         meta( charset='utf-8' )
         meta( name="viewport" content="width=device-width, initial-scale=1")
         title= page[ 'meta-title' ] ? page[ 'meta-title' ] : page.title
-        link( rel = 'stylesheet', href = '/assets/' + umbertoVersion + '/css/styles.css', type='text/css' media='screen' )
+        link( rel = 'stylesheet', href = '/assets/' + umbertoVersion + '/gloria/css/styles.css', type='text/css' media='screen' )
     body
         header.top
 

package/themes/umberto/layout/{_api-docs → gloria/_api-docs}/class.pug

@@ -2,7 +2,7 @@ extends api-base
 include ./_mixin/_api-title
 
 block prepend content
-    +apiTitle( { iconPath: 'assets/' + umbertoVersion + '/img/cog.svg', kind: 'Class' } )
+    +apiTitle( { iconPath: 'assets/' + umbertoVersion + '/gloria/img/cog.svg', kind: 'Class' } )
 
 //- Make sure to add the report issue widget at the end of the page.
 block append content

package/themes/umberto/layout/gloria/_api-docs/interface.pug

@@ -0,0 +1,10 @@
+extends api-base
+include ./_mixin/_api-title
+
+block prepend content
+    +apiTitle( { iconPath: 'assets/' + umbertoVersion + '/gloria/img/arrows.svg', kind: 'Interface' } )
+
+//- 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

package/themes/umberto/layout/{_api-docs → gloria/_api-docs}/mixin.pug

@@ -2,7 +2,7 @@ extends api-base
 include ./_mixin/_api-title
 
 block prepend content
-    +apiTitle( { iconPath: 'assets/' + umbertoVersion + '/img/cog.svg', kind: 'Mixin' } )
+    +apiTitle( { iconPath: 'assets/' + umbertoVersion + '/gloria/img/cog.svg', kind: 'Mixin' } )
 
 //- Make sure to add the report issue widget at the end of the page.
 block append content

package/themes/umberto/layout/gloria/_api-docs/module.pug

@@ -0,0 +1,10 @@
+extends api-base
+include ./_mixin/_api-title
+
+block prepend content
+    +apiTitle( { iconPath: 'assets/' + umbertoVersion + '/gloria/img/box-red.svg', kind: 'Module' } )
+
+//- 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

package/themes/umberto/layout/{_api-docs → gloria/_api-docs}/namespace.pug

@@ -2,7 +2,7 @@ extends api-base
 include ./_mixin/_api-title
 
 block prepend content
-    +apiTitle( { iconPath: 'assets/' + umbertoVersion + '/img/box-brown.svg', kind: 'Namespace' } )
+    +apiTitle( { iconPath: 'assets/' + umbertoVersion + '/gloria/img/box-brown.svg', kind: 'Namespace' } )
 
 //- Make sure to add the report issue widget at the end of the page.
 block append content

package/themes/umberto/layout/{_api-docs → gloria/_api-docs}/typedef.pug

@@ -6,7 +6,7 @@ include ./_mixin/_related
 include ./_mixin/_link-or-text
 
 block prepend content
-    +apiTitle( { iconPath: 'assets/' + umbertoVersion + '/img/data.svg', kind: 'Typedef' } )
+    +apiTitle( { iconPath: 'assets/' + umbertoVersion + '/gloria/img/data.svg', kind: 'Typedef' } )
 
 block append content
     if data.types.length == 1 && data.types[ 0 ] == 'function'