Merge pull request '[PR]: Fixes #10284 and Fixes #10208; Allows Custom MOTD and Splash Icons on all pages, by passing in variables more consistantly - fixes a CSP issue preventing the site from loading' (#10285) from kartonrad/calckey:fix-motd-and-csp into develop

Reviewed-on: https://codeberg.org/calckey/calckey/pulls/10285

packages/backend/src/misc/fetch-meta.ts

@@ -3,6 +3,32 @@ import { Meta } from "@/models/entities/meta.js";
 
 let cache: Meta;
 
+export function metaToPugArgs(meta: Meta) : object {
+	let motd = ["Loading..."];
+	if (meta.customMOTD.length > 0) {
+		motd = meta.customMOTD;
+	}
+	let splashIconUrl = meta.iconUrl;
+	if (meta.customSplashIcons.length > 0) {
+		splashIconUrl =
+			meta.customSplashIcons[
+				Math.floor(Math.random() * meta.customSplashIcons.length)
+			];
+	}
+
+	return {
+		img: meta.bannerUrl,
+		title: meta.name || "Calckey",
+		instanceName: meta.name || "Calckey",
+		desc: meta.description,
+		icon: meta.iconUrl,
+		splashIcon: splashIconUrl,
+		themeColor: meta.themeColor,
+		randomMOTD: motd[Math.floor(Math.random() * motd.length)],
+		privateMode: meta.privateMode,
+	}
+}
+
 export async function fetchMeta(noCache = false): Promise<Meta> {
 	if (!noCache && cache) return cache;
 

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

@@ -16,7 +16,7 @@ import { BullAdapter } from "@bull-board/api/bullAdapter.js";
 import { KoaAdapter } from "@bull-board/koa";
 
 import { In, IsNull } from "typeorm";
-import { fetchMeta } from "@/misc/fetch-meta.js";
+import { fetchMeta, metaToPugArgs } from "@/misc/fetch-meta.js";
 import config from "@/config/index.js";
 import {
 	Users,
@@ -362,15 +362,12 @@ const userPage: Router.Middleware = async (ctx, next) => {
 		: [];
 
 	const userDetail = {
+		...metaToPugArgs(meta),
 		user,
 		profile,
 		me,
 		avatarUrl: await Users.getAvatarUrl(user),
-		sub: subParam,
+		sub: subParam
-		instanceName: meta.name || "Calckey",
-		icon: meta.iconUrl,
-		themeColor: meta.themeColor,
-		privateMode: meta.privateMode,
 	};
 
 	await ctx.render("user", userDetail);
@@ -408,6 +405,7 @@ router.get("/notes/:note", async (ctx, next) => {
 			});
 			const meta = await fetchMeta();
 			await ctx.render("note", {
+				...metaToPugArgs(meta),
 				note: _note,
 				profile,
 				avatarUrl: await Users.getAvatarUrl(
@@ -415,16 +413,12 @@ router.get("/notes/:note", async (ctx, next) => {
 				),
 				// TODO: Let locale changeable by instance setting
 				summary: getNoteSummary(_note),
-				instanceName: meta.name || "Calckey",
-				icon: meta.iconUrl,
-				privateMode: meta.privateMode,
-				themeColor: meta.themeColor,
 			});
 
 			ctx.set("Cache-Control", "public, max-age=15");
 			ctx.set(
 				"Content-Security-Policy",
-				"default-src 'self'; frame-ancestors '*'",
+				"default-src 'self' 'unsafe-inline'; img-src '*'; frame-ancestors '*'",
 			);
 
 			return;
@@ -445,17 +439,14 @@ router.get("/posts/:note", async (ctx, next) => {
 		const profile = await UserProfiles.findOneByOrFail({ userId: note.userId });
 		const meta = await fetchMeta();
 		await ctx.render("note", {
+			...metaToPugArgs(meta),
 			note: _note,
 			profile,
 			avatarUrl: await Users.getAvatarUrl(
 				await Users.findOneByOrFail({ id: note.userId }),
 			),
 			// TODO: Let locale changeable by instance setting
-			summary: getNoteSummary(_note),
+			summary: getNoteSummary(_note)
-			instanceName: meta.name || "Calckey",
-			icon: meta.iconUrl,
-			privateMode: meta.privateMode,
-			themeColor: meta.themeColor,
 		});
 
 		ctx.set("Cache-Control", "public, max-age=15");
@@ -486,15 +477,12 @@ router.get("/@:user/pages/:page", async (ctx, next) => {
 		const profile = await UserProfiles.findOneByOrFail({ userId: page.userId });
 		const meta = await fetchMeta();
 		await ctx.render("page", {
+			...metaToPugArgs(meta),
 			page: _page,
 			profile,
 			avatarUrl: await Users.getAvatarUrl(
 				await Users.findOneByOrFail({ id: page.userId }),
-			),
+			)
-			instanceName: meta.name || "Calckey",
-			icon: meta.iconUrl,
-			themeColor: meta.themeColor,
-			privateMode: meta.privateMode,
 		});
 
 		if (["public"].includes(page.visibility)) {
@@ -521,15 +509,12 @@ router.get("/clips/:clip", async (ctx, next) => {
 		const profile = await UserProfiles.findOneByOrFail({ userId: clip.userId });
 		const meta = await fetchMeta();
 		await ctx.render("clip", {
+			...metaToPugArgs(meta),
 			clip: _clip,
 			profile,
 			avatarUrl: await Users.getAvatarUrl(
 				await Users.findOneByOrFail({ id: clip.userId }),
-			),
+			)
-			instanceName: meta.name || "Calckey",
-			privateMode: meta.privateMode,
-			icon: meta.iconUrl,
-			themeColor: meta.themeColor,
 		});
 
 		ctx.set("Cache-Control", "public, max-age=15");
@@ -549,15 +534,12 @@ router.get("/gallery/:post", async (ctx, next) => {
 		const profile = await UserProfiles.findOneByOrFail({ userId: post.userId });
 		const meta = await fetchMeta();
 		await ctx.render("gallery-post", {
+			...metaToPugArgs(meta),
 			post: _post,
 			profile,
 			avatarUrl: await Users.getAvatarUrl(
 				await Users.findOneByOrFail({ id: post.userId }),
-			),
+			)
-			instanceName: meta.name || "Calckey",
-			icon: meta.iconUrl,
-			themeColor: meta.themeColor,
-			privateMode: meta.privateMode,
 		});
 
 		ctx.set("Cache-Control", "public, max-age=15");
@@ -578,11 +560,8 @@ router.get("/channels/:channel", async (ctx, next) => {
 		const _channel = await Channels.pack(channel);
 		const meta = await fetchMeta();
 		await ctx.render("channel", {
-			channel: _channel,
+			...metaToPugArgs(meta),
-			instanceName: meta.name || "Calckey",
+			channel: _channel
-			icon: meta.iconUrl,
-			themeColor: meta.themeColor,
-			privateMode: meta.privateMode,
 		});
 
 		ctx.set("Cache-Control", "public, max-age=15");
@@ -633,27 +612,9 @@ router.get("/api/v1/streaming", async (ctx) => {
 // Render base html for all requests
 router.get("(.*)", async (ctx) => {
 	const meta = await fetchMeta();
-	let motd = ["Loading..."];
+	
-	if (meta.customMOTD.length > 0) {
-		motd = meta.customMOTD;
-	}
-	let splashIconUrl = meta.iconUrl;
-	if (meta.customSplashIcons.length > 0) {
-		splashIconUrl =
-			meta.customSplashIcons[
-				Math.floor(Math.random() * meta.customSplashIcons.length)
-			];
-	}
 	await ctx.render("base", {
-		img: meta.bannerUrl,
+		...metaToPugArgs(meta)
-		title: meta.name || "Calckey",
-		instanceName: meta.name || "Calckey",
-		desc: meta.description,
-		icon: meta.iconUrl,
-		splashIcon: splashIconUrl,
-		themeColor: meta.themeColor,
-		randomMOTD: motd[Math.floor(Math.random() * motd.length)],
-		privateMode: meta.privateMode,
 	});
 	ctx.set("Cache-Control", "public, max-age=3");
 });