umberto 5.0.2 → 6.1.0

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'

package/themes/umberto/layout/{_partial → gloria/_partial}/gh-contribute.pug

@@ -2,7 +2,7 @@ if page.issuesUrl || page.contributeUrl
     div.github-contrib
         if page.contributeUrl
             a( href=page.contributeUrl title="Contribute to this guide" )
-                img( src=relative_url( page.path, 'assets/' + umbertoVersion + '/img/edit.svg' ) alt="Contribute to this guide" )
+                img( src=relative_url( page.path, 'assets/' + umbertoVersion + '/gloria/img/edit.svg' ) alt="Contribute to this guide" )
         if page.issuesUrl
             a( href=page.issuesUrl title="Report an issue" )
-                img( src=relative_url( page.path, 'assets/' + umbertoVersion + '/img/exclamation-circle.svg' ) alt="Report an issue" )
+                img( src=relative_url( page.path, 'assets/' + umbertoVersion + '/gloria/img/exclamation-circle.svg' ) alt="Report an issue" )

package/themes/umberto/layout/{_partial → gloria/_partial}/head.pug

@@ -25,7 +25,7 @@ if ( mainOg || ( projectLocals && projectLocals.og ) || page[ 'og-description' ]
 		- const hostname = mainOg.hostname || ogConfig.hostname;
 		meta( property='og:image' content= hostname + pathJoin( '/docs', page.latestBasePath || '/', ogConfig.image ? ogConfig.image : mainOg.image) )
 	meta( property='og:type' content='website' )
-	if ( page.layout === 'index' )
+	if ( page.layout === 'gloria/index' )
 		meta( property='og:url' content= page.canonicalUrlBeginning + 'index.html' )
 	else
 		meta( property='og:url' content= page.canonicalUrlBeginning + page.path.replace( page.BASE_PATH, projectLocals.latestBasePath ) )
@@ -51,7 +51,7 @@ if page.BASE_PATH
 if ( docSearchConfig && docSearchConfig.isEnabled && !disableSearch && (!projectLocals || !projectLocals.disableSearch) )
 	link( rel = 'stylesheet', href = docSearchConfig.css )
 
-link( rel = 'stylesheet', href = relative_url( page.path, 'assets/' + umbertoVersion + '/css/styles.css' ), type='text/css' media='all' )
+link( rel = 'stylesheet', href = relative_url( page.path, 'assets/' + umbertoVersion + '/gloria/css/styles.css' ), type='text/css' media='all' )
 
 if projectLocals
 	each path in projectLocals.extraStylePaths

package/themes/umberto/layout/{_partial → gloria/_partial}/search-box.pug

@@ -3,4 +3,4 @@ if !disableSearch && (!projectLocals || !projectLocals.disableSearch)
 	div.top__search
 		input( type="text", id="docsearch_input", class="top__search__box", placeholder=placeholder )
 		div( class="top__search__button")
-			img( src=relative_url( page.path, 'assets/' + umbertoVersion + '/img/loupe.svg' ) alt="Search" )
+			img( src=relative_url( page.path, 'assets/' + umbertoVersion + '/gloria/img/loupe.svg' ) alt="Search" )

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

@@ -4,7 +4,7 @@ block content
 	- const split = uSplitToTitleAndContent( page.content );
 
 	h1.main__content-title( data-ln = page.shortName === 'index' ? page[ 'default-expanded' ] || page.shortName : page.shortName )
-		img( src=relative_url( page.path, 'assets/' + umbertoVersion + '/img/cog.svg' ) alt="API" )
+		img( src=relative_url( page.path, 'assets/' + umbertoVersion + '/gloria/img/cog.svg' ) alt="API" )
 		!= split.title || page.title
 
 	!= split.content

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

@@ -32,7 +32,7 @@ html( lang='en' )
 		include _partial/footer
 		include _partial/docsearch
 
-		script( src = relative_url( page.path, pathJoin( 'assets', umbertoVersion, 'scripts/app.js' ) ) )
+		script( src = relative_url( page.path, pathJoin( 'assets', umbertoVersion, 'gloria/scripts/app.js' ) ) )
 
 		if page.isSnippetPage
 			//UMBERTO: SNIPPET: JS

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

@@ -4,7 +4,7 @@ block content
 	- const split = uSplitToTitleAndContent( page.content );
 
 	h1.main__content-title
-		img( src=relative_url( page.path, 'assets/' + umbertoVersion + '/img/book.svg' ) alt="guide" )
+		img( src=relative_url( page.path, 'assets/' + umbertoVersion + '/gloria/img/book.svg' ) alt="guide" )
 		!= split.title || page.title
 
 	if page.toc !== false

package/themes/umberto/layout/umberto/404.pug

@@ -0,0 +1,22 @@
+doctype html
+html( lang='en' )
+    head
+        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 + '/umberto/css/styles.css', type='text/css' media='screen' )
+    body
+        header.top
+
+        main( class = 'main main--no-sitenav' )
+            section( class = 'main__content formatted' )
+
+                .main__content-inner
+                    - const split = uSplitToTitleAndContent( page.content );
+
+                    h1
+                        != split.title || page.title
+
+                    != split.content
+
+        include _partial/footer