Server: Add version number on website

packages/server/public/css/main.css

@@ -10,10 +10,6 @@ input.form-control {
 	margin-bottom: 0.5rem;
 }
 
-.navbar {
-	padding: 1rem 3rem;
-}
-
 .navbar .logo-container {
 	align-items: center;
 }
@@ -34,7 +30,7 @@ input.form-control {
 }
 
 .main {
-	padding: 0 3rem;
+	padding: 2rem 3rem;
 }
 
 table.table .nowrap {
@@ -48,3 +44,13 @@ table.table .stretch {
 table.table th .sort-button i {
 	margin-left: 0.5rem;
 }
+
+.footer {
+	background-color: transparent;
+}
+
+.footer .container {
+	display: flex;
+	justify-content: flex-end;
+	opacity: 0.5;
+}

packages/server/src/app.ts

@@ -16,7 +16,6 @@ import ownerHandler from './middleware/ownerHandler';
 import setupAppContext from './utils/setupAppContext';
 import { initializeJoplinUtils } from './utils/joplinUtils';
 import startServices from './utils/startServices';
-// import { createItemTree } from './utils/testing/testUtils';
 
 const nodeEnvFile = require('node-env-file');
 const { shimInit } = require('@joplin/lib/shim-init-node.js');
@@ -87,7 +86,7 @@ async function main() {
 
 	if (!envVariables[env]) throw new Error(`Invalid env: ${env}`);
 
-	initConfig({
+	await initConfig({
 		...envVariables[env],
 		...process.env,
 	});
@@ -127,7 +126,7 @@ async function main() {
 	} else if (argv.createDb) {
 		await createDb(config().database);
 	} else {
-		appLogger().info(`Starting server (${env}) on port ${config().port} and PID ${process.pid}...`);
+		appLogger().info(`Starting server v${config().appVersion} (${env}) on port ${config().port} and PID ${process.pid}...`);
 		appLogger().info('Running in Docker:', runningInDocker());
 		appLogger().info('Public base URL:', config().baseUrl);
 		appLogger().info('API base URL:', config().apiBaseUrl);
@@ -153,38 +152,8 @@ async function main() {
 		appLogger().info('Starting services...');
 		await startServices(appContext);
 
-		// if (env !== Env.Prod) {
-		// 	const done = await handleDebugCommands(argv, appContext.db, config());
-		// 	if (done) {
-		// 		appLogger().info('Debug command has been executed. Now starting server...');
-		// 	}
-		// }
-
 		appLogger().info(`Call this for testing: \`curl ${config().apiBaseUrl}/api/ping\``);
 
-		// const tree: any = {
-		// 	'000000000000000000000000000000F1': {},
-		// 	'000000000000000000000000000000F2': {
-		// 		'00000000000000000000000000000001': null,
-		// 		'00000000000000000000000000000002': null,
-		// 	},
-		// 	'000000000000000000000000000000F3': {
-		// 		'00000000000000000000000000000003': null,
-		// 		'000000000000000000000000000000F4': {
-		// 			'00000000000000000000000000000004': null,
-		// 			'00000000000000000000000000000005': null,
-		// 		},
-		// 	},
-		// 	'00000000000000000000000000000006': null,
-		// 	'00000000000000000000000000000007': null,
-		// };
-
-		// const users = await appContext.models.user().all();
-
-		// const itemModel = appContext.models.item({ userId: users[0].id });
-
-		// await createItemTree(itemModel, '', tree);
-
 		app.listen(config().port);
 	}
 }

packages/server/src/config.ts

@@ -1,6 +1,7 @@
 import { rtrimSlashes } from '@joplin/lib/path-utils';
 import { Config, DatabaseConfig, DatabaseConfigClient, MailerConfig, RouteType } from './utils/types';
 import * as pathUtils from 'path';
+import { readFile } from 'fs-extra';
 
 export interface EnvVariables {
 	APP_BASE_URL?: string;
@@ -91,17 +92,31 @@ function baseUrlFromEnv(env: any, appPort: number): string {
 	}
 }
 
+interface PackageJson {
+	version: string;
+}
+
+async function readPackageJson(filePath: string): Promise<PackageJson> {
+	const text = await readFile(filePath, 'utf8');
+	return JSON.parse(text);
+}
+
 let config_: Config = null;
 
-export function initConfig(env: EnvVariables, overrides: any = null) {
+export async function initConfig(env: EnvVariables, overrides: any = null) {
 	runningInDocker_ = !!env.RUNNING_IN_DOCKER;
 
 	const rootDir = pathUtils.dirname(__dirname);
-	const viewDir = `${pathUtils.dirname(__dirname)}/src/views`;
+
+	const packageJson = await readPackageJson(`${rootDir}/package.json`);
+
+	const viewDir = `${rootDir}/src/views`;
 	const appPort = env.APP_PORT ? Number(env.APP_PORT) : 22300;
 	const baseUrl = baseUrlFromEnv(env, appPort);
 
 	config_ = {
+		appVersion: packageJson.version,
+		appName: 'Joplin Server',
 		rootDir: rootDir,
 		viewDir: viewDir,
 		layoutDir: `${viewDir}/layouts`,

packages/server/src/services/MustacheService.ts

@@ -27,6 +27,8 @@ interface GlobalParams {
 	notifications?: NotificationView[];
 	hasNotifications?: boolean;
 	owner?: User;
+	appVersion?: string;
+	appName?: string;
 }
 
 export function isView(o: any): boolean {
@@ -76,6 +78,8 @@ export default class MustacheService {
 		return {
 			baseUrl: config().baseUrl,
 			prefersDarkEnabled: this.prefersDarkEnabled_,
+			appVersion: config().appVersion,
+			appName: config().appName,
 		};
 	}
 

packages/server/src/utils/testing/testUtils.ts

@@ -66,7 +66,7 @@ export async function beforeAllDb(unitName: string) {
 	// Uncomment the code below to run the test units with Postgres. Run first
 	// `docker-compose -f docker-compose.db-dev.yml` to get a dev db.
 
-	// initConfig({
+	// await initConfig({
 	// 	DB_CLIENT: 'pg',
 	// 	POSTGRES_DATABASE: unitName,
 	// 	POSTGRES_USER: 'joplin',
@@ -75,7 +75,7 @@ export async function beforeAllDb(unitName: string) {
 	// 	tempDir: tempDir,
 	// });
 
-	initConfig({
+	await initConfig({
 		SQLITE_DATABASE: createdDbPath_,
 	}, {
 		tempDir: tempDir,

packages/server/src/utils/types.ts

@@ -58,6 +58,8 @@ export interface MailerConfig {
 }
 
 export interface Config {
+	appVersion: string;
+	appName: string;
 	port: number;
 	rootDir: string;
 	viewDir: string;

packages/server/src/views/layouts/default.mustache

@@ -4,7 +4,7 @@
 	<meta charset="utf-8">
 	<link rel="stylesheet" href="{{{global.baseUrl}}}/css/bulma.min.css" crossorigin="anonymous">
 	{{#global.prefersDarkEnabled}}
-		<link rel="stylesheet" href="{{{global.baseUrl}}}/css/bulma-prefers-dark.min.css" crossorigin="anonymous">
+		<!-- <link rel="stylesheet" href="{{{global.baseUrl}}}/css/bulma-prefers-dark.min.css" crossorigin="anonymous"> -->
 	{{/global.prefersDarkEnabled}}
 	<link rel="stylesheet" href="{{{global.baseUrl}}}/css/main.css" crossorigin="anonymous">
 	<link rel="stylesheet" href="{{{global.baseUrl}}}/css/fontawesome/css/all.min.css" crossorigin="anonymous">
@@ -19,8 +19,11 @@
 	<body class="page-{{{pageName}}}">
 		{{> navbar}}
 		<main class="main">
+			<div class="container">
 				{{> notifications}}
 				{{{contentHtml}}}
+			</div>
 		</main>
+		{{> footer}}
 	</body>
 </html>

packages/server/src/views/partials/footer.mustache

@@ -0,0 +1,5 @@
+<div class="footer">
+	<div class="container">
+		{{global.appName}} {{global.appVersion}}
+	</div>
+</div>

packages/server/src/views/partials/navbar.mustache

@@ -1,5 +1,6 @@
 {{#navbar}}
-	<nav class="navbar" role="navigation" aria-label="main navigation">
+	<nav class="navbar is-dark" role="navigation" aria-label="main navigation">
+		<div class="container">
 			<div class="navbar-brand logo-container">
 				<a class="navbar-item" href="{{{global.baseUrl}}}/home">
 					<img class="logo" src="{{{global.baseUrl}}}/images/Logo.png"/>
@@ -24,5 +25,6 @@
 					</div>
 				</div>
 			</div>
+		</div>
 	</nav>
 {{/navbar}}