add: Custom MOTDs

This works almost exactly like FF's custom MOTDs with the only difference being that they get defined in the config file for performance reasons.

Closes #86

.config/docker_example.yml

@@ -199,5 +199,7 @@ signToActivityPubGet: true
 #  '127.0.0.1/32'
 #]
 
+#customMOTD: ['Hello World', 'The sharks rule all', 'Shonks']
+
 # Upload or download file size limits (bytes)
 #maxFileSize: 262144000

.config/example.yml

@@ -214,6 +214,8 @@ signToActivityPubGet: true
 #  '127.0.0.1/32'
 #]
 
+#customMOTD: ['Hello World', 'The sharks rule all', 'Shonks']
+
 # Upload or download file size limits (bytes)
 #maxFileSize: 262144000
 

packages/backend/src/config.ts

@@ -85,6 +85,8 @@ type Source = {
 	proxyRemoteFiles?: boolean;
 	videoThumbnailGenerator?: string;
 
+	customMOTD?: string[];
+
 	signToActivityPubGet?: boolean;
 
 	perChannelMaxNoteCacheCount?: number;
@@ -142,6 +144,7 @@ export type Config = {
 	deliverJobMaxAttempts: number | undefined;
 	inboxJobMaxAttempts: number | undefined;
 	proxyRemoteFiles: boolean | undefined;
+	customMOTD: string[] | undefined;
 	signToActivityPubGet: boolean | undefined;
 
 	version: string;
@@ -248,6 +251,7 @@ export function loadConfig(): Config {
 		deliverJobMaxAttempts: config.deliverJobMaxAttempts,
 		inboxJobMaxAttempts: config.inboxJobMaxAttempts,
 		proxyRemoteFiles: config.proxyRemoteFiles,
+		customMOTD: config.customMOTD,
 		signToActivityPubGet: config.signToActivityPubGet,
 		mediaProxy: externalMediaProxy ?? internalMediaProxy,
 		externalMediaProxyEnabled: externalMediaProxy !== null && externalMediaProxy !== internalMediaProxy,

packages/backend/src/server/web/ClientServerService.ts

@@ -178,6 +178,7 @@ export class ClientServerService {
 			infoImageUrl: meta.infoImageUrl ?? 'https://launcher.moe/nothinghere.png',
 			notFoundImageUrl: meta.notFoundImageUrl ?? 'https://launcher.moe/missingpage.webp',
 			instanceUrl: this.config.url,
+			randomMOTD: this.config.customMOTD ? this.config.customMOTD[Math.floor(Math.random() * this.config.customMOTD.length)] : undefined,
 		};
 	}
 

packages/backend/src/server/web/style.css

@@ -44,7 +44,7 @@ html {
 	display: inline-block;
 	width: 28px;
 	height: 28px;
-	transform: translateY(70px);
+	transform: translateY(80px);
 	color: var(--accent);
 }
 #splashSpinner > .spinner {
@@ -74,3 +74,17 @@ html {
 		transform: rotate(360deg);
 	}
 }
+
+#splashText {
+	position: absolute;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	left: 0;
+	margin: auto;
+	display: inline-block;
+	width: 70%;
+	height: 0;
+	text-align: center;
+	transform: translateY(40px);
+}

packages/backend/src/server/web/views/base.pug

@@ -85,6 +85,9 @@ html
 			| Please turn on your JavaScript
 		div#splash
 			img#splashIcon(src= icon || '/static-assets/splash.png')
+			span#splashText
+				block randomMOTD
+					= randomMOTD
 			div#splashSpinner
 				<svg class="spinner bg" viewBox="0 0 152 152" xmlns="http://www.w3.org/2000/svg">
 					<g transform="matrix(1,0,0,1,12,12)">