nodebb-theme-harmony 2.0.1 → 2.0.2

package/templates/account/theme.tpl

@@ -1,64 +1,64 @@
-<!-- IMPORT partials/account/header.tpl -->
-
-<div class="mb-3 d-flex justify-content-between">
-	<h3 class="fw-semibold fs-5">[[themes/harmony:settings.title]]</h3>
-
-	<button id="save" type="button" class="btn btn-primary">[[global:save-changes]]</button>
-</div>
-
-<form id="theme-settings" role="form">
-	<div class="form-check form-switch mb-3">
-		<input class="form-check-input" type="checkbox" role="switch" id="enableQuickReply" name="enableQuickReply" {{{ if theme.enableQuickReply }}}checked{{{ end }}}>
-		<label class="form-check-label" for="enableQuickReply">[[themes/harmony:settings.enableQuickReply]]</label>
-	</div>
-
-	<div class="form-check form-switch mb-3">
-		<input type="checkbox" class="form-check-input" id="enableBreadcrumbs" name="enableBreadcrumbs" {{{ if theme.enableBreadcrumbs }}}checked{{{ end }}} />
-		<label for="enableBreadcrumbs" class="form-check-label">[[themes/harmony:settings.enableBreadcrumbs]]</label>
-	</div>
-
-	<div class="form-check form-switch mb-3">
-		<input class="form-check-input" type="checkbox" role="switch" id="centerHeaderElements" name="centerHeaderElements" {{{ if theme.centerHeaderElements }}}checked{{{ end }}}>
-		<label class="form-check-label" for="centerHeaderElements">[[themes/harmony:settings.centerHeaderElements]]</label>
-	</div>
-
-	<div class="form-check form-switch mb-3">
-		<input class="form-check-input" type="checkbox" role="switch" id="mobileTopicTeasers" name="mobileTopicTeasers" {{{ if theme.mobileTopicTeasers }}}checked{{{ end }}}>
-		<label class="form-check-label" for="mobileTopicTeasers">[[themes/harmony:settings.mobileTopicTeasers]]</label>
-	</div>
-
-	<div class="form-check form-switch mb-3">
-		<input class="form-check-input" type="checkbox" role="switch" id="stickyToolbar" name="stickyToolbar" {{{ if theme.stickyToolbar }}}checked{{{ end }}}>
-		<label class="form-check-label" for="stickyToolbar">
-			[[themes/harmony:settings.stickyToolbar]]
-			<p class="form-text mb-0">
-				[[themes/harmony:settings.stickyToolbar.help]]
-			</p>
-		</label>
-	</div>
-
-	<div class="form-check form-switch mb-3">
-		<input class="form-check-input" type="checkbox" role="switch" id="autohideBottombar" name="autohideBottombar" {{{ if theme.autohideBottombar }}}checked{{{ end }}}>
-		<label class="form-check-label" for="autohideBottombar">
-			[[themes/harmony:settings.autohideBottombar]]
-			<p class="form-text mb-0">
-				[[themes/harmony:settings.autohideBottombar.help]]
-			</p>
-		</label>
-	</div>
-
-	<div class="form-check form-switch mb-3">
-		<input class="form-check-input" type="checkbox" role="switch" id="openSidebars" name="openSidebars" {{{ if theme.openSidebars }}}checked{{{ end }}}>
-		<label class="form-check-label" for="openSidebars">[[themes/harmony:settings.openSidebars]]</label>
-	</div>
-
-	<div class="form-check form-switch mb-3">
-		<input class="form-check-input" type="checkbox" role="switch" id="chatModals" name="chatModals" {{{ if theme.chatModals }}}checked{{{ end }}}>
-		<label class="form-check-label" for="chatModals">
-			[[themes/harmony:settings.chatModals]]
-		</label>
-	</div>
-
-</form>
-
+<!-- IMPORT partials/account/header.tpl -->
+
+<div class="mb-3 d-flex justify-content-between">
+	<h3 class="fw-semibold fs-5">[[themes/harmony:settings.title]]</h3>
+
+	<button id="save" type="button" class="btn btn-primary">[[global:save-changes]]</button>
+</div>
+
+<form id="theme-settings" role="form">
+	<div class="form-check form-switch mb-3">
+		<input class="form-check-input" type="checkbox" role="switch" id="enableQuickReply" name="enableQuickReply" {{{ if theme.enableQuickReply }}}checked{{{ end }}}>
+		<label class="form-check-label" for="enableQuickReply">[[themes/harmony:settings.enableQuickReply]]</label>
+	</div>
+
+	<div class="form-check form-switch mb-3">
+		<input type="checkbox" class="form-check-input" id="enableBreadcrumbs" name="enableBreadcrumbs" {{{ if theme.enableBreadcrumbs }}}checked{{{ end }}} />
+		<label for="enableBreadcrumbs" class="form-check-label">[[themes/harmony:settings.enableBreadcrumbs]]</label>
+	</div>
+
+	<div class="form-check form-switch mb-3">
+		<input class="form-check-input" type="checkbox" role="switch" id="centerHeaderElements" name="centerHeaderElements" {{{ if theme.centerHeaderElements }}}checked{{{ end }}}>
+		<label class="form-check-label" for="centerHeaderElements">[[themes/harmony:settings.centerHeaderElements]]</label>
+	</div>
+
+	<div class="form-check form-switch mb-3">
+		<input class="form-check-input" type="checkbox" role="switch" id="mobileTopicTeasers" name="mobileTopicTeasers" {{{ if theme.mobileTopicTeasers }}}checked{{{ end }}}>
+		<label class="form-check-label" for="mobileTopicTeasers">[[themes/harmony:settings.mobileTopicTeasers]]</label>
+	</div>
+
+	<div class="form-check form-switch mb-3">
+		<input class="form-check-input" type="checkbox" role="switch" id="stickyToolbar" name="stickyToolbar" {{{ if theme.stickyToolbar }}}checked{{{ end }}}>
+		<label class="form-check-label" for="stickyToolbar">
+			[[themes/harmony:settings.stickyToolbar]]
+			<p class="form-text mb-0">
+				[[themes/harmony:settings.stickyToolbar.help]]
+			</p>
+		</label>
+	</div>
+
+	<div class="form-check form-switch mb-3">
+		<input class="form-check-input" type="checkbox" role="switch" id="autohideBottombar" name="autohideBottombar" {{{ if theme.autohideBottombar }}}checked{{{ end }}}>
+		<label class="form-check-label" for="autohideBottombar">
+			[[themes/harmony:settings.autohideBottombar]]
+			<p class="form-text mb-0">
+				[[themes/harmony:settings.autohideBottombar.help]]
+			</p>
+		</label>
+	</div>
+
+	<div class="form-check form-switch mb-3">
+		<input class="form-check-input" type="checkbox" role="switch" id="openSidebars" name="openSidebars" {{{ if theme.openSidebars }}}checked{{{ end }}}>
+		<label class="form-check-label" for="openSidebars">[[themes/harmony:settings.openSidebars]]</label>
+	</div>
+
+	<div class="form-check form-switch mb-3">
+		<input class="form-check-input" type="checkbox" role="switch" id="chatModals" name="chatModals" {{{ if theme.chatModals }}}checked{{{ end }}}>
+		<label class="form-check-label" for="chatModals">
+			[[themes/harmony:settings.chatModals]]
+		</label>
+	</div>
+
+</form>
+
 <!-- IMPORT partials/account/footer.tpl -->

package/templates/account/topics.tpl

@@ -1,45 +1,45 @@
-<!-- IMPORT partials/account/header.tpl -->
-
-<div class="d-flex justify-content-between align-items-center mb-3">
-	<div class="d-flex gap-1">
-		<h3 class="fw-semibold fs-5 mb-0 align-self-center">[[global:topics]]</h3>
-		{{{ if showSort }}}
-		<div class="btn-group bottom-sheet" component="thread/sort">
-			<button title="[[global:sort]]" class="btn btn-ghost btn-sm dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" type="button"><i class="fa-solid fa-arrow-up-wide-short"></i></button>
-			<ul class="dropdown-menu p-1 text-sm" role="menu">
-				{{{each sortOptions }}}
-				<li>
-					<a class="dropdown-item rounded-1 d-flex align-items-center gap-2" href="{config.relative_path}{./url}" role="menuitem">
-						<div class="flex-grow-1">{./name}</div>
-						<i class="flex-shrink-0 fa fa-fw {{{if ./selected}}}fa-check{{{end}}}"></i>
-					</a>
-				</li>
-				{{{end}}}
-			</ul>
-		</div>
-		{{{ end }}}
-	</div>
-
-	<div class="d-flex gap-1">
-		{{{ if canEdit }}}
-		<a href="{config.relative_path}/user/{userslug}/topics" class="btn btn-ghost btn-sm ff-secondary fw-semibold {{{ if template.account/topics }}}active{{{ end }}}">[[global:header.recent]]</a>
-		<a href="{config.relative_path}/user/{userslug}/watched"class="btn btn-ghost btn-sm ff-secondary fw-semibold {{{ if template.account/watched }}}active{{{ end }}}">[[user:watched]]</a>
-		<a href="{config.relative_path}/user/{userslug}/ignored" class="btn btn-ghost btn-sm ff-secondary fw-semibold {{{ if template.account/ignored }}}active{{{ end }}}">[[user:ignored]]</a>
-		<a href="{config.relative_path}/user/{userslug}/read" class="btn btn-ghost btn-sm ff-secondary fw-semibold {{{ if template.account/read }}}active{{{ end }}}">[[user:read]]</a>
-		{{{ end }}}
-	</div>
-</div>
-
-
-{{{ if !topics.length }}}
-<div class="alert alert-warning text-center">{noItemsFoundKey}</div>
-{{{ end }}}
-
-<div class="category">
-	<!-- IMPORT partials/topics_list.tpl -->
-	{{{ if config.usePagination }}}
-	<!-- IMPORT partials/paginator.tpl -->
-	{{{ end }}}
-</div>
-
+<!-- IMPORT partials/account/header.tpl -->
+
+<div class="d-flex justify-content-between align-items-center mb-3">
+	<div class="d-flex gap-1">
+		<h3 class="fw-semibold fs-5 mb-0 align-self-center">[[global:topics]]</h3>
+		{{{ if showSort }}}
+		<div class="btn-group bottom-sheet" component="thread/sort">
+			<button title="[[global:sort]]" class="btn btn-ghost btn-sm dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" type="button"><i class="fa-solid fa-arrow-up-wide-short"></i></button>
+			<ul class="dropdown-menu p-1 text-sm" role="menu">
+				{{{each sortOptions }}}
+				<li>
+					<a class="dropdown-item rounded-1 d-flex align-items-center gap-2" href="{config.relative_path}{./url}" role="menuitem">
+						<div class="flex-grow-1">{./name}</div>
+						<i class="flex-shrink-0 fa fa-fw {{{if ./selected}}}fa-check{{{end}}}"></i>
+					</a>
+				</li>
+				{{{end}}}
+			</ul>
+		</div>
+		{{{ end }}}
+	</div>
+
+	<div class="d-flex gap-1">
+		{{{ if canEdit }}}
+		<a href="{config.relative_path}/user/{userslug}/topics" class="btn btn-ghost btn-sm ff-secondary fw-semibold {{{ if template.account/topics }}}active{{{ end }}}">[[global:header.recent]]</a>
+		<a href="{config.relative_path}/user/{userslug}/watched"class="btn btn-ghost btn-sm ff-secondary fw-semibold {{{ if template.account/watched }}}active{{{ end }}}">[[user:watched]]</a>
+		<a href="{config.relative_path}/user/{userslug}/ignored" class="btn btn-ghost btn-sm ff-secondary fw-semibold {{{ if template.account/ignored }}}active{{{ end }}}">[[user:ignored]]</a>
+		<a href="{config.relative_path}/user/{userslug}/read" class="btn btn-ghost btn-sm ff-secondary fw-semibold {{{ if template.account/read }}}active{{{ end }}}">[[user:read]]</a>
+		{{{ end }}}
+	</div>
+</div>
+
+
+{{{ if !topics.length }}}
+<div class="alert alert-warning text-center">{noItemsFoundKey}</div>
+{{{ end }}}
+
+<div class="category">
+	<!-- IMPORT partials/topics_list.tpl -->
+	{{{ if config.usePagination }}}
+	<!-- IMPORT partials/paginator.tpl -->
+	{{{ end }}}
+</div>
+
 <!-- IMPORT partials/account/footer.tpl -->

package/templates/account/uploads.tpl

@@ -1,37 +1,37 @@
-<!-- IMPORT partials/account/header.tpl -->
-
-<h3 class="fw-semibold fs-5">{title}</h3>
-
-<div class="alert alert-info text-center">
-	{{{ if privateUploads }}}[[uploads:private-uploads-info]]{{{ else }}}[[uploads:public-uploads-info]]{{{ end }}}
-</div>
-
-{{{ if !uploads.length }}}
-<div class="alert alert-warning text-center">[[uploads:no-uploads-found]]</div>
-{{{ end }}}
-
-<table class="table table-striped table-responsive">
-	<thead>
-		<tr>
-			<th></th>
-			<th></th>
-		</tr>
-	</thead>
-	<tbody>
-		{{{ each uploads }}}
-		<tr data-name="{./name}">
-			<td>
-				<a class="text-break" href="{config.relative_path}{./url}">{./url}</a>
-			</td>
-			<td>
-				<div class="btn-group ">
-					<button class="btn btn-danger btn-sm" data-action="delete" aria-label="[[aria:delete-upload-button]]"><i class="fa fa-trash"></i></button>
-				</div>
-			</td>
-		</tr>
-		{{{ end }}}
-	</tbody>
-</table>
-
-<!-- IMPORT partials/paginator.tpl -->
-<!-- IMPORT partials/account/footer.tpl -->
+<!-- IMPORT partials/account/header.tpl -->
+
+<h3 class="fw-semibold fs-5">{title}</h3>
+
+<div class="alert alert-info text-center">
+	{{{ if privateUploads }}}[[uploads:private-uploads-info]]{{{ else }}}[[uploads:public-uploads-info]]{{{ end }}}
+</div>
+
+{{{ if !uploads.length }}}
+<div class="alert alert-warning text-center">[[uploads:no-uploads-found]]</div>
+{{{ end }}}
+
+<table class="table table-striped table-responsive">
+	<thead>
+		<tr>
+			<th></th>
+			<th></th>
+		</tr>
+	</thead>
+	<tbody>
+		{{{ each uploads }}}
+		<tr data-name="{./name}">
+			<td>
+				<a class="text-break" href="{config.relative_path}{./url}">{./url}</a>
+			</td>
+			<td>
+				<div class="btn-group ">
+					<button class="btn btn-danger btn-sm" data-action="delete" aria-label="[[aria:delete-upload-button]]"><i class="fa fa-trash"></i></button>
+				</div>
+			</td>
+		</tr>
+		{{{ end }}}
+	</tbody>
+</table>
+
+<!-- IMPORT partials/paginator.tpl -->
+<!-- IMPORT partials/account/footer.tpl -->

package/templates/admin/plugins/harmony.tpl

@@ -1,57 +1,57 @@
-<div class="acp-page-container">
-	<!-- IMPORT admin/partials/settings/header.tpl -->
-
-	<div class="row m-0">
-		<div id="spy-container" class="col-12 col-md-8 px-0 mb-4" tabindex="0">
-			<form role="form" class="harmony-settings">
-				<div class="form-check form-switch">
-					<input type="checkbox" class="form-check-input" id="enableQuickReply" name="enableQuickReply" />
-					<label for="enableQuickReply" class="form-check-label">[[themes/harmony:settings.enableQuickReply]]</label>
-				</div>
-				<div class="form-check form-switch">
-					<input type="checkbox" class="form-check-input" id="enableBreadcrumbs" name="enableBreadcrumbs" />
-					<label for="enableBreadcrumbs" class="form-check-label">[[themes/harmony:settings.enableBreadcrumbs]]</label>
-					<p class="form-text">[[themes/harmony:settings.enableBreadcrumbs.why]]</p>
-				</div>
-				<div class="form-check form-switch">
-					<input type="checkbox" class="form-check-input" id="centerHeaderElements" name="centerHeaderElements" />
-					<label for="centerHeaderElements" class="form-check-label">[[themes/harmony:settings.centerHeaderElements]]</label>
-				</div>
-				<div class="form-check form-switch">
-					<input type="checkbox" class="form-check-input" id="mobileTopicTeasers" name="mobileTopicTeasers" />
-					<label for="mobileTopicTeasers" class="form-check-label">[[themes/harmony:settings.mobileTopicTeasers]]</label>
-				</div>
-				<div class="form-check form-switch">
-					<input type="checkbox" class="form-check-input" id="stickyToolbar" name="stickyToolbar" />
-					<div for="stickyToolbar" class="form-check-label">
-						[[themes/harmony:settings.stickyToolbar]]
-						<p class="form-text">
-							[[themes/harmony:settings.stickyToolbar.help]]
-						</p>
-					</div>
-				</div>
-				<div class="form-check form-switch">
-					<input type="checkbox" class="form-check-input" id="autohideBottombar" name="autohideBottombar" />
-					<div for="autohideBottombar" class="form-check-label">
-						[[themes/harmony:settings.autohideBottombar]]
-						<p class="form-text">
-							[[themes/harmony:settings.autohideBottombar.help]]
-						</p>
-					</div>
-				</div>
-				<div class="form-check form-switch">
-					<input type="checkbox" class="form-check-input" id="openSidebars" name="openSidebars" />
-					<label for="openSidebars" class="form-check-label">[[themes/harmony:settings.openSidebars]]</label>
-				</div>
-				<div class="form-check form-switch">
-					<input type="checkbox" class="form-check-input" id="chatModals" name="chatModals" />
-					<div for="chatModals" class="form-check-label">
-						[[themes/harmony:settings.chatModals]]
-					</div>
-				</div>
-			</form>
-		</div>
-
-		<!-- IMPORT admin/partials/settings/toc.tpl -->
-	</div>
-</div>
+<div class="acp-page-container">
+	<!-- IMPORT admin/partials/settings/header.tpl -->
+
+	<div class="row m-0">
+		<div id="spy-container" class="col-12 col-md-8 px-0 mb-4" tabindex="0">
+			<form role="form" class="harmony-settings">
+				<div class="form-check form-switch">
+					<input type="checkbox" class="form-check-input" id="enableQuickReply" name="enableQuickReply" />
+					<label for="enableQuickReply" class="form-check-label">[[themes/harmony:settings.enableQuickReply]]</label>
+				</div>
+				<div class="form-check form-switch">
+					<input type="checkbox" class="form-check-input" id="enableBreadcrumbs" name="enableBreadcrumbs" />
+					<label for="enableBreadcrumbs" class="form-check-label">[[themes/harmony:settings.enableBreadcrumbs]]</label>
+					<p class="form-text">[[themes/harmony:settings.enableBreadcrumbs.why]]</p>
+				</div>
+				<div class="form-check form-switch">
+					<input type="checkbox" class="form-check-input" id="centerHeaderElements" name="centerHeaderElements" />
+					<label for="centerHeaderElements" class="form-check-label">[[themes/harmony:settings.centerHeaderElements]]</label>
+				</div>
+				<div class="form-check form-switch">
+					<input type="checkbox" class="form-check-input" id="mobileTopicTeasers" name="mobileTopicTeasers" />
+					<label for="mobileTopicTeasers" class="form-check-label">[[themes/harmony:settings.mobileTopicTeasers]]</label>
+				</div>
+				<div class="form-check form-switch">
+					<input type="checkbox" class="form-check-input" id="stickyToolbar" name="stickyToolbar" />
+					<div for="stickyToolbar" class="form-check-label">
+						[[themes/harmony:settings.stickyToolbar]]
+						<p class="form-text">
+							[[themes/harmony:settings.stickyToolbar.help]]
+						</p>
+					</div>
+				</div>
+				<div class="form-check form-switch">
+					<input type="checkbox" class="form-check-input" id="autohideBottombar" name="autohideBottombar" />
+					<div for="autohideBottombar" class="form-check-label">
+						[[themes/harmony:settings.autohideBottombar]]
+						<p class="form-text">
+							[[themes/harmony:settings.autohideBottombar.help]]
+						</p>
+					</div>
+				</div>
+				<div class="form-check form-switch">
+					<input type="checkbox" class="form-check-input" id="openSidebars" name="openSidebars" />
+					<label for="openSidebars" class="form-check-label">[[themes/harmony:settings.openSidebars]]</label>
+				</div>
+				<div class="form-check form-switch">
+					<input type="checkbox" class="form-check-input" id="chatModals" name="chatModals" />
+					<div for="chatModals" class="form-check-label">
+						[[themes/harmony:settings.chatModals]]
+					</div>
+				</div>
+			</form>
+		</div>
+
+		<!-- IMPORT admin/partials/settings/toc.tpl -->
+	</div>
+</div>

package/templates/categories.tpl

@@ -1,29 +1,29 @@
-<div data-widget-area="header">
-	{{{ each widgets.header }}}
-	{{widgets.header.html}}
-	{{{ end }}}
-</div>
-<div class="row py-2">
-	<div class="{{{ if widgets.sidebar.length }}}col-lg-9 col-sm-12{{{ else }}}col-lg-12{{{ end }}}">
-		{{{ if pagination.pages.length }}}
-		<div><!-- IMPORT partials/category/selector-dropdown-left.tpl --></div>
-		{{{ end }}}
-		<ul class="categories-list list-unstyled" itemscope itemtype="http://www.schema.org/ItemList">
-			{{{ each categories }}}
-			<!-- IMPORT partials/categories/item.tpl -->
-			{{{ end }}}
-		</ul>
-
-		<!-- IMPORT partials/paginator.tpl -->
-	</div>
-	<div data-widget-area="sidebar" class="col-lg-3 col-sm-12 {{{ if !widgets.sidebar.length }}}hidden{{{ end }}}">
-		{{{ each widgets.sidebar }}}
-		{{widgets.sidebar.html}}
-		{{{ end }}}
-	</div>
-</div>
-<div data-widget-area="footer">
-	{{{ each widgets.footer }}}
-	{{widgets.footer.html}}
-	{{{ end }}}
-</div>
+<div data-widget-area="header">
+	{{{ each widgets.header }}}
+	{{widgets.header.html}}
+	{{{ end }}}
+</div>
+<div class="row py-2">
+	<div class="{{{ if widgets.sidebar.length }}}col-lg-9 col-sm-12{{{ else }}}col-lg-12{{{ end }}}">
+		{{{ if pagination.pages.length }}}
+		<div><!-- IMPORT partials/category/selector-dropdown-left.tpl --></div>
+		{{{ end }}}
+		<ul class="categories-list list-unstyled" itemscope itemtype="http://www.schema.org/ItemList">
+			{{{ each categories }}}
+			<!-- IMPORT partials/categories/item.tpl -->
+			{{{ end }}}
+		</ul>
+
+		<!-- IMPORT partials/paginator.tpl -->
+	</div>
+	<div data-widget-area="sidebar" class="col-lg-3 col-sm-12 {{{ if !widgets.sidebar.length }}}hidden{{{ end }}}">
+		{{{ each widgets.sidebar }}}
+		{{widgets.sidebar.html}}
+		{{{ end }}}
+	</div>
+</div>
+<div data-widget-area="footer">
+	{{{ each widgets.footer }}}
+	{{widgets.footer.html}}
+	{{{ end }}}
+</div>

package/templates/category.tpl

@@ -1,72 +1,72 @@
-<!-- IMPORT partials/breadcrumbs-json-ld.tpl -->
-{{{ if config.theme.enableBreadcrumbs }}}
-<!-- IMPORT partials/breadcrumbs.tpl -->
-{{{ end }}}
-
-<div class="category-header d-flex flex-column gap-2">
-	<div class="d-flex gap-2 align-items-center mb-1 {{{ if config.theme.centerHeaderElements }}}justify-content-center{{{ end }}}">
-		{buildCategoryIcon(@value, "40px", "rounded-1 flex-shrink-0")}
-		<h1 class="tracking-tight fs-2 fw-semibold mb-0">{./name}</h1>
-	</div>
-	{{{ if ./descriptionParsed }}}
-	<div class="description text-secondary text-sm w-100 {{{ if config.theme.centerHeaderElements }}}text-center{{{ end }}}">
-		{./descriptionParsed}
-	</div>
-	{{{ end }}}
-	<div class="d-flex flex-wrap gap-2 {{{ if config.theme.centerHeaderElements }}}justify-content-center{{{ end }}}">
-		<span class="badge text-body border border-gray-300 stats text-xs">
-			<span title="{totalTopicCount}" class="fw-bold">{humanReadableNumber(totalTopicCount)}</span>
-			<span class="text-lowercase fw-normal">[[global:topics]]</span>
-		</span>
-		<span class="badge text-body border border-gray-300 stats text-xs">
-			<span title="{totalPostCount}" class="fw-bold">{humanReadableNumber(totalPostCount)}</span>
-			<span class="text-lowercase fw-normal">[[global:posts]]</span>
-		</span>
-	</div>
-</div>
-
-{{{ if widgets.header.length }}}
-<div data-widget-area="header">
-	{{{ each widgets.header }}}
-	{{widgets.header.html}}
-	{{{ end }}}
-</div>
-{{{ end }}}
-
-
-<div class="row mt-3">
-	<div class="category d-flex flex-column {{{if widgets.sidebar.length }}}col-lg-9 col-sm-12{{{ else }}}col-lg-12{{{ end }}}">
-		<!-- IMPORT partials/category/subcategory.tpl -->
-		{{{ if (topics.length || privileges.topics:create) }}}
-		<!-- IMPORT partials/topic-list-bar.tpl -->
-		{{{ end }}}
-
-		{{{ if (!topics.length && privileges.topics:create) }}}
-		<div class="alert alert-info" id="category-no-topics">
-			[[category:no-topics]]
-		</div>
-		{{{ end }}}
-
-		<!-- IMPORT partials/topics_list.tpl -->
-
-		{{{ if config.usePagination }}}
-		<!-- IMPORT partials/paginator.tpl -->
-		{{{ end }}}
-	</div>
-	<div data-widget-area="sidebar" class="col-lg-3 col-sm-12 {{{ if !widgets.sidebar.length }}}hidden{{{ end }}}">
-		{{{ each widgets.sidebar }}}
-		{{widgets.sidebar.html}}
-		{{{ end }}}
-	</div>
-</div>
-<div data-widget-area="footer">
-	{{{each widgets.footer}}}
-	{{widgets.footer.html}}
-	{{{end}}}
-</div>
-
-{{{ if !config.usePagination }}}
-<noscript>
-	<!-- IMPORT partials/paginator.tpl -->
-</noscript>
-{{{ end }}}
+<!-- IMPORT partials/breadcrumbs-json-ld.tpl -->
+{{{ if config.theme.enableBreadcrumbs }}}
+<!-- IMPORT partials/breadcrumbs.tpl -->
+{{{ end }}}
+
+<div class="category-header d-flex flex-column gap-2">
+	<div class="d-flex gap-2 align-items-center mb-1 {{{ if config.theme.centerHeaderElements }}}justify-content-center{{{ end }}}">
+		{buildCategoryIcon(@value, "40px", "rounded-1 flex-shrink-0")}
+		<h1 class="tracking-tight fs-2 fw-semibold mb-0">{./name}</h1>
+	</div>
+	{{{ if ./descriptionParsed }}}
+	<div class="description text-secondary text-sm w-100 {{{ if config.theme.centerHeaderElements }}}text-center{{{ end }}}">
+		{./descriptionParsed}
+	</div>
+	{{{ end }}}
+	<div class="d-flex flex-wrap gap-2 {{{ if config.theme.centerHeaderElements }}}justify-content-center{{{ end }}}">
+		<span class="badge text-body border border-gray-300 stats text-xs">
+			<span title="{totalTopicCount}" class="fw-bold">{humanReadableNumber(totalTopicCount)}</span>
+			<span class="text-lowercase fw-normal">[[global:topics]]</span>
+		</span>
+		<span class="badge text-body border border-gray-300 stats text-xs">
+			<span title="{totalPostCount}" class="fw-bold">{humanReadableNumber(totalPostCount)}</span>
+			<span class="text-lowercase fw-normal">[[global:posts]]</span>
+		</span>
+	</div>
+</div>
+
+{{{ if widgets.header.length }}}
+<div data-widget-area="header">
+	{{{ each widgets.header }}}
+	{{widgets.header.html}}
+	{{{ end }}}
+</div>
+{{{ end }}}
+
+
+<div class="row mt-3">
+	<div class="category d-flex flex-column {{{if widgets.sidebar.length }}}col-lg-9 col-sm-12{{{ else }}}col-lg-12{{{ end }}}">
+		<!-- IMPORT partials/category/subcategory.tpl -->
+		{{{ if (topics.length || privileges.topics:create) }}}
+		<!-- IMPORT partials/topic-list-bar.tpl -->
+		{{{ end }}}
+
+		{{{ if (!topics.length && privileges.topics:create) }}}
+		<div class="alert alert-info" id="category-no-topics">
+			[[category:no-topics]]
+		</div>
+		{{{ end }}}
+
+		<!-- IMPORT partials/topics_list.tpl -->
+
+		{{{ if config.usePagination }}}
+		<!-- IMPORT partials/paginator.tpl -->
+		{{{ end }}}
+	</div>
+	<div data-widget-area="sidebar" class="col-lg-3 col-sm-12 {{{ if !widgets.sidebar.length }}}hidden{{{ end }}}">
+		{{{ each widgets.sidebar }}}
+		{{widgets.sidebar.html}}
+		{{{ end }}}
+	</div>
+</div>
+<div data-widget-area="footer">
+	{{{each widgets.footer}}}
+	{{widgets.footer.html}}
+	{{{end}}}
+</div>
+
+{{{ if !config.usePagination }}}
+<noscript>
+	<!-- IMPORT partials/paginator.tpl -->
+</noscript>
+{{{ end }}}