feat: manifest.json improvements from #8126 (#8264)

* feat: manifest.json improvements from #8126

* Fix short title placeholder

* use lowercase letters for hex colors

public/language/en-GB/admin/settings/general.json

@@ -1,6 +1,8 @@
 {
 	"site-settings": "Site Settings",
 	"title": "Site Title",
+	"title.short": "Short Title",
+	"title.short-placeholder": "If no short title is specified, the site title will be used",
 	"title.url": "URL",
 	"title.url-placeholder": "The URL of the site title",
 	"title.url-help": "When the title is clicked, send users to this address. If left blank, user will be sent to the forum index.",
@@ -31,5 +33,9 @@
 	"outgoing-links": "Outgoing Links",
 	"outgoing-links.warning-page": "Use Outgoing Links Warning Page",
 	"search-default-sort-by": "Search default sort by",
-	"outgoing-links.whitelist": "Domains to whitelist for bypassing the warning page"
+	"outgoing-links.whitelist": "Domains to whitelist for bypassing the warning page",
+	"site-colors": "Site Color Metadata",
+	"theme-color": "Theme Color",
+	"background-color": "Background Color",
+	"background-color-help": "Color used for splash screen background when website is installed as a PWA"
 }

src/controllers/admin/uploads.js

@@ -146,7 +146,7 @@ uploadsController.uploadFavicon = async function (req, res, next) {
 uploadsController.uploadTouchIcon = async function (req, res, next) {
 	const uploadedFile = req.files.files[0];
 	const allowedTypes = ['image/png'];
-	const sizes = [36, 48, 72, 96, 144, 192];
+	const sizes = [36, 48, 72, 96, 144, 192, 512];
 
 	if (validateUpload(res, uploadedFile, allowedTypes)) {
 		try {

src/controllers/index.js

@@ -247,9 +247,12 @@ Controllers.robots = function (req, res) {
 Controllers.manifest = function (req, res, next) {
 	var manifest = {
 		name: meta.config.title || 'NodeBB',
+		short_name: meta.config['title:short'] || meta.config.title || 'NodeBB',
 		start_url: nconf.get('relative_path') + '/',
 		display: 'standalone',
 		orientation: 'portrait',
+		theme_color: meta.config.themeColor || '#ffffff',
+		background_color: meta.config.backgroundColor || '#ffffff',
 		icons: [],
 	};
 
@@ -284,6 +287,11 @@ Controllers.manifest = function (req, res, next) {
 			sizes: '192x192',
 			type: 'image/png',
 			density: 4.0,
+		}, {
+			src: nconf.get('relative_path') + '/assets/uploads/system/touchicon-512.png',
+			sizes: '512x512',
+			type: 'image/png',
+			density: 10.0,
 		});
 	}
 	plugins.fireHook('filter:manifest.build', { req: req, res: res, manifest: manifest }, function (err, data) {

src/views/admin/settings/general.tpl

@@ -8,7 +8,8 @@
 		<form>
 			<label>[[admin/settings/general:title]]</label>
 			<input class="form-control" type="text" placeholder="[[admin/settings/general:title.name]]" data-field="title" />
-
+			<label for="title:short">[[admin/settings/general:title.short]]</label>
+			<input id="title:short" type="text" class="form-control" placeholder="[[admin/settings/general:title.short-placeholder]]" data-field="title:short" />
 			<label for="title:url">[[admin/settings/general:title.url]]</label>
 			<input id ="title:url" type="text" class="form-control" placeholder="[[admin/settings/general:title.url-placeholder]]" data-field="title:url" />
 			<p class="help-block">
@@ -157,4 +158,20 @@
 	</div>
 </div>
 
+<div class="row">
+	<div class="col-sm-2 col-xs-12 settings-header">[[admin/settings/general:site-colors]]</div>
+	<div class="col-sm-10 col-xs-12">
+		<form>
+			<label>[[admin/settings/general:theme-color]]</label>
+			<input type="text" class="form-control" placeholder="#ffffff" data-field="themeColor" />
+
+			<label>[[admin/settings/general:background-color]]</label>
+			<input type="text" class="form-control" placeholder="#ffffff" data-field="backgroundColor" />
+			<p class="help-block">
+				[[admin/settings/general:background-color-help]]
+			</p>
+		</form>
+	</div>
+</div>
+
 <!-- IMPORT admin/partials/settings/footer.tpl -->