Redesign custom theme selection, again

package-lock.json

@@ -2738,8 +2738,8 @@
       "integrity": "sha512-q0M/9eZHzmr0AulXyPwNfZjtwZ/RBZlbN3K3CErVrk50T2ASYI7Bye0EvekFY3IP1Nt2DHu0re+V2ZHIpMkuWg=="
     },
     "pinski": {
-      "version": "github:cloudrac3r/pinski#059bfb3c07f36b7e175bce52e4715646b6acfebd",
+      "version": "github:cloudrac3r/pinski#6273f81facd1e753e021910f7aa6e4384cf60631",
-      "from": "github:cloudrac3r/pinski#059bfb3c07f36b7e175bce52e4715646b6acfebd",
+      "from": "github:cloudrac3r/pinski#6273f81facd1e753e021910f7aa6e4384cf60631",
       "requires": {
         "mime": "^2.4.4",
         "pug": "^2.0.3",
@@ -4909,9 +4909,9 @@
       }
     },
     "ws": {
-      "version": "7.2.5",
+      "version": "7.3.0",
-      "resolved": "https://registry.npmjs.org/ws/-/ws-7.2.5.tgz",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-7.3.0.tgz",
-      "integrity": "sha512-C34cIU4+DB2vMyAbmEKossWq2ZQDr6QEyuuCzWrM9zfw1sGc0mYiJ0UnG9zzNykt49C2Fi34hvr2vssFQRS6EA=="
+      "integrity": "sha512-iFtXzngZVXPGgpTlP1rBqsUK82p9tKqsWRPg5L56egiljujJT3vGAYnHANvFxBieXrTFavhzhxW52jnaWV+w2w=="
     },
     "xml-js": {
       "version": "1.6.11",

package.json

@@ -19,7 +19,7 @@
     "mixin-deep": "^2.0.1",
     "node-dir": "^0.1.17",
     "node-fetch": "^2.6.0",
-    "pinski": "github:cloudrac3r/pinski#059bfb3c07f36b7e175bce52e4715646b6acfebd",
+    "pinski": "github:cloudrac3r/pinski#6273f81facd1e753e021910f7aa6e4384cf60631",
     "pug": "^2.0.4",
     "semver": "^7.2.1",
     "sharp": "^0.25.2",

src/lib/constants.js

@@ -68,20 +68,39 @@ let constants = {
 		feed_disabled_max_age: 2*24*60*60 // 2 days
 	},
 
-	// Enabled themes. `file` is the filename without extension. `name` is the display name on the settings page.
+	// Themes. `file` is the filename without extension. `name` is the display name on the settings page.
 	// If you make your own theme, I encourage you to submit a pull request for it!
-	themes: [
+	themes: {
+		// If you want to disable some official themes, then create an entry that replaces this array in config.js.
+		// Format: `{file: string, name: string}[]`
+		official: [
 			{file: "classic", name: "Classic"},
 			{file: "blue", name: "Classic blue"}
 		],
+		// To add your own theme, create an entry that replaces this array in config.js, then add your theme to it.
+		// Format: `{file: string, name: string}[]`
+		custom: [
+		],
+		// If you want your custom theme to be the default for your instance, don't forget to set it here!
+		// For good UI, you probably also want the default entry to be the first thing in the selection box.
+		default: "classic",
+		// This sets which order the themes appear in in the list on the settings page.
+		sort: {
+			// This sets whether the order is custom + official, or official + custom
+			order: "custom_first", // "custom_first", "official_first"
+			// To selectively override that order, add things to this array.
+			// If you set it to `["blue", "midnight"]` then the theme with file name `blue` will be hoisted to the top,
+			// the theme with file name `midnight` will be below it, and all other themes will appear below those.
+			// Format: `string[]`
+			manual: []
+		},
+		// These arrays should be empty, do not edit them!
+		collated: [],
+		collatedFiles: []
+	},
 
 	user_settings: [
 		{
-			name: "theme",
-			default: "classic",
-			boolean: false,
-			replaceEmptyWithDefault: true
-		},{
 			name: "language",
 			default: "en",
 			boolean: false,
@@ -245,4 +264,28 @@ if (process.env.BIBLIOGRAM_CONFIG) { // presence of environment variable BIBLIOG
 	const config = require("../../config")
 	constants = md(constants, config)
 }
+
+// Set theme settings
+constants.user_settings.push({
+	name: "theme",
+	default: constants.themes.default,
+	boolean: false,
+	replaceEmptyWithDefault: true
+})
+let pool
+if (constants.themes.sort.order === "custom_first") {
+	pool = [].concat(constants.themes.custom, constants.themes.official)
+} else if (constants.themes.sort.order === "official_first") {
+	pool = [].concat(constants.themes.official, constants.themes.custom)
+}
+for (const file of constants.themes.sort.manual) {
+	const index = pool.findIndex(row => row.file === file)
+	if (index !== -1) {
+		const removed = pool.splice(index, 1)[0]
+		constants.themes.collated.push(removed)
+	}
+}
+constants.themes.collated = constants.themes.collated.concat(pool)
+constants.themes.collatedFiles = constants.themes.collatedFiles.concat(pool.map(row => row.file))
+
 module.exports = constants

src/site/pug/includes/head.pug

@@ -1,8 +1,4 @@
 meta(charset="utf-8")
-
-- let theme = settings ? settings.theme : "classic"
-link(rel="stylesheet" type="text/css" href=getStaticURL("sass", `${theme}.sass`))
-
 meta(name="viewport" content="width=device-width, initial-scale=1")
 link(rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png")
 link(rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png")
@@ -11,3 +7,25 @@ link(rel="manifest" href="/site.webmanifest")
 link(rel="mask-icon" href="/safari-pinned-tab.svg" color="#303030")
 meta(name="msapplication-TileColor" content="#00aba9")
 meta(name="theme-color" content="#ffffff")
+
+-
+	let themeURL
+	let theme =
+		settings
+			? settings.theme
+		: constants
+			? constants.themes.default
+		: "classic"
+	try {
+		themeURL = getStaticURL("sass", `${theme}.sass`)
+	} catch (e) {}
+
+if themeURL
+	link(rel="stylesheet" type="text/css" href=themeURL)
+else
+	div(style="font-size: 22px; padding: 40px 20px; white-space: pre-line; border-bottom: 3px solid black").
+		Your theme value "#{theme}" wasn't understood.
+		There is no loaded theme with that name.
+		Please #[a(href="/settings") go to the settings page] and select a different theme.
+		If that doesn't help, #[a(href="https://github.com/cloudrac3r/bibliogram/issues/new") report a bug.]
+		In your bug report, tell us which website address you saw this on, and what your theme value is.

src/site/pug/settings.pug

@@ -65,7 +65,7 @@ html
 					+checkbox("spa", "Fast navigation", "Enabled", false)
 
 				+fieldset("Appearance")
-					+select("theme", "Theme", false, constants.themes.map(entry => ({value: entry.file, text: entry.name})))
+					+select("theme", "Theme", false, constants.themes.collated.map(entry => ({value: entry.file, text: entry.name})))
 
 					+checkbox("display_top_nav", "Display top bar", "Always", false)
 

src/site/server.js

@@ -21,8 +21,9 @@ subdirs("pug", async (err, dirs) => {
 	await require("../lib/utils/upgradedb")()
 
 	pinski.setNotFoundTarget("/404")
-	for (const theme of constants.themes) {
+	Object.assign(pinski.pugDefaultLocals, {constants})
-		pinski.addRoute(`/static/css/${theme.file}.css`, `sass/${theme.file}.sass`, "sass")
+	for (const file of constants.themes.collatedFiles) {
+		pinski.addRoute(`/static/css/${file}.css`, `sass/${file}.sass`, "sass")
 	}
 	pinski.addRoute("/settings", "pug/settings.pug", "pug")
 	pinski.addPugDir("pug", dirs)