Release

.gitignore

@@ -6,4 +6,9 @@ newman
 config.json
 uploads/
 
-.docker/mitmproxy-data
+.docker/mitmproxy-data
+.DS_Store
+
+# auto generated files
+apps/juxtaposition-ui/webfiles/ctr/css/sprites.css
+apps/juxtaposition-ui/webfiles/ctr/images/sprites.png

apps/juxtaposition-ui/eslint.config.mjs

@@ -15,11 +15,16 @@ export default defineConfig([
 		rules: {
 			'no-restricted-imports': 'off' // It's a special compile step, we can't use path aliases
 		},
-		files: ['src/webfiles/**/*.js']
+		files: ['webfiles/**/*.js', 'webfiles/**/*.ts']
 	},
 	{
 		// Rules that apply to the 3DS (CTR) and Wii U (Portal) browsers
-		files: ['src/webfiles/ctr/**/*.js', 'src/webfiles/portal/**/*.js'],
+		files: [
+			'webfiles/ctr/**/*.js',
+			'webfiles/ctr/**/*.ts',
+			'webfiles/portal/**/*.js',
+			'webfiles/portal/**/*.ts'
+		],
 		rules: {
 			'no-var': 'off' // 3DS and Wii U browsers need to use var
 		},
@@ -46,6 +51,6 @@ export default defineConfig([
 				...globals.builtin
 			}
 		},
-		ignores: ['src/webfiles/**/*.js']
+		ignores: ['webfiles/**/*.js', 'webfiles/**/*.ts']
 	}
 ]);

apps/juxtaposition-ui/nodemon.json

@@ -1,8 +1,13 @@
 {
   "watch": [
-    "src/"
+    "src/",
+    "webfiles/"
   ],
   "ext": "js,ts,ejs,tsx,jsx,json,css",
+  "ignore": [
+    "webfiles/ctr/css/sprites.css",
+    "webfiles/ctr/images/sprites.png"
+  ],
   "env": {
     "NODE_ENV": "development"
   }

apps/juxtaposition-ui/package.json

@@ -13,52 +13,60 @@
     "lint": "eslint .",
     "lint:fix": "eslint . --fix",
     "build": "tsup && tsc --noEmit",
-    "start": "node --enable-source-maps dist/server.js"
+    "start": "node --enable-source-maps dist/server.js",
+    "build:sprites": "node scripts/sprites.ts"
   },
   "dependencies": {
-    "@aws-sdk/client-s3": "^3.958.0",
-    "@imagemagick/magick-wasm": "^0.0.37",
+    "@aws-sdk/client-s3": "^3.980.0",
+    "@imagemagick/magick-wasm": "^0.0.38",
     "@neato/config": "^4.1.0",
-    "@pretendonetwork/grpc": "^2.3.5",
+    "@pretendonetwork/grpc": "^2.4.1",
     "@repo/grpc-client": "^0.0.0",
     "classnames": "^2.5.1",
-    "colors": "^1.4.0",
     "connect-redis": "^9.0.0",
     "cookie-parser": "^1.4.7",
     "crc": "^4.3.2",
-    "ejs": "^3.1.10",
-    "esbuild-plugin-copy": "^2.1.1",
-    "express": "^4.21.2",
+    "ejs": "^4.0.1",
+    "express": "^4.22.1",
     "express-async-errors": "^3.1.1",
     "express-prom-bundle": "^7.0.2",
-    "express-rate-limit": "^8.1.0",
-    "express-session": "^1.18.2",
+    "express-rate-limit": "^8.2.1",
+    "express-session": "^1.19.0",
     "express-subdomain": "^1.0.6",
     "hashmap": "^2.4.0",
     "luxon": "^3.7.2",
+    "method-override": "^3.0.0",
     "moment": "^2.30.1",
-    "mongoose": "^8.19.2",
+    "mongoose": "^8.22.0",
     "mongoose-fuzzy-search-next": "^1.0.13",
     "multer": "^2.0.2",
     "nice-grpc": "^2.1.14",
     "node-snowflake": "0.0.1",
     "pako": "^2.1.0",
     "pino": "^10.1.0",
     "pino-http": "^11.0.0",
-    "pino-pretty": "^13.1.2",
+    "pino-pretty": "^13.1.3",
     "pjax": "^0.2.8",
     "prom-client": "^15.1.3",
     "react": "^19.1.1",
-    "react-dom": "^19.2.0",
+    "react-dom": "^19.2.4",
     "redis": "^5.10.0",
-    "tsx": "^4.20.6",
-    "zod": "^4.1.13"
+    "tsx": "^4.21.0",
+    "zod": "^4.3.6"
   },
   "devDependencies": {
+    "@pretendonetwork/cave-types": "^1.0.2",
     "@pretendonetwork/eslint-config": "^0.1.3",
+    "@pretendonetwork/wiiu-browser-types": "^1.0.0",
+    "@pretendonetwork/wiiu-dialog-types": "^1.0.0",
+    "@pretendonetwork/wiiu-error-viewer-types": "^1.0.0",
+    "@repo/esbuild-plugin-oxipng": "^0.0.0",
+    "@repo/esbuild-plugin-spritesmith": "^0.0.0",
+    "@types/cookie-parser": "^1.4.10",
     "@types/express-session": "^1.18.2",
     "@types/hashmap": "^2.3.4",
     "@types/luxon": "^3.7.1",
+    "@types/method-override": "^3.0.0",
     "@types/node": "^22.19.1",
     "@types/react": "^19.1.13",
     "@types/react-dom": "^19.2.3",
@@ -67,7 +75,8 @@
     "ejs-lint": "^2.0.1",
     "esbuild-fix-imports-plugin": "^1.0.23",
     "esbuild-raw-plugin": "^0.3.1",
-    "eslint": "^9.39.1",
+    "esbuild-plugin-copy": "^2.1.1",
+    "eslint": "^9.39.2",
     "globals": "^16.5.0",
     "nodemon": "^3.1.11",
     "npm-run-all": "^4.1.5",

apps/juxtaposition-ui/src/api/post.ts

@@ -89,11 +89,12 @@ export async function getPostsByEmpathy(tokens: UserTokens, empathy_by: number,
 	return posts;
 }
 
-export async function getPostsByParentId(tokens: UserTokens, parent_id: string, offset: number): Promise<PageDto<PostDto> | null> {
+export async function getPostsByParentId(tokens: UserTokens, parent_id: string, offset: number, limit: number): Promise<PageDto<PostDto> | null> {
 	const posts = await apiFetchUser<PageDto<PostDto>>(tokens, `/api/v1/posts`, {
 		query: {
 			parent_id: parent_id,
 			offset,
+			limit,
 			include_replies: true,
 			sort: 'oldest'
 		}

apps/juxtaposition-ui/src/config.ts

@@ -34,6 +34,8 @@ const schema = z.object({
 	whitelist: z.string(),
 	/** Environment (prod/test/dev) to use for Discovery and access_level control. */
 	serverEnvironment: z.string(),
+	/** By default, only consoles can reach the console domains. This setting disable that constraint */
+	disableConsoleChecks: z.stringbool().default(false),
 	/** The AES key to use for decrypting service tokens. Must match the account server's. */
 	aesKey: z.string(),
 	mongoose: z.object({
@@ -78,6 +80,7 @@ export const presets = {
 		cdnDomain: 'https://cdn.pretendo.cc/miiverse',
 		whitelist: '',
 		serverEnvironment: 'prod',
+		disableConsoleChecks: true,
 		aesKey: '1234567812345678123456781234567812345678123456781234567812345678',
 		mongoose: {
 			uri: 'mongodb://localhost:27017/miiverse?directConnection=true'

apps/juxtaposition-ui/src/database.js

@@ -34,6 +34,10 @@ function verifyConnected() {
 	}
 }
 
+export function notBanned() {
+	return { account_status: { $in: [0, 1] } };
+}
+
 async function getCommunities(numberOfCommunities, offset) {
 	verifyConnected();
 	if (!offset) {
@@ -288,7 +292,8 @@ async function getUserContent(pid) {
 async function getFollowingUsers(content) {
 	verifyConnected();
 	return SETTINGS.find({
-		pid: content.following_users
+		pid: content.following_users,
+		...notBanned()
 	});
 }
 

apps/juxtaposition-ui/src/metrics.ts

@@ -4,19 +4,19 @@ import express from 'express';
 import { logger } from '@/logger';
 import { config } from '@/config';
 import { SETTINGS } from '@/models/settings';
-import type { Express } from 'express';
+import type { Express, NextFunction, Request, Response } from 'express';
 
 export const onlineNowGauge = new Gauge({
 	name: 'juxtaposition_online_users_now',
 	help: 'Users active in the last 10 minutes',
 	async collect(): Promise<void> {
 		const onlineRangeMs = 10 * 60 * 1000; // 10 minutes
 		const cutoff = new Date(Date.now() - onlineRangeMs);
-		const [{ n }] = await SETTINGS.aggregate<{ n: number }>([
+		const [result] = await SETTINGS.aggregate<{ n: number } | undefined>([
 			{ $match: { last_active: { $gt: cutoff } } },
 			{ $count: 'n' }
 		]);
-		this.set(n);
+		this.set(result?.n ?? 0);
 	}
 });
 
@@ -26,11 +26,11 @@ export const activeMonthlyGauge = new Gauge({
 	async collect(): Promise<void> {
 		const monthlyRangeMs = 30 * 24 * 60 * 60 * 1000;
 		const cutoff = new Date(Date.now() - monthlyRangeMs);
-		const [{ n }] = await SETTINGS.aggregate<{ n: number }>([
+		const [result] = await SETTINGS.aggregate<{ n: number } | undefined>([
 			{ $match: { last_active: { $gt: cutoff } } },
 			{ $count: 'n' }
 		]);
-		this.set(n);
+		this.set(result?.n ?? 0);
 	}
 });
 
@@ -40,11 +40,11 @@ export const activeYearlyGauge = new Gauge({
 	async collect(): Promise<void> {
 		const yearlyRangeMs = 365 * 24 * 60 * 60 * 1000;
 		const cutoff = new Date(Date.now() - yearlyRangeMs);
-		const [{ n }] = await SETTINGS.aggregate<{ n: number }>([
+		const [result] = await SETTINGS.aggregate<{ n: number } | undefined>([
 			{ $match: { last_active: { $gt: cutoff } } },
 			{ $count: 'n' }
 		]);
-		this.set(n);
+		this.set(result?.n ?? 0);
 	}
 });
 
@@ -87,6 +87,11 @@ export function registerMetrics(app: Express): Express {
 		}));
 	}
 
+	metrics.use((error: Error, req: Request, res: Response, _next: NextFunction) => {
+		logger.error(error, 'Request failed!');
+		res.sendStatus(500);
+	});
+
 	return metrics;
 }
 

apps/juxtaposition-ui/src/middleware/checkBan.ts → apps/juxtaposition-ui/src/middleware/checkBan.tsx

@@ -2,6 +2,10 @@ import moment from 'moment';
 import { database as db } from '@/database';
 import { config } from '@/config';
 import { humanDate, humanFromNow } from '@/util';
+import { WebLoginView } from '@/services/juxt-web/views/web/loginView';
+import { buildContext } from '@/services/juxt-web/views/context';
+import { CtrFatalErrorView } from '@/services/juxt-web/views/ctr/errorView';
+import { PortalFatalErrorView } from '@/services/juxt-web/views/portal/errorView';
 import type { RequestHandler } from 'express';
 
 export const checkBan: RequestHandler = async (request, response, next) => {
@@ -41,14 +45,13 @@ export const checkBan: RequestHandler = async (request, response, next) => {
 
 	if (!accessAllowed) {
 		response.status(500);
-		if (request.directory === 'web') {
-			return response.render('web/login.ejs', { toast: 'No access. Must be tester or dev', redirect: request.originalUrl });
-		} else {
-			return response.render('portal/error_fatal.ejs', {
-				code: 5989999,
-				message: 'No access. Must be tester or dev'
-			});
-		}
+		const banMessage = 'No access. Must be tester or dev';
+		const banCode = 5989999;
+		return response.jsxForDirectory({
+			web: <WebLoginView ctx={buildContext(response)} toast={banMessage} redirect={request.originalUrl} />,
+			portal: <PortalFatalErrorView code={banCode} message={banMessage} />,
+			ctr: <CtrFatalErrorView code={banCode} message={banMessage} />
+		});
 	}
 	const userSettings = await db.getUserSettings(request.pid);
 	if (userSettings && moment(userSettings.ban_lift_date) <= moment() && userSettings.account_status !== 3) {
@@ -79,17 +82,11 @@ export const checkBan: RequestHandler = async (request, response, next) => {
 		}
 		banMessage += `\n\nIf you have any questions, please contact the moderators on the Pretendo Network Forum (https://preten.do/ban-appeal/).`;
 
-		if (request.directory === 'web') {
-			return response.render('web/login.ejs', {
-				toast: banMessage,
-				redirect: request.originalUrl
-			});
-		} else {
-			return response.render(request.directory + '/error_fatal.ejs', {
-				message: banMessage,
-				code: banCode
-			});
-		}
+		return response.jsxForDirectory({
+			web: <WebLoginView ctx={buildContext(response)} toast={banMessage} redirect={request.originalUrl} />,
+			portal: <PortalFatalErrorView code={banCode} message={banMessage} />,
+			ctr: <CtrFatalErrorView code={banCode} message={banMessage} />
+		});
 	}
 
 	if (userSettings) {

apps/juxtaposition-ui/src/middleware/consoleAuth.ts → apps/juxtaposition-ui/src/middleware/consoleAuth.tsx

@@ -1,7 +1,16 @@
 import { config } from '@/config';
 import { logger } from '@/logger';
+import { CtrFatalErrorView } from '@/services/juxt-web/views/ctr/errorView';
+import { PortalFatalErrorView } from '@/services/juxt-web/views/portal/errorView';
 import { decodeParamPack, getPIDFromServiceToken, getUserAccountData, getUserDataFromToken, processLanguage } from '@/util';
-import type { RequestHandler } from 'express';
+import type { RequestHandler, Response } from 'express';
+
+function renderAuthError(res: Response, code: number, message: string): void {
+	res.jsxForDirectory({
+		portal: <PortalFatalErrorView code={code} message={message} />,
+		ctr: <CtrFatalErrorView code={code} message={message} />
+	});
+}
 
 export const consoleAuth: RequestHandler = async (request, response, next) => {
 	// Get pid and fetch user data
@@ -24,11 +33,11 @@ export const consoleAuth: RequestHandler = async (request, response, next) => {
 	request.paramPackData = ppack ? decodeParamPack(ppack) : null;
 	response.header('X-Nintendo-WhiteList', config.whitelist);
 
-	if (!request.user) {
+	if (!request.user && request.cookies.access_token) {
 		try {
-			// Developer accounts may also use an OAuth token for console frontends
+			// Developer accounts may bypass console checks
 			const user = await getUserDataFromToken(request.cookies.access_token);
-			if (user.accessLevel === 3) {
+			if (user.accessLevel === 3 || config.disableConsoleChecks) {
 				request.user = await getUserAccountData(user.pid);
 				request.pid = user.pid;
 
@@ -50,32 +59,23 @@ export const consoleAuth: RequestHandler = async (request, response, next) => {
 		}
 	}
 
+	const mayBypassAuthChecks = request.user?.accessLevel === 3 || config.disableConsoleChecks;
+
 	// This section includes checks if a user is a developer and adds exceptions for these cases
 	if (!request.pid) {
-		return response.render('portal/error_fatal.ejs', {
-			code: 5989999,
-			message: 'Unable to parse service token. Are you using a Nintendo Network ID?'
-		});
+		return renderAuthError(response, 5989999, 'Unable to parse service token. Are you using a Nintendo Network ID?');
 	}
 	if (!request.user) {
-		return response.render('portal/error_fatal.ejs', {
-			code: 5989999,
-			message: 'Unable to fetch user data. Please try again later.'
-		});
+		return renderAuthError(response, 5989999, 'Unable to fetch user data. Please try again later.');
 	}
-	if (request.user.accessLevel < 3 && !request.paramPackData) {
-		return response.render('portal/error_fatal.ejs', {
-			code: 5989999,
-			message: 'Missing auth headers'
-		});
+
+	if (!mayBypassAuthChecks && !request.paramPackData) {
+		return renderAuthError(response, 5989999, 'Missing auth headers');
 	}
 	const userAgent = request.get('user-agent') ?? '';
 	const uaIsConsole = userAgent.includes('Nintendo WiiU') || userAgent.includes('Nintendo 3DS');
-	if (request.user.accessLevel < 3 && (request.cookies.access_token || !uaIsConsole)) {
-		return response.render('portal/error_fatal.ejs', {
-			code: 5989999,
-			message: 'Invalid authentication method used.'
-		});
+	if (!mayBypassAuthChecks && !uaIsConsole) {
+		return renderAuthError(response, 5989999, 'Invalid authentication method used.');
 	}
 
 	response.locals.uaIsConsole = uaIsConsole;