nodebb-theme-harmony 2.2.72 → 3.0.0-beta.2

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "nodebb-theme-harmony",
-  "version": "2.2.72",
+  "version": "3.0.0-beta.2",
   "nbbpm": {
-    "compatibility": "^4.12.0"
+    "compatibility": "^4.14.0"
   },
   "description": "Harmony theme for NodeBB",
   "main": "library.js",
@@ -45,7 +45,7 @@
     "@fontsource/poppins": "5.2.7"
   },
   "devDependencies": {
-    "eslint": "10.4.1",
+    "eslint": "10.5.0",
     "eslint-config-nodebb": "^2.0.2"
   }
 }

package/public/harmony.js

@@ -141,7 +141,7 @@ $(document).ready(function () {
 	}
 
 	function setupDrafts() {
-		require(['composer/drafts', 'bootbox'], function (drafts, bootbox) {
+		require(['composer/drafts', 'bootbox', 'api'], function (drafts, bootbox, api) {
 			const draftsEl = $('[component="sidebar/drafts"]');
 			const bottomBarDraftsEl = $('[component="bottombar"] [component="sidebar/drafts"]');
 			function updateBadgeCount() {
@@ -159,17 +159,15 @@ $(document).ready(function () {
 					draftListEl.find('.draft-item-container').html('');
 					return;
 				}
-				draftItems.reverse().forEach((draft) => {
-					if (draft) {
-						if (draft.title) {
-							draft.title = utils.escapeHTML(String(draft.title));
-						}
-						draft.text = utils.escapeHTML(
-							draft.text
-						).replace(/(?:\r\n|\r|\n)/g, '<br>');
+				draftItems.reverse();
+				await Promise.all(draftItems.map(async (item) => {
+					const cid = String(item.cid);
+					if (item && item.action === 'topics.post' && cid !== '0') {
+						const categoryUrl = cid !== '-1' ?
+							`/api/category/${encodeURIComponent(cid)}` : `/api/world`;
+						item.category = await api.get(categoryUrl, {});
 					}
-				});
-
+				}));
 				const html = await app.parseAndTranslate('partials/sidebar/drafts', 'drafts', { drafts: draftItems });
 				draftListEl.find('.no-drafts').addClass('hidden');
 				draftListEl.find('.placeholder-wave').addClass('hidden');

package/scss/harmony.scss

@@ -10,7 +10,6 @@
 @import "mobilebar";
 @import "status";
 @import "account";
-@import "groups";
 @import "world";
 @import "modals";
 
@@ -19,7 +18,6 @@
 @import "modules/user-menu";
 @import "modules/topic-navigator";
 @import "modules/topics-list";
-@import "modules/cover";
 @import "modules/nprogress";
 @import "modules/paginator";
 @import "modules/filters";

package/templates/account/blocks.tpl

@@ -17,7 +17,7 @@
 					<li component="blocks/search/match">
 						<div class="dropdown-item rounded-1 d-flex flex-nowrap gap-4 justify-content-between align-items-center" role="menuitem">
 							<div class="text-truncate">
-								<a href="{config.relative_path}/uid/{./uid}" class="text-decoration-none">{buildAvatar(edit, "24px", true)} {./username}</a>
+								<a href="{config.relative_path}/uid/{./uid}" class="text-decoration-none">{{buildAvatar(edit, "24px", true)}} {./username}</a>
 							</div>
 
 							<button class="btn btn-sm btn-outline-danger text-nowrap {{{ if ./isBlocked }}}hidden{{{ end }}}" data-uid="{./uid}" data-action="block">[[user:block-user]]</button>

package/templates/account/categories.tpl

@@ -2,7 +2,7 @@
 
 <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">{title}</h3>
+		<h3 class="fw-semibold fs-5 mb-0">{tx(title)}</h3>
 	</div>
 
 	<div class="d-flex gap-1">

package/templates/account/consent.tpl

@@ -54,7 +54,8 @@
 
 				<hr />
 
-				<div class="btn-group-vertical d-grid">
+				{{{ if canExport }}}
+				<div class="d-grid gap-2">
 					<a data-action="export-profile" class="btn btn-outline-secondary">
 						<i class="fa fa-download"></i> [[user:consent.export-profile]]
 					</a>
@@ -65,6 +66,7 @@
 						<i class="fa fa-download"></i> [[user:consent.export-uploads]]
 					</a>
 				</div>
+				{{{ end }}}
 			</div>
 		</div>
 	</div>

package/templates/account/info.tpl

@@ -15,7 +15,7 @@
 		<div class="mb-4 pb-3 border-bottom">
 			<h6>[[user:info.invited-by]]</h6>
 			<div class="d-flex align-items-center gap-2">
-				<a href="">{buildAvatar(invitedBy, "24px", true)}</a>
+				<a href="">{{buildAvatar(invitedBy, "24px", true)}}</a>
 				<a href="">{invitedBy.username}</a>
 			</div>
 		</div>
@@ -43,7 +43,7 @@
 						<div>
 							{{{ if ./byUid }}}
 							<a class="lh-1" href="{{{ if ./byUser.userslug }}}{config.relative_path}/user/{./byUser.userslug}{{{ else }}}#{{{ end }}}">
-							{buildAvatar(./byUser, "18px", true)}</a>
+							{{buildAvatar(./byUser, "18px", true)}}</a>
 							{{{ end }}}
 							<span class="timeago text-sm text-secondary lh-1 align-middle" title="{./timestampISO}"></span>
 						</div>
@@ -63,7 +63,7 @@
 						<div>
 							{{{ if ./byUid }}}
 							<a class="lh-1" href="{{{ if ./byUser.userslug }}}{config.relative_path}/user/{./byUser.userslug}{{{ else }}}#{{{ end }}}">
-							{buildAvatar(./byUser, "18px", true)}</a>
+							{{buildAvatar(./byUser, "18px", true)}}</a>
 							{{{ end }}}
 							<span class="timeago text-sm text-secondary lh-1 align-middle" title="{./timestampISO}"></span>
 						</div>
@@ -107,7 +107,7 @@
 							<span class="text-sm">[[user:info.reported-by]]</span>
 							<div class="d-flex text-nowrap">
 								{{{ each ./reports }}}
-								<a style="width: 18px; z-index: 3;" class="text-decoration-none" href="{config.relative_path}/user/{./reporter.userslug}">{buildAvatar(./reporter, "24px", true)}</a>
+								<a style="width: 18px; z-index: 3;" class="text-decoration-none" href="{config.relative_path}/user/{./reporter.userslug}">{{buildAvatar(./reporter, "24px", true)}}</a>
 								{{{ end }}}
 							</div>
 						</div>
@@ -138,7 +138,7 @@
 					<li class="mb-4 border-bottom">
 						<div class="mb-1 d-flex align-items-center justify-content-between">
 							<div>
-								<a href="{config.relative_path}/user/{./user.userslug}">{buildAvatar(./user, "24px", true)}</a>
+								<a href="{config.relative_path}/user/{./user.userslug}">{{buildAvatar(./user, "24px", true)}}</a>
 								<strong>
 									<a href="{{{ if ./user.userslug }}}{config.relative_path}/user/{./user.userslug}{{{ else }}}#{{{ end }}}" itemprop="author" data-username="{./user.username}" data-uid="{./user.uid}">{./user.username}</a>
 								</strong>
@@ -192,7 +192,7 @@
 					<li class="mb-4 border-bottom">
 						<div class="mb-1 d-flex align-items-center justify-content-between">
 							<div>
-								<a href="{config.relative_path}/user/{./user.userslug}">{buildAvatar(./user, "24px", true)}</a>
+								<a href="{config.relative_path}/user/{./user.userslug}">{{buildAvatar(./user, "24px", true)}}</a>
 								<strong>
 									<a href="{{{ if ./user.userslug }}}{config.relative_path}/user/{./user.userslug}{{{ else }}}#{{{ end }}}" itemprop="author" data-username="{./user.username}" data-uid="{./user.uid}">{./user.username}</a>
 								</strong>
@@ -240,7 +240,7 @@
 
 					<div data-id="{./id}">
 						<div class="d-flex align-items-baseline gap-1 mb-1">
-							<a href="{{{ if ./user.userslug }}}{config.relative_path}/user/{./user.userslug}{{{ else }}}#{{{ end }}}">{buildAvatar(./user, "24px", true)}</a>
+							<a href="{{{ if ./user.userslug }}}{config.relative_path}/user/{./user.userslug}{{{ else }}}#{{{ end }}}">{{buildAvatar(./user, "24px", true)}}</a>
 
 							<a href="{{{ if ./user.userslug }}}{config.relative_path}/user/{./user.userslug}{{{ else }}}#{{{ end }}}" class="fw-bold" itemprop="author" data-username="{./user.username}" data-uid="{./user.uid}">{./user.username}</a>
 

package/templates/account/profile.tpl

@@ -3,21 +3,21 @@
 {{{ if widgets.profile-aboutme-before.length }}}
 <div data-widget-area="profile-aboutme-before">
 {{{each widgets.profile-aboutme-before}}}
-{./html}
+{{./html}}
 {{{end}}}
 </div>
 {{{ end }}}
 
 {{{ if aboutme }}}
 <div component="aboutme" class="text-sm text-break">
-{aboutmeParsed}
+{{txEscape(aboutmeParsed)}}
 </div>
 {{{ end }}}
 
 {{{ if widgets.profile-aboutme-after.length }}}
 <div data-widget-area="profile-aboutme-after">
 {{{each widgets.profile-aboutme-after}}}
-{./html}
+{{./html}}
 {{{end}}}
 </div>
 {{{ end }}}
@@ -76,7 +76,7 @@
 		{{{ if ./value }}}
 		<div class="stat">
 			<div class="align-items-center justify-content-center card card-header p-3 border-0 rounded-1 h-100 gap-2">
-				<span class="stat-label text-xs fw-semibold"><span><i class="text-muted {./icon}"></i> {./name}</span></span>
+				<span class="stat-label text-xs fw-semibold"><span><i class="text-muted {./icon}"></i> {tx(./name)}</span></span>
 				{{{ if (./type == "input-link") }}}
 				<a class="text-center text-break w-100 px-2 ff-secondary text-underline text-reset" href="{./value}" rel="nofollow noreferrer">{./linkValue}</a>
 				{{{ else }}}

package/templates/account/settings.tpl

@@ -10,7 +10,7 @@
 		<label for="bootswatchSkin" class="form-label fw-bold">[[user:select-skin]]</label>
 		<select class="form-select form-select-sm" id="bootswatchSkin" data-property="bootswatchSkin">
 			{{{each bootswatchSkinOptions}}}
-			<option value="{bootswatchSkinOptions.value}" {{{ if bootswatchSkinOptions.selected }}}selected{{{ end }}}>{bootswatchSkinOptions.name}</option>
+			<option value="{bootswatchSkinOptions.value}" {{{ if bootswatchSkinOptions.selected }}}selected{{{ end }}}>{tx(bootswatchSkinOptions.name)}</option>
 			{{{end}}}
 		</select>
 
@@ -67,7 +67,7 @@
 			<div component="chat/allow/list" class="d-flex flex-wrap gap-2 mb-2">
 				{{{ each settings.chatAllowListUsers }}}
 				<div component="chat/allow/list/user" data-uid="{./uid}" class="d-flex px-2 py-1 rounded-1 text-bg-light gap-2 align-items-center text-sm">
-					{buildAvatar(@value, "16px", true)} {./username}
+					{{buildAvatar(@value, "16px", true)}} {./username}
 					<button component="chat/allow/delete" data-uid="{./uid}" class="btn btn-light btn-sm py-0"><i class="fa fa-times fa-xs text-danger"></i></button>
 				</div>
 				{{{ end }}}
@@ -82,7 +82,7 @@
 			<div component="chat/deny/list" class="d-flex flex-wrap gap-2 mb-2">
 				{{{ each settings.chatDenyListUsers }}}
 				<div component="chat/deny/list/user" data-uid="{./uid}" class="d-flex px-2 py-1 rounded-1 text-bg-light gap-2 align-items-center text-sm">
-					{buildAvatar(@value, "16px", true)} {./username}
+					{{buildAvatar(@value, "16px", true)}} {./username}
 					<button component="chat/deny/delete" data-uid="{./uid}" class="btn btn-light btn-sm py-0"><i class="fa fa-times fa-xs text-danger"></i></button>
 				</div>
 				{{{ end }}}
@@ -177,7 +177,7 @@
 				<label class="form-label text-sm" for="dailyDigestFreq">[[user:digest-label]]</label>
 				<select class="form-select form-select-sm" id="dailyDigestFreq" data-property="dailyDigestFreq" autocomplete="off">
 					{{{each dailyDigestFreqOptions}}}
-					<option value="{./value}" {{{ if ./selected }}}selected="1"{{{ end }}}>{./name}</option>
+					<option value="{./value}" {{{ if ./selected }}}selected="1"{{{ end }}}>{tx(./name)}</option>
 					{{{end}}}
 				</select>
 				<p class="form-text text-xs">[[user:digest-description]]</p>
@@ -189,7 +189,7 @@
 		<hr/>
 		<h6 class="fw-bold">{./title}</h6>
 		<div>
-			{./content}
+			{{./content}}
 		</div>
 		{{{end}}}
 		<hr class="d-block d-md-none"/>
@@ -271,7 +271,7 @@
 					<tr component="notification/setting" class="align-middle">
 						<td style="width:100%;">
 							<div class="align-items-center">
-								<label class="text-sm tracking-tight" for="{./name}">{./label}</label>
+								<label class="text-sm tracking-tight" for="{./name}">{tx(./label)}</label>
 								<input type="hidden" data-property="{./name}" value="{./value}">
 							</div>
 						</td>

package/templates/account/tags.tpl

@@ -2,7 +2,7 @@
 
 <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">{title}</h3>
+		<h3 class="fw-semibold fs-5 mb-0">{tx(title)}</h3>
 	</div>
 </div>
 

package/templates/account/uploads.tpl

@@ -1,6 +1,6 @@
 <!-- IMPORT partials/account/header.tpl -->
 
-<h3 class="fw-semibold fs-5">{title}</h3>
+<h3 class="fw-semibold fs-5">{tx(title)}</h3>
 
 <div class="alert alert-info text-center">
 	{{{ if privateUploads }}}[[uploads:private-uploads-info]]{{{ else }}}[[uploads:public-uploads-info]]{{{ end }}}

package/templates/category.tpl

@@ -5,9 +5,9 @@
 
 <div class="category-header d-flex flex-column gap-2">
 	<div class="d-flex gap-3 align-items-center mb-1 {{{ if config.theme.centerHeaderElements }}}justify-content-center flex-column{{{ end }}}">
-		{buildCategoryIcon(@value, "60px", "rounded-1 flex-shrink-0")}
+		{{buildCategoryIcon(@value, "60px", "rounded-1 flex-shrink-0")}}
 		<div class="d-flex flex-column gap-1">
-			<h1 class="tracking-tight fs-3 fw-semibold mb-0">{./name}</h1>
+			<h1 class="tracking-tight fs-3 fw-semibold mb-0">{tx(./name)}</h1>
 			<div class="d-flex flex-wrap gap-2 align-items-center {{{ if config.theme.centerHeaderElements }}}justify-content-center{{{ end }}}">
 				<span class="badge text-body border border-gray-300 stats text-xs">
 					<span title="{formattedNumber(totalTopicCount)}" class="fw-bold">{humanReadableNumber(totalTopicCount)}</span>
@@ -18,7 +18,7 @@
 					<span class="text-lowercase fw-normal">[[global:posts]]</span>
 				</span>
 				{{{ if !isNumber(cid) }}}
-				<a href="{escape(./url)}" class="badge text-body border border-gray-300 text-xs" data-ajaxify="false">
+				<a href="{./url}" class="badge text-body border border-gray-300 text-xs" data-ajaxify="false">
 					<span class="fw-normal">View Original</span>
 					<i class="fa fa-external-link"></i>
 				</a>
@@ -31,12 +31,12 @@
 	</div>
 	{{{ if ./descriptionParsed }}}
 	<div class="description text-secondary text-sm lh-sm w-100 {{{ if config.theme.centerHeaderElements }}}text-center{{{ end }}} line-clamp-4 clamp-fade-sm-4">
-		{./descriptionParsed}
+		{{./descriptionParsed}}
 	</div>
 	{{{ end }}}
 	{{{ if ./handleFull }}}
 	<p class="text-secondary text-sm fst-italic mb-0 {{{ if config.theme.centerHeaderElements }}}text-center{{{ end }}}">
-		[[category:handle.description, {txEscape(handleFull)}]]
+		[[category:handle.description, {handleFull}]]
 		<a href="#" class="link-secondary" data-action="copy" data-clipboard-text="{handleFull}"><i class="fa fa-fw fa-copy" aria-hidden="true"></i></a>
 	</p>
 	{{{ end }}}

package/templates/header.tpl

@@ -2,9 +2,9 @@
 <html lang="{localeToHTML(userLang, defaultLang)}" {{{if languageDirection}}}data-dir="{languageDirection}" style="direction: {languageDirection};"{{{end}}}>
 <head>
 	<title>{browserTitle}</title>
-	{{{each metaTags}}}{buildMetaTag(@value)}{{{end}}}
+	{{{each metaTags}}}{{buildMetaTag(@value)}}{{{end}}}
 	<link rel="stylesheet" type="text/css" href="{relative_path}/assets/client{{{if bootswatchSkin}}}-{bootswatchSkin}{{{end}}}{{{ if (languageDirection=="rtl") }}}-rtl{{{ end }}}.css?{config.cache-buster}" />
-	{{{each linkTags}}}{buildLinkTag(@value)}{{{end}}}
+	{{{each linkTags}}}{{buildLinkTag(@value)}}{{{end}}}
 
 	<script>
 		var config = JSON.parse('{{configJSON}}');

package/templates/notifications.tpl

@@ -10,7 +10,7 @@
 				<hr/>
 				{{{ else }}}
 				<a class="btn btn-ghost d-flex gap-2 text-start align-items-baseline text-sm ff-secondary fw-semibold {{{ if ./selected }}}active{{{ end }}}" href="{config.relative_path}/notifications?filter={./filter}">
-					<div class="flex-grow-1">{filters.name}</div>
+					<div class="flex-grow-1">{tx(filters.name)}</div>
 					{{{ if ./filter }}}
 					<span class="flex-shrink-0 text-xs" title="{./count}">{humanReadableNumber(./count)}</span>
 					{{{ end }}}

package/templates/partials/account/category-item.tpl

@@ -3,14 +3,14 @@
 	<div class="content depth-{./depth} d-flex gap-2">
 		<div class="flex-grow-1 align-items-start d-flex gap-2">
 			<div>
-				{buildCategoryIcon(@value, "24px", "rounded-1")}
+				{{buildCategoryIcon(@value, "24px", "rounded-1")}}
 			</div>
 			<div class="d-grid gap-0">
 				<div class="title fw-semibold">
 					<!-- IMPORT partials/categories/link.tpl -->
 				</div>
 				{{{ if ./descriptionParsed }}}
-				<div class="description text-muted text-xs w-100 line-clamp-sm-5">{./descriptionParsed}</div>
+				<div class="description text-muted text-xs w-100 line-clamp-sm-5">{{./descriptionParsed}}</div>
 				{{{ end }}}
 			</div>
 		</div>

package/templates/partials/account/header.tpl

@@ -1,5 +1,5 @@
 <div class="account w-100 mx-auto">
-	<div class="cover position-absolute start-0 top-0 w-100" component="account/cover" style="background-image: url({escape(cover:url)}); background-position: {cover:position};">
+	<div class="cover position-absolute start-0 top-0 w-100" component="account/cover" style="background-image: url({cover:url}); background-position: {cover:position};">
 		<div class="container">
 			{{{ if (allowCoverPicture && canEdit) }}}
 			<div class="controls text-center">
@@ -15,7 +15,7 @@
 
 	<div class="d-flex flex-column flex-md-row gap-2 w-100 pb-4 mb-4 mt-2 border-bottom">
 		<div {{{ if (allowProfilePicture && isSelfOrAdminOrGlobalModerator)}}}component="profile/change/picture"{{{ end }}} class="avatar-wrapper bg-body rounded-circle position-relative align-self-center align-self-md-start hover-parent" style="margin-top: -75px; padding: 4px;">
-			{buildAvatar(@value, "142px", true)}
+			{{buildAvatar(@value, "142px", true)}}
 			{{{ if (allowProfilePicture && isSelfOrAdminOrGlobalModerator)}}}
 			<a href="#" component="profile/change/picture" class="d-none d-md-block pointer p-2 rounded-1 text-bg-light position-absolute top-50 start-50 translate-middle hover-opacity-75">
 				<span class="upload"><i class="fa fa-fw fa-upload"></i></span>

package/templates/partials/account/session-list.tpl

@@ -6,7 +6,7 @@
 		<button class="btn btn-sm btn-outline-secondary" type="button" data-action="revokeSession">[[user:revoke-session]]</button>
 		{{{ end }}}
 		{{{ end }}}
-		{userAgentIcons(@value)}
+		{{userAgentIcons(@value)}}
 		<i class="fa fa-circle text-{{{ if ./current }}}success{{{ else }}}muted{{{ end }}}"></i>
 	</div>
 	[[user:browser-version-on-platform, {./browser}, {./version}, {./platform}]]<br />

package/templates/partials/account/sidebar-left.tpl

@@ -119,7 +119,7 @@
 
 		{{{ each profile_links }}}
 		<a href="{config.relative_path}/user/{userslug}/{./route}" class="btn btn-ghost btn-sm ff-secondary text-xs text-start plugin-link {{{ if ./public }}}public{{{ else }}}private{{{ end }}} {{{ if (url == ./url) }}}active{{{ end }}}" id="{./id}">
-			<div class="flex-grow-1">{./name}</div>
+			<div class="flex-grow-1">{tx(./name)}</div>
 		</a>
 		{{{end}}}
 	</div>

package/templates/partials/breadcrumbs-json-ld.tpl

@@ -10,7 +10,7 @@
 {{{ each breadcrumbs }}}{{{ if !@first}}},{
 	"@type": "ListItem",
 	"position": {increment(@index, "1")},
-	"name": "{stripTags(./text)}"
+	"name": "{stripTags(tx(./text))}"
 	{{{ if !@last }}},"item": "{./url}"{{{ end }}}
 }{{{ end }}}{{{ end }}}
 ]}</script>

package/templates/partials/breadcrumbs.tpl

@@ -4,7 +4,7 @@
 	<li{{{ if @last }}} component="breadcrumb/current"{{{ end }}} itemscope="itemscope" itemprop="itemListElement" itemtype="http://schema.org/ListItem" class="breadcrumb-item {{{ if @last }}}active{{{ end }}}">
 		<meta itemprop="position" content="{increment(@index, "1")}" />
 		{{{ if ./url }}}<a href="{./url}" itemprop="item">{{{ end }}}
-			<span class="fw-semibold" itemprop="name">{./text}</span>
+			<span class="fw-semibold" itemprop="name">{tx(./text)}</span>
 		{{{ if ./url }}}</a>{{{ end }}}
 	</li>
 	{{{ end }}}

package/templates/partials/buttons/newTopic.tpl

@@ -10,7 +10,7 @@
 			<a role="menu-item" href="{config.relative_path}/compose?cid={categories.cid}">{categories.level}
 				<span component="category-markup">
 					<div class="category-item d-inline-block">
-						{buildCategoryIcon(@value, "24px", "rounded-circle")}
+						{{buildCategoryIcon(@value, "24px", "rounded-circle")}}
 						{categories.name}
 					</div>
 				</span>

package/templates/partials/categories/item.tpl

@@ -3,7 +3,7 @@
 
 	<div class="d-flex col-lg-7 gap-2 gap-lg-3">
 		<div class="flex-shrink-0">
-		{buildCategoryIcon(@value, "40px", "rounded-1")}
+		{{buildCategoryIcon(@value, "40px", "rounded-1")}}
 		</div>
 		<div class="flex-grow-1 d-flex flex-wrap gap-1 me-0 me-lg-2">
 			<h2 class="title text-break fs-4 fw-semibold m-0 tracking-tight w-100">
@@ -11,7 +11,7 @@
 			</h2>
 			{{{ if ./descriptionParsed }}}
 			<div class="description text-muted text-sm w-100 line-clamp-sm-5">
-				{./descriptionParsed}
+				{{./descriptionParsed}}
 			</div>
 			{{{ end }}}
 			{{{ if !./link }}}

package/templates/partials/categories/lastpost.tpl

@@ -3,12 +3,12 @@
 	{{{ if @first }}}
 	<div component="category/posts" class="ps-2 text-xs d-flex flex-column h-100 gap-1">
 		<div class="text-nowrap text-truncate">
-			<a class="text-decoration-none avatar-tooltip" title="{./user.displayname}" href="{config.relative_path}/user/{./user.userslug}">{buildAvatar(posts.user, "18px", true)}</a>
+			<a class="text-decoration-none avatar-tooltip" title="{./user.displayname}" href="{config.relative_path}/user/{./user.userslug}">{{buildAvatar(posts.user, "18px", true)}}</a>
 			<a class="permalink text-muted timeago text-xs" href="{config.relative_path}/topic/{./topic.slug}{{{ if ./index }}}/{./index}{{{ end }}}" title="{./timestampISO}" aria-label="[[global:lastpost]]"></a>
 		</div>
 		<div class="post-content text-xs text-break line-clamp-sm-2 lh-sm position-relative flex-fill">
 			<a class="stretched-link" tabindex="-1" href="{config.relative_path}/topic/{./topic.slug}{{{ if ./index }}}/{./index}{{{ end }}}" aria-label="[[global:lastpost]]"></a>
-			{./content}
+			{{./content}}
 		</div>
 	</div>
 	{{{ end }}}

package/templates/partials/categories/link.tpl

@@ -1,5 +1,5 @@
 {{{ if ./isSection }}}
-{./name}
+{tx(./name)}
 {{{ else }}}
-<a class="text-reset" href="{{{ if ./link }}}{./link}{{{ else }}}{config.relative_path}/category/{./slug}{{{ end }}}" itemprop="url">{../name}</a>
+<a class="text-reset" href="{{{ if ./link }}}{./link}{{{ else }}}{config.relative_path}/category/{./slug}{{{ end }}}" itemprop="url">{tx(./name)}</a>
 {{{ end }}}

package/templates/partials/cookie-consent.tpl

@@ -1,6 +1,6 @@
 <div class="position-fixed bottom-0 w-100 px-3 px-md-0 pb-5 mb-5 pb-lg-0 mb-lg-0" style="z-index: 2;">
     <div class="cookie-consent d-flex flex-column flex-lg-row gap-2 text-bg-info col-12 col-sm-8 col-lg-6 p-3 mx-auto rounded mb-5 mb-md-3 justify-content-between align-items-center">
-        <span>{message} <a class="fw-bold" target="_blank" rel="noopener" href="{link_url}">{link}</a></span>
-        <button class="btn btn-primary text-nowrap">{dismiss}</button>
+        <span>{tx(message)} <a class="fw-bold" target="_blank" rel="noopener" href="{link_url}">{tx(link)}</a></span>
+        <button class="btn btn-primary text-nowrap">{tx(dismiss)}</button>
     </div>
 </div>

package/templates/partials/mobile-nav.tpl

@@ -10,14 +10,14 @@
 			<ul class="navigation-dropdown dropdown-menu" role="menu">
 				{{{ each navigation }}}
 				{{{ if displayMenuItem(@root, @index) }}}
-				<li class="nav-item {./class}{{{ if ./dropdown }}} dropend{{{ end }}}" title="{./title}">
+				<li class="nav-item {./class}{{{ if ./dropdown }}} dropend{{{ end }}}" title="{tx(./title)}">
 					<a class="nav-link navigation-link px-3 py-2 {{{ if ./dropdown }}}dropdown-toggle{{{ end }}}" {{{ if ./dropdown }}} href="#" role="button" data-bs-toggle="collapse" data-bs-target="#collapse-target-{@index}" onclick="event.stopPropagation();" {{{ else }}} href="{./route}"{{{ end }}} {{{ if ./id }}}id="{./id}"{{{ end }}}{{{ if ./targetBlank }}} target="_blank"{{{ end }}}>
 						<span class="d-inline-flex justify-content-between align-items-center w-100">
 							<span class="text-nowrap">
 								{{{ if ./iconClass }}}
 								<i class="fa fa-fw {./iconClass}" data-content="{./content}"></i>
 								{{{ end }}}
-								{{{ if ./text }}}<span class="nav-text px-2 fw-semibold">{./text}</span>{{{ end }}}
+								{{{ if ./text }}}<span class="nav-text px-2 fw-semibold">{tx(./text)}</span>{{{ end }}}
 							</span>
 							<span component="navigation/count" class="badge rounded-1 bg-primary {{{ if !./content }}}hidden{{{ end }}}">{./content}</span>
 						</span>
@@ -25,7 +25,7 @@
 					{{{ if ./dropdown }}}
 					<div class="ps-3">
 						<ul id="collapse-target-{@index}" class="collapse list-unstyled ps-3">
-							{./dropdownContent}
+							{{./dropdownContent}}
 						</ul>
 					</div>
 					{{{ end }}}

package/templates/partials/notifications_list.tpl

@@ -9,7 +9,7 @@
 		<div class="btn btn-ghost btn-sm d-flex gap-2 flex-grow-1 align-items-start text-start">
 			<a class="flex-grow-0 flex-shrink-0" href="{{{ if ./user.userslug}}}{config.relative_path}/user/{./user.userslug}{{{ else }}}#{{{ end }}}">
 				{{{ if ./user }}}
-				{buildAvatar(./user, "32px", true)}
+				{{buildAvatar(./user, "32px", true)}}
 				{{{ else }}}
 					{{{ if ./icon }}}
 					<div class="avatar avatar-rounded" style="--avatar-size: 32px;"><i class="text-secondary fa {./icon}"></i></div>
@@ -23,11 +23,11 @@
 
 			<div class="d-flex flex-grow-1 flex-column gap-1 align-items-start position-relative">
 				<a href="{./path}" class="text-decoration-none d-inline-block text-reset text-break text-sm ff-sans stretched-link" component="notifications/item/link">
-					{./bodyShort}
+					{{./bodyShort}}
 				</a>
 				{{{ if ./bodyLong}}}
 				<div class="text-secondary text-sm line-clamp-2 text-contain hidden-blockquote hidden-pre hidden-first-child-br">
-					{./bodyLong}
+					{{./bodyLong}}
 				</div>
 				{{{ end }}}
 				<div class="text-xs text-muted">{{{ if ./timeagoLong }}}{./timeagoLong}{{{ else }}}<span class="timeago" title="{./datetimeISO}"></span>{{{ end }}}</div>

package/templates/partials/posts_list_item.tpl

@@ -7,18 +7,18 @@
     <div class="post-body d-flex flex-column gap-1 mb-2">
         <div class="d-flex gap-2 post-info text-sm align-items-center">
             <div class="post-author d-flex align-items-center gap-1">
-                <a class="lh-1 text-decoration-none" href="{config.relative_path}/user/{./user.userslug}">{buildAvatar(./user, "16px", true, "not-responsive")}</a>
+                <a class="lh-1 text-decoration-none" href="{config.relative_path}/user/{./user.userslug}">{{buildAvatar(./user, "16px", true, "not-responsive")}}</a>
                 <a class="lh-1 fw-semibold" href="{config.relative_path}/user/{./user.userslug}">{../user.displayname}</a>
             </div>
             <span class="timeago text-muted lh-1" title="{./timestampISO}"></span>
         </div>
 
         <div component="post/content" class="content text-sm text-break">
-            {./content}
+            {{./content}}
         </div>
     </div>
     <div class="mb-3 d-flex flex-wrap gap-1 w-100">
-        {buildCategoryLabel(./category, "a", "border")}
+        {{buildCategoryLabel(./category, "a", "border")}}
         <span data-tid="{./topic.tid}" component="topic/tags" class="lh-1 tag-list d-flex flex-wrap gap-1 {{{ if !./topic.tags.length }}}hidden{{{ end }}}">
             {{{ each ./topic.tags }}}
             <a href="{config.relative_path}/tags/{./valueEncoded}"><span class="badge border border-gray-300 fw-normal tag tag-class-{./class}" data-tag="{./value}">{./valueEscaped}</span></a>

package/templates/partials/quick-category-search-results.tpl

@@ -11,7 +11,7 @@
 	{{{ each categories }}}
 	<li data-cid="{./cid}" class="d-flex flex-column gap-1">
 		<div class="btn btn-ghost btn-sm ff-secondary d-flex gap-2 align-items-center rounded-1 text-start text-reset d-block text-truncate px-2 py-1 position-relative">
-			<div class="flex-shrink-0">{buildCategoryIcon(@value, "40px", "rounded-1")}</div>
+			<div class="flex-shrink-0">{{buildCategoryIcon(@value, "40px", "rounded-1")}}</div>
 			<div class="flex-grow-1" style="min-width: 0;">
 				<a class="stretched-link" href="{config.relative_path}/category/{./slug}"></a>
 				<span class="quick-search-title fw-semibold text-sm">
@@ -22,7 +22,7 @@
 				</span>
 				<br/>
 				<div class="snippet text-xs text-break text-wrap mb-0 text-sm text-secondary line-clamp-1">
-					{./descriptionParsed}
+					{{./descriptionParsed}}
 				</div>
 			</div>
 		</div>

package/templates/partials/quick-search-results.tpl

@@ -21,7 +21,7 @@
 		</a>
 		<div class="d-flex gap-2 post-info px-2 text-xs">
 			<div class="category-item d-inline-block ff-secondary">
-				{buildCategoryLabel(posts.category, "span")}
+				{{buildCategoryLabel(posts.category, "span")}}
 			</div>
 			<span class="timeago text-muted" title="{posts.timestampISO}"></span>
 		</div>

package/templates/partials/search-filters.tpl

@@ -69,7 +69,7 @@
 					<div component="user/filter/selected" class="d-flex flex-wrap gap-2">
 						{{{ each userFilterSelected }}}
 						<div class="d-flex px-2 py-1 rounded-1 text-bg-primary gap-2 align-items-center text-sm">
-							{buildAvatar(@value, "16px", true)} {./username}
+							{{buildAvatar(@value, "16px", true)}} {./username}
 							<button component="user/filter/delete" data-uid="{./uid}" class="btn btn-primary btn-sm py-0"><i class="fa fa-times fa-xs"></i></button>
 						</div>
 						{{{ end }}}
@@ -77,7 +77,7 @@
 					<hr class="my-2"/>
 					<div component="user/filter/results" class="d-flex flex-wrap gap-2">
 						{{{ each userFilterResults }}}
-						<button class="btn btn-light btn-sm border" data-uid="{./uid}" data-username="{./username}">{buildAvatar(@value, "16px", true)} {./username}</button>
+						<button class="btn btn-light btn-sm border" data-uid="{./uid}" data-username="{./username}">{{buildAvatar(@value, "16px", true)}} {./username}</button>
 						{{{ end }}}
 					</div>
 				</li>