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

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "nodebb-theme-harmony",
-  "version": "2.2.72",
+  "version": "3.0.0-beta.1",
   "nbbpm": {
-    "compatibility": "^4.12.0"
+    "compatibility": "^4.14.0"
   },
   "description": "Harmony theme for NodeBB",
   "main": "library.js",

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/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}
+{{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 }}}

package/templates/account/settings.tpl

@@ -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 }}}
@@ -189,7 +189,7 @@
 		<hr/>
 		<h6 class="fw-bold">{./title}</h6>
 		<div>
-			{./content}
+			{{./content}}
 		</div>
 		{{{end}}}
 		<hr class="d-block d-md-none"/>

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>
@@ -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/groups/details.tpl

@@ -23,12 +23,12 @@
 				</div>
 			</div>
 			<div>
-				{group.descriptionParsed}
+				{{group.descriptionParsed}}
 			</div>
 		</div>
 		<div class="d-flex gap-2 align-items-start">
 			{{{ if loggedIn }}}
-			{membershipBtn(group)}
+			{{membershipBtn(group)}}
 			{{{ end }}}
 			{{{ if isAdmin }}}
 			<a href="{config.relative_path}/admin/manage/groups/{group.slug}" target="_blank" class="btn btn-light text-nowrap"><i class="fa fa-gear"></i> [[user:edit]]</a>

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/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

@@ -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/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/groups/invited.tpl

@@ -21,7 +21,7 @@
 			<tr data-uid="{group.invited.uid}" class="align-middle">
 				<td class="member-name p-2 d-flex align-items-center justify-content-between">
 					<div class="d-flex align-items-center gap-2">
-						<a class="text-decoration-none" href="{config.relative_path}/user/{group.invited.userslug}">{buildAvatar(group.invited, "24px", true)}</a>
+						<a class="text-decoration-none" href="{config.relative_path}/user/{group.invited.userslug}">{{buildAvatar(group.invited, "24px", true)}}</a>
 						<a href="{config.relative_path}/user/{group.invited.userslug}">{group.invited.username}</a>
 					</div>
 					<button class="btn btn-outline-secondary btn-sm text-nowrap" data-action="rescindInvite">[[groups:invited.uninvite]]</button>

package/templates/partials/groups/memberlist.tpl

@@ -22,7 +22,7 @@
 				<td class="member-name p-2 w-100 ">
 					<div class="d-flex align-items-center justify-content-between">
 						<div class="d-flex align-items-center gap-2">
-							<a class="text-decoration-none" href="{config.relative_path}/user/{group.members.userslug}">{buildAvatar(group.members, "24px", true)}</a>
+							<a class="text-decoration-none" href="{config.relative_path}/user/{group.members.userslug}">{{buildAvatar(group.members, "24px", true)}}</a>
 							<a class="align-text-top" href="{config.relative_path}/user/{group.members.userslug}">{group.members.username}</a>
 							<i component="groups/owner/icon" title="[[groups:owner]]" class="user-owner-icon fa fa-star align-text-top text-warning {{{ if !group.members.isOwner }}}invisible{{{ end }}}"></i>
 						</div>

package/templates/partials/groups/pending.tpl

@@ -14,7 +14,7 @@
 			<tr data-uid="{group.pending.uid}" class="align-middle">
 				<td class="member-name p-2 d-flex align-items-center justify-content-between">
 					<div class="d-flex gap-2">
-						<a class="text-decoration-none" href="{config.relative_path}/user/{group.pending.userslug}">{buildAvatar(group.pending, "24px", true)}</a>
+						<a class="text-decoration-none" href="{config.relative_path}/user/{group.pending.userslug}">{{buildAvatar(group.pending, "24px", true)}}</a>
 						<a href="{config.relative_path}/user/{group.pending.userslug}">{group.pending.username}</a>
 					</div>
 					<div class="d-flex gap-2">

package/templates/partials/mobile-nav.tpl

@@ -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>

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>

package/templates/partials/search-results.tpl

@@ -24,7 +24,7 @@
 		<div class="post-body d-flex flex-column gap-1">
 			<div class="d-flex gap-3 post-info">
 				<div class="post-author d-flex 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="fw-semibold text-sm" href="{config.relative_path}/user/{./user.userslug}">{../user.displayname}</a>
 				</div>
 				<span class="timeago text-sm text-muted" title="{./timestampISO}"></span>

package/templates/partials/sidebar/user-menu.tpl

@@ -1,5 +1,5 @@
 <a component="header/avatar" id="user_dropdown" href="#" role="button" class="nav-link d-flex gap-2 align-items-center text-truncate" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" aria-label="[[user:user-menu]]" style="padding: 2px 4px;">
-	{buildAvatar(user, "28px", true)}
+	{{buildAvatar(user, "28px", true)}}
 	<span id="user-header-name" class="nav-text small visible-open fw-semibold">{user.username}</span>
 </a>
 <ul id="user-control-list" component="header/usercontrol" class="overscroll-behavior-contain user-dropdown dropdown-menu shadow p-1 text-sm ff-base" role="menu">

package/templates/partials/sidebar-left.tpl

@@ -2,8 +2,8 @@
 	<ul id="main-nav" class="list-unstyled d-flex flex-column w-100 gap-2 mt-2 overflow-y-auto">
 		{{{ each navigation }}}
 		{{{ if displayMenuItem(@root, @index) }}}
-		<li class="nav-item mx-2 {./class}{{{ if ./dropdown }}} dropend{{{ end }}}" title="{./title}">
-			<a class="nav-link navigation-link d-flex gap-2 justify-content-between align-items-center {{{ if ./dropdown }}}dropdown-toggle{{{ end }}}" {{{ if ./dropdown }}} href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" {{{ else }}} href="{./route}"{{{ end }}} {{{ if ./id }}}id="{./id}"{{{ end }}}{{{ if ./targetBlank }}} target="_blank"{{{ end }}} {{{ if ./text }}}aria-label="{./text}"{{{ end }}}>
+		<li class="nav-item mx-2 {./class}{{{ if ./dropdown }}} dropend{{{ end }}}" title="{tx(./title)}">
+			<a class="nav-link navigation-link d-flex gap-2 justify-content-between align-items-center {{{ if ./dropdown }}}dropdown-toggle{{{ end }}}" {{{ if ./dropdown }}} href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" {{{ else }}} href="{./route}"{{{ end }}} {{{ if ./id }}}id="{./id}"{{{ end }}}{{{ if ./targetBlank }}} target="_blank"{{{ end }}} {{{ if ./text }}}aria-label="{tx(./text)}"{{{ end }}}>
 				<span class="d-flex gap-2 align-items-center text-nowrap truncate-open">
 					<span class="position-relative">
 						{{{ if ./iconClass }}}
@@ -11,13 +11,13 @@
 						<span component="navigation/count" class="visible-closed position-absolute top-0 start-100 translate-middle badge rounded-1 bg-primary {{{ if !./content }}}hidden{{{ end }}}">{./content}</span>
 						{{{ end }}}
 					</span>
-					{{{ if ./text }}}<span class="nav-text small visible-open fw-semibold text-truncate">{./text}</span>{{{ end }}}
+					{{{ if ./text }}}<span class="nav-text small visible-open fw-semibold text-truncate">{tx(./text)}</span>{{{ end }}}
 				</span>
 				<span component="navigation/count" class="visible-open badge rounded-1 bg-primary {{{ if !./content }}}hidden{{{ end }}}">{./content}</span>
 			</a>
 			{{{ if ./dropdown }}}
 			<ul class="dropdown-menu p-1 shadow" role="menu">
-				{./dropdownContent}
+				{{./dropdownContent}}
 			</ul>
 			{{{ end }}}
 		</li>

package/templates/partials/toast.tpl

@@ -6,11 +6,11 @@
 		{{{ end }}}
 		<div class="d-flex flex-column gap-2">
 			{{{ if title }}}
-			<strong>{title}</strong>
+			<strong>{tx(title)}</strong>
 			{{{ end }}}
 
 			{{{ if message }}}
-			<p class="m-0">{message}</p>
+			<p class="m-0">{tx(message)}</p>
 			{{{ end }}}
 		</div>
 	</div>

package/templates/partials/topic/event.tpl

@@ -12,7 +12,7 @@
 				{{{ each ./items }}}
 				<div class="d-flex gap-2 pt-3 pt-lg-2" data-topic-event-id="{./id}" data-topic-event-type="{./type}">
 					<span class="timeline-text small d-flex align-items-center gap-1 flex-wrap flex-grow-1 flex-lg-grow-0">
-						{./text}
+						{{./text}}
 					</span>
 					{{{ if (privileges.isAdminOrMod && ./id) }}}
 					<span component="topic/event/delete" data-topic-event-id="{./id}" data-topic-event-type="{./type}" class="timeline-text pointer" title="[[topic:delete-event]]"><i class="fa fa-trash"></i></span>
@@ -30,7 +30,7 @@
 		<i class="fa fa-fw {{{ if ./icon }}}{./icon}{{{ else }}}fa-circle{{{ end }}} small"></i>
 	</div>
 	<span class="timeline-text small d-flex align-items-center gap-1 flex-wrap flex-grow-1 flex-lg-grow-0">
-		{./text}
+		{{./text}}
 	</span>
 	{{{ if (privileges.isAdminOrMod && ./id) }}}
 	<span component="topic/event/delete" data-topic-event-id="{./id}" data-topic-event-type="{./type}" class="timeline-text pointer" title="[[topic:delete-event]]"><i class="fa fa-trash"></i></span>

package/templates/partials/topic/navigation-post.tpl

@@ -1,6 +1,6 @@
 <div class="d-flex gap-2 mb-2 align-items-center flex-nowrap text-sm">
 	<div>
-		{buildAvatar(post.user, "24px", true)}
+		{{buildAvatar(post.user, "24px", true)}}
 	</div>
 	<div class="text-truncate">
 		<a href="{{{ if post.user.userslug }}}{config.relative_path}/user/{post.user.userslug}{{{else }}}#{{{ end }}}">{post.user.displayname}</a>
@@ -8,4 +8,4 @@
 	<span class="timeago text-nowrap text-muted" title="{post.timestampISO}"></span>
 </div>
 
-<div class="text-sm">{post.content}</div>
+<div class="text-sm">{{post.content}}</div>

package/templates/partials/topic/necro-post.tpl

@@ -2,5 +2,5 @@
 	<div class="timeline-badge">
 		<i class="fa fa-clock small"></i>
 	</div>
-	<span class="timeline-text small fw-semibold">{text}</span>
+	<span class="timeline-text small fw-semibold">{tx(text)}</span>
 </li>

package/templates/partials/topic/post.tpl

@@ -11,7 +11,7 @@
 <div class="d-flex align-items-start gap-3 post-container-parent">
 	<div class="bg-body d-none d-sm-block rounded-circle" style="box-shadow: 0 0 0 3px var(--bs-body-bg);">
 		<a class="d-inline-block position-relative text-decoration-none" href="{{{ if ./user.userslug }}}{config.relative_path}/user/{./user.userslug}{{{ else }}}#{{{ end }}}" aria-label="[[aria:profile-page-for, {./user.displayname}]]">
-			{buildAvatar(posts.user, "48px", true, "", "user/picture")}
+			{{buildAvatar(posts.user, "48px", true, "", "user/picture")}}
 			{{{ if ./user.isLocal }}}
 			<span component="user/status" class="position-absolute top-100 start-100 border border-white border-2 rounded-circle status {posts.user.status}"><span class="visually-hidden">[[global:{posts.user.status}]]</span></span>
 			{{{ else }}}
@@ -31,7 +31,7 @@
 				<div class="d-flex flex-nowrap gap-1 align-items-center text-truncate">
 					<div class="d-sm-none">
 						<a class="d-inline-block position-relative text-decoration-none" href="{{{ if ./user.userslug }}}{config.relative_path}/user/{./user.userslug}{{{ else }}}#{{{ end }}}">
-							{buildAvatar(posts.user, "20px", true, "", "user/picture")}
+							{{buildAvatar(posts.user, "20px", true, "", "user/picture")}}
 							{{{ if ./user.isLocal }}}
 							<span component="user/status" class="position-absolute top-100 start-100 border border-white border-2 rounded-circle status {posts.user.status}"><span class="visually-hidden">[[global:{posts.user.status}]]</span></span>
 							{{{ else }}}
@@ -57,7 +57,7 @@
 				{{{ end }}}
 
 				<div class="d-flex gap-1 align-items-center">
-					<span class="text-muted">{generateWrote(@value, config.timeagoCutoff)}</span>
+					<span class="text-muted">{{generateWrote(@value, config.timeagoCutoff)}}</span>
 
 					<i component="post/edit-indicator" class="fa fa-edit text-muted{{{ if privileges.posts:history }}} pointer{{{ end }}} edit-icon {{{ if !posts.editor.username }}}hidden{{{ end }}}" title="[[global:edited-timestamp, {isoTimeToLocaleString(./editedISO, config.userLang)}]]"></i>
 					<span data-editor="{posts.editor.userslug}" component="post/editor" class="visually-hidden">[[global:last-edited-by, {posts.editor.username}]] <span class="timeago" title="{isoTimeToLocaleString(posts.editedISO, config.userLang)}"></span></span>
@@ -68,7 +68,7 @@
 					<span>
 
 						{{{ each posts.user.custom_profile_info }}}
-						{posts.user.custom_profile_info.content}
+						{{posts.user.custom_profile_info.content}}
 						{{{ end }}}
 					</span>
 				</div>
@@ -81,12 +81,12 @@
 		</div>
 
 		<div class="content text-break" component="post/content" itemprop="text">
-			{posts.content}
+			{{posts.content}}
 		</div>
 
 		<div component="post/footer" class="post-footer border-bottom pb-2">
 			{{{ if posts.user.signature }}}
-			<div component="post/signature" data-uid="{posts.user.uid}" class="text-xs text-muted mt-2">{posts.user.signature}</div>
+			<div component="post/signature" data-uid="{posts.user.uid}" class="text-xs text-muted mt-2">{{posts.user.signature}}</div>
 			{{{ end }}}
 
 			<div class="d-flex flex-wrap-reverse gap-2 {{{ if (hideReplies || !posts.replies.count) }}}justify-content-end{{{ else }}}justify-content-between{{{ end }}}">
@@ -94,7 +94,7 @@
 				<a component="post/reply-count" data-target-component="post/replies/container" href="#" class="d-flex gap-2 align-items-center btn btn-ghost ff-secondary border rounded-1 p-1 text-muted text-decoration-none text-xs {{{ if (!./replies || shouldHideReplyContainer(@value)) }}}hidden{{{ end }}}">
 					<span component="post/reply-count/avatars" class="d-flex gap-1 {{{ if posts.replies.hasMore }}}hasMore{{{ end }}}">
 						{{{each posts.replies.users}}}
-						<span>{buildAvatar(posts.replies.users, "20px", true, "avatar-tooltip")}</span>
+						<span>{{buildAvatar(posts.replies.users, "20px", true, "avatar-tooltip")}}</span>
 						{{{end}}}
 						{{{ if posts.replies.hasMore}}}
 						<span style="height: 20px; line-height: 20px;"><i class="fa fa-ellipsis"></i></span>

package/templates/partials/topic/quickreply.tpl

@@ -2,7 +2,7 @@
 <div component="topic/quickreply/container" class="quick-reply d-flex gap-3 mb-4">
 	<div class="icon hidden-xs">
 		<a class="d-inline-block position-relative" href="{{{ if loggedInUser.userslug }}}{config.relative_path}/user/{loggedInUser.userslug}{{{ else }}}#{{{ end }}}">
-			{buildAvatar(loggedInUser, "48px", true, "", "user/picture")}
+			{{buildAvatar(loggedInUser, "48px", true, "", "user/picture")}}
 			{{{ if loggedInUser.status }}}<span component="user/status" class="position-absolute top-100 start-100 border border-white border-2 rounded-circle status {loggedInUser.status}"><span class="visually-hidden">[[global:{loggedInUser.status}]]</span></span>{{{ end }}}
 		</a>
 	</div>

package/templates/partials/topic/sort.tpl

@@ -1,7 +1,7 @@
 <div class="dropdown bottom-sheet" component="thread/sort">
 	<button class="btn btn-ghost btn-sm ff-secondary d-flex gap-2 align-items-center dropdown-toggle text-truncate w-100" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" aria-label="[[aria:post-sort-option, {sortOptionLabel}]]">
 		<i class="fa fa-fw fa-arrow-down-wide-short text-primary"></i>
-		<span class="d-none d-md-inline fw-semibold text-truncate text-nowrap">{sortOptionLabel}</span>
+		<span class="d-none d-md-inline fw-semibold text-truncate text-nowrap">{tx(sortOptionLabel)}</span>
 	</button>
 
 	<ul class="dropdown-menu dropdown-menu-end p-1 text-sm" role="menu">

package/templates/partials/topics_list.tpl

@@ -3,7 +3,7 @@
 	{{{ each topics }}}
 	<li component="category/topic" class="category-item hover-parent border-bottom py-3 py-lg-4 d-flex flex-column flex-lg-row align-items-start {generateTopicClass(@value)}" <!-- IMPORT partials/data/category.tpl -->>
 		<link itemprop="url" content="{config.relative_path}/topic/{./slug}" />
-		<meta itemprop="name" content="{stripTags(./title)}" />
+		<meta itemprop="name" content="{{generateTopicTitle(@value)}}" />
 		<meta itemprop="itemListOrder" content="descending" />
 		<meta itemprop="position" content="{increment(./index, "1")}" />
 		<a id="{./index}" data-index="{./index}" component="topic/anchor"></a>
@@ -11,7 +11,7 @@
 		<div class="d-flex p-0 col-12 col-lg-7 gap-2 gap-lg-3 pe-2 align-items-start {{{ if config.theme.mobileTopicTeasers }}}mb-2 mb-lg-0{{{ end }}}">
 			<div class="flex-shrink-0 position-relative">
 				<a class="d-inline-block text-decoration-none avatar-tooltip" title="{./user.displayname}" href="{{{ if ./user.userslug }}}{config.relative_path}/user/{./user.userslug}{{{ else }}}#{{{ end }}}">
-					{buildAvatar(./user, "40px", true)}
+					{{buildAvatar(./user, "40px", true)}}
 				</a>
 				{{{ if showSelect }}}
 				<div class="checkbox position-absolute top-100 start-50 translate-middle-x pt-2 m-0 d-none d-lg-flex" style="max-width:max-content">
@@ -21,7 +21,7 @@
 			</div>
 			<div class="flex-grow-1 d-flex flex-wrap gap-1 position-relative">
 				<h3 component="topic/header" class="title text-break text-wrap-pretty fs-5 fw-semibold m-0 tracking-tight w-100 {{{ if showSelect }}}me-4 me-lg-0{{{ end }}}">
-					<a class="text-reset" href="{{{ if topics.noAnchor }}}#{{{ else }}}{config.relative_path}/topic/{./slug}{{{ if ./bookmark }}}/{./bookmark}{{{ end }}}{{{ end }}}">{./title}</a>
+					<a class="text-reset" href="{{{ if topics.noAnchor }}}#{{{ else }}}{config.relative_path}/topic/{./slug}{{{ if ./bookmark }}}/{./bookmark}{{{ end }}}{{{ end }}}">{{generateTopicTitle(@value)}}</a>
 				</h3>
 				<span component="topic/labels" class="d-flex flex-wrap gap-1 w-100">
 					<span component="topic/watched" class="badge border border-gray-300 text-body {{{ if !./followed }}}hidden{{{ end }}}">
@@ -51,7 +51,7 @@
 					{{{each ./icons}}}<span class="lh-1">{@value}</span>{{{end}}}
 
 					{{{ if (!template.category || (cid != ./cid)) }}}
-					{buildCategoryLabel(./category, "a", "border")}
+					{{buildCategoryLabel(./category, "a", "border")}}
 					{{{ end }}}
 
 					<span data-tid="{./tid}" component="topic/tags" class="lh-1 tag-list d-flex flex-wrap gap-1 {{{ if !./tags.length }}}hidden{{{ end }}}">
@@ -114,12 +114,12 @@
 					{{{ else }}}
 					{{{ if ./teaser.pid }}}
 					<div class="ps-2">
-						<a href="{{{ if ./teaser.user.userslug }}}{config.relative_path}/user/{./teaser.user.userslug}{{{ else }}}#{{{ end }}}" class="text-decoration-none avatar-tooltip" title="{./teaser.user.displayname}">{buildAvatar(./teaser.user, "18px", true)}</a>
+						<a href="{{{ if ./teaser.user.userslug }}}{config.relative_path}/user/{./teaser.user.userslug}{{{ else }}}#{{{ end }}}" class="text-decoration-none avatar-tooltip" title="{./teaser.user.displayname}">{{buildAvatar(./teaser.user, "18px", true)}}</a>
 						<a class="permalink text-muted timeago text-xs" href="{config.relative_path}/topic/{./slug}/{./teaser.index}" title="{./teaser.timestampISO}" aria-label="[[global:lastpost]]"></a>
 					</div>
 					<div class="post-content text-xs ps-2 line-clamp-sm-2 lh-sm text-break position-relative flex-fill">
 						<a class="stretched-link" tabindex="-1" href="{config.relative_path}/topic/{./slug}/{./teaser.index}" aria-label="[[global:lastpost]]"></a>
-						{./teaser.content}
+						{{./teaser.content}}
 					</div>
 					{{{ end }}}
 					{{{ end }}}

package/templates/partials/users/item.tpl

@@ -1,6 +1,6 @@
 <div>
 	<a href="{config.relative_path}/user/{./userslug}" class="btn btn-ghost gap-2 ff-base d-flex align-items-start justify-content-start p-2 text-start">
-		{buildAvatar(@value, "48px", true, "flex-shrink-0")}
+		{{buildAvatar(@value, "48px", true, "flex-shrink-0")}}
 		<div class="d-flex flex-column gap-1 text-truncate">
 			<div class="fw-semibold text-truncate" title="{./displayname}">{./displayname}</div>
 			<div class="text-xs text-muted text-truncate">@{./username}</div>

package/templates/topic.tpl

@@ -11,23 +11,7 @@
 {{{ end }}}
 
 <div class="flex-fill" itemid="{url}" itemscope itemtype="https://schema.org/DiscussionForumPosting">
-	<meta itemprop="headline" content="{escape(titleRaw)}">
-	<meta itemprop="text" content="{escape(titleRaw)}">
-	<meta itemprop="url" content="{url}">
-	<meta itemprop="datePublished" content="{timestampISO}">
-	<meta itemprop="dateModified" content="{lastposttimeISO}">
-	<div itemprop="author" itemscope itemtype="https://schema.org/Person">
-		<meta itemprop="name" content="{author.username}">
-		{{{ if author.userslug }}}<meta itemprop="url" content="{config.relative_path}/user/{author.userslug}">{{{ end }}}
-	</div>
-	<div itemprop="interactionStatistic" itemscope itemtype="https://schema.org/InteractionCounter">
-		<meta itemprop="interactionType" content="https://schema.org/CommentAction">
-		<meta itemprop="userInteractionCount" content="{increment(postcount, "-1")}">
-	</div>
-	<div itemprop="interactionStatistic" itemscope itemtype="https://schema.org/InteractionCounter">
-		<meta itemprop="interactionType" content="https://schema.org/LikeAction">
-		<meta itemprop="userInteractionCount" content="{upvotes}">
-	</div>
+	<!-- IMPORT partials/topic/meta-tags.tpl -->
 
 	<div class="d-flex flex-column gap-3">
 		<div class="d-flex gap-2 flex-wrap flex-column flex-md-row {{{ if config.theme.centerHeaderElements }}}justify-content-center{{{ else }}}justify-content-between{{{ end }}}">
@@ -52,7 +36,7 @@
 						</a>
 						{{{each icons}}}<span class="lh-1">{@value}</span>{{{end}}}
 					</span>
-					{buildCategoryLabel(category, "a", "border")}
+					{{buildCategoryLabel(category, "a", "border")}}
 					<div data-tid="{./tid}" component="topic/tags" class="lh-1 tags tag-list d-flex flex-wrap hidden-xs hidden-empty gap-2"><!-- IMPORT partials/topic/tags.tpl --></div>
 					<div class="d-flex gap-2" component="topic/stats"><!-- IMPORT partials/topic/stats.tpl --></div>
 

package/templates/world.tpl

@@ -13,12 +13,12 @@
 
 <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")}
+		{{buildCategoryIcon(@value, "40px", "rounded-1 flex-shrink-0")}}
 		<h1 class="tracking-tight fs-2 fw-semibold mb-0 text-center">[[world:name]]</h1>
 	</div>
 	{{{ if ./descriptionParsed }}}
 	<p class="description text-secondary text-sm w-100 {{{ if config.theme.centerHeaderElements }}}text-center{{{ end }}}">
-		{./descriptionParsed}
+		{{./descriptionParsed}}
 	</p>
 	{{{ end }}}
 </div>
@@ -39,14 +39,14 @@
 								{{{ each categories }}}
 								<li class="flex-grow-1 align-items-start d-flex gap-2 p-1 mb-2 position-relative">
 									<div>
-										{buildCategoryIcon(@value, "24px", "rounded-1")}
+										{{buildCategoryIcon(@value, "24px", "rounded-1")}}
 									</div>
 									<div class="d-grid gap-0">
 										<div class="title fw-semibold">
 											<a class="text-reset stretched-link" href="{{{ if ./link }}}{./link}{{{ else }}}{config.relative_path}/category/{./slug}{{{ end }}}" itemprop="url">{../name}</a>
 										</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>
 								</li>