nodebb-theme-harmony 0.0.1

package/templates/partials/topics_list.tpl

@@ -0,0 +1,118 @@
+<!-- THIS FILE IS STILL PERSONA -->
+
+<ul component="category" class="topic-list" itemscope itemtype="http://www.schema.org/ItemList" data-nextstart="{nextStart}" data-set="{set}">
+	{{{each topics}}}
+	<li component="category/topic" class="row clearfix category-item {function.generateTopicClass}" <!-- IMPORT partials/data/category.tpl -->>
+		<link itemprop="url" content="{config.relative_path}/topic/{../slug}" />
+		<meta itemprop="name" content="{function.stripTags, ../title}" />
+		<meta itemprop="itemListOrder" content="descending" />
+		<meta itemprop="position" content="{../index}" />
+		<a id="{../index}" data-index="{../index}" component="topic/anchor"></a>
+
+		<div class="col-md-6 col-sm-9 col-10 content">
+			<div class="avatar float-start me-2">
+				<!-- IF showSelect -->
+				<div class="select" component="topic/select">
+					{{{ if ./thumbs.length }}}
+					<img src="{./thumbs.0.url}" class="user-img not-responsive" />
+					{{{ else }}}
+					{buildAvatar(../user, "48px", true, "not-responsive")}
+					{{{ end }}}
+					<i class="fa fa-check"></i>
+				</div>
+				<!-- ENDIF showSelect -->
+
+				<!-- IF !showSelect -->
+				<a href="<!-- IF topics.user.userslug -->{config.relative_path}/user/{topics.user.userslug}<!-- ELSE -->#<!-- ENDIF topics.user.userslug -->" class="float-start">
+					{{{ if ./thumbs.length }}}
+					<img src="{./thumbs.0.url}" class="user-img not-responsive" />
+					{{{ else }}}
+					{buildAvatar(../user, "48px", true, "not-responsive")}
+					{{{ end }}}
+				</a>
+				<!-- ENDIF !showSelect -->
+			</div>
+
+			<h2 component="topic/header" class="title mb-1">
+				<i component="topic/scheduled" class="fa fa-clock-o {{{ if !topics.scheduled }}}hide{{{ end }}}" title="[[topic:scheduled]]"></i>
+				<i component="topic/pinned" class="fa fa-thumb-tack {{{ if (topics.scheduled || !topics.pinned) }}}hide{{{ end }}}" title="{{{ if !../pinExpiry }}}[[topic:pinned]]{{{ else }}}[[topic:pinned-with-expiry, {../pinExpiryISO}]]{{{ end }}}"></i>
+				<i component="topic/locked" class="fa fa-lock {{{ if !topics.locked }}}hide{{{ end }}}" title="[[topic:locked]]"></i>
+				<i component="topic/moved" class="fa fa-arrow-circle-right {{{ if !topics.oldCid }}}hide{{{ end }}}" title="[[topic:moved]]"></i>
+				{{{each topics.icons}}}{@value}{{{end}}}
+
+				{{{ if topics.noAnchor }}}
+				<span>{./title}</span>
+				{{{ else }}}
+				<a href="{config.relative_path}/topic/{./slug}{{{ if ./bookmark }}}/{./bookmark}{{{ end }}}">{./title}</a>
+				{{{ end }}}
+			</h2>
+			<div class="info">
+				<!-- IF !template.category -->
+				<div class="category-item d-inline-block">
+					{buildCategoryIcon(./category, "24px", "rounded-circle")}
+					<a class="text-muted" href="{config.relative_path}/category/{topics.category.slug}">{topics.category.name}</a>
+				</div>
+				&bull;
+				<!-- ENDIF !template.category -->
+
+				{{{ if topics.tags.length }}}
+				<span class="tag-list hidden-xs">
+					{{{ each ./tags }}}
+					<!-- IMPORT partials/topic/tag.tpl -->
+					{{{ end }}}
+					&bull;
+				</span>
+				{{{ end }}}
+
+				<span class="hidden-xs"><span class="timeago text-muted" title="{./timestampISO}"></span> &bull; <a class="text-muted" href="{{{ if ./user.userslug }}}{config.relative_path}/user/{./user.userslug}{{{ else }}}#{{{ end }}}">{./user.displayname}</a></span>
+
+				<span class="visible-xs-inline timeago text-muted" title="{{{ if ./teaser.timestampISO }}}{./teaser.timestampISO}{{{ else }}}{./timestampISO}{{{ end }}}"></span>
+			</div>
+		</div>
+
+		<div class="mobile-stat col-2 visible-xs text-end">
+			<span class="human-readable-number">{topics.postcount}</span> <a href="{config.relative_path}/topic/{topics.slug}/{topics.teaser.index}"><i class="fa fa-arrow-circle-right"></i></a>
+		</div>
+
+		<div class="col-md-1 hidden-sm hidden-xs stats stats-votes">
+			<!-- IF !reputation:disabled -->
+			<span class="human-readable-number" title="{topics.votes}">{topics.votes}</span><br />
+			<small>[[global:votes]]</small>
+			<!-- END -->
+		</div>
+
+		<div class="col-md-1 hidden-sm hidden-xs stats stats-postcount">
+			<span class="human-readable-number" title="{topics.postcount}">{topics.postcount}</span><br />
+			<small>[[global:posts]]</small>
+		</div>
+
+		<div class="col-md-1 hidden-sm hidden-xs stats stats-viewcount">
+			<span class="human-readable-number" title="{topics.viewcount}">{topics.viewcount}</span><br />
+			<small>[[global:views]]</small>
+		</div>
+
+		<div class="col-md-3 col-sm-3 teaser hidden-xs" component="topic/teaser">
+			<div class="lastpost background-link-container" style="border-color: {topics.category.bgColor}">
+				<a class="background-link" href="{config.relative_path}/topic/{topics.slug}/{topics.teaser.index}"></a>
+				<!-- IF topics.unreplied -->
+				<p>
+					[[category:no_replies]]
+				</p>
+				<!-- ELSE -->
+				<!-- IF topics.teaser.pid -->
+				<p>
+					<a href="{config.relative_path}/user/{topics.teaser.user.userslug}">{buildAvatar(topics.teaser.user, "24px", true, "not-responsive")}</a>
+					<a class="permalink text-muted" href="{config.relative_path}/topic/{topics.slug}/{topics.teaser.index}">
+						<span class="timeago" title="{topics.teaser.timestampISO}"></span>
+					</a>
+				</p>
+				<div class="post-content">
+					{topics.teaser.content}
+				</div>
+				<!-- ENDIF topics.teaser.pid -->
+				<!-- ENDIF topics.unreplied -->
+			</div>
+		</div>
+	</li>
+	{{{end}}}
+</ul>

package/templates/partials/users_list.tpl

@@ -0,0 +1,60 @@
+<!-- THIS FILE IS STILL PERSONA -->
+
+<ul id="users-container" class="users-container list-unstyled d-flex flex-wrap gap-2">
+{{{each users}}}
+<li class="users-box registered-user text-center pb-3" data-uid="{users.uid}" style="width: 102px;">
+	<a href="{config.relative_path}/user/{users.userslug}">{buildAvatar(users, "64px", true)}</a>
+
+	<div class="user-info">
+		<div class="text-nowrap text-truncate">
+			<span>
+				<i component="user/status" class="fa fa-circle status {users.status}" title="[[global:{users.status}]]"></i>
+				<a  href="{config.relative_path}/user/{users.userslug}">{users.username}</a>
+			</span>
+		</div>
+		<!-- IF section_online -->
+		<div class="lastonline">
+			<span class="timeago" title="{users.lastonlineISO}"></span>
+		</div>
+		<!-- ENDIF section_online -->
+
+		<!-- IF section_joindate -->
+		<div class="joindate">
+			<span class="timeago" title="{users.joindateISO}"></span>
+		</div>
+		<!-- ENDIF section_joindate -->
+
+		<!-- IF section_sort-reputation -->
+		<div class="reputation">
+			<i class="fa fa-star"></i>
+			<span class="formatted-number">{users.reputation}</span>
+		</div>
+		<!-- ENDIF section_sort-reputation -->
+
+		<!-- IF section_sort-posts -->
+		<div class="post-count">
+			<i class="fa fa-pencil"></i>
+			<span class="formatted-number">{users.postcount}</span>
+		</div>
+		<!-- ENDIF section_sort-posts -->
+
+		<!-- IF section_flagged -->
+		<div class="flag-count">
+			<i class="fa fa-flag"></i>
+			<span><a class="formatted-number" href="{config.relative_path}/flags?targetUid={users.uid}">{users.flags}</a></span>
+		</div>
+		<!-- ENDIF section_flagged -->
+	</div>
+</li>
+{{{end}}}
+<!-- IF anonymousUserCount -->
+<li class="users-box anon-user text-center pb-3" style="width: 102px;">
+	<span class="avatar avatar-rounded text-bg-secondary" component="avatar/icon" style="--avatar-size: 64px;">G</span>
+	<br/>
+	<div class="user-info">
+		<span id="online_anon_count">{anonymousUserCount}</span>
+		<span>[[global:guests]]</span>
+	</div>
+</li>
+<!-- ENDIF anonymousUserCount -->
+</ul>

package/templates/partials/users_list_menu.tpl

@@ -0,0 +1,23 @@
+<!-- THIS FILE IS STILL PERSONA -->
+
+<ul class="nav nav-pills">
+	<li class="nav-item">
+		<a class="nav-link" href="{config.relative_path}/users?section=online">[[global:online]]</a>
+	</li>
+	<li class="nav-item">
+		<a class="nav-link" href="{config.relative_path}/users?section=sort-posts">[[users:top_posters]]</a>
+	</li>
+	{{{ if !reputation:disabled }}}
+	<li class="nav-item">
+		<a class="nav-link" href="{config.relative_path}/users?section=sort-reputation">[[users:most_reputation]]</a>
+	</li>
+	{{{ end }}}
+	{{{ if isAdminOrGlobalMod }}}
+	<li class="nav-item">
+		<a class="nav-link" href="{config.relative_path}/users?section=flagged">[[users:most_flags]]</a>
+	</li>
+	<li class="nav-item">
+		<a class="nav-link" href="{config.relative_path}/users?section=banned">[[user:banned]]</a>
+	</li>
+	{{{ end }}}
+</ul>

package/templates/popular.tpl

@@ -0,0 +1,37 @@
+<!-- THIS FILE IS STILL PERSONA -->
+
+<!-- IMPORT partials/breadcrumbs.tpl -->
+<div data-widget-area="header">
+	{{{each widgets.header}}}
+	{{widgets.header.html}}
+	{{{end}}}
+</div>
+<div class="popular">
+	<div class="topic-list-header sticky-top btn-toolbar justify-content-between py-2 mb-2 gap-1">
+		<div class="d-flex gap-1 align-items-stretch">
+			{{{ if canPost }}}
+			<!-- IMPORT partials/buttons/newTopic.tpl -->
+			{{{ else }}}
+			<a component="category/post/guest" href="{config.relative_path}/login" class="btn btn-primary">[[category:guest-login-post]]</a>
+			{{{ end }}}
+		</div>
+		<div class="d-flex gap-1 align-items-stretch">
+		<!-- IMPORT partials/topic-terms.tpl -->
+		<!-- IMPORT partials/topic-filters.tpl -->
+		<!-- IMPORT partials/category-filter-right.tpl -->
+		<!-- IMPORT partials/category/tools.tpl -->
+		</div>
+	</div>
+
+	<div class="category">
+		{{{ if !topics.length }}}
+		<div class="alert alert-warning" id="category-no-topics">[[recent:no_popular_topics]]</div>
+		{{{ end }}}
+
+		<!-- IMPORT partials/topics_list.tpl -->
+
+		{{{ if config.usePagination }}}
+		<!-- IMPORT partials/paginator.tpl -->
+		{{{ end }}}
+	</div>
+</div>

package/templates/recent.tpl

@@ -0,0 +1,39 @@
+<!-- THIS FILE IS STILL PERSONA -->
+
+<!-- IMPORT partials/breadcrumbs.tpl -->
+<div data-widget-area="header">
+	{{{each widgets.header}}}
+	{{widgets.header.html}}
+	{{{end}}}
+</div>
+<div class="recent">
+	<div class="topic-list-header sticky-top btn-toolbar justify-content-between py-2 mb-2 gap-1">
+		<div class="d-flex gap-1 align-items-stretch">
+			{{{ if canPost }}}
+			<!-- IMPORT partials/buttons/newTopic.tpl -->
+			{{{ else }}}
+			<a component="category/post/guest" href="{config.relative_path}/login" class="btn btn-primary">[[category:guest-login-post]]</a>
+			{{{ end }}}
+			<a href="{config.relative_path}/{selectedFilter.url}{querystring}" class="d-inline-block">
+				<div class="alert alert-warning h-100 m-0 px-2 py-1 d-flex align-items-center hide" id="new-topics-alert"></div>
+			</a>
+		</div>
+		<div class="d-flex gap-1 align-items-stretch">
+		<!-- IMPORT partials/topic-filters.tpl -->
+		<!-- IMPORT partials/category-filter-right.tpl -->
+		<!-- IMPORT partials/category/tools.tpl -->
+		</div>
+	</div>
+
+	<div class="category">
+		<!-- IF !topics.length -->
+		<div class="alert alert-warning" id="category-no-topics">[[recent:no_recent_topics]]</div>
+		<!-- ENDIF !topics.length -->
+
+		<!-- IMPORT partials/topics_list.tpl -->
+
+		<!-- IF config.usePagination -->
+			<!-- IMPORT partials/paginator.tpl -->
+		<!-- ENDIF config.usePagination -->
+	</div>
+</div>

package/templates/register.tpl

@@ -0,0 +1,89 @@
+<!-- THIS FILE IS STILL PERSONA -->
+
+<!-- IMPORT partials/breadcrumbs.tpl -->
+<div data-widget-area="header">
+	{{{each widgets.header}}}
+	{{widgets.header.html}}
+	{{{end}}}
+</div>
+<div class="row register">
+	<div class="row {{{ if widgets.sidebar.length }}}col-lg-9 col-sm-12{{{ else }}}col-lg-12{{{ end }}}">
+		<div class="{register_window:spansize}">
+			<div class="register-block">
+				<div class="alert alert-danger{{{ if !error }}} hidden{{{ end }}}" id="register-error-notify" >
+					<strong>[[error:registration-error]]</strong>
+					<p>{error}</p>
+				</div>
+				<form component="register/local" class="form-horizontal" role="form" action="{config.relative_path}/register" method="post">
+					<div class="row mb-3">
+						<label for="username" class="col-lg-2 col-form-label">[[register:username]]</label>
+						<div class="col-lg-10">
+							<input class="form-control" type="text" placeholder="[[register:username_placeholder]]" name="username" id="username" autocorrect="off" autocapitalize="off" autocomplete="off" />
+							<span class="register-feedback" id="username-notify"></span>
+							<span class="form-text">[[register:help.username_restrictions, {minimumUsernameLength}, {maximumUsernameLength}]]</span>
+						</div>
+					</div>
+					<div class="row mb-2">
+						<label for="password" class="col-lg-2 col-form-label">[[register:password]]</label>
+						<div class="col-lg-10">
+							<input class="form-control" type="password" placeholder="[[register:password_placeholder]]" name="password" id="password" />
+							<span class="register-feedback" id="password-notify"></span>
+							<span class="form-text">[[register:help.minimum_password_length, {minimumPasswordLength}]]</span>
+							<p id="caps-lock-warning" class="text-danger hidden">
+								<i class="fa fa-exclamation-triangle"></i> [[login:caps-lock-enabled]]
+							</p>
+						</div>
+					</div>
+					<div class="row mb-2">
+						<label for="password-confirm" class="col-lg-2 col-form-label">[[register:confirm_password]]</label>
+						<div class="col-lg-10">
+							<input class="form-control" type="password" placeholder="[[register:confirm_password_placeholder]]" name="password-confirm" id="password-confirm" />
+							<span class="register-feedback" id="password-confirm-notify"></span>
+						</div>
+					</div>
+
+					{{{each regFormEntry}}}
+					<div class="row mb-2">
+						<label for="register-{regFormEntry.styleName}" class="col-lg-2 col-form-label">{regFormEntry.label}</label>
+						<div id="register-{regFormEntry.styleName}" class="col-lg-10">
+							{{regFormEntry.html}}
+						</div>
+					</div>
+					{{{end}}}
+
+					<div class="row">
+						<div class="offset-lg-2 col-lg-10">
+							<button class="btn btn-primary btn-lg" id="register" type="submit">[[register:register_now_button]]</button>
+						</div>
+					</div>
+					<input id="token" type="hidden" name="token" value="" />
+					<input id="noscript" type="hidden" name="noscript" value="true" />
+					<input type="hidden" name="_csrf" value="{config.csrf_token}" />
+				</form>
+			</div>
+		</div>
+
+		{{{ if alternate_logins }}}
+		<div class="col-md-6">
+			<div class="alt-register-block">
+				<h4>[[register:alternative_registration]]</h4>
+				<ul class="alt-logins">
+					{{{each authentication}}}
+					<li class="{authentication.name}"><a rel="nofollow noopener noreferrer" target="_top" href="{config.relative_path}{authentication.url}"><i class="fa {authentication.icon} fa-3x"></i></i></a></li>
+					{{{end}}}
+				</ul>
+			</div>
+		</div>
+		{{{ 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>

package/templates/search.tpl

@@ -0,0 +1,185 @@
+<!-- THIS FILE IS STILL PERSONA -->
+
+<!-- IMPORT partials/breadcrumbs.tpl -->
+
+<div class="search">
+	<div class="row">
+		<div class="{{{ if widgets.sidebar.length }}}col-lg-9 col-sm-12{{{ else }}}col-lg-12{{{ end }}}">
+			<form id="advanced-search" class="mb-3">
+				<div class="mb-3">
+					<div class="row">
+						<div class="col-md-5">
+							<label class="form-label">[[global:search]]</label>
+							<input type="text" class="form-control" id="search-input" placeholder="[[global:search]]">
+						</div>
+						<div class="col-md-3">
+							<label class="form-label">[[search:in]]</label>
+							<select id="search-in" class="form-select">
+								<option value="titlesposts">[[search:titles-posts]]</option>
+								<option value="titles">[[search:titles]]</option>
+								<option value="posts">[[global:posts]]</option>
+								<option value="categories">[[global:header.categories]]</option>
+								{{{if privileges.search:users}}}
+								<option value="users">[[global:users]]</option>
+								{{{end}}}
+								{{{if privileges.search:tags}}}
+								<option value="tags">[[tags:tags]]</option>
+								{{{end}}}
+							</select>
+						</div>
+						<div class="col-md-2">
+							<label class="form-label">[[search:match-words]]</label>
+							<select id="match-words-filter" class="form-select">
+								<option value="all">[[search:all]]</option>
+								<option value="any">[[search:any]]</option>
+							</select>
+						</div>
+						<div class="col-md-2">
+							<label class="form-label">&nbsp;</label>
+							<button type="submit" class="btn btn-primary form-control">[[global:search]]</button>
+						</div>
+					</div>
+				</div>
+
+				<div class="card">
+					<h5 class="card-header pointer" data-bs-toggle="collapse" data-bs-target=".search-options">
+						<i class="fa fa-sort"></i> [[search:advanced-search]]
+					</h5>
+					<div class="collapse search-options {{{ if expandSearch }}}show{{{ end }}}">
+					<div class="card-body">
+						<div class="mb-2 post-search-item">
+							<div class="row">
+								<div class="col-md-6">
+									<label class="form-label">[[search:in-categories]]</label>
+									<select multiple class="form-select" id="posted-in-categories" size="{allCategoriesCount}">
+										{{{each allCategories}}}
+										<option value="{allCategories.value}">{allCategories.text}</option>
+										{{{end}}}
+									</select>
+									<div class="form-check">
+										<input id="search-children" class="form-check-input" type="checkbox"/>
+										<label class="form-check-label" for="search-children">[[search:search-child-categories]]</label>
+									</div>
+								</div>
+								<div class="col-md-6">
+									<div class="mb-2 post-search-item">
+										<div class="row">
+											<div class="col-md-6">
+												<label class="form-label">[[search:posted-by]]</label>
+												<div>
+													<input type="text" class="form-control" id="posted-by-user">
+												</div>
+											</div>
+											<div class="col-md-6">
+												<label class="form-label">[[search:has-tags]]</label>
+												<div>
+													<input type="text" class="form-control" id="has-tags">
+												</div>
+											</div>
+										</div>
+									</div>
+
+									<div class="mb-2 post-search-item">
+										<label class="form-label">[[search:reply-count]]</label>
+										<div class="row">
+											<div class="col-md-6">
+												<select id="reply-count-filter" class="form-select">
+													<option value="atleast">[[search:at-least]]</option>
+													<option value="atmost">[[search:at-most]]</option>
+												</select>
+											</div>
+											<div class="col-md-6">
+												<input type="text" class="form-control" id="reply-count">
+											</div>
+										</div>
+									</div>
+
+									<div class="mb-2 post-search-item">
+										<label class="form-label">[[search:post-time]]</label>
+										<div class="row">
+											<div class="col-md-6">
+												<select id="post-time-filter" class="form-select">
+													<option value="newer">[[search:newer-than]]</option>
+													<option value="older">[[search:older-than]]</option>
+												</select>
+											</div>
+											<div class="col-md-6">
+												<select id="post-time-range" class="form-select">
+													<option value="">[[search:any-date]]</option>
+													<option value="86400">[[search:yesterday]]</option>
+													<option value="604800">[[search:one-week]]</option>
+													<option value="1209600">[[search:two-weeks]]</option>
+													<option value="2592000">[[search:one-month]]</option>
+													<option value="7776000">[[search:three-months]]</option>
+													<option value="15552000">[[search:six-months]]</option>
+													<option value="31104000">[[search:one-year]]</option>
+												</select>
+											</div>
+										</div>
+									</div>
+
+									<div class="mb-2 post-search-item">
+										<label class="form-label">[[search:sort-by]]</label>
+										<div class="row">
+											<div class="col-md-6">
+												<select id="post-sort-by" class="form-select">
+													<option value="relevance">[[search:relevance]]</option>
+													<option value="timestamp">[[search:post-time]]</option>
+													<option value="votes">[[search:votes]]</option>
+													<option value="topic.lastposttime">[[search:last-reply-time]]</option>
+													<option value="topic.title">[[search:topic-title]]</option>
+													<option value="topic.postcount">[[search:number-of-replies]]</option>
+													<option value="topic.viewcount">[[search:number-of-views]]</option>
+													<option value="topic.votes">[[search:topic-votes]]</option>
+													<option value="topic.timestamp">[[search:topic-start-date]]</option>
+													<option value="user.username">[[search:username]]</option>
+													<option value="category.name">[[search:category]]</option>
+												</select>
+											</div>
+											<div class="col-md-6">
+												<select id="post-sort-direction" class="form-select">
+													<option value="desc">[[search:descending]]</option>
+													<option value="asc">[[search:ascending]]</option>
+												</select>
+											</div>
+										</div>
+									</div>
+
+									<div class="mb-2 post-search-item">
+										<label class="form-label">[[search:show-results-as]]</label>
+										<div class="radio">
+											<label>
+												<input type="radio" name="options" id="show-as-posts" checked>
+												[[global:posts]]
+											</label>
+										</div>
+										<div class="radio">
+											<label>
+												<input type="radio" name="options" id="show-as-topics">
+												[[global:topics]]
+											</label>
+										</div>
+									</div>
+								</div>
+							</div>
+						</div>
+
+						<div class="btn-group">
+							<button type="submit" class="btn btn-primary">[[global:search]]</button>
+							<a class="btn btn-outline-secondary" id="save-preferences" href="#">[[search:save-preferences]]</a>
+							<a class="btn btn-outline-secondary" id="clear-preferences" href="#">[[search:clear-preferences]]</a>
+						</div>
+					</div>
+					</div>
+				</div>
+			</form>
+
+			<!-- IMPORT partials/search-results.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>

package/templates/tag.tpl

@@ -0,0 +1,35 @@
+<!-- THIS FILE IS STILL PERSONA -->
+
+<!-- IMPORT partials/breadcrumbs.tpl -->
+<div data-widget-area="header">
+	{{{each widgets.header}}}
+	{{widgets.header.html}}
+	{{{end}}}
+</div>
+<div class="tag">
+	<div class="topic-list-header sticky-top btn-toolbar justify-content-between py-2 mb-2 gap-1">
+		<div class="d-flex gap-1 align-items-stretch">
+			{{{ if loggedIn }}}
+			<!-- IMPORT partials/buttons/newTopic.tpl -->
+			{{{ else }}}
+			<a component="category/post/guest" href="{config.relative_path}/login" class="btn btn-primary">[[category:guest-login-post]]</a>
+			{{{ end }}}
+		</div>
+		<div class="d-flex gap-1 align-items-stretch">
+		<!-- IMPORT partials/category-filter-right.tpl -->
+		<!-- IMPORT partials/category/tools.tpl -->
+		</div>
+	</div>
+
+	<div class="category">
+		{{{ if !topics.length }}}
+		<div class="alert alert-warning">[[tags:no_tag_topics]]</div>
+		{{{ end }}}
+
+		<!-- IMPORT partials/topics_list.tpl -->
+		<button id="load-more-btn" class="btn btn-primary hide">[[unread:load_more]]</button>
+		{{{ if config.usePagination }}}
+		<!-- IMPORT partials/paginator.tpl -->
+		{{{ end }}}
+	</div>
+</div>

package/templates/tags.tpl

@@ -0,0 +1,34 @@
+<!-- THIS FILE IS STILL PERSONA -->
+
+<!-- IMPORT partials/breadcrumbs.tpl -->
+<div data-widget-area="header">
+	{{{each widgets.header}}}
+	{{widgets.header.html}}
+	{{{end}}}
+</div>
+<div class="tags">
+	{{{ if displayTagSearch }}}
+	{{{ if tags.length }}}
+	<div class="row justify-content-end mb-3">
+		<div class="col-lg-3">
+			<div class="input-group">
+				<input type="text" class="form-control" placeholder="[[global:search]]" id="tag-search">
+				<button class="btn btn-primary" type="button">
+					<i class="fa fa-search"></i>
+				</button>
+			</div>
+		</div>
+	</div>
+	{{{ end }}}
+	{{{ end }}}
+
+	{{{ if !tags.length }}}
+	<div class="alert alert-warning">[[tags:no_tags]]</div>
+	{{{ end }}}
+
+	<div class="category row">
+		<div class="col-md-12 clearfix tag-list" data-nextstart="{nextStart}">
+			<!-- IMPORT partials/tags_list.tpl -->
+		</div>
+	</div>
+</div>

package/templates/top.tpl

@@ -0,0 +1,37 @@
+<!-- THIS FILE IS STILL PERSONA -->
+
+<!-- IMPORT partials/breadcrumbs.tpl -->
+<div data-widget-area="header">
+	{{{each widgets.header}}}
+	{{widgets.header.html}}
+	{{{end}}}
+</div>
+<div class="top">
+	<div class="topic-list-header sticky-top btn-toolbar justify-content-between py-2 mb-2 gap-1">
+		<div class="d-flex gap-1 align-items-stretch">
+			{{{ if canPost }}}
+			<!-- IMPORT partials/buttons/newTopic.tpl -->
+			{{{ else }}}
+			<a component="category/post/guest" href="{config.relative_path}/login" class="btn btn-primary">[[category:guest-login-post]]</a>
+			{{{ end }}}
+		</div>
+		<div class="d-flex gap-1 align-items-stretch">
+		<!-- IMPORT partials/topic-terms.tpl -->
+		<!-- IMPORT partials/topic-filters.tpl -->
+		<!-- IMPORT partials/category-filter-right.tpl -->
+		<!-- IMPORT partials/category/tools.tpl -->
+		</div>
+	</div>
+
+	<div class="category">
+		{{{ if !topics.length }}}
+		<div class="alert alert-warning" id="category-no-topics">[[top:no_top_topics]]</div>
+		{{{ end }}}
+
+		<!-- IMPORT partials/topics_list.tpl -->
+
+		{{{ if config.usePagination }}}
+		<!-- IMPORT partials/paginator.tpl -->
+		{{{ end }}}
+	</div>
+</div>