update theme to resolved missing fonts

also add harmony client side modules

lib/controllers.js

@@ -0,0 +1,29 @@
+'use strict';
+
+const Controllers = module.exports;
+
+const accountHelpers = require.main.require('./src/controllers/accounts/helpers');
+const helpers = require.main.require('./src/controllers/helpers');
+
+Controllers.renderAdminPage = (req, res) => {
+	res.render('admin/plugins/theme-quickstart', {
+		title: 'Quick Start Theme',
+	});
+};
+
+Controllers.renderThemeSettings = async (req, res, next) => {
+	const userData = await accountHelpers.getUserDataByUserSlug(req.params.userslug, req.uid, req.query);
+	if (!userData) {
+		return next();
+	}
+	const lib = require('./theme');
+	userData.theme = await lib.loadThemeConfig(userData.uid);
+
+	userData.title = '[[themes/harmony:settings.title]]';
+	userData.breadcrumbs = helpers.buildBreadcrumbs([
+		{ text: userData.username, url: `/user/${userData.userslug}` },
+		{ text: '[[themes/harmony:settings.title]]' },
+	]);
+
+	res.render('account/theme', userData);
+};

lib/theme.js

@@ -1,9 +1,84 @@
-
 'use strict';
 
-const Theme = module.exports;
+const nconf = require.main.require('nconf');
+const meta = require.main.require('./src/meta');
+const _ = require.main.require('lodash');
+const user = require.main.require('./src/user');
 
-Theme.defineWidgetAreas = async function (areas) {
+const controllers = require('./controllers');
+
+const library = module.exports;
+
+const defaults = {
+	enableQuickReply: 'on',
+	centerHeaderElements: 'off',
+	mobileTopicTeasers: 'off',
+	stickyToolbar: 'on',
+	autohideBottombar: 'on',
+	openSidebars: 'off',
+	chatModals: 'off',
+};
+
+library.init = async function (params) {
+	const { router, middleware } = params;
+	const routeHelpers = require.main.require('./src/routes/helpers');
+
+	routeHelpers.setupAdminPageRoute(router, '/admin/plugins/theme-quickstart', [], controllers.renderAdminPage);
+
+	routeHelpers.setupPageRoute(router, '/user/:userslug/theme', [
+		middleware.exposeUid,
+		middleware.ensureLoggedIn,
+		middleware.canViewUsers,
+		middleware.checkAccountPermissions,
+	], controllers.renderThemeSettings);
+
+	if (nconf.get('isPrimary') && process.env.NODE_ENV === 'production') {
+		setTimeout(buildSkins, 0);
+	}
+};
+
+async function buildSkins() {
+	try {
+		const plugins = require.main.require('./src/plugins');
+		await plugins.prepareForBuild(['client side styles']);
+		for (const skin of meta.css.supportedSkins) {
+			// eslint-disable-next-line no-await-in-loop
+			await meta.css.buildBundle(`client-${skin}`, true);
+		}
+		require.main.require('./src/meta/minifier').killAll();
+	} catch (err) {
+		console.error(err.stack);
+	}
+}
+
+library.addAdminNavigation = async function (header) {
+	header.plugins.push({
+		route: '/plugins/theme-quickstart',
+		icon: 'fa-paint-brush',
+		name: 'Theme Quick Start',
+	});
+	return header;
+};
+
+library.addProfileItem = async (data) => {
+	data.links.push({
+		id: 'theme',
+		route: 'theme',
+		icon: 'fa-paint-brush',
+		name: '[[themes/harmony:settings.title]]',
+		visibility: {
+			self: true,
+			other: false,
+			moderator: false,
+			globalMod: false,
+			admin: false,
+		},
+	});
+
+	return data;
+};
+
+library.defineWidgetAreas = async function (areas) {
 	const locations = ['header', 'sidebar', 'footer'];
 	const templates = [
 		'categories.tpl', 'category.tpl', 'topic.tpl', 'users.tpl',
@@ -63,3 +138,51 @@ Theme.defineWidgetAreas = async function (areas) {
 
 	return areas;
 };
+
+library.loadThemeConfig = async function (uid) {
+	const [themeConfig, userConfig] = await Promise.all([
+		meta.settings.get('harmony'),
+		user.getSettings(uid),
+	]);
+
+	const config = { ...defaults, ...themeConfig, ...(_.pick(userConfig, Object.keys(defaults))) };
+	config.enableQuickReply = config.enableQuickReply === 'on';
+	config.centerHeaderElements = config.centerHeaderElements === 'on';
+	config.mobileTopicTeasers = config.mobileTopicTeasers === 'on';
+	config.stickyToolbar = config.stickyToolbar === 'on';
+	config.autohideBottombar = config.autohideBottombar === 'on';
+	config.openSidebars = config.openSidebars === 'on';
+	config.chatModals = config.chatModals === 'on';
+	return config;
+};
+
+library.getThemeConfig = async function (config) {
+	config.theme = await library.loadThemeConfig(config.uid);
+	config.openDraftsOnPageLoad = false;
+	return config;
+};
+
+library.getAdminSettings = async function (hookData) {
+	if (hookData.plugin === 'harmony') {
+		hookData.values = {
+			...defaults,
+			...hookData.values,
+		};
+	}
+	return hookData;
+};
+
+library.saveUserSettings = async function (hookData) {
+	Object.keys(defaults).forEach((key) => {
+		if (hookData.data.hasOwnProperty(key)) {
+			hookData.settings[key] = hookData.data[key] || undefined;
+		}
+	});
+	return hookData;
+};
+
+library.filterMiddlewareRenderHeader = async function (hookData) {
+	hookData.templateData.bootswatchSkinOptions = await meta.css.getSkinSwitcherOptions(hookData.req.uid);
+	return hookData;
+};
+

plugin.json

@@ -1,7 +1,14 @@
 {
 	"id": "nodebb-theme-quickstart",
 	"hooks": [
-		{ "hook": "filter:widgets.getAreas", "method": "defineWidgetAreas" }
+		{ "hook": "static:app.load", "method": "init" },
+		{ "hook": "filter:admin.header.build", "method": "addAdminNavigation" },
+		{ "hook": "filter:widgets.getAreas", "method": "defineWidgetAreas" },
+		{ "hook": "filter:config.get", "method": "getThemeConfig" },
+		{ "hook": "filter:settings.get", "method": "getAdminSettings"},
+		{ "hook": "filter:user.saveSettings", "method": "saveUserSettings" },
+		{ "hook": "filter:user.profileMenu", "method": "addProfileItem" },
+		{ "hook": "filter:middleware.renderHeader", "method": "filterMiddlewareRenderHeader" }
 	],
 	"scripts": [
 		"public/client.js",
@@ -9,6 +16,11 @@
 	],
 	"templates": "templates",
 	"modules": {
-
+		"../admin/plugins/theme-quickstart.js": "../nodebb-theme-harmony/public/admin.js",
+		"../client/account/theme.js": "../nodebb-theme-harmony/public/settings.js"
+	},
+	"staticDirs": {
+		"inter": "node_modules/@fontsource/inter/files",
+		"poppins": "node_modules/@fontsource/poppins/files"
 	}
 }

templates/admin/plugins/theme-quickstart.tpl

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

theme.scss

@@ -1 +1,4 @@
+// override harmony font-path
+$font-path: "./plugins/nodebb-theme-quickstart";
+
 @import "../nodebb-theme-harmony/theme";