nodebb-theme-harmony 0.0.1

package/.eslintrc

@@ -0,0 +1,3 @@
+{
+	"extends": "nodebb"
+}

package/README.md

@@ -0,0 +1,8 @@
+Harmony theme for NodeBB
+====================
+
+The Harmony theme is the default theme for NodeBB for versions spanning v3.0.0 onwards.
+
+## Issues
+
+Issues are tracked in [the main project issue tracker](https://github.com/NodeBB/NodeBB/issues?q=is%3Aopen+is%3Aissue+label%3Athemes).

package/lib/controllers.js

@@ -0,0 +1,7 @@
+'use strict';
+
+const Controllers = module.exports;
+
+Controllers.renderAdminPage = (req, res) => {
+	res.render('admin/plugins/harmony', {});
+};

package/library.js

@@ -0,0 +1,51 @@
+'use strict';
+
+const controllers = require('./lib/controllers');
+
+const library = module.exports;
+
+library.init = async function (params) {
+	const { router } = params;
+	const routeHelpers = require.main.require('./src/routes/helpers');
+
+	routeHelpers.setupAdminPageRoute(router, '/admin/plugins/harmony', [], controllers.renderAdminPage);
+};
+
+library.addAdminNavigation = async function (header) {
+	header.plugins.push({
+		route: '/plugins/harmony',
+		icon: 'fa-paint-brush',
+		name: 'Harmony Theme',
+	});
+	return header;
+};
+
+library.defineWidgetAreas = async function (areas) {
+	// const locations = ['header', 'sidebar', 'footer'];
+	// const templates = [
+	// 	'categories.tpl', 'category.tpl', 'topic.tpl', 'users.tpl',
+	// 	'unread.tpl', 'recent.tpl', 'popular.tpl', 'top.tpl', 'tags.tpl', 'tag.tpl',
+	// 	'login.tpl', 'register.tpl',
+	// ];
+	// function capitalizeFirst(str) {
+	// 	return str.charAt(0).toUpperCase() + str.slice(1);
+	// }
+	// templates.forEach((template) => {
+	// 	locations.forEach((location) => {
+	// 		areas.push({
+	// 			name: `${capitalizeFirst(template.split('.')[0])} ${capitalizeFirst(location)}`,
+	// 			template: template,
+	// 			location: location,
+	// 		});
+	// 	});
+	// });
+
+	// areas = areas.concat([
+	// 	{
+	// 		name: 'Account Header',
+	// 		template: 'account/profile.tpl',
+	// 		location: 'header',
+	// 	},
+	// ]);
+	return areas;
+};

package/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "nodebb-theme-harmony",
+  "version": "0.0.1",
+  "nbbpm": {
+    "compatibility": "^3.0.0"
+  },
+  "description": "Harmony theme for NodeBB",
+  "main": "library.js",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/NodeBB/nodebb-theme-harmony"
+  },
+  "scripts": {
+    "lint": "eslint ."
+  },
+  "keywords": [
+    "nodebb",
+    "theme",
+    "forum",
+    "bootstrap",
+    "responsive"
+  ],
+  "contributors": [
+    {
+      "name": "Julian Lam",
+      "email": "julian@nodebb.org",
+      "url": "https://github.com/julianlam"
+    },
+    {
+      "name": "Barış Soner Uşaklı",
+      "email": "baris@nodebb.org",
+      "url": "https://github.com/barisusakli"
+    }
+  ],
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/NodeBB/nodebb-theme-harmony/issues"
+  },
+  "dependencies": {},
+  "devDependencies": {
+    "eslint": "^8.0.0",
+    "eslint-config-nodebb": "^0.2.0",
+    "eslint-plugin-import": "^2.24.2"
+  }
+}

package/plugin.json

@@ -0,0 +1,11 @@
+{
+	"id": "nodebb-theme-harmony",
+	"hooks": [
+		{ "hook": "static:app.load", "method": "init" },
+		{ "hook": "filter:admin.header.build", "method": "addAdminNavigation" },
+		{ "hook": "filter:widgets.getAreas", "method": "defineWidgetAreas" }
+	],
+	"modules": {
+		"../admin/plugins/harmony.js": "public/admin.js"
+	}
+}

package/public/.eslintrc

@@ -0,0 +1,3 @@
+{
+	"extends": "nodebb/public"
+}

package/public/admin.js

@@ -0,0 +1,15 @@
+'use strict';
+
+define('admin/plugins/harmony', ['settings'], function (Settings) {
+	var ACP = {};
+
+	ACP.init = function () {
+		Settings.load('harmony', $('.harmony-settings'));
+
+		$('#save').on('click', function () {
+			Settings.save('harmony', $('.harmony-settings'));
+		});
+	};
+
+	return ACP;
+});

package/renovate.json

@@ -0,0 +1,6 @@
+{
+  "$schema": "https://docs.renovatebot.com/renovate-schema.json",
+  "extends": [
+    "config:base"
+  ]
+}

package/scss/harmony.scss

@@ -0,0 +1,3 @@
+// @import "variables";
+// @import "style";
+// @import "mixins";

package/scss/overrides.scss

@@ -0,0 +1 @@
+// only overrides to bs5 variables here

package/templates/account/best.tpl

@@ -0,0 +1,3 @@
+<!-- THIS FILE IS STILL PERSONA -->
+
+<!-- IMPORT account/posts.tpl -->

package/templates/account/blocks.tpl

@@ -0,0 +1,35 @@
+<!-- THIS FILE IS STILL PERSONA -->
+
+<div class="account">
+	<!-- IMPORT partials/account/header.tpl -->
+	<h1>[[pages:account/blocks, {username}]]</h1>
+	<div class="row justify-content-end mb-2">
+		<div class="col-3">
+			<div class="dropdown">
+				<input class="form-control" type="text" id="user-search" placeholder="[[users:enter_username]]" data-bs-toggle="dropdown" autocomplete="off"/>
+
+				<ul class="dropdown-menu block-edit list-unstyled">
+					<li><a href="#" class="dropdown-item">[[admin/menu:search.start-typing]]</a></li>
+					{{{ each edit }}}
+					<li class="">
+						<div class="dropdown-item d-flex flex-nowrap gap-2 justify-content-between">
+							<div class="text-truncate">
+								<a href="{config.relative_path}/uid/{../uid}">{buildAvatar(edit, "24px", true)} {../username}</a>
+							</div>
+							<button class="btn btn-sm btn-primary text-nowrap" data-uid="{../uid}" data-action="toggle">[[user:block_toggle]]</button>
+						</div>
+					</li>
+					{{{ end }}}
+				</ul>
+			</div>
+		</div>
+	</div>
+
+	<div class="users row">
+		<div class="col-12">
+			<!-- IMPORT partials/users_list.tpl -->
+			<div class="alert alert-warning text-center"<!-- IF users.length --> style="display: none;"<!-- END -->>[[user:has_no_blocks]]</div>
+			<!-- IMPORT partials/paginator.tpl -->
+		</div>
+	</div>
+</div>

package/templates/account/bookmarks.tpl

@@ -0,0 +1,3 @@
+<!-- THIS FILE IS STILL PERSONA -->
+
+<!-- IMPORT account/posts.tpl -->

package/templates/account/categories.tpl

@@ -0,0 +1,30 @@
+<!-- THIS FILE IS STILL PERSONA -->
+
+<div class="account">
+	<!-- IMPORT partials/account/header.tpl -->
+
+	<div class="row">
+		<h1>{title}</h1>
+		<div class="col-lg-12 mb-2">
+			<div class="btn-group bottom-sheet" component="category/watch/all">
+				<button class="btn btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown" type="button">
+					<span>[[user:change_all]]</span>
+					<span class="caret"></span>
+				</button>
+				<ul class="dropdown-menu">
+					<li><a class="dropdown-item" href="#" component="category/watching" data-state="watching"><i class="fa fa-fw fa-inbox"></i> [[category:watching]]<p class="help-text"><small>[[category:watching.description]]</small></p></a></li>
+					<li><a class="dropdown-item" href="#" component="category/notwatching" data-state="notwatching"><i class="fa fa-fw fa-clock-o"></i> [[category:not-watching]]<p class="help-text"><small>[[category:not-watching.description]]</small></p></a></li>
+					<li><a class="dropdown-item" href="#" component="category/ignoring" data-state="ignoring"><i class="fa fa-fw fa-eye-slash"></i> [[category:ignoring]]<p class="help-text"><small>[[category:ignoring.description]]</small></p></a></li>
+				</ul>
+			</div>
+		</div>
+		<div class="col-lg-12">
+			<ul class="categories list-unstyled" itemscope itemtype="http://www.schema.org/ItemList">
+				{{{each categories}}}
+				<!-- IMPORT partials/account/category-item.tpl -->
+				{{{end}}}
+			</ul>
+			<!-- IMPORT partials/paginator.tpl -->
+		</div>
+	</div>
+</div>

package/templates/account/consent.tpl

@@ -0,0 +1,71 @@
+<!-- THIS FILE IS STILL PERSONA -->
+
+<div class="account">
+	<!-- IMPORT partials/account/header.tpl -->
+	<h2>[[user:consent.title]]</h2>
+	<p class="lead">[[user:consent.lead]]</p>
+	<p>[[user:consent.intro]]</p>
+
+	<hr />
+
+	<div class="row">
+		<div class="col-sm-6">
+			<!-- IF gdpr_consent -->
+			<div class="alert alert-success">
+				<i class="fa fa-check float-end fa-3x"></i>
+				[[user:consent.received]]
+			</div>
+			<!-- ELSE -->
+			<div class="alert alert-warning">
+				[[user:consent.not_received]]
+				<br /><br />
+				<div class="text-center">
+					<button class="btn btn-warning" data-action="consent">[[user:consent.give]]</button>
+				</div>
+			</div>
+			<!-- END -->
+			<div class="card">
+				<div class="card-body">
+					<p>[[user:consent.email_intro]]</p>
+					<!-- IF digest.enabled -->
+					<p>[[user:consent.digest_frequency, {digest.frequency}]]</p>
+					<!-- ELSE -->
+					[[user:consent.digest_off]]
+					<!-- END -->
+
+					<div class="text-center">
+						<a class="btn btn-outline-secondary" href="./settings">
+							<i class="fa fa-cog"></i>
+							[[pages:account/settings]]
+						</a>
+					</div>
+				</div>
+			</div>
+		</div>
+		<div class="col-sm-6">
+			<div class="card">
+				<div class="card-body">
+					<p><strong>[[user:consent.right_of_access]]</strong></p>
+					<p>[[user:consent.right_of_access_description]]</p>
+					<p><strong>[[user:consent.right_to_rectification]]</strong></p>
+					<p>[[user:consent.right_to_rectification_description]]</p>
+					<p><strong>[[user:consent.right_to_erasure]]</strong></p>
+					<p>[[user:consent.right_to_erasure_description]]</p>
+					<p><strong>[[user:consent.right_to_data_portability]]</strong></p>
+					<p>[[user:consent.right_to_data_portability_description]]</p>
+
+					<div class="btn-group-vertical d-grid">
+						<a data-action="export-profile" class="btn btn-outline-secondary">
+							<i class="fa fa-download"></i> [[user:consent.export_profile]]
+						</a>
+						<a data-action="export-posts" class="btn btn-outline-secondary">
+							<i class="fa fa-download"></i> [[user:consent.export_posts]]
+						</a>
+						<a data-action="export-uploads" class="btn btn-outline-secondary">
+							<i class="fa fa-download"></i> [[user:consent.export_uploads]]
+						</a>
+					</div>
+				</div>
+			</div>
+	</div>
+</div>

package/templates/account/controversial.tpl

@@ -0,0 +1,3 @@
+<!-- THIS FILE IS STILL PERSONA -->
+
+<!-- IMPORT account/posts.tpl -->

package/templates/account/downvoted.tpl

@@ -0,0 +1,3 @@
+<!-- THIS FILE IS STILL PERSONA -->
+
+<!-- IMPORT account/posts.tpl -->

package/templates/account/edit/password.tpl

@@ -0,0 +1,32 @@
+<!-- THIS FILE IS STILL PERSONA -->
+
+<div class="account">
+	<!-- IMPORT partials/account/header.tpl -->
+
+	<form class="edit-form">
+		<!-- disables autocomplete on FF --><input type="password" style="display:none">
+
+		<!-- IF isSelf -->
+		<div class="mb-2">
+			<label class="form-label fw-bold" for="inputCurrentPassword">[[user:current_password]]</label>
+			<input autocomplete="off" class="form-control" type="password" id="inputCurrentPassword" placeholder="[[user:current_password]]" value=""<!-- IF !hasPassword --> disabled<!-- ENDIF !hasPassword -->>
+		</div>
+		<!-- ENDIF isSelf -->
+
+		<div class="mb-2">
+			<label class="form-label fw-bold" for="inputNewPassword">[[user:new_password]]</label>
+			<input class="form-control" type="password" id="inputNewPassword" placeholder="[[user:password]]" value="">
+			<span class="form-feedback" id="password-notify"></span>
+		</div>
+
+		<div class="mb-2">
+			<label class="form-label fw-bold" for="inputNewPasswordAgain">[[user:confirm_password]]</label>
+			<input class="form-control" type="password" id="inputNewPasswordAgain" placeholder="[[user:confirm_password]]" value="">
+			<span class="form-feedback" id="password-confirm-notify"></span>
+		</div>
+
+		<div class="form-actions">
+			<button id="changePasswordBtn" class="btn btn-primary btn-block"><i class="hide fa fa-spinner fa-spin"></i> [[user:change_password]]</button>
+		</div>
+	</form>
+</div>

package/templates/account/edit/username.tpl

@@ -0,0 +1,28 @@
+<!-- THIS FILE IS STILL PERSONA -->
+
+<div class="account">
+	<!-- IMPORT partials/account/header.tpl -->
+
+	<form class="form-horizontal edit-form">
+		<div class="mb-2">
+			<label class="form-label fw-bold" for="inputNewUsername">[[user:username]]</label>
+			<input class="form-control" type="text" id="inputNewUsername" placeholder="[[user:username]]" value="{username}">
+		</div>
+
+		<!-- disables autocomplete on FF --><input type="password" style="display:none">
+
+		<!-- IF isSelf -->
+		<div class="mb-2">
+			<label class="form-label fw-bold" for="inputCurrentPassword">[[user:current_password]]</label>
+			<input autocomplete="off" class="form-control" type="password" id="inputCurrentPassword" placeholder="[[user:current_password]]" value=""<!-- IF !hasPassword --> disabled<!-- ENDIF !hasPassword -->>
+		</div>
+		<!-- ENDIF isSelf -->
+
+		<input type="hidden" name="uid" id="inputUID" value="{uid}" />
+
+		<br/>
+		<div class="form-actions">
+			<button id="submitBtn" class="btn btn-primary btn-block"><i class="hide fa fa-spinner fa-spin"></i> [[user:change_username]]</button>
+		</div>
+	</form>
+</div>

package/templates/account/edit.tpl

@@ -0,0 +1,137 @@
+<!-- THIS FILE IS STILL PERSONA -->
+
+<div class="account">
+	<!-- IMPORT partials/account/header.tpl -->
+	<!-- IF sso.length --><div><!-- ENDIF sso.length -->
+		<div class="row">
+			<div class="col-md-3 col-sm-4">
+				<div class="account-picture-block text-center">
+					<div class="row mb-3">
+						<div class="col-12 hidden-xs">
+							<!-- IF picture -->
+							<img id="user-current-picture" class="avatar avatar-rounded" style="--avatar-size: 128px;" src="{picture}" />
+							<!-- ELSE -->
+							<div class="avatar avatar-rounded" style="background-color: {icon:bgColor}; --avatar-size: 128px;">{icon:text}</div>
+							<!-- ENDIF picture -->
+						</div>
+					</div>
+					<ul class="list-group mb-3">
+						<!-- IF allowProfilePicture -->
+						<a id="changePictureBtn" href="#" class="list-group-item">[[user:change_picture]]</a>
+						<!-- ENDIF allowProfilePicture -->
+						<!-- IF !username:disableEdit -->
+						<a href="{config.relative_path}/user/{userslug}/edit/username" class="list-group-item">[[user:change_username]]</a>
+						<!-- ENDIF !username:disableEdit -->
+						<!-- IF !email:disableEdit -->
+						<a href="{config.relative_path}/user/{userslug}/edit/email" class="list-group-item">[[user:change_email]]</a>
+						<!-- ENDIF !email:disableEdit -->
+						<!-- IF canChangePassword -->
+						<a href="{config.relative_path}/user/{userslug}/edit/password" class="list-group-item">[[user:change_password]]</a>
+						<!-- ENDIF canChangePassword -->
+						{{{each editButtons}}}
+						<a href="{config.relative_path}{editButtons.link}" class="list-group-item">{editButtons.text}</a>
+						{{{end}}}
+					</ul>
+
+					<!-- IF config.requireEmailConfirmation -->
+					<!-- IF email -->
+					<!-- IF isSelf -->
+					<a id="confirm-email" href="#" class="btn btn-warning <!-- IF email:confirmed -->hide<!-- ENDIF email:confirmed -->">[[user:confirm_email]]</a><br/><br/>
+					<!-- ENDIF isSelf -->
+					<!-- ENDIF email -->
+					<!-- ENDIF config.requireEmailConfirmation -->
+
+					<!-- IF allowAccountDelete -->
+					<!-- IF isSelf -->
+					<a id="deleteAccountBtn" href="#" class="btn btn-danger">[[user:delete_account]]</a><br/><br/>
+					<!-- ENDIF isSelf -->
+					<!-- ENDIF allowAccountDelete -->
+
+				</div>
+			</div>
+
+			<div class="<!-- IF !sso.length -->col-md-9 col-sm-8<!-- ELSE -->col-md-5 col-sm-4<!-- ENDIF !sso.length -->">
+				<form role="form" component="profile/edit/form">
+					<div class="mb-2">
+						<label class="form-label fw-bold" for="fullname">[[user:fullname]]</label>
+						<input class="form-control" type="text" id="fullname" name="fullname" placeholder="[[user:fullname]]" value="{fullname}">
+					</div>
+					<!-- IF allowWebsite -->
+					<div class="mb-2">
+						<label class="form-label fw-bold" for="website">[[user:website]]</label>
+						<input class="form-control" type="text" id="website" name="website" placeholder="http://..." value="{website}">
+					</div>
+					<!-- ENDIF allowWebsite -->
+
+					<div class="mb-2">
+						<label class="form-label fw-bold" for="location">[[user:location]]</label>
+						<input class="form-control" type="text" id="location" name="location" placeholder="[[user:location]]" value="{location}">
+					</div>
+
+					<div class="mb-2">
+						<label class="form-label fw-bold" for="birthday">[[user:birthday]]</label>
+						<input class="form-control" type="date" id="birthday" name="birthday" value="{birthday}" placeholder="mm/dd/yyyy">
+					</div>
+
+					<div class="mb-2">
+						<label class="form-label fw-bold" for="groupTitle">[[user:grouptitle]]</label>
+
+						<select class="form-select" id="groupTitle" name="groupTitle" <!-- IF allowMultipleBadges --> size="{groupSelectSize}" multiple<!-- ENDIF allowMultipleBadges -->>
+							<option value="">[[user:no-group-title]]</option>
+							{{{each groups}}}
+							<!-- IF groups.userTitleEnabled -->
+							<option value="{groups.displayName}" <!-- IF groups.selected -->selected<!-- ENDIF groups.selected -->>{groups.userTitle}</option>
+							<!-- ENDIF groups.userTitleEnabled -->
+							{{{end}}}
+						</select>
+						<!-- IF allowMultipleBadges -->
+						<span>[[user:group-order-help]]</span>
+						<i role="button" component="group/order/up" class="fa fa-chevron-up"></i> <i role="button" component="group/order/down" class="fa fa-chevron-down"></i>
+						<!-- ENDIF -->
+					</div>
+
+					<!-- IF allowAboutMe -->
+					<div class="mb-2">
+						<label class="form-label fw-bold" for="aboutme">[[user:aboutme]]</label> <small><label id="aboutMeCharCountLeft"></label></small>
+						<textarea class="form-control" id="aboutme" name="aboutme" rows="5">{aboutme}</textarea>
+					</div>
+					<!-- ENDIF allowAboutMe -->
+
+					<!-- IF allowSignature -->
+					<!-- IF !disableSignatures -->
+					<div class="mb-2">
+						<label class="form-label fw-bold" for="signature">[[user:signature]]</label> <small><label id="signatureCharCountLeft"></label></small>
+						<textarea class="form-control" id="signature" name="signature" rows="5">{signature}</textarea>
+					</div>
+					<!-- ENDIF !disableSignatures -->
+					<!-- ENDIF allowSignature -->
+
+					<a id="submitBtn" href="#" class="btn btn-primary">[[global:save_changes]]</a>
+				</form>
+
+				<hr class="visible-xs visible-sm"/>
+			</div>
+
+			<!-- IF sso.length -->
+			<div class="col-md-4 col-sm-4">
+				<label>[[user:sso.title]]</label>
+				<div class="list-group">
+					{{{each sso}}}
+					<div class="list-group-item">
+						<!-- IF ../deauthUrl -->
+						<a data-component="{../component}" class="btn btn-outline-secondary btn-sm float-end" href="{../deauthUrl}">[[user:sso.dissociate]]</a>
+						<!-- END -->
+						<a data-component="{../component}" href="{../url}" target="<!-- IF ../associated -->_blank<!-- ELSE -->_top<!-- ENDIF ../associated -->">
+							<!-- IF ../icon --><i class="fa {../icon}"></i><!-- ENDIF ../icon -->
+							<!-- IF ../associated -->[[user:sso.associated]]<!-- ELSE -->[[user:sso.not-associated]]<!-- ENDIF ../associated -->
+							{../name}
+						</a>
+					</div>
+					{{{end}}}
+				</div>
+			</div>
+			<!-- ENDIF sso.length -->
+		</div>
+	<!-- IF sso.length --></div><!-- ENDIF sso.length -->
+</div>
+

package/templates/account/followers.tpl

@@ -0,0 +1,19 @@
+<!-- THIS FILE IS STILL PERSONA -->
+
+<div class="account">
+	<!-- IMPORT partials/account/header.tpl -->
+
+	<div class="users row">
+		<div class="col-12">
+		<h1>[[pages:{template.name}, {username}]]</h1>
+
+		<!-- IMPORT partials/users_list.tpl -->
+
+		<!-- IF !users.length -->
+		<div class="alert alert-warning text-center">[[user:has_no_follower]]</div>
+		<!-- ENDIF !users.length -->
+
+		<!-- IMPORT partials/paginator.tpl -->
+		</div>
+	</div>
+</div>

package/templates/account/following.tpl

@@ -0,0 +1,19 @@
+<!-- THIS FILE IS STILL PERSONA -->
+
+<div class="account">
+	<!-- IMPORT partials/account/header.tpl -->
+
+	<div class="users row">
+		<div class="col-12">
+		<h1>[[pages:{template.name}, {username}]]</h1>
+
+		<!-- IMPORT partials/users_list.tpl -->
+
+		<!-- IF !users.length -->
+		<div class="alert alert-warning text-center">[[user:follows_no_one]]</div>
+		<!-- ENDIF !users.length -->
+
+		<!-- IMPORT partials/paginator.tpl -->
+		</div>
+	</div>
+</div>

package/templates/account/groups.tpl

@@ -0,0 +1,19 @@
+<!-- THIS FILE IS STILL PERSONA -->
+
+<div class="account">
+	<!-- IMPORT partials/account/header.tpl -->
+
+	<div class="row">
+		<h1>[[pages:{template.name}, {username}]]</h1>
+
+		<div class="col-12 groups list">
+			<div component="groups/container" id="groups-list" class="row">
+				<!-- IF !groups.length -->
+				<div class="alert alert-warning text-center">[[groups:no_groups_found]]</div>
+				<!-- ELSE -->
+				<!-- IMPORT partials/groups/list.tpl -->
+				<!-- ENDIF !groups.length -->
+			</div>
+		</div>
+	</div>
+</div>

package/templates/account/ignored.tpl

@@ -0,0 +1,3 @@
+<!-- THIS FILE IS STILL PERSONA -->
+
+<!-- IMPORT account/topics.tpl -->