umberto 7.0.2 → 8.0.0

package/LICENSE.md

@@ -5,12 +5,51 @@ Copyright (c) 2017-2025, [CKSource](http://cksource.com) Holding sp. z o.o. All
 
 Licensed under the terms of [MIT License](https://opensource.org/licenses/MIT).
 
-Sources of Intellectual Property Included in CKEditor
+Sources of Intellectual Property Included in Umberto
 -----------------------------------------------------
 
-Where not otherwise indicated, all CKEditor content is authored by CKSource engineers and consists of CKSource-owned intellectual property. In some specific instances, CKEditor will incorporate work done by developers outside of CKSource with their express permission.
+Where not otherwise indicated, all Umberto content is authored by CKSource engineers and consists of CKSource-owned intellectual property. In some specific instances, Umberto will incorporate work done by developers outside of CKSource with their express permission.
 
-Trademarks
-----------
+The following libraries are included in Umberto under the [MIT license](https://opensource.org/licenses/MIT):
 
-**CKEditor** is a trademark of [CKSource](http://cksource.com) Holding sp. z o.o. All other brand and product names are trademarks, registered trademarks or service marks of their respective holders.
+* @babel/core - Copyright (c) 2014-present Sebastian McKenzie and other contributors
+* @babel/preset-env - Copyright (c) 2014-present Sebastian McKenzie and other contributors
+* babel-loader - Copyright (c) 2014-2019 Luís Couto <hello@luiscouto.pt>
+* cheerio - Copyright (c) 2022 The Cheerio contributors
+* escape-string-regexp - Copyright (c) Sindre Sorhus <sindresorhus@gmail.com> (https://sindresorhus.com)
+* fs-extra - Copyright (c) 2011-2024 JP Richardson
+* hexo - Copyright (c) 2012-present Tommy Chen
+* hexo-generator-archive - Copyright (c) 2014 Tommy Chen
+* hexo-generator-category - Copyright (c) 2014 Tommy Chen
+* hexo-generator-index - Copyright (c) 2014 Tommy Chen
+* hexo-generator-tag - Copyright (c) 2014 Tommy Chen
+* hexo-render-pug - Copyright (c) Max Knee
+* hexo-renderer-markdown-it-plus - Copyright (c) 2017 CHENXCHEN
+* htmlparser2 - Copyright 2010, 2011, Chris Winberry <chris@winberry.net>
+* javascript-stringify - Copyright (c) 2013 Blake Embrey (hello@blakeembrey.com)
+* jquery - Copyright OpenJS Foundation and other contributors, https://openjsf.org/
+* js-beautify - Copyright (c) 2007-2018 Einar Lielmanis, Liam Newman, and contributors.
+* lodash - Copyright OpenJS Foundation and other contributors <https://openjsf.org/>
+* markdown-it - Copyright (c) 2014 Vitaly Puzrin, Alex Kocharin.
+* markdown-it-toc-and-anchor - Copyright (c) 2015 Maxime Thirouin
+* medium-zoom - Copyright (c) 2016-present François Chalifour
+* moment - Copyright (c) JS Foundation and other contributors
+* pug - Copyright (c) 2009-2014 TJ Holowaychuk <tj@vision-media.ca>
+* sass - Copyright (c) 2016, Google Inc.
+* sitemap - Copyright (c) 2011 Eugene Kalinin
+* tippy.js - Copyright (c) 2017-present atomiks
+* tree-model - Copyright (c) 2013 João Nuno Silva
+* upath - Copyright(c) 2014-2020 Angelos Pikoulas (agelos.pikoulas@gmail.com)
+* vnu-jar - Copyright (c) 2007-2016 Mozilla Foundation
+* webpack - Copyright JS Foundation and other contributors
+
+The following libraries are included in Umberto under the [Apache License, version 2.0](https://opensource.org/license/apache-2-0/):
+
+* fuse.js - Copyright 2017 Kirollos Risk
+
+The following libraries are included in Umberto under the [ISC license](https://opensource.org/license/isc-license-txt):
+
+* glob - Copyright (c) 2009-2023 Isaac Z. Schlueter and Contributors
+* markdown-it-expand-tabs - Copyright (c) 2016, Revin Guillen
+* minimatch - Copyright (c) 2011-2023 Isaac Z. Schlueter and Contributors
+* nyc - Copyright (c) 2015, Contributors

package/README.md

@@ -675,6 +675,193 @@ E.g.
 	MAIN
 	```
 
+## Pre-rendering components
+
+> ⚠️ **Warning**: This feature is only available with the Gloria theme.
+
+### Overview
+
+Pre-rendering components lets you use XML-like custom component syntax in Markdown files that gets converted to Pug templates. This allows for a more intuitive HTML-like syntax in documentation while leveraging the power of Pug mixins for rendering complex UI components. It also reduces CLS (First Contentful Paint) by pre-rendering components before the page is fully loaded and makes the site more accessible by adding aria attributes to the components.
+
+The main implementation can be found in `/scripts/filter/before-post-render/gloria/prerender-xml-pug-components.js`.
+
+### How It Works
+
+The process works in two steps:
+
+1. **Before markdown rendering**: Components are identified, processed, and replaced with markers
+2. **After markdown rendering**: Markers are replaced with the fully rendered components
+
+This approach prevents Markdown processors from misinterpreting HTML indentation and nested structures, avoiding unwanted paragraph breaks, incorrect formatting, or stripped content. It's also possible to use Markdown syntax inside the component content and place nested components in the content of the previously defined component.
+
+The component syntax is defined with a prefix `ck:`. For example:
+
+```html
+<ck:banner variant="primary" label="Get started" href="https://example.com">
+	This is a banner with a **link**.
+	<ck:button-link variant="secondary" label="Learn more" href="https://example.com/learn-more" />
+</ck:banner>
+```
+
+Is translated into:
+
+```pug
++banner({ variant: 'primary', label: 'Get started', href: 'https://example.com' })
+	| This is a banner with a **link**.
+	+button-link({ variant: 'secondary', label: 'Learn more', href: 'https://example.com/learn-more' })
+```
+
+### Component Definition
+
+Components are defined in the `COMPONENTS` array in the `prerender-xml-pug-components.js` file. Each component definition includes:
+
+* `tag`: The XML-like tag to match in Markdown content
+* `pug`: Configuration for rendering with Pug
+  * `mixinName`: The name of the Pug mixin to call
+  * `path`: Path to the Pug file containing the mixin
+  * `allowMarkdownContent`: Whether to render markdown in the component content
+  * `slots`: Optional array of child components that can be nested
+
+Example component definition:
+
+```javascript
+{
+	tag: 'ck:banner',
+	mixinName: 'banner',
+	requires: [ /* ... */ ],
+	allowMarkdownContent: true
+}
+```
+
+### Slot components
+
+```html
+<ck:tabs>
+	<ck:tab id="desktop" label="Desktop" active="true">
+		This is the desktop tab content.
+	</ck:tab>
+
+	<ck:tab id="mobile" label="Mobile">
+		Use the **main menu button** in the upper-left corner to navigate through the documentation.
+	</ck:tab>
+</ck:tabs>
+```
+
+which is translated into:
+
+```pug
++tabs
+	+tab({ id: 'desktop', label: 'Desktop', active: true })
+		| This is the desktop tab content.
+	+tab({ id: 'mobile', label: 'Mobile' })
+		| Use the **main menu button** in the upper-left corner to navigate through the documentation.
+```
+
+The `tab` components is child mixin of the `tabs` component. It's NOT globally available. It means that you cannot use `+tab` outside of the `tabs` component and it can modify internal state of the `tabs` component.
+
+They can be defined as follows:
+
+```pug
+mixin tabs( options )
+	- const tabs = {};
+
+	mixin tab({ id, label, active } = {})
+		-
+			tabs[ id ] = {
+				label,
+				active
+			}
+
+	- block ? block() : undefined;
+
+	.c-tabs
+		each tab, id in tabs
+			= tab.label
+
+			//- ....
+```
+
+### Available Components
+
+All available components can be found in the Gloria theme's components directory: `/themes/umberto/layout/gloria/_components`.
+
+This directory contains all Pug mixins that can be used with the pre-rendering system. Each component typically has its own subdirectory containing:
+
+1. The primary `index.pug` file with the mixin definition
+2. Additional files for complex components
+3. Sometimes SCSS styles in a separate file
+
+Some of the most commonly used components include:
+
+* `banner` - For promotional banners
+* `button` - Button components
+* `callout` - For information, warning, and error callouts (info-box)
+* `code-switcher` - For tabs that switch between code samples
+* `svg` - For inline SVG and spritesheet icons
+* `tabs` - For tabbed content
+
+To see all available components and their parameters, browse the directories within the `_components` folder. Each component's implementation can be studied to understand the available options and parameters.
+
+## Pre-rendering icons
+
+> ⚠️ **Warning**: This feature is only available with the Gloria theme.
+
+Icons are implemented using an SVG spritesheet approach for better performance. It means that all icons are combined into a single SVG spritesheet tag somewhere in the document. This reduces the number of HTTP requests and improves loading times. Only used icons are included in the spritesheet. In order to use additional icon you need to preload it using `preload-spritesheet-svg` mixin.
+
+### Icon Usage
+
+There are three ways to use icons:
+
+1. **Using plain svg mixins**
+   ```pug
+   +svg-icon({ icon: 'github', size: 'lg', title: 'GitHub' })
+   //- or
+   +svg({ file: 'icons/github', fill: 'currentColor' })
+   ```
+
+2. **Using bound component** (used in Markdown):
+   ```html
+   <ck:svg-icon icon="github" size="lg" title="GitHub"></ck:svg-icon>
+   <!-- or -->-
+   <ck:svg file="icons/github" fill="currentColor" />
+   ```
+
+3. **Web Component** (used in JavaScript):
+   ```html
+   <svg-icon icon="github" size="lg" title="GitHub"></svg-icon>
+   ```
+
+   Remember to preload the icon before using it in JavaScript!
+
+### Preloading Icons
+
+For icons that will be dynamically added via JavaScript and aren't initially visible on the page, you can preload them to ensure they're included in the spritesheet:
+
+```html
+<ck:preload-svg-spritesheet-icon icon="menu" />
+<!-- or -->
+<ck:preload-spritesheet-svg file="icons/menu" />
+```
+
+Or using the icon mixin:
+
+```pug
++preload-svg-spritesheet-icon({ icon: 'menu' })
+//- or
++preload-spritesheet-svg({ file: 'icons/menu' })
+```
+
+### How icons are loaded
+
+1. During the build process, all icons used with `data-spritesheet-svg` are collected
+2. A single SVG spritesheet is created with all these icons as `<symbol>` elements
+3. The spritesheet is injected at the beginning of the `<body>` with `display: none`
+4. When an icon is needed, it references the spritesheet using `<use href="#icon-id"></use>`
+
+This approach significantly reduces HTTP requests and improves page performance when multiple icons are used.
+
+The spritesheet generator is implemented in `/scripts/filter/after-render/gloria/spritesheet-svg.js`.
+
 ## Releasing the package
 
 CircleCI automates the release process and can release both channels: stable (`X.Y.Z`) and pre-releases (`X.Y.Z-alpha.X`, etc.).
@@ -683,13 +870,11 @@ Before you start, you need to prepare the changelog entries.
 
 1. Make sure the `#master` branch is up-to-date: `git fetch && git checkout master && git pull`.
 1. Prepare a release branch: `git checkout -b release-[YYYYMMDD]` where `YYYYMMDD` is the current day.
-1. Generate the changelog entries: `yarn run changelog --branch release-[YYYYMMDD] [--from [GIT_TAG]]`.
-	* By default, the changelog generator uses the latest published tag as a starting point for collecting commits to process.
-
-	  The `--from` modifier option allows overriding the default behavior. It is required when preparing the changelog entries for the next stable release while the previous one was marked as a prerelease, e.g., `@alpha`.
-
-	  **Example**: Let's assume that the `v5.0.0-alpha.0` tag is our latest and that we want to release it on a stable channel. The `--from` modifier should be equal to `--from v4.0.0`.
-	* This task checks what changed in each package and bumps the version accordingly. It won't create a new changelog entry if nothing changes at all. If changes were irrelevant (e.g., only dependencies), it would make an "_internal changes_" entry.
-	* Scan the logs printed by the tool to search for errors (incorrect changelog entries). Incorrect entries (e.g., ones without the type) should be addressed. You may need to create entries for them manually. This is done directly in CHANGELOG.md (in the root directory). Make sure to verify the proposed version after you modify the changelog.
+1. Generate the changelog entries: `yarn run release:prepare-changelog`.
+   * You can specify the release date by passing the `--date` option, e.g., `--date=2025-06-11`.
+   * By passing the `--dry-run` option, you can check what the script will do without actually modifying the files.
+   * Read all the entries, correct poor wording and other issues, wrap code names in backticks to format them, etc.
+   * Add the missing `the/a` articles, `()` to method names, "it's" -> "its", etc.
+   * A newly introduced feature should have just one changelog entry – something like "The initial implementation of the FOO feature." with a description of what it does.
 1. Commit all changes and prepare a new pull request targeting the `#master` branch.
-1. Ping the `@ckeditor/ckeditor-5-devops` team to review the pull request and trigger the release process.
+1. Ping the `@ckeditor/ckeditor-5-platform` team to review the pull request and trigger the release process.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "umberto",
-  "version": "7.0.2",
+  "version": "8.0.0",
   "description": "CKSource Documentation builder",
   "main": "src/index.js",
   "files": [
@@ -44,6 +44,7 @@
     "nyc": "^17.1.0",
     "pug": "^3.0.2",
     "sass": "^1.54.0",
+    "shiki": "^3.4.0",
     "sitemap": "^8.0.0",
     "tippy.js": "^6.3.7",
     "tree-model": "^1.0.7",
@@ -52,7 +53,7 @@
     "webpack": "^5.94.0"
   },
   "engines": {
-    "node": ">=20.0.0"
+    "node": ">=22.0.0"
   },
   "author": "CKSource (http://cksource.com/)",
   "license": "MIT",
@@ -63,15 +64,10 @@
     "url": "https://github.com/cksource/umberto.git"
   },
   "lint-staged": {
-    "**/*.{js,mjs,cjs}": [
+    "**/*": [
       "eslint --quiet"
     ]
   },
-  "eslintIgnore": [
-    "build/**",
-    "coverage/**",
-    "packages/**"
-  ],
   "hexo": {
     "version": "7.3.0"
   }

package/scripts/filter/after-post-render/gloria/append-copy-heading-buttons.js

@@ -0,0 +1,99 @@
+/**
+ * @license Copyright (c) 2017-2025, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+'use strict';
+
+const cheerio = require( 'cheerio' );
+const renderPugComponent = require( '../../../utils/pug-renderer/render-pug-component' );
+const hexoManager = require( '../../../../src/hexo-manager' );
+
+/**
+ * Enforce priority 30 to run it after apply design doc classes filter.
+ */
+hexo.extend.filter.register( 'after_post_render', page => {
+	if ( page.projectTheme !== 'gloria' ) {
+		return page;
+	}
+
+	const $ = cheerio.load( page.content, null, false );
+
+	// Do not process h1 tags as it's processed further by Umberto and may be removed.
+	$( 'h2, h3, h4, h5, h6' ).each( ( _, heading ) => {
+		const $heading = $( heading );
+
+		if ( hasClassOrParentWithClass( $heading, 'no-transform' ) ) {
+			return;
+		}
+
+		removeAllEmptyAnchors( $, heading );
+
+		const headingId = $( heading ).attr( 'id' );
+		const $container = $( '<div class="doc b-heading"></div>' );
+
+		// Create the copy button
+		const button = renderButton( {
+			hexo: hexoManager.hexo,
+			page,
+			headingId
+		} );
+
+		// Place the heading element before the container in the DOM
+		$( heading ).before( $container );
+
+		$container.append( $( heading ) );
+		$container.append( $( button ) );
+	} );
+
+	page.content = $.html();
+
+	return page;
+}, 30 );
+
+/**
+ * Renders the button using Pug template.
+ */
+function renderButton( { hexo, page, headingId } ) {
+	return renderPugComponent( {
+		hexo,
+		requires: [
+			'_components/svg/index',
+			'_components/icon/index',
+			'_components/tooltip-popover/index',
+			'_components/heading-link/index'
+		],
+		mixinContextVars: {
+			page
+		},
+		component: 'heading-link',
+		componentAttrs: {
+			headingId
+		}
+	} );
+}
+
+/**
+ * Removes all empty anchors that were created to hold the heading links buttons.
+ */
+function removeAllEmptyAnchors( $, heading ) {
+	$( heading ).find( 'a' ).each( ( _, anchor ) => {
+		const $anchor = $( anchor );
+		const text = $anchor.text().trim().replace( '#', '' );
+
+		if ( !$anchor.children().length && !text ) {
+			$anchor.remove();
+		}
+	} );
+}
+
+/**
+ * Checks if the element itself or any of its parents has the specified class.
+ *
+ * @param $element - The jQuery element to check.
+ * @param className - The class name to look for.
+ * @returns True if the element or any parent has the class, false otherwise.
+ */
+function hasClassOrParentWithClass( $element, className ) {
+	return $element.hasClass( className ) || $element.parents( `.${ className }` ).length > 0;
+}

package/scripts/filter/after-post-render/gloria/apply-design-doc-classes.js

@@ -0,0 +1,145 @@
+/**
+ * @license Copyright (c) 2017-2025, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+'use strict';
+
+const cheerio = require( 'cheerio' );
+
+/**
+ * Global mapping of HTML elements to their corresponding design system classes.
+ */
+const ELEMENTS_CLASSES_MAPPINGS = {
+	'h1': 'b-h1',
+	'h2': 'b-h2',
+	'h3': 'b-h3',
+	'h4': 'b-h4',
+	'h5': 'b-h5',
+	'h6': 'b-h6',
+	'a': 'b-link',
+
+	// Text formatting elements
+	'p': 'b-paragraph',
+	'strong': 'b-bold',
+	'b': 'b-bold',
+	'em': 'b-italic',
+	'i': 'b-italic',
+	'code': 'b-inline-code',
+	'pre': 'b-code-block',
+	'blockquote': 'b-quote',
+	'hr': 'b-separator',
+	'span': 'b-text',
+	'small': 'b-small-text',
+	'sub': 'b-subscript',
+	'sup': 'b-superscript',
+
+	// List elements
+	'ul': [ 'b-list', 'b-list--unordered' ],
+	'ol': [ 'b-list', 'b-list--ordered' ],
+	'li': 'b-list__item',
+	'dl': 'b-description',
+	'dt': 'b-description__term',
+	'dd': 'b-description__details',
+
+	// Details
+	'details': 'b-details',
+	'summary': [ 'b-reset-button', 'b-details__summary' ],
+
+	// Table elements
+	'table': $element => {
+		const variant = $element.data( 'variant' ) || 'striped';
+
+		return [ 'b-table', `b-table--${ variant }` ];
+	},
+	'thead': 'b-table__header',
+	'tbody': 'b-table__body',
+	'tr': 'b-table__row',
+	'td': 'b-table__cell',
+	'th': [ 'b-table__cell', 'b-table__cell-header' ],
+
+	// Image and media elements
+	'img': 'b-image',
+	'figure': 'b-figure',
+	'figcaption': 'b-figure-caption',
+	'iframe': 'b-iframe',
+
+	// Accessibility elements
+	'kbd': 'c-keyboard-shortcut c-keyboard-shortcut--raised',
+	'mark': 'b-highlight'
+};
+
+/**
+ * Classes that are allowed to be added to elements with existing classes.
+ */
+const ELEMENTS_WITH_WHITELIST_CLASSES = [
+	'headerlink'
+];
+
+/**
+ * Add design system classes to the parsed document elements.
+ * It prevents leaking of styling to the embedded third party components such
+ * as CKEditor 5, or any other components that are not part of the design system.
+ */
+hexo.extend.filter.register( 'after_post_render', page => {
+	if ( page.projectTheme !== 'gloria' ) {
+		return page;
+	}
+
+	const $ = cheerio.load( page.content, null, false );
+
+	// Apply classes based on the global mapping
+	for ( const [ element, classesOrCallback ] of Object.entries( ELEMENTS_CLASSES_MAPPINGS ) ) {
+		const $elements = $( element );
+
+		$elements.each( ( _, element ) => {
+			const $element = $( element );
+
+			if ( hasClassOrParentWithClass( $element, 'no-transform' ) ) {
+				return;
+			}
+
+			// Add the 'doc' class to each element that gets styled
+			$element.addClass( 'doc' );
+
+			const classList = ( $element.attr( 'class' )?.split( /\s+/ ) || [] ).filter(
+				className => !ELEMENTS_WITH_WHITELIST_CLASSES.includes( className )
+			);
+
+			// Avoid applying classes to elements that already have one.
+			if ( classList.length > 1 ) {
+				return;
+			}
+
+			// Add the specified classes
+			if ( typeof classesOrCallback === 'function' ) {
+				const elementClasses = classesOrCallback( $element );
+
+				if ( Array.isArray( elementClasses ) ) {
+					$element.addClass( elementClasses.join( ' ' ) );
+				} else if ( typeof elementClasses === 'string' ) {
+					$element.addClass( elementClasses );
+				}
+			} else if ( Array.isArray( classesOrCallback ) ) {
+				$element.addClass( classesOrCallback.join( ' ' ) );
+			} else {
+				$element.addClass( classesOrCallback );
+			}
+		} );
+	}
+
+	page.content = $.html();
+
+	return page;
+}, 40 );
+
+/**
+ * Checks if the element itself or any of its parents has the specified class.
+ *
+ * @param $element - The jQuery element to check.
+ * @param className - The class name to look for.
+ * @returns True if the element or any parent has the class, false otherwise.
+ */
+function hasClassOrParentWithClass( $element, className ) {
+	return $element.hasClass( className ) || $element.parents( `.${ className }` ).length > 0;
+}

package/scripts/filter/after-post-render/gloria/wrap-table-into-wrappers.js

@@ -0,0 +1,30 @@
+/**
+ * @license Copyright (c) 2017-2025, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+'use strict';
+
+const cheerio = require( 'cheerio' );
+
+/**
+ * Enforce priority 30 to run it after apply design doc classes filter.
+ */
+hexo.extend.filter.register( 'after_post_render', page => {
+	if ( page.projectTheme !== 'gloria' ) {
+		return page;
+	}
+
+	const $ = cheerio.load( page.content, null, false );
+
+	$( 'table' ).each( ( _, table ) => {
+		if ( $( table ).parent().prop( 'tagName' ) !== 'FIGURE' ) {
+			// If the table is not wrapped in a figure, wrap it.
+			$( table ).wrap( '<figure class="doc b-table-wrapper"></figure>' );
+		}
+	} );
+
+	page.content = $.html();
+
+	return page;
+}, 30 );

package/scripts/filter/after-post-render/img-linker.js

@@ -35,7 +35,7 @@ hexo.extend.filter.register( 'after_post_render', page => {
 			imgWidth = ` width="${ width }"`;
 		}
 
-		return `<img src="${ imgSrc }" data-lightbox="true" alt="${ alt }"${ imgWidth }>`;
+		return `<img src="${ imgSrc }" loading="lazy" decoding="async" data-lightbox="true" alt="${ alt }"${ imgWidth }>`;
 	} );
 
 	return page;

package/scripts/filter/after-post-render/insert-error-codes.js

@@ -49,7 +49,7 @@ hexo.extend.filter.register( 'after_post_render', page => {
 		$( this ).attr( 'href', relativeUrlHelper( page.path, hrefPath ) );
 	} );
 
-	page.content = page.content.replace( '<p>{@errors}</p>', () => {
+	page.content = page.content.replace( /<p[^>]*>{@errors}<\/p>/g, () => {
 		return $.html();
 	} );
 }, 39 );

package/scripts/filter/after-post-render/linker.js

@@ -5,7 +5,7 @@
 
 'use strict';
 
-const parseLinks = require( '../../utils/parselinks' );
+const { parseLinks } = require( '../../utils/parselinks' );
 
 hexo.extend.filter.register( 'after_post_render', page => {
 	return parseLinks( page, hexo );

package/scripts/filter/after-post-render/snippets.js

@@ -51,6 +51,7 @@ hexo.extend.filter.register( 'after_post_render', data => {
 		snippetsData.get( data.projectName ).add( {
 			snippetSources: getSnippetSourcePaths( snippetsBasePath, snippetDetails.name ),
 			snippetName: snippetDetails.name,
+			snippetSize: snippetDetails.size,
 			outputPath,
 			basePath: basePathRelative,
 			relativeOutputPath,
@@ -74,9 +75,12 @@ function getSnippetTags( content ) {
 	let match;
 
 	while ( ( match = SNIPPET_REGEXP.exec( content ) ) ) {
+		const snippetParams = match[ 1 ].split( ' ' );
+
 		snippetTags.add( {
 			snippetHTML: match[ 0 ],
-			name: match[ 1 ]
+			name: snippetParams[ 0 ],
+			size: snippetParams[ 1 ] || 'normal'
 		} );
 	}
 

package/scripts/filter/after-render/gloria/inline-svg.js

@@ -0,0 +1,14 @@
+/**
+ * @license Copyright (c) 2017-2025, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+'use strict';
+
+const inlineSvg = require( '../../../utils/inline-svg' );
+
+/**
+ * Inlines SVG icons into HTML elements with data-inline-svg-image attribute.
+ * The attribute value should contain the path to the SVG file.
+ */
+hexo.extend.filter.register( 'after_render:html', inlineSvg );

package/scripts/filter/after-render/gloria/spritesheet-svg.js

@@ -0,0 +1,14 @@
+/**
+ * @license Copyright (c) 2017-2025, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+'use strict';
+
+const spritesheetSvg = require( '../../../utils/spritesheet-svg' );
+
+/**
+ * Creates a spritesheet from SVG files referenced by data-spritesheet-svg attributes
+ * and injects it at the beginning of the body with display: none.
+ */
+hexo.extend.filter.register( 'after_render:html', spritesheetSvg );